feat: extend data table support to TE, thematic, and event layers [PR5]

cypress/integration/dataTable.cy.js

@@ -358,7 +358,7 @@ describe('data table', () => {
         cy.get('[data-testid="virtuoso-scroller"]').scrollTo('top')
 
         // Check that row 0 range value is empty
-        checkTableCell({ row: 0, column: 5, expectedContent: '' })
+        checkTableCell({ row: 0, column: 8, expectedContent: '' })
 
         // Sort by range, which is a string
         cy.getByDataTest('data-table-column-sort-button-Range').click()
@@ -367,12 +367,12 @@ describe('data table', () => {
         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: 8, 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: 8, expectedContent: '90 – 120' })
 
         // Check that row 6 range value is empty
-        checkTableCell({ row: 6, column: 5, expectedContent: '' })
+        checkTableCell({ row: 6, column: 8, expectedContent: '' })
     })
 })

cypress/integration/layers/eventlayer.cy.js

@@ -338,7 +338,7 @@ context('Event Layers', () => {
             'Event location',
             '-13.188339, 8.405215',
             'Organisation unit',
-            'Event time',
+            'Event date',
             'Age in years',
             'Mode of Discharge',
         ])

i18n/en.pot

@@ -5,8 +5,8 @@ msgstr ""
 "Content-Type: text/plain; charset=utf-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1)\n"
-"POT-Creation-Date: 2026-09-04T12:03:11.272Z\n"
-"PO-Revision-Date: 2026-09-04T12:03:11.272Z\n"
+"POT-Creation-Date: 2026-09-07T08:34:02.249Z\n"
+"PO-Revision-Date: 2026-09-07T08:34:02.249Z\n"
 
 msgid "2020"
 msgstr "2020"
@@ -167,6 +167,9 @@ msgstr "Sort by Selected"
 msgid "Sort by {{column}}"
 msgstr "Sort by {{column}}"
 
+msgid "Edit layer"
+msgstr "Edit layer"
+
 msgid "Something went wrong"
 msgstr "Something went wrong"
 
@@ -248,6 +251,12 @@ msgstr "Zoom to selected features"
 msgid "Zoom to filtered features"
 msgstr "Zoom to filtered features"
 
+msgid "Event details aren't available while this layer is clustered on the server"
+msgstr "Event details aren't available while this layer is clustered on the server"
+
+msgid "Show event details"
+msgstr "Show event details"
+
 msgid "No features match your filters"
 msgstr "No features match your filters"
 
@@ -302,9 +311,6 @@ msgstr "{{total}} rows"
 msgid "Show only features in current map view"
 msgstr "Show only features in current map view"
 
-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."
-
 msgid "No valid data was found for the current layer configuration."
 msgstr "No valid data was found for the current layer configuration."
 
@@ -318,33 +324,6 @@ msgstr ""
 msgid "No valid data fields were found for this layer."
 msgstr "No valid data fields were found for this layer."
 
-msgid "Id"
-msgstr "Id"
-
-msgid "Level"
-msgstr "Level"
-
-msgid "Parent"
-msgstr "Parent"
-
-msgid "Type"
-msgstr "Type"
-
-msgid "Legend"
-msgstr "Legend"
-
-msgid "Range"
-msgstr "Range"
-
-msgid "Org unit"
-msgstr "Org unit"
-
-msgid "Org unit boundary"
-msgstr "Org unit boundary"
-
-msgid "Event time"
-msgstr "Event time"
-
 msgid "Loading Earth Engine data…"
 msgstr "Loading Earth Engine data…"
 
@@ -833,9 +812,6 @@ msgstr "Open in Data Visualizer app"
 msgid "Download data"
 msgstr "Download data"
 
-msgid "Edit layer"
-msgstr "Edit layer"
-
 msgid "Duplicate layer"
 msgstr "Duplicate layer"
 
@@ -909,6 +885,9 @@ msgstr[1] "{{n}} org units without coordinates"
 msgid "Selected org units: No coordinates found"
 msgstr "Selected org units: No coordinates found"
 
+msgid "External layer definition not found, showing last known settings"
+msgstr "External layer definition not found, showing last known settings"
+
 msgid "Error"
 msgstr "Error"
 
@@ -940,12 +919,18 @@ msgstr "Could not retrieve event data"
 msgid "Organisation unit"
 msgstr "Organisation unit"
 
+msgid "Event date"
+msgstr "Event date"
+
 msgid "Groups"
 msgstr "Groups"
 
 msgid "Parent unit"
 msgstr "Parent unit"
 
+msgid "Level"
+msgstr "Level"
+
 msgid "Not set"
 msgstr "Not set"
 
@@ -1071,6 +1056,9 @@ msgstr "No data found for this period."
 msgid "Image of the organisation unit"
 msgstr "Image of the organisation unit"
 
+msgid "Parent"
+msgstr "Parent"
+
 msgid "Code"
 msgstr "Code"
 
@@ -1190,6 +1178,9 @@ msgstr "Click to unpin legend"
 msgid "Click to pin legend"
 msgstr "Click to pin legend"
 
+msgid "Legend"
+msgstr "Legend"
+
 msgid "Hide layer"
 msgstr "Hide layer"
 
@@ -2065,6 +2056,33 @@ msgstr "Facility"
 msgid "GroupSet used for styling was not found"
 msgstr "GroupSet used for styling was not found"
 
+msgid "Id"
+msgstr "Id"
+
+msgid "Type"
+msgstr "Type"
+
+msgid "Range"
+msgstr "Range"
+
+msgid "Org unit"
+msgstr "Org unit"
+
+msgid "Org unit boundary"
+msgstr "Org unit boundary"
+
+msgid "Group"
+msgstr "Group"
+
+msgid "Icon"
+msgstr "Icon"
+
+msgid "Current period"
+msgstr "Current period"
+
+msgid "Value ({{period}})"
+msgstr "Value ({{period}})"
+
 msgid "Start date is invalid"
 msgstr "Start date is invalid"
 

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": "git+https://github.com/d2-ci/maps-gl.git#e89c7e9bf5634da8b13684c314eb22838f629ed6",
+        "@dhis2/maps-gl": "git+https://github.com/d2-ci/maps-gl.git#6758ac621ff7ed582ad458bb4c9f90900358cedc",
         "@dhis2/ui": "^10.17.0",
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/modifiers": "^9.0.0",

src/actions/__tests__/dataTable.spec.js

@@ -3,6 +3,7 @@ import {
     closeDataTable,
     toggleDataTable,
     resizeDataTable,
+    setActiveTimelinePeriod,
 } from '../dataTable.js'
 
 describe('closeDataTable', () => {
@@ -30,3 +31,13 @@ describe('resizeDataTable', () => {
         })
     })
 })
+
+describe('setActiveTimelinePeriod', () => {
+    it('creates an ACTIVE_TIMELINE_PERIOD_SET action', () => {
+        const period = { id: '202301', name: 'January 2023' }
+        expect(setActiveTimelinePeriod(period)).toEqual({
+            type: types.ACTIVE_TIMELINE_PERIOD_SET,
+            period,
+        })
+    })
+})

src/actions/dataTable.js

@@ -38,3 +38,8 @@ export const setDataTableColumnConfig = (layerId, config) => ({
     layerId,
     config,
 })
+
+export const setActiveTimelinePeriod = (period) => ({
+    type: types.ACTIVE_TIMELINE_PERIOD_SET,
+    period,
+})

src/actions/layers.js

@@ -66,3 +66,9 @@ export const setLayerLoading = (id) => ({
     type: types.LAYER_LOADING_SET,
     id,
 })
+
+// Force client-side clustering for a server-clustered event layer (session-only)
+export const setForceClientCluster = (id) => ({
+    type: types.LAYER_FORCE_CLIENT_CLUSTER_SET,
+    id,
+})

src/components/core/Checkbox.jsx

@@ -8,6 +8,7 @@ import styles from './styles/Checkbox.module.css'
 const Checkbox = ({
     label,
     checked = false,
+    indeterminate = false,
     disabled,
     dense = true,
     tooltip,
@@ -23,7 +24,8 @@ const Checkbox = ({
     >
         <UiCheckbox
             label={label}
-            checked={checked}
+            checked={!indeterminate && checked}
+            indeterminate={indeterminate}
             dense={dense}
             disabled={disabled}
             onChange={({ checked }) => onChange(checked)}
@@ -43,6 +45,7 @@ Checkbox.propTypes = {
     dataTest: PropTypes.string,
     dense: PropTypes.bool,
     disabled: PropTypes.bool,
+    indeterminate: PropTypes.bool,
     label: PropTypes.node,
     style: PropTypes.object,
     tooltip: PropTypes.string,

src/components/core/styles/Checkbox.module.css

@@ -5,7 +5,7 @@
 }
 
 /* This styles the tooltip span containing the svg */
-.checkbox span {
+.checkbox > span {
     margin-left: var(--spacers-dp4);
     display: flex;
     flex-direction: column;