@dynatrace/strato-geo 3.2.1 → 3.3.1

package/map/components/DefaultTooltip/DefaultTooltip.js

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var DefaultTooltip_exports = {};
 __export(DefaultTooltip_exports, {
@@ -24,7 +34,8 @@ module.exports = __toCommonJS(DefaultTooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_lodash_es = require("lodash");
 var import_charts = require("@dynatrace/strato-components/charts");
-var import_get_default_actions = require("./utils/get-default-actions.js");
+var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
+var import_strato_icons = require("@dynatrace/strato-icons");
 var import_use_truncation_mode = require("../../hooks/use-truncation-mode.js");
 var import_tooltip_type_guards = require("../../utils/tooltip-type-guards.js");
 const isChoroplethTooltip = (props) => (0, import_tooltip_type_guards.isRegion)(props.closestPoint);
@@ -32,19 +43,24 @@ const isConnectionTooltip = (props) => (0, import_tooltip_type_guards.isConnecti
 const isBubbleTooltip = (props) => !(0, import_lodash_es.isNil)(props.layerData);
 const isDotTooltip = (props) => true;
 const DefaultTooltip = (props) => {
-  let locations = [];
+  const defaultConfig = (0, import_charts._useDefaultConfig)();
+  const getLabel = (0, import_charts._useDefaultLabels)();
   const truncationMode = (0, import_use_truncation_mode.useTruncationMode)();
+  let locations = [];
   if (isChoroplethTooltip(props)) {
-    const { closestPoint } = props;
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._ChartTooltip.Body, { "data-testid": "default-tooltip-template", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_charts._ChartTooltip.SeriesItem,
-      {
-        color: closestPoint.color,
-        name: closestPoint.name,
-        truncationMode,
-        value: closestPoint.data.value && closestPoint.data.value.toString() ? closestPoint.data.value.toString() : void 0
-      }
-    ) });
+    const { closestPoint, seriesActions } = props;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_charts._OverlayTooltip, { truncation: truncationMode, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip.SeriesHeader, { valueLabel: "" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        import_charts._OverlayTooltip.SeriesItem,
+        {
+          color: closestPoint.color,
+          name: closestPoint.name,
+          value: closestPoint.data.value?.toString() ?? "",
+          actions: seriesActions ? () => seriesActions(closestPoint) : void 0
+        }
+      )
+    ] });
   } else if (isConnectionTooltip(props)) {
     locations = props.closestPoint.data.path;
   } else if (isBubbleTooltip(props)) {
@@ -53,21 +69,52 @@ const DefaultTooltip = (props) => {
   } else if (isDotTooltip(props)) {
     locations = [props.closestPoint.data];
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_charts._ChartTooltip.Body,
-    {
-      "data-testid": "default-tooltip-template",
-      virtualization: false,
-      children: locations.map((location) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        import_charts._ChartTooltip.GeoItem,
-        {
-          latitude: location.latitude,
-          longitude: location.longitude,
-          defaultActions: (0, import_get_default_actions.getDefaultActions)(location)
-        },
-        `${location.latitude}-${location.longitude}`
-      ))
+  const seriesLabel = getLabel?.("seriesLabel") ?? "";
+  const variant = defaultConfig?.sharedVariant ? "shared" : "single";
+  const seriesData = locations.map((location) => ({
+    name: `${location.latitude}, ${location.longitude}`,
+    value: ""
+  }));
+  const getActionsForItem = (current) => {
+    if (props.actionsForItem) {
+      return props.actionsForItem(current);
+    }
+    const { seriesActions: actions } = props;
+    if (!actions || !locations.length) {
+      return void 0;
     }
-  );
+    const location = locations.find(
+      (l) => `${l.latitude}, ${l.longitude}` === current.name
+    );
+    return location ? () => actions(location) : void 0;
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_charts._OverlayTooltip, { truncation: truncationMode, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip.Header, { header1: seriesLabel }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip.SeriesHeader, { disabled: true }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      import_charts._OverlayTooltip.Series,
+      {
+        activeItem: 0,
+        data: seriesData,
+        variant,
+        seriesItemTemplate: (current) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          import_charts._OverlayTooltip.SeriesItem,
+          {
+            ...current,
+            iconStyle: "large",
+            actions: getActionsForItem(current),
+            icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_strato_icons.LocationMarkerFilledIcon,
+              {
+                style: {
+                  fill: import_colors.default.Text.Neutral.Default
+                }
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
 };
 DefaultTooltip["displayName"] = "DefaultTooltip";

package/map/components/DotLayer/BackgroundLayer.d.ts

@@ -5,5 +5,5 @@ interface BackgroundLayerProps {
     radius: number;
     iconAnchor: 'bottom' | 'center';
 }
-export declare const BackgroundLayer: (props: BackgroundLayerProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const BackgroundLayer: (props: BackgroundLayerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/map/components/DotLayer/BackgroundSymbolLayer.d.ts

@@ -10,5 +10,5 @@ interface BackgroundSymbolLayerProps {
     layerId?: string;
     shape?: string | MapShape | ReactNode;
 }
-export declare const BackgroundSymbolLayer: (props: BackgroundSymbolLayerProps) => import("react/jsx-runtime.js").JSX.Element;
+export declare const BackgroundSymbolLayer: (props: BackgroundSymbolLayerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/map/components/DotLayer/DotLayer.d.ts

@@ -5,6 +5,6 @@ import type { Location } from '../../types/location.js';
  * DotLayer Component
  */
 export declare const DotLayer: {
-    <T extends Location>(props: PropsWithChildren<InternalDotLayerProps<T>>): import("react/jsx-runtime.js").JSX.Element;
+    <T extends Location>(props: PropsWithChildren<InternalDotLayerProps<T>>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/map/components/DotLayer/DotLayerTooltip.d.ts

@@ -3,6 +3,6 @@ export interface DotLayerTooltipProps {
     tooltipTemplate?: DotLayerTooltipHandler;
 }
 export declare const DotLayerTooltip: {
-    (props: DotLayerTooltipProps): import("react/jsx-runtime.js").JSX.Element | null;
+    (props: DotLayerTooltipProps): string | number | true | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/map/components/DotLayer/DotLayerTooltip.js

@@ -22,52 +22,31 @@ __export(DotLayerTooltip_exports, {
 });
 module.exports = __toCommonJS(DotLayerTooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
 var import_charts = require("@dynatrace/strato-components/charts");
-var import_use_get_position = require("../../hooks/use-get-position.js");
-var import_selectors = require("../../store/selectors.js");
+var import_use_geo_layer_tooltip = require("../../hooks/use-geo-layer-tooltip.js");
+var import_tooltip_type_guards = require("../../utils/tooltip-type-guards.js");
 const DotLayerTooltip = (props) => {
   const { tooltipTemplate } = props;
-  const {
-    selectedItem: selectedItemId,
-    actionsMenuRef,
-    updateSelectedItem,
-    onLeave
-  } = (0, import_charts._useChartActionsMenu)();
-  const { data, visible, enabled } = (0, import_selectors.useMapTooltipState)();
-  const pinned = (0, import_selectors.useMapTooltipPinnedState)();
-  const dotData = (0, import_react.useRef)(null);
-  const forceHideTooltip = !pinned && (!visible || !enabled);
-  const position = (0, import_use_get_position.useGetPosition)(pinned, !forceHideTooltip);
-  if (!tooltipTemplate || forceHideTooltip || !position) {
+  const { data, inBounds, position } = (0, import_use_geo_layer_tooltip.useGeoLayerTooltip)("geoDot");
+  if (!tooltipTemplate || !inBounds || !position) {
     return null;
   }
-  if (data?.[0]) {
-    const { __color: color, __bearing: bearing, data: customData } = data[0];
-    dotData.current = {
-      color,
-      bearing,
-      data: customData
-    };
+  if (!data || !data[0]) {
+    return null;
   }
-  const template = dotData.current && tooltipTemplate(dotData.current);
+  const { __color: color, __bearing: bearing, data: customData } = data[0];
+  const dotData = {
+    color,
+    bearing,
+    data: customData
+  };
+  const template = tooltipTemplate(dotData);
   if (!template) {
     return null;
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    import_charts._ChartTooltip,
-    {
-      updatePositionWhenPinned: true,
-      position,
-      pinned,
-      onMouseLeave: onLeave,
-      actionSelectionValue: {
-        selectedItemId,
-        actionsMenuRef,
-        updateSelectedItem
-      },
-      children: template
-    }
-  );
+  if ((0, import_tooltip_type_guards.isDefaultTooltipHandler)(tooltipTemplate)) {
+    return template;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_charts._OverlayTooltip, { legacyTemplate: template });
 };
 DotLayerTooltip["displayName"] = "DotLayerTooltip";

package/map/components/MapUnavailable.d.ts

@@ -5,7 +5,7 @@ interface MapUnavailableProps {
     chartHeight: string | number;
 }
 export declare const MapUnavailable: {
-    ({ chartHeight, error, isDisabled, isFetchingFeatures, }: MapUnavailableProps): import("react/jsx-runtime.js").JSX.Element | undefined;
+    ({ chartHeight, error, isDisabled, isFetchingFeatures, }: MapUnavailableProps): import("react/jsx-runtime").JSX.Element | undefined;
     displayName: string;
 };
 export {};

package/map/components/TooltipWrapper.d.ts

@@ -1,4 +1,4 @@
 import { type PropsWithChildren } from 'react';
 export declare const TooltipWrapper: (props: PropsWithChildren<{
     layerId: string;
-}>) => import("react/jsx-runtime.js").JSX.Element | null;
+}>) => import("react/jsx-runtime").JSX.Element | null;

package/map/components/legend/CategoricalLegendRenderer.d.ts

@@ -1 +1 @@
-export declare const CategoricalLegendRenderer: () => import("react/jsx-runtime.js").JSX.Element;
+export declare const CategoricalLegendRenderer: () => import("react/jsx-runtime").JSX.Element;

package/map/components/legend/MapLegendRenderer.d.ts

@@ -1 +1 @@
-export declare const MapLegendRenderer: () => import("react/jsx-runtime.js").JSX.Element | null;
+export declare const MapLegendRenderer: () => import("react/jsx-runtime").JSX.Element | null;

package/map/components/legend/SequentialLegendRenderer.d.ts

@@ -1 +1 @@
-export declare const SequentialLegendRenderer: () => import("react/jsx-runtime.js").JSX.Element | null;
+export declare const SequentialLegendRenderer: () => import("react/jsx-runtime").JSX.Element | null;

package/map/components/legend/ThresholdLegendRenderer.d.ts

@@ -1 +1 @@
-export declare const ThresholdLegendRenderer: () => import("react/jsx-runtime.js").JSX.Element;
+export declare const ThresholdLegendRenderer: () => import("react/jsx-runtime").JSX.Element;

package/map/components/toolbar/MapToolbar.d.ts

@@ -1,4 +1,4 @@
 export declare const MapToolbar: {
-    (): import("react/jsx-runtime.js").JSX.Element | null;
+    (): import("react/jsx-runtime").JSX.Element | null;
     displayName: string;
 };

package/map/components/toolbar/MapToolbar.js

@@ -39,7 +39,7 @@ const MapToolbar = () => {
   const { toolbar: toolbarConfig, interactions: interactionsConfig } = (0, import_use_map_config.useMapConfig)();
   const data = (0, import_use_map_raw_data.useMapRawData)();
   const { mouseInBounds } = (0, import_selectors.useMapOverlayState)();
-  const setTooltipState = (0, import_store.useSetStateTooltip)();
+  const setState = (0, import_store.useSetState)();
   const isZoomEnabled = toolbarConfig?.zoom?.enabled ?? interactionsConfig?.zoom?.enabled ?? false;
   const isZoomToFitEnabled = toolbarConfig?.zoom?.enabled ?? interactionsConfig?.zoomToFit?.enabled ?? false;
   const isDownloadDataEnabled = toolbarConfig?.downloadCSV?.enabled ?? false;
@@ -47,14 +47,16 @@ const MapToolbar = () => {
   const hasControls = hasZoomControls || isDownloadDataEnabled;
   const hasOnlyDownloadCSV = isDownloadDataEnabled && !hasZoomControls;
   const handleMouseEnter = () => {
-    setTooltipState({
-      enabled: false
-    });
+    setState((prev) => ({
+      ...prev,
+      tooltip: { ...prev.tooltip, enabled: false }
+    }));
   };
   const handleMouseLeave = () => {
-    setTooltipState({
-      enabled: true
-    });
+    setState((prev) => ({
+      ...prev,
+      tooltip: { ...prev.tooltip, enabled: true }
+    }));
   };
   const handleDownloadDataToolbar = () => {
     (0, import_build_and_download_csv.buildAndDownloadCsv)(data);

package/map/components/toolbar/buttons/MapDownloadDataButton.d.ts

@@ -1 +1 @@
-export declare const MapDownloadDataButton: () => import("react/jsx-runtime.js").JSX.Element;
+export declare const MapDownloadDataButton: () => import("react/jsx-runtime").JSX.Element;

package/map/components/toolbar/buttons/MapResetButton.d.ts

@@ -1 +1 @@
-export declare const MapResetButton: () => import("react/jsx-runtime.js").JSX.Element;
+export declare const MapResetButton: () => import("react/jsx-runtime").JSX.Element;

package/map/components/toolbar/buttons/MapZoomInOutButtons.d.ts

@@ -1 +1 @@
-export declare const MapZoomInOutButtons: () => import("react/jsx-runtime.js").JSX.Element;
+export declare const MapZoomInOutButtons: () => import("react/jsx-runtime").JSX.Element;

package/map/components/toolbar/buttons/MapZoomToFitButton.d.ts

@@ -1,4 +1,4 @@
 export declare const MapZoomToFitButton: {
-    (): import("react/jsx-runtime.js").JSX.Element;
+    (): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/map/hooks/use-geo-layer-tooltip.d.ts

@@ -0,0 +1,10 @@
+import type { _OverlayTooltipGeometryTypes as GeometryTypes } from '@dynatrace/strato-components/charts';
+export declare const useGeoLayerTooltip: <T>(geometryType: GeometryTypes) => {
+    data: T[] | undefined;
+    pinned: boolean;
+    inBounds: boolean;
+    position: {
+        x: number;
+        y: number;
+    } | null | undefined;
+};

package/map/hooks/use-geo-layer-tooltip.js

@@ -0,0 +1,38 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_geo_layer_tooltip_exports = {};
+__export(use_geo_layer_tooltip_exports, {
+  useGeoLayerTooltip: () => useGeoLayerTooltip
+});
+module.exports = __toCommonJS(use_geo_layer_tooltip_exports);
+var import_use_geo_tooltip_sync = require("./use-geo-tooltip-sync.js");
+var import_use_get_position = require("./use-get-position.js");
+var import_selectors = require("../store/selectors.js");
+const useGeoLayerTooltip = (geometryType) => {
+  const enabled = (0, import_selectors.useSelector)(({ tooltip }) => tooltip.enabled);
+  const { data, pinned, inBounds } = (0, import_use_geo_tooltip_sync.useGeoOverlayTooltipState)();
+  const forceHideTooltip = !pinned && (!inBounds || !enabled);
+  const markerPosition = (0, import_use_get_position.useGetPosition)(pinned, !forceHideTooltip);
+  const storePosition = (0, import_use_geo_tooltip_sync.useOverlayTooltipSelector)(
+    (state) => state.inBounds && typeof state.absoluteX === "number" && typeof state.absoluteY === "number" ? { x: state.absoluteX, y: state.absoluteY } : null
+  );
+  const position = pinned ? markerPosition : storePosition;
+  (0, import_use_geo_tooltip_sync.useGeoTooltipSync)(position, pinned, geometryType, data ?? void 0);
+  return { data, pinned, inBounds, position };
+};

package/map/hooks/use-geo-tooltip-sync.d.ts

@@ -0,0 +1,24 @@
+import { type _OverlayTooltipGeometryTypes as GeometryTypes, type _OverlayTooltipState as TooltipState } from '@dynatrace/strato-components/charts';
+type Position = {
+    x: number;
+    y: number;
+} | null | undefined;
+export declare const useOverlayTooltipSelector: <S>(selector: (state: TooltipState) => S) => S;
+export declare const useGeoOverlayTooltipState: <T>() => {
+    data: T[] | undefined;
+    pinned: boolean;
+    inBounds: boolean;
+};
+/**
+ * Syncs position, pinned state, and layer-specific data from the geo map
+ * into the OverlayTooltip store.
+ *
+ * Position updates set the store state directly because the reducer's
+ * SET_POSITION / SET_PINNED rely on `overlay.getBounds()`, which is
+ * always `undefined` in the geo context (the overlay ref is never
+ * attached to a DOM element).
+ *
+ * @internal
+ */
+export declare const useGeoTooltipSync: (position: Position, pinned: boolean, geometryType: GeometryTypes, geoData?: unknown[] | undefined) => void;
+export {};

package/map/hooks/use-geo-tooltip-sync.js

@@ -0,0 +1,95 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var use_geo_tooltip_sync_exports = {};
+__export(use_geo_tooltip_sync_exports, {
+  useGeoOverlayTooltipState: () => useGeoOverlayTooltipState,
+  useGeoTooltipSync: () => useGeoTooltipSync,
+  useOverlayTooltipSelector: () => useOverlayTooltipSelector
+});
+module.exports = __toCommonJS(use_geo_tooltip_sync_exports);
+var import_lodash_es = require("lodash");
+var import_react = require("react");
+var import_charts = require("@dynatrace/strato-components/charts");
+var import_build_geo_tooltip_state = require("../utils/build-geo-tooltip-state.js");
+const useOverlayTooltipSelector = (selector) => {
+  const store = (0, import_charts._useOverlayTooltipStore)();
+  const prevRef = (0, import_react.useRef)(void 0);
+  const getSnapshot = (0, import_react.useCallback)(() => {
+    const next = selector(store.getState());
+    if (prevRef.current !== void 0 && (0, import_lodash_es.isEqual)(prevRef.current, next)) {
+      return prevRef.current;
+    }
+    prevRef.current = next;
+    return next;
+  }, [store, selector]);
+  return (0, import_react.useSyncExternalStore)(store.subscribe, getSnapshot);
+};
+const useGeoOverlayTooltipState = () => {
+  const metadata = useOverlayTooltipSelector(
+    (state) => state.data?.metadata
+  );
+  const pinned = useOverlayTooltipSelector((state) => state.pinned);
+  const inBounds = useOverlayTooltipSelector((state) => state.inBounds);
+  return { data: metadata, pinned, inBounds };
+};
+const useGeoTooltipSync = (position, pinned, geometryType, geoData) => {
+  const store = (0, import_charts._useOverlayTooltipStore)();
+  const dispatch = (0, import_charts._useOverlayTooltipReducer)();
+  (0, import_react.useEffect)(() => {
+    const onScroll = () => {
+      if (store.getState().pinned) {
+        dispatch({ type: "TOOLTIP_MOUSE_LEAVE" })();
+      }
+    };
+    document.body.addEventListener("scroll", onScroll, true);
+    return () => {
+      document.body.removeEventListener("scroll", onScroll, true);
+    };
+  }, [store, dispatch]);
+  (0, import_react.useEffect)(() => {
+    if (position) {
+      const nextState = (0, import_build_geo_tooltip_state.buildGeoTooltipState)({
+        absoluteX: position.x,
+        absoluteY: position.y,
+        relativeX: position.x,
+        relativeY: position.y,
+        pinned,
+        geometry: geometryType,
+        metadata: geoData
+      });
+      const current = store.getState();
+      if (current.absoluteX !== nextState.absoluteX || current.absoluteY !== nextState.absoluteY || current.inBounds !== nextState.inBounds || current.pinned !== nextState.pinned || !(0, import_lodash_es.isEqual)(current.data?.metadata, nextState.data.metadata)) {
+        store.setState(nextState);
+      }
+    } else {
+      const currentState = store.getState();
+      if (currentState.inBounds || currentState.pinned) {
+        dispatch({ type: "SET_OUT_BOUNDS" })();
+      }
+    }
+  }, [
+    position?.x,
+    position?.y,
+    pinned,
+    geometryType,
+    geoData,
+    store,
+    dispatch
+  ]);
+};

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

@@ -21,54 +21,123 @@ __export(use_overlay_events_exports, {
   useOverlayEvents: () => useOverlayEvents
 });
 module.exports = __toCommonJS(use_overlay_events_exports);
+var import_charts = require("@dynatrace/strato-components/charts");
 var import_store = require("../store/store.js");
+var import_build_geo_tooltip_state = require("../utils/build-geo-tooltip-state.js");
 var import_parse_tooltip_data = require("../utils/parse-tooltip-data.js");
+const layerIdToGeometry = (layerId) => {
+  if (layerId?.includes("bubble")) {
+    return "geoBubble";
+  }
+  if (layerId?.includes("choropleth")) {
+    return "geoChoropleth";
+  }
+  if (layerId?.includes("connection")) {
+    return "geoConnection";
+  }
+  return "geoDot";
+};
 const useOverlayEvents = () => {
   const setOverlayState = (0, import_store.useSetStateOverlay)();
-  const setTooltipState = (0, import_store.useSetStateTooltip)();
-  const setTooltipPinnedState = (0, import_store.useTooltipPinnedState)();
+  const setState = (0, import_store.useSetState)();
+  const dispatch = (0, import_charts._useOverlayTooltipReducer)();
+  const store = (0, import_charts._useOverlayTooltipStore)();
+  const overlay = (0, import_charts._useOverlayChart)();
+  const getAbsolutePosition = (event) => {
+    return {
+      x: Math.round(event.originalEvent.clientX),
+      y: Math.round(event.originalEvent.clientY)
+    };
+  };
+  const setTooltipMarker = (hoveredLayerId, location) => {
+    setState((prev) => ({
+      ...prev,
+      tooltip: {
+        ...prev.tooltip,
+        hoveredLayerId,
+        location
+      }
+    }));
+  };
   const hideTooltip = () => {
-    setTooltipState({ visible: false });
+    dispatch({ type: "RESET_TOOLTIP" })();
+    setTooltipMarker(void 0, void 0);
   };
   const handleMouseEnter = () => {
-    setOverlayState({
-      mouseInBounds: true
-    });
+    setOverlayState({ mouseInBounds: true });
   };
   const handleMouseMove = (event) => {
     if (event.features?.length) {
+      const currentState = store.getState();
+      if (currentState.pinned) {
+        return;
+      }
       const { data, hoveredLayerId } = (0, import_parse_tooltip_data.extractDataFromEvent)(event);
-      setTooltipState({
-        data,
-        hoveredLayerId,
-        visible: true,
-        location: event.lngLat
-      });
+      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
+        })
+      );
     } else {
-      hideTooltip();
+      const currentState = store.getState();
+      if (!currentState.pinned) {
+        hideTooltip();
+      }
     }
   };
   const handleMouseLeave = () => {
-    setOverlayState({
-      mouseInBounds: false
-    });
-    hideTooltip();
+    setOverlayState({ mouseInBounds: false });
+    const currentState = store.getState();
+    if (!currentState.pinned) {
+      hideTooltip();
+    }
   };
   const handleMouseClick = (event) => {
-    setTooltipPinnedState(event);
-  };
-  const handleDrag = () => {
-    hideTooltip();
+    const { data, featureId, hoveredLayerId } = (0, import_parse_tooltip_data.extractDataFromEvent)(event);
+    if (!featureId) {
+      hideTooltip();
+      return;
+    }
+    if (!hoveredLayerId) {
+      hideTooltip();
+      return;
+    }
+    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: true,
+        geometry: layerIdToGeometry(hoveredLayerId),
+        metadata: data
+      })
+    );
   };
-  const handleZoom = () => {
-    hideTooltip();
+  const hideTooltipIfNotPinned = () => {
+    const currentState = store.getState();
+    if (!currentState.pinned) {
+      hideTooltip();
+    }
   };
   return {
     handleMouseEnter,
     handleMouseMove,
     handleMouseLeave,
     handleMouseClick,
-    handleZoom,
-    handleDrag
+    handleZoom: hideTooltipIfNotPinned,
+    handleDrag: hideTooltipIfNotPinned
   };
 };