@dynatrace/strato-geo 2.6.2 → 2.8.2

package/esm/map/components/ConnectionLayer/ConnectionLayerTooltip.js

@@ -4,6 +4,7 @@ import {
   _ChartTooltip as ChartTooltip,
   _useChartActionsMenu as useChartActionsMenu
 } from "@dynatrace/strato-components-preview/charts";
+import { restoreNullProps } from "./utils/restore-null-props.js";
 import {
   useMapTooltipPinnedState,
   useMapTooltipState
@@ -16,8 +17,15 @@ const ConnectionLayerTooltip = (props) => {
     updateSelectedItem,
     onLeave
   } = useChartActionsMenu();
-  const { hoveredLayerId, data, position, visible, enabled } = useMapTooltipState();
+  const {
+    hoveredLayerId,
+    position,
+    data: dataWithoutNullProps,
+    visible,
+    enabled
+  } = useMapTooltipState();
   const pinned = useMapTooltipPinnedState();
+  const data = restoreNullProps(dataWithoutNullProps);
   const connectionData = useRef(
     null
   );

package/esm/map/components/ConnectionLayer/ConnectionLayerTooltip.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/map/components/ConnectionLayer/ConnectionLayerTooltip.tsx"],
-  "sourcesContent": ["import { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Connection } from '../../types/connection-layer.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  ConnectionLayerTooltipData,\n  ConnectionLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\ntype ConnectionTooltipStatePayload = {\n  path: Location[];\n  __lineColor: string;\n  __lineWidth: number;\n};\n\nexport interface ConnectionLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: ConnectionLayerTooltipHandler;\n}\n\nexport const ConnectionLayerTooltip = (props: ConnectionLayerTooltipProps) => {\n  const { layerId, tooltipTemplate } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n  const { hoveredLayerId, data, position, visible, enabled } =\n    useMapTooltipState<ConnectionTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const connectionData = useRef<ConnectionLayerTooltipData<Connection> | null>(\n    null,\n  );\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const { __lineColor: color, __lineWidth: thickness, ...rest } = data[0];\n\n    connectionData.current = { color, thickness, data: rest };\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {connectionData.current ? tooltipTemplate(connectionData.current) : null}\n    </ChartTooltip>\n  );\n};\n\nConnectionLayerTooltip['displayName'] = 'ConnectionLayerTooltip';\n"],
-  "mappings": "AA2DI;AA3DJ,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAmBA,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AACxB,QAAM,EAAE,gBAAgB,MAAM,UAAU,SAAS,QAAQ,IACvD,mBAAkD;AACpD,QAAM,SAAS,yBAAyB;AAExC,QAAM,iBAAiB;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,EAAE,aAAa,OAAO,aAAa,WAAW,GAAG,KAAK,IAAI,KAAK,CAAC;AAEtE,mBAAe,UAAU,EAAE,OAAO,WAAW,MAAM,KAAK;AAAA,EAC1D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,UAAU,gBAAgB,eAAe,OAAO,IAAI;AAAA;AAAA,EACtE;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
+  "sourcesContent": ["import { useRef } from 'react';\n\nimport {\n  _ChartTooltip as ChartTooltip,\n  _useChartActionsMenu as useChartActionsMenu,\n} from '@dynatrace/strato-components-preview/charts';\n\nimport { restoreNullProps } from './utils/restore-null-props.js';\nimport {\n  useMapTooltipPinnedState,\n  useMapTooltipState,\n} from '../../store/selectors.js';\nimport type { Connection } from '../../types/connection-layer.js';\nimport type { Location } from '../../types/location.js';\nimport type {\n  ConnectionLayerTooltipData,\n  ConnectionLayerTooltipHandler,\n} from '../../types/tooltip.js';\n\nexport type ConnectionTooltipStatePayload = {\n  path: Location[];\n  __lineColor: string;\n  __lineWidth: number;\n  __nullValues: string[];\n};\n\nexport interface ConnectionLayerTooltipProps {\n  layerId: string;\n  tooltipTemplate?: ConnectionLayerTooltipHandler;\n}\n\nexport const ConnectionLayerTooltip = (props: ConnectionLayerTooltipProps) => {\n  const { layerId, tooltipTemplate } = props;\n  const {\n    selectedItem: selectedItemId,\n    actionsMenuRef,\n    updateSelectedItem,\n    onLeave,\n  } = useChartActionsMenu();\n\n  const {\n    hoveredLayerId,\n    position,\n    data: dataWithoutNullProps,\n    visible,\n    enabled,\n  } = useMapTooltipState<ConnectionTooltipStatePayload>();\n  const pinned = useMapTooltipPinnedState();\n\n  const data = restoreNullProps(dataWithoutNullProps);\n\n  const connectionData = useRef<ConnectionLayerTooltipData<Connection> | null>(\n    null,\n  );\n\n  const forceHideTooltip =\n    !pinned && (hoveredLayerId !== layerId || !visible || !enabled);\n\n  if (!tooltipTemplate || forceHideTooltip || !position) {\n    return null;\n  }\n\n  if (!pinned && data?.[0]) {\n    const { __lineColor: color, __lineWidth: thickness, ...rest } = data[0];\n\n    connectionData.current = { color, thickness, data: rest };\n  }\n\n  return (\n    <ChartTooltip\n      position={position}\n      pinned={pinned}\n      onMouseLeave={onLeave}\n      actionSelectionValue={{\n        selectedItemId,\n        actionsMenuRef,\n        updateSelectedItem,\n      }}\n    >\n      {connectionData.current ? tooltipTemplate(connectionData.current) : null}\n    </ChartTooltip>\n  );\n};\n\nConnectionLayerTooltip['displayName'] = 'ConnectionLayerTooltip';\n"],
+  "mappings": "AAqEI;AArEJ,SAAS,cAAc;AAEvB;AAAA,EACE,iBAAiB;AAAA,EACjB,wBAAwB;AAAA,OACnB;AAEP,SAAS,wBAAwB;AACjC;AAAA,EACE;AAAA,EACA;AAAA,OACK;AAoBA,MAAM,yBAAyB,CAAC,UAAuC;AAC5E,QAAM,EAAE,SAAS,gBAAgB,IAAI;AACrC,QAAM;AAAA,IACJ,cAAc;AAAA,IACd;AAAA,IACA;AAAA,IACA;AAAA,EACF,IAAI,oBAAoB;AAExB,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA;AAAA,EACF,IAAI,mBAAkD;AACtD,QAAM,SAAS,yBAAyB;AAExC,QAAM,OAAO,iBAAiB,oBAAoB;AAElD,QAAM,iBAAiB;AAAA,IACrB;AAAA,EACF;AAEA,QAAM,mBACJ,CAAC,WAAW,mBAAmB,WAAW,CAAC,WAAW,CAAC;AAEzD,MAAI,CAAC,mBAAmB,oBAAoB,CAAC,UAAU;AACrD,WAAO;AAAA,EACT;AAEA,MAAI,CAAC,UAAU,OAAO,CAAC,GAAG;AACxB,UAAM,EAAE,aAAa,OAAO,aAAa,WAAW,GAAG,KAAK,IAAI,KAAK,CAAC;AAEtE,mBAAe,UAAU,EAAE,OAAO,WAAW,MAAM,KAAK;AAAA,EAC1D;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA,cAAc;AAAA,MACd,sBAAsB;AAAA,QACpB;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MAEC,yBAAe,UAAU,gBAAgB,eAAe,OAAO,IAAI;AAAA;AAAA,EACtE;AAEJ;AAEA,uBAAuB,aAAa,IAAI;",
   "names": []
 }

package/esm/map/components/ConnectionLayer/utils/parse-connection-data-to-geo-json.js

@@ -13,12 +13,14 @@ const getLineThickness = (thickness) => {
   }
   return thickness;
 };
+const getKeysWithNullValues = (obj) => Object.keys(obj).filter((key) => obj[key] === null);
 const getFeatureProperties = (thickness, curve) => (properties, id) => {
   const lineThickness = getLineThickness(thickness);
   return {
     ...properties,
     id,
     __lineWidth: lineThickness,
+    __nullValues: getKeysWithNullValues(properties),
     curve
   };
 };

package/esm/map/components/ConnectionLayer/utils/parse-connection-data-to-geo-json.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../src/map/components/ConnectionLayer/utils/parse-connection-data-to-geo-json.ts"],
-  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { getArcLineFeature } from './get-arc-line-feature.js';\nimport { getStraightLineFeature } from './get-straight-line-feature.js';\nimport { MAX_LINE_THICKNESS, MIN_LINE_THICKNESS } from '../../../constants.js';\nimport type {\n  Connection,\n  CurvedLine,\n  FeatureProperties,\n} from '../../../types/connection-layer.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\nconst getLineThickness = (thickness: number): number => {\n  if (thickness < MIN_LINE_THICKNESS) {\n    return MIN_LINE_THICKNESS;\n  }\n\n  if (thickness > MAX_LINE_THICKNESS) {\n    return MAX_LINE_THICKNESS;\n  }\n\n  return thickness;\n};\n\nconst getFeatureProperties =\n  (thickness: number, curve?: CurvedLine) =>\n  <T extends Connection>(\n    properties: T,\n    id: string,\n  ): Omit<FeatureProperties, '__lineColor' | '__lineHoveredColor'> => {\n    const lineThickness = getLineThickness(thickness);\n\n    return {\n      ...properties,\n      id,\n      __lineWidth: lineThickness,\n      curve,\n    };\n  };\n\nconst getLineFeature = (\n  path: Location[],\n  featureProperties: FeatureProperties,\n): GeoJSON.Feature => {\n  const isCurve = featureProperties.curve === 'smooth';\n\n  if (isCurve) {\n    return getArcLineFeature(path, featureProperties);\n  }\n\n  return getStraightLineFeature(path, featureProperties);\n};\n\nconst getFeatures = <T extends Connection>(\n  data: T[],\n  thickness: number,\n  color: string | ((connection: T) => string),\n  curve?: CurvedLine,\n): GeoJSON.Feature[] => {\n  const getProperties = getFeatureProperties(thickness, curve);\n  const features: GeoJSON.Feature[] = [];\n  data.forEach((feature, index) => {\n    if (feature.path.length >= 2) {\n      const { path, ...properties } = feature;\n\n      const featureProperties = {\n        ...getProperties({ path, ...properties }, `connection-${index}`),\n        ...getConnectionColor(feature, color),\n      };\n\n      features.push(getLineFeature(path, featureProperties));\n    }\n  });\n  return features;\n};\n\nconst getConnectionColor = <T extends Connection>(\n  connection: T,\n  color: string | ((connection: T) => string),\n): Pick<FeatureProperties, '__lineColor' | '__lineHoveredColor'> => {\n  const parsedColor = defineColor(color, connection);\n\n  const canvasColor = getCanvasColor(parsedColor);\n  const hoveredColor = calculateHoveredColor(canvasColor);\n\n  return {\n    __lineColor: canvasColor,\n    __lineHoveredColor: hoveredColor,\n  };\n};\n\nexport const parseConnectionDataToGeoJSON = <T extends Connection>(\n  data: T[],\n  thickness: number,\n  color: string | ((connection: T) => string),\n  curve?: CurvedLine,\n): GeoJSON.FeatureCollection => {\n  return {\n    type: 'FeatureCollection',\n\n    features: getFeatures(data, thickness, color, curve),\n  };\n};\n"],
-  "mappings": "AAEA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB,0BAA0B;AAOvD,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAE5B,MAAM,mBAAmB,CAAC,cAA8B;AACtD,MAAI,YAAY,oBAAoB;AAClC,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,oBAAoB;AAClC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,MAAM,uBACJ,CAAC,WAAmB,UACpB,CACE,YACA,OACkE;AAClE,QAAM,gBAAgB,iBAAiB,SAAS;AAEhD,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,aAAa;AAAA,IACb;AAAA,EACF;AACF;AAEF,MAAM,iBAAiB,CACrB,MACA,sBACoB;AACpB,QAAM,UAAU,kBAAkB,UAAU;AAE5C,MAAI,SAAS;AACX,WAAO,kBAAkB,MAAM,iBAAiB;AAAA,EAClD;AAEA,SAAO,uBAAuB,MAAM,iBAAiB;AACvD;AAEA,MAAM,cAAc,CAClB,MACA,WACA,OACA,UACsB;AACtB,QAAM,gBAAgB,qBAAqB,WAAW,KAAK;AAC3D,QAAM,WAA8B,CAAC;AACrC,OAAK,QAAQ,CAAC,SAAS,UAAU;AAC/B,QAAI,QAAQ,KAAK,UAAU,GAAG;AAC5B,YAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAEhC,YAAM,oBAAoB;AAAA,QACxB,GAAG,cAAc,EAAE,MAAM,GAAG,WAAW,GAAG,cAAc,KAAK,EAAE;AAAA,QAC/D,GAAG,mBAAmB,SAAS,KAAK;AAAA,MACtC;AAEA,eAAS,KAAK,eAAe,MAAM,iBAAiB,CAAC;AAAA,IACvD;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEA,MAAM,qBAAqB,CACzB,YACA,UACkE;AAClE,QAAM,cAAc,YAAY,OAAO,UAAU;AAEjD,QAAM,cAAc,eAAe,WAAW;AAC9C,QAAM,eAAe,sBAAsB,WAAW;AAEtD,SAAO;AAAA,IACL,aAAa;AAAA,IACb,oBAAoB;AAAA,EACtB;AACF;AAEO,MAAM,+BAA+B,CAC1C,MACA,WACA,OACA,UAC8B;AAC9B,SAAO;AAAA,IACL,MAAM;AAAA,IAEN,UAAU,YAAY,MAAM,WAAW,OAAO,KAAK;AAAA,EACrD;AACF;",
+  "sourcesContent": ["import type GeoJSON from 'geojson';\n\nimport { _getCanvasColor as getCanvasColor } from '@dynatrace/strato-components-preview/charts';\n\nimport { getArcLineFeature } from './get-arc-line-feature.js';\nimport { getStraightLineFeature } from './get-straight-line-feature.js';\nimport { MAX_LINE_THICKNESS, MIN_LINE_THICKNESS } from '../../../constants.js';\nimport type {\n  Connection,\n  CurvedLine,\n  FeatureProperties,\n} from '../../../types/connection-layer.js';\nimport type { Location } from '../../../types/location.js';\nimport { calculateHoveredColor } from '../../../utils/calculate-hovered-color.js';\nimport { defineColor } from '../../../utils/define-color.js';\n\nconst getLineThickness = (thickness: number): number => {\n  if (thickness < MIN_LINE_THICKNESS) {\n    return MIN_LINE_THICKNESS;\n  }\n\n  if (thickness > MAX_LINE_THICKNESS) {\n    return MAX_LINE_THICKNESS;\n  }\n\n  return thickness;\n};\n\nconst getKeysWithNullValues = (obj: Record<string, unknown>): string[] =>\n  Object.keys(obj).filter((key) => obj[key] === null);\n\nconst getFeatureProperties =\n  (thickness: number, curve?: CurvedLine) =>\n  <T extends Connection>(\n    properties: T,\n    id: string,\n  ): Omit<FeatureProperties, '__lineColor' | '__lineHoveredColor'> => {\n    const lineThickness = getLineThickness(thickness);\n\n    return {\n      ...properties,\n      id,\n      __lineWidth: lineThickness,\n      __nullValues: getKeysWithNullValues(properties),\n      curve,\n    };\n  };\n\nconst getLineFeature = (\n  path: Location[],\n  featureProperties: FeatureProperties,\n): GeoJSON.Feature => {\n  const isCurve = featureProperties.curve === 'smooth';\n\n  if (isCurve) {\n    return getArcLineFeature(path, featureProperties);\n  }\n\n  return getStraightLineFeature(path, featureProperties);\n};\n\nconst getFeatures = <T extends Connection>(\n  data: T[],\n  thickness: number,\n  color: string | ((connection: T) => string),\n  curve?: CurvedLine,\n): GeoJSON.Feature[] => {\n  const getProperties = getFeatureProperties(thickness, curve);\n  const features: GeoJSON.Feature[] = [];\n  data.forEach((feature, index) => {\n    if (feature.path.length >= 2) {\n      const { path, ...properties } = feature;\n\n      const featureProperties = {\n        ...getProperties({ path, ...properties }, `connection-${index}`),\n        ...getConnectionColor(feature, color),\n      };\n\n      features.push(getLineFeature(path, featureProperties));\n    }\n  });\n  return features;\n};\n\nconst getConnectionColor = <T extends Connection>(\n  connection: T,\n  color: string | ((connection: T) => string),\n): Pick<FeatureProperties, '__lineColor' | '__lineHoveredColor'> => {\n  const parsedColor = defineColor(color, connection);\n\n  const canvasColor = getCanvasColor(parsedColor);\n  const hoveredColor = calculateHoveredColor(canvasColor);\n\n  return {\n    __lineColor: canvasColor,\n    __lineHoveredColor: hoveredColor,\n  };\n};\n\nexport const parseConnectionDataToGeoJSON = <T extends Connection>(\n  data: T[],\n  thickness: number,\n  color: string | ((connection: T) => string),\n  curve?: CurvedLine,\n): GeoJSON.FeatureCollection => {\n  return {\n    type: 'FeatureCollection',\n\n    features: getFeatures(data, thickness, color, curve),\n  };\n};\n"],
+  "mappings": "AAEA,SAAS,mBAAmB,sBAAsB;AAElD,SAAS,yBAAyB;AAClC,SAAS,8BAA8B;AACvC,SAAS,oBAAoB,0BAA0B;AAOvD,SAAS,6BAA6B;AACtC,SAAS,mBAAmB;AAE5B,MAAM,mBAAmB,CAAC,cAA8B;AACtD,MAAI,YAAY,oBAAoB;AAClC,WAAO;AAAA,EACT;AAEA,MAAI,YAAY,oBAAoB;AAClC,WAAO;AAAA,EACT;AAEA,SAAO;AACT;AAEA,MAAM,wBAAwB,CAAC,QAC7B,OAAO,KAAK,GAAG,EAAE,OAAO,CAAC,QAAQ,IAAI,GAAG,MAAM,IAAI;AAEpD,MAAM,uBACJ,CAAC,WAAmB,UACpB,CACE,YACA,OACkE;AAClE,QAAM,gBAAgB,iBAAiB,SAAS;AAEhD,SAAO;AAAA,IACL,GAAG;AAAA,IACH;AAAA,IACA,aAAa;AAAA,IACb,cAAc,sBAAsB,UAAU;AAAA,IAC9C;AAAA,EACF;AACF;AAEF,MAAM,iBAAiB,CACrB,MACA,sBACoB;AACpB,QAAM,UAAU,kBAAkB,UAAU;AAE5C,MAAI,SAAS;AACX,WAAO,kBAAkB,MAAM,iBAAiB;AAAA,EAClD;AAEA,SAAO,uBAAuB,MAAM,iBAAiB;AACvD;AAEA,MAAM,cAAc,CAClB,MACA,WACA,OACA,UACsB;AACtB,QAAM,gBAAgB,qBAAqB,WAAW,KAAK;AAC3D,QAAM,WAA8B,CAAC;AACrC,OAAK,QAAQ,CAAC,SAAS,UAAU;AAC/B,QAAI,QAAQ,KAAK,UAAU,GAAG;AAC5B,YAAM,EAAE,MAAM,GAAG,WAAW,IAAI;AAEhC,YAAM,oBAAoB;AAAA,QACxB,GAAG,cAAc,EAAE,MAAM,GAAG,WAAW,GAAG,cAAc,KAAK,EAAE;AAAA,QAC/D,GAAG,mBAAmB,SAAS,KAAK;AAAA,MACtC;AAEA,eAAS,KAAK,eAAe,MAAM,iBAAiB,CAAC;AAAA,IACvD;AAAA,EACF,CAAC;AACD,SAAO;AACT;AAEA,MAAM,qBAAqB,CACzB,YACA,UACkE;AAClE,QAAM,cAAc,YAAY,OAAO,UAAU;AAEjD,QAAM,cAAc,eAAe,WAAW;AAC9C,QAAM,eAAe,sBAAsB,WAAW;AAEtD,SAAO;AAAA,IACL,aAAa;AAAA,IACb,oBAAoB;AAAA,EACtB;AACF;AAEO,MAAM,+BAA+B,CAC1C,MACA,WACA,OACA,UAC8B;AAC9B,SAAO;AAAA,IACL,MAAM;AAAA,IAEN,UAAU,YAAY,MAAM,WAAW,OAAO,KAAK;AAAA,EACrD;AACF;",
   "names": []
 }

package/esm/map/components/ConnectionLayer/utils/restore-null-props.js

@@ -0,0 +1,9 @@
+import { merge } from "lodash-es";
+const restoreNullProps = (data) => data?.map(({ __nullValues, ...rest }) => {
+  const nullProps = __nullValues?.map((prop) => ({ [prop]: null }));
+  return merge(rest, ...nullProps);
+});
+export {
+  restoreNullProps
+};
+//# sourceMappingURL=restore-null-props.js.map

package/esm/map/components/ConnectionLayer/utils/restore-null-props.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../../../src/map/components/ConnectionLayer/utils/restore-null-props.ts"],
+  "sourcesContent": ["import { merge } from 'lodash-es';\n\nimport { ConnectionTooltipStatePayload } from '../ConnectionLayerTooltip.js';\n\nexport const restoreNullProps = (\n  data: ConnectionTooltipStatePayload[] | undefined,\n): Omit<ConnectionTooltipStatePayload, '__nullValues'>[] | undefined =>\n  data?.map(({ __nullValues, ...rest }) => {\n    const nullProps = __nullValues?.map((prop) => ({ [prop]: null }));\n    return merge(rest, ...nullProps);\n  });\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAIf,MAAM,mBAAmB,CAC9B,SAEA,MAAM,IAAI,CAAC,EAAE,cAAc,GAAG,KAAK,MAAM;AACvC,QAAM,YAAY,cAAc,IAAI,CAAC,UAAU,EAAE,CAAC,IAAI,GAAG,KAAK,EAAE;AAChE,SAAO,MAAM,MAAM,GAAG,SAAS;AACjC,CAAC;",
+  "names": []
+}

package/map/components/ConnectionLayer/ConnectionLayerTooltip.d.ts

@@ -1,4 +1,11 @@
+import type { Location } from '../../types/location.js';
 import type { ConnectionLayerTooltipHandler } from '../../types/tooltip.js';
+export type ConnectionTooltipStatePayload = {
+    path: Location[];
+    __lineColor: string;
+    __lineWidth: number;
+    __nullValues: string[];
+};
 export interface ConnectionLayerTooltipProps {
     layerId: string;
     tooltipTemplate?: ConnectionLayerTooltipHandler;

package/map/components/ConnectionLayer/ConnectionLayerTooltip.js

@@ -24,6 +24,7 @@ module.exports = __toCommonJS(ConnectionLayerTooltip_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_charts = require("@dynatrace/strato-components-preview/charts");
+var import_restore_null_props = require("./utils/restore-null-props.js");
 var import_selectors = require("../../store/selectors.js");
 const ConnectionLayerTooltip = (props) => {
   const { layerId, tooltipTemplate } = props;
@@ -33,8 +34,15 @@ const ConnectionLayerTooltip = (props) => {
     updateSelectedItem,
     onLeave
   } = (0, import_charts._useChartActionsMenu)();
-  const { hoveredLayerId, data, position, visible, enabled } = (0, import_selectors.useMapTooltipState)();
+  const {
+    hoveredLayerId,
+    position,
+    data: dataWithoutNullProps,
+    visible,
+    enabled
+  } = (0, import_selectors.useMapTooltipState)();
   const pinned = (0, import_selectors.useMapTooltipPinnedState)();
+  const data = (0, import_restore_null_props.restoreNullProps)(dataWithoutNullProps);
   const connectionData = (0, import_react.useRef)(
     null
   );

package/map/components/ConnectionLayer/utils/parse-connection-data-to-geo-json.js

@@ -36,12 +36,14 @@ const getLineThickness = (thickness) => {
   }
   return thickness;
 };
+const getKeysWithNullValues = (obj) => Object.keys(obj).filter((key) => obj[key] === null);
 const getFeatureProperties = (thickness, curve) => (properties, id) => {
   const lineThickness = getLineThickness(thickness);
   return {
     ...properties,
     id,
     __lineWidth: lineThickness,
+    __nullValues: getKeysWithNullValues(properties),
     curve
   };
 };

package/map/components/ConnectionLayer/utils/restore-null-props.d.ts

@@ -0,0 +1,2 @@
+import { ConnectionTooltipStatePayload } from '../ConnectionLayerTooltip.js';
+export declare const restoreNullProps: (data: ConnectionTooltipStatePayload[] | undefined) => Omit<ConnectionTooltipStatePayload, "__nullValues">[] | undefined;

package/map/components/ConnectionLayer/utils/restore-null-props.js

@@ -0,0 +1,28 @@
+"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 restore_null_props_exports = {};
+__export(restore_null_props_exports, {
+  restoreNullProps: () => restoreNullProps
+});
+module.exports = __toCommonJS(restore_null_props_exports);
+var import_lodash_es = require("lodash");
+const restoreNullProps = (data) => data?.map(({ __nullValues, ...rest }) => {
+  const nullProps = __nullValues?.map((prop) => ({ [prop]: null }));
+  return (0, import_lodash_es.merge)(rest, ...nullProps);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dynatrace/strato-geo",
-  "version": "2.6.2",
+  "version": "2.8.2",
   "private": false,
   "license": "Apache-2.0",
   "keywords": [
@@ -53,15 +53,15 @@
   "peerDependencies": {
     "@dynatrace-sdk/client-classic-environment-v2": "^3.7.3",
     "@dynatrace-sdk/client-platform-management-service": "^1.7.0",
-    "@dynatrace-sdk/units": "^1.0.2",
+    "@dynatrace-sdk/units": "^1.3.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-intl": "^6.0.8 || ^7.0.0",
     "react-is": "^18.0.0",
-    "@dynatrace/strato-components": "^1.11.0",
-    "@dynatrace/strato-design-tokens": "^1.1.3",
-    "@dynatrace/strato-components-preview": "^2.6.2",
-    "@dynatrace/strato-icons": "^1.8.0"
+    "@dynatrace/strato-components-preview": "^2.8.2",
+    "@dynatrace/strato-components": "^1.12.0",
+    "@dynatrace/strato-design-tokens": "^1.1.4",
+    "@dynatrace/strato-icons": "^1.9.0"
   },
   "sideEffects": [
     "./map/styles/react-mapgl-styles.css",