feat: add bidirectional map/table selection sync to collapsible data table [PR2]

cypress/elements/map_context_menu.js

@@ -5,13 +5,17 @@ export const DRILL_UP = 'context-menu-drill-up'
 export const DRILL_DOWN = 'context-menu-drill-down'
 export const VIEW_PROFILE = 'context-menu-view-profile'
 export const ZOOM_TO_FEATURE = 'context-menu-zoom-to-feature'
+export const ZOOM_TO_LAYER = 'context-menu-zoom-to-layer'
+export const ZOOM_TO_SELECTED = 'context-menu-zoom-to-selected'
 export const SHOW_LONG_LAT = 'context-menu-show-long-lat'
 
 const ALL_OPTIONS = [
     DRILL_UP,
     DRILL_DOWN,
     VIEW_PROFILE,
     ZOOM_TO_FEATURE,
+    ZOOM_TO_LAYER,
+    ZOOM_TO_SELECTED,
     SHOW_LONG_LAT,
 ]
 

cypress/integration/dataTable.cy.js

@@ -77,10 +77,13 @@ describe('data table', () => {
                 assertMapPosition(expectedBottoms2, expectedHeights2)
             })
 
+        // Collapse the Layers Panel to give the table more width
+        cy.getByDataTest('layers-toggle-button').click()
+
         // check number of columns
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-datatablecellhead')
-            .should('have.length', 10)
+            .should('have.length', 11)
 
         // Filter by name
         cy.getByDataTest('data-table-column-filter-input-Name')
@@ -94,15 +97,20 @@ describe('data table', () => {
             .should('have.length', 7)
 
         // confirm that the sort order is initially ascending by Name
-        checkTableCell({ row: 0, column: 1, expectedContent: 'Bargbe' })
-        checkTableCell({ row: 6, column: 1, expectedContent: 'Upper Bambara' })
+        checkTableCell({ row: 0, column: 2, expectedContent: 'Bargbe' })
+        checkTableCell({ row: 6, column: 2, expectedContent: 'Upper Bambara' })
 
         // Sort by name
         cy.getByDataTest('data-table-column-sort-button-Name').click()
 
+        // Sorting can shift the virtualized table's scroll position
+        // (possibly an internal react-virtuoso quirk)
+        // so we reset to top before asserting on row indices below
+        cy.get('[data-testid="virtuoso-scroller"]').scrollTo('top')
+
         // confirm that the rows are sorted by Name descending
-        checkTableCell({ row: 0, column: 1, expectedContent: 'Upper Bambara' })
-        checkTableCell({ row: 6, column: 1, expectedContent: 'Bargbe' })
+        checkTableCell({ row: 0, column: 2, expectedContent: 'Upper Bambara' })
+        checkTableCell({ row: 6, column: 2, expectedContent: 'Bargbe' })
 
         // filter by Value (numeric)
         cy.getByDataTest('data-table-column-filter-input-Value')
@@ -118,9 +126,12 @@ describe('data table', () => {
         // Sort by value
         cy.getByDataTest('data-table-column-sort-button-Value').click()
 
+        // Reset scroll position after sorting - see comment above
+        cy.get('[data-testid="virtuoso-scroller"]').scrollTo('top')
+
         // check that the rows are sorted by Value ascending
-        checkTableCell({ row: 0, column: 3, expectedContent: '35' })
-        checkTableCell({ row: 4, column: 3, expectedContent: '76' })
+        checkTableCell({ row: 0, column: 4, expectedContent: '35' })
+        checkTableCell({ row: 4, column: 4, expectedContent: '76' })
 
         // right-click a row and select "View profile"
         cy.getByDataTest('bottom-panel')
@@ -134,6 +145,8 @@ describe('data table', () => {
         // check that the org unit profile drawer is opened
         cy.getByDataTest('org-unit-profile').should('be.visible')
 
+        cy.getByDataTest('layers-toggle-button').click()
+
         // close the datatable
         cy.getByDataTest('moremenubutton').first().click()
         cy.getByDataTest('more-menu')
@@ -176,10 +189,13 @@ describe('data table', () => {
 
         cy.getByDataTest('bottom-panel').should('be.visible')
 
+        // Collapse the Layers Panel to give the table more width
+        cy.getByDataTest('layers-toggle-button').click()
+
         // check number of columns
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-datatablecellhead')
-            .should('have.length', 10)
+            .should('have.length', 11)
 
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-datatablecellhead')
@@ -193,8 +209,8 @@ describe('data table', () => {
             .type(ouName)
 
         // check that all the rows have Org unit Moyowa
-        checkTableCell({ row: 0, column: 1, expectedContent: ouName })
-        checkTableCell({ row: 2, column: 1, expectedContent: ouName })
+        checkTableCell({ row: 0, column: 2, expectedContent: ouName })
+        checkTableCell({ row: 2, column: 2, expectedContent: ouName })
 
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-tablebody')
@@ -236,8 +252,8 @@ describe('data table', () => {
 
         // Confirm that the rows are sorted by Age in years ascending
         // (the first click on a new column always sorts ascending)
-        checkTableCell({ row: 0, column: 7, expectedContent: '6' })
-        checkTableCell({ row: 1, column: 7, expectedContent: '32' })
+        checkTableCell({ row: 0, column: 8, expectedContent: '6' })
+        checkTableCell({ row: 1, column: 8, expectedContent: '32' })
 
         // right-click a row: Event layers have no profile to view
         cy.getByDataTest('bottom-panel')
@@ -294,53 +310,67 @@ describe('data table', () => {
         // Check that the bottom panel is present
         cy.getByDataTest('bottom-panel').should('be.visible')
 
+        // Collapse the Layers Panel to give the table more width
+        cy.getByDataTest('layers-toggle-button').click()
+
         // Confirm that the sort order is initially ascending by Name
-        checkTableCell({ row: 0, column: 1, expectedContent: 'Bendu CHC' })
+        checkTableCell({ row: 0, column: 2, expectedContent: 'Bendu CHC' })
 
         // First click on a new column always sorts ascending
         cy.getByDataTest('data-table-column-sort-button-Value').click()
 
+        // Reset scroll position after sorting - see comment above
+        cy.get('[data-testid="virtuoso-scroller"]').scrollTo('top')
+
         // Check that first row has Tihun CHC with value 28.63
-        checkTableCell({ row: 0, column: 1, expectedContent: 'Tihun CHC' })
-        checkTableCell({ row: 0, column: 3, expectedContent: '28.63' })
+        checkTableCell({ row: 0, column: 2, expectedContent: 'Tihun CHC' })
+        checkTableCell({ row: 0, column: 4, expectedContent: '28.63' })
 
         // Check that row 5 has Gbamgbama CHC with value 117.98
-        checkTableCell({ row: 5, column: 1, expectedContent: 'Gbamgbama CHC' })
-        checkTableCell({ row: 5, column: 3, expectedContent: '117.98' })
+        checkTableCell({ row: 5, column: 2, expectedContent: 'Gbamgbama CHC' })
+        checkTableCell({ row: 5, column: 4, expectedContent: '117.98' })
 
         // Check that row 6 has no value (undefined)
-        checkTableCell({ row: 6, column: 3, expectedContent: '' })
+        checkTableCell({ row: 6, column: 4, expectedContent: '' })
 
         // Sort descending by Value
         cy.getByDataTest('data-table-column-sort-button-Value').click()
 
-        checkTableCell({ row: 0, column: 1, expectedContent: 'Gbamgbama CHC' })
-        checkTableCell({ row: 0, column: 3, expectedContent: '117.98' })
+        // Reset scroll position after sorting - see comment above
+        cy.get('[data-testid="virtuoso-scroller"]').scrollTo('top')
+
+        checkTableCell({ row: 0, column: 2, expectedContent: 'Gbamgbama CHC' })
+        checkTableCell({ row: 0, column: 4, expectedContent: '117.98' })
 
-        checkTableCell({ row: 5, column: 1, expectedContent: 'Tihun CHC' })
-        checkTableCell({ row: 5, column: 3, expectedContent: '28.63' })
+        checkTableCell({ row: 5, column: 2, expectedContent: 'Tihun CHC' })
+        checkTableCell({ row: 5, column: 4, expectedContent: '28.63' })
 
-        checkTableCell({ row: 6, column: 3, expectedContent: '' })
+        checkTableCell({ row: 6, column: 4, expectedContent: '' })
 
-        // Sort by index (a new column, so ascending) and scroll to the top
+        // Sort by index (a new column, so ascending)
         cy.getByDataTest('data-table-column-sort-button-Index').click()
+
+        // Reset scroll position after sorting - see comment above
         cy.get('[data-testid="virtuoso-scroller"]').scrollTo('top')
 
-        checkTableCell({ row: 0, column: 0, expectedContent: '0' })
+        checkTableCell({ row: 0, column: 1, expectedContent: '0' })
 
         // Check that row 0 range value is empty
-        checkTableCell({ row: 0, column: 5, expectedContent: '' })
+        checkTableCell({ row: 0, column: 6, expectedContent: '' })
 
         // Sort by range, which is a string
         cy.getByDataTest('data-table-column-sort-button-Range').click()
 
+        // Reset scroll position after sorting - see comment above
+        cy.get('[data-testid="virtuoso-scroller"]').scrollTo('top')
+
         // Check that row 0 range value has value '0-40'
-        checkTableCell({ row: 0, column: 5, expectedContent: '0 – 40' })
+        checkTableCell({ row: 0, column: 6, 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: 6, expectedContent: '90 – 120' })
 
         // Check that row 6 range value is empty
-        checkTableCell({ row: 6, column: 5, expectedContent: '' })
+        checkTableCell({ row: 6, column: 6, expectedContent: '' })
     })
 })

cypress/integration/layers/thematiclayer.cy.js

@@ -4,6 +4,8 @@ import {
     DRILL_DOWN,
     VIEW_PROFILE,
     ZOOM_TO_FEATURE,
+    ZOOM_TO_LAYER,
+    ZOOM_TO_SELECTED,
     SHOW_LONG_LAT,
     expectContextMenuOptions,
 } from '../../elements/map_context_menu.js'
@@ -541,6 +543,8 @@ context('Thematic Layers', () => {
             { name: DRILL_DOWN },
             { name: VIEW_PROFILE },
             { name: ZOOM_TO_FEATURE },
+            { name: ZOOM_TO_LAYER },
+            { name: ZOOM_TO_SELECTED, disabled: true },
             { name: SHOW_LONG_LAT },
         ])
     })
@@ -726,6 +730,8 @@ context('Thematic Layers', () => {
             { name: DRILL_DOWN },
             { name: VIEW_PROFILE },
             { name: ZOOM_TO_FEATURE },
+            { name: ZOOM_TO_LAYER },
+            { name: ZOOM_TO_SELECTED, disabled: true },
         ])
     })
 

i18n/en.pot

@@ -161,15 +161,33 @@ msgstr "{{filtered}} of {{total}} rows"
 msgid "{{total}} rows"
 msgstr "{{total}} rows"
 
+msgid "Restore"
+msgstr "Restore"
+
+msgid "Collapse"
+msgstr "Collapse"
+
 msgid "Clear filters"
 msgstr "Clear filters"
 
+msgid "Show only features in current map view"
+msgstr "Show only features in current map view"
+
+msgid "Show only selected features"
+msgstr "Show only selected features"
+
+msgid "Highlight color"
+msgstr "Highlight color"
+
 msgid "Close"
 msgstr "Close"
 
 msgid "No results found"
 msgstr "No results found"
 
+msgid "Select all"
+msgstr "Select all"
+
 msgid "Sort by {{column}}"
 msgstr "Sort by {{column}}"
 
@@ -191,6 +209,12 @@ msgstr "View profile"
 msgid "Zoom to feature"
 msgstr "Zoom to feature"
 
+msgid "Zoom to layer"
+msgstr "Zoom to layer"
+
+msgid "Zoom to selected features"
+msgstr "Zoom to selected features"
+
 msgid "Data table is not supported when events are grouped on the server."
 msgstr "Data table is not supported when events are grouped on the server."
 
@@ -649,9 +673,6 @@ msgstr ""
 "Choose which layer sources are available to add to maps. This selection "
 "applies to all users."
 
-msgid "Collapse"
-msgstr "Collapse"
-
 msgid "Expand"
 msgstr "Expand"
 

package.json

@@ -49,7 +49,7 @@
         "@dhis2/analytics": "^29.5.5",
         "@dhis2/app-runtime": "^3.17.3",
         "@dhis2/app-service-datastore": "^1.0.0-beta.3",
-        "@dhis2/maps-gl": "^4.4.3",
+        "@dhis2/maps-gl": "git+https://github.com/d2-ci/maps-gl.git#e89c7e9bf5634da8b13684c314eb22838f629ed6",
         "@dhis2/ui": "^10.17.0",
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/modifiers": "^9.0.0",

src/actions/dataTable.js

@@ -13,3 +13,26 @@ export const resizeDataTable = (height) => ({
     type: types.DATA_TABLE_RESIZE,
     height,
 })
+
+export const setMapBounds = (bounds) => ({
+    type: types.MAP_BOUNDS_CHANGED,
+    bounds,
+})
+
+export const toggleShowOnlyFeaturesInView = () => ({
+    type: types.TOGGLE_SHOW_ONLY_IN_VIEW,
+})
+
+export const toggleShowOnlySelected = () => ({
+    type: types.TOGGLE_SHOW_ONLY_SELECTED,
+})
+
+export const setShowOnlySelected = (value) => ({
+    type: types.SHOW_ONLY_SELECTED_SET,
+    value,
+})
+
+export const setHighlightColor = (color) => ({
+    type: types.HIGHLIGHT_COLOR_SET,
+    color,
+})

src/actions/feature.js

@@ -13,3 +13,8 @@ export const setFeatureProfile = (payload) => ({
 export const closeFeatureProfile = () => ({
     type: types.FEATURE_PROFILE_CLOSE,
 })
+
+export const clickFeature = (payload) => ({
+    type: types.MAP_FEATURE_CLICKED,
+    payload,
+})

src/actions/selection.js

@@ -0,0 +1,23 @@
+import * as types from '../constants/actionTypes.js'
+
+export const toggleFeatureSelection = (id, layerId) => ({
+    type: types.FEATURE_TOGGLE_SELECTION,
+    id,
+    layerId,
+})
+
+export const selectAllFeatures = (ids, layerId) => ({
+    type: types.SELECTION_SET_ALL,
+    ids,
+    layerId,
+})
+
+export const selectFeatureRange = (ids, layerId) => ({
+    type: types.SELECTION_ADD_RANGE,
+    ids,
+    layerId,
+})
+
+export const clearSelection = () => ({
+    type: types.SELECTION_CLEAR,
+})