feat: distinguish non-existent repetitions from empty values in line lists (DHIS2-15767)

.github/pull_request_template.md

@@ -18,6 +18,9 @@ _text_
 
 ### TODO
 
+-   [ ] Cypress tests
+-   [ ] Update docs
+-   [ ] Manual testing
 -   [ ] _task_
 
 ---

cypress/integration/repeatedEvents.cy.js

@@ -18,7 +18,9 @@ import {
     getTableHeaderCells,
     expectTableToBeVisible,
     getTableDataCells,
+    getTableRows,
 } from '../helpers/table.js'
+import { EXTENDED_TIMEOUT } from '../support/util.js'
 
 const getRepeatedEventsTab = () =>
     cy.getBySel('conditions-modal-content').contains('Repeated events')
@@ -221,4 +223,41 @@ describe('repeated events', () => {
 
         getRepeatedEventsTab().should('not.have.class', 'disabled')
     })
+    it('undefined values display properly for a repeated event', () => {
+        const TEST_CELL = {
+            row: 6,
+            column: 3,
+        }
+        goToAO('WrIV7ZoYECj')
+
+        cy.getBySel('titlebar', EXTENDED_TIMEOUT)
+            .should('be.visible')
+            .and('contain', 'E2E: Enrollment - Hemoglobin (repeated)')
+
+        getTableRows()
+            .eq(TEST_CELL.row)
+            .find('td')
+            .eq(TEST_CELL.column)
+            .invoke('text')
+            .invoke('trim')
+            .should('equal', '')
+
+        getTableRows()
+            .eq(TEST_CELL.row)
+            .find('td')
+            .eq(TEST_CELL.column)
+            .should(($td) => {
+                const className = $td[0].className
+
+                expect(className).to.match(/Visualization_undefinedCell*/)
+            })
+
+        getTableRows()
+            .eq(TEST_CELL.row)
+            .find('td')
+            .eq(TEST_CELL.column)
+            .trigger('mouseover')
+
+        cy.getBySelLike('tooltip-content').contains('No repeated event')
+    })
 })

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: 2023-09-05T07:20:57.111Z\n"
-"PO-Revision-Date: 2023-09-05T07:20:57.111Z\n"
+"POT-Creation-Date: 2023-09-11T08:06:44.556Z\n"
+"PO-Revision-Date: 2023-09-11T08:06:44.556Z\n"
 
 msgid "Add to {{axisName}}"
 msgstr "Add to {{axisName}}"
@@ -382,6 +382,9 @@ msgstr "Not available offline"
 msgid "Sort by {{column}}"
 msgstr "Sort by {{column}}"
 
+msgid "No repeated event"
+msgstr "No repeated event"
+
 msgid "Rows per page"
 msgstr "Rows per page"
 

src/components/Visualization/Visualization.js

@@ -67,6 +67,7 @@ export const PAGE_SIZE = 100
 // +/- min width of "Rows per page" select + 2 * padding
 // + 30% in case label text are longer than English
 export const PAGINATION_MIN_WIDTH = 250
+const NOT_DEFINED_VALUE = 'ND'
 
 const getFontSizeClass = (fontSize) => {
     switch (fontSize) {
@@ -312,6 +313,55 @@ export const Visualization = ({
 
     const isInModal = !!filters?.relativePeriodDate
 
+    const cellIsUndefined = (rowIndex, columnIndex) => {
+        const row = (data.rowContext || {})[rowIndex]
+        return row && row[columnIndex]?.valueStatus === NOT_DEFINED_VALUE
+    }
+
+    const renderCellContent = ({ columnIndex, value, isUndefined, props }) => (
+        <DataTableCell
+            {...props}
+            key={columnIndex}
+            className={cx(
+                styles.cell,
+                fontSizeClass,
+                sizeClass,
+                {
+                    [styles.emptyCell]: !value,
+                    [styles.nowrap]: cellValueShouldNotWrap(
+                        data.headers[columnIndex]
+                    ),
+                    [styles.undefinedCell]: isUndefined,
+                },
+                'bordered'
+            )}
+            backgroundColor={
+                visualization.legend?.style === LEGEND_DISPLAY_STYLE_FILL
+                    ? getColorByValueFromLegendSet(
+                          data.headers[columnIndex].legendSet,
+                          value
+                      )
+                    : undefined
+            }
+            dataTest={'table-cell'}
+        >
+            <div
+                style={
+                    visualization.legend?.style === LEGEND_DISPLAY_STYLE_TEXT
+                        ? {
+                              color: getColorByValueFromLegendSet(
+                                  data.headers[columnIndex].legendSet,
+                                  value
+                              ),
+                          }
+                        : {}
+                }
+            >
+                {formatCellValue(value, data.headers[columnIndex])}
+            </div>
+        </DataTableCell>
+    )
+
     return (
         <div className={styles.pluginContainer} ref={containerCallbackRef}>
             <div
@@ -378,58 +428,31 @@ export const Visualization = ({
                     </DataTableHead>
                     {/* https://jira.dhis2.org/browse/LIBS-278 */}
                     <DataTableBody dataTest={'table-body'}>
-                        {data.rows.map((row, index) => (
-                            <DataTableRow key={index} dataTest={'table-row'}>
-                                {row.map((value, index) => (
-                                    <DataTableCell
-                                        key={index}
-                                        className={cx(
-                                            styles.cell,
-                                            fontSizeClass,
-                                            sizeClass,
-                                            {
-                                                [styles.emptyCell]: !value,
-                                                [styles.nowrap]:
-                                                    cellValueShouldNotWrap(
-                                                        data.headers[index]
-                                                    ),
-                                            },
-                                            'bordered'
-                                        )}
-                                        backgroundColor={
-                                            visualization.legend?.style ===
-                                            LEGEND_DISPLAY_STYLE_FILL
-                                                ? getColorByValueFromLegendSet(
-                                                      data.headers[index]
-                                                          .legendSet,
-                                                      value
-                                                  )
-                                                : undefined
-                                        }
-                                        dataTest={'table-cell'}
-                                    >
-                                        <div
-                                            style={
-                                                visualization.legend?.style ===
-                                                LEGEND_DISPLAY_STYLE_TEXT
-                                                    ? {
-                                                          color: getColorByValueFromLegendSet(
-                                                              data.headers[
-                                                                  index
-                                                              ].legendSet,
-                                                              value
-                                                          ),
-                                                      }
-                                                    : {}
-                                            }
-                                        >
-                                            {formatCellValue(
-                                                value,
-                                                data.headers[index]
+                        {data.rows.map((row, rowIndex) => (
+                            <DataTableRow key={rowIndex} dataTest={'table-row'}>
+                                {row.map((value, columnIndex) =>
+                                    cellIsUndefined(rowIndex, columnIndex) ? (
+                                        <Tooltip
+                                            content={i18n.t(
+                                                'No repeated event'
                                             )}
-                                        </div>
-                                    </DataTableCell>
-                                ))}
+                                        >
+                                            {(props) =>
+                                                renderCellContent({
+                                                    columnIndex,
+                                                    value,
+                                                    isUndefined: true,
+                                                    props,
+                                                })
+                                            }
+                                        </Tooltip>
+                                    ) : (
+                                        renderCellContent({
+                                            columnIndex,
+                                            value,
+                                        })
+                                    )
+                                )}
                             </DataTableRow>
                         ))}
                     </DataTableBody>

src/components/Visualization/styles/Visualization.module.css

@@ -121,6 +121,17 @@
     white-space: nowrap;
 }
 
+.dataTable .undefinedCell {
+    background-image: repeating-linear-gradient(
+        45deg,
+        var(--colors-grey300) 0,
+        var(--colors-grey300) 0.8px,
+        transparent 0,
+        transparent 50%
+    );
+    background-size: 8px 8px;
+}
+
 /* Sizes for the table footer */
 .dataTable .stickyNavigation.sizeComfortable {
     padding: 14px 12px;

src/components/Visualization/useAnalyticsData.js

@@ -148,6 +148,9 @@ const fetchAnalyticsData = async ({
         .withParameters({
             headers,
             totalPages: false,
+            ...(headers.some((header) => Array.isArray(header))
+                ? { rowContext: true }
+                : {}),
             ...parameters,
         })
         .withProgram(visualization.program.id)
@@ -271,6 +274,8 @@ const extractRows = (analyticsResponse, headers) => {
     return filteredRows
 }
 
+const extractRowContext = (analyticsResponse) => analyticsResponse.rowContext
+
 const valueTypeIsNumeric = (valueType) =>
     [
         VALUE_TYPE_NUMBER,
@@ -316,6 +321,7 @@ const useAnalyticsData = ({
             })
             const headers = extractHeaders(analyticsResponse)
             const rows = extractRows(analyticsResponse, headers)
+            const rowContext = extractRowContext(analyticsResponse)
             const pager = analyticsResponse.metaData.pager
             const legendSetIds = []
             const headerLegendSetMap = headers.reduce(
@@ -368,7 +374,7 @@ const useAnalyticsData = ({
             }
 
             mounted.current && setError(undefined)
-            mounted.current && setData({ headers, rows, pager })
+            mounted.current && setData({ headers, rows, pager, rowContext })
             onResponsesReceived(analyticsResponse)
         } catch (error) {
             mounted.current && setError(error)