@dynatrace/strato-geo 3.7.1 → 3.9.0

package/esm/map/hooks/use-overlay-events.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/hooks/use-overlay-events.ts"],
-  "sourcesContent": ["import type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useContext } from 'react';\n\nimport {\n  _useOverlayTooltipReducer as useTooltipReducer,\n  _useOverlayTooltipStore as useOverlayTooltipStore,\n  _useOverlayChart as useOverlayChart,\n  type _OverlayTooltipGeometryTypes as GeometryTypes,\n} from '@dynatrace/strato-components/charts';\n\nimport { GeoDataLookupContext } from '../contexts/geo-data-lookup.context.js';\nimport { useSetStateOverlay, useSetState } from '../store/store.js';\nimport { buildGeoTooltipState } from '../utils/build-geo-tooltip-state.js';\nimport { extractDataFromEvent } from '../utils/parse-tooltip-data.js';\n\nconst layerIdToGeometry = (layerId: string | undefined): GeometryTypes => {\n  if (layerId?.includes('bubble')) {\n    return 'geoBubble';\n  }\n  if (layerId?.includes('choropleth')) {\n    return 'geoChoropleth';\n  }\n  if (layerId?.includes('connection')) {\n    return 'geoConnection';\n  }\n  return 'geoDot';\n};\n\nexport const useOverlayEvents = () => {\n  const dataLookupRegistry = useContext(GeoDataLookupContext);\n  const setOverlayState = useSetStateOverlay();\n  const setState = useSetState();\n  const dispatch = useTooltipReducer();\n  const store = useOverlayTooltipStore();\n  const overlay = useOverlayChart();\n\n  const getAbsolutePosition = (event: MapLayerMouseEvent) => {\n    return {\n      x: Math.round(event.originalEvent.clientX),\n      y: Math.round(event.originalEvent.clientY),\n    };\n  };\n\n  const setTooltipMarker = (\n    hoveredLayerId: string | undefined,\n    location: { lng: number; lat: number } | undefined,\n  ) => {\n    setState((prev) => ({\n      ...prev,\n      tooltip: {\n        ...prev.tooltip,\n        hoveredLayerId,\n        location: location as typeof prev.tooltip.location,\n      },\n    }));\n  };\n\n  const hideTooltip = () => {\n    dispatch({ type: 'RESET_TOOLTIP' })();\n    setTooltipMarker(undefined, undefined);\n  };\n\n  const handleMouseEnter = () => {\n    setOverlayState({ mouseInBounds: true });\n  };\n\n  const handleMouseMove = (event: MapLayerMouseEvent) => {\n    if (event.features?.length) {\n      const currentState = store.getState();\n\n      if (currentState.pinned) {\n        return;\n      }\n\n      const { data, hoveredLayerId } = extractDataFromEvent(\n        event,\n        dataLookupRegistry,\n      );\n\n      overlay.clear();\n\n      setTooltipMarker(hoveredLayerId, event.lngLat);\n\n      const pos = getAbsolutePosition(event);\n      store.setState(\n        buildGeoTooltipState({\n          absoluteX: pos.x,\n          absoluteY: pos.y,\n          relativeX: Math.round(event.point.x),\n          relativeY: Math.round(event.point.y),\n          pinned: false,\n          geometry: layerIdToGeometry(hoveredLayerId),\n          metadata: data,\n        }),\n      );\n    } else {\n      const currentState = store.getState();\n      if (!currentState.pinned) {\n        hideTooltip();\n      }\n    }\n  };\n\n  const handleMouseLeave = () => {\n    setOverlayState({ mouseInBounds: false });\n    const currentState = store.getState();\n    if (!currentState.pinned) {\n      hideTooltip();\n    }\n  };\n\n  const handleMouseClick = (event: MapLayerMouseEvent) => {\n    const { data, featureId, hoveredLayerId } = extractDataFromEvent(\n      event,\n      dataLookupRegistry,\n    );\n\n    if (!featureId) {\n      hideTooltip();\n      return;\n    }\n\n    if (!hoveredLayerId) {\n      hideTooltip();\n      return;\n    }\n\n    overlay.clear();\n\n    setTooltipMarker(hoveredLayerId, event.lngLat);\n\n    const pos = getAbsolutePosition(event);\n    store.setState(\n      buildGeoTooltipState({\n        absoluteX: pos.x,\n        absoluteY: pos.y,\n        relativeX: Math.round(event.point.x),\n        relativeY: Math.round(event.point.y),\n        pinned: true,\n        geometry: layerIdToGeometry(hoveredLayerId),\n        metadata: data,\n      }),\n    );\n  };\n\n  const hideTooltipIfNotPinned = () => {\n    const currentState = store.getState();\n    if (!currentState.pinned) {\n      hideTooltip();\n    }\n  };\n\n  return {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleMouseClick,\n    handleZoom: hideTooltipIfNotPinned,\n    handleDrag: hideTooltipIfNotPinned,\n  };\n};\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { MapLayerMouseEvent } from 'maplibre-gl';\nimport { useContext, useRef } from 'react';\n\nimport {\n  _useOverlayTooltipReducer as useTooltipReducer,\n  _useOverlayTooltipStore as useOverlayTooltipStore,\n  _useOverlayChart as useOverlayChart,\n  type _OverlayTooltipGeometryTypes as GeometryTypes,\n} from '@dynatrace/strato-components/charts';\n\nimport { GeoDataLookupContext } from '../contexts/geo-data-lookup.context.js';\nimport { useSetStateOverlay, useSetState } from '../store/store.js';\nimport { buildGeoTooltipState } from '../utils/build-geo-tooltip-state.js';\nimport { extractDataFromEvent } from '../utils/parse-tooltip-data.js';\n\nconst layerIdToGeometry = (layerId: string | undefined): GeometryTypes => {\n  if (layerId?.includes('bubble')) {\n    return 'geoBubble';\n  }\n  if (layerId?.includes('choropleth')) {\n    return 'geoChoropleth';\n  }\n  if (layerId?.includes('connection')) {\n    return 'geoConnection';\n  }\n  return 'geoDot';\n};\n\nexport const useOverlayEvents = () => {\n  const dataLookupRegistry = useContext(GeoDataLookupContext);\n  const setOverlayState = useSetStateOverlay();\n  const setState = useSetState();\n  const dispatch = useTooltipReducer();\n  const store = useOverlayTooltipStore();\n  const overlay = useOverlayChart();\n  const pinnedFeatureIdRef = useRef<string | undefined>(undefined);\n\n  const getAbsolutePosition = (event: MapLayerMouseEvent) => {\n    return {\n      x: Math.round(event.originalEvent.clientX),\n      y: Math.round(event.originalEvent.clientY),\n    };\n  };\n\n  const setTooltipMarker = (\n    hoveredLayerId: string | undefined,\n    location: { lng: number; lat: number } | undefined,\n  ) => {\n    setState((prev) => ({\n      ...prev,\n      tooltip: {\n        ...prev.tooltip,\n        hoveredLayerId,\n        location: location as typeof prev.tooltip.location,\n      },\n    }));\n  };\n\n  const hideTooltip = () => {\n    dispatch({ type: 'RESET_TOOLTIP' })();\n    setTooltipMarker(undefined, undefined);\n    pinnedFeatureIdRef.current = undefined;\n  };\n\n  const showHoverTooltip = (\n    event: MapLayerMouseEvent,\n    data: unknown[],\n    hoveredLayerId: string | undefined,\n  ) => {\n    overlay.clear();\n\n    setTooltipMarker(hoveredLayerId, event.lngLat);\n\n    const pos = getAbsolutePosition(event);\n    store.setState(\n      buildGeoTooltipState({\n        absoluteX: pos.x,\n        absoluteY: pos.y,\n        relativeX: Math.round(event.point.x),\n        relativeY: Math.round(event.point.y),\n        pinned: false,\n        geometry: layerIdToGeometry(hoveredLayerId),\n        metadata: data,\n      }),\n    );\n  };\n\n  const handleMouseEnter = () => {\n    setOverlayState({ mouseInBounds: true });\n  };\n\n  const handleMouseMove = (event: MapLayerMouseEvent) => {\n    if (event.features?.length) {\n      const currentState = store.getState();\n\n      if (currentState.pinned) {\n        return;\n      }\n\n      const { data, hoveredLayerId } = extractDataFromEvent(\n        event,\n        dataLookupRegistry,\n      );\n\n      showHoverTooltip(event, data ?? [], hoveredLayerId);\n    } else {\n      const currentState = store.getState();\n      if (!currentState.pinned) {\n        hideTooltip();\n      }\n    }\n  };\n\n  const handleMouseLeave = () => {\n    setOverlayState({ mouseInBounds: false });\n    const currentState = store.getState();\n    if (!currentState.pinned) {\n      hideTooltip();\n    }\n  };\n\n  const handleMouseClick = (event: MapLayerMouseEvent) => {\n    const { data, featureId, hoveredLayerId } = extractDataFromEvent(\n      event,\n      dataLookupRegistry,\n    );\n\n    if (!featureId) {\n      hideTooltip();\n      return;\n    }\n\n    if (!hoveredLayerId) {\n      hideTooltip();\n      return;\n    }\n\n    const currentState = store.getState();\n    if (currentState.pinned && pinnedFeatureIdRef.current === featureId) {\n      // Unpin and immediately fall back to the hover tooltip so the feature\n      // stays described while the pointer is still over it (mirrors the chart\n      // OverlayTooltip behaviour on non-touch devices).\n      pinnedFeatureIdRef.current = undefined;\n      showHoverTooltip(event, data ?? [], hoveredLayerId);\n      return;\n    }\n\n    overlay.clear();\n\n    setTooltipMarker(hoveredLayerId, event.lngLat);\n    pinnedFeatureIdRef.current = featureId;\n\n    const pos = getAbsolutePosition(event);\n    store.setState(\n      buildGeoTooltipState({\n        absoluteX: pos.x,\n        absoluteY: pos.y,\n        relativeX: Math.round(event.point.x),\n        relativeY: Math.round(event.point.y),\n        pinned: true,\n        geometry: layerIdToGeometry(hoveredLayerId),\n        metadata: data,\n      }),\n    );\n  };\n\n  const hideTooltipIfNotPinned = () => {\n    const currentState = store.getState();\n    if (!currentState.pinned) {\n      hideTooltip();\n    }\n  };\n\n  return {\n    handleMouseEnter,\n    handleMouseMove,\n    handleMouseLeave,\n    handleMouseClick,\n    handleZoom: hideTooltipIfNotPinned,\n    handleDrag: hideTooltipIfNotPinned,\n  };\n};\n"],
+  "mappings": "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",
   "names": []
 }

package/esm/map/utils/get-scaled-symbol-size.js

@@ -1,5 +1,5 @@
 import { DEFAULT_SYMBOL_SIZE } from "../constants.js";
-const getScaledSymbolSize = (symbolSize = DEFAULT_SYMBOL_SIZE) => symbolSize * devicePixelRatio;
+const getScaledSymbolSize = (symbolSize = DEFAULT_SYMBOL_SIZE) => Math.max(1, symbolSize * devicePixelRatio);
 export {
   getScaledSymbolSize
 };

package/esm/map/utils/get-scaled-symbol-size.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../src/map/utils/get-scaled-symbol-size.ts"],
-  "sourcesContent": ["import { DEFAULT_SYMBOL_SIZE } from '../constants.js';\n\n/** Scales the icon size by dpr to preserve the size on HiDPI screens */\nexport const getScaledSymbolSize = (symbolSize = DEFAULT_SYMBOL_SIZE) =>\n  symbolSize * devicePixelRatio;\n"],
-  "mappings": "AAAA,SAAS,2BAA2B;AAG7B,MAAM,sBAAsB,CAAC,aAAa,wBAC/C,aAAa;",
+  "sourcesContent": ["import { DEFAULT_SYMBOL_SIZE } from '../constants.js';\n\n/** Scales the icon size by dpr to preserve the size on HiDPI screens */\nexport const getScaledSymbolSize = (symbolSize = DEFAULT_SYMBOL_SIZE) =>\n  Math.max(1, symbolSize * devicePixelRatio);\n"],
+  "mappings": "AAAA,SAAS,2BAA2B;AAG7B,MAAM,sBAAsB,CAAC,aAAa,wBAC/C,KAAK,IAAI,GAAG,aAAa,gBAAgB;",
   "names": []
 }

package/lang/uncompiled/en.json

@@ -1,34 +1,34 @@
 {
   "11eDVd4MkXWk8Bok": {
-    "notes": "Text in a tooltip shown when hovering the \"Zoom in\" action in the geo map chart toolbar",
-    "translation": "Zoom in"
+    "translation": "Zoom in",
+    "notes": "Text in a tooltip shown when hovering the \"Zoom in\" action in the geo map chart toolbar"
   },
   "5DTYqeFoXLMaXUHR": {
-    "notes": "Text in a tooltip shown when hovering the \"Zoom out\" action in the geo map chart toolbar",
-    "translation": "Zoom out"
+    "translation": "Zoom out",
+    "notes": "Text in a tooltip shown when hovering the \"Zoom out\" action in the geo map chart toolbar"
   },
   "EhcEZc1+Xc9wYsXg": {
-    "notes": "Text in a tooltip shown when hovering the \"Zoom to fit\" action in the geo map chart toolbar",
-    "translation": "Zoom to fit"
+    "translation": "Zoom to fit",
+    "notes": "Text in a tooltip shown when hovering the \"Zoom to fit\" action in the geo map chart toolbar"
   },
   "TXZNTtB5qReH8XE3": {
-    "notes": "Message to display when all maps are hidden.",
-    "translation": "Maps have been disabled in your environment - to enable these, please reach out to your environment administrator."
+    "translation": "Maps have been disabled in your environment - to enable these, please reach out to your environment administrator.",
+    "notes": "Message to display when all maps are hidden."
   },
   "g2qESM+ibB5sUyjf": {
-    "notes": "Text in a tooltip shown when hovering a tooltip item and hovering the copy button next to its coordinates",
-    "translation": "Copy coordinates"
+    "translation": "Copy coordinates",
+    "notes": "Text in a tooltip shown when hovering a tooltip item and hovering the copy button next to its coordinates"
   },
   "hVE7x0G0Q7/ih93A": {
-    "notes": "Text in a tooltip shown when hovering the \"Reset\" action in the geo map chart toolbar",
-    "translation": "Reset"
+    "translation": "Reset",
+    "notes": "Text in a tooltip shown when hovering the \"Reset\" action in the geo map chart toolbar"
   },
   "hlwWx47trlDMOy+V": {
-    "notes": "Text in a tooltip shown when hovering the \"Download Data\" action in the geo map chart toolbar",
-    "translation": "Download Data as CSV"
+    "translation": "Download Data as CSV",
+    "notes": "Text in a tooltip shown when hovering the \"Download Data\" action in the geo map chart toolbar"
   },
   "tS7epcIvtrbIhuBy": {
-    "notes": "Message to display when an error occurred while getting map data.",
-    "translation": "An error occurred: Failed to load map data."
+    "translation": "An error occurred: Failed to load map data.",
+    "notes": "Message to display when an error occurred while getting map data."
   }
 }

package/map/components/BubbleLayer/BubbleLayerTooltip.js

@@ -55,12 +55,6 @@ const BubbleLayerTooltip = (props) => {
   if ((0, import_tooltip_type_guards.isDefaultTooltipHandler)(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_charts._OverlayTooltip,
-    {
-      legacyTemplate: template,
-      symbolAlignment
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip, { template, symbolAlignment });
 };
 BubbleLayerTooltip["displayName"] = "BubbleLayerTooltip";

package/map/components/ChoroplethLayer/ChoroplethLayerTooltip.js

@@ -47,12 +47,6 @@ const ChoroplethLayerTooltip = (props) => {
   if ((0, import_tooltip_type_guards.isDefaultTooltipHandler)(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_charts._OverlayTooltip,
-    {
-      legacyTemplate: template,
-      symbolAlignment
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip, { template, symbolAlignment });
 };
 ChoroplethLayerTooltip["displayName"] = "ChoroplethLayerTooltip";

package/map/components/ConnectionLayer/ConnectionLayerTooltip.js

@@ -51,12 +51,6 @@ const ConnectionLayerTooltip = (props) => {
   if ((0, import_tooltip_type_guards.isDefaultTooltipHandler)(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_charts._OverlayTooltip,
-    {
-      legacyTemplate: template,
-      symbolAlignment
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip, { template, symbolAlignment });
 };
 ConnectionLayerTooltip["displayName"] = "ConnectionLayerTooltip";

package/map/components/DotLayer/DotLayerTooltip.js

@@ -47,12 +47,6 @@ const DotLayerTooltip = (props) => {
   if ((0, import_tooltip_type_guards.isDefaultTooltipHandler)(tooltipTemplate)) {
     return template;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_charts._OverlayTooltip,
-    {
-      legacyTemplate: template,
-      symbolAlignment
-    }
-  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip, { template, symbolAlignment });
 };
 DotLayerTooltip["displayName"] = "DotLayerTooltip";

package/map/components/toolbar/MapToolbar.js

@@ -86,7 +86,7 @@ const MapToolbar = () => {
       initialA11yState: import_constants.initialA11yToolbarTabIndexContext,
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
-      menuDisplayMode: "never",
+      menuDisplayMode: "collapsed",
       children: [
         isZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MapZoomInOutButtons.MapZoomInOutButtons, {}),
         isZoomEnabled && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_MapResetButton.MapResetButton, {}),

package/map/hooks/use-active-interaction.js

@@ -24,13 +24,38 @@ module.exports = __toCommonJS(use_active_interaction_exports);
 var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
+var import_use_geo_tooltip_sync = require("./use-geo-tooltip-sync.js");
 var import_get_min_value_feature = require("../utils/get-min-value-feature.js");
 const useActiveInteraction = (interactiveLayerIds) => {
   const map = (0, import_react_maplibre.useMap)().current;
   const featureIdRef = (0, import_react.useRef)(void 0);
   const sourceIdRef = (0, import_react.useRef)(void 0);
+  const pinnedFromStore = (0, import_use_geo_tooltip_sync.useOverlayTooltipSelector)((state) => state.pinned);
+  const prevPinnedRef = (0, import_react.useRef)(false);
   const interactiveLayerIdsRef = (0, import_react.useRef)(interactiveLayerIds);
   interactiveLayerIdsRef.current = interactiveLayerIds;
+  const clearActiveFeatureStates = () => {
+    if (!(0, import_lodash_es.isUndefined)(featureIdRef.current) && !(0, import_lodash_es.isUndefined)(sourceIdRef.current)) {
+      map.setFeatureState(
+        { source: sourceIdRef.current, id: featureIdRef.current },
+        { active: false }
+      );
+      try {
+        const allFeatures = map.queryRenderedFeatures(void 0, {
+          layers: interactiveLayerIdsRef.current
+        });
+        allFeatures.forEach((feature) => {
+          if (feature.id !== void 0 && feature.layer.source !== void 0) {
+            map.setFeatureState(
+              { source: feature.layer.source, id: feature.id },
+              { isAnyActive: false }
+            );
+          }
+        });
+      } catch {
+      }
+    }
+  };
   const handleClick = (0, import_react.useCallback)(
     ({ point }) => {
       let features = [];
@@ -93,30 +118,20 @@ const useActiveInteraction = (interactiveLayerIds) => {
   const onEscapeKeyPressedHandler = (0, import_react.useCallback)(
     (event) => {
       if (event.key === "Escape") {
-        if (!(0, import_lodash_es.isUndefined)(featureIdRef.current) && !(0, import_lodash_es.isUndefined)(sourceIdRef.current)) {
-          map.setFeatureState(
-            { source: sourceIdRef.current, id: featureIdRef.current },
-            { active: false }
-          );
-          try {
-            const allFeatures = map.queryRenderedFeatures(void 0, {
-              layers: interactiveLayerIdsRef.current
-            });
-            allFeatures.forEach((feature) => {
-              if (feature.id !== void 0 && feature.layer.source !== void 0) {
-                map.setFeatureState(
-                  { source: feature.layer.source, id: feature.id },
-                  { isAnyActive: false }
-                );
-              }
-            });
-          } catch {
-          }
-        }
+        clearActiveFeatureStates();
       }
     },
     [map]
   );
+  (0, import_react.useEffect)(() => {
+    const wasJustUnpinned = prevPinnedRef.current && !pinnedFromStore;
+    prevPinnedRef.current = pinnedFromStore;
+    if (wasJustUnpinned) {
+      clearActiveFeatureStates();
+      featureIdRef.current = void 0;
+      sourceIdRef.current = void 0;
+    }
+  }, [pinnedFromStore, map]);
   (0, import_react.useEffect)(() => {
     map.on("click", handleClick);
     window.addEventListener("keyup", onEscapeKeyPressedHandler);

package/map/hooks/use-attach-symbol-to-map.d.ts

@@ -1,3 +1,3 @@
 import { type ReactNode } from 'react';
 import type { MapShape } from '../types/shapes.js';
-export declare const useAttachSymbolToMap: (icon: string | MapShape | ReactNode, suffix?: string, outputSize?: number) => null | undefined;
+export declare const useAttachSymbolToMap: (icon: string | MapShape | ReactNode, suffix?: string, outputSize?: number) => void;

package/map/hooks/use-attach-symbol-to-map.js

@@ -23,15 +23,15 @@ __export(use_attach_symbol_to_map_exports, {
 module.exports = __toCommonJS(use_attach_symbol_to_map_exports);
 var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_lodash_es = require("lodash");
+var import_react = require("react");
 var import_use_attach_image_from_icon = require("./use-attach-image-from-icon.js");
 var import_attach_image_from_string = require("../utils/attach-image-from-string.js");
 const useAttachSymbolToMap = (icon, suffix = "", outputSize) => {
   const { current: map } = (0, import_react_maplibre.useMap)();
   const customIconAttached = (0, import_use_attach_image_from_icon.useAttachImageFromIcon)(icon, suffix, outputSize);
-  if ((0, import_lodash_es.isNil)(map)) {
-    return null;
-  }
-  if (!customIconAttached && (0, import_lodash_es.isString)(icon)) {
-    (0, import_attach_image_from_string.attachImageFromString)(map, icon, suffix, outputSize);
-  }
+  (0, import_react.useEffect)(() => {
+    if (!customIconAttached && (0, import_lodash_es.isString)(icon) && map) {
+      (0, import_attach_image_from_string.attachImageFromString)(map, icon, suffix, outputSize);
+    }
+  }, [customIconAttached, icon, map, outputSize, suffix]);
 };

package/map/hooks/use-hover-interaction.js

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(use_hover_interaction_exports);
 var import_react_maplibre = require("@vis.gl/react-maplibre");
 var import_lodash_es = require("lodash");
 var import_react = require("react");
+var import_use_geo_tooltip_sync = require("./use-geo-tooltip-sync.js");
 var import_associated_features = require("../utils/associated-features.js");
 var import_get_min_value_feature = require("../utils/get-min-value-feature.js");
 const MOUSEMOVE_THROTTLE_MS = 16;
@@ -81,6 +82,10 @@ const useHoverInteraction = (interactiveLayerIds) => {
   const sourceIdRef = (0, import_react.useRef)(void 0);
   const interactiveLayerIdsRef = (0, import_react.useRef)(interactiveLayerIds);
   interactiveLayerIdsRef.current = interactiveLayerIds;
+  const inBoundsFromStore = (0, import_use_geo_tooltip_sync.useOverlayTooltipSelector)(
+    (state) => state.inBounds
+  );
+  const prevInBoundsRef = (0, import_react.useRef)(false);
   const handleMouseOut = (0, import_react.useCallback)(() => {
     if (!(0, import_lodash_es.isNil)(map)) {
       blurTrackedFeature(map, featureIdRef, sourceIdRef);
@@ -121,6 +126,13 @@ const useHoverInteraction = (interactiveLayerIds) => {
     ),
     [map]
   );
+  (0, import_react.useEffect)(() => {
+    const wasJustHidden = prevInBoundsRef.current && !inBoundsFromStore;
+    prevInBoundsRef.current = inBoundsFromStore;
+    if (wasJustHidden && !(0, import_lodash_es.isNil)(map)) {
+      blurTrackedFeature(map, featureIdRef, sourceIdRef);
+    }
+  }, [inBoundsFromStore, map]);
   (0, import_react.useEffect)(() => {
     map?.on("mousemove", throttledMouseMove);
     map?.on("mouseout", handleMouseOut);

package/map/hooks/use-map-runtime-error.js

@@ -31,7 +31,8 @@ const MAPLIBRE_RUNTIME_ERROR_PATTERNS = [
   "Could not compile vertex shader",
   "Program failed to link",
   "feature index out of bounds",
-  "Out of bounds. Index requested"
+  "Out of bounds. Index requested",
+  "bucket.icon.opacityVertexArray"
 ];
 const isMaplibreRuntimeError = (message) => MAPLIBRE_RUNTIME_ERROR_PATTERNS.some((pattern) => message.includes(pattern));
 const useMapRuntimeError = ({

package/map/hooks/use-overlay-events.js

@@ -46,6 +46,7 @@ const useOverlayEvents = () => {
   const dispatch = (0, import_charts._useOverlayTooltipReducer)();
   const store = (0, import_charts._useOverlayTooltipStore)();
   const overlay = (0, import_charts._useOverlayChart)();
+  const pinnedFeatureIdRef = (0, import_react.useRef)(void 0);
   const getAbsolutePosition = (event) => {
     return {
       x: Math.round(event.originalEvent.clientX),
@@ -65,6 +66,23 @@ const useOverlayEvents = () => {
   const hideTooltip = () => {
     dispatch({ type: "RESET_TOOLTIP" })();
     setTooltipMarker(void 0, void 0);
+    pinnedFeatureIdRef.current = void 0;
+  };
+  const showHoverTooltip = (event, data, hoveredLayerId) => {
+    overlay.clear();
+    setTooltipMarker(hoveredLayerId, event.lngLat);
+    const pos = getAbsolutePosition(event);
+    store.setState(
+      (0, import_build_geo_tooltip_state.buildGeoTooltipState)({
+        absoluteX: pos.x,
+        absoluteY: pos.y,
+        relativeX: Math.round(event.point.x),
+        relativeY: Math.round(event.point.y),
+        pinned: false,
+        geometry: layerIdToGeometry(hoveredLayerId),
+        metadata: data
+      })
+    );
   };
   const handleMouseEnter = () => {
     setOverlayState({ mouseInBounds: true });
@@ -79,20 +97,7 @@ const useOverlayEvents = () => {
         event,
         dataLookupRegistry
       );
-      overlay.clear();
-      setTooltipMarker(hoveredLayerId, event.lngLat);
-      const pos = getAbsolutePosition(event);
-      store.setState(
-        (0, import_build_geo_tooltip_state.buildGeoTooltipState)({
-          absoluteX: pos.x,
-          absoluteY: pos.y,
-          relativeX: Math.round(event.point.x),
-          relativeY: Math.round(event.point.y),
-          pinned: false,
-          geometry: layerIdToGeometry(hoveredLayerId),
-          metadata: data
-        })
-      );
+      showHoverTooltip(event, data ?? [], hoveredLayerId);
     } else {
       const currentState = store.getState();
       if (!currentState.pinned) {
@@ -120,8 +125,15 @@ const useOverlayEvents = () => {
       hideTooltip();
       return;
     }
+    const currentState = store.getState();
+    if (currentState.pinned && pinnedFeatureIdRef.current === featureId) {
+      pinnedFeatureIdRef.current = void 0;
+      showHoverTooltip(event, data ?? [], hoveredLayerId);
+      return;
+    }
     overlay.clear();
     setTooltipMarker(hoveredLayerId, event.lngLat);
+    pinnedFeatureIdRef.current = featureId;
     const pos = getAbsolutePosition(event);
     store.setState(
       (0, import_build_geo_tooltip_state.buildGeoTooltipState)({

package/map/types/map-view-provider.d.ts

@@ -4,7 +4,7 @@
  */
 export type MapViewProviderProps = {
     /** Country code for regions with disputed borders */
-    countryCode?: 'CN' | 'IN' | 'IL' | 'MA';
+    countryCode?: 'CN' | 'IN' | 'IL' | 'MA' | 'OTHERS';
     /** Whether the world map is displayed */
     displayWorldMap?: boolean;
 };

package/map/utils/get-scaled-symbol-size.js

@@ -22,4 +22,4 @@ __export(get_scaled_symbol_size_exports, {
 });
 module.exports = __toCommonJS(get_scaled_symbol_size_exports);
 var import_constants = require("../constants.js");
-const getScaledSymbolSize = (symbolSize = import_constants.DEFAULT_SYMBOL_SIZE) => symbolSize * devicePixelRatio;
+const getScaledSymbolSize = (symbolSize = import_constants.DEFAULT_SYMBOL_SIZE) => Math.max(1, symbolSize * devicePixelRatio);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynatrace/strato-geo",
-  "version": "3.7.1",
+  "version": "3.9.0",
   "private": false,
   "license": "Apache-2.0",
   "keywords": [
@@ -42,7 +42,7 @@
     "@turf/midpoint": "^6.5.0",
     "@turf/projection": "^6.5.0",
     "@turf/rhumb-bearing": "^6.5.0",
-    "@vanilla-extract/css": "^1.18.0",
+    "@vanilla-extract/css": "^1.21.1",
     "@vanilla-extract/recipes": "^0.5.7",
     "@vis.gl/react-maplibre": "^8.0.0",
     "d3-array": "^3.2.4",
@@ -54,9 +54,9 @@
     "@dynatrace-sdk/client-classic-environment-v2": "^5.1.0",
     "@dynatrace-sdk/client-platform-management-service": "^1.7.0",
     "@dynatrace-sdk/units": "^1.5.0",
-    "@dynatrace/strato-components": "^3.7.1",
-    "@dynatrace/strato-design-tokens": "^1.5.0",
-    "@dynatrace/strato-icons": "^2.3.0",
+    "@dynatrace/strato-components": "^3.9.0",
+    "@dynatrace/strato-design-tokens": "^1.5.1",
+    "@dynatrace/strato-icons": "^2.3.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-intl": "^6.0.8 || ^7.0.0",