@splunk/visualizations 28.4.0 → 28.5.0

package/NetworkGraph.js

@@ -1673,7 +1673,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.4.0 - 002bd482f"
+  "data-splunk-visualization-version": "28.5.0 - b192418b7"
 })`
     position: relative;
     width: 100%;
@@ -1784,7 +1784,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.4.0 - 002bd482f",
+        "data-splunk-visualization-version": "28.5.0 - b192418b7",
         width,
         height,
         backgroundColor
@@ -2480,25 +2480,27 @@ var parseAxisValue = (val) => {
   const num = typeof val === "number" ? val : Number.parseFloat(val);
   return Number.isNaN(num) ? void 0 : num;
 };
-var SideLegendWidth = 75;
-var SeriesCompareLegendWidth = 200;
+var parseXAxisLineVisibility = (visibility) => {
+  if (visibility === "hide") return false;
+  if (visibility === "show") return true;
+  return void 0;
+};
 var getLegend = (props) => {
   const legendPlacement = props == null ? void 0 : props.legendDisplay;
-  const { isSeriesCompare } = props;
+  const { isSeriesCompare, legendTruncation } = props;
   const commonLegendProps = {
     center: true,
     fontSize: 12,
     largerTiles: true,
-    hideSeriesValue: !isSeriesCompare
+    hideSeriesValue: !isSeriesCompare,
     // Show values if in seriesCompare mode
+    legendTruncation
   };
   switch (legendPlacement) {
     case "off":
       return false;
     case "left":
-      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({
-        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
-      }, commonLegendProps));
+      return (0, visualization_canvas_exports.LeftLegendFactory)(__spreadValues({}, commonLegendProps));
     case "bottom":
       return (0, visualization_canvas_exports.BottomLegendFactory)(__spreadValues({
         wrap: true
@@ -2508,9 +2510,7 @@ var getLegend = (props) => {
         wrap: true
       }, commonLegendProps));
     default:
-      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({
-        width: isSeriesCompare ? SeriesCompareLegendWidth : SideLegendWidth
-      }, commonLegendProps));
+      return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({}, commonLegendProps));
   }
 };
 var getComputedAxisTitles = (inputAxisTitle, fields, axisTitleVisibility) => {
@@ -2571,9 +2571,7 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibilit
   if (yAxisAbbreviation !== "none") {
     yConfig.y.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1);
   }
-  if (yAxisAbbreviation === "none") {
-    yConfig.y.width = 55;
-  } else {
+  if (yAxisAbbreviation !== "none") {
     yConfig.y.width = label && label.length > 0 ? 30 : 10;
   }
   if (yAxisLabelVisibility === "hide") {
@@ -2596,6 +2594,7 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   y2Config.y2.type = scaleType;
   if (axisAbbreviation !== "none") {
     y2Config.y2.tickFmt = (v) => (0, visualization_canvas_exports.shortenNumber)(v, 1, roundAxisLabelsToInteger);
+    y2Config.y2.width = label && label.length > 0 ? 50 : 10;
   } else if (roundAxisLabelsToInteger) {
     y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
   }
@@ -2611,7 +2610,7 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay, lineDashStyle, lineDashStylesByField, stepPosition, stepPositionsByField) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -2638,6 +2637,8 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
       );
       if (shouldAssignToY2) {
         seriesConfig[field].overrides.scale = "y2";
+      } else {
+        seriesConfig[field].overrides.scale = "y";
       }
     }
     if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
@@ -2650,6 +2651,11 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
     if (fieldDashStyle) {
       seriesConfig[field].lineDashStyle = fieldDashStyle;
     }
+    const hasFieldStepPosition = Object.hasOwn(stepPositionsByField || {}, field);
+    const fieldStepPosition = hasFieldStepPosition ? stepPositionsByField == null ? void 0 : stepPositionsByField[field] : stepPosition;
+    if (fieldStepPosition && fieldStepPosition !== "off") {
+      seriesConfig[field].stepPosition = fieldStepPosition;
+    }
     if (replaceNullsWithZero !== void 0) {
       seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
     }
@@ -2888,6 +2894,9 @@ var TimeSeriesChartWrapper = (props) => {
     backgroundColor,
     defaultFontColor,
     additionalTooltipValues,
+    xAxisLineVisibility: xAxisLineVisibility,
+    yAxisLineVisibility,
+    y2AxisLineVisibility,
     showYAxisWithZero: showYAxisWithZeroFromProps,
     showY2AxisWithZero: showY2AxisWithZeroFromProps
   } = _a, otherOptions = __objRest(_a, [
@@ -2911,6 +2920,10 @@ var TimeSeriesChartWrapper = (props) => {
     "backgroundColor",
     "defaultFontColor",
     "additionalTooltipValues",
+    // Extract axis line visibility options from props
+    "xAxisLineVisibility",
+    "yAxisLineVisibility",
+    "y2AxisLineVisibility",
     // Extract showYAxisWithZero directly from props for accelerated render mode
     "showYAxisWithZero",
     "showY2AxisWithZero"
@@ -2923,6 +2936,7 @@ var TimeSeriesChartWrapper = (props) => {
     fieldColors,
     legendLabels: legendLabelsStr,
     legendMode,
+    legendTruncation,
     "axisTitleX.text": xAxisTitleText,
     "axisTitleY.text": yAxisTitleText,
     "axisTitleY2.text": y2AxisTitleText,
@@ -2931,6 +2945,7 @@ var TimeSeriesChartWrapper = (props) => {
     "axisTitleY2.visibility": y2AxisTitleVisibility,
     "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
     "axisLabelsX.majorLabelStyle.rotation": xAxisLabelRotation,
+    "axisLabelsX.maxLabelParts": xAxisMaxLabelParts,
     "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
     "axisLabelsY.majorUnit": yAxisMajorUnitFromSimpleXML,
     "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
@@ -2948,6 +2963,8 @@ var TimeSeriesChartWrapper = (props) => {
     lineWidth,
     lineDashStyle,
     fieldDashStyles: lineDashStylesByFieldStr,
+    stepPosition,
+    fieldStepPositions: stepPositionsByFieldStr,
     yAxisMin: yAxisMinRaw,
     yAxisMax: yAxisMaxRaw,
     y2AxisMin: y2AxisMinRaw,
@@ -2958,6 +2975,8 @@ var TimeSeriesChartWrapper = (props) => {
     showYMinorGridLines,
     showY2MinorGridLines,
     showLineSmoothing,
+    xAxisMajorTickVisibility,
+    xAxisMajorTickSize,
     yAxisMajorTickVisibility,
     y2AxisMajorTickVisibility,
     yAxisMajorTickSize,
@@ -2974,10 +2993,14 @@ var TimeSeriesChartWrapper = (props) => {
   const dataValuesDisplay = showDataLabels === "none" ? "off" : showDataLabels;
   const showYAxisWithZero = showYAxisWithZeroFromProps != null ? showYAxisWithZeroFromProps : showYAxisWithZeroFromOptions;
   const showY2AxisWithZero = showY2AxisWithZeroFromProps != null ? showY2AxisWithZeroFromProps : showY2AxisWithZeroFromOptions;
+  const showXMajorTicks = xAxisMajorTickVisibility !== "hide";
   const showYMajorTicks = yAxisMajorTickVisibility === "show";
   const showY2MajorTicks = y2AxisMajorTickVisibility === "show";
   const showYMinorTicks = yAxisMinorTickVisibility === "show";
   const showY2MinorTicks = y2AxisMinorTickVisibility === "show";
+  const showXAxisLine = parseXAxisLineVisibility(xAxisLineVisibility);
+  const showYAxisLine = yAxisLineVisibility === "show";
+  const showY2AxisLine = y2AxisLineVisibility === "show";
   const yAxisMin = parseAxisValue(yAxisMinRaw);
   const yAxisMax = parseAxisValue(yAxisMaxRaw);
   const y2AxisMin = parseAxisValue(y2AxisMinRaw);
@@ -2992,13 +3015,15 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
-  const yAxisMajorTickSizeNum = yAxisMajorTickSize ? Number(yAxisMajorTickSize) : void 0;
-  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize ? Number(y2AxisMajorTickSize) : void 0;
-  const yAxisMinorTickSizeNum = yAxisMinorTickSize ? Number(yAxisMinorTickSize) : void 0;
-  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize ? Number(y2AxisMinorTickSize) : void 0;
+  const xAxisMajorTickSizeNum = xAxisMajorTickSize != null ? Number(xAxisMajorTickSize) : void 0;
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize != null ? Number(yAxisMajorTickSize) : void 0;
+  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize != null ? Number(y2AxisMajorTickSize) : void 0;
+  const yAxisMinorTickSizeNum = yAxisMinorTickSize != null ? Number(yAxisMinorTickSize) : void 0;
+  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize != null ? Number(y2AxisMinorTickSize) : void 0;
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
   const lineDashStylesByField = lineDashStylesByFieldStr ? JSON.parse(lineDashStylesByFieldStr) : void 0;
+  const stepPositionsByField = stepPositionsByFieldStr ? JSON.parse(stepPositionsByFieldStr) : void 0;
   const legendLabels = parseArrayOption(legendLabelsStr);
   const bgColor = backgroundColor || bgColorFromOptions;
   const [containerWidth, setContainerWidth] = react_exports.useState(Number(props.width));
@@ -3086,7 +3111,9 @@ var TimeSeriesChartWrapper = (props) => {
       nullValueMode,
       markerDisplay,
       lineDashStyle,
-      lineDashStylesByField
+      lineDashStylesByField,
+      stepPosition,
+      stepPositionsByField
     ),
     [
       yFields,
@@ -3097,7 +3124,9 @@ var TimeSeriesChartWrapper = (props) => {
       nullValueMode,
       markerDisplay,
       lineDashStyle,
-      lineDashStylesByField
+      lineDashStylesByField,
+      stepPosition,
+      stepPositionsByField
     ]
   );
   const chartingEventAnnotations = (0, react_exports.useMemo)(
@@ -3112,9 +3141,14 @@ var TimeSeriesChartWrapper = (props) => {
     () => __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig),
     [xScaleConfig, yScaleConfig, y2ScaleConfig]
   );
+  const isSeriesCompare = legendMode === "seriesCompare";
   const legend = (0, react_exports.useMemo)(
-    () => getLegend({ legendDisplay, isSeriesCompare: legendMode === "seriesCompare" }),
-    [legendDisplay, legendMode]
+    () => getLegend({
+      legendDisplay: isSeriesCompare && legendDisplay !== "off" ? "right" : legendDisplay,
+      isSeriesCompare,
+      legendTruncation
+    }),
+    [legendDisplay, isSeriesCompare, legendTruncation]
   );
   const handleChartClick = react_exports.useCallback(
     (event) => {
@@ -3219,6 +3253,7 @@ var TimeSeriesChartWrapper = (props) => {
         seriesConfig: seriesOverrides,
         legend,
         legendLabels,
+        legendTruncation,
         isSeriesCompare: legendMode === "seriesCompare",
         maxSeriesFocus: legendMode === "seriesCompare" ? 0 : void 0,
         scaleConfig,
@@ -3240,6 +3275,8 @@ var TimeSeriesChartWrapper = (props) => {
         showY2MinorGridLines,
         showLineSmoothing,
         dataValuesDisplay,
+        showXMajorTicks,
+        xAxisMajorTickSize: xAxisMajorTickSizeNum,
         showYMajorTicks,
         showY2MajorTicks,
         yAxisMajorTickSize: yAxisMajorTickSizeNum,
@@ -3251,7 +3288,11 @@ var TimeSeriesChartWrapper = (props) => {
         yAxisMinorTickSize: yAxisMinorTickSizeNum,
         y2AxisMinorTickSize: y2AxisMinorTickSizeNum,
         showYAxisWithZero,
-        showY2AxisWithZero
+        showY2AxisWithZero,
+        showXAxisLine,
+        showYAxisLine,
+        showY2AxisLine,
+        xAxisMaxLabelParts
       }
     ));
   }, [
@@ -3266,6 +3307,7 @@ var TimeSeriesChartWrapper = (props) => {
     seriesOverrides,
     legend,
     legendLabels,
+    legendTruncation,
     scaleConfig,
     onClick,
     handleChartClick,
@@ -3284,6 +3326,8 @@ var TimeSeriesChartWrapper = (props) => {
     showY2MinorGridLines,
     showLineSmoothing,
     dataValuesDisplay,
+    showXMajorTicks,
+    xAxisMajorTickSizeNum,
     showYMajorTicks,
     showY2MajorTicks,
     yAxisMajorTickSizeNum,
@@ -3296,7 +3340,11 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMinorTickSizeNum,
     showYAxisWithZero,
     showY2AxisWithZero,
-    legendMode
+    showXAxisLine,
+    showYAxisLine,
+    showY2AxisLine,
+    legendMode,
+    xAxisMaxLabelParts
   ]);
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor: bgColor }, memoizedChart);
@@ -4246,7 +4294,6 @@ var getNodeMapWithPositions = ({
   nodeSize,
   layout,
   layoutOptions,
-  nodeDragPositions,
   resultLimit
 }) => {
   const nodeMapStruct = getUniqueNodesStruct(
@@ -4281,9 +4328,7 @@ var getNodeMapWithPositions = ({
     updatedLayoutOptions = __spreadProps(__spreadValues({}, updatedLayoutOptions), { d3NodeList, d3LinkList });
   }
   const positionMap = getLayout(layout, nodeMapStruct, updatedLayoutOptions);
-  const nodeMapStructWithPositions = updatePositions(nodeMapStruct, positionMap);
-  const nodeMapStructWithDragPositions = updatePositions(nodeMapStructWithPositions, nodeDragPositions);
-  return nodeMapStructWithDragPositions;
+  return updatePositions(nodeMapStruct, positionMap);
 };
 var fitCharacters = (context, maxWidth, prefix, word) => {
   const space = prefix ? " " : "";
@@ -4354,11 +4399,14 @@ var truncateTextToMaxLines = (text = "", font = `12px ${VIZ_FONT_FAMILY}`, maxWi
   return outputLines;
 };
 var getNodeBounds = (node) => {
-  var _a;
+  var _a, _b;
   if (!node) return void 0;
-  const nodeLabelHeightWithMargin = RECT_TOP_MARGIN + RECT_VERTICAL_PADDING * 2 + LABEL_FONT_SIZE;
-  const nodeLabelWidth = computeTextWidth(node.label, `14px ${VIZ_FONT_FAMILY}`) + RECT_HORIZONTAL_PADDING * 2;
-  const nodeDiameter = (_a = node.size) != null ? _a : DEFAULT_NODE_RADIUS * 2;
+  const truncatedText = truncateTextToMaxLines((_a = node.label) != null ? _a : "", FONT, MAX_TEXT_WIDTH, 2);
+  const textWidth = truncatedText.length ? Math.max(...truncatedText.map((line) => computeTextWidth(line, FONT))) : 0;
+  const labelHeight = truncatedText.length > 0 ? RECT_VERTICAL_PADDING * 2 + LINE_HEIGHT * truncatedText.length : 0;
+  const nodeLabelHeightWithMargin = RECT_TOP_MARGIN + labelHeight;
+  const nodeLabelWidth = textWidth + RECT_HORIZONTAL_PADDING * 2;
+  const nodeDiameter = (_b = node.size) != null ? _b : DEFAULT_NODE_RADIUS * 2;
   const nodeRadius = nodeDiameter / 2;
   return {
     x: node.x - Math.max(nodeRadius, nodeLabelWidth / 2),
@@ -4368,10 +4416,10 @@ var getNodeBounds = (node) => {
   };
 };
 var getFullVizBoundsWithPadding = (nodeMap, padding) => {
-  let minXNode;
-  let minYNode;
-  let maxXNode;
-  let maxYNode;
+  let minX = Infinity;
+  let minY = Infinity;
+  let maxX = -Infinity;
+  let maxY = -Infinity;
   if (Object.keys(nodeMap).length === 0) {
     return {
       x: 0,
@@ -4381,18 +4429,20 @@ var getFullVizBoundsWithPadding = (nodeMap, padding) => {
     };
   }
   Object.values(nodeMap).forEach((node) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
-    if (!getNodeBounds(node)) return;
-    if (getNodeBounds(node).x < ((_b = (_a = getNodeBounds(minXNode)) == null ? void 0 : _a.x) != null ? _b : Infinity)) minXNode = node;
-    if (getNodeBounds(node).y < ((_d = (_c = getNodeBounds(minYNode)) == null ? void 0 : _c.y) != null ? _d : Infinity)) minYNode = node;
-    if (getNodeBounds(node).x2 > ((_f = (_e = getNodeBounds(maxXNode)) == null ? void 0 : _e.x2) != null ? _f : -Infinity)) maxXNode = node;
-    if (getNodeBounds(node).y2 > ((_h = (_g = getNodeBounds(maxYNode)) == null ? void 0 : _g.y2) != null ? _h : -Infinity)) maxYNode = node;
+    const bounds = getNodeBounds(node);
+    if (!bounds) return;
+    if (!Number.isFinite(bounds.x) || !Number.isFinite(bounds.y)) return;
+    if (!Number.isFinite(bounds.x2) || !Number.isFinite(bounds.y2)) return;
+    minX = Math.min(minX, bounds.x);
+    minY = Math.min(minY, bounds.y);
+    maxX = Math.max(maxX, bounds.x2);
+    maxY = Math.max(maxY, bounds.y2);
   });
   return {
-    x: getNodeBounds(minXNode) ? getNodeBounds(minXNode).x - padding : 0,
-    y: getNodeBounds(minYNode) ? getNodeBounds(minYNode).y - padding : 0,
-    width: getNodeBounds(maxXNode) ? getNodeBounds(maxXNode).x2 - getNodeBounds(minXNode).x + padding * 2 : 0,
-    height: getNodeBounds(maxYNode) ? getNodeBounds(maxYNode).y2 - getNodeBounds(minYNode).y + padding * 2 : 0
+    x: Number.isFinite(minX) ? minX - padding : 0,
+    y: Number.isFinite(minY) ? minY - padding : 0,
+    width: Number.isFinite(maxX) && Number.isFinite(minX) ? maxX - minX + padding * 2 : 0,
+    height: Number.isFinite(maxY) && Number.isFinite(minY) ? maxY - minY + padding * 2 : 0
   };
 };
 var getAutoZoomAndPan = (nodeMap, containerWidth, containerHeight) => {
@@ -4695,6 +4745,131 @@ var getEdgePath = ({
     `;
 };
 
+// src/NetworkGraph/PureNetworkGraph/utils/dragUtils.ts
+init_define_global();
+var isValidZoomAndPanState = (zoomAndPanState) => Number.isFinite(zoomAndPanState.zoom) && zoomAndPanState.zoom > 0 && Number.isFinite(zoomAndPanState.x) && Number.isFinite(zoomAndPanState.y);
+var getAdjustedDragPosition = (pendingDragPosition, zoomAndPanState) => {
+  if (!pendingDragPosition) {
+    return null;
+  }
+  if (!isValidZoomAndPanState(zoomAndPanState)) {
+    return pendingDragPosition;
+  }
+  return {
+    x: (pendingDragPosition.x - zoomAndPanState.x) / zoomAndPanState.zoom,
+    y: (pendingDragPosition.y - zoomAndPanState.y) / zoomAndPanState.zoom
+  };
+};
+var getPointerInGraphSpaceFromMouseEvent = (event, svgElement, zoomAndPanState) => {
+  var _a, _b, _c, _d, _e, _f;
+  if (!svgElement || !Number.isFinite(event == null ? void 0 : event.clientX) || !Number.isFinite(event == null ? void 0 : event.clientY)) {
+    return null;
+  }
+  const rect = svgElement.getBoundingClientRect();
+  if (rect.width <= 0 || rect.height <= 0) {
+    return null;
+  }
+  const svgWidth = (_c = (_b = (_a = svgElement.width) == null ? void 0 : _a.baseVal) == null ? void 0 : _b.value) != null ? _c : rect.width;
+  const svgHeight = (_f = (_e = (_d = svgElement.height) == null ? void 0 : _d.baseVal) == null ? void 0 : _e.value) != null ? _f : rect.height;
+  const scaleX = svgWidth / rect.width;
+  const scaleY = svgHeight / rect.height;
+  const pointerInSvgSpace = {
+    x: (event.clientX - rect.left) * scaleX,
+    y: (event.clientY - rect.top) * scaleY
+  };
+  return getAdjustedDragPosition(pointerInSvgSpace, zoomAndPanState);
+};
+var getInitialDragOffset = (pointerInGraphSpace, nodePosition) => {
+  if (!pointerInGraphSpace || !nodePosition || !Number.isFinite(pointerInGraphSpace.x) || !Number.isFinite(pointerInGraphSpace.y) || !Number.isFinite(nodePosition.x) || !Number.isFinite(nodePosition.y)) {
+    return null;
+  }
+  return {
+    x: pointerInGraphSpace.x - nodePosition.x,
+    y: pointerInGraphSpace.y - nodePosition.y
+  };
+};
+var getDraggedNodePositionWithOffset = ({
+  pendingDragPosition,
+  zoomAndPanState,
+  currentNodePosition,
+  existingDragOffset
+}) => {
+  var _a, _b;
+  const adjustedPendingPosition = getAdjustedDragPosition(pendingDragPosition, zoomAndPanState);
+  if (!adjustedPendingPosition) {
+    return null;
+  }
+  const resolvedDragOffset = existingDragOffset != null ? existingDragOffset : getInitialDragOffset(adjustedPendingPosition, currentNodePosition);
+  return {
+    adjustedPositionWithOffset: {
+      x: adjustedPendingPosition.x - ((_a = resolvedDragOffset == null ? void 0 : resolvedDragOffset.x) != null ? _a : 0),
+      y: adjustedPendingPosition.y - ((_b = resolvedDragOffset == null ? void 0 : resolvedDragOffset.y) != null ? _b : 0)
+    },
+    resolvedDragOffset
+  };
+};
+var updateDraggedNodePosition = (previousNodeMap, nodeId, nextPosition) => {
+  if (!nodeId || !nextPosition) {
+    return previousNodeMap;
+  }
+  const currentNode = previousNodeMap[nodeId];
+  if (!currentNode) {
+    return previousNodeMap;
+  }
+  if (currentNode.x === nextPosition.x && currentNode.y === nextPosition.y) {
+    return previousNodeMap;
+  }
+  return __spreadProps(__spreadValues({}, previousNodeMap), {
+    [nodeId]: __spreadProps(__spreadValues({}, currentNode), {
+      x: nextPosition.x,
+      y: nextPosition.y
+    })
+  });
+};
+var patchNodeMapWithDragPositionChanges = (previousNodeMap, baseNodeMap, previousDragPositions, nextDragPositions) => {
+  const changedNodeIds = /* @__PURE__ */ new Set([
+    ...Object.keys(previousDragPositions || {}),
+    ...Object.keys(nextDragPositions || {})
+  ]);
+  let updatedNodeMap = previousNodeMap;
+  changedNodeIds.forEach((nodeId) => {
+    const currentNode = previousNodeMap[nodeId];
+    const baseNode = baseNodeMap[nodeId];
+    if (!currentNode || !baseNode) {
+      return;
+    }
+    const nextPosition = nextDragPositions == null ? void 0 : nextDragPositions[nodeId];
+    const resolvedPosition = nextPosition != null ? nextPosition : { x: baseNode.x, y: baseNode.y };
+    if (currentNode.x === resolvedPosition.x && currentNode.y === resolvedPosition.y) {
+      return;
+    }
+    if (updatedNodeMap === previousNodeMap) {
+      updatedNodeMap = __spreadValues({}, previousNodeMap);
+    }
+    updatedNodeMap[nodeId] = __spreadProps(__spreadValues({}, currentNode), {
+      x: resolvedPosition.x,
+      y: resolvedPosition.y
+    });
+  });
+  return updatedNodeMap;
+};
+var patchDragPositionsMap = (baseMap, previousDragPositions, nextDragPositions) => {
+  const patchedMap = __spreadValues({}, baseMap);
+  const changedNodeIds = /* @__PURE__ */ new Set([
+    ...Object.keys(previousDragPositions || {}),
+    ...Object.keys(nextDragPositions || {})
+  ]);
+  changedNodeIds.forEach((nodeId) => {
+    const nextPosition = nextDragPositions == null ? void 0 : nextDragPositions[nodeId];
+    if (nextPosition) {
+      patchedMap[nodeId] = nextPosition;
+    } else {
+      delete patchedMap[nodeId];
+    }
+  });
+  return patchedMap;
+};
+
 // src/NetworkGraph/PureNetworkGraph/components/NetworkGraphSvg.tsx
 init_define_global();
 
@@ -4909,11 +5084,23 @@ var Node = (0, react_exports.memo)(function Node2(props) {
       isMounted = false;
     };
   }, [builtInIcon]);
-  const nodeClickHandler = () => {
+  const nodeClickHandler = (0, react_exports.useCallback)(() => {
     if (handleNodeClick) {
       handleNodeClick({ id, value, index });
     }
-  };
+  }, [handleNodeClick, id, value, index]);
+  const onKeyDown = (0, react_exports.useCallback)(
+    (event) => {
+      if (event.repeat) {
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        nodeClickHandler();
+      }
+    },
+    [nodeClickHandler]
+  );
   const nodeWithPosition = (0, react_exports.useMemo)(
     () => ({ id, value, index, x, y, size: diameter }),
     [id, index, value, x, y, diameter]
@@ -4966,11 +5153,16 @@ var Node = (0, react_exports.memo)(function Node2(props) {
       id: sanitizedId,
       ref: circleRef,
       tabIndex: 0,
+      role: "button",
+      "aria-label": label || (0, i18n_exports._)("Node"),
       color,
       opacity,
       onClick: nodeClickHandler,
+      onKeyDown,
       onMouseEnter,
-      onMouseLeave
+      onMouseLeave,
+      onFocus: onMouseEnter,
+      onBlur: onMouseLeave
     }
   ), !!IconComponent && !shouldHideIcon && /* @__PURE__ */ react_exports.createElement(
     NodeIcon,
@@ -5217,7 +5409,7 @@ var NetworkGraphSvg = (0, react_exports.memo)(function NetworkGraphSvg2({
   handleNodeMouseOver,
   handleNodeMouseOut,
   highlightedNode,
-  setHighlightedNode,
+  setHighlightedNode = () => void 0,
   isDragging = false
 }) {
   var _a, _b;
@@ -5407,6 +5599,16 @@ var defaultImport116 = __toESM(require("@splunk/react-ui/Button"));
 __reExport(Button_exports, require("@splunk/react-ui/Button"));
 var Button_default = "default" in defaultImport116 ? defaultImport116.default : defaultImport116;
 
+// esm-externals:@splunk/react-ui/Tooltip
+var Tooltip_exports = {};
+__export(Tooltip_exports, {
+  default: () => Tooltip_default2
+});
+init_define_global();
+var defaultImport117 = __toESM(require("@splunk/react-ui/Tooltip"));
+__reExport(Tooltip_exports, require("@splunk/react-ui/Tooltip"));
+var Tooltip_default2 = "default" in defaultImport117 ? defaultImport117.default : defaultImport117;
+
 // src/NetworkGraph/PureNetworkGraph/components/ZoomControls.tsx
 var StyledZoomControlsContainer = styled_components_default.div`
     position: absolute;
@@ -5452,33 +5654,33 @@ var ZoomControls = (0, react_exports.memo)(function ZoomControls2(props) {
     disableZoomIn = false,
     disableZoomOut = false
   } = props;
-  return /* @__PURE__ */ react_exports.createElement(StyledZoomControlsContainer, { "data-test": "zoom-controls-container" }, !hideZoomControls && /* @__PURE__ */ react_exports.createElement(StyledBaseContainer, { "data-test": "zoom-buttons-container" }, /* @__PURE__ */ react_exports.createElement(
+  return /* @__PURE__ */ react_exports.createElement(StyledZoomControlsContainer, { "data-test": "zoom-controls-container" }, !hideZoomControls && /* @__PURE__ */ react_exports.createElement(StyledBaseContainer, { "data-test": "zoom-buttons-container" }, /* @__PURE__ */ react_exports.createElement(Tooltip_default2, { contentRelationship: "label", content: (0, i18n_exports._)("Zoom in") }, /* @__PURE__ */ react_exports.createElement(
     StyledZoomInButton,
     {
       icon: /* @__PURE__ */ react_exports.createElement(Plus_default, null),
       appearance: "subtle",
       onClick: handleZoomIn,
-      "aria-label": (0, i18n_exports._)("Zoom In"),
-      disabled: disableZoomIn
+      disabled: disableZoomIn,
+      "data-test": "zoom-in-button"
     }
-  ), /* @__PURE__ */ react_exports.createElement(
+  )), /* @__PURE__ */ react_exports.createElement(Tooltip_default2, { contentRelationship: "label", content: (0, i18n_exports._)("Zoom out") }, /* @__PURE__ */ react_exports.createElement(
     StyledZoomOutButton,
     {
       icon: /* @__PURE__ */ react_exports.createElement(Minus_default, null),
       appearance: "subtle",
       onClick: handleZoomOut,
-      "aria-label": (0, i18n_exports._)("Zoom Out"),
-      disabled: disableZoomOut
+      disabled: disableZoomOut,
+      "data-test": "zoom-out-button"
     }
-  )), !hideReset && /* @__PURE__ */ react_exports.createElement(StyledResetContainer, { moveToTop: hideZoomControls, "data-test": "reset-button-container" }, /* @__PURE__ */ react_exports.createElement(
+  ))), !hideReset && /* @__PURE__ */ react_exports.createElement(StyledResetContainer, { moveToTop: hideZoomControls, "data-test": "reset-button-container" }, /* @__PURE__ */ react_exports.createElement(Tooltip_default2, { contentRelationship: "label", content: (0, i18n_exports._)("Reset zoom") }, /* @__PURE__ */ react_exports.createElement(
     StyledButton,
     {
       icon: /* @__PURE__ */ react_exports.createElement(SquareAndCorners_default, null),
       appearance: "subtle",
       onClick: handleReset,
-      "aria-label": (0, i18n_exports._)("Reset Zoom")
+      "data-test": "reset-button"
     }
-  )));
+  ))));
 });
 var ZoomControls_default = ZoomControls;
 
@@ -5555,7 +5757,16 @@ var PureNetworkGraph = ({
     height: typeof height === "number" ? height : DEFAULT_CHART_HEIGHT
   });
   const [isDragging, setIsDragging] = (0, react_exports.useState)({ dragStarted: false, id: null });
-  const [parentZoomAndPanState, setParentZoomAndPanState] = (0, react_exports.useState)({ zoom: null, x: null, y: null });
+  const [parentZoomAndPanState, setParentZoomAndPanState] = (0, react_exports.useState)({
+    zoom: null,
+    x: null,
+    y: null
+  });
+  const frozenNodeMapForZoomRef = (0, react_exports.useRef)(null);
+  const dragOffsetRef = (0, react_exports.useRef)(null);
+  const baseNodeMapRef = (0, react_exports.useRef)(null);
+  const previousNodeDragPositionsRef = (0, react_exports.useRef)(nodeDragPositions);
+  const persistedDragPositionsRef = (0, react_exports.useRef)(__spreadValues({}, nodeDragPositions));
   const effectivePreferPorts = preferPorts != null ? preferPorts : getDefaultPreferPorts(layout, hierarchyDirection);
   (0, react_exports.useEffect)(() => {
     const updateSize = () => {
@@ -5624,7 +5835,6 @@ var PureNetworkGraph = ({
       nodeSize,
       layout,
       layoutOptions,
-      nodeDragPositions,
       resultLimit
     });
   }, [
@@ -5650,10 +5860,11 @@ var PureNetworkGraph = ({
     nodeSize,
     nodeTexts,
     nodeTypes,
-    nodeDragPositions,
     resultLimit
   ]);
-  const [nodeMapStruct, setNodeMapStruct] = (0, react_exports.useState)(nodeMapStructWithPositions);
+  const [nodeMapStruct, setNodeMapStruct] = (0, react_exports.useState)(
+    () => updatePositions(nodeMapStructWithPositions, nodeDragPositions)
+  );
   const [hideReset, setHideReset] = (0, react_exports.useState)(true);
   const [isReadyToRender, setIsReadyToRender] = (0, react_exports.useState)(false);
   const [highlightedNode, setHighlightedNode] = (0, react_exports.useState)(null);
@@ -5661,9 +5872,10 @@ var PureNetworkGraph = ({
   const numberHeight = typeof height === "string" ? containerSize.height : height;
   const effectiveWidth = Math.max(numberWidth, 0);
   const effectiveHeight = Math.max(numberHeight, 0);
+  const nodeMapForAutoZoom = isDragging.dragStarted && frozenNodeMapForZoomRef.current ? frozenNodeMapForZoomRef.current : nodeMapStruct;
   const { autoZoomLevel, autoCenter } = (0, react_exports.useMemo)(() => {
-    return getAutoZoomAndPan(nodeMapStruct, effectiveWidth, effectiveHeight);
-  }, [nodeMapStruct, effectiveWidth, effectiveHeight]);
+    return getAutoZoomAndPan(nodeMapForAutoZoom, effectiveWidth, effectiveHeight);
+  }, [nodeMapForAutoZoom, effectiveWidth, effectiveHeight]);
   const { minZoomLevel, minZoomWidth, minZoomHeight } = (0, react_exports.useMemo)(() => {
     return calculateMinZoomBounds(autoZoomLevel, effectiveHeight, effectiveWidth);
   }, [autoZoomLevel, effectiveHeight, effectiveWidth]);
@@ -5676,8 +5888,34 @@ var PureNetworkGraph = ({
     [parentZoomAndPanState.zoom, autoZoomLevel, minZoomLevel]
   );
   (0, react_exports.useEffect)(() => {
-    setNodeMapStruct(nodeMapStructWithPositions);
-  }, [nodeMapStructWithPositions]);
+    const baseNodeMap = baseNodeMapRef.current;
+    if (!baseNodeMap) {
+      baseNodeMapRef.current = nodeMapStructWithPositions;
+      previousNodeDragPositionsRef.current = nodeDragPositions;
+      return;
+    }
+    const baseLayoutChanged = baseNodeMap !== nodeMapStructWithPositions;
+    baseNodeMapRef.current = nodeMapStructWithPositions;
+    if (baseLayoutChanged) {
+      setNodeMapStruct(updatePositions(nodeMapStructWithPositions, nodeDragPositions));
+    } else {
+      setNodeMapStruct(
+        (previousNodeMap) => patchNodeMapWithDragPositionChanges(
+          previousNodeMap,
+          baseNodeMap,
+          previousNodeDragPositionsRef.current,
+          nodeDragPositions
+        )
+      );
+    }
+    const nextPersistedDragPositions = patchDragPositionsMap(
+      persistedDragPositionsRef.current,
+      previousNodeDragPositionsRef.current,
+      nodeDragPositions
+    );
+    persistedDragPositionsRef.current = nextPersistedDragPositions;
+    previousNodeDragPositionsRef.current = nodeDragPositions;
+  }, [nodeDragPositions, nodeMapStructWithPositions]);
   const zoomFunc = (0, react_exports.useMemo)(
     () => (0, d3_zoom_exports.zoom)().on("zoom", (event) => {
       if (zoomContainerRef.current) {
@@ -5722,6 +5960,7 @@ var PureNetworkGraph = ({
   ]);
   (0, react_exports.useEffect)(() => {
     if (prevLayoutRef.current !== layout) {
+      persistedDragPositionsRef.current = {};
       onOptionsChange({
         nodeDragPositions: {}
       });
@@ -5781,23 +6020,41 @@ var PureNetworkGraph = ({
     // mousedown uses event from d3 which is typed to any
     (e) => {
       const unSanitizedId = unsanitizeSvgId(e.currentTarget.id);
+      frozenNodeMapForZoomRef.current = nodeMapStruct;
+      dragOffsetRef.current = null;
+      const draggedNode = nodeMapStruct[unSanitizedId];
+      if (draggedNode) {
+        const pointerInGraphSpace = getPointerInGraphSpaceFromMouseEvent(
+          e,
+          svgRef.current,
+          parentZoomAndPanState
+        );
+        dragOffsetRef.current = getInitialDragOffset(pointerInGraphSpace, {
+          x: draggedNode.x,
+          y: draggedNode.y
+        });
+      }
       if (e == null ? void 0 : e.preventDefault) {
         e.preventDefault();
       }
       setIsDragging({ dragStarted: true, id: unSanitizedId });
       forwardMouseDownEvent(e, containerRef.current);
     },
-    [setIsDragging]
+    [nodeMapStruct, parentZoomAndPanState, setIsDragging]
   );
   const handleMouseUp = (0, react_exports.useCallback)(() => {
-    if (nodeMapStruct[isDragging == null ? void 0 : isDragging.id]) {
+    dragOffsetRef.current = null;
+    frozenNodeMapForZoomRef.current = null;
+    if (isDragging.id && nodeMapStruct[isDragging.id]) {
+      const nextPersistedDragPositions = __spreadProps(__spreadValues({}, persistedDragPositionsRef.current), {
+        [isDragging.id]: {
+          x: nodeMapStruct[isDragging.id].x,
+          y: nodeMapStruct[isDragging.id].y
+        }
+      });
+      persistedDragPositionsRef.current = nextPersistedDragPositions;
       onOptionsChange({
-        nodeDragPositions: __spreadProps(__spreadValues({}, nodeDragPositions), {
-          [isDragging.id]: {
-            x: nodeMapStruct[isDragging.id].x,
-            y: nodeMapStruct[isDragging.id].y
-          }
-        })
+        nodeDragPositions: nextPersistedDragPositions
       });
       const metadataForNode = metadata[nodeMapVisual[isDragging.id].index] || {};
       onNodeDrag({
@@ -5813,27 +6070,30 @@ var PureNetworkGraph = ({
       });
     }
     setIsDragging({ dragStarted: false, id: null });
-  }, [
-    nodeMapStruct,
-    isDragging.id,
-    onOptionsChange,
-    nodeDragPositions,
-    metadata,
-    nodeMapVisual,
-    onNodeDrag
-  ]);
+  }, [nodeMapStruct, isDragging.id, onOptionsChange, metadata, nodeMapVisual, onNodeDrag]);
   const handleDrag = (0, react_exports.useCallback)(
     (x, y) => {
-      const isZoomValid = parentZoomAndPanState && Number.isFinite(parentZoomAndPanState.zoom) && parentZoomAndPanState.zoom > 0 && Number.isFinite(parentZoomAndPanState.x) && Number.isFinite(parentZoomAndPanState.y);
-      if (isDragging.dragStarted) {
-        setNodeMapStruct(__spreadProps(__spreadValues({}, nodeMapStruct), {
-          // position needs to be adjusted by the current zoom and pan state
-          [isDragging.id]: __spreadProps(__spreadValues({}, nodeMapStruct[isDragging.id]), {
-            x: isZoomValid ? (x - parentZoomAndPanState.x) / parentZoomAndPanState.zoom : x,
-            y: isZoomValid ? (y - parentZoomAndPanState.y) / parentZoomAndPanState.zoom : y
-          })
-        }));
+      if (!isDragging.dragStarted) {
+        return;
+      }
+      const currentNode = nodeMapStruct[isDragging.id];
+      const dragPositionResult = getDraggedNodePositionWithOffset({
+        pendingDragPosition: { x, y },
+        zoomAndPanState: parentZoomAndPanState,
+        currentNodePosition: currentNode ? { x: currentNode.x, y: currentNode.y } : null,
+        existingDragOffset: dragOffsetRef.current
+      });
+      if (!dragPositionResult) {
+        return;
       }
+      dragOffsetRef.current = dragPositionResult.resolvedDragOffset;
+      setNodeMapStruct(
+        (prevNodeMapStruct) => updateDraggedNodePosition(
+          prevNodeMapStruct,
+          isDragging.id,
+          dragPositionResult.adjustedPositionWithOffset
+        )
+      );
     },
     [isDragging, nodeMapStruct, parentZoomAndPanState]
   );
@@ -5959,9 +6219,9 @@ __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
 init_define_global();
-var defaultImport117 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport118 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport117 ? defaultImport117.default : defaultImport117;
+var PresetPalettes_default = "default" in defaultImport118 ? defaultImport118.default : defaultImport118;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
@@ -5969,9 +6229,9 @@ __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
 init_define_global();
-var defaultImport118 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport119 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport118 ? defaultImport118.default : defaultImport118;
+var visualization_icons_default = "default" in defaultImport119 ? defaultImport119.default : defaultImport119;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
@@ -5979,9 +6239,9 @@ __export(placeholders_exports, {
   default: () => placeholders_default
 });
 init_define_global();
-var defaultImport119 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport120 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport119 ? defaultImport119.default : defaultImport119;
+var placeholders_default = "default" in defaultImport120 ? defaultImport120.default : defaultImport120;
 
 // src/common/utils/configUtils.ts
 init_define_global();
@@ -5992,9 +6252,9 @@ __export(configUtils_exports, {
   default: () => configUtils_default
 });
 init_define_global();
-var defaultImport120 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport121 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport120 ? defaultImport120.default : defaultImport120;
+var configUtils_default = "default" in defaultImport121 ? defaultImport121.default : defaultImport121;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -6014,9 +6274,9 @@ __export(pick_exports, {
   default: () => pick_default
 });
 init_define_global();
-var defaultImport121 = __toESM(require("@splunk/themes/pick"));
+var defaultImport122 = __toESM(require("@splunk/themes/pick"));
 __reExport(pick_exports, require("@splunk/themes/pick"));
-var pick_default = "default" in defaultImport121 ? defaultImport121.default : defaultImport121;
+var pick_default = "default" in defaultImport122 ? defaultImport122.default : defaultImport122;
 
 // src/common/ThemedDefaults.tsx
 var defaultBackgroundColor = (props) => pick_default({