feat: ArcGIS services [DHIS2-15982]

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-06T13:08:55.205Z\n"
-"PO-Revision-Date: 2023-09-06T13:08:55.205Z\n"
+"POT-Creation-Date: 2023-10-17T11:10:00.916Z\n"
+"PO-Revision-Date: 2023-10-17T11:10:00.916Z\n"
 
 msgid "Untitled map, {{date}}"
 msgstr "Untitled map, {{date}}"
@@ -251,12 +251,18 @@ msgstr "Edit {{name}} layer"
 msgid "Add new {{name}} layer"
 msgstr "Add new {{name}} layer"
 
+msgid "{{name}} layer"
+msgstr "{{name}} layer"
+
 msgid "Update layer"
 msgstr "Update layer"
 
 msgid "Add layer"
 msgstr "Add layer"
 
+msgid "Data"
+msgstr "Data"
+
 msgid "Aggregation method"
 msgstr "Aggregation method"
 
@@ -266,9 +272,6 @@ msgstr "Groups"
 msgid "This field is required"
 msgstr "This field is required"
 
-msgid "Data"
-msgstr "Data"
-
 msgid "Period"
 msgstr "Period"
 
@@ -484,6 +487,9 @@ msgstr "No relationship types were found for tracked entity type {{type}}"
 msgid "Relationship type"
 msgstr "Relationship type"
 
+msgid "Feature profile"
+msgstr "Feature profile"
+
 msgid "Remove filter"
 msgstr "Remove filter"
 
@@ -1347,6 +1353,15 @@ msgstr ""
 "This layer requires a Google Earth Engine account. Check the DHIS2 "
 "documentation for more information."
 
+msgid "Fill color"
+msgstr "Fill color"
+
+msgid "Stroke color"
+msgstr "Stroke color"
+
+msgid "Stroke width"
+msgstr "Stroke width"
+
 msgid "Facility"
 msgstr "Facility"
 

package.json

@@ -47,7 +47,11 @@
         "@dhis2/d2-i18n": "^1.1.1",
         "@dhis2/maps-gl": "^3.8.5",
         "@dhis2/ui": "^8.13.15",
+        "@esri/arcgis-rest-feature-service": "^4.0.5",
+        "@esri/arcgis-rest-portal": "^4.4.0",
+        "@esri/arcgis-rest-request": "^4.2.0",
         "@krakenjs/post-robot": "^11.0.0",
+        "@terraformer/arcgis": "^2.1.2",
         "abortcontroller-polyfill": "^1.7.5",
         "array-move": "^4.0.0",
         "classnames": "^2.3.2",

src/actions/feature.js

@@ -4,3 +4,12 @@ export const highlightFeature = (payload) => ({
     type: types.FEATURE_HIGHLIGHT,
     payload,
 })
+
+export const setFeatureProfile = (payload) => ({
+    type: types.FEATURE_PROFILE_SET,
+    payload,
+})
+
+export const closeFeatureProfile = () => ({
+    type: types.FEATURE_PROFILE_CLOSE,
+})

src/actions/layerEdit.js

@@ -358,3 +358,9 @@ export const setNoDataColor = (color) => ({
     type: types.LAYER_EDIT_NO_DATA_COLOR_SET,
     payload: color,
 })
+
+// Set feature style
+export const setFeatureStyle = (payload) => ({
+    type: types.LAYER_EDIT_FEATURE_STYLE_SET,
+    payload,
+})

src/components/app/DetailsPanel.js

@@ -4,19 +4,33 @@ import React from 'react'
 import { useSelector } from 'react-redux'
 import Interpretations from '../interpretations/Interpretations.js'
 import OrgUnitProfile from '../orgunits/OrgUnitProfile.js'
+import FeatureProfile from '../feature/FeatureProfile.js'
 import styles from './styles/DetailsPanel.module.css'
 
 const DetailsPanel = ({ interpretationsRenderCount }) => {
     const detailsPanelOpen = useSelector((state) => state.ui.rightPanelOpen)
     const viewOrgUnitProfile = useSelector((state) => state.orgUnitProfile)
+    const viewFeatureProfile = useSelector((state) => !!state.featureProfile)
     const interpretationId = useSelector((state) => state.interpretation?.id)
 
     const getContent = () => {
-        if (interpretationId || (detailsPanelOpen && !viewOrgUnitProfile)) {
+        if (
+            interpretationId ||
+            (detailsPanelOpen && !viewOrgUnitProfile && !viewFeatureProfile)
+        ) {
             return <Interpretations renderCount={interpretationsRenderCount} />
         }
 
-        return detailsPanelOpen ? <OrgUnitProfile /> : null
+        if (detailsPanelOpen) {
+            if (viewOrgUnitProfile) {
+                return <OrgUnitProfile />
+            }
+            if (viewFeatureProfile) {
+                return <FeatureProfile />
+            }
+        }
+
+        return null
     }
 
     return (

src/components/datatable/DataTable.js

@@ -7,21 +7,23 @@ import React, { Component } from 'react'
 import { connect } from 'react-redux'
 import { Table, Column } from 'react-virtualized'
 import { closeDataTable } from '../../actions/dataTable.js'
-import { highlightFeature } from '../../actions/feature.js'
+import { highlightFeature, setFeatureProfile } from '../../actions/feature.js'
 import { updateLayer } from '../../actions/layers.js'
 import { setOrgUnitProfile } from '../../actions/orgUnits.js'
 import {
     EVENT_LAYER,
     THEMATIC_LAYER,
     ORG_UNIT_LAYER,
     EARTH_ENGINE_LAYER,
+    FEATURE_SERVICE,
 } from '../../constants/layers.js'
 import { numberValueTypes } from '../../constants/valueTypes.js'
 import { filterData } from '../../util/filter.js'
 import { formatTime } from '../../util/helpers.js'
 import ColorCell from './ColorCell.js'
 import ColumnHeader from './ColumnHeader.js'
 import EarthEngineColumns from './EarthEngineColumns.js'
+import FeatureServiceColumns from './FeatureServiceColumns.js'
 import styles from './styles/DataTable.module.css'
 import 'react-virtualized/styles.css'
 
@@ -177,7 +179,24 @@ class DataTable extends Component {
         }
     })
 
-    onRowClick = (evt) => this.props.setOrgUnitProfile(evt.rowData.id)
+    onRowClick = (evt) => {
+        const { layer: layerType } = this.props.layer
+
+        if (layerType === FEATURE_SERVICE) {
+            const { name, fields } = this.props.layer
+
+            this.props.setFeatureProfile({
+                name,
+                fields,
+                data: evt.rowData,
+            })
+        } else {
+            this.props.setOrgUnitProfile(evt.rowData.id)
+        }
+    }
+
+    onRowMouseOver = (evt) => this.highlightFeature(evt.rowData.id)
+    onRowMouseOut = () => this.highlightFeature()
     onRowMouseOver = (evt) => this.highlightFeature(evt.rowData.id)
     onRowMouseOut = () => this.highlightFeature()
 
@@ -191,12 +210,15 @@ class DataTable extends Component {
             serverCluster,
             aggregationType,
             legend,
+            fields,
         } = layer
 
         const isThematic = layerType === THEMATIC_LAYER
         const isOrgUnit = layerType === ORG_UNIT_LAYER
         const isEvent = layerType === EVENT_LAYER
         const isEarthEngine = layerType === EARTH_ENGINE_LAYER
+        const isFeatureService = layerType === FEATURE_SERVICE
+
         const isLoading =
             isEarthEngine && aggregationType?.length && !aggregations
 
@@ -228,22 +250,30 @@ class DataTable extends Component {
                         width={72}
                         className="right"
                     />
-                    <Column
-                        dataKey={isEvent ? 'ouname' : 'name'}
-                        label={isEvent ? i18n.t('Org unit') : i18n.t('Name')}
-                        width={100}
-                        headerRenderer={(props) => (
-                            <ColumnHeader type="string" {...props} />
-                        )}
-                    />
-                    <Column
-                        dataKey="id"
-                        label={i18n.t('Id')}
-                        width={100}
-                        headerRenderer={(props) => (
-                            <ColumnHeader type="string" {...props} />
-                        )}
-                    />
+                    {!isFeatureService && (
+                        <>
+                            <Column
+                                dataKey={isEvent ? 'ouname' : 'name'}
+                                label={
+                                    isEvent
+                                        ? i18n.t('Org unit')
+                                        : i18n.t('Name')
+                                }
+                                width={100}
+                                headerRenderer={(props) => (
+                                    <ColumnHeader type="string" {...props} />
+                                )}
+                            />
+                            <Column
+                                dataKey="id"
+                                label={i18n.t('Id')}
+                                width={100}
+                                headerRenderer={(props) => (
+                                    <ColumnHeader type="string" {...props} />
+                                )}
+                            />
+                        </>
+                    )}
                     {isEvent && (
                         <Column
                             dataKey="eventdate"
@@ -322,14 +352,16 @@ class DataTable extends Component {
                             )}
                         />
                     )}
-                    <Column
-                        dataKey="type"
-                        label={i18n.t('Type')}
-                        width={100}
-                        headerRenderer={(props) => (
-                            <ColumnHeader type="string" {...props} />
-                        )}
-                    />
+                    {!isFeatureService && (
+                        <Column
+                            dataKey="type"
+                            label={i18n.t('Type')}
+                            width={100}
+                            headerRenderer={(props) => (
+                                <ColumnHeader type="string" {...props} />
+                            )}
+                        />
+                    )}
                     {(isThematic || styleDataItem) && (
                         <Column
                             dataKey="color"
@@ -344,6 +376,9 @@ class DataTable extends Component {
 
                     {isEarthEngine &&
                         EarthEngineColumns({ aggregationType, legend, data })}
+
+                    {isFeatureService &&
+                        FeatureServiceColumns({ fields, data })}
                 </Table>
                 {isLoading === true && (
                     <div className={styles.loader}>
@@ -379,6 +414,7 @@ export default connect(
         closeDataTable,
         updateLayer,
         setOrgUnitProfile,
+        setFeatureProfile,
         highlightFeature,
     }
 )(DataTable)

src/components/datatable/FeatureServiceColumns.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Column } from 'react-virtualized';
+import ColumnHeader from './ColumnHeader';
+import { numberPrecision } from '../../util/numbers';
+import { getPrecision } from '../../util/earthEngine';
+
+const FeatureServiceColumns = ({ fields, data }) => {
+    // console.log('FeatureServiceColumns', fields, data);
+
+    if (!fields || !data) {
+        return null;
+    }
+
+    // TODO: Remove slice
+    return fields.slice(0, 10).map(({ name, type }) => {
+        const isString = type.includes('String');
+        const precision = getPrecision(data.map(d => d[name]));
+        const valueFormat = numberPrecision(precision);
+
+        return (
+            <Column
+                key={name}
+                dataKey={name}
+                label={name}
+                width={100}
+                className="right"
+                headerRenderer={props => (
+                    <ColumnHeader
+                        type={isString ? 'string' : 'number'}
+                        {...props}
+                    />
+                )}
+                cellRenderer={
+                    !isString
+                        ? d =>
+                              d.cellData !== undefined
+                                  ? valueFormat(d.cellData)
+                                  : ''
+                        : undefined
+                }
+            />
+        );
+    });
+};
+
+FeatureServiceColumns.propTypes = {
+    fields: PropTypes.array,
+    data: PropTypes.array,
+};
+
+export default FeatureServiceColumns;

src/components/edit/LayerEdit.js

@@ -21,6 +21,7 @@ import OrgUnitDialog from './orgUnit/OrgUnitDialog.js'
 import styles from './styles/LayerEdit.module.css'
 import ThematicDialog from './thematic/ThematicDialog.js'
 import TrackedEntityDialog from './trackedEntity/TrackedEntityDialog.js'
+import FeatureServiceDialog from './arcgis/FeatureServiceDialog.js'
 
 const layerType = {
     event: EventDialog,
@@ -29,16 +30,19 @@ const layerType = {
     thematic: ThematicDialog,
     orgUnit: OrgUnitDialog,
     earthEngine: EarthEngineDialog,
+    featureService: FeatureServiceDialog,
 }
 
+/*
 const layerName = () => ({
     event: i18n.t('event'),
     trackedEntity: i18n.t('tracked entity'),
     facility: i18n.t('facility'),
     thematic: i18n.t('thematic'),
     orgUnit: i18n.t('org unit'),
     earthEngine: i18n.t('Earth Engine'),
-})
+});
+*/
 
 const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
     const [isValidLayer, setIsValidLayer] = useState(false)
@@ -80,15 +84,20 @@ const LayerEdit = ({ layer, addLayer, updateLayer, cancelLayer }) => {
         return null
     }
 
-    let name = layerName()[type]
+    // let name = layerName()[type] || layer.type;
+    let name = layer.type
 
     if (type === EARTH_ENGINE_LAYER) {
-        name = layer.name.toLowerCase()
+        name = layer.name // .toLowerCase();
     }
 
+    /*
     const title = layer.id
         ? i18n.t('Edit {{name}} layer', { name })
-        : i18n.t('Add new {{name}} layer', { name })
+        : i18n.t('Add new {{name}} layer', { name });
+    */
+
+    const title = i18n.t('{{name}} layer', { name })
 
     return (
         <Modal position="middle" dataTest="layeredit">