@hisptz/dhis2-analytics 1.0.51 → 1.0.53

package/src/components/Map/components/MapLayer/components/LegendArea/index.tsx

@@ -1,167 +0,0 @@
-import {colors, IconLegend24, Popper, Portal} from "@dhis2/ui";
-import {ControlPosition} from "leaflet";
-import {compact, head} from "lodash";
-import React, {useEffect, useRef, useState} from "react";
-import {MapLegendConfig} from "../../../MapArea/interfaces";
-import {CustomControl} from "../../../MapControls/components/CustomControl";
-import {
-  CustomBubbleLayer,
-  CustomGoogleEngineLayer,
-  CustomPointLayer,
-  CustomThematicLayer,
-  SUPPORTED_EARTH_ENGINE_LAYERS
-} from "../../interfaces";
-import PointLegend from "../PointLayer/components/PointLegend";
-import BubbleLegend from "../ThematicLayer/components/Bubble/components/BubbleLegend";
-import ChoroplethLegend from "../ThematicLayer/components/Choropleth/components/ChoroplethLegend";
-import EarthEngineLegend from "../GoogleEngineLayer/components/EarthEngineLegend";
-import classes from "./LegendArea.module.css";
-import {usePrintMedia} from "../../../../hooks/map";
-
-const TOOLTIP_OFFSET = 4;
-
-function getLegendComponent(layer: CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer) {
-  if (layer.type === "point") {
-    return <PointLegend name={layer.label} />;
-  }
-
-  if (SUPPORTED_EARTH_ENGINE_LAYERS.includes(layer.type)) {
-    return <EarthEngineLegend name={layer.name ?? ""} layer={layer as CustomGoogleEngineLayer} />;
-  }
-
-  const { type, enabled, control, dataItem, name, data, legends } = (layer as CustomThematicLayer) ?? {};
-
-  if (!enabled || !control) {
-    return null;
-  }
-  switch (type) {
-    case "bubble":
-      return (
-        <BubbleLegend
-          radius={(layer as CustomBubbleLayer)?.radius ?? { min: 0, max: 50 }}
-          legends={legends ?? []}
-          name={name ?? dataItem.displayName}
-          data={data}
-          dataItem={head(data)?.dataItem ?? dataItem}
-        />
-      );
-    case "choropleth":
-      return <ChoroplethLegend legends={legends ?? []} name={name ?? dataItem.displayName} data={data} dataItem={head(data)?.dataItem ?? dataItem} />;
-  }
-}
-
-function CollapsedLegendIcon({ onCollapse, name }: { name: string; onCollapse: () => void }) {
-  const openDelay = 200;
-  const closeDelay = 200;
-  const [openTooltip, setOpenTooltip] = useState(false);
-  const openTimerRef = useRef<any>(null);
-  const closeTimerRef = useRef<any>(null);
-  const ref = useRef<HTMLDivElement>(null);
-
-  const hideModifier = { name: "hide" };
-  const offsetModifier = {
-    name: "offset",
-    options: {
-      offset: [0, TOOLTIP_OFFSET],
-    },
-  };
-
-  const flipModifier = {
-    name: "flip",
-    options: { altBoundary: true },
-  };
-
-  const onMouseOver = () => {
-    clearTimeout(closeTimerRef.current);
-
-    openTimerRef.current = setTimeout(() => {
-      setOpenTooltip(true);
-    }, openDelay);
-  };
-
-  const onMouseOut = () => {
-    clearTimeout(openTimerRef.current);
-
-    closeTimerRef.current = setTimeout(() => {
-      setOpenTooltip(false);
-    }, closeDelay);
-  };
-
-  useEffect(
-    () => () => {
-      clearTimeout(openTimerRef.current);
-      clearTimeout(closeTimerRef.current);
-    },
-    []
-  );
-
-  return (
-    <div ref={ref} onMouseOver={onMouseOver} onMouseOut={onMouseOut} onClick={onCollapse} style={{ width: 28, height: 28 }} className="legend-card collapsed">
-      <IconLegend24 />
-      {openTooltip && (
-        <Portal className={classes["map-tooltip"]}>
-          <Popper className={classes["map-tooltip"]} reference={ref} modifiers={[offsetModifier, flipModifier, hideModifier]}>
-            <div
-              style={{
-                backgroundColor: `${colors.grey900}`,
-                borderRadius: 3,
-                color: `${colors.white}`,
-                padding: "4px 6px",
-              }}
-              data-test={`content`}>
-              {name}
-            </div>
-          </Popper>
-        </Portal>
-      )}
-    </div>
-  );
-}
-
-function Legend({ children, collapsible }: { children: React.ReactElement; collapsible: boolean }) {
-  const [collapsed, setCollapsed] = useState(collapsible);
-  const inPrintMode = usePrintMedia();
-  const onCollapse = () => {
-    if (collapsible) {
-      setCollapsed((prevState) => !prevState);
-    }
-  };
-
-  const name = head(React.Children.toArray(children) as React.ReactElement[])?.props.name;
-
-  const shouldCollapse = collapsed && !inPrintMode;
-
-  return (
-    <div className="w-100">
-      {shouldCollapse ? (
-        <CollapsedLegendIcon name={name} onCollapse={onCollapse} />
-      ) : (
-        React.Children.map(children, (child) => React.cloneElement(child, { collapsible, onCollapse }))
-      )}
-    </div>
-  );
-}
-
-export default function LegendArea({
-  layers,
-  legends: legendConfig,
-}: {
-  layers: Array<CustomThematicLayer | CustomPointLayer | CustomGoogleEngineLayer>;
-  position: ControlPosition;
-  legends?: MapLegendConfig;
-}) {
-  const legends: JSX.Element[] = compact(layers.filter((layer) => layer.enabled).map(getLegendComponent));
-  const { position, collapsible } = legendConfig ?? {};
-
-  return (
-    <CustomControl position={position}>
-      <div className="column gap-16 align-items-end">
-        {legends?.map((legend: any, index) => (
-          <Legend collapsible={collapsible ?? true} key={`${index}-map-legend`}>
-            {legend}
-          </Legend>
-        ))}
-      </div>
-    </CustomControl>
-  );
-}

package/src/components/Map/components/MapLayer/components/PointLayer/components/PointLegend/index.tsx

@@ -1,44 +0,0 @@
-import {useConfig} from "@dhis2/app-runtime";
-import {Divider} from "@dhis2/ui";
-import React, {forwardRef} from "react";
-import {getIconUrl} from "../../../../../../utils/helpers";
-import LegendCardHeader from "../../../LegendArea/components/LegendCardHeader";
-import {usePointLayer} from "../../hooks";
-
-function PointLegends({ orgUnitGroups, icon, label }: { orgUnitGroups: { name: string; symbol: string }[]; icon?: string; label?: string }) {
-  const { baseUrl } = useConfig();
-
-  return (
-    <div style={{ minWidth: 100, alignItems: "flex-start" }} className="w-100 p-8 legend-list column">
-      {icon && (
-        <div key={`${icon}-legend`} className="row gap-16  align-items-center">
-          <img height={20} width={20} alt={`${name}-icon`} src={getIconUrl(icon, { baseUrl })} />
-          <p>{label}</p>
-        </div>
-      )}
-      {orgUnitGroups.map(({ name, symbol }) => {
-        return (
-          <div key={`${name}-legend`} className="row gap-16  align-items-center">
-            <img height={20} width={20} alt={`${name}-icon`} src={getIconUrl(symbol ?? "", { baseUrl })} />
-            <p>{name}</p>
-          </div>
-        );
-      })}
-    </div>
-  );
-}
-
-function PointLegend({ collapsible, onCollapse }: any, ref: React.LegacyRef<HTMLDivElement>) {
-  const pointLayer = usePointLayer();
-  const { label, style } = pointLayer ?? {};
-
-  return (
-    <div ref={ref} className="legend-card">
-      <LegendCardHeader collapsible={collapsible} onCollapse={onCollapse} title={label ?? "Points"} />
-      <Divider margin={"0"} />
-      <PointLegends label={label} orgUnitGroups={style?.orgUnitGroups ?? []} icon={style?.icon} />
-    </div>
-  );
-}
-
-export default forwardRef(PointLegend);

package/src/components/Map/components/MapLayer/components/PointLayer/hooks/index.ts

@@ -1,8 +0,0 @@
-import {find} from "lodash";
-import {useMapLayers} from "../../../../MapProvider/hooks";
-import {CustomPointLayer} from "../../../interfaces";
-
-export function usePointLayer() {
-  const { layers } = useMapLayers();
-  return find(layers, ["type", "point"]) as CustomPointLayer;
-}

package/src/components/Map/components/MapLayer/components/PointLayer/index.tsx

@@ -1,36 +0,0 @@
-import {useConfig} from "@dhis2/app-runtime";
-import i18n from "@dhis2/d2-i18n";
-import L from "leaflet";
-import React from "react";
-import {GeoJSON, LayerGroup, LayersControl, Popup, Tooltip} from "react-leaflet";
-import {PointOrgUnit} from "../../../../interfaces";
-import {getIcon, getIconUrl} from "../../../../utils/helpers";
-import {usePointLayer} from "./hooks";
-
-export function PointLayer() {
-  const pointLayer = usePointLayer();
-  const { enabled, label, points: orgUnits, style } = pointLayer ?? {};
-  const { baseUrl } = useConfig();
-  return (
-    <LayersControl.Overlay checked={enabled} name={label ?? i18n.t("Points")}>
-      <LayerGroup>
-        {orgUnits?.map((area: PointOrgUnit) => {
-          return (
-            <GeoJSON
-              pointToLayer={(_, coordinates) => {
-                return L.marker(coordinates, { icon: getIcon(getIconUrl(area.icon.icon ?? style?.icon, { baseUrl })) });
-              }}
-              data={area.geoJSON}
-              interactive
-              key={`${area.id}-polygon`}>
-              <Tooltip>{area.name}</Tooltip>
-              <Popup minWidth={80}>
-                <h3>{area.name}</h3>
-              </Popup>
-            </GeoJSON>
-          );
-        })}
-      </LayerGroup>
-    </LayersControl.Overlay>
-  );
-}

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubble.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import {guideLength, textPadding} from "./Bubbles";
-
-export interface BubbleProps {
-  radius: number;
-  maxRadius: number;
-  text?: string;
-  textAlign?: "left" | "right";
-  color?: string;
-  stroke?: string;
-  pattern?: string;
-  gap?: number;
-}
-
-const Bubble = ({ radius, maxRadius, text, textAlign, color, stroke, pattern }: BubbleProps) => {
-  const leftAlign = textAlign === "left";
-  const x = maxRadius;
-  const y = maxRadius * 2 - radius;
-  const x2 = leftAlign ? x - maxRadius - guideLength : x + maxRadius + guideLength;
-  const y2 = maxRadius * 2 - radius * 2;
-  const textX = x2 + (leftAlign ? -textPadding : textPadding);
-  const textAnchor = leftAlign ? "end" : "start";
-
-  return (
-    <g>
-      <circle
-        cx={x}
-        cy={y}
-        r={radius}
-        stroke={stroke || "#000"}
-        style={{
-          fill: pattern ? `url(#${pattern})` : color || "none",
-          strokeWidth: 0.5,
-        }}
-      />
-      {text && (
-        <g>
-          <line x1={x} x2={x2} y1={y2} y2={y2} stroke="black" style={{ strokeDasharray: "2, 2", strokeWidth: 0.5 }} />
-          <text x={textX} y={y2} textAnchor={textAnchor} alignmentBaseline="middle" style={{ fontSize: 12 }}>
-            {text}
-          </text>
-        </g>
-      )}
-    </g>
-  );
-};
-
-export default Bubble;

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/components/Bubbles.tsx

@@ -1,150 +0,0 @@
-import i18n from "@dhis2/d2-i18n";
-import {scaleSqrt} from "d3-scale";
-import {reduce} from "lodash";
-import React, {memo} from "react";
-import {getContrastColor} from "../../../../../../../../../utils/colors";
-import {getLongestTextLength} from "../../../../../../../../../utils/helpers";
-import Bubble, {BubbleProps} from "./Bubble";
-
-const style = {
-  paddingTop: 10,
-  display: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-const legendWidth = 200;
-const digitWidth = 6.8;
-export const guideLength = 16;
-export const textPadding = 4;
-
-const Bubbles = ({ radiusLow, radiusHigh, color, classes }: { radiusLow: number; radiusHigh: number; color?: string; classes: Array<any> }) => {
-  const height = radiusHigh * 2 + 4;
-  const scale = scaleSqrt().range([radiusLow, radiusHigh]);
-  const radiusMid = scale(0.5);
-
-  if (isNaN(radiusLow) || isNaN(radiusHigh)) {
-    return null;
-  }
-
-  let bubbles: Array<BubbleProps> = [];
-
-  // If color legend
-  if (Array.isArray(classes) && classes.length) {
-    const startValue = classes[0].startValue;
-    const endValue = classes[classes.length - 1].endValue;
-    const itemScale = scale.domain([startValue, endValue]);
-
-    bubbles = [...classes].reverse().map((c) => ({
-      radius: itemScale(c.endValue),
-      maxRadius: radiusHigh,
-      color: c.color,
-      text: String(c.endValue),
-    }));
-
-    // Add the smallest bubble for the lowest value
-    bubbles.push({
-      radius: itemScale(startValue),
-      maxRadius: radiusHigh,
-      text: String(startValue),
-    });
-  } else {
-    // If single color
-    const stroke = color && getContrastColor(color);
-
-    bubbles = [
-      {
-        radius: radiusHigh,
-        maxRadius: radiusHigh,
-        color,
-        stroke,
-        text: i18n.t("Max"),
-      },
-      {
-        radius: radiusMid,
-        maxRadius: radiusHigh,
-        color,
-        stroke,
-        text: i18n.t("Mid"),
-      },
-      {
-        radius: radiusLow,
-        maxRadius: radiusHigh,
-        color,
-        stroke,
-        text: i18n.t("Min"),
-      },
-    ];
-  }
-
-  // Calculate the pixel length of the longest number
-  let textLength = Math.ceil(Math.max(getLongestTextLength(classes, "startValue"), getLongestTextLength(classes, "endValue")) * digitWidth);
-
-  // Calculate the total length if numbers are alternate on each side
-  const alternateLength = (radiusHigh + guideLength + textPadding + textLength) * 2;
-
-  let smallestGap = reduce(bubbles, (prev, curr: any, i) => {
-    const gap = prev.radius - curr.radius;
-    const smallestGap = prev.gap === undefined || gap < prev.gap ? gap : prev.gap;
-
-    return i === bubbles.length - 1
-      ? Math.round(smallestGap * 2)
-      : {
-          radius: curr.radius,
-          gap: smallestGap,
-        };
-  });
-
-  const alternateFit = alternateLength < legendWidth;
-
-  const alternate = alternateFit && smallestGap > 5 && smallestGap < 12;
-
-  if (!alternateFit) {
-    smallestGap = smallestGap / 2;
-  }
-
-  // Too cramped to show number for each bubble
-  if (smallestGap < 4) {
-    const [maxBubble] = bubbles;
-    const minBubble = bubbles[bubbles.length - 1];
-    const gap = maxBubble.radius - minBubble.radius;
-    const showNumbers = [0]; // Always show the largest number
-
-    if (gap > 4) {
-      showNumbers.push(bubbles.length - 1);
-    }
-
-    if (gap > 15) {
-      const midRadius = minBubble.radius + gap / 2;
-
-      // Find the closest bubble above the mid-radius
-      const midBubble = bubbles.reduce((prev, curr) => (curr.radius >= midRadius && curr.radius - midRadius < prev.radius - midRadius ? curr : prev));
-
-      showNumbers.push(bubbles.indexOf(midBubble));
-    }
-
-    bubbles.forEach((b, i) => {
-      if (!showNumbers.includes(i)) {
-        delete b.text;
-      }
-    });
-  }
-
-  textLength = Math.ceil(getLongestTextLength(bubbles, "text") * digitWidth);
-
-  const offset = textLength + guideLength + textPadding;
-
-  return (
-    <div style={style}>
-      <svg width={legendWidth} height={height + 50}>
-        <g transform={`translate(${alternate ? offset : "16"} 24)`}>
-          {bubbles.map((bubble, i) => (
-            <Bubble key={i} {...bubble} textAlign={alternate && i % 2 == 0 ? "left" : "right"} />
-          ))}
-        </g>
-      </svg>
-    </div>
-  );
-};
-
-export default memo(Bubbles);

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/components/BubbleLegend/index.tsx

@@ -1,39 +0,0 @@
-import {Divider} from "@dhis2/ui";
-import type {Legend} from "@hisptz/dhis2-utils";
-import React, {forwardRef} from "react";
-import {ThematicLayerData, ThematicLayerDataItem} from "../../../../../../interfaces";
-import LegendCardHeader from "../../../../../LegendArea/components/LegendCardHeader";
-import Bubbles from "./components/Bubbles";
-
-function BubbleLegend(
-  {
-    radius,
-    dataItem,
-    data,
-    name,
-    collapsible,
-    onCollapse,
-    legends,
-  }: {
-    radius: { min: number; max: number };
-    dataItem: ThematicLayerDataItem;
-    data: ThematicLayerData[];
-    name?: string;
-    collapsible?: boolean;
-    onCollapse?: () => void;
-    legends: Legend[];
-  },
-  ref: React.LegacyRef<HTMLDivElement> | undefined
-) {
-  return (
-    <div className="legend-card" ref={ref}>
-      <LegendCardHeader title={dataItem.displayName} onCollapse={onCollapse} collapsible={collapsible} />
-      <Divider margin={"0"} />
-      <div className="legend-list pt-8">
-        <Bubbles classes={legends.reverse()} radiusHigh={radius.max} radiusLow={radius.min} color={"#FF0000"} />
-      </div>
-    </div>
-  );
-}
-
-export default forwardRef(BubbleLegend);

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Bubble/index.tsx

@@ -1,57 +0,0 @@
-import {colors} from "@dhis2/ui";
-import type {Legend} from "@hisptz/dhis2-utils";
-import {geoJSON} from "leaflet";
-import React, {useMemo} from "react";
-import {CircleMarker} from "react-leaflet";
-import {getColorFromLegendSet, highlightFeature, resetHighlight} from "../../../../../../utils/map";
-import {ThematicLayerData} from "../../../../interfaces";
-import CustomTooltip from "../CustomTooltip";
-
-const defaultStyle = {
-  weight: 1,
-};
-const highlightStyle = {
-  weight: 2,
-};
-
-export default function Bubble({
-  data,
-  highestData,
-  legends,
-  radius,
-}: {
-  data: ThematicLayerData;
-  highestData: number;
-  legends: Legend[];
-  radius?: { min: number; max: number };
-}) {
-  const { orgUnit, data: value } = data ?? {};
-
-  const geoJSONObject = orgUnit.geoJSON;
-  const center = geoJSON(geoJSONObject).getBounds().getCenter();
-
-  const circleRadius = useMemo(() => {
-    return ((value ?? 0) * (radius?.max ?? 50)) / highestData;
-  }, [radius, data, highestData]);
-
-  return (
-    <>
-      <CircleMarker
-        interactive
-        eventHandlers={{
-          mouseover: (e) => highlightFeature(e, highlightStyle),
-          mouseout: (e) => resetHighlight(e, defaultStyle),
-        }}
-        pathOptions={{
-          fillColor: getColorFromLegendSet(legends, data.data),
-          fillOpacity: 1,
-          color: colors.grey900,
-          weight: 1,
-        }}
-        radius={circleRadius}
-        center={center}>
-        <CustomTooltip data={data} />
-      </CircleMarker>
-    </>
-  );
-}

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/components/ChoroplethLegend.tsx

@@ -1,43 +0,0 @@
-import "../../../styles/legends.css";
-import {Divider} from "@dhis2/ui";
-import type {Legend} from "@hisptz/dhis2-utils";
-import React, {forwardRef} from "react";
-import {getLegendCount} from "../../../../../../../utils/map";
-import {ThematicLayerData, ThematicLayerDataItem} from "../../../../../interfaces";
-import LegendCardHeader from "../../../../LegendArea/components/LegendCardHeader";
-
-export function LegendItem({ legend, value }: { legend: { startValue: number; endValue: number; color: string }; value: number }) {
-  return (
-    <div className="legend-item">
-      <div className="legend-item-color" style={{ backgroundColor: legend.color }} />
-      <div className="legend-item-label">{`${legend.startValue} - ${legend.endValue}`}</div>
-      <div className="legend-item-value">{`(${value})`}</div>
-    </div>
-  );
-}
-
-function ChoroplethLegend(
-  {
-    dataItem,
-    data,
-    name,
-    collapsible,
-    onCollapse,
-    legends,
-  }: { data: ThematicLayerData[]; dataItem: ThematicLayerDataItem; name?: string; collapsible?: boolean; onCollapse?: () => void; legends: Legend[] },
-  ref: React.LegacyRef<HTMLDivElement> | undefined
-) {
-  return (
-    <div className="legend-card" ref={ref}>
-      <LegendCardHeader title={dataItem.displayName} collapsible={collapsible} onCollapse={onCollapse} />
-      <Divider margin={"0"} />
-      <div className="legend-list pt-8">
-        {legends?.map((legend: any) => (
-          <LegendItem key={`${legend?.color}-legend-list`} legend={legend} value={getLegendCount(legend, data)} />
-        ))}
-      </div>
-    </div>
-  );
-}
-
-export default forwardRef(ChoroplethLegend);

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/Choropleth/index.tsx

@@ -1,38 +0,0 @@
-import {colors} from "@dhis2/ui";
-import type {Legend} from "@hisptz/dhis2-utils";
-import React from "react";
-import {GeoJSON} from "react-leaflet";
-import {MapOrgUnit} from "../../../../../../interfaces";
-import {getColorFromLegendSet, highlightFeature, resetHighlight} from "../../../../../../utils/map";
-import {ThematicLayerDataItem} from "../../../../interfaces";
-import CustomTooltip from "../CustomTooltip";
-
-const defaultStyle = {
-  weight: 1,
-};
-const highlightStyle = {
-  weight: 2,
-};
-
-export default function Choropleth({ data, legends }: { data: { orgUnit: MapOrgUnit; data?: number; dataItem: ThematicLayerDataItem }; legends: Legend[] }) {
-  const { orgUnit } = data;
-  return (
-    <>
-      <GeoJSON
-        data={orgUnit.geoJSON}
-        eventHandlers={{
-          mouseover: (e) => highlightFeature(e, highlightStyle),
-          mouseout: (e) => resetHighlight(e, defaultStyle),
-        }}
-        pathOptions={{
-          fillColor: getColorFromLegendSet(legends, data.data),
-          fillOpacity: 1,
-          color: colors.grey900,
-          weight: 1,
-        }}
-        key={`${data.dataItem.id}-layer`}>
-        <CustomTooltip data={data} />
-      </GeoJSON>
-    </>
-  );
-}

package/src/components/Map/components/MapLayer/components/ThematicLayer/components/CustomTooltip/index.tsx

@@ -1,26 +0,0 @@
-import i18n from "@dhis2/d2-i18n";
-import React from "react";
-import {Pane, Popup, Tooltip} from "react-leaflet";
-import {useMapPeriods} from "../../../../../MapProvider/hooks";
-import {ThematicLayerData} from "../../../../interfaces";
-
-export default function CustomTooltip({ data: dataObject }: { data: ThematicLayerData }) {
-  const { dataItem, orgUnit, data } = dataObject ?? {};
-  const { periods } = useMapPeriods() ?? {};
-
-  return (
-    <Pane name={`${dataItem.displayName}-${orgUnit.id}-popup-pane`} pane="popupPane">
-      <Tooltip>
-        {orgUnit?.name} ({data})
-      </Tooltip>
-      <Popup minWidth={80}>
-        <h3 style={{ margin: 0 }}>{orgUnit?.name}</h3>
-        <div>{dataItem?.displayName}</div>
-        <div>{periods?.map((period) => period.name).join(",")}</div>
-        <div>
-          {i18n.t("Value")}: {data}
-        </div>
-      </Popup>
-    </Pane>
-  );
-}

package/src/components/Map/components/MapLayer/components/ThematicLayer/hooks/config.ts

@@ -1,10 +0,0 @@
-import {find} from "lodash";
-import {useContext} from "react";
-import {MapLayersContext} from "../../../../../state";
-import {CustomThematicLayer} from "../../../interfaces";
-
-export default function useThematicLayer(layerId: string): CustomThematicLayer | undefined {
-  const { layers } = useContext(MapLayersContext);
-
-  return find(layers as CustomThematicLayer[], ["id", layerId]);
-}