From 1983a65eac9fb3ceab64674afe863bfa46bbf194 Mon Sep 17 00:00:00 2001 From: jannisvisser Date: Thu, 19 Dec 2024 11:57:15 +0100 Subject: [PATCH 1/5] fix: also call updateLayer if layer not active AB#32327 --- interfaces/IBF-dashboard/src/app/services/map.service.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/interfaces/IBF-dashboard/src/app/services/map.service.ts b/interfaces/IBF-dashboard/src/app/services/map.service.ts index 32461919d..22c295154 100644 --- a/interfaces/IBF-dashboard/src/app/services/map.service.ts +++ b/interfaces/IBF-dashboard/src/app/services/map.service.ts @@ -600,7 +600,7 @@ export class MapService { if (this.layerDataCache[layerDataCacheKey]) { const layerData = this.layerDataCache[layerDataCacheKey]; this.updateLayer(layer)(layerData); - } else if (layer.active) { + } else { this.getLayerData(layer).subscribe((layerDataResponse) => { this.layerDataCache[layerDataCacheKey] = layerDataResponse; this.updateLayer(layer)(layerDataResponse); From 5b51f70c9d9e06137c52be5ebd1262aee40bff1b Mon Sep 17 00:00:00 2001 From: jannisvisser Date: Thu, 19 Dec 2024 12:13:36 +0100 Subject: [PATCH 2/5] chore: unskip test AB#32328 --- tests/e2e/README.md | 2 +- .../AggregatesSection/AggregatesHasDynamicTitle.spec.ts | 8 ++------ 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/tests/e2e/README.md b/tests/e2e/README.md index d2a6bd199..f3ee20926 100644 --- a/tests/e2e/README.md +++ b/tests/e2e/README.md @@ -37,7 +37,7 @@ Then, in _this_ folder, run: npm install ``` -The, install Playwright Browsers(-drivers): +Then, install Playwright Browsers(-drivers): ```shell npx playwright install diff --git a/tests/e2e/tests/AggregatesSection/AggregatesHasDynamicTitle.spec.ts b/tests/e2e/tests/AggregatesSection/AggregatesHasDynamicTitle.spec.ts index bc059eee9..d531ce620 100644 --- a/tests/e2e/tests/AggregatesSection/AggregatesHasDynamicTitle.spec.ts +++ b/tests/e2e/tests/AggregatesSection/AggregatesHasDynamicTitle.spec.ts @@ -33,12 +33,8 @@ test.beforeEach(async ({ page }) => { NoTriggerDataSet.UserPassword, ); }); -// The test is skipped because of the bug that was identified during writing of this test -// The bug is that the marker of glofas stations cannot be disabled with the first chebox click (needs several) and it is failing on flood disaster type -// https://github.com/rodekruis/IBF-system/issues/1657 -// When the bug is fixed, the test should be unskipped -// https://app.qase.io/project/IBF?case=12&previewMode=side&suite=7 -test.skip( + +test( qase( 12, 'Aggregates title should be dynamic upon hovering over map district', From 5b4fbfc5d7173cc4dcb7b4fb91989792dd0e6523 Mon Sep 17 00:00:00 2001 From: jannisvisser Date: Thu, 19 Dec 2024 12:40:21 +0100 Subject: [PATCH 3/5] chore: process some lint warnings in map.service AB#32329 --- .../src/app/services/map.service.ts | 100 ++++++++++-------- 1 file changed, 55 insertions(+), 45 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/services/map.service.ts b/interfaces/IBF-dashboard/src/app/services/map.service.ts index 22c295154..97b306912 100644 --- a/interfaces/IBF-dashboard/src/app/services/map.service.ts +++ b/interfaces/IBF-dashboard/src/app/services/map.service.ts @@ -20,6 +20,7 @@ import { AdminLevel, AdminLevelType } from 'src/app/types/admin-level'; import { DisasterTypeKey } from 'src/app/types/disaster-type-key'; import { EventState } from 'src/app/types/event-state'; import { + ColorBreaks, IbfLayer, IbfLayerGroup, IbfLayerLabel, @@ -44,12 +45,16 @@ export class MapService { private stoppedTriggerColor = 'var(--ion-color-ibf-black)'; private triggeredAreaColor = 'var(--ion-color-ibf-outline-red)'; private nonTriggeredAreaColor = 'var(--ion-color-ibf-no-alert-primary)'; - private disputedBorderStyle = { + private disputedBorderStyle: { + weight: number; + dashArray: string; + color: string; + } = { weight: 2, dashArray: '5 5', color: null, }; - private layerDataCache = {}; + private layerDataCache: Record = {}; public state = { bounds: [ @@ -192,7 +197,7 @@ export class MapService { }); }; - private async loadLayers() { + private loadLayers() { this.layers = []; this.layerSubject.next(null); @@ -355,8 +360,9 @@ export class MapService { adminLevel: AdminLevel, ) { this.addLayer({ - name: `${IbfLayerGroup.adminRegions}${adminLevel}` as IbfLayerName, - label: `${IbfLayerGroup.adminRegions}${adminLevel}` as IbfLayerLabel, + name: `${IbfLayerGroup.adminRegions}${adminLevel.toString()}` as IbfLayerName, + label: + `${IbfLayerGroup.adminRegions}${adminLevel.toString()}` as IbfLayerLabel, group: IbfLayerGroup.adminRegions, type: IbfLayerType.shape, description: '', @@ -480,7 +486,7 @@ export class MapService { private addLayer(layer: IbfLayer): void { const { name, viewCenter, data } = layer; - if (viewCenter && data && data.features && data.features.length) { + if (viewCenter && data?.features?.length) { const layerBounds = bbox(data); this.state.bounds = containsNumber(layerBounds) ? ([ @@ -546,32 +552,33 @@ export class MapService { : interactedLayer.show; }; - private updateLayer = (layer: IbfLayer) => (layerData) => { - this.addLayer({ - name: layer.name, - label: layer.label, - type: layer.type, - description: layer.description, - active: this.adminLevelService.activeLayerNames.length - ? this.adminLevelService.activeLayerNames.includes(layer.name) - : layer.active, - viewCenter: false, - data: layerData, - wms: layer.wms, - colorProperty: - layer.group === IbfLayerGroup.adminRegions - ? this.disasterType.actionsUnit - : layer.colorProperty, - colorBreaks: layer.colorBreaks, - numberFormatMap: layer.numberFormatMap, - legendColor: layer.legendColor, - group: layer.group, - order: layer.order, - unit: layer.unit, - dynamic: layer.dynamic, - show: layer.show, - }); - }; + private updateLayer = + (layer: IbfLayer) => (layerData: GeoJSON.FeatureCollection) => { + this.addLayer({ + name: layer.name, + label: layer.label, + type: layer.type, + description: layer.description, + active: this.adminLevelService.activeLayerNames.length + ? this.adminLevelService.activeLayerNames.includes(layer.name) + : layer.active, + viewCenter: false, + data: layerData, + wms: layer.wms, + colorProperty: + layer.group === IbfLayerGroup.adminRegions + ? this.disasterType.actionsUnit + : layer.colorProperty, + colorBreaks: layer.colorBreaks, + numberFormatMap: layer.numberFormatMap, + legendColor: layer.legendColor, + group: layer.group, + order: layer.order, + unit: layer.unit, + dynamic: layer.dynamic, + show: layer.show, + }); + }; public toggleLayer = (layer: IbfLayer): void => { layer.active = !layer.active; @@ -583,7 +590,7 @@ export class MapService { if (layerName === IbfLayerName.waterpoints) { return `${this.country.countryCodeISO3}_${layerName}`; } else { - return `${this.country.countryCodeISO3}_${this.disasterType.disasterType}_${this.timelineState.activeLeadTime}_${this.adminLevel}_${layerName}`; + return `${this.country.countryCodeISO3}_${this.disasterType.disasterType}_${this.timelineState.activeLeadTime}_${this.adminLevel.toString()}_${layerName}`; } } @@ -598,7 +605,8 @@ export class MapService { layer.active = this.isLayerActive(layer, newLayer); layer.show = this.isLayerShown(layer, newLayer); if (this.layerDataCache[layerDataCacheKey]) { - const layerData = this.layerDataCache[layerDataCacheKey]; + const layerData: GeoJSON.FeatureCollection = + this.layerDataCache[layerDataCacheKey]; this.updateLayer(layer)(layerData); } else { this.getLayerData(layer).subscribe((layerDataResponse) => { @@ -650,9 +658,7 @@ export class MapService { ) .pipe(shareReplay(1)); } else if (layer.group === IbfLayerGroup.adminRegions) { - const adminLevel = Number( - layer.name.substr(layer.name.length - 1), - ) as AdminLevel; + const adminLevel = Number(layer.name.slice(-1)) as AdminLevel; layerData = this.apiService .getAdminRegions( this.country.countryCodeISO3, @@ -753,7 +759,7 @@ export class MapService { getAdminRegionFillColor = ( colorPropertyValue, - colorThreshold, + colorThreshold: { break0: number }, placeCode: string, placeCodeParent: string, ): string => { @@ -856,7 +862,7 @@ export class MapService { }; adminLevelLowerThanDefault = (name: IbfLayerName): boolean => { - return name.substr(name.length - 1) < String(this.adminLevel); + return name.slice(-1) < String(this.adminLevel); }; getAdminRegionColor = (layer: IbfLayer): string => { @@ -865,7 +871,11 @@ export class MapService { : this.state.transparentColor; }; - public getColorThreshold = (adminRegions, colorProperty, colorBreaks) => { + public getColorThreshold = ( + adminRegions: GeoJSON.FeatureCollection, + colorProperty: string, + colorBreaks: ColorBreaks, + ): { break0: number } => { if (colorBreaks) { const colorThresholdWithBreaks = { break0: 0, @@ -878,11 +888,11 @@ export class MapService { }); return colorThresholdWithBreaks; } - const colorPropertyValues = adminRegions.features + const colorPropertyValues: number[] = adminRegions.features .map((feature) => typeof feature.properties[colorProperty] !== 'undefined' ? feature.properties[colorProperty] - : feature.properties.indicators?.[colorProperty], + : feature.properties['indicators']?.[colorProperty], ) .filter((v, i, a) => a.indexOf(v) === i); @@ -926,14 +936,14 @@ export class MapService { public setAdminRegionStyle = (layer: IbfLayer) => { const colorProperty = layer.colorProperty; - const colorThreshold = this.getColorThreshold( + const colorThreshold: { break0: number } = this.getColorThreshold( layer.data, colorProperty, layer.colorBreaks, ); return (adminRegion) => { - const colorPropertyValue = + const colorPropertyValue: string = typeof adminRegion.properties[colorProperty] !== 'undefined' ? adminRegion.properties[colorProperty] : typeof adminRegion.properties.indicators !== 'undefined' @@ -952,7 +962,7 @@ export class MapService { adminRegion.properties.placeCode, ); let color = this.getAdminRegionColor(layer); - let dashArray; + let dashArray: string; if (adminRegion.properties.placeCode?.includes('Disputed')) { dashArray = this.disputedBorderStyle.dashArray; weight = this.disputedBorderStyle.weight; From 8bf65ec35735e99699050c07197d70b2f2ff849c Mon Sep 17 00:00:00 2001 From: Gulfaraz Rahman Date: Tue, 24 Dec 2024 17:33:16 +0100 Subject: [PATCH 4/5] fix: add layer to cache --- interfaces/IBF-dashboard/src/app/services/map.service.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/interfaces/IBF-dashboard/src/app/services/map.service.ts b/interfaces/IBF-dashboard/src/app/services/map.service.ts index 97b306912..05187cf12 100644 --- a/interfaces/IBF-dashboard/src/app/services/map.service.ts +++ b/interfaces/IBF-dashboard/src/app/services/map.service.ts @@ -486,6 +486,11 @@ export class MapService { private addLayer(layer: IbfLayer): void { const { name, viewCenter, data } = layer; + // cache the data if available + const layerDataCacheKey = this.getLayerDataCacheKey(layer.name); + if (data) { + this.layerDataCache[layerDataCacheKey] = data; + } if (viewCenter && data?.features?.length) { const layerBounds = bbox(data); this.state.bounds = containsNumber(layerBounds) @@ -608,7 +613,7 @@ export class MapService { const layerData: GeoJSON.FeatureCollection = this.layerDataCache[layerDataCacheKey]; this.updateLayer(layer)(layerData); - } else { + } else if (layer.active) { this.getLayerData(layer).subscribe((layerDataResponse) => { this.layerDataCache[layerDataCacheKey] = layerDataResponse; this.updateLayer(layer)(layerDataResponse); From 5956067133c0aeccf4fdcae1554cf0e562ac91be Mon Sep 17 00:00:00 2001 From: Gulfaraz Rahman Date: Tue, 24 Dec 2024 18:02:28 +0100 Subject: [PATCH 5/5] fix: remove waterpoints cache --- .../components/matrix/matrix.component.html | 2 +- .../src/app/services/map.service.ts | 18 ++++++------------ 2 files changed, 7 insertions(+), 13 deletions(-) diff --git a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html index 5b20af8ca..842acddda 100644 --- a/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html +++ b/interfaces/IBF-dashboard/src/app/components/matrix/matrix.component.html @@ -24,7 +24,7 @@ @if (layer.isLoading) { - + } @else { @if (isCheckBox(layer.group)) { { - const layerDataCacheKey = this.getLayerDataCacheKey(layer.name); - if (this.layerDataCache[layerDataCacheKey]) { - this.addWaterPointsLayer(layer, this.layerDataCache[layerDataCacheKey]); - } else { - this.addWaterPointsLayer(layer, null); - this.apiService - .getWaterPoints(this.country.countryCodeISO3) - .subscribe((waterPoints) => { - this.addWaterPointsLayer(layer, waterPoints); - this.layerDataCache[layerDataCacheKey] = waterPoints; - }); - } + this.addWaterPointsLayer(layer, null); + this.apiService + .getWaterPoints(this.country.countryCodeISO3) + .subscribe((waterPoints) => { + this.addWaterPointsLayer(layer, waterPoints); + }); }; private addWaterPointsLayer(