@hisptz/dhis2-analytics 1.0.5 → 1.0.6

package/src/components/Map/components/MapLayer/interfaces/index.ts

@@ -1,139 +0,0 @@
-import type {Legend} from "@hisptz/dhis2-utils";
-import {MapOrgUnit, PointOrgUnit} from "../../../interfaces";
-import {LegendColorScale} from "../../../utils/colors";
-import {EarthEngineOptions} from "../components/GoogleEngineLayer/interfaces";
-import {EarthEngine} from "../components/GoogleEngineLayer/services/engine";
-
-export type BoundaryLayerType = "basemap" | "overlay";
-export type ThematicLayerType = "choropleth" | "bubble";
-
-export const SUPPORTED_EARTH_ENGINE_LAYERS = ["population", "footprints", "elevation", "landCover"];
-
-export type GoogleEngineLayerType = "population" | "footprints" | "elevation" | "landCover";
-
-export interface CustomBoundaryLayer extends CustomMapLayer {
-  id: string;
-  type: BoundaryLayerType;
-  enabled: boolean;
-}
-
-export interface EarthEngineLayerConfig extends CustomMapLayer {
-  type: GoogleEngineLayerType;
-  aggregations?: string[];
-  name?: string;
-  filters?: {
-    period: string;
-  };
-  params?: {
-    min: number;
-    max: number;
-    palette?: string;
-  };
-}
-
-export interface CustomGoogleEngineLayer extends CustomMapLayer {
-  type: GoogleEngineLayerType;
-  options: EarthEngineOptions;
-  aggregations?: string[];
-  name: string;
-  url: string;
-  engine?: EarthEngine;
-}
-
-export interface CustomPointLayer extends CustomMapLayer {
-  id: string;
-  type: "point";
-  label?: string;
-  level?: string | number;
-  group?: string;
-  style?: {
-    icon?: string;
-    groupSet?: string;
-    orgUnitGroups?: Array<{ name: string; symbol: string }>;
-  };
-  points?: Array<PointOrgUnit>;
-}
-
-export type DataItemType = "dataElement" | "indicator" | "programIndicator";
-
-export interface ThematicLayerDataItem {
-  id: string;
-  displayName: string;
-  type: DataItemType;
-  legendSet?: string;
-  legendConfig?: {
-    colorClass: LegendColorScale;
-    scale: number;
-  };
-}
-
-export interface ThematicLayerControl {
-  position: "topleft" | "topright" | "bottomleft" | "bottomright";
-  enabled: boolean;
-}
-
-export interface ThematicLayerData {
-  orgUnit: MapOrgUnit;
-  data?: number;
-  dataItem: ThematicLayerDataItem;
-}
-
-export interface ThematicLayerRawData {
-  orgUnit: string;
-  data?: number;
-  dataItem: string;
-}
-
-export interface CustomChoroplethLayer extends CustomMapLayer {
-  enabled: boolean;
-  name?: string;
-  data: ThematicLayerData[];
-  dataItem: ThematicLayerDataItem;
-  type: "choropleth";
-  control?: ThematicLayerControl;
-  legends?: Legend[];
-}
-
-export interface CustomBubbleLayer extends CustomMapLayer {
-  enabled: boolean;
-  name?: string;
-  data: ThematicLayerData[];
-  dataItem: ThematicLayerDataItem;
-  type: "bubble";
-  control?: ThematicLayerControl;
-  legends?: Legend[];
-  radius?: {
-    min: number;
-    max: number;
-  };
-}
-
-export type CustomThematicLayer = CustomBubbleLayer | CustomChoroplethLayer;
-
-export interface ThematicLayerConfig {
-  id: string;
-  data?: ThematicLayerRawData[];
-  enabled: boolean;
-  name?: string;
-  dataItem: ThematicLayerDataItem;
-  type: ThematicLayerType;
-  control?: ThematicLayerControl;
-  radius?: {
-    min: number;
-    max: number;
-  };
-}
-
-export interface CustomMapLayer {
-  id: string;
-  type: string;
-  enabled: boolean;
-}
-
-export type MapLayer = CustomBoundaryLayer | ThematicLayerConfig | CustomPointLayer | CustomGoogleEngineLayer;
-
-export interface MapLayerProps {
-  enabled: boolean;
-  type: "boundary" | "thematic" | "external" | "point" | "earthEngine";
-  layer: MapLayer;
-}

package/src/components/Map/components/MapProvider/components/MapLayerProvider/hooks/index.tsx

@@ -1,359 +0,0 @@
-import {compact, differenceBy, find, head, isEmpty, last, sortBy} from "lodash";
-import {useMapOrganisationUnit, useMapPeriods} from "../../../hooks";
-import {useCallback, useMemo, useState} from "react";
-import {
-    generateLegends,
-    getOrgUnitsSelection,
-    sanitizeDate,
-    sanitizeOrgUnits,
-    toGeoJson
-} from "../../../../../utils/map";
-import {useDataEngine} from "@dhis2/app-runtime";
-import {
-    CustomGoogleEngineLayer,
-    CustomPointLayer,
-    CustomThematicLayer,
-    EarthEngineLayerConfig,
-    ThematicLayerConfig
-} from "../../../../MapLayer/interfaces";
-import {MapOrgUnit, PointOrgUnit} from "../../../../../interfaces";
-import {asyncify, map} from "async-es";
-import {LegendSet} from "@hisptz/dhis2-utils";
-import {defaultClasses, defaultColorScaleName} from "../../../../../utils/colors";
-import {useGoogleEngineToken} from "../../../../MapLayer/components/GoogleEngineLayer/hooks";
-import {useBoundaryData} from "../../../../MapLayer/components/BoundaryLayer/hooks/useBoundaryData";
-import {EarthEngine} from "../../../../MapLayer/components/GoogleEngineLayer/services/engine";
-import {EARTH_ENGINE_LAYERS} from "../../../../MapLayer/components/GoogleEngineLayer/constants";
-import {EarthEngineOptions} from "../../../../MapLayer/components/GoogleEngineLayer/interfaces";
-
-const analyticsQuery = {
-  analytics: {
-    resource: "analytics",
-    params: ({ ou, pe, dx, startDate, endDate }: any) => {
-      const peDimension = !isEmpty(pe) ? `pe:${pe?.join(";")}` : undefined;
-      const ouDimension = !isEmpty(ou) ? `ou:${ou?.join(";")}` : undefined;
-      const dxDimension = !isEmpty(dx) ? `dx:${dx?.join(";")}` : undefined;
-
-      return {
-        dimension: compact([dxDimension, peDimension, ouDimension]),
-        startDate,
-        endDate,
-        displayProperty: "NAME",
-      };
-    },
-  },
-};
-const query = {
-  layer: {
-    resource: "geoFeatures",
-    params: ({ ous }: any) => ({
-      ou: `ou:${ous.join(";")}`,
-    }),
-  },
-  analytics: {
-    resource: "analytics",
-    params: ({ ous }: any) => ({
-      dimension: [`ou:${ous.join(";")}`, `pe:${new Date().getFullYear()}`],
-      skipData: true,
-      hierarchyMeta: true,
-    }),
-  },
-};
-const groupSetQuery = {
-  groupSet: {
-    resource: "organisationUnitGroupSets",
-    id: ({ groupSet }: any) => groupSet,
-    params: {
-      fields: ["organisationUnitGroups[name,color,symbol,organisationUnits[id]]"],
-    },
-  },
-};
-const legendSetsQuery = {
-  legendSets: {
-    resource: "legendSets",
-    id: ({ id }: any) => id,
-    params: {
-      fields: ["id", "displayName", "legends[id,code,startValue,endValue,color]"],
-    },
-  },
-};
-
-export function useThematicLayers(): any {
-  const engine = useDataEngine();
-  const [loading, setLoading] = useState(false);
-  const { orgUnits, orgUnitSelection } = useMapOrganisationUnit();
-  const { periods, range } = useMapPeriods() ?? {};
-  const ou = useMemo(() => getOrgUnitsSelection(orgUnitSelection), [orgUnitSelection]);
-  const pe = useMemo(() => periods?.map((pe: any) => pe.id), [periods]);
-
-  const { startDate, endDate } = useMemo(() => {
-    if (!range) {
-      return {
-        startDate: undefined,
-        endDate: undefined,
-      };
-    }
-    return {
-      startDate: sanitizeDate(range.start.toDateString()),
-      endDate: sanitizeDate(range.end.toDateString()),
-    };
-  }, [range]);
-  const sanitizeData = (data: any, layer: ThematicLayerConfig) => {
-    if (data) {
-      const { analytics } = data as any;
-      const rows = analytics?.rows;
-      const ouIndex = analytics.headers.findIndex((header: any) => header.name === "ou");
-      const dxIndex = analytics.headers.findIndex((header: any) => header.name === "dx");
-      const valueIndex = analytics.headers.findIndex((header: any) => header.name === "value");
-
-      if (!isEmpty(rows)) {
-        return sortBy(
-          orgUnits?.map((ou: MapOrgUnit) => {
-            const row = rows.find((row: any) => 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: CustomThematicLayer[]): Promise<CustomThematicLayer[]> => {
-    return (await map(
-      layers,
-      asyncify(async (layer: CustomThematicLayer) => {
-        try {
-          const legends = [];
-          if (layer.dataItem.legendSet) {
-            const legendSetData = await engine.query(legendSetsQuery, {
-              variables: {
-                id: layer.dataItem.legendSet,
-              },
-            });
-            const legendSet: LegendSet = legendSetData?.legendSets as LegendSet;
-            if (legendSet) {
-              legends.push(...legendSet.legends);
-            }
-          } else {
-            const { scale, colorClass } = layer.dataItem.legendConfig ?? {
-              scale: defaultClasses,
-              colorClass: defaultColorScaleName,
-            };
-            const sortedData = sortBy(layer.data, "data");
-            const autoLegends = generateLegends(last(sortedData)?.data ?? 0, head(sortedData)?.data ?? 0, {
-              classesCount: scale,
-              colorClass,
-            });
-            legends.push(...autoLegends);
-          }
-          return {
-            ...layer,
-            legends,
-          };
-        } catch (e) {
-          return layer;
-        }
-      })
-    )) as CustomThematicLayer[];
-  };
-
-  const sanitizeLayers = async (layers: ThematicLayerConfig[]): Promise<CustomThematicLayer[]> => {
-    try {
-      setLoading(true);
-      const layersWithoutData = layers?.filter((layer) => !layer.data);
-      const layersWithData = differenceBy(layers, layersWithoutData, "id");
-      const dx = layersWithoutData.map((layer) => layer.dataItem.id);
-      let sanitizedLayersWithData: any = [];
-
-      if (!isEmpty(dx)) {
-        const data = await engine.query(analyticsQuery, {
-          variables: {
-            dx,
-            ou,
-            pe,
-            startDate,
-            endDate,
-          },
-        });
-        sanitizedLayersWithData = layersWithoutData.map((layer) => ({
-          ...layer,
-          name: layer?.name ?? layer?.dataItem?.displayName ?? layer.id,
-          data: sanitizeData(data, layer),
-        }));
-      }
-      const sanitizedLayersWithOrgUnits = layersWithData.map((layer) => ({
-        ...layer,
-        data: layer.data?.map((datum) => ({
-          ...datum,
-          orgUnit: find(orgUnits, ["id", datum.orgUnit]) as MapOrgUnit,
-          dataItem: layer.dataItem,
-          name: layer?.name ?? layer?.dataItem?.displayName ?? layer.id,
-        })),
-      }));
-      setLoading(false);
-      return await sanitizeLegends([...sanitizedLayersWithData, ...sanitizedLayersWithOrgUnits]);
-    } catch (e: any) {
-      console.error(`Error getting thematic layers`, e.details);
-      setLoading(false);
-      return [];
-    }
-  };
-
-  return {
-    sanitizeLayers,
-    loading,
-  };
-}
-
-export function usePointLayer() {
-  const engine = useDataEngine();
-  const { orgUnitSelection } = useMapOrganisationUnit();
-  const [loading, setLoading] = useState(false);
-
-  const sanitizePointData = useCallback((orgUnitData: any, groupSetData: any): PointOrgUnit[] => {
-    const { analytics, layer } = (orgUnitData as any) ?? {};
-    const rawOrgUnits = sanitizeOrgUnits(analytics?.metaData);
-    const geoJSONObjects = toGeoJson(layer?.filter((bound: any) => bound.co));
-    return compact(
-      rawOrgUnits.map((orgUnit: any) => {
-        const geoJSONObject: any = geoJSONObjects?.find((geoJSON: any) => geoJSON.properties.id === orgUnit.id);
-        const orgUnitGroups: any = (groupSetData?.groupSet as any)?.organisationUnitGroups ?? [];
-        const ouGroup = find(orgUnitGroups, (ouGroup) => !!find(ouGroup?.organisationUnits ?? [], ["id", orgUnit.id]));
-
-        if (!geoJSONObject || geoJSONObject.properties.type !== "Point") {
-          return;
-        }
-        return {
-          ...orgUnit,
-          geoJSON: geoJSONObject,
-          level: geoJSONObject.properties.level,
-          icon: {
-            type: "groupIcon",
-            icon: ouGroup?.symbol,
-          },
-        };
-      })
-    );
-  }, []);
-
-  const sanitizeLayer = useCallback(async (layer: CustomPointLayer): Promise<CustomPointLayer | undefined> => {
-    try {
-      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 = [...getOrgUnitsSelection(orgUnitSelection), level, group];
-
-      const pointData = await engine.query(query, {
-        variables: {
-          ous,
-        },
-      });
-      const groupSetData = await engine.query(groupSetQuery, {
-        variables: {
-          groupSet: layer.style?.groupSet,
-        },
-      });
-      const sanitizedOrgUnitData = sanitizePointData(pointData, groupSetData);
-
-      const orgUnitGroups = (groupSetData?.groupSet as any)?.organisationUnitGroups ?? [];
-
-      const sanitizedOrgUnitGroups = orgUnitGroups.map((ouGroup: any) => ({
-        ...ouGroup,
-        organisationUnits: undefined,
-      }));
-      setLoading(false);
-      return {
-        ...layer,
-        points: sanitizedOrgUnitData,
-        style: {
-          ...layer.style,
-          orgUnitGroups: sanitizedOrgUnitGroups,
-        },
-      };
-    } catch (e: any) {
-      setLoading(false);
-      console.error(`Error getting point layer`, e.details);
-      return;
-    }
-  }, []);
-
-  return {
-    loading,
-    sanitizeLayer,
-  };
-}
-
-export function useGoogleEngineLayers() {
-  const { refresh } = useGoogleEngineToken();
-  const orgUnits = useBoundaryData();
-
-  async function getImageUrl(earthEngine: EarthEngine, { filters }: EarthEngineLayerConfig): Promise<string | undefined> {
-    if (earthEngine.initialized) {
-      try {
-        earthEngine.setOrgUnits(orgUnits ?? []);
-        const period = filters?.period;
-        if (period) {
-          earthEngine.setPeriod(period);
-        }
-        return earthEngine.url();
-      } catch (e) {
-        console.error(e);
-      }
-    }
-  }
-
-  const sanitizeLayers = useCallback(
-    async (layers: EarthEngineLayerConfig[]): Promise<CustomGoogleEngineLayer[]> => {
-      try {
-        const { token } = await refresh();
-        await EarthEngine.setToken(token, refresh);
-        return map(
-          layers,
-          asyncify(async (layer: EarthEngineLayerConfig) => {
-            try {
-              const defaultOptions: any = find(EARTH_ENGINE_LAYERS, ["id", layer.type]) ?? {};
-              const options: EarthEngineOptions = {
-                ...defaultOptions,
-                aggregations: layer.aggregations ?? defaultOptions?.aggregations,
-                params: layer.params ?? defaultOptions?.params,
-              };
-              const updatedLayer = {
-                ...layer,
-                options,
-              };
-              const earthEngine = new EarthEngine({ options });
-              const url = await getImageUrl(earthEngine, updatedLayer);
-              return {
-                ...updatedLayer,
-                engine: earthEngine,
-                url,
-              };
-            } catch (e) {
-              console.error(e);
-              return;
-            }
-          })
-        );
-      } catch (e: any) {
-        console.error(`Error getting thematic layers`, e.details);
-        return [];
-      }
-    },
-    [refresh]
-  );
-
-  return {
-    sanitizeLayers,
-  };
-}

package/src/components/Map/components/MapProvider/components/MapLayerProvider/index.tsx

@@ -1,105 +0,0 @@
-import i18n from "@dhis2/d2-i18n";
-import {CenteredContent, CircularLoader} from "@dhis2/ui";
-import {LayersControlEvent} from "leaflet";
-import {compact, find, head, set} from "lodash";
-import React, {useCallback, useEffect, useState} from "react";
-import {useMapEvents} from "react-leaflet";
-import {MapLayersContext} from "../../../../state";
-import {MapLayerConfig} from "../../../MapArea/interfaces";
-import {
-    CustomBoundaryLayer,
-    CustomGoogleEngineLayer,
-    CustomMapLayer,
-    CustomPointLayer,
-    CustomThematicLayer,
-    ThematicLayerConfig,
-} from "../../../MapLayer/interfaces";
-import {useMapOrganisationUnit, useMapPeriods} from "../../hooks";
-import {useGoogleEngineLayers, usePointLayer, useThematicLayers} from "./hooks";
-
-export function MapLayersProvider({ layers, children }: { layers: MapLayerConfig; children: React.ReactNode }) {
-  const period = useMapPeriods();
-  const orgUnit = useMapOrganisationUnit();
-  const [updatedLayers, setUpdatedLayers] = useState<Array<CustomThematicLayer | CustomBoundaryLayer | CustomPointLayer | CustomGoogleEngineLayer>>([]);
-  const { sanitizeLayers: sanitizeThematicLayers, error } = useThematicLayers();
-  const { sanitizeLayer: sanitizePointLayer } = usePointLayer();
-  const { sanitizeLayers: sanitizeEarthEngineLayers } = useGoogleEngineLayers();
-  const [loading, setLoading] = useState(false);
-
-  useMapEvents({
-    overlayremove: (event) => {
-      setupLayerListeners("remove", event);
-    },
-    overlayadd: (event) => {
-      setupLayerListeners("add", event);
-    },
-  });
-
-  const sanitizeLayers = async () => {
-    setLoading(true);
-    try {
-      const { boundaryLayers, thematicLayers, pointLayers, earthEngineLayers } = layers;
-      const sanitizedThematicLayers = await sanitizeThematicLayers([...(thematicLayers ?? [])] as ThematicLayerConfig[]);
-      const sanitizedBoundaryLayers = (boundaryLayers ?? []) as CustomBoundaryLayer[];
-      const sanitizedPointLayer = head(pointLayers ?? []) ? await sanitizePointLayer(head(pointLayers) as CustomPointLayer) : undefined;
-      const sanitizedEarthEngineLayers = await sanitizeEarthEngineLayers([...(earthEngineLayers ?? [])] as unknown as CustomGoogleEngineLayer[]);
-      setUpdatedLayers(
-        compact([...(sanitizedBoundaryLayers ?? []), ...(sanitizedThematicLayers ?? []), sanitizedPointLayer, ...(sanitizedEarthEngineLayers ?? [])])
-      );
-    } catch (e: any) {
-      console.error(`Error sanitizing layers`, e.toString());
-    }
-    setLoading(false);
-  };
-
-  const updateLayer = useCallback((id: string, updatedLayer: CustomMapLayer) => {
-    setUpdatedLayers((prevLayers) => {
-      const updatedLayers = [...prevLayers];
-      const layerIndex = updatedLayers.findIndex((layer) => layer.id === updatedLayer.id);
-      if (layerIndex < 0) {
-        return prevLayers;
-      }
-      set(updatedLayers, layerIndex, updatedLayer);
-      return updatedLayers;
-    });
-  }, []);
-
-  useEffect(() => {
-    sanitizeLayers().catch(console.error);
-  }, [period, orgUnit]);
-
-  const setupLayerListeners = (type: "add" | "remove", event: LayersControlEvent) => {
-    const name = event.name;
-
-    const layerConfig = find(updatedLayers, (layer: any) => {
-      const nameFromConfig = layer?.name ?? layer?.dataItem?.displayname ?? layer?.label;
-      return nameFromConfig === name;
-    });
-
-    if (layerConfig) {
-      updateLayer(layerConfig.id, { ...layerConfig, enabled: type === "add" });
-    }
-  };
-
-  if (loading) {
-    return (
-      <div style={{ height: "100%", width: "100%" }}>
-        <CenteredContent>
-          <CircularLoader small />
-        </CenteredContent>
-      </div>
-    );
-  }
-  if (error) {
-    return (
-      <div style={{ height: "100%", width: "100%" }}>
-        <CenteredContent>
-          <h4>
-            {i18n.t("Error")}: {error.message}
-          </h4>
-        </CenteredContent>
-      </div>
-    );
-  }
-  return <MapLayersContext.Provider value={{ layers: updatedLayers, updateLayer }}>{children}</MapLayersContext.Provider>;
-}

package/src/components/Map/components/MapProvider/index.tsx

@@ -1,93 +0,0 @@
-import {useDataQuery} from "@dhis2/app-runtime";
-import i18n from "@dhis2/d2-i18n";
-import {CenteredContent, CircularLoader} from "@dhis2/ui";
-import {compact, isEmpty} from "lodash";
-import React, {useEffect, useState} from "react";
-import {MapOrgUnit, MapProviderProps} from "../../interfaces";
-import {MapOrgUnitContext, MapPeriodContext} from "../../state";
-import {getOrgUnitsSelection, sanitizeOrgUnits, toGeoJson} from "../../utils/map";
-import {BasePeriod, PeriodUtility} from "@hisptz/dhis2-utils";
-
-const boundaryQuery = {
-  boundaries: {
-    resource: "geoFeatures",
-    params: ({ orgUnitIds }: any) => ({
-      ou: `ou:${orgUnitIds?.join(";")}`,
-    }),
-  },
-  analytics: {
-    resource: "analytics",
-    params: ({ orgUnitIds }: any) => ({
-      dimension: [`ou:${orgUnitIds.join(";")}`, `pe:${new Date().getFullYear()}`],
-      skipData: true,
-      hierarchyMeta: true,
-    }),
-  },
-};
-
-export function MapProvider({ children, orgUnitSelection, periodSelection }: MapProviderProps) {
-  const [orgUnits, setOrgUnits] = useState<MapOrgUnit[]>([]);
-  const { refetch, loading, error } = useDataQuery(boundaryQuery, { lazy: true });
-
-  useEffect(() => {
-    async function getOrgUnits() {
-      const rawOrgUnitIds = getOrgUnitsSelection(orgUnitSelection);
-      const data = await refetch({ orgUnitIds: rawOrgUnitIds });
-      const { analytics, boundaries } = (data as any) ?? {};
-      const rawOrgUnits = sanitizeOrgUnits(analytics?.metaData);
-      const geoJSONObjects = toGeoJson(boundaries.filter((bound: any) => bound.co));
-      const orgUnits: MapOrgUnit[] = compact(
-        rawOrgUnits.map((orgUnit: any) => {
-          const geoJSONObject: any = geoJSONObjects?.find((geoJSON: any) => geoJSON.properties.id === orgUnit.id);
-
-          if (!geoJSONObject) {
-            return;
-          }
-          return {
-            ...orgUnit,
-            geoJSON: geoJSONObject,
-            bounds: [],
-            level: geoJSONObject.properties.level,
-          };
-        })
-      );
-      setOrgUnits(orgUnits);
-    }
-
-    getOrgUnits().catch((error) => console.log(error));
-  }, [orgUnitSelection, refetch]);
-
-  if (loading) {
-    return (
-      <div style={{ height: "100%", width: "100%" }}>
-        <CenteredContent>
-          <CircularLoader small />
-        </CenteredContent>
-      </div>
-    );
-  }
-
-  if (error) {
-    return (
-      <div style={{ height: "100%", width: "100%" }}>
-        <CenteredContent>
-          <h4>
-            {i18n.t("Error")}: {error.message}
-          </h4>
-        </CenteredContent>
-      </div>
-    );
-  }
-
-  const periods: BasePeriod[] = compact(periodSelection?.periods?.map((pe) => PeriodUtility.getPeriodById(pe)));
-
-  if (!isEmpty(orgUnits)) {
-    return (
-      <MapOrgUnitContext.Provider value={{ orgUnitSelection, orgUnits }}>
-        <MapPeriodContext.Provider value={{ ...periodSelection, periods }}>{children}</MapPeriodContext.Provider>
-      </MapOrgUnitContext.Provider>
-    );
-  }
-
-  return null;
-}

package/src/components/Map/components/MapUpdater/index.tsx

@@ -1,8 +0,0 @@
-import {useCenterMap} from "../../hooks/map";
-import React from "react";
-import {LatLngTuple} from "leaflet";
-
-export default function MapUpdater({ bounds }: { bounds: LatLngTuple[] }) {
-  const ref = useCenterMap({ bounds });
-  return <div style={{ width: "100%", height: "100%" }} ref={ref}></div>;
-}