fix: schemas were unnecessarily loaded and taking up valuable bandwid…

…th (#3197) Removed fetching of all the schemas. Where needed, d2 was replaced with data engine from app-runtime. (d2 needed the schemas to create the models)
dhis2 · Aug 19, 2024 · 4b8dd61 · 4b8dd61
1 parent bed6bf3
commit 4b8dd61
Show file tree

Hide file tree

Showing 50 changed files with 2,541 additions and 772 deletions.
diff --git a/cypress/fixtures/externalMapLayersWithGeojson.json b/cypress/fixtures/externalMapLayersWithGeojson.json
@@ -67,4 +67,4 @@
             "name": "Polygon only geojson"
         }
     ]
-}
+}
diff --git a/cypress/integration/dataTable.cy.js b/cypress/integration/dataTable.cy.js
@@ -133,25 +133,23 @@ describe('data table', () => {
         cy.getByDataTest('org-unit-profile').should('be.visible')
     })
 
-    it.skip('opens the data table for an Event layer', () => {
+    it('opens the data table for an Event layer', () => {
         cy.visit('/', EXTENDED_TIMEOUT)
 
         const Layer = new EventLayer()
 
         Layer.openDialog('Events')
-            .selectProgram('Malaria case registration')
-            .validateStage('Malaria case registration')
+            .selectProgram('Inpatient morbidity and mortality')
+            .validateStage('Inpatient morbidity and mortality')
             .selectTab('Period')
             .selectPeriodType('Start/end dates')
             .typeStartDate(`${CURRENT_YEAR - 1}-01-01`)
-            .typeEndDate(`${CURRENT_YEAR - 1}-01-15`)
-            .selectTab('Org Units')
-            .selectOu('Bo')
+            .typeEndDate(`${CURRENT_YEAR - 1}-01-03`)
             .addToMap()
 
         Layer.validateDialogClosed(true)
 
-        Layer.validateCardTitle('Malaria case registration')
+        Layer.validateCardTitle('Inpatient morbidity and mortality')
 
         cy.getByDataTest('moremenubutton').first().click()
 
@@ -166,20 +164,20 @@ describe('data table', () => {
         // check number of columns
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-datatablecellhead')
-            .should('have.length', 9)
+            .should('have.length', 10)
 
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-datatablecellhead')
             .contains('Age in years', { matchCase: false })
             .should('be.visible')
 
         // filter by Org unit
-        const ouName = 'Benduma'
+        const ouName = 'Moyowa'
         cy.getByDataTest('data-table-column-filter-input-Org unit')
             .find('input')
             .type(ouName)
 
-        // check that all the rows have Org unit Yakaji
+        // check that all the rows have Org unit Moyowa
 
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-tablebody')
@@ -200,26 +198,26 @@ describe('data table', () => {
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-tablebody')
             .findByDataTest('dhis2-uicore-datatablerow')
-            .should('have.length', 5)
+            .should('have.length', 3)
 
-        // filter by Gender
-        cy.getByDataTest('data-table-column-filter-input-Gender')
+        // filter by Mode of Discharge
+        cy.getByDataTest('data-table-column-filter-input-Mode of Discharge')
             .find('input')
-            .type('Female')
+            .type('Absconded')
 
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-tablebody')
             .findByDataTest('dhis2-uicore-datatablerow')
-            .should('have.length', 4)
+            .should('have.length', 1)
 
-        cy.getByDataTest('data-table-column-filter-input-Gender')
+        cy.getByDataTest('data-table-column-filter-input-Mode of Discharge')
             .find('input')
             .clear()
 
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-tablebody')
             .findByDataTest('dhis2-uicore-datatablerow')
-            .should('have.length', 5)
+            .should('have.length', 3)
 
         // filter by Age in years (numeric)
         cy.getByDataTest('data-table-column-filter-input-Age in years')
@@ -230,7 +228,7 @@ describe('data table', () => {
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-tablebody')
             .findByDataTest('dhis2-uicore-datatablerow')
-            .should('have.length', 3)
+            .should('have.length', 2)
 
         // Sort by Age in years
         cy.get('button[title="Sort by Age in years"]').click()
@@ -242,7 +240,7 @@ describe('data table', () => {
             .first()
             .find('td')
             .eq(7)
-            .should('contain', '44')
+            .should('contain', '32')
 
         cy.getByDataTest('bottom-panel')
             .findByDataTest('dhis2-uicore-tablebody')

diff --git a/cypress/integration/layers/eventlayer.cy.js b/cypress/integration/layers/eventlayer.cy.js
@@ -30,4 +30,26 @@ context('Event Layers', () => {
         Layer.validateCardTitle('Inpatient morbidity and mortality')
         Layer.validateCardItems(['Event'])
     })
+
+    it('adds an event layer and applies style for boolean data element', () => {
+        Layer.openDialog('Events')
+            .selectProgram('E2E program')
+            .validateStage('Stage 1 - Repeatable')
+            .selectTab('Style')
+
+        cy.getByDataTest('style-by-data-element-select').click()
+
+        cy.getByDataTest('dhis2-uicore-singleselectoption')
+            .contains('E2E - Yes/no')
+            .click()
+
+        cy.getByDataTest('dhis2-uicore-modalactions')
+            .contains('Add layer')
+            .click()
+
+        Layer.validateDialogClosed(true)
+
+        Layer.validateCardTitle('Stage 1 - Repeatable')
+        Layer.validateCardItems(['Yes', 'No', 'Not set'])
+    })
 })
diff --git a/cypress/integration/layers/facilitylayer.cy.js b/cypress/integration/layers/facilitylayer.cy.js
@@ -25,10 +25,30 @@ context('Facility Layers', () => {
             .addToMap()
 
         Layer.validateDialogClosed(true)
+        Layer.validateCardTitle('Facilities')
+        Layer.validateCardItems(['Facility'])
+    })
 
-        // TODO: use visual snapshot testing to check the rendering of the map
+    it('adds a facilities layer and changes the style', () => {
+        Layer.openDialog('Facilities')
+            .selectTab('Organisation Units')
+            .selectOu('Bo')
+            .selectOuLevel('Facility')
+            .selectTab('Style')
+
+        cy.getByDataTest('orgunitgroupsetselect-content').click()
+        cy.getByDataTest('dhis2-uicore-select-menu-menuwrapper')
+            .contains('Facility Type')
+            .click()
+
+        cy.getByDataTest('group-set-style').should('be.visible')
+        cy.getByDataTest('group-set-style').children().should('have.length', 5)
+
+        cy.getByDataTest('dhis2-uicore-modalactions')
+            .contains('Add layer')
+            .click()
 
         Layer.validateCardTitle('Facilities')
-        Layer.validateCardItems(['Facility'])
+        Layer.validateCardItems(['CHC', 'CHP', 'Clinic', 'Hospital', 'MCHP'])
     })
 })
diff --git a/cypress/integration/layers/orgunitlayer.cy.js b/cypress/integration/layers/orgunitlayer.cy.js
@@ -17,7 +17,7 @@ context('Org Unit Layers', () => {
         cy.contains('No organisation units are selected').should('be.visible')
     })
 
-    it('adds a org unit layer', () => {
+    it('adds an org unit layer', () => {
         Layer.openDialog('Org units')
             .selectOu('Sierra Leone')
             .selectOuLevel('District')
@@ -30,4 +30,26 @@ context('Org Unit Layers', () => {
         Layer.validateCardTitle('Organisation units')
         Layer.validateCardItems(['District'])
     })
+
+    it('adds an org unit layer and changes the style', () => {
+        Layer.openDialog('Org units')
+            .selectOu('Sierra Leone')
+            .selectOuLevel('District')
+            .selectTab('Style')
+
+        cy.getByDataTest('orgunitgroupsetselect-content').click()
+        cy.getByDataTest('dhis2-uicore-select-menu-menuwrapper')
+            .contains('Facility Type')
+            .click()
+
+        cy.getByDataTest('group-set-style').should('be.visible')
+        cy.getByDataTest('group-set-style').children().should('have.length', 5)
+
+        cy.getByDataTest('dhis2-uicore-modalactions')
+            .contains('Add layer')
+            .click()
+
+        Layer.validateCardTitle('Organisation units')
+        Layer.validateCardItems(['CHC', 'CHP', 'Clinic', 'Hospital', 'MCHP'])
+    })
 })
diff --git a/cypress/integration/layers/thematiclayer.cy.js b/cypress/integration/layers/thematiclayer.cy.js
@@ -71,15 +71,6 @@ context('Thematic Layers', () => {
         Layer.validateDialogClosed(true)
 
         Layer.validateCardTitle(INDICATOR_NAME)
-        // TODO: test this in a way that is not dependent on the date
-        // Layer.validateCardItems([
-        //     '80.9 - 83.04 (1)',
-        //     '83.04 - 85.18 (0)',
-        //     '85.18 - 87.32 (0)',
-        //     '87.32 - 89.46 (0)',
-        //     '89.46 - 91.6 (1)',
-        // ]);
-
         getMaps().should('have.length', 1)
     })
 
@@ -138,4 +129,22 @@ context('Thematic Layers', () => {
             { name: VIEW_PROFILE },
         ])
     })
+
+    it('adds a thematic layer for data element', () => {
+        const DE_NAME = 'ANC 1st visit'
+        Layer.openDialog('Thematic')
+            .selectItemType('Data element')
+            .selectDataElementGroup('ANC')
+            .selectDataElement(DE_NAME)
+            .addToMap()
+
+        Layer.validateDialogClosed(true)
+
+        Layer.validateCardTitle(DE_NAME)
+        cy.getByDataTest(`card-ANC1stvisit`)
+            .findByDataTest('layerlegend-item')
+            .should('have.length', 5)
+
+        getMaps().should('have.length', 1)
+    })
 })
diff --git a/cypress/integration/routes.cy.js b/cypress/integration/routes.cy.js
@@ -76,6 +76,15 @@ describe('Routes', () => {
         const Layer = new ThematicLayer()
         Layer.validateCardTitle('ANC 1 Coverage')
         cy.get('canvas.maplibregl-canvas').should('be.visible')
+
+        cy.getByDataTest(`card-ANC1Coverage`)
+            .findByDataTest('layerlegend-item')
+            .should('have.length', 7)
+
+        cy.getByDataTest(`card-ANC1Coverage`)
+            .findByDataTest('layerlegend-item')
+            .first()
+            .contains('Low 0 - 30')
     })
 
     it('loads with map id (legacy) and interpretationid lowercase', () => {

diff --git a/src/AppWrapper.js b/src/AppWrapper.js
@@ -20,24 +20,7 @@ log.setLevel(
 )
 
 const d2Config = {
-    schemas: [
-        'dataElement',
-        'dataElementGroup',
-        'dataSet',
-        'externalMapLayer',
-        'indicator',
-        'indicatorGroup',
-        'legendSet',
-        'map',
-        'optionSet',
-        'organisationUnit',
-        'organisationUnitGroup',
-        'organisationUnitGroupSet',
-        'organisationUnitLevel',
-        'program',
-        'programStage',
-        'userGroup',
-    ],
+    schemas: [],
 }
 
 const replaceLegacyUrl = () => {

diff --git a/src/components/OrgUnitsProvider.js b/src/components/OrgUnitsProvider.js
@@ -7,7 +7,7 @@ const ORG_UNITS_QUERY = {
     roots: {
         resource: 'organisationUnits',
         params: () => ({
-            fields: ['id', 'displayName~rename(name)', 'path'],
+            fields: ['id', 'displayName~rename(name)', 'path'], // TODO organisationUnits has shortName
             userDataViewFallback: true,
         }),
     },

diff --git a/src/components/dataItem/StyleByDataItem.js b/src/components/dataItem/StyleByDataItem.js
@@ -59,6 +59,7 @@ const StyleByDataItem = ({ program, programStage, error }) => {
                 value={styleDataItem ? styleDataItem.id : null}
                 items={dataItems}
                 onChange={onChange}
+                dataTest="style-by-data-element-select"
             />
             {styleDataItem && (
                 <DataItemStyle key="style" dataItem={styleDataItem} />

diff --git a/src/components/groupSet/GroupSetSelect.js b/src/components/groupSet/GroupSetSelect.js
@@ -53,7 +53,7 @@ const GroupSetSelect = ({
                 error?.message || (!value && errorText ? errorText : null)
             }
             className={className}
-            data-test="orgunitgroupsetselect"
+            dataTest="orgunitgroupsetselect"
         />
     )
 }

diff --git a/src/components/groupSet/GroupSetStyle.js b/src/components/groupSet/GroupSetStyle.js
@@ -4,23 +4,16 @@ import { Help } from '@dhis2/ui'
 import PropTypes from 'prop-types'
 import React, { useState, useEffect } from 'react'
 import { STYLE_TYPE_COLOR } from '../../constants/layers.js'
-import { parseGroupSet } from '../../util/orgUnits.js'
+import {
+    ORG_UNITS_GROUP_SET_QUERY,
+    parseGroupSet,
+} from '../../util/orgUnits.js'
 import GroupStyle from './GroupStyle.js'
 import styles from './styles/GroupSetStyle.module.css'
 
-const GROUP_SETS_QUERY = {
-    groupSets: {
-        resource: 'organisationUnitGroupSets',
-        id: ({ id }) => id,
-        params: {
-            fields: ['organisationUnitGroups[id,name,color,symbol]'],
-        },
-    },
-}
-
 const GroupSetStyle = ({ defaultStyleType = STYLE_TYPE_COLOR, groupSet }) => {
     const [groups, setGroups] = useState([])
-    const { error: err, refetch } = useDataQuery(GROUP_SETS_QUERY, {
+    const { error: err, refetch } = useDataQuery(ORG_UNITS_GROUP_SET_QUERY, {
         lazy: true,
         onComplete: ({ groupSets }) => {
             const groupsWithColors = parseGroupSet({
@@ -45,7 +38,7 @@ const GroupSetStyle = ({ defaultStyleType = STYLE_TYPE_COLOR, groupSet }) => {
     }
 
     return (
-        <div className={styles.groupSetStyle}>
+        <div data-test="group-set-style" className={styles.groupSetStyle}>
             {groups?.map((group) => (
                 <GroupStyle
                     key={group.id}

diff --git a/src/components/groupSet/GroupStyle.js b/src/components/groupSet/GroupStyle.js
@@ -1,20 +1,13 @@
-import { getInstance as getD2 } from 'd2'
+import { useConfig } from '@dhis2/app-runtime'
 import PropTypes from 'prop-types'
-import React, { useState, useEffect } from 'react'
+import React from 'react'
 import styles from './styles/GroupStyle.module.css'
 
 const GroupStyle = ({ name, color, symbol, styleType }) => {
-    const [imagePath, setImagePath] = useState()
+    const { baseUrl } = useConfig()
+    const imagePath = `${baseUrl}/images/orgunitgroup/`
     const useColor = styleType !== 'SYMBOL'
 
-    useEffect(() => {
-        getD2().then((d2) =>
-            setImagePath(
-                `${d2.system.systemInfo.contextPath}/images/orgunitgroup/`
-            )
-        )
-    }, [])
-
     return (
         <div className={styles.item}>
             {useColor ? (
-Original file line number
+Diff line change
@@ Expand Up / @@ -67,4 +67,4 @@ @@
                 "name": "Polygon only geojson"
             }
         ]
-    }
+    }