feat: enhance map legends, classification, and styling [DHIS2-18242]

.prettierignore

@@ -4,7 +4,8 @@ src/locales
 build
 cypress/fixtures/*
 cypress.env.json
-docs
+docs/maps.md
+docs/resources/
 colorbrewer.js
 
 

cypress/elements/event_layer.js

@@ -60,4 +60,16 @@ export class EventLayer extends Layer {
 
         return this
     }
+
+    selectIncludeUnclassifiedEvents() {
+        cy.contains('Include unclassified events').click()
+
+        return this
+    }
+
+    selectIncludeNoDataEvents() {
+        cy.contains('Include events with no data').click()
+
+        return this
+    }
 }

cypress/elements/thematic_layer.js

@@ -151,6 +151,12 @@ export class ThematicLayer extends Layer {
         return this
     }
 
+    selectIncludeUnclassifiedOU() {
+        cy.contains('Include unclassified org units').click()
+
+        return this
+    }
+
     selectIncludeNoDataOU() {
         cy.contains('Include org units with no data').click()
 

cypress/integration/dataTable.cy.js

@@ -327,10 +327,10 @@ describe('data table', () => {
         cy.get('button[title="Sort by Range"]').click()
 
         // Check that row 0 range value has value '0-40'
-        checkTableCell({ row: 0, column: 5, expectedContent: '0 - 40' })
+        checkTableCell({ row: 0, column: 5, expectedContent: '0 – 40' })
 
         // Check that row 5 range value has value '90 - 120'
-        checkTableCell({ row: 5, column: 5, expectedContent: '90 - 120' })
+        checkTableCell({ row: 5, column: 5, expectedContent: '90 – 120' })
 
         // Check that row 6 range value is empty
         checkTableCell({ row: 6, column: 5, expectedContent: '' })

cypress/integration/layers/eventlayer.cy.js

@@ -11,7 +11,7 @@ const programE2E = {
     name: 'E2E program',
     stage: 'Stage 1 - Repeatable',
     de: 'E2E - Yes/no',
-    options: ['Yes', 'No', 'Other'],
+    options: ['Yes', 'No', 'Unclassified', 'No data'],
 }
 
 const programIP = {
@@ -141,6 +141,9 @@ context('Event Layers', () => {
             .contains(programE2E.de)
             .click()
 
+        Layer.selectIncludeUnclassifiedEvents()
+        Layer.selectIncludeNoDataEvents()
+
         Layer.addToMap()
 
         Layer.validateDialogClosed(true)

cypress/integration/layers/geojsonlayer.cy.js

@@ -129,10 +129,9 @@ describe('GeoJSON URL Layer', () => {
         // check that an error is displayed in the layer card
         cy.getByDataTest('load-error-noticebox').should('be.visible')
         cy.getByDataTest('load-error-noticebox')
-            .find('h6')
             .contains('Failed to load layer')
             .should('be.visible')
-        cy.getByDataTest('dhis2-uicore-noticebox-content-message')
+        cy.getByDataTest('load-error-noticebox')
             .contains(
                 'There was a problem with this layer. Contact a system administrator.'
             )
@@ -194,10 +193,9 @@ describe('GeoJSON URL Layer', () => {
         // check that an error is displayed in the layer card
         cy.getByDataTest('load-error-noticebox').should('be.visible')
         cy.getByDataTest('load-error-noticebox')
-            .find('h6')
             .contains('Failed to load layer')
             .should('be.visible')
-        cy.getByDataTest('dhis2-uicore-noticebox-content-message')
+        cy.getByDataTest('load-error-noticebox')
             .contains(
                 'There was a problem with this layer. Contact a system administrator.'
             )

cypress/integration/layers/thematiclayer.cy.js

@@ -82,12 +82,14 @@ context('Thematic Layers', () => {
         // "3.2 - 7.5 (100)"
         // "No data (0)"
         const choroplethLegendTextPattern =
-            /^\s*(\d+(\.\d+)?\s*-\s*\d+(\.\d+)?|No data)\s*\(\d+\)\s*$/
+            /^\s*(\d+(\.\d+)?[-–]\d+(\.\d+)?|No data)\s*\(\d+\)\s*$/
 
         // Examples of bubble labels:
         // "10.5"
         // "No data"
-        const bubbleLabelTextPattern = /^(\d+(\.\d+)?|No data)$/
+        // "(2)"
+        const bubbleLabelTextPattern =
+            /^(\d+(\.\d+)?|No data|\(\d+\))(\s*\(\d+\))?$/
 
         // Choropleth
         Layer.openDialog('Thematic')
@@ -177,7 +179,9 @@ context('Thematic Layers', () => {
 
         cy.getByDataTest('dhis2-uicore-checkbox').eq(1).click()
 
-        Layer.openOu('Tonkolili').selectOu('Gbonkonlenken').addToMap()
+        Layer.openOu('Tonkolili').selectOu('Gbonkonlenken')
+
+        Layer.selectTab('Style').selectIncludeUnclassifiedOU().addToMap()
 
         getMaps().click('center')
 
@@ -282,7 +286,8 @@ context('Thematic Layers', () => {
                 n: 7,
                 removeAll: false,
             })
-            .addToMap()
+
+        Layer.selectTab('Style').selectIncludeUnclassifiedOU().addToMap()
 
         Layer.validateDialogClosed(true)
 
@@ -710,10 +715,9 @@ context('Thematic Layers', () => {
         // check that an error is displayed in the layer card
         cy.getByDataTest('load-error-noticebox').should('be.visible')
         cy.getByDataTest('load-error-noticebox')
-            .find('h6')
             .contains('Failed to load layer')
             .should('be.visible')
-        cy.getByDataTest('dhis2-uicore-noticebox-content-message')
+        cy.getByDataTest('load-error-noticebox')
             .contains(
                 'Organisation unit or organisation unit level is not valid'
             )

cypress/integration/requestsErrors.cy.js

@@ -47,7 +47,7 @@ describe('Error handling check for all layer types', () => {
                 409: 'Simulated error with status code 409',
             }
 
-            cy.getByDataTest('dhis2-uicore-noticebox', EXTENDED_TIMEOUT).within(
+            cy.getByDataTest('load-error-noticebox', EXTENDED_TIMEOUT).within(
                 () => {
                     cy.contains('Failed to load layer').should('be.visible')
                     cy.contains(errorMessage[error]).should('be.visible')

cypress/integration/routes.cy.js

@@ -84,7 +84,9 @@ describe('Routes', () => {
         cy.getByDataTest(`card-ANC1Coverage`)
             .findByDataTest('layerlegend-item')
             .last()
-            .contains('Low 0 - 30')
+            .find('td')
+            .invoke('text')
+            .should('match', /Low0[-–]30/)
     })
 
     it('loads currentAnalyticalObject (hash) - Earth Engine Layer', () => {
@@ -107,7 +109,7 @@ describe('Routes', () => {
         cy.getByDataTest(`card-Heatstressdaily`)
             .findByDataTest('layerlegend-item')
             .first()
-            .contains('Extreme heat stress 46 - 60')
+            .contains('Extreme heat stress')
     })
 
     it('loads with map id (legacy) and interpretationid lowercase', () => {