@splunk/visualizations 28.2.1 → 28.3.0

package/Map.js

@@ -332,23 +332,24 @@ var getTilePreset = ({
   defaultTileConfig = [],
   customTileConfig = []
 }) => {
-  var _a, _b;
+  var _a, _b, _c, _d;
   const tilePreset = {};
   let defaultTileLight = {};
   let defaultTileDark = {};
-  const tileConfigs = [].concat(defaultTileConfig).concat(customTileConfig);
+  const tileConfigs = [...defaultTileConfig, ...customTileConfig];
   (0, lodash_exports.forEach)(tileConfigs, (tileConfig) => {
     const key = tileConfig == null ? void 0 : tileConfig.key;
-    const updatedConfig = __spreadProps(__spreadValues({
-      theme: "all"
-    }, tileConfig), {
+    if (!key) {
+      return;
+    }
+    const updatedConfig = __spreadProps(__spreadValues({}, tileConfig), {
       version: MAP_STYLE_VERSION_NUMBER
     });
     tilePreset[key] = updatedConfig;
   });
   if (defaultTileConfig.length > 0) {
-    defaultTileLight = (_a = defaultTileConfig.find((config2) => config2.theme === "light")) != null ? _a : defaultTileConfig.find((config2) => config2.theme === void 0);
-    defaultTileDark = (_b = defaultTileConfig.find((config2) => config2.theme === "dark")) != null ? _b : defaultTileConfig.find((config2) => config2.theme === void 0);
+    defaultTileLight = (_b = (_a = defaultTileConfig.find((config2) => config2.theme === "light")) != null ? _a : defaultTileConfig.find((config2) => config2.theme === void 0)) != null ? _b : {};
+    defaultTileDark = (_d = (_c = defaultTileConfig.find((config2) => config2.theme === "dark")) != null ? _c : defaultTileConfig.find((config2) => config2.theme === void 0)) != null ? _d : {};
   }
   return { tilePreset, defaultTileLight, defaultTileDark };
 };
@@ -363,6 +364,8 @@ var getMapStyle = ({
 }) => {
   if (!showBaseLayer) {
     return {
+      name: "empty-base-layer",
+      key: "empty-base-layer",
       version: MAP_STYLE_VERSION_NUMBER,
       sources: {
         "base-tiles": {
@@ -384,21 +387,23 @@ var getMapStyle = ({
       ]
     };
   }
-  if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (tilePreset[baseLayerTileServer].theme === colorScheme || tilePreset[baseLayerTileServer].theme === "all")) {
+  if (baseLayerTileServer && tilePreset[baseLayerTileServer] && (!tilePreset[baseLayerTileServer].theme || tilePreset[baseLayerTileServer].theme === colorScheme)) {
     return tilePreset[baseLayerTileServer];
   }
   if (baseLayerTileServer && baseLayerTileServerType) {
     let tiles = [];
-    if (baseLayerTileServer.match(/^(https?):\/\/{(s|S)}\../)) {
+    if (/^(https?):\/\/{[sS]}\./.exec(baseLayerTileServer)) {
       tiles = [
-        baseLayerTileServer.replace(/{(s|S)}/, "a"),
-        baseLayerTileServer.replace(/{(s|S)}/, "b"),
-        baseLayerTileServer.replace(/{(s|S)}/, "c")
+        baseLayerTileServer.replace(/{[sS]}/, "a"),
+        baseLayerTileServer.replace(/{[sS]}/, "b"),
+        baseLayerTileServer.replace(/{[sS]}/, "c")
       ];
     } else {
       tiles = [baseLayerTileServer];
     }
     const mapStyle = {
+      name: baseLayerTileServer,
+      key: baseLayerTileServer,
       version: MAP_STYLE_VERSION_NUMBER,
       sources: {
         "base-tiles": {
@@ -426,9 +431,11 @@ var getZoomConstraintsFromTileConfig = (tileConfig, baseLayerTileServer) => {
   const { sources, layers } = tileConfig;
   let matchedBaseLayerTileServer = false;
   const sourceKeys = Object.keys(sources);
-  for (let i = 0; i < sourceKeys.length; i += 1) {
-    const { minzoom, maxzoom } = sources[sourceKeys[i]];
-    if (baseLayerTileServer && sources[sourceKeys[i]].tiles.indexOf(baseLayerTileServer) !== -1) {
+  for (const key of sourceKeys) {
+    const source = sources[key];
+    const { minzoom, maxzoom } = source;
+    const tiles = Array.isArray(source == null ? void 0 : source.tiles) ? source.tiles : [];
+    if (baseLayerTileServer && tiles.includes(baseLayerTileServer)) {
       matchedBaseLayerTileServer = true;
     }
     if ((baseLayerTileServer && matchedBaseLayerTileServer || !baseLayerTileServer) && (0, lodash_exports.isNumber)(minzoom) && (0, lodash_exports.isNumber)(maxzoom)) {
@@ -438,8 +445,8 @@ var getZoomConstraintsFromTileConfig = (tileConfig, baseLayerTileServer) => {
       };
     }
   }
-  for (let i = 0; i < layers.length; i += 1) {
-    const { minzoom, maxzoom } = layers[i];
+  for (const layer of layers) {
+    const { minzoom, maxzoom } = layer;
     if ((baseLayerTileServer && matchedBaseLayerTileServer || !baseLayerTileServer) && (0, lodash_exports.isNumber)(minzoom) && (0, lodash_exports.isNumber)(maxzoom)) {
       return {
         minZoom: minzoom,
@@ -452,12 +459,13 @@ var getZoomConstraintsFromTileConfig = (tileConfig, baseLayerTileServer) => {
     maxZoom: 24
   };
 };
+var isBaseTileConfig = (config2) => Boolean(config2 && "name" in config2 && "key" in config2 && "sources" in config2 && "layers" in config2);
 var getZoomLevelFromGeobin = (geobinStr) => {
   var _a;
   if (!geobinStr) {
     return null;
   }
-  const geobinPattern = /bin_id_zl_([0-9]{0,2})?_y_/g;
+  const geobinPattern = /bin_id_zl_(\d{1,2})_y_/g;
   const match = geobinPattern.exec(geobinStr);
   return (_a = (match == null ? void 0 : match.length) && parseInt(match[1], 10)) != null ? _a : null;
 };
@@ -465,7 +473,7 @@ var getStaticColors = (colorCount, colorArray) => {
   if (colorCount < 0 || !colorCount) {
     return [DEFAULT_CLUSTER_COLOR];
   }
-  if (!colorArray || !colorArray.length) {
+  if (!(colorArray == null ? void 0 : colorArray.length)) {
     return [...Array(colorCount).keys()].map((i) => DEFAULT_SERIES_COLORS[i]);
   }
   return [...Array(colorCount).keys()].map(
@@ -485,7 +493,8 @@ var matchBubbleSize = (dataRange, data) => {
   return size2;
 };
 var transposeArray = (array2) => {
-  if (!array2 || !array2.length || !array2[0] || !array2[0].length) {
+  var _a;
+  if (!(array2 == null ? void 0 : array2.length) || !((_a = array2[0]) == null ? void 0 : _a.length)) {
     return [];
   }
   return array2[0].map((_7, i) => array2.map((row) => row[i]));
@@ -507,8 +516,8 @@ var sortByValuesField = (bubbleLayer) => {
   bubbleLayer.bubbleSize.unshift(bubbleLayer.bubbleSize.splice(index, 1)[0]);
 };
 var bakeBubbleData = (layer) => {
-  var _a;
-  if (!layer || !((_a = layer.bubbleSize) == null ? void 0 : _a.length) || !layer.geobin || !layer.geobin.length || !layer.latitude || !layer.latitude.length || !layer.longitude || !layer.longitude.length) {
+  var _a, _b, _c, _d;
+  if (!((_a = layer == null ? void 0 : layer.bubbleSize) == null ? void 0 : _a.length) || !((_b = layer == null ? void 0 : layer.geobin) == null ? void 0 : _b.length) || !((_c = layer == null ? void 0 : layer.latitude) == null ? void 0 : _c.length) || !((_d = layer == null ? void 0 : layer.longitude) == null ? void 0 : _d.length)) {
     return null;
   }
   const sanitizedBubbleSize = sanitizeValues(layer.bubbleSize);
@@ -528,7 +537,7 @@ var bakeBubbleData = (layer) => {
     transposedBubbleSize = layer.bubbleSize.map((n) => [n]);
     transposedSanitizedBubbleSize = sanitizedBubbleSize.map((n) => [n]);
   }
-  if (!transposedBubbleSize || !transposedBubbleSize.length) {
+  if (!(transposedBubbleSize == null ? void 0 : transposedBubbleSize.length)) {
     return null;
   }
   const data = layer.latitude.map((lat, i) => ({
@@ -566,17 +575,33 @@ var isValidLatLon = (latlon) => {
   }
   return true;
 };
+var getChoroplethValues = (field, choroplethLayer) => {
+  var _a;
+  if (!Array.isArray(choroplethLayer.geom) || choroplethLayer.geom.length === 0) {
+    return [];
+  }
+  const limit = (_a = choroplethLayer.resultLimit) != null ? _a : DEFAULT_RESULT_LIMIT;
+  const slicedGeomList = choroplethLayer.geom.slice(0, limit);
+  const flatCoordinates = slicedGeomList.flatMap((geomObject) => {
+    if (!geomObject) {
+      return [];
+    }
+    if (geomObject.type === "MultiPolygon") {
+      return geomObject.coordinates.flat(2);
+    }
+    if (geomObject.type === "Polygon") {
+      return geomObject.coordinates.flat();
+    }
+    return [];
+  });
+  return flatCoordinates.map((coord) => coord[field === LONGITUDE ? 0 : 1]);
+};
 var getLatOrLonCoordinates = (layer, field) => {
   const getClusterValues = (clusterLayer) => (0, lodash_exports.get)(clusterLayer, field, []).slice(
     0,
     clusterLayer.type === visualization_schemas_exports.LAYER_TYPE.Marker && clusterLayer.resultLimit ? clusterLayer.resultLimit : DEFAULT_RESULT_LIMIT
   );
-  const getChoroplethValues = (choroplethLayer) => {
-    const slicedGeomList = choroplethLayer.geom.slice(0, choroplethLayer.resultLimit);
-    const flatCoordinates = slicedGeomList.flatMap((geomObject) => geomObject.coordinates.flat(2));
-    return flatCoordinates.map((coord) => coord[field === LONGITUDE ? 0 : 1]);
-  };
-  return layer.type === visualization_schemas_exports.LAYER_TYPE.Choropleth ? getChoroplethValues(layer) : getClusterValues(layer);
+  return layer.type === visualization_schemas_exports.LAYER_TYPE.Choropleth ? getChoroplethValues(field, layer) : getClusterValues(layer);
 };
 var getGlobalLayerBoundaries = (layers) => {
   const isLayerValid = (field) => layers.every((layer) => layer[field] || layer.geom);
@@ -608,6 +633,15 @@ var getGlobalLayerBoundaries = (layers) => {
     [getMax(LONGITUDE), getMax(LATITUDE)]
   ];
 };
+var formatTooltipFieldValue = (value) => {
+  if (value === null || value === void 0) {
+    return "";
+  }
+  if (typeof value === "string" || typeof value === "number") {
+    return value;
+  }
+  return JSON.stringify(value);
+};
 var getScaledOpacities = (colors, cfgOpacity) => {
   const opacities = colors == null ? void 0 : colors.map((color) => {
     var _a;
@@ -627,7 +661,7 @@ var compareBaseStyles = (curr, next) => {
   return (0, lodash_exports.isEqual)(currBaseLayer, nextBaseLayer) && (0, lodash_exports.isEqual)(currBaseSource, nextBaseSource);
 };
 var formatMetadata = (choroplethLayer, i) => {
-  if (!choroplethLayer || !choroplethLayer.areaIds || !choroplethLayer.areaValues) return {};
+  if (!(choroplethLayer == null ? void 0 : choroplethLayer.areaIds) || !(choroplethLayer == null ? void 0 : choroplethLayer.areaValues)) return {};
   if (i >= choroplethLayer.areaIds.length) return {};
   const metadata = choroplethLayer.metadata ? choroplethLayer.metadata[i] : {};
   const name = choroplethLayer.areaIds[i];
@@ -1452,18 +1486,21 @@ var ChoroplethLayer = (props) => {
   );
   const areaIdSliced = (_h = (_g = choroplethLayer == null ? void 0 : choroplethLayer.areaIds) == null ? void 0 : _g.slice(0, limit)) != null ? _h : [];
   const uniqueAreaIdSliced = (0, lodash_exports.uniq)(areaIdSliced).length !== areaIdSliced.length ? areaIdSliced.map((id, i) => `${id}${i}`) : areaIdSliced;
-  const additionalFields = (choroplethLayer == null ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map(
-    (choroplethMetadata) => choroplethLayer.additionalTooltipFields.map((field) => ({
-      name: field,
-      value: choroplethMetadata[field]
-    }))
-  ) : [];
+  const additionalFields = (choroplethLayer == null ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map((choroplethMetadata) => {
+    if (choroplethLayer.additionalTooltipFields) {
+      return choroplethLayer.additionalTooltipFields.map((field) => ({
+        name: field,
+        value: formatTooltipFieldValue(choroplethMetadata[field])
+      }));
+    }
+    return [];
+  }) : [];
   const tooltipHeaderField = (choroplethLayer == null ? void 0 : choroplethLayer.tooltipHeaderField) || null;
   const handleMapClick = (e, i) => {
     const payload = formatMetadata(choroplethLayer, i);
     onMapClick({ e, payload });
   };
-  if (!map || !choroplethLayer || !choroplethLayer.geom) {
+  if (!map || !(choroplethLayer == null ? void 0 : choroplethLayer.geom)) {
     return null;
   }
   if (isThemeChanged) {
@@ -1526,9 +1563,17 @@ var LocalChoroplethLayer = (props) => {
   var _a, _b;
   const { width, height, map, choroplethLayer, isThemeChanged, setIsThemeChanged, onMapClick } = props;
   const cfgOpacity = Math.min(Math.max(choroplethLayer == null ? void 0 : choroplethLayer.choroplethOpacity, 0), 1);
-  const [geoJson, setGeoJson] = react_exports.useState({
-    features: [{ properties: { name: "" }, geometry: [] }]
-  });
+  const emptyFeature = {
+    type: "Feature",
+    properties: { name: "" },
+    geometry: null
+  };
+  const [geoJson, setGeoJson] = react_exports.useState(
+    {
+      type: "FeatureCollection",
+      features: [emptyFeature]
+    }
+  );
   const [validGeoJson, setValidGeoJson] = react_exports.useState(true);
   const [geoJsonError, setGeoJsonError] = react_exports.useState({
     message: ""
@@ -1550,50 +1595,55 @@ var LocalChoroplethLayer = (props) => {
     let propertyFormat = "name";
     if (choroplethLayer.areaIds && validGeoJson) {
       const propertyFormats = Object.keys(geoJson.features[0].properties);
-      for (let idx = 0; idx < geoJson.features.length; idx += 1) {
-        const shapeProperty = geoJson.features[idx].properties;
-        const formatCheck = propertyFormats.find(
-          (key) => shapeProperty[key] === choroplethLayer.areaIds[0]
-        );
-        if (formatCheck !== void 0) {
-          propertyFormat = formatCheck;
-          break;
-        }
+      const formatCheck = geoJson.features.flatMap(
+        (element) => propertyFormats.filter((key) => element.properties[key] === choroplethLayer.areaIds[0])
+      )[0];
+      if (formatCheck !== void 0) {
+        propertyFormat = formatCheck;
       }
     }
     return propertyFormat;
   }, [choroplethLayer.areaIds, geoJson]);
   const colors = (_a = choroplethLayer == null ? void 0 : choroplethLayer.dataColors) == null ? void 0 : _a.map((color) => (color == null ? void 0 : color.length) > 7 ? color.slice(0, 7) : color);
   const scaledOpacities = (_b = getScaledOpacities(choroplethLayer == null ? void 0 : choroplethLayer.dataColors, cfgOpacity)) != null ? _b : [];
-  const updatedAllChoroplethData = react_exports.useMemo(() => {
-    const allChoroplethData = [];
-    if (validGeoJson) {
-      for (let idx = 0; idx < geoJson.features.length; idx += 1) {
-        const el = geoJson.features[idx];
-        const choroplethData = {
-          color: choroplethLayer.choroplethEmptyAreaColor,
-          areaValue: "No Data",
-          opacity: cfgOpacity,
-          name: "",
-          idx: 0
-        };
-        choroplethData.name = el.properties[updatedPropertyFormat];
-        if (choroplethLayer.areaIds) {
-          const dataIdx = choroplethLayer.areaIds.indexOf(el.properties[updatedPropertyFormat]);
-          if (dataIdx !== -1) {
-            choroplethData.color = colors[dataIdx];
-            choroplethData.areaValue = choroplethLayer.areaValues[dataIdx];
-            choroplethData.opacity = scaledOpacities[dataIdx];
-            choroplethData.idx = dataIdx;
-          } else {
-            choroplethData.idx = choroplethLayer.areaIds.length;
-          }
-        }
-        allChoroplethData.push(choroplethData);
+  const buildChoroplethData = (el) => {
+    const choroplethData = {
+      color: choroplethLayer.choroplethEmptyAreaColor,
+      areaValue: "No Data",
+      opacity: cfgOpacity,
+      name: "",
+      idx: 0
+    };
+    const rawName = el.properties[updatedPropertyFormat];
+    choroplethData.name = typeof rawName === "string" || typeof rawName === "number" ? String(rawName) : "";
+    if (choroplethLayer.areaIds) {
+      const lookupValue = choroplethData.name;
+      const dataIdx = choroplethLayer.areaIds.indexOf(lookupValue);
+      if (dataIdx !== -1) {
+        choroplethData.color = colors[dataIdx];
+        choroplethData.areaValue = choroplethLayer.areaValues[dataIdx];
+        choroplethData.opacity = scaledOpacities[dataIdx];
+        choroplethData.idx = dataIdx;
+      } else {
+        choroplethData.idx = choroplethLayer.areaIds.length;
       }
     }
-    return allChoroplethData;
-  }, [choroplethLayer.areaIds, choroplethLayer.areaValues, colors, scaledOpacities]);
+    return choroplethData;
+  };
+  const updatedAllChoroplethData = react_exports.useMemo(() => {
+    if (!validGeoJson) return [];
+    return geoJson.features.map((el) => buildChoroplethData(el));
+  }, [
+    choroplethLayer.areaIds,
+    choroplethLayer.areaValues,
+    choroplethLayer.choroplethEmptyAreaColor,
+    colors,
+    scaledOpacities,
+    cfgOpacity,
+    validGeoJson,
+    geoJson.features,
+    updatedPropertyFormat
+  ]);
   const handleMapClick = (e, i) => {
     const payload = formatMetadata(choroplethLayer, i);
     onMapClick({ e, payload });
@@ -1601,15 +1651,14 @@ var LocalChoroplethLayer = (props) => {
   if (isThemeChanged) {
     setIsThemeChanged(false);
   }
-  const additionalFields = (choroplethLayer == null ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map(
-    (choroplethMetadata) => {
-      var _a2;
-      return (_a2 = choroplethLayer.additionalTooltipFields) == null ? void 0 : _a2.map((field) => ({
-        name: field,
-        value: choroplethMetadata[field]
-      }));
-    }
-  ) : [];
+  const additionalFields = (choroplethLayer == null ? void 0 : choroplethLayer.metadata) ? choroplethLayer.metadata.map((choroplethMetadata) => {
+    var _a2;
+    const tooltipFields = (_a2 = choroplethLayer.additionalTooltipFields) != null ? _a2 : [];
+    return tooltipFields.map((field) => ({
+      name: field,
+      value: formatTooltipFieldValue(choroplethMetadata[field])
+    }));
+  }) : [];
   return /* @__PURE__ */ react_exports.createElement("div", null, !validGeoJson && /* @__PURE__ */ react_exports.createElement(
     Message_default,
     {
@@ -1620,6 +1669,9 @@ var LocalChoroplethLayer = (props) => {
       message: geoJsonError.message
     }
   ), validGeoJson && updatedAllChoroplethData.map((el, i) => {
+    var _a2, _b2;
+    const geometry = (_a2 = geoJson.features[i]) == null ? void 0 : _a2.geometry;
+    const geomData = geometry && (geometry.type === "MultiPolygon" || geometry.type === "Polygon") ? geometry : null;
     return /* @__PURE__ */ react_exports.createElement(
       Choropleth,
       {
@@ -1630,12 +1682,12 @@ var LocalChoroplethLayer = (props) => {
         opacity: el.opacity,
         strokeColor: choroplethLayer.choroplethStrokeColor,
         areaId: el.name,
-        areaValue: el.areaValue,
+        areaValue: typeof el.areaValue === "number" ? el.areaValue : Number(el.areaValue),
         handleMapClick: (e) => handleMapClick(e, el.idx),
         isThemeChanged,
-        geomData: geoJson.features[i].geometry,
+        geomData,
         additionalFields: additionalFields[el.idx],
-        tooltipHeader: choroplethLayer.tooltipHeaderField && choroplethLayer.tooltipHeaderField[el.idx]
+        tooltipHeader: (_b2 = choroplethLayer.tooltipHeaderField) == null ? void 0 : _b2[el.idx]
       }
     );
   }));
@@ -1800,6 +1852,10 @@ var PureMap = (props) => {
         }
         setMapIsLoaded(true);
         setTimeout(() => {
+          var _a;
+          if ((_a = map == null ? void 0 : map.current) == null ? void 0 : _a.redraw) {
+            map.current.redraw();
+          }
           if (onMapLoad && typeof onMapLoad.exec === "function") {
             onMapLoad.exec();
           }
@@ -1871,6 +1927,9 @@ var PureMap = (props) => {
       defaultTileLight,
       defaultTileDark
     });
+    if (!isBaseTileConfig(mapStyle)) {
+      return;
+    }
     mapStyle.version = MAP_STYLE_VERSION_NUMBER;
     if (map.current) {
       const curr = map.current.getStyle();
@@ -2976,7 +3035,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "28.2.1 - b6faf8893"
+  "data-splunk-visualization-version": "28.3.0 - 843e0f60b"
 })`
     position: relative;
     width: 100%;
@@ -3006,14 +3065,18 @@ var FixSizeItem = styled_components_default.div.attrs(
   ({
     width,
     height
-  }) => ({
-    style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), height && { height: (0, style_exports.toPx)(height) })
-  })
+  }) => {
+    const validHeight = typeof height === "number" ? Math.max(height, 1) : height;
+    return {
+      style: __spreadValues(__spreadValues({}, width && { width: (0, style_exports.toPx)(width) }), validHeight && { height: (0, style_exports.toPx)(validHeight) })
+    };
+  }
 )`
     position: relative;
     flex-direction: column;
     flex: 1;
     display: flex;
+    overflow: hidden !important;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
 var ItemContent = styled_components_default.div`
@@ -3026,6 +3089,7 @@ var FixSizeItemContent = styled_components_default.div`
     flex: 1;
     position: relative;
     box-sizing: border-box;
+    overflow: hidden !important;
 `;
 var withFixedSizeContainer = (Viz) => {
   const FixedSizeContainer = (props) => {
@@ -3043,7 +3107,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "28.2.1 - b6faf8893",
+        "data-splunk-visualization-version": "28.3.0 - 843e0f60b",
         width,
         height,
         backgroundColor
@@ -3614,9 +3678,14 @@ var getAnnotationsForCanvas = ({
 var StyledTriangle = styled_components_default(Triangle_default)`
     color: ${(props) => props.eventColor || variables_default.severityColorNotice(props)};
 `;
-var triangleEventAnnotationRenderer = ({ event }) => {
+var triangleEventAnnotationRenderer = ({
+  event,
+  dimensions
+}) => {
   const eventWithColor = event;
   return react_default.createElement(StyledTriangle, {
+    width: `${dimensions.width}px`,
+    height: `${dimensions.height}px`,
     viewBox: "0 0 24 24",
     variant: "filled",
     eventColor: eventWithColor.color
@@ -3706,12 +3775,15 @@ var getFieldName = (field) => {
 var getFieldNames = (fields) => {
   return fields.map((field) => getFieldName(field));
 };
-var getXScaleConfig = (label) => {
+var getXScaleConfig = (label, xAxisLabelVisibility) => {
   const xConfig = { x: {} };
   xConfig.x.label = label;
+  if (xAxisLabelVisibility === "hide") {
+    xConfig.x.hideLabels = true;
+  }
   return xConfig;
 };
-var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
+var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility) => {
   const scaleType = yAxisScale != null ? yAxisScale : "linear";
   const yConfig = { y: {} };
   yConfig.y.label = label;
@@ -3724,9 +3796,12 @@ var getYScaleConfig = (label, yAxisAbbreviation, yAxisScale) => {
   } else {
     yConfig.y.width = label && label.length > 0 ? 30 : 10;
   }
+  if (yAxisLabelVisibility === "hide") {
+    yConfig.y.hideLabels = true;
+  }
   return yConfig;
 };
-var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger) => {
+var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInteger, y2AxisLabelVisibility) => {
   const y2Config = { y2: {} };
   const scaleType = axisScale != null ? axisScale : "linear";
   y2Config.y2.label = label;
@@ -3738,9 +3813,12 @@ var getY2ScaleConfig = (label, axisAbbreviation, axisScale, roundAxisLabelsToInt
   } else if (roundAxisLabelsToInteger) {
     y2Config.y2.tickFmt = (v) => roundAxisLabelsToInteger ? Math.round(v).toString() : v.toString();
   }
+  if (y2AxisLabelVisibility === "hide") {
+    y2Config.y2.hideLabels = true;
+  }
   return y2Config;
 };
-var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode) => {
+var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay) => {
   const seriesConfig = {};
   let spanGaps;
   let replaceNullsWithZero;
@@ -3772,6 +3850,9 @@ var getSeriesOverrides = (yfields, y2fields, lineWidth, overlayFields, y2Enabled
     if (overlayFields == null ? void 0 : overlayFields.includes(field)) {
       seriesConfig[field].type = "line";
     }
+    if (markerDisplay !== void 0) {
+      seriesConfig[field].markerDisplay = markerDisplay;
+    }
     if (replaceNullsWithZero !== void 0) {
       seriesConfig[field].replaceNullsWithZero = replaceNullsWithZero;
     }
@@ -3788,27 +3869,30 @@ var TimeSeriesChartContainer = styled_components_default.div`
         position: absolute !important; // This is needed for canvas element export pdf/png to work correctly
     }
 `;
-var handleClick = (chartEvent, props) => {
+var handleClick = (chartEvent, onClick) => {
   const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(chartEvent, "value", "seriesKey")), {
     name: chartEvent.seriesKey
   });
   delete payload.seriesKey;
-  const clickHandler = props == null ? void 0 : props.onClick;
-  if (clickHandler) {
-    clickHandler({
+  if (chartEvent.rowContext) {
+    Object.keys(chartEvent.rowContext).forEach((fieldName) => {
+      payload[`row.${fieldName}.value`] = chartEvent.rowContext[fieldName];
+    });
+  }
+  if (onClick) {
+    onClick({
       type: "point.click",
       originalEvent: chartEvent,
       payload
     });
   }
 };
-var handleLegendClick = (chartEvent, props) => {
+var handleLegendClick = (chartEvent, onClick) => {
   const payload = {
     name: chartEvent
   };
-  const clickHandler = props == null ? void 0 : props.onClick;
-  if (clickHandler) {
-    clickHandler({
+  if (onClick) {
+    onClick({
       type: "legend.click",
       originalEvent: chartEvent,
       payload
@@ -3816,7 +3900,21 @@ var handleLegendClick = (chartEvent, props) => {
   }
 };
 var TimeSeriesChartWrapper = (props) => {
-  const { width, height, chartData, options, userLocale, annotationX, annotationLabel, annotationColor } = props;
+  const {
+    width,
+    height,
+    chartData,
+    options,
+    userLocale,
+    annotationX,
+    annotationLabel,
+    annotationColor,
+    legendDisplay,
+    markerDisplay,
+    onClick,
+    onPointMouseOver,
+    onPointMouseOut
+  } = props;
   const {
     backgroundColor,
     seriesColors: seriesColorsStr,
@@ -3827,6 +3925,9 @@ var TimeSeriesChartWrapper = (props) => {
     "axisTitleX.visibility": xAxisTitleVisibility,
     "axisTitleY.visibility": yAxisTitleVisibility,
     "axisTitleY2.visibility": y2AxisTitleVisibility,
+    "axisLabelsX.majorLabelVisibility": xAxisLabelVisibility,
+    "axisLabelsY.majorLabelVisibility": yAxisLabelVisibility,
+    "axisLabelsY2.majorLabelVisibility": y2AxisLabelVisibility,
     "axisY.abbreviation": yAxisAbbreviation,
     "axisY.scale": yAxisScale,
     "axisY2.abbreviation": y2AxisAbbreviation,
@@ -3863,11 +3964,17 @@ var TimeSeriesChartWrapper = (props) => {
   const fieldsForY2Axis = y2Fields.length > 0 ? y2Fields : overlayFields;
   let y2AxisTitle = getComputedAxisTitles(y2AxisTitleText, fieldsForY2Axis, y2AxisTitleVisibility);
   y2AxisTitle = ellipsisAxisTitle(y2AxisTitle, containerHeight);
-  const xScaleConfig = getXScaleConfig(xAxisTitle);
-  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale);
+  const xScaleConfig = getXScaleConfig(xAxisTitle, xAxisLabelVisibility);
+  const yScaleConfig = getYScaleConfig(yAxisTitle, yAxisAbbreviation, yAxisScale, yAxisLabelVisibility);
   let y2ScaleConfig = {};
   if (y2Enabled) {
-    y2ScaleConfig = getY2ScaleConfig(y2AxisTitle, y2AxisAbbreviation, y2AxisScale, y2IntegerUnits);
+    y2ScaleConfig = getY2ScaleConfig(
+      y2AxisTitle,
+      y2AxisAbbreviation,
+      y2AxisScale,
+      y2IntegerUnits,
+      y2AxisLabelVisibility
+    );
   }
   const uplotContainerElement = (0, react_exports.useRef)(null);
   const seriesDataFormatted = [
@@ -3876,24 +3983,87 @@ var TimeSeriesChartWrapper = (props) => {
   ];
   chartData.fields = filteredChartData.fields;
   chartData.columns = seriesDataFormatted;
-  const seriesOverrides = getSeriesOverrides(
-    yFields,
-    y2Fields,
-    lineWidth,
-    overlayFields,
-    y2Enabled,
-    nullValueMode
+  const seriesOverrides = (0, react_exports.useMemo)(
+    () => getSeriesOverrides(
+      yFields,
+      y2Fields,
+      lineWidth,
+      overlayFields,
+      y2Enabled,
+      nullValueMode,
+      markerDisplay
+    ),
+    [yFields, y2Fields, lineWidth, overlayFields, y2Enabled, nullValueMode, markerDisplay]
+  );
+  const chartingEventAnnotations = (0, react_exports.useMemo)(
+    () => getAnnotationsForCanvas({
+      annotationX,
+      annotationColor,
+      annotationLabel
+    }),
+    [annotationX, annotationColor, annotationLabel]
+  );
+  const scaleConfig = (0, react_exports.useMemo)(
+    () => __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig),
+    [xScaleConfig, yScaleConfig, y2ScaleConfig]
+  );
+  const legend = (0, react_exports.useMemo)(() => getLegend({ legendDisplay }), [legendDisplay]);
+  const handleChartClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleClick(event, onClick);
+      }
+    },
+    [onClick]
+  );
+  const handleChartLegendClick = react_exports.useCallback(
+    (event) => {
+      if (onClick) {
+        handleLegendClick(event, onClick);
+      }
+    },
+    [onClick]
+  );
+  const lastPayloadRef = react_exports.useRef(null);
+  const lastOriginalEventRef = react_exports.useRef(null);
+  const handleChartCrosshairChange = react_exports.useCallback(
+    (event) => {
+      if (onPointMouseOver || onPointMouseOut) {
+        if (!event) {
+          if (onPointMouseOut && lastPayloadRef.current) {
+            onPointMouseOut({
+              type: "point.mouseout",
+              originalEvent: lastOriginalEventRef.current,
+              payload: lastPayloadRef.current
+            });
+          }
+          return;
+        }
+        const payload = __spreadProps(__spreadValues({}, (0, lodash_exports.pick)(event, "value", "seriesKey", "time", "index", "seriesIndex")), {
+          name: event.seriesKey
+        });
+        delete payload.seriesKey;
+        if (event.rowContext) {
+          Object.keys(event.rowContext).forEach((fieldName) => {
+            payload[`row.${fieldName}.value`] = event.rowContext[fieldName];
+          });
+        }
+        lastPayloadRef.current = payload;
+        lastOriginalEventRef.current = event;
+        if (onPointMouseOver) {
+          onPointMouseOver({
+            type: "point.mouseover",
+            originalEvent: event,
+            payload
+          });
+        }
+      }
+    },
+    [onPointMouseOver, onPointMouseOut]
   );
-  const chartingEventAnnotations = getAnnotationsForCanvas({
-    annotationX,
-    annotationColor,
-    annotationLabel
-  });
-  const MemoizedChart = react_exports.memo(visualization_canvas_exports.TimeSeriesChart);
-  const scaleConfig = __spreadValues(__spreadValues(__spreadValues({}, xScaleConfig), yScaleConfig), y2ScaleConfig);
   const memoizedChart = (0, react_exports.useMemo)(
     () => /* @__PURE__ */ react_exports.createElement(
-      MemoizedChart,
+      visualization_canvas_exports.TimeSeriesChart,
       {
         data: chartData,
         width: containerWidth,
@@ -3901,34 +4071,39 @@ var TimeSeriesChartWrapper = (props) => {
         seriesColors,
         seriesColorsByField,
         seriesConfig: seriesOverrides,
-        legend: getLegend(props),
+        legend,
         scaleConfig,
         timestampFormat: "expanded",
-        onCrosshairClick: (event) => handleClick(event, props),
-        onSeriesClick: (event) => handleLegendClick(event, props),
+        onCrosshairClick: onClick ? handleChartClick : void 0,
+        onCrosshairChange: onPointMouseOver || onPointMouseOut ? handleChartCrosshairChange : void 0,
+        onSeriesClick: onClick ? handleChartLegendClick : void 0,
         userLocale,
         events: chartingEventAnnotations,
         eventsConfig: { renderer: triangleEventAnnotationRenderer }
       }
     ),
     [
-      MemoizedChart,
       chartData,
       containerWidth,
       containerHeight,
       seriesColors,
       seriesColorsByField,
       seriesOverrides,
-      lineWidth,
-      props,
+      legend,
       scaleConfig,
       userLocale,
-      chartingEventAnnotations
+      chartingEventAnnotations,
+      onClick,
+      handleChartClick,
+      onPointMouseOver,
+      onPointMouseOut,
+      handleChartCrosshairChange,
+      handleChartLegendClick
     ]
   );
   const memoizedVisualization = (0, react_exports.useMemo)(() => {
     return /* @__PURE__ */ react_exports.createElement(VizStyleWrapper_default, { backgroundColor }, memoizedChart);
-  }, [backgroundColor]);
+  }, [backgroundColor, memoizedChart]);
   return /* @__PURE__ */ react_exports.createElement(
     TimeSeriesChartContainer,
     {
@@ -3944,6 +4119,7 @@ var TimeSeriesChartWrapper = (props) => {
 var TimeSeriesChartWrapper_default = TimeSeriesChartWrapper;
 
 // src/common/withDashboardViz.tsx
+var SanitizedTimeSeriesChartWrapper = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
 var withDashboardViz = (opts) => {
   const {
     ReactViz,
@@ -3952,6 +4128,7 @@ var withDashboardViz = (opts) => {
     },
     computeVizPropsBeforeEval = () => {
     },
+    computeDataFrames,
     disableEditModeCover,
     useIconPlaceholder: useIconPlaceholder2
   } = opts;
@@ -4080,11 +4257,19 @@ var withDashboardViz = (opts) => {
             );
             setDataFramesInState(dataFrames);
           }
+          let mergedFrames = dataFrames;
+          if (computeDataFrames && dataFrames) {
+            const derivedFrames = computeDataFrames({
+              dataSources: downsampledDataSources,
+              options: optionsToEvaluate.options
+            });
+            mergedFrames = __spreadValues(__spreadValues({}, dataFrames), derivedFrames);
+          }
           const result = Options_exports.Options.evaluate(
             optionsToEvaluate,
             downsampledDataSources,
             themeFunc,
-            dataFrames,
+            mergedFrames,
             getFeatureFlag(featureFlagContext, "visualizations_bypassCloneDeepOptionScope")
           );
           return result;
@@ -4172,7 +4357,7 @@ var withDashboardViz = (opts) => {
           });
         }
         eventCallbackProps[eventCallbackPropName] = (ev) => {
-          if (ev && ev.payload) {
+          if (ev == null ? void 0 : ev.payload) {
             payload = __spreadValues({}, ev.payload);
           }
           return onEventTrigger({
@@ -4196,10 +4381,7 @@ var withDashboardViz = (opts) => {
     if (useAsyncEvaluatedOptions && Object.keys(evaluatedOptionsToUse).length === 0) {
       return null;
     }
-    let SanitizedViz = SanitizedReactViz;
-    if (isAcceleratedRenderOn) {
-      SanitizedViz = (0, SanitizeProps_exports.withSanitizedProps)(TimeSeriesChartWrapper_default);
-    }
+    const SanitizedViz = isAcceleratedRenderOn ? SanitizedTimeSeriesChartWrapper : SanitizedReactViz;
     return /* @__PURE__ */ react_exports.createElement(
       SanitizedViz,
       __spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, SplunkVisualization_default.defaults), {