@splunk/visualizations 28.8.0 → 28.9.0

package/NetworkGraph.js

@@ -38,8 +38,13 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-var __esm = (fn, res) => function __init() {
-  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+var __esm = (fn, res, err) => function __init() {
+  if (err) throw err[0];
+  try {
+    return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+  } catch (e) {
+    throw err = [e], e;
+  }
 };
 var __export = (target, all) => {
   for (var name in all)
@@ -1518,7 +1523,10 @@ var useSortingParams = ({ requestParams, onRequestParamsChange }) => {
     onSort = (e, { sortKey, sortDir }) => {
       if (typeof sortKey === "string") {
         const nextSortDir = (0, lodash_exports.has)(nextSortDirMap, sortDir) ? nextSortDirMap[sortDir] : "none";
-        onRequestParamsChange(__spreadValues(__spreadValues({}, requestParams), { offset: 0, sort: { [sortKey]: nextSortDir } }));
+        onRequestParamsChange(__spreadProps(__spreadValues({}, requestParams), {
+          offset: 0,
+          sort: { [sortKey]: nextSortDir }
+        }));
       } else {
         onRequestParamsChange(requestParams);
       }
@@ -1674,7 +1682,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.8.0 - 633c53372"
+  "data-splunk-visualization-version": "28.9.0 - 96b03188d"
 })`
     position: relative;
     width: 100%;
@@ -1717,6 +1725,16 @@ var variables_default = "default" in defaultImport20 ? defaultImport20.default :
 // src/common/components/IconPlaceholder.tsx
 init_define_global();
 
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+init_define_global();
+var defaultImport21 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+
 // src/common/hocs/FixedSizeContainer.tsx
 init_define_global();
 
@@ -1726,9 +1744,9 @@ __export(style_exports, {
   default: () => style_default
 });
 init_define_global();
-var defaultImport21 = __toESM(require("@splunk/visualizations-shared/style"));
+var defaultImport22 = __toESM(require("@splunk/visualizations-shared/style"));
 __reExport(style_exports, require("@splunk/visualizations-shared/style"));
-var style_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var style_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -1785,7 +1803,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.8.0 - 633c53372",
+        "data-splunk-visualization-version": "28.9.0 - 96b03188d",
         width,
         height,
         backgroundColor
@@ -1806,6 +1824,14 @@ var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const noFields = fields === void 0;
   return loading || noData || noFields;
 };
+var PlaceholderContainer = styled_components_default.div`
+    /* The inline token color wins when supported. Older browsers discard an
+       unsupported oklch value and retain this inherited fallback instead. */
+    color: ${(0, themes_exports.pick)({
+  dark: "#fafafa",
+  light: "#2c2c2c"
+})};
+`;
 var IconPlaceholder = (props) => {
   const {
     width = SplunkVisualization_default.defaults.width,
@@ -1820,7 +1846,6 @@ var IconPlaceholder = (props) => {
       style: {
         left: "50%",
         top: "50%",
-        color: iconColor,
         opacity: 0.15,
         position: "absolute",
         transform: "translate(-50%, -50%)"
@@ -1830,7 +1855,14 @@ var IconPlaceholder = (props) => {
       "data-test": "icon-placeholder"
     });
   }
-  return /* @__PURE__ */ react_exports.createElement("div", { style: { width, height, background: backgroundColor } }, content);
+  return /* @__PURE__ */ react_exports.createElement(
+    PlaceholderContainer,
+    {
+      "data-test": "icon-placeholder-container",
+      style: { width, height, background: backgroundColor, color: iconColor }
+    },
+    content
+  );
 };
 var IconPlaceholder_default = FixedSizeContainer_default(IconPlaceholder);
 
@@ -1883,9 +1915,9 @@ __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
 init_define_global();
-var defaultImport22 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport23 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var numberUtils_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
 
 // src/common/interfaces/index.ts
 init_define_global();
@@ -1977,7 +2009,7 @@ var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices)
     let avgY = 0;
     let avgRangeStart = Math.floor((i + 1) * every) + 1;
     let avgRangeEnd = Math.floor((i + 2) * every) + 1;
-    avgRangeEnd = avgRangeEnd < dataLength ? avgRangeEnd : dataLength;
+    avgRangeEnd = Math.min(avgRangeEnd, dataLength);
     const avgRangeLength = avgRangeEnd - avgRangeStart;
     for (; avgRangeStart < avgRangeEnd; avgRangeStart++) {
       avgX += Number(data[avgRangeStart][0]);
@@ -2012,9 +2044,9 @@ var largestTriangleThreeBuckets = (data, threshold, preferredDownsampleIndices)
 };
 var strictlyCoerceYColumn = (column, options) => {
   const isNullCoercionEnabled = options.nullValueDisplay === "zero";
-  const canLooselyCoerceSomeValues = column.findIndex(
+  const canLooselyCoerceSomeValues = column.some(
     (value) => (0, numberUtils_exports.startsWithNumber)(`${value}`) || isNullCoercionEnabled && value === null
-  ) >= 0;
+  );
   const coercedColumn = [];
   const canDownsampleColumn = !column.some((value) => {
     const coercedValue = Number(value);
@@ -2033,7 +2065,7 @@ var strictlyCoerceYColumn = (column, options) => {
 };
 var strictlyCoerceXColumn = (column, fieldType) => {
   if (fieldType === "number") {
-    const coercedXColumn = column.map((xValue) => Number(xValue));
+    const coercedXColumn = column.map(Number);
     if (isColumnStrictlyIncreasing(coercedXColumn, fieldType)) {
       return coercedXColumn;
     }
@@ -2338,16 +2370,16 @@ __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
 init_define_global();
-var defaultImport23 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport24 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+var FeatureFlags_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
-  if (context && Object.keys(context).find((key) => key === flagName)) {
+  if (context && Object.keys(context).includes(flagName)) {
     return context[flagName];
   }
-  if (Object.keys(FeatureFlags_default).find((key) => key === flagName)) {
+  if (Object.keys(FeatureFlags_default).includes(flagName)) {
     return FeatureFlags_default[flagName];
   }
   return false;
@@ -2362,9 +2394,9 @@ __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
 init_define_global();
-var defaultImport24 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport25 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var trellisUtils_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -2385,9 +2417,9 @@ __export(visualization_canvas_exports, {
   default: () => visualization_canvas_default
 });
 init_define_global();
-var defaultImport25 = __toESM(require("@splunk/visualization-canvas"));
+var defaultImport26 = __toESM(require("@splunk/visualization-canvas"));
 __reExport(visualization_canvas_exports, require("@splunk/visualization-canvas"));
-var visualization_canvas_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var visualization_canvas_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // src/common/components/VizStyleWrapper.jsx
 init_define_global();
@@ -2414,9 +2446,9 @@ __export(Triangle_exports, {
   default: () => Triangle_default
 });
 init_define_global();
-var defaultImport26 = __toESM(require("@splunk/react-icons/Triangle"));
+var defaultImport27 = __toESM(require("@splunk/react-icons/Triangle"));
 __reExport(Triangle_exports, require("@splunk/react-icons/Triangle"));
-var Triangle_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var Triangle_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // esm-externals:@splunk/visualizations-shared/propUtils
 var propUtils_exports = {};
@@ -2424,9 +2456,9 @@ __export(propUtils_exports, {
   default: () => propUtils_default
 });
 init_define_global();
-var defaultImport27 = __toESM(require("@splunk/visualizations-shared/propUtils"));
+var defaultImport28 = __toESM(require("@splunk/visualizations-shared/propUtils"));
 __reExport(propUtils_exports, require("@splunk/visualizations-shared/propUtils"));
-var propUtils_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var propUtils_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // esm-externals:@splunk/visualizations-shared/simpleXMLOptions
 var simpleXMLOptions_exports = {};
@@ -2434,9 +2466,9 @@ __export(simpleXMLOptions_exports, {
   default: () => simpleXMLOptions_default
 });
 init_define_global();
-var defaultImport28 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
+var defaultImport29 = __toESM(require("@splunk/visualizations-shared/simpleXMLOptions"));
 __reExport(simpleXMLOptions_exports, require("@splunk/visualizations-shared/simpleXMLOptions"));
-var simpleXMLOptions_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var simpleXMLOptions_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // src/common/chartingUtils.ts
 var DEFAULT_LINE_WIDTH = 2;
@@ -2475,9 +2507,9 @@ var shouldEnableSearchZoom = (eventHandlers = [], xField = "") => {
   const xAxisIsTime = xField === "_time";
   return !!rangeSelectEventHandler && xAxisIsTime;
 };
-var canvasSupportedTimeSeriesCharts = ["splunk.line", "splunk.area"];
+var canvasSupportedTimeSeriesCharts = /* @__PURE__ */ new Set(["splunk.line", "splunk.area"]);
 var isTimeSeriesCanvasRenderSupported = (vizConfigKey) => {
-  return canvasSupportedTimeSeriesCharts.includes(vizConfigKey);
+  return canvasSupportedTimeSeriesCharts.has(vizConfigKey);
 };
 var filterChartDataFromInternalFields = (chartData) => {
   const { fields, columns } = chartData;
@@ -2493,7 +2525,7 @@ var filterChartDataFromInternalFields = (chartData) => {
   return { fields: filteredFields, columns: filteredColumns };
 };
 var convert2DArrayToNumbers = (arr) => {
-  return arr.map((subArray) => subArray.map((element) => parseFloat(element)));
+  return arr.map((subArray) => subArray.map((element) => Number.parseFloat(element)));
 };
 var parseAxisValue = (val) => {
   if (val === void 0 || val === null || val === "auto" || val === "") {
@@ -2531,6 +2563,7 @@ var getLegend = (props) => {
       return (0, visualization_canvas_exports.TopLegendFactory)(__spreadValues({
         wrap: true
       }, commonLegendProps));
+    // Note: By default, use right legend
     default:
       return (0, visualization_canvas_exports.SideLegendFactory)(__spreadValues({}, commonLegendProps));
   }
@@ -2663,10 +2696,10 @@ var getSeriesOverrides = (opts) => {
   let spanGaps;
   if (nullValueMode === "gaps") {
     spanGaps = false;
-  } else if (nullValueMode != null) {
-    spanGaps = true;
-  } else {
+  } else if (nullValueMode == null) {
     spanGaps = void 0;
+  } else {
+    spanGaps = true;
   }
   const replaceNullsWithZero = nullValueMode === "zero" ? true : void 0;
   const isAreaChart = type === "area";
@@ -2743,9 +2776,9 @@ __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
 init_define_global();
-var defaultImport29 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport30 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var visualization_schemas_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // src/common/hooks/useTrellisEnabled.ts
 var useTrellisFeatureFlagOn = () => {
@@ -3111,11 +3144,11 @@ var TimeSeriesChartWrapper = (props) => {
     y2AxisMajorUnitFromSimpleXML,
     y2AxisMajorTickInterval
   );
-  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 xAxisMajorTickSizeNum = xAxisMajorTickSize == null ? void 0 : Number(xAxisMajorTickSize);
+  const yAxisMajorTickSizeNum = yAxisMajorTickSize == null ? void 0 : Number(yAxisMajorTickSize);
+  const y2AxisMajorTickSizeNum = y2AxisMajorTickSize == null ? void 0 : Number(y2AxisMajorTickSize);
+  const yAxisMinorTickSizeNum = yAxisMinorTickSize == null ? void 0 : Number(yAxisMinorTickSize);
+  const y2AxisMinorTickSizeNum = y2AxisMinorTickSize == null ? void 0 : Number(y2AxisMinorTickSize);
   const areaOpacityForCanvas = getAreaOpacityForCanvas(areaOpacity);
   const seriesColors = seriesColorsStr ? JSON.parse(seriesColorsStr) : void 0;
   const seriesColorsByField = fieldColors ? JSON.parse(fieldColors) : void 0;
@@ -3527,6 +3560,76 @@ var buildEventCallbackProps = (supportedEvents, evaluatedOptionsToUse, onEventTr
   });
   return result;
 };
+var buildAllEventCallbackProps = (events, evaluatedOptionsToUse, onEventTrigger, { supportsEvents, hasEventHandlers, mode }) => {
+  if (!supportsEvents) return {};
+  const defaultEvents = {};
+  const userEvents = {};
+  Object.entries(events || {}).forEach(([eventKey, eventConfig]) => {
+    (eventConfig.source === "default" ? defaultEvents : userEvents)[eventKey] = eventConfig;
+  });
+  const userProps = hasEventHandlers && mode === "view" ? buildEventCallbackProps(userEvents, evaluatedOptionsToUse, onEventTrigger) : {};
+  return __spreadValues(__spreadValues({}, userProps), buildEventCallbackProps(defaultEvents, evaluatedOptionsToUse, onEventTrigger));
+};
+var applyContextTimezone = (localeContext) => {
+  if (localeContext.serializedTimezone && !moment_default.getDefaultSplunkTimezone()) {
+    moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
+  }
+};
+var getAsyncOptionsEvaluationParams = ({
+  visualizationID,
+  props,
+  optionsToEvaluate,
+  downsampledDataSources,
+  vizConfig,
+  bypassCloneDeepOptionScope,
+  lazyLoadingDataFrame
+}) => {
+  return {
+    visualizationID,
+    props,
+    options: __spreadValues({}, optionsToEvaluate),
+    dataSources: downsampledDataSources,
+    theme: vizConfig.themes,
+    bypassCloneDeepOptionScope,
+    lazyLoadingDataFrame
+  };
+};
+var evaluateOptionsSync = ({
+  optionsToEvaluate,
+  downsampledDataSources,
+  dataSourcesInState,
+  dataFramesInState,
+  setDataSourcesInState,
+  setDataFramesInState,
+  computeDataFrames,
+  featureFlagContext,
+  themeFunc
+}) => {
+  let dataFrames = dataFramesInState;
+  if (downsampledDataSources !== dataSourcesInState) {
+    setDataSourcesInState(downsampledDataSources);
+    dataFrames = Options_exports.Options.dataFrameFromDataSource(
+      downsampledDataSources,
+      getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+    );
+    setDataFramesInState(dataFrames);
+  }
+  let mergedFrames = dataFrames;
+  if (computeDataFrames && dataFrames) {
+    const derivedFrames = computeDataFrames({
+      dataSources: downsampledDataSources,
+      options: optionsToEvaluate.options
+    });
+    mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+  }
+  return Options_exports.Options.evaluate(
+    optionsToEvaluate,
+    downsampledDataSources,
+    themeFunc,
+    mergedFrames,
+    getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+  );
+};
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -3558,11 +3661,7 @@ var withDashboardViz = (opts) => {
       onRequestParamsChange = lodash_exports.noop
     } = props;
     const localeContext = react_exports.useContext(TimezoneContext_default);
-    if (localeContext.serializedTimezone) {
-      if (!moment_default.getDefaultSplunkTimezone()) {
-        moment_default.setDefaultSplunkTimezone(localeContext.serializedTimezone);
-      }
-    }
+    applyContextTimezone(localeContext);
     const themeFunc = (themeVar) => {
       var _a2, _b;
       return (_b = (_a2 = vizConfig.themes)[themeVar]) == null ? void 0 : _b.call(_a2, props);
@@ -3590,7 +3689,12 @@ var withDashboardViz = (opts) => {
       featureFlagContext == null ? void 0 : featureFlagContext.visualizations_enableAcceleratedRender
     );
     const isAcceleratedRenderOn = isAcceleratedRenderFeatureFlagOn && isTimeSeriesCanvasRenderSupported(vizConfig.key) && (options == null ? void 0 : options.acceleratedRender) === true;
-    const isMounted = react_exports.useRef(true);
+    const bypassCloneDeepOptionScope = Boolean(
+      getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
+    );
+    const lazyLoadingDataFrame = Boolean(
+      getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
+    );
     const optionsToEvaluate = react_exports.useMemo(() => {
       var _a2;
       const legendDisplay = turnOffLegendDisplayWhenTrellisIsOn(isTrellisOn, options);
@@ -3629,63 +3733,74 @@ var withDashboardViz = (opts) => {
       threshold,
       isDownsamplingEnabled
     });
-    evaluatedOptions = useDeepMemo(() => {
+    const asyncOptionsEvaluationParams = useDeepMemo(
+      () => getAsyncOptionsEvaluationParams({
+        visualizationID,
+        props,
+        optionsToEvaluate,
+        downsampledDataSources,
+        vizConfig,
+        bypassCloneDeepOptionScope,
+        lazyLoadingDataFrame
+      }),
+      [
+        visualizationID,
+        optionsToEvaluate,
+        downsampledDataSources,
+        vizConfig,
+        bypassCloneDeepOptionScope,
+        lazyLoadingDataFrame,
+        currentThemeFamily,
+        currentThemeColorScheme,
+        currentThemeDensity,
+        localeContext.serializedTimezone
+      ]
+    );
+    react_exports.useEffect(() => {
+      if (!useAsyncEvaluatedOptions) {
+        return void 0;
+      }
+      let ownsEvaluation = true;
       try {
-        if (useAsyncEvaluatedOptions) {
-          const asyncDynamicOptionsEvaluatorParams = {
-            visualizationID,
-            props,
-            options: optionsToEvaluate,
-            dataSources: downsampledDataSources,
-            theme: vizConfig.themes,
-            bypassCloneDeepOptionScope: Boolean(
-              getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-            ),
-            lazyLoadingDataFrame: Boolean(
-              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
-            )
-          };
-          async_dynamic_options_evaluator_default.evaluate(asyncDynamicOptionsEvaluatorParams).then((results) => {
+        async_dynamic_options_evaluator_default.evaluate(asyncOptionsEvaluationParams).then((results) => {
+          if (ownsEvaluation) {
             setEvaluatedOptionsAsync(results.results);
-          }).catch(() => {
-            if (isMounted.current) {
-              setUseAsyncEvaluatedOptions(false);
-            }
-          });
-        } else {
-          let dataFrames = dataFramesInState;
-          if (downsampledDataSources !== dataSourcesInState) {
-            setDataSourcesInState(downsampledDataSources);
-            dataFrames = Options_exports.Options.dataFrameFromDataSource(
-              downsampledDataSources,
-              getFeatureFlag(featureFlagContext, "visualizations_lazyLoadingDataFrame")
-            );
-            setDataFramesInState(dataFrames);
           }
-          let mergedFrames = dataFrames;
-          if (computeDataFrames && dataFrames) {
-            const derivedFrames = computeDataFrames({
-              dataSources: downsampledDataSources,
-              options: optionsToEvaluate.options
-            });
-            mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+        }).catch(() => {
+          if (ownsEvaluation) {
+            setUseAsyncEvaluatedOptions(false);
           }
-          const result = Options_exports.Options.evaluate(
-            optionsToEvaluate,
-            downsampledDataSources,
-            themeFunc,
-            mergedFrames,
-            getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
-          );
-          return result;
+        });
+      } catch (e) {
+        setUseAsyncEvaluatedOptions(false);
+      }
+      return () => {
+        ownsEvaluation = false;
+        async_dynamic_options_evaluator_default.reset(visualizationID);
+      };
+    }, [asyncOptionsEvaluationParams, useAsyncEvaluatedOptions, visualizationID]);
+    evaluatedOptions = useDeepMemo(() => {
+      try {
+        if (useAsyncEvaluatedOptions) {
+          return {};
         }
+        return evaluateOptionsSync({
+          optionsToEvaluate,
+          downsampledDataSources,
+          dataSourcesInState,
+          dataFramesInState,
+          setDataSourcesInState,
+          setDataFramesInState,
+          computeDataFrames,
+          featureFlagContext,
+          themeFunc
+        });
       } catch (e) {
         if (e instanceof Error) {
           console.error(`unexpected error evaluating options: ${e.message}`);
         }
         return {};
       }
-      return {};
     }, [
       currentThemeFamily,
       currentThemeColorScheme,
@@ -3695,7 +3810,7 @@ var withDashboardViz = (opts) => {
       localeContext.serializedTimezone,
       useAsyncEvaluatedOptions
     ]);
-    const evaluatedOptionsToUse = !useAsyncEvaluatedOptions ? evaluatedOptions : evaluatedOptionsAsync;
+    const evaluatedOptionsToUse = useAsyncEvaluatedOptions ? evaluatedOptionsAsync : evaluatedOptions;
     let dataSourceMetadata = {};
     const OptionKey = "paginateDataSourceKey";
     const optsKey = (0, lodash_exports.has)(evaluatedOptionsToUse, OptionKey) && evaluatedOptionsToUse[OptionKey];
@@ -3717,7 +3832,7 @@ var withDashboardViz = (opts) => {
       sortParams,
       paginatorParams
     };
-    if (vizConfig.supports.indexOf("page-and-sort" /* PAGE_AND_SORT */) === -1 && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
+    if (!vizConfig.supports.includes("page-and-sort" /* PAGE_AND_SORT */) && !(0, lodash_exports.has)(dataSources, paginateDataSourceKey)) {
       dataSourceMetadata = {};
     }
     const clonedEvaluatedOptions = __spreadValues({}, evaluatedOptionsToUse);
@@ -3727,14 +3842,6 @@ var withDashboardViz = (opts) => {
     react_exports.useEffect(() => {
       onComputedProps(clonedEvaluatedOptions);
     });
-    react_exports.useEffect(() => {
-      return () => {
-        if (useAsyncEvaluatedOptions) {
-          isMounted.current = false;
-          async_dynamic_options_evaluator_default.reset(visualizationID);
-        }
-      };
-    }, []);
     const { requiredProps = [], supports } = vizConfig;
     const missing = missingKeys(requiredProps, evaluatedOptionsToUse);
     if (missing.length > 0 && supports.includes("placeholder" /* PLACEHOLDER */) && vizConfig.key !== "splunk.singlevalue") {
@@ -3749,7 +3856,16 @@ var withDashboardViz = (opts) => {
         }
       );
     }
-    const eventCallbackProps = hasEventHandlers && mode === "view" && vizConfig.supports.includes("events" /* EVENTS */) ? buildEventCallbackProps(vizConfig.events, evaluatedOptionsToUse, onEventTrigger) : {};
+    const eventCallbackProps = buildAllEventCallbackProps(
+      vizConfig.events,
+      evaluatedOptionsToUse,
+      onEventTrigger,
+      {
+        supportsEvents: vizConfig.supports.includes("events" /* EVENTS */),
+        hasEventHandlers,
+        mode
+      }
+    );
     const computedVizProps = computeVizProps2(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues({}, props), evaluatedOptionsToUse), {
       // Align option transformation with the actual renderer selected below.
       // This prevents canvas-only option preservation from leaking into Highcharts mode.
@@ -3777,8 +3893,9 @@ var withDashboardViz = (opts) => {
     onEventTrigger: SplunkVisualization_default.defaults.onEventTrigger
   });
   DashboardViz.config = vizConfig;
-  return (0, styled_components_exports.withTheme)(
-    withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)
+  return Object.assign(
+    (0, styled_components_exports.withTheme)(withPlaceholder_default(withEditModeCover_default(DashboardViz, disableEditModeCover), useIconPlaceholder)),
+    { config: vizConfig }
   );
 };
 var withDashboardViz_default = withDashboardViz;
@@ -3792,9 +3909,9 @@ __export(d3_transition_exports, {
   default: () => d3_transition_default
 });
 init_define_global();
-var defaultImport30 = __toESM(require("d3-transition"));
+var defaultImport31 = __toESM(require("d3-transition"));
 __reExport(d3_transition_exports, require("d3-transition"));
-var d3_transition_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var d3_transition_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // esm-externals:d3-selection
 var d3_selection_exports = {};
@@ -3802,9 +3919,9 @@ __export(d3_selection_exports, {
   default: () => d3_selection_default
 });
 init_define_global();
-var defaultImport31 = __toESM(require("d3-selection"));
+var defaultImport32 = __toESM(require("d3-selection"));
 __reExport(d3_selection_exports, require("d3-selection"));
-var d3_selection_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var d3_selection_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // esm-externals:d3-zoom
 var d3_zoom_exports = {};
@@ -3812,9 +3929,9 @@ __export(d3_zoom_exports, {
   default: () => d3_zoom_default
 });
 init_define_global();
-var defaultImport32 = __toESM(require("d3-zoom"));
+var defaultImport33 = __toESM(require("d3-zoom"));
 __reExport(d3_zoom_exports, require("d3-zoom"));
-var d3_zoom_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+var d3_zoom_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // src/NetworkGraph/PureNetworkGraph/utils/networkGraphUtils.ts
 init_define_global();
@@ -3825,9 +3942,9 @@ __export(dagre_exports, {
   default: () => dagre_default
 });
 init_define_global();
-var defaultImport33 = __toESM(require("dagre"));
+var defaultImport34 = __toESM(require("dagre"));
 __reExport(dagre_exports, require("dagre"));
-var dagre_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var dagre_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/visualizations-shared/iconUtils
 var iconUtils_exports = {};
@@ -3835,9 +3952,9 @@ __export(iconUtils_exports, {
   default: () => iconUtils_default
 });
 init_define_global();
-var defaultImport34 = __toESM(require("@splunk/visualizations-shared/iconUtils"));
+var defaultImport35 = __toESM(require("@splunk/visualizations-shared/iconUtils"));
 __reExport(iconUtils_exports, require("@splunk/visualizations-shared/iconUtils"));
-var iconUtils_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
+var iconUtils_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/visualization-encoding/utils/colorUtils
 var colorUtils_exports2 = {};
@@ -3845,9 +3962,9 @@ __export(colorUtils_exports2, {
   default: () => colorUtils_default2
 });
 init_define_global();
-var defaultImport35 = __toESM(require("@splunk/visualization-encoding/utils/colorUtils"));
+var defaultImport36 = __toESM(require("@splunk/visualization-encoding/utils/colorUtils"));
 __reExport(colorUtils_exports2, require("@splunk/visualization-encoding/utils/colorUtils"));
-var colorUtils_default2 = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var colorUtils_default2 = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // src/common/utils/textUtils.ts
 init_define_global();
@@ -3859,40 +3976,54 @@ var computeTextWidth = (text, font) => {
   const measure = context.measureText(text);
   return measure.width;
 };
+var truncateEnd = (text, context, maxWidth, ellipsis) => {
+  for (let i = text.length - 1; i > 0; i -= 1) {
+    const truncatedText = text.slice(0, i) + ellipsis;
+    if (context.measureText(truncatedText).width <= maxWidth) {
+      return truncatedText;
+    }
+  }
+  return ellipsis;
+};
+var truncateStart = (text, context, maxWidth, ellipsis) => {
+  for (let i = 0; i < text.length; i += 1) {
+    const truncatedText = ellipsis + text.slice(i);
+    if (context.measureText(truncatedText).width <= maxWidth) {
+      return truncatedText;
+    }
+  }
+  return ellipsis;
+};
+var truncateMiddle = (text, context, maxWidth, ellipsis) => {
+  const ellipsisWidth = context.measureText(ellipsis).width;
+  for (let i = 0; i < text.length / 2; i += 1) {
+    const left = text.slice(0, Math.floor(text.length / 2) - i);
+    const right = text.slice(Math.ceil(text.length / 2) + i);
+    const truncatedText = left + ellipsis + right;
+    if (context.measureText(left).width + ellipsisWidth + context.measureText(right).width <= maxWidth) {
+      return truncatedText;
+    }
+  }
+  return ellipsis;
+};
 var truncateText = (text, maxWidth, truncationType, font = `10px ${VIZ_FONT_FAMILY}`) => {
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d");
   if (!context) return text;
   context.font = font;
   const ellipsis = "...";
-  const ellipsisWidth = context.measureText(ellipsis).width;
   const fullTextWidth = context.measureText(text).width;
   if (fullTextWidth <= maxWidth) {
     return text;
   }
   if (truncationType === "ellipsisEnd") {
-    for (let i = text.length - 1; i > 0; i -= 1) {
-      const truncatedText = text.slice(0, i) + ellipsis;
-      if (context.measureText(truncatedText).width <= maxWidth) {
-        return truncatedText;
-      }
-    }
-  } else if (truncationType === "ellipsisStart") {
-    for (let i = 0; i < text.length; i += 1) {
-      const truncatedText = ellipsis + text.slice(i);
-      if (context.measureText(truncatedText).width <= maxWidth) {
-        return truncatedText;
-      }
-    }
-  } else if (truncationType === "ellipsisMiddle") {
-    for (let i = 0; i < text.length / 2; i += 1) {
-      const left = text.slice(0, Math.floor(text.length / 2) - i);
-      const right = text.slice(Math.ceil(text.length / 2) + i);
-      const truncatedText = left + ellipsis + right;
-      if (context.measureText(left).width + ellipsisWidth + context.measureText(right).width <= maxWidth) {
-        return truncatedText;
-      }
-    }
+    return truncateEnd(text, context, maxWidth, ellipsis);
+  }
+  if (truncationType === "ellipsisStart") {
+    return truncateStart(text, context, maxWidth, ellipsis);
+  }
+  if (truncationType === "ellipsisMiddle") {
+    return truncateMiddle(text, context, maxWidth, ellipsis);
   }
   return ellipsis;
 };
@@ -3906,9 +4037,9 @@ __export(d3_force_exports, {
   default: () => d3_force_default
 });
 init_define_global();
-var defaultImport36 = __toESM(require("d3-force"));
+var defaultImport37 = __toESM(require("d3-force"));
 __reExport(d3_force_exports, require("d3-force"));
-var d3_force_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var d3_force_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // esm-externals:d3-quadtree
 var d3_quadtree_exports = {};
@@ -3916,9 +4047,9 @@ __export(d3_quadtree_exports, {
   default: () => d3_quadtree_default
 });
 init_define_global();
-var defaultImport37 = __toESM(require("d3-quadtree"));
+var defaultImport38 = __toESM(require("d3-quadtree"));
 __reExport(d3_quadtree_exports, require("d3-quadtree"));
-var d3_quadtree_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var d3_quadtree_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // src/NetworkGraph/PureNetworkGraph/utils/networkGraphShared.ts
 init_define_global();
@@ -4117,9 +4248,10 @@ var RECT_TOP_MARGIN = 4;
 var LABEL_FONT_SIZE = 12;
 var FONT = `${LABEL_FONT_SIZE}px ${VIZ_FONT_FAMILY}`;
 var DIM_OPACITY = 0.25;
-var NODE_FOCUS_RING_PADDING = 4;
+var NODE_FOCUS_RING_GAP = 2;
 var NODE_FOCUS_RING_STROKE_WIDTH = 3;
-var NODE_FOCUS_RING_SCREEN_PADDING = NODE_FOCUS_RING_STROKE_WIDTH / 2;
+var NODE_FOCUS_RING_PADDING = NODE_FOCUS_RING_GAP + NODE_FOCUS_RING_STROKE_WIDTH / 2;
+var NODE_FOCUS_RING_OUTER_PADDING = NODE_FOCUS_RING_GAP + NODE_FOCUS_RING_STROKE_WIDTH;
 var MIN_NODE_SPACING = 4;
 var MIN_EDGE_LENGTH = 48;
 var MIN_NODE_CONTAINER_SIZE = DEFAULT_NODE_RADIUS * 2 + MIN_EDGE_LENGTH;
@@ -4141,12 +4273,12 @@ var toFiniteNumberOrFallback = (value, fallback) => {
   return numericValue != null ? numericValue : fallback;
 };
 var getIconRenderInfo = (icon) => {
-  var _a;
+  var _a, _b;
   const isIconString = typeof icon === "string";
   const isRelativeIcon = isIconString ? (0, iconUtils_exports.isRelativeUrlPath)(icon) : false;
   let iconUrl = isIconString ? icon : void 0;
-  if (iconUrl && isRelativeIcon && typeof window !== "undefined" && ((_a = window.location) == null ? void 0 : _a.origin)) {
-    iconUrl = `${window.location.origin}${iconUrl}`;
+  if (iconUrl && isRelativeIcon && ((_b = (_a = globalThis.window) == null ? void 0 : _a.location) == null ? void 0 : _b.origin)) {
+    iconUrl = `${globalThis.window.location.origin}${iconUrl}`;
   }
   const shouldRenderRemoteIcon = !!iconUrl && isIconString && ((0, iconUtils_exports.isRemoteIcon)(iconUrl) || (0, iconUtils_exports.isDataURI)(iconUrl) || isRelativeIcon);
   return { iconUrl, shouldRenderRemoteIcon };
@@ -4160,7 +4292,7 @@ var sanitizeSvgId = (id) => {
 var unsanitizeSvgId = (safeId) => {
   const hex = safeId.startsWith("id_") ? safeId.slice(3) : safeId;
   const pairs = hex.match(/.{1,2}/g) || [];
-  const bytes = new Uint8Array(pairs.map((byte) => parseInt(byte, 16)));
+  const bytes = new Uint8Array(pairs.map((byte) => Number.parseInt(byte, 16)));
   const decoder = new TextDecoder();
   return decoder.decode(bytes);
 };
@@ -4530,10 +4662,7 @@ var truncateTextToMaxLines = (text = "", font = `12px ${VIZ_FONT_FAMILY}`, maxWi
     if (fitsOnCurrentLine) {
       currentLineText = lineWithNextWord;
       wordQueue.shift();
-    } else if (!isNextWordLongerThanMaxWidth) {
-      outputLines.push(currentLineText);
-      currentLineText = "";
-    } else {
+    } else if (isNextWordLongerThanMaxWidth) {
       const { currentLineWithSplit, remainder } = handleWordSplit(
         context,
         maxWidth,
@@ -4543,6 +4672,9 @@ var truncateTextToMaxLines = (text = "", font = `12px ${VIZ_FONT_FAMILY}`, maxWi
       outputLines.push(currentLineWithSplit);
       currentLineText = "";
       wordQueue[0] = remainder;
+    } else {
+      outputLines.push(currentLineText);
+      currentLineText = "";
     }
   }
   if (currentLineText && outputLines.length < maxLines) {
@@ -4550,7 +4682,7 @@ var truncateTextToMaxLines = (text = "", font = `12px ${VIZ_FONT_FAMILY}`, maxWi
   }
   return outputLines;
 };
-var getNodeBounds = (node, options = {}) => {
+var getNodeBounds = (node) => {
   var _a, _b;
   if (!node) return void 0;
   if (!Number.isFinite(node.x) || !Number.isFinite(node.y)) return void 0;
@@ -4561,7 +4693,7 @@ var getNodeBounds = (node, options = {}) => {
   const nodeLabelWidth = textWidth + RECT_HORIZONTAL_PADDING * 2;
   const nodeDiameter = (_b = node.size) != null ? _b : DEFAULT_NODE_RADIUS * 2;
   const nodeRadius = nodeDiameter / 2;
-  const nodeCircleRadius = options.includeFocusRing ? nodeRadius + NODE_FOCUS_RING_PADDING : nodeRadius;
+  const nodeCircleRadius = nodeRadius;
   const nodeLeft = node.x - Math.max(nodeCircleRadius, nodeLabelWidth / 2);
   const nodeWidth = Math.max(nodeCircleRadius * 2, nodeLabelWidth);
   return {
@@ -4572,15 +4704,25 @@ var getNodeBounds = (node, options = {}) => {
   };
 };
 var getScreenBounds = (node, transform, options = {}) => {
-  const bounds = getNodeBounds(node, options);
+  var _a;
+  const bounds = getNodeBounds(node);
   if (!bounds) {
     return null;
   }
-  const screenPadding = options.includeFocusRing ? NODE_FOCUS_RING_SCREEN_PADDING : 0;
-  const left = bounds.x * transform.k + transform.x - screenPadding;
-  const top = bounds.y * transform.k + transform.y - screenPadding;
-  const right = bounds.x2 * transform.k + transform.x + screenPadding;
-  const bottom = bounds.y2 * transform.k + transform.y + screenPadding;
+  let left = bounds.x * transform.k + transform.x;
+  let top = bounds.y * transform.k + transform.y;
+  let right = bounds.x2 * transform.k + transform.x;
+  let bottom = bounds.y2 * transform.k + transform.y;
+  if (options.includeFocusRing) {
+    const nodeRadius = ((_a = node.size) != null ? _a : DEFAULT_NODE_RADIUS * 2) / 2;
+    const focusRingRadius = (nodeRadius + NODE_FOCUS_RING_OUTER_PADDING) * transform.k;
+    const nodeCenterX = node.x * transform.k + transform.x;
+    const nodeCenterY = node.y * transform.k + transform.y;
+    left = Math.min(left, nodeCenterX - focusRingRadius);
+    top = Math.min(top, nodeCenterY - focusRingRadius);
+    right = Math.max(right, nodeCenterX + focusRingRadius);
+    bottom = Math.max(bottom, nodeCenterY + focusRingRadius);
+  }
   return {
     left,
     top,
@@ -5172,16 +5314,6 @@ init_define_global();
 // src/NetworkGraph/PureNetworkGraph/components/Node.tsx
 init_define_global();
 
-// esm-externals:@splunk/themes
-var themes_exports = {};
-__export(themes_exports, {
-  default: () => themes_default
-});
-init_define_global();
-var defaultImport38 = __toESM(require("@splunk/themes"));
-__reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
-
 // esm-externals:@splunk/visualizations-shared/RemoteIcon
 var RemoteIcon_exports = {};
 __export(RemoteIcon_exports, {
@@ -5300,11 +5432,13 @@ var NodeCircle = styled_components_default.circle`
     }
 `;
 var NodeFocusRing = styled_components_default.circle`
-    fill: none;
+    fill: ${(props) => {
+  var _a;
+  return (_a = props.$backgroundColor) != null ? _a : themes_exports.variables.backgroundColorPage;
+}};
     stroke: ${themes_exports.variables.focusColor};
     stroke-width: ${NODE_FOCUS_RING_STROKE_WIDTH}px;
     pointer-events: none;
-    vector-effect: non-scaling-stroke;
 `;
 var IconElement = (_a) => {
   var _b = _a, { icon } = _b, iconProps = __objRest(_b, ["icon"]);
@@ -5344,7 +5478,8 @@ var Node = (0, react_exports.memo)(function Node2(props) {
     handleAnchor,
     handleRequestClose,
     isDragging = false,
-    tabIndex = 0
+    tabIndex = 0,
+    backgroundColor
   } = props;
   const circleRef = (0, react_exports.useRef)(null);
   const truncatedText = truncateTextToMaxLines(label, FONT, MAX_TEXT_WIDTH, 2);
@@ -5370,7 +5505,7 @@ var Node = (0, react_exports.memo)(function Node2(props) {
       return;
     }
     let isMounted = true;
-    const loadIcon = () => __async(this, null, function* () {
+    const loadIcon = () => __async(null, null, function* () {
       const loadIconFn = iconLoader_default[builtInIcon];
       if (!loadIconFn) {
         if (isMounted) {
@@ -5395,8 +5530,6 @@ var Node = (0, react_exports.memo)(function Node2(props) {
     };
   }, [builtInIcon]);
   const nodeClickHandler = (0, react_exports.useCallback)(() => {
-    var _a2;
-    (_a2 = circleRef.current) == null ? void 0 : _a2.focus();
     if (handleNodeClick) {
       handleNodeClick({ id, value, index });
     }
@@ -5468,7 +5601,8 @@ var Node = (0, react_exports.memo)(function Node2(props) {
       r: radius + NODE_FOCUS_RING_PADDING,
       cx: x,
       cy: y,
-      opacity
+      opacity,
+      $backgroundColor: backgroundColor
     }
   ), /* @__PURE__ */ react_exports.createElement(
     NodeCircle,
@@ -5761,7 +5895,8 @@ var NetworkGraphSvg = (0, react_exports.memo)(function NetworkGraphSvg2({
   highlightedNode,
   setHighlightedNode = () => void 0,
   isDragging = false,
-  activeNodeId
+  activeNodeId,
+  backgroundColor
 }) {
   var _a, _b;
   const graphId = (0, react_exports.useId)();
@@ -5807,8 +5942,10 @@ var NetworkGraphSvg = (0, react_exports.memo)(function NetworkGraphSvg2({
   (0, react_exports.useEffect)(() => {
     if (isReadyToRender) {
       (0, d3_selection_exports.select)(svgRef == null ? void 0 : svgRef.current).selectAll("circle").on("mousedown", (event) => {
+        var _a2, _b2;
         event.stopPropagation();
         handleMouseDown(event);
+        (_b2 = (_a2 = event.currentTarget).focus) == null ? void 0 : _b2.call(_a2);
       });
     }
   }, [handleMouseDown, isReadyToRender, svgRef]);
@@ -5909,7 +6046,8 @@ var NetworkGraphSvg = (0, react_exports.memo)(function NetworkGraphSvg2({
           handleAnchor,
           handleRequestClose,
           isDragging,
-          tabIndex: getNodeTabIndex(id)
+          tabIndex: getNodeTabIndex(id),
+          backgroundColor
         }
       );
     }))
@@ -6016,7 +6154,7 @@ var ZoomControls = (0, react_exports.memo)(function ZoomControls2(props) {
     disableZoomOut = false,
     buttonTabIndex
   } = 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(Tooltip_default2, { contentRelationship: "label", content: (0, i18n_exports._)("Zoom in") }, /* @__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"), defaultPlacement: "right" }, /* @__PURE__ */ react_exports.createElement(
     StyledZoomInButton,
     {
       icon: /* @__PURE__ */ react_exports.createElement(Plus_default, null),
@@ -6026,7 +6164,7 @@ var ZoomControls = (0, react_exports.memo)(function ZoomControls2(props) {
       "data-test": "zoom-in-button",
       tabIndex: buttonTabIndex
     }
-  )), /* @__PURE__ */ react_exports.createElement(Tooltip_default2, { contentRelationship: "label", content: (0, i18n_exports._)("Zoom out") }, /* @__PURE__ */ react_exports.createElement(
+  )), /* @__PURE__ */ react_exports.createElement(Tooltip_default2, { contentRelationship: "label", content: (0, i18n_exports._)("Zoom out"), defaultPlacement: "right" }, /* @__PURE__ */ react_exports.createElement(
     StyledZoomOutButton,
     {
       icon: /* @__PURE__ */ react_exports.createElement(Minus_default, null),
@@ -6036,7 +6174,7 @@ var ZoomControls = (0, react_exports.memo)(function ZoomControls2(props) {
       "data-test": "zoom-out-button",
       tabIndex: buttonTabIndex
     }
-  ))), !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(
+  ))), !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"), defaultPlacement: "right" }, /* @__PURE__ */ react_exports.createElement(
     StyledButton,
     {
       icon: /* @__PURE__ */ react_exports.createElement(SquareAndCorners_default, null),
@@ -6659,7 +6797,8 @@ var PureNetworkGraph = ({
         highlightedNode,
         setHighlightedNode,
         isDragging: isDragging.dragStarted,
-        activeNodeId
+        activeNodeId,
+        backgroundColor
       }
     ))
   );
@@ -7417,7 +7556,7 @@ var config = {
   /**
    * viz name
    */
-  name: "NetworkGraph",
+  name: (0, i18n_exports._)("Network graph"),
   category: "Flow" /* FLOW */,
   status: "preview",
   /**