@dynatrace/strato-geo 3.7.1 → 3.8.0

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-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/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.8.0",
   "private": false,
   "license": "Apache-2.0",
   "keywords": [
@@ -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.8.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",