fix: update 'No data' handling (#3408)

Fix: https://dhis2.atlassian.net/browse/DHIS2-18427 Update maps-gl dependency. Update getLabelStyle to return labelNoData for labelSource in maps-gl. Update ThematicLayer pop-up 'No data' logic.
dhis2 · Nov 29, 2024 · d774e7a · d774e7a
1 parent 908c7dd
commit d774e7a
Show file tree

Hide file tree

Showing 6 changed files with 93 additions and 7 deletions.
diff --git a/cypress/elements/thematic_layer.js b/cypress/elements/thematic_layer.js
@@ -48,10 +48,23 @@ export class ThematicLayer extends Layer {
         return this
     }
 
+    selectRelativePeriod(period) {
+        cy.get('[data-test="relative-period-select"]').click()
+        cy.contains(period).click()
+
+        return this
+    }
+
     selectPeriodType(periodType) {
         cy.get('[data-test="periodtypeselect"]').click()
         cy.contains(periodType).click()
 
         return this
     }
+
+    selectIncludeNoDataOU() {
+        cy.contains('Include org units with no data').click()
+
+        return this
+    }
 }
diff --git a/cypress/integration/layers/thematiclayer.cy.js b/cypress/integration/layers/thematiclayer.cy.js
@@ -6,7 +6,11 @@ import {
     expectContextMenuOptions,
 } from '../../elements/map_context_menu.js'
 import { ThematicLayer } from '../../elements/thematic_layer.js'
-import { CURRENT_YEAR, getApiBaseUrl } from '../../support/util.js'
+import {
+    CURRENT_YEAR,
+    getApiBaseUrl,
+    EXTENDED_TIMEOUT,
+} from '../../support/util.js'
 
 const INDICATOR_NAME = 'VCCT post-test counselling rate'
 
@@ -95,6 +99,73 @@ context('Thematic Layers', () => {
         getMaps().should('have.length', 1)
     })
 
+    it('opens a thematic layer popup with data and nodata', () => {
+        Layer.openDialog('Thematic')
+            .selectIndicatorGroup('Stock')
+            .selectIndicator('BCG Stock PHU')
+            .selectTab('Period')
+            .selectRelativePeriod('This month')
+            .selectTab('Style')
+            .selectIncludeNoDataOU()
+            .selectTab('Org Units')
+            .unselectOuLevel('District')
+            .selectOuLevel('Facility')
+
+        cy.getByDataTest('org-unit-tree-node')
+            .contains('Western Area')
+            .parents('[data-test="org-unit-tree-node"]')
+            .first()
+            .within(() => {
+                cy.getByDataTest('org-unit-tree-node-toggle').click()
+            })
+
+        cy.getByDataTest('org-unit-tree-node')
+            .contains('Rural Western Area')
+            .parents('[data-test="org-unit-tree-node"]')
+            .first()
+            .within(() => {
+                cy.getByDataTest('org-unit-tree-node-toggle').click()
+            })
+
+        // Value: 0
+        cy.getByDataTest('org-unit-tree-node').contains('Tokeh MCHP').click()
+
+        cy.getByDataTest('layeredit-addbtn').click()
+
+        Layer.validateDialogClosed(true)
+
+        cy.wait(5000) // eslint-disable-line cypress/no-unnecessary-waiting
+        cy.get('#dhis2-map-container')
+            .findByDataTest('dhis2-uicore-componentcover', EXTENDED_TIMEOUT)
+            .should('not.exist')
+        cy.get('.dhis2-map').click('center') //Click somewhere on the map
+
+        cy.get('.maplibregl-popup').contains('Value: 0').should('be.visible')
+
+        // Value: No data
+        cy.getByDataTest('layer-edit-button').click()
+        Layer.selectTab('Org Units')
+
+        cy.getByDataTest('org-unit-tree-node').contains('Tokeh MCHP').click()
+        cy.getByDataTest('org-unit-tree-node')
+            .contains('Lakka Hospital')
+            .click()
+
+        cy.getByDataTest('layeredit-addbtn').click()
+
+        Layer.validateDialogClosed(true)
+
+        cy.wait(5000) // eslint-disable-line cypress/no-unnecessary-waiting
+        cy.get('#dhis2-map-container')
+            .findByDataTest('dhis2-uicore-componentcover', EXTENDED_TIMEOUT)
+            .should('not.exist')
+        cy.get('.dhis2-map').click('center') //Click somewhere on the map
+
+        cy.get('.maplibregl-popup')
+            .contains('Value: No data')
+            .should('be.visible')
+    })
+
     it('adds a thematic layer with split view period', () => {
         Layer.openDialog('Thematic')
             .selectIndicatorGroup('ANC')

diff --git a/package.json b/package.json
@@ -45,7 +45,7 @@
         "@dhis2/app-runtime": "^3.11.2",
         "@dhis2/app-runtime-adapter-d2": "^1.1.0",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
-        "@dhis2/maps-gl": "^4.0.0",
+        "@dhis2/maps-gl": "^4.0.1",
         "@dhis2/ui": "^9.13.0",
         "@krakenjs/post-robot": "^11.0.0",
         "@testing-library/react-hooks": "^8.0.1",

diff --git a/src/components/map/layers/ThematicLayer.js b/src/components/map/layers/ThematicLayer.js
@@ -179,7 +179,7 @@ class ThematicLayer extends Layer {
                 <div>{indicator}</div>
                 <div>{periodName}</div>
                 <div>
-                    {i18n.t('Value')}: {value ? value : i18n.t('No data')}
+                    {i18n.t('Value')}: {value ?? i18n.t('No data')}
                 </div>
                 {aggregationType && aggregationType !== 'DEFAULT' && (
                     <div>{aggregationType}</div>

diff --git a/src/util/labels.js b/src/util/labels.js
@@ -1,3 +1,4 @@
+import i18n from '@dhis2/d2-i18n'
 import {
     LABEL_FONT_SIZE,
     LABEL_FONT_STYLE,
@@ -20,5 +21,6 @@ export const getLabelStyle = ({
         lineHeight: parseInt(fontSize, 10) * 1.2 + 'px',
         color: cssColor(labelFontColor) || LABEL_FONT_COLOR,
         paddingTop: '10px',
+        labelNoData: i18n.t('No data'),
     }
 }
diff --git a/yarn.lock b/yarn.lock
@@ -2246,10 +2246,10 @@
     i18next "^10.3"
     moment "^2.24.0"
 
-"@dhis2/maps-gl@^4.0.0":
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/@dhis2/maps-gl/-/maps-gl-4.0.0.tgz#e97df2fbc78f787a0916224d7d54fb96b9c376db"
-  integrity sha512-TDEIBT6rFuEZGXnBxAqKhSmCXk3wtuCf/OrVZBKxT1qk0kHau71f3lzAXbWhYAuop8t6/DyJaIcQrUYMi1Xy3w==
+"@dhis2/maps-gl@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@dhis2/maps-gl/-/maps-gl-4.0.1.tgz#227a856c9a5dd0a38a8a3ea0ebd6327872850f3e"
+  integrity sha512-4Q9zxzPhV81zSZyWYyX7iOufUvSfqHWjXkpYUqgPq8uxhpCNj9vVwb6l5FaU/0ZbWC+wusiYeMAkLvsUpoR51g==
   dependencies:
     "@mapbox/sphericalmercator" "^1.2.0"
     "@turf/area" "^6.5.0"