@hisptz/dhis2-analytics 1.0.5 → 1.0.7

package/build/cjs/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.js

@@ -0,0 +1,61 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LegendItem = LegendItem;
+exports.default = void 0;
+require("../../../styles/legends.css");
+var _ui = require("@dhis2/ui");
+var _react = _interopRequireWildcard(require("react"));
+var _map = require("../../../../../../../utils/map");
+var _LegendCardHeader = _interopRequireDefault(require("../../../../LegendArea/components/LegendCardHeader"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function LegendItem(_ref) {
+  let {
+    legend,
+    value
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item-color",
+    style: {
+      backgroundColor: legend.color
+    }
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item-label"
+  }, `${legend.startValue} - ${legend.endValue}`), /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-item-value"
+  }, `(${value})`));
+}
+function ChoroplethLegend(_ref2, ref) {
+  let {
+    dataItem,
+    data,
+    name,
+    collapsible,
+    onCollapse,
+    legends
+  } = _ref2;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-card",
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_LegendCardHeader.default, {
+    title: dataItem.displayName,
+    collapsible: collapsible,
+    onCollapse: onCollapse
+  }), /*#__PURE__*/_react.default.createElement(_ui.Divider, {
+    margin: "0"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "legend-list pt-8"
+  }, legends === null || legends === void 0 ? void 0 : legends.map(legend => /*#__PURE__*/_react.default.createElement(LegendItem, {
+    key: `${legend === null || legend === void 0 ? void 0 : legend.color}-legend-list`,
+    legend: legend,
+    value: (0, _map.getLegendCount)(legend, data)
+  }))));
+}
+var _default = /*#__PURE__*/(0, _react.forwardRef)(ChoroplethLegend);
+exports.default = _default;

package/build/cjs/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Choropleth;
+var _ui = require("@dhis2/ui");
+var _react = _interopRequireDefault(require("react"));
+var _reactLeaflet = require("react-leaflet");
+var _map = require("../../../../../../utils/map");
+var _CustomTooltip = _interopRequireDefault(require("../CustomTooltip"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const defaultStyle = {
+  weight: 1
+};
+const highlightStyle = {
+  weight: 2
+};
+function Choropleth(_ref) {
+  let {
+    data,
+    legends
+  } = _ref;
+  const {
+    orgUnit
+  } = data;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLeaflet.GeoJSON, {
+    data: orgUnit.geoJSON,
+    eventHandlers: {
+      mouseover: e => (0, _map.highlightFeature)(e, highlightStyle),
+      mouseout: e => (0, _map.resetHighlight)(e, defaultStyle)
+    },
+    pathOptions: {
+      fillColor: (0, _map.getColorFromLegendSet)(legends, data.data),
+      fillOpacity: 1,
+      color: _ui.colors.grey900,
+      weight: 1
+    },
+    key: `${data.dataItem.id}-layer`
+  }, /*#__PURE__*/_react.default.createElement(_CustomTooltip.default, {
+    data: data
+  })));
+}

package/build/cjs/components/Map/components/MapLayer/components/ThematicLayer/components/CustomTooltip/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomTooltip;
+var _d2I18n = _interopRequireDefault(require("@dhis2/d2-i18n"));
+var _react = _interopRequireDefault(require("react"));
+var _reactLeaflet = require("react-leaflet");
+var _hooks = require("../../../../../MapProvider/hooks");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function CustomTooltip(_ref) {
+  var _useMapPeriods;
+  let {
+    data: dataObject
+  } = _ref;
+  const {
+    dataItem,
+    orgUnit,
+    data
+  } = dataObject !== null && dataObject !== void 0 ? dataObject : {};
+  const {
+    periods
+  } = (_useMapPeriods = (0, _hooks.useMapPeriods)()) !== null && _useMapPeriods !== void 0 ? _useMapPeriods : {};
+  return /*#__PURE__*/_react.default.createElement(_reactLeaflet.Pane, {
+    name: `${dataItem.displayName}-${orgUnit.id}-popup-pane`,
+    pane: "popupPane"
+  }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.Tooltip, null, orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.name, " (", data, ")"), /*#__PURE__*/_react.default.createElement(_reactLeaflet.Popup, {
+    minWidth: 80
+  }, /*#__PURE__*/_react.default.createElement("h3", {
+    style: {
+      margin: 0
+    }
+  }, orgUnit === null || orgUnit === void 0 ? void 0 : orgUnit.name), /*#__PURE__*/_react.default.createElement("div", null, dataItem === null || dataItem === void 0 ? void 0 : dataItem.displayName), /*#__PURE__*/_react.default.createElement("div", null, periods === null || periods === void 0 ? void 0 : periods.map(period => period.name).join(",")), /*#__PURE__*/_react.default.createElement("div", null, _d2I18n.default.t("Value"), ": ", data)));
+}

package/build/cjs/components/Map/components/MapLayer/components/ThematicLayer/hooks/config.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = useThematicLayer;
+var _lodash = require("lodash");
+var _react = require("react");
+var _state = require("../../../../../state");
+function useThematicLayer(layerId) {
+  const {
+    layers
+  } = (0, _react.useContext)(_state.MapLayersContext);
+  return (0, _lodash.find)(layers, ["id", layerId]);
+}

package/build/cjs/components/Map/components/MapLayer/components/ThematicLayer/index.js

@@ -0,0 +1,57 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = ThematicLayer;
+var _lodash = require("lodash");
+var _react = _interopRequireDefault(require("react"));
+var _reactLeaflet = require("react-leaflet");
+var _Bubble = _interopRequireDefault(require("./components/Bubble"));
+var _Choropleth = _interopRequireDefault(require("./components/Choropleth"));
+var _config = _interopRequireDefault(require("./hooks/config"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function ThematicLayer(_ref) {
+  let {
+    layerId,
+    index
+  } = _ref;
+  const layer = (0, _config.default)(layerId);
+  if (!layer) {
+    return null;
+  }
+  const {
+    type,
+    dataItem,
+    name,
+    data,
+    enabled,
+    legends
+  } = layer !== null && layer !== void 0 ? layer : {};
+  const uniqueName = name !== null && name !== void 0 ? name : dataItem.displayName;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_reactLeaflet.LayersControl.Overlay, {
+    checked: enabled,
+    name: uniqueName
+  }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.Pane, {
+    style: {
+      zIndex: type === "bubble" ? 500 : 500 - (index + 1)
+    },
+    name: uniqueName
+  }, /*#__PURE__*/_react.default.createElement(_reactLeaflet.LayerGroup, null, data === null || data === void 0 ? void 0 : data.map(datum => {
+    var _datum$dataItem, _datum$orgUnit;
+    return type === "choropleth" ? /*#__PURE__*/_react.default.createElement(_Choropleth.default, {
+      legends: legends !== null && legends !== void 0 ? legends : [],
+      data: datum,
+      key: `${datum === null || datum === void 0 ? void 0 : (_datum$dataItem = datum.dataItem) === null || _datum$dataItem === void 0 ? void 0 : _datum$dataItem.id}-${datum === null || datum === void 0 ? void 0 : (_datum$orgUnit = datum.orgUnit) === null || _datum$orgUnit === void 0 ? void 0 : _datum$orgUnit.id}-layer`
+    }) : null;
+  }), data === null || data === void 0 ? void 0 : data.map(datum => {
+    var _last$data, _last, _datum$dataItem2, _datum$orgUnit2;
+    return type === "bubble" ? /*#__PURE__*/_react.default.createElement(_Bubble.default, {
+      radius: layer === null || layer === void 0 ? void 0 : layer.radius,
+      legends: legends !== null && legends !== void 0 ? legends : [],
+      highestData: (_last$data = (_last = (0, _lodash.last)(data)) === null || _last === void 0 ? void 0 : _last.data) !== null && _last$data !== void 0 ? _last$data : 1,
+      data: datum,
+      key: `${datum === null || datum === void 0 ? void 0 : (_datum$dataItem2 = datum.dataItem) === null || _datum$dataItem2 === void 0 ? void 0 : _datum$dataItem2.id}-${datum === null || datum === void 0 ? void 0 : (_datum$orgUnit2 = datum.orgUnit) === null || _datum$orgUnit2 === void 0 ? void 0 : _datum$orgUnit2.id}-layer`
+    }) : null;
+  })))));
+}

package/build/cjs/components/Map/components/MapLayer/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = MapLayer;
+var _react = _interopRequireDefault(require("react"));
+var _BoundaryLayer = _interopRequireDefault(require("./components/BoundaryLayer"));
+var _GoogleEngineLayer = _interopRequireDefault(require("./components/GoogleEngineLayer"));
+var _PointLayer = require("./components/PointLayer");
+var _ThematicLayer = _interopRequireDefault(require("./components/ThematicLayer"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function MapLayer(_ref) {
+  let {
+    layer,
+    index
+  } = _ref;
+  switch (layer.type) {
+    case "overlay":
+    case "basemap":
+      return /*#__PURE__*/_react.default.createElement(_BoundaryLayer.default, layer);
+    case "bubble":
+    case "choropleth":
+      return /*#__PURE__*/_react.default.createElement(_ThematicLayer.default, {
+        layerId: layer.id,
+        index: index
+      });
+    case "point":
+      return /*#__PURE__*/_react.default.createElement(_PointLayer.PointLayer, null);
+    case "population":
+    case "elevation":
+    case "footprints":
+    case "landCover":
+      return /*#__PURE__*/_react.default.createElement(_GoogleEngineLayer.default, {
+        layerId: layer.id
+      });
+    default:
+      return null;
+  }
+}

package/build/cjs/components/Map/components/MapLayer/interfaces/index.js

@@ -0,0 +1,8 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SUPPORTED_EARTH_ENGINE_LAYERS = void 0;
+const SUPPORTED_EARTH_ENGINE_LAYERS = ["population", "footprints", "elevation", "landCover"];
+exports.SUPPORTED_EARTH_ENGINE_LAYERS = SUPPORTED_EARTH_ENGINE_LAYERS;

package/build/cjs/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.js

@@ -0,0 +1,389 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useGoogleEngineLayers = useGoogleEngineLayers;
+exports.usePointLayer = usePointLayer;
+exports.useThematicLayers = useThematicLayers;
+var _lodash = require("lodash");
+var _hooks = require("../../../hooks");
+var _react = require("react");
+var _map = require("../../../../../utils/map");
+var _appRuntime = require("@dhis2/app-runtime");
+var _asyncEs = require("async-es");
+var _colors = require("../../../../../utils/colors");
+var _hooks2 = require("../../../../MapLayer/components/GoogleEngineLayer/hooks");
+var _useBoundaryData = require("../../../../MapLayer/components/BoundaryLayer/hooks/useBoundaryData");
+var _engine = require("../../../../MapLayer/components/GoogleEngineLayer/services/engine");
+var _constants = require("../../../../MapLayer/components/GoogleEngineLayer/constants");
+const analyticsQuery = {
+  analytics: {
+    resource: "analytics",
+    params: _ref => {
+      let {
+        ou,
+        pe,
+        dx,
+        startDate,
+        endDate
+      } = _ref;
+      const peDimension = !(0, _lodash.isEmpty)(pe) ? `pe:${pe === null || pe === void 0 ? void 0 : pe.join(";")}` : undefined;
+      const ouDimension = !(0, _lodash.isEmpty)(ou) ? `ou:${ou === null || ou === void 0 ? void 0 : ou.join(";")}` : undefined;
+      const dxDimension = !(0, _lodash.isEmpty)(dx) ? `dx:${dx === null || dx === void 0 ? void 0 : dx.join(";")}` : undefined;
+      return {
+        dimension: (0, _lodash.compact)([dxDimension, peDimension, ouDimension]),
+        startDate,
+        endDate,
+        displayProperty: "NAME"
+      };
+    }
+  }
+};
+const query = {
+  layer: {
+    resource: "geoFeatures",
+    params: _ref2 => {
+      let {
+        ous
+      } = _ref2;
+      return {
+        ou: `ou:${ous.join(";")}`
+      };
+    }
+  },
+  analytics: {
+    resource: "analytics",
+    params: _ref3 => {
+      let {
+        ous
+      } = _ref3;
+      return {
+        dimension: [`ou:${ous.join(";")}`, `pe:${new Date().getFullYear()}`],
+        skipData: true,
+        hierarchyMeta: true
+      };
+    }
+  }
+};
+const groupSetQuery = {
+  groupSet: {
+    resource: "organisationUnitGroupSets",
+    id: _ref4 => {
+      let {
+        groupSet
+      } = _ref4;
+      return groupSet;
+    },
+    params: {
+      fields: ["organisationUnitGroups[name,color,symbol,organisationUnits[id]]"]
+    }
+  }
+};
+const legendSetsQuery = {
+  legendSets: {
+    resource: "legendSets",
+    id: _ref5 => {
+      let {
+        id
+      } = _ref5;
+      return id;
+    },
+    params: {
+      fields: ["id", "displayName", "legends[id,code,startValue,endValue,color]"]
+    }
+  }
+};
+function useThematicLayers() {
+  var _useMapPeriods;
+  const engine = (0, _appRuntime.useDataEngine)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const {
+    orgUnits,
+    orgUnitSelection
+  } = (0, _hooks.useMapOrganisationUnit)();
+  const {
+    periods,
+    range
+  } = (_useMapPeriods = (0, _hooks.useMapPeriods)()) !== null && _useMapPeriods !== void 0 ? _useMapPeriods : {};
+  const ou = (0, _react.useMemo)(() => (0, _map.getOrgUnitsSelection)(orgUnitSelection), [orgUnitSelection]);
+  const pe = (0, _react.useMemo)(() => periods === null || periods === void 0 ? void 0 : periods.map(pe => pe.id), [periods]);
+  const {
+    startDate,
+    endDate
+  } = (0, _react.useMemo)(() => {
+    if (!range) {
+      return {
+        startDate: undefined,
+        endDate: undefined
+      };
+    }
+    return {
+      startDate: (0, _map.sanitizeDate)(range.start.toDateString()),
+      endDate: (0, _map.sanitizeDate)(range.end.toDateString())
+    };
+  }, [range]);
+  const sanitizeData = (data, layer) => {
+    if (data) {
+      const {
+        analytics
+      } = data;
+      const rows = analytics === null || analytics === void 0 ? void 0 : analytics.rows;
+      const ouIndex = analytics.headers.findIndex(header => header.name === "ou");
+      const dxIndex = analytics.headers.findIndex(header => header.name === "dx");
+      const valueIndex = analytics.headers.findIndex(header => header.name === "value");
+      if (!(0, _lodash.isEmpty)(rows)) {
+        return (0, _lodash.sortBy)(orgUnits === null || orgUnits === void 0 ? void 0 : orgUnits.map(ou => {
+          const row = rows.find(row => row[ouIndex] === ou.id && row[dxIndex] === layer.dataItem.id);
+          return {
+            orgUnit: ou,
+            data: row ? parseFloat(row[valueIndex]) : undefined,
+            dataItem: {
+              ...layer.dataItem
+            }
+          };
+        }), ["data"]);
+      }
+      return [];
+    }
+    return [];
+  };
+  const sanitizeLegends = async layers => {
+    return await (0, _asyncEs.map)(layers, (0, _asyncEs.asyncify)(async layer => {
+      try {
+        const legends = [];
+        if (layer.dataItem.legendSet) {
+          const legendSetData = await engine.query(legendSetsQuery, {
+            variables: {
+              id: layer.dataItem.legendSet
+            }
+          });
+          const legendSet = legendSetData === null || legendSetData === void 0 ? void 0 : legendSetData.legendSets;
+          if (legendSet) {
+            legends.push(...legendSet.legends);
+          }
+        } else {
+          var _layer$dataItem$legen, _last$data, _last, _head$data, _head;
+          const {
+            scale,
+            colorClass
+          } = (_layer$dataItem$legen = layer.dataItem.legendConfig) !== null && _layer$dataItem$legen !== void 0 ? _layer$dataItem$legen : {
+            scale: _colors.defaultClasses,
+            colorClass: _colors.defaultColorScaleName
+          };
+          const sortedData = (0, _lodash.sortBy)(layer.data, "data");
+          const autoLegends = (0, _map.generateLegends)((_last$data = (_last = (0, _lodash.last)(sortedData)) === null || _last === void 0 ? void 0 : _last.data) !== null && _last$data !== void 0 ? _last$data : 0, (_head$data = (_head = (0, _lodash.head)(sortedData)) === null || _head === void 0 ? void 0 : _head.data) !== null && _head$data !== void 0 ? _head$data : 0, {
+            classesCount: scale,
+            colorClass
+          });
+          legends.push(...autoLegends);
+        }
+        return {
+          ...layer,
+          legends
+        };
+      } catch (e) {
+        return layer;
+      }
+    }));
+  };
+  const sanitizeLayers = async layers => {
+    try {
+      setLoading(true);
+      const layersWithoutData = layers === null || layers === void 0 ? void 0 : layers.filter(layer => !layer.data);
+      const layersWithData = (0, _lodash.differenceBy)(layers, layersWithoutData, "id");
+      const dx = layersWithoutData.map(layer => layer.dataItem.id);
+      let sanitizedLayersWithData = [];
+      if (!(0, _lodash.isEmpty)(dx)) {
+        const data = await engine.query(analyticsQuery, {
+          variables: {
+            dx,
+            ou,
+            pe,
+            startDate,
+            endDate
+          }
+        });
+        sanitizedLayersWithData = layersWithoutData.map(layer => {
+          var _ref6, _layer$name, _layer$dataItem;
+          return {
+            ...layer,
+            name: (_ref6 = (_layer$name = layer === null || layer === void 0 ? void 0 : layer.name) !== null && _layer$name !== void 0 ? _layer$name : layer === null || layer === void 0 ? void 0 : (_layer$dataItem = layer.dataItem) === null || _layer$dataItem === void 0 ? void 0 : _layer$dataItem.displayName) !== null && _ref6 !== void 0 ? _ref6 : layer.id,
+            data: sanitizeData(data, layer)
+          };
+        });
+      }
+      const sanitizedLayersWithOrgUnits = layersWithData.map(layer => {
+        var _layer$data;
+        return {
+          ...layer,
+          data: (_layer$data = layer.data) === null || _layer$data === void 0 ? void 0 : _layer$data.map(datum => {
+            var _ref7, _layer$name2, _layer$dataItem2;
+            return {
+              ...datum,
+              orgUnit: (0, _lodash.find)(orgUnits, ["id", datum.orgUnit]),
+              dataItem: layer.dataItem,
+              name: (_ref7 = (_layer$name2 = layer === null || layer === void 0 ? void 0 : layer.name) !== null && _layer$name2 !== void 0 ? _layer$name2 : layer === null || layer === void 0 ? void 0 : (_layer$dataItem2 = layer.dataItem) === null || _layer$dataItem2 === void 0 ? void 0 : _layer$dataItem2.displayName) !== null && _ref7 !== void 0 ? _ref7 : layer.id
+            };
+          })
+        };
+      });
+      setLoading(false);
+      return await sanitizeLegends([...sanitizedLayersWithData, ...sanitizedLayersWithOrgUnits]);
+    } catch (e) {
+      console.error(`Error getting thematic layers`, e.details);
+      setLoading(false);
+      return [];
+    }
+  };
+  return {
+    sanitizeLayers,
+    loading
+  };
+}
+function usePointLayer() {
+  const engine = (0, _appRuntime.useDataEngine)();
+  const {
+    orgUnitSelection
+  } = (0, _hooks.useMapOrganisationUnit)();
+  const [loading, setLoading] = (0, _react.useState)(false);
+  const sanitizePointData = (0, _react.useCallback)((orgUnitData, groupSetData) => {
+    var _ref8;
+    const {
+      analytics,
+      layer
+    } = (_ref8 = orgUnitData) !== null && _ref8 !== void 0 ? _ref8 : {};
+    const rawOrgUnits = (0, _map.sanitizeOrgUnits)(analytics === null || analytics === void 0 ? void 0 : analytics.metaData);
+    const geoJSONObjects = (0, _map.toGeoJson)(layer === null || layer === void 0 ? void 0 : layer.filter(bound => bound.co));
+    return (0, _lodash.compact)(rawOrgUnits.map(orgUnit => {
+      var _organisationUnitGrou, _groupSetData$groupSe;
+      const geoJSONObject = geoJSONObjects === null || geoJSONObjects === void 0 ? void 0 : geoJSONObjects.find(geoJSON => geoJSON.properties.id === orgUnit.id);
+      const orgUnitGroups = (_organisationUnitGrou = groupSetData === null || groupSetData === void 0 ? void 0 : (_groupSetData$groupSe = groupSetData.groupSet) === null || _groupSetData$groupSe === void 0 ? void 0 : _groupSetData$groupSe.organisationUnitGroups) !== null && _organisationUnitGrou !== void 0 ? _organisationUnitGrou : [];
+      const ouGroup = (0, _lodash.find)(orgUnitGroups, ouGroup => {
+        var _ouGroup$organisation;
+        return !!(0, _lodash.find)((_ouGroup$organisation = ouGroup === null || ouGroup === void 0 ? void 0 : ouGroup.organisationUnits) !== null && _ouGroup$organisation !== void 0 ? _ouGroup$organisation : [], ["id", orgUnit.id]);
+      });
+      if (!geoJSONObject || geoJSONObject.properties.type !== "Point") {
+        return;
+      }
+      return {
+        ...orgUnit,
+        geoJSON: geoJSONObject,
+        level: geoJSONObject.properties.level,
+        icon: {
+          type: "groupIcon",
+          icon: ouGroup === null || ouGroup === void 0 ? void 0 : ouGroup.symbol
+        }
+      };
+    }));
+  }, []);
+  const sanitizeLayer = (0, _react.useCallback)(async layer => {
+    try {
+      var _layer$style, _organisationUnitGrou2, _groupSetData$groupSe2;
+      if (!layer.level && !layer.group) {
+        return;
+      }
+      setLoading(true);
+      const level = layer.level ? `LEVEL-${layer.level}` : undefined;
+      const group = layer.group ? `OU_GROUP-${layer.group}` : undefined;
+      const ous = [...(0, _map.getOrgUnitsSelection)(orgUnitSelection), level, group];
+      const pointData = await engine.query(query, {
+        variables: {
+          ous
+        }
+      });
+      const groupSetData = await engine.query(groupSetQuery, {
+        variables: {
+          groupSet: (_layer$style = layer.style) === null || _layer$style === void 0 ? void 0 : _layer$style.groupSet
+        }
+      });
+      const sanitizedOrgUnitData = sanitizePointData(pointData, groupSetData);
+      const orgUnitGroups = (_organisationUnitGrou2 = groupSetData === null || groupSetData === void 0 ? void 0 : (_groupSetData$groupSe2 = groupSetData.groupSet) === null || _groupSetData$groupSe2 === void 0 ? void 0 : _groupSetData$groupSe2.organisationUnitGroups) !== null && _organisationUnitGrou2 !== void 0 ? _organisationUnitGrou2 : [];
+      const sanitizedOrgUnitGroups = orgUnitGroups.map(ouGroup => ({
+        ...ouGroup,
+        organisationUnits: undefined
+      }));
+      setLoading(false);
+      return {
+        ...layer,
+        points: sanitizedOrgUnitData,
+        style: {
+          ...layer.style,
+          orgUnitGroups: sanitizedOrgUnitGroups
+        }
+      };
+    } catch (e) {
+      setLoading(false);
+      console.error(`Error getting point layer`, e.details);
+      return;
+    }
+  }, []);
+  return {
+    loading,
+    sanitizeLayer
+  };
+}
+function useGoogleEngineLayers() {
+  const {
+    refresh
+  } = (0, _hooks2.useGoogleEngineToken)();
+  const orgUnits = (0, _useBoundaryData.useBoundaryData)();
+  async function getImageUrl(earthEngine, _ref9) {
+    let {
+      filters
+    } = _ref9;
+    if (earthEngine.initialized) {
+      try {
+        earthEngine.setOrgUnits(orgUnits !== null && orgUnits !== void 0 ? orgUnits : []);
+        const period = filters === null || filters === void 0 ? void 0 : filters.period;
+        if (period) {
+          earthEngine.setPeriod(period);
+        }
+        return earthEngine.url();
+      } catch (e) {
+        console.error(e);
+      }
+    }
+  }
+  const sanitizeLayers = (0, _react.useCallback)(async layers => {
+    try {
+      const {
+        token
+      } = await refresh();
+      await _engine.EarthEngine.setToken(token, refresh);
+      return (0, _asyncEs.map)(layers, (0, _asyncEs.asyncify)(async layer => {
+        try {
+          var _find, _layer$aggregations, _layer$params;
+          const defaultOptions = (_find = (0, _lodash.find)(_constants.EARTH_ENGINE_LAYERS, ["id", layer.type])) !== null && _find !== void 0 ? _find : {};
+          const options = {
+            ...defaultOptions,
+            aggregations: (_layer$aggregations = layer.aggregations) !== null && _layer$aggregations !== void 0 ? _layer$aggregations : defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.aggregations,
+            params: (_layer$params = layer.params) !== null && _layer$params !== void 0 ? _layer$params : defaultOptions === null || defaultOptions === void 0 ? void 0 : defaultOptions.params
+          };
+          const updatedLayer = {
+            ...layer,
+            options
+          };
+          const earthEngine = new _engine.EarthEngine({
+            options
+          });
+          const url = await getImageUrl(earthEngine, updatedLayer);
+          return {
+            ...updatedLayer,
+            engine: earthEngine,
+            url
+          };
+        } catch (e) {
+          console.error(e);
+          return;
+        }
+      }));
+    } catch (e) {
+      console.error(`Error getting thematic layers`, e.details);
+      return [];
+    }
+  }, [refresh]);
+  return {
+    sanitizeLayers
+  };
+}