@splunk/visualizations 27.4.0 → 28.0.0

package/Map.js

@@ -1,6 +1,7 @@
 /* Copyright © 2020 Splunk Inc.
 SPLUNK CONFIDENTIAL – Use or disclosure of this material in whole or
 in part without a valid written license from Splunk Inc. is PROHIBITED. */
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __defProps = Object.defineProperties;
@@ -207,7 +208,9 @@ __reExport(maplibre_gl_exports2, require("maplibre-gl/dist/maplibre-gl.css"));
 var maplibre_gl_default2 = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
 // src/Map/PureMap/PureMapContainer.tsx
-var PureMapContainer = styled_components_default.div.attrs({ "data-test": "puremap-container" })`
+var PureMapContainer = styled_components_default.div.attrs({
+  "data-test": "puremap-container"
+})`
     ${maplibre_gl_default2}
     overflow: hidden;
     position: relative;
@@ -232,7 +235,9 @@ var PureMapContainer = styled_components_default.div.attrs({ "data-test": "purem
             border-radius: 4px;
             margin: 8px 0px;
             background-color: ${(props) => props.controlBackgroundColor};
-            box-shadow: 0px 26px 103px rgba(0, 0, 0, 0.64), 0px 11px 18px rgba(0, 0, 0, 0.32),
+            box-shadow:
+                0px 26px 103px rgba(0, 0, 0, 0.64),
+                0px 11px 18px rgba(0, 0, 0, 0.32),
                 0px 3px 6px rgba(0, 0, 0, 0.3);
             & button {
                 width: 40px;
@@ -261,7 +266,9 @@ var PureMapContainer = styled_components_default.div.attrs({ "data-test": "purem
         border-radius: 4px;
         margin: 0;
         background-color: ${(props) => props.controlBackgroundColor};
-        box-shadow: 0px 26px 103px rgba(0, 0, 0, 0.13), 0px 11px 18px rgba(0, 0, 0, 0.06),
+        box-shadow:
+            0px 26px 103px rgba(0, 0, 0, 0.13),
+            0px 11px 18px rgba(0, 0, 0, 0.06),
             0px 3px 6px rgba(0, 0, 0, 0.06);
         .maplibregl-ctrl-scale {
             background-color: ${(props) => props.controlBackgroundColor};
@@ -332,7 +339,11 @@ var getTilePreset = ({
   const tileConfigs = [].concat(defaultTileConfig).concat(customTileConfig);
   (0, lodash_exports.forEach)(tileConfigs, (tileConfig) => {
     const key = tileConfig == null ? void 0 : tileConfig.key;
-    const updatedConfig = __spreadProps(__spreadValues({ theme: "all" }, tileConfig), { version: MAP_STYLE_VERSION_NUMBER });
+    const updatedConfig = __spreadProps(__spreadValues({
+      theme: "all"
+    }, tileConfig), {
+      version: MAP_STYLE_VERSION_NUMBER
+    });
     tilePreset[key] = updatedConfig;
   });
   if (defaultTileConfig.length > 0) {
@@ -629,14 +640,59 @@ var formatMetadata = (choroplethLayer, i) => {
   }, base);
 };
 
+// esm-externals:@splunk/visualizations-shared/iconUtils
+var iconUtils_exports = {};
+__export(iconUtils_exports, {
+  default: () => iconUtils_default
+});
+var defaultImport19 = __toESM(require("@splunk/visualizations-shared/iconUtils"));
+__reExport(iconUtils_exports, require("@splunk/visualizations-shared/iconUtils"));
+var iconUtils_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+
+// esm-externals:@splunk/visualizations-shared/RemoteIcon
+var RemoteIcon_exports = {};
+__export(RemoteIcon_exports, {
+  default: () => RemoteIcon_default
+});
+var defaultImport20 = __toESM(require("@splunk/visualizations-shared/RemoteIcon"));
+__reExport(RemoteIcon_exports, require("@splunk/visualizations-shared/RemoteIcon"));
+var RemoteIcon_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+
+// esm-externals:@splunk/visualization-context/FeatureFlagContext
+var FeatureFlagContext_exports = {};
+__export(FeatureFlagContext_exports, {
+  default: () => FeatureFlagContext_default
+});
+var defaultImport21 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
+var FeatureFlagContext_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+
+// esm-externals:@splunk/ui-utils/id
+var id_exports = {};
+__export(id_exports, {
+  default: () => id_default
+});
+var defaultImport22 = __toESM(require("@splunk/ui-utils/id"));
+__reExport(id_exports, require("@splunk/ui-utils/id"));
+var id_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+
 // esm-externals:@splunk/react-ui/Popover
 var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport19 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport23 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+var Popover_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport24 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // src/Map/PureMap/Tooltip.tsx
 var StyledPopover = styled_components_default(Popover_default)`
@@ -645,6 +701,7 @@ var StyledPopover = styled_components_default(Popover_default)`
 `;
 var StyledTable = styled_components_default.table`
     margin: 2px 6px 2px 6px;
+    table-layout: fixed;
     width: calc(100% - 12px);
 `;
 var StyledTitleColumn = styled_components_default.td`
@@ -662,6 +719,30 @@ var StyledColorBlock = styled_components_default.div`
     height: 11px;
     transform: translateY(1px);
 `;
+var StyledFieldLabel = styled_components_default.span`
+    display: inline-block;
+    white-space: nowrap;
+`;
+var StyledIconWrapper = styled_components_default.span`
+    margin-left: 4px;
+    display: inline-block;
+    vertical-align: middle;
+`;
+var StyledTooltipHeader = styled_components_default.thead`
+    th {
+        height: 16px;
+        color: ${themes_exports.variables.contentColorActive};
+        padding: 0;
+    }
+
+    span {
+        display: block;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        width: 100%;
+    }
+`;
 var convertDegToDMS = (decimalDegree, type) => {
   const truncate = (n) => n > 0 ? Math.floor(n) : Math.ceil(n);
   const absoluteDegree = Math.abs(decimalDegree);
@@ -692,18 +773,25 @@ var Tooltip = ({
   areaId,
   areaValue,
   additionalFields = [],
-  showCoordinates = true
-}) => /* @__PURE__ */ react_exports.createElement(
-  StyledPopover,
-  {
-    open,
-    animation: false,
-    anchor,
-    "data-test": "map-marker-tooltip",
-    defaultPlacement: "above"
-  },
-  /* @__PURE__ */ react_exports.createElement(StyledTable, null, /* @__PURE__ */ react_exports.createElement("tbody", null, areaId && areaValue && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "area-id" }, areaId), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "area-value" }, areaValue)), Boolean(showCoordinates && latitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Latitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "latitude" }, convertDegToDMS(latitude, "latitude"))), Boolean(showCoordinates && longitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Longitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "longitude" }, convertDegToDMS(longitude, "longitude"))), additionalFields.filter(({ value }) => value && String(value) !== "0").map(({ name, value, color }, index) => /* @__PURE__ */ react_exports.createElement("tr", { key: String(index) }, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "field-title" }, color ? /* @__PURE__ */ react_exports.createElement(StyledColorBlock, { "data-test": "field-color", color }) : null, name), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "field-value" }, value)))))
-);
+  showCoordinates = true,
+  tooltipHeader = null
+}) => {
+  const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+  const isTooltipIconFlagEnabled = Boolean(
+    featureFlagContext && featureFlagContext.visualizations_enableTooltipIcon
+  );
+  return /* @__PURE__ */ react_exports.createElement(
+    StyledPopover,
+    {
+      open,
+      animation: false,
+      anchor,
+      "data-test": "map-marker-tooltip",
+      defaultPlacement: "above"
+    },
+    /* @__PURE__ */ react_exports.createElement(StyledTable, null, tooltipHeader && /* @__PURE__ */ react_exports.createElement(StyledTooltipHeader, { "data-test": "tooltip-header" }, /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement("th", { colSpan: 2 }, /* @__PURE__ */ react_exports.createElement("span", { "data-test": "tooltip-header-value" }, tooltipHeader)))), /* @__PURE__ */ react_exports.createElement("tbody", null, areaId && areaValue && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "area-id" }, areaId), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "area-value" }, areaValue)), Boolean(showCoordinates && latitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Latitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "latitude" }, convertDegToDMS(latitude, "latitude"))), Boolean(showCoordinates && longitude) && /* @__PURE__ */ react_exports.createElement("tr", null, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, null, (0, i18n_exports._)("Longitude")), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "longitude" }, convertDegToDMS(longitude, "longitude"))), additionalFields.filter(({ value }) => value && String(value) !== "0").map(({ name, value, color, icon }) => /* @__PURE__ */ react_exports.createElement("tr", { key: (0, id_exports.createDOMID)() }, /* @__PURE__ */ react_exports.createElement(StyledTitleColumn, { "data-test": "field-title" }, color ? /* @__PURE__ */ react_exports.createElement(StyledColorBlock, { "data-test": "field-color", color }) : null, /* @__PURE__ */ react_exports.createElement(StyledFieldLabel, null, name, isTooltipIconFlagEnabled && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) ? /* @__PURE__ */ react_exports.createElement(StyledIconWrapper, { "data-test": "field-icon" }, /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: 16, height: 16 })) : null)), /* @__PURE__ */ react_exports.createElement(StyledValueColumn, { "data-test": "field-value" }, value)))))
+  );
+};
 var Tooltip_default = Tooltip;
 
 // src/Map/PureMap/MarkerWrapper.tsx
@@ -714,6 +802,7 @@ var MarkerWrapper = (_a) => {
     areaId,
     areaValue,
     additionalFields = [],
+    tooltipHeader = null,
     map,
     isChoroplethTooltipOpen,
     children,
@@ -724,6 +813,7 @@ var MarkerWrapper = (_a) => {
     "areaId",
     "areaValue",
     "additionalFields",
+    "tooltipHeader",
     "map",
     "isChoroplethTooltipOpen",
     "children",
@@ -732,9 +822,10 @@ var MarkerWrapper = (_a) => {
   const container = react_exports.useRef();
   const marker = react_exports.useRef();
   const [isTooltipOpen, setTooltipOpenStatus] = react_exports.useState(false);
-  const isChoroplethTooltip = react_exports.useCallback(() => isChoroplethTooltipOpen !== void 0, [
-    isChoroplethTooltipOpen
-  ]);
+  const isChoroplethTooltip = react_exports.useCallback(
+    () => isChoroplethTooltipOpen !== void 0,
+    [isChoroplethTooltipOpen]
+  );
   const openTooltip = react_exports.useCallback(() => setTooltipOpenStatus(true), []);
   const closeTooltip = react_exports.useCallback(() => setTooltipOpenStatus(false), []);
   const cleanupMarker = react_exports.useCallback(() => {
@@ -763,7 +854,9 @@ var MarkerWrapper = (_a) => {
   return /* @__PURE__ */ react_exports.createElement("div", { style: { visibility: isChoroplethTooltip() ? "hidden" : "visible" } }, /* @__PURE__ */ react_exports.createElement(
     "div",
     __spreadValues({
-      style: { visibility: isChoroplethTooltip() ? "hidden" : "visible" },
+      style: {
+        visibility: isChoroplethTooltip() ? "hidden" : "visible"
+      },
       ref: container,
       "data-test": "map-marker",
       onMouseOver: openTooltip,
@@ -782,7 +875,8 @@ var MarkerWrapper = (_a) => {
       areaId,
       areaValue,
       additionalFields,
-      showCoordinates
+      showCoordinates,
+      tooltipHeader
     }
   )));
 };
@@ -791,6 +885,7 @@ var MarkerWrapper_default = MarkerWrapper;
 // src/Map/PureMap/BubbleLayer.tsx
 var GEO_BOUND_PREFIX = "_geo_bounds_";
 var GEO_LAT_AND_LONG_FIELD = ["_geo_long_field", "_geo_lat_field"];
+var ICON_DISPLAY_CUTOFF = 16;
 var PieSegment = react_exports.memo(
   ({
     start,
@@ -859,10 +954,16 @@ var Bubble = react_exports.memo(
     longitude,
     bubbleSize,
     additionalFields = [],
+    tooltipHeader = null,
     map,
     handleMapClick,
+    icon,
     showCoordinates
   }) => {
+    const featureFlagContext = react_exports.useContext(FeatureFlagContext_default);
+    const isBubbleMapIconFlagEnabled = Boolean(
+      featureFlagContext && featureFlagContext.visualizations_enableBubbleMapIcon
+    );
     const onBubbleClick = react_exports.useCallback(
       (e, name, value) => {
         handleMapClick(e, name, value);
@@ -870,21 +971,20 @@ var Bubble = react_exports.memo(
       },
       [handleMapClick]
     );
+    const allZeros = originalValues.every((v) => v === 0);
+    const values = originalValues.map((v) => v > 0 ? v : 0);
+    const total = values.reduce((totalValue, v) => totalValue + v, 0);
+    const radius = matchBubbleSize(valueRange, total);
     const bubble = react_exports.useMemo(() => {
-      const allZeros = originalValues.every((v) => v === 0);
-      if (allZeros || !originalValues.length) {
-        return null;
-      }
-      const values = originalValues.map((v) => v > 0 ? v : 0);
+      if (allZeros || !originalValues.length) return null;
       const offsets = [];
-      let total = 0;
+      let runningTotal = 0;
       values.forEach((count) => {
-        offsets.push(total);
-        total += count;
+        offsets.push(runningTotal);
+        runningTotal += count;
       });
-      const radius = matchBubbleSize(valueRange, total);
       const width = radius * 2;
-      return /* @__PURE__ */ react_exports.createElement("svg", { width, height: width, viewBox: `-3 -3 ${width + 6} ${width + 6}` }, isPie ? /* @__PURE__ */ react_exports.createElement(
+      return /* @__PURE__ */ react_exports.createElement("svg", { width, height: width, viewBox: `-3 -3 ${width + 6} ${width + 6}` }, isPie && /* @__PURE__ */ react_exports.createElement(
         "circle",
         {
           cx: radius,
@@ -895,10 +995,10 @@ var Bubble = react_exports.memo(
           stroke: themeColor,
           strokeOpacity: 0.3
         }
-      ) : null, values.map((v, i) => /* @__PURE__ */ react_exports.createElement(
+      ), values.map((v, i) => /* @__PURE__ */ react_exports.createElement(
         PieSegment,
         {
-          key: String(i),
+          key: (0, id_exports.createDOMID)(),
           start: offsets[i] / total,
           end: (offsets[i] + v) / total,
           radius,
@@ -908,7 +1008,18 @@ var Bubble = react_exports.memo(
           handleBubbleClick: onBubbleClick
         }
       )));
-    }, [bubbleSize, colors, isPie, onBubbleClick, originalValues, themeColor, valueRange]);
+    }, [
+      bubbleSize,
+      colors,
+      isPie,
+      onBubbleClick,
+      originalValues,
+      themeColor,
+      allZeros,
+      radius,
+      total,
+      values
+    ]);
     if (!bubble) {
       return null;
     }
@@ -918,11 +1029,26 @@ var Bubble = react_exports.memo(
         longitude,
         latitude,
         additionalFields: [...bubbleSize, ...additionalFields],
+        tooltipHeader,
         map,
         "data-test-type": "bubble",
         showCoordinates
       },
-      bubble
+      bubble,
+      isBubbleMapIconFlagEnabled && radius >= ICON_DISPLAY_CUTOFF && icon && ((0, iconUtils_exports.isRemoteIcon)(icon) || (0, iconUtils_exports.isDataURI)(icon)) && /* @__PURE__ */ react_exports.createElement(
+        "div",
+        {
+          "data-test": "bubble-icon-wrapper",
+          style: {
+            position: "absolute",
+            top: `${radius}px`,
+            left: `${radius}px`,
+            transform: "translate(-50%, -50%)",
+            pointerEvents: "none"
+          }
+        },
+        /* @__PURE__ */ react_exports.createElement(RemoteIcon_default, { iconURL: icon, width: radius * 0.8, height: radius * 0.8 })
+      )
     );
   }
 );
@@ -931,13 +1057,14 @@ var BubbleLayer = (props) => {
   const { bubbleLayer, themeColorScheme, map, zoom, onMapClick, showCoordinates } = props;
   bubbleLayer.seriesColors = bubbleLayer.seriesColors || DEFAULT_SERIES_COLORS;
   bubbleLayer.bubbleSize = bubbleLayer.bubbleSize || [];
+  bubbleLayer.icon = bubbleLayer.icon || [];
   const bakedData = react_exports.useMemo(() => bakeBubbleData(bubbleLayer), [bubbleLayer]);
   const staticColors = react_exports.useMemo(
     () => getStaticColors(bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors),
     [bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors]
   );
   const { data = [], dataRange = [], resultLimit, bubbleSizeFields, isPie } = bakedData != null ? bakedData : {};
-  const { additionalTooltipFields = [] } = bubbleLayer;
+  const { additionalTooltipFields = [], tooltipHeaderFieldName = null } = bubbleLayer;
   const roundedZoom = Math.round(zoom);
   const themeColor = themeColorScheme === "light" ? "#ffffff" : "#1a1c20";
   const dynamicColors = bubbleLayer.dataColors;
@@ -978,10 +1105,15 @@ var BubbleLayer = (props) => {
       value,
       color: colors[index]
     }));
-    const additionalFields = bubbleLayer.metadata ? additionalTooltipFields.map((field) => ({
-      name: field,
-      value: datum.data.metadata[field]
-    })) : [];
+    const additionalFields = bubbleLayer.metadata ? additionalTooltipFields.map((field) => {
+      var _a;
+      return {
+        name: field,
+        value: datum.data.metadata[field],
+        icon: (_a = bubbleLayer.tooltipFieldIcons) == null ? void 0 : _a[field]
+      };
+    }) : [];
+    const tooltipHeaderField = bubbleLayer.metadata && datum.data.metadata[tooltipHeaderFieldName];
     return /* @__PURE__ */ react_exports.createElement(
       Bubble,
       {
@@ -995,8 +1127,10 @@ var BubbleLayer = (props) => {
         latitude,
         bubbleSize,
         additionalFields,
+        tooltipHeader: tooltipHeaderField,
         map,
         handleMapClick: (e, name, value) => handleMapClick(e, name, value, i),
+        icon: bubbleLayer.icon[datum.idx],
         showCoordinates
       }
     );
@@ -1038,7 +1172,8 @@ var Marker2 = react_exports.memo(
     map,
     additionalFields,
     handleLayerClick,
-    showCoordinates
+    showCoordinates,
+    tooltipHeader
   }) => {
     const icon = react_exports.useMemo(
       () => /* @__PURE__ */ react_exports.createElement(MarkerIcon, { color, theme: themeColorScheme, onClick: handleLayerClick }),
@@ -1052,7 +1187,8 @@ var Marker2 = react_exports.memo(
         map,
         additionalFields,
         "data-test-type": "marker",
-        showCoordinates
+        showCoordinates,
+        tooltipHeader
       },
       icon
     );
@@ -1064,7 +1200,8 @@ var StyledMarkerWrapper2 = styled_components_default(MarkerWrapper_default)`
     height: 28px;
     cursor: pointer;
 `;
-var generateMarkerWrapperProps = (markerLayer, onMapClick = lodash_exports.noop, showCoordinates) => {
+var generateMarkerWrapperProps = (markerLayer, showCoordinates, onMapClick = lodash_exports.noop) => {
+  var _a;
   const latArray = markerLayer.latitude;
   const lonArray = markerLayer.longitude;
   const isStaticColor = !markerLayer.dataColors;
@@ -1078,13 +1215,14 @@ var generateMarkerWrapperProps = (markerLayer, onMapClick = lodash_exports.noop,
     const staticColor = markerLayer.seriesColors && (0, colorUtils_exports.isColor)(markerLayer.seriesColors[0]) ? markerLayer.seriesColors[0] : DEFAULT_CLUSTER_COLOR;
     const dynamicColor = markerLayer.dataColors && (0, colorUtils_exports.isColor)(markerLayer.dataColors[i]) ? markerLayer.dataColors[i] : DEFAULT_CLUSTER_COLOR;
     const color = isStaticColor ? staticColor : dynamicColor;
-    const additionalFields = markerLayer.metadata ? markerLayer.additionalTooltipFields.map((field) => ({
+    const tooltipHeader = markerLayer.tooltipHeaderField && markerLayer.tooltipHeaderField[i];
+    const additionalFields = ((_a = markerLayer.metadata) == null ? void 0 : _a[i]) ? markerLayer.additionalTooltipFields.map((field) => ({
       name: field,
       value: markerLayer.metadata[i][field]
     })) : [];
     const handleLayerClick = (e) => {
-      var _a;
-      const metadata = (_a = markerLayer == null ? void 0 : markerLayer.metadata[i]) != null ? _a : {};
+      var _a2;
+      const metadata = (_a2 = markerLayer == null ? void 0 : markerLayer.metadata[i]) != null ? _a2 : {};
       const payload = Object.keys(metadata).reduce((acc, curr) => {
         const key = `row.${curr}.value`;
         const value = String(metadata[curr]);
@@ -1097,6 +1235,7 @@ var generateMarkerWrapperProps = (markerLayer, onMapClick = lodash_exports.noop,
       longitude: lonArray[i],
       color,
       additionalFields,
+      tooltipHeader,
       handleLayerClick,
       showCoordinates
     });
@@ -1107,7 +1246,7 @@ var MarkerLayer = (props) => {
   const { map, themeColorScheme, markerLayer, onMapClick, showCoordinates = true } = props;
   markerLayer.seriesColors = markerLayer.seriesColors || DEFAULT_SERIES_COLORS;
   const markerPropsList = react_exports.useMemo(
-    () => generateMarkerWrapperProps(markerLayer, onMapClick, showCoordinates),
+    () => generateMarkerWrapperProps(markerLayer, showCoordinates, onMapClick),
     [markerLayer, onMapClick, showCoordinates]
   );
   return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null, markerPropsList.map((markerProps, i) => /* @__PURE__ */ react_exports.createElement(
@@ -1175,7 +1314,7 @@ var compareGeom = (prev, next) => {
   return prev === null && next === null;
 };
 var compareChoropleth = (prevProps, nextProps) => {
-  return compareGeom(prevProps.geomData, nextProps.geomData) && prevProps.id === nextProps.id && prevProps.map === nextProps.map && prevProps.areaId === nextProps.areaId && prevProps.areaValue === nextProps.areaValue && prevProps.color === nextProps.color && prevProps.opacity === nextProps.opacity && prevProps.strokeColor === nextProps.strokeColor && prevProps.isThemeChanged === nextProps.isThemeChanged && (0, lodash_exports.isEqual)(prevProps.additionalFields, nextProps.additionalFields) && prevProps.handleMapClick.toString() === nextProps.handleMapClick.toString();
+  return compareGeom(prevProps.geomData, nextProps.geomData) && prevProps.id === nextProps.id && prevProps.map === nextProps.map && prevProps.areaId === nextProps.areaId && prevProps.areaValue === nextProps.areaValue && prevProps.color === nextProps.color && prevProps.opacity === nextProps.opacity && prevProps.strokeColor === nextProps.strokeColor && prevProps.isThemeChanged === nextProps.isThemeChanged && (0, lodash_exports.isEqual)(prevProps.additionalFields, nextProps.additionalFields) && prevProps.tooltipHeader === nextProps.tooltipHeader && prevProps.handleMapClick.toString() === nextProps.handleMapClick.toString();
 };
 var cleanupChoropleth = (shapeId, sourceId, strokeId, map) => {
   var _a, _b, _c;
@@ -1211,6 +1350,7 @@ var Choropleth = react_exports.memo(
     strokeColor,
     isThemeChanged,
     additionalFields,
+    tooltipHeader,
     handleMapClick
   }) => {
     const sourceId = getSourceId(id);
@@ -1218,7 +1358,8 @@ var Choropleth = react_exports.memo(
     const strokeId = getStrokeId(id);
     const formattedGeomData = {
       type: "Feature",
-      geometry: geomData
+      geometry: geomData,
+      properties: {}
     };
     const [isTooltipOpen, setTooltipOpenStatus] = react_exports.useState(false);
     const [mouseLat, setmouseLat] = react_exports.useState(0);
@@ -1284,6 +1425,7 @@ var Choropleth = react_exports.memo(
       {
         isChoroplethTooltipOpen: isTooltipOpen,
         additionalFields,
+        tooltipHeader,
         latitude: mouseLat,
         longitude: mouseLng,
         map,
@@ -1316,12 +1458,13 @@ var ChoroplethLayer = (props) => {
       value: choroplethMetadata[field]
     }))
   ) : [];
+  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) {
-    return /* @__PURE__ */ react_exports.createElement(react_exports.Fragment, null);
+    return null;
   }
   if (isThemeChanged) {
     setIsThemeChanged(false);
@@ -1343,6 +1486,7 @@ var ChoroplethLayer = (props) => {
         areaId,
         areaValue,
         additionalFields: additionalFields[i],
+        tooltipHeader: tooltipHeaderField && tooltipHeaderField[i],
         handleMapClick: (e) => handleMapClick(e, i)
       }
     );
@@ -1355,36 +1499,41 @@ var Message_exports = {};
 __export(Message_exports, {
   default: () => Message_default
 });
-var defaultImport20 = __toESM(require("@splunk/visualizations-shared/Message"));
+var defaultImport25 = __toESM(require("@splunk/visualizations-shared/Message"));
 __reExport(Message_exports, require("@splunk/visualizations-shared/Message"));
-var Message_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
+var Message_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // esm-externals:@splunk/visualization-context/GeoRegistry
 var GeoRegistry_exports = {};
 __export(GeoRegistry_exports, {
   default: () => GeoRegistry_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualization-context/GeoRegistry"));
+var defaultImport26 = __toESM(require("@splunk/visualization-context/GeoRegistry"));
 __reExport(GeoRegistry_exports, require("@splunk/visualization-context/GeoRegistry"));
-var GeoRegistry_default = "default" in defaultImport21 ? defaultImport21.default : defaultImport21;
+var GeoRegistry_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // esm-externals:@splunk/visualization-context/GeoJsonProvider
 var GeoJsonProvider_exports = {};
 __export(GeoJsonProvider_exports, {
   default: () => GeoJsonProvider_default
 });
-var defaultImport22 = __toESM(require("@splunk/visualization-context/GeoJsonProvider"));
+var defaultImport27 = __toESM(require("@splunk/visualization-context/GeoJsonProvider"));
 __reExport(GeoJsonProvider_exports, require("@splunk/visualization-context/GeoJsonProvider"));
-var GeoJsonProvider_default = "default" in defaultImport22 ? defaultImport22.default : defaultImport22;
+var GeoJsonProvider_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // src/Map/PureMap/LocalChoroplethLayer.tsx
 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 [geoJson, setGeoJson] = react_exports.useState({
+    features: [{ properties: { name: "" }, geometry: [] }]
+  });
   const [validGeoJson, setValidGeoJson] = react_exports.useState(true);
-  const [geoJsonError, setGeoJsonError] = react_exports.useState({ level: "info", message: "" });
+  const [geoJsonError, setGeoJsonError] = react_exports.useState({
+    level: "info",
+    message: ""
+  });
   react_exports.useEffect(() => {
     let geoJsonData;
     const geoRegistry = GeoRegistry_default.create();
@@ -1486,7 +1635,8 @@ var LocalChoroplethLayer = (props) => {
         handleMapClick: (e) => handleMapClick(e, el.idx),
         isThemeChanged,
         geomData: geoJson.features[i].geometry,
-        additionalFields: additionalFields[el.idx]
+        additionalFields: additionalFields[el.idx],
+        tooltipHeader: choroplethLayer.tooltipHeaderField && choroplethLayer.tooltipHeaderField[el.idx]
       }
     );
   }));
@@ -1509,7 +1659,9 @@ var formatColor = (color) => {
     opacity: chromaColor.alpha()
   };
 };
-var StyledFitToDataButton = styled_components_default(Button_default).attrs({ "data-test": "fit-to-data-button" })`
+var StyledFitToDataButton = styled_components_default(Button_default).attrs({
+  "data-test": "fit-to-data-button"
+})`
     position: absolute;
     top: 115px;
     left: 16px;
@@ -1518,7 +1670,9 @@ var StyledFitToDataButton = styled_components_default(Button_default).attrs({ "d
     height: 40px;
     border-radius: 4px;
     border: none;
-    box-shadow: 0px 26px 103px rgba(0, 0, 0, 0.64), 0px 11px 18px rgba(0, 0, 0, 0.32),
+    box-shadow:
+        0px 26px 103px rgba(0, 0, 0, 0.64),
+        0px 11px 18px rgba(0, 0, 0, 0.32),
         0px 3px 6px rgba(0, 0, 0, 0.3) !important;
     background-color: ${(props) => props.controlBackgroundColor} !important;
     background-repeat: no-repeat;
@@ -1621,15 +1775,19 @@ var PureMap = (props) => {
     (mapStyle) => {
       map.current = new maplibre_gl_exports.Map(__spreadValues({
         container: basemapContainer.current,
-        preserveDrawingBuffer: true,
+        canvasContextAttributes: {
+          preserveDrawingBuffer: true
+        },
         style: mapStyle,
         center: lngLatCenter,
         zoom: zoomLevel,
-        cooperativeGestures: {
-          windowsHelpText: (0, i18n_exports._)("Use Ctrl + scroll to zoom map"),
-          macHelpText: (0, i18n_exports._)("Use \u2318 + scroll to zoom map"),
-          mobileHelpText: (0, i18n_exports._)("Use two fingers to move the map")
-        }
+        cooperativeGestures: true,
+        locale: {
+          "CooperativeGesturesHandler.WindowsHelpText": (0, i18n_exports._)("Use Ctrl + scroll to zoom map"),
+          "CooperativeGesturesHandler.MacHelpText": (0, i18n_exports._)("Use \u2318 + scroll to zoom map"),
+          "CooperativeGesturesHandler.MobileHelpText": (0, i18n_exports._)("Use two fingers to move the map")
+        },
+        attributionControl: false
       }, getZoomConstraintsFromTileConfig(mapStyle, baseLayerTileServer)));
       map.current.on("load", () => {
         if ((layers == null ? void 0 : layers.length) > 0 && center === void 0 && zoom === void 0) {
@@ -1650,7 +1808,10 @@ var PureMap = (props) => {
       });
       map.current.on("dragend", () => {
         const newCenter = map.current.getCenter();
-        onOptionsChangeProxy({ center: [newCenter.lat, newCenter.lng], zoom: map.current.getZoom() });
+        onOptionsChangeProxy({
+          center: [newCenter.lat, newCenter.lng],
+          zoom: map.current.getZoom()
+        });
       });
       map.current.on("resize", () => {
         const mapZoomLevel = map.current.getZoom();
@@ -1877,6 +2038,7 @@ PureMap.propTypes = {
       dataColors: prop_types_exports.oneOfType([prop_types_exports.string, prop_types_exports.arrayOf(prop_types_exports.string)]),
       seriesColors: prop_types_exports.arrayOf(prop_types_exports.string),
       additionalTooltipFields: prop_types_exports.arrayOf(prop_types_exports.string),
+      tooltipHeaderField: prop_types_exports.arrayOf(prop_types_exports.string),
       resultLimit: prop_types_exports.number,
       source: prop_types_exports.string,
       choroplethEmptyAreaColor: prop_types_exports.string
@@ -1911,59 +2073,48 @@ PureMap.defaultProps = {
 };
 var PureMap_default = PureMap;
 
-// esm-externals:@splunk/themes
-var themes_exports = {};
-__export(themes_exports, {
-  default: () => themes_default
-});
-var defaultImport23 = __toESM(require("@splunk/themes"));
-__reExport(themes_exports, require("@splunk/themes"));
-var themes_default = "default" in defaultImport23 ? defaultImport23.default : defaultImport23;
-
 // esm-externals:@splunk/visualization-color-palettes/editors/PresetPalettes
 var PresetPalettes_exports = {};
 __export(PresetPalettes_exports, {
   default: () => PresetPalettes_default
 });
-var defaultImport24 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
+var defaultImport28 = __toESM(require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
 __reExport(PresetPalettes_exports, require("@splunk/visualization-color-palettes/editors/PresetPalettes"));
-var PresetPalettes_default = "default" in defaultImport24 ? defaultImport24.default : defaultImport24;
+var PresetPalettes_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // esm-externals:@splunk/visualization-icons
 var visualization_icons_exports = {};
 __export(visualization_icons_exports, {
   default: () => visualization_icons_default
 });
-var defaultImport25 = __toESM(require("@splunk/visualization-icons"));
+var defaultImport29 = __toESM(require("@splunk/visualization-icons"));
 __reExport(visualization_icons_exports, require("@splunk/visualization-icons"));
-var visualization_icons_default = "default" in defaultImport25 ? defaultImport25.default : defaultImport25;
+var visualization_icons_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport26 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport30 = __toESM(require("@splunk/visualization-icons/placeholders"));
 __reExport(placeholders_exports, require("@splunk/visualization-icons/placeholders"));
-var placeholders_default = "default" in defaultImport26 ? defaultImport26.default : defaultImport26;
+var placeholders_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport31 = __toESM(require("@splunk/visualizations-shared/configUtils"));
 __reExport(configUtils_exports, require("@splunk/visualizations-shared/configUtils"));
-var configUtils_default = "default" in defaultImport27 ? defaultImport27.default : defaultImport27;
+var configUtils_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
   const enhancedConfig = __spreadValues({}, vizConfig);
-  enhancedConfig.editorConfig = vizConfig.editorConfig.map(
-    (config2) => {
-      return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
-    }
-  );
+  enhancedConfig.editorConfig = vizConfig.editorConfig.map((config2) => {
+    return __spreadProps(__spreadValues({}, config2), { open: config2.open || false });
+  });
   return enhancedConfig;
 }
 
@@ -1985,6 +2136,33 @@ var background = ({
 ];
 var BackgroundColor_default = background;
 
+// esm-externals:@splunk/themes/pick
+var pick_exports = {};
+__export(pick_exports, {
+  default: () => pick_default
+});
+var defaultImport32 = __toESM(require("@splunk/themes/pick"));
+__reExport(pick_exports, require("@splunk/themes/pick"));
+var pick_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
+
+// esm-externals:@splunk/themes/variables
+var variables_exports = {};
+__export(variables_exports, {
+  default: () => variables_default
+});
+var defaultImport33 = __toESM(require("@splunk/themes/variables"));
+__reExport(variables_exports, require("@splunk/themes/variables"));
+var variables_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+
+// src/common/ThemedDefaults.tsx
+var defaultBackgroundColor = (props) => pick_default({
+  enterprise: {
+    dark: variables_default.black(props),
+    light: variables_default.white(props)
+  },
+  prisma: variables_default.backgroundColorSection(props)
+})(props);
+
 // src/Map/config.ts
 var defaultContext = {
   colorRangeConfig: [
@@ -2013,13 +2191,7 @@ var size = {
   initialHeight: 600
 };
 var themes = {
-  defaultBackgroundColor: (props) => (0, themes_exports.pick)({
-    enterprise: {
-      dark: themes_exports.variables.black(props),
-      light: themes_exports.variables.backgroundColor(props)
-    },
-    prisma: themes_exports.variables.backgroundColorSidebar(props)
-  })(props),
+  defaultBackgroundColor,
   controlBackgroundColor: (props) => (0, themes_exports.pick)({
     enterprise: {
       dark: themes_exports.variables.gray22(props),
@@ -2071,7 +2243,10 @@ var editorConfig = [
             values: [
               { label: (0, i18n_exports._)("Bubble"), value: visualization_schemas_exports.LAYER_TYPE.Bubble },
               { label: (0, i18n_exports._)("Marker"), value: visualization_schemas_exports.LAYER_TYPE.Marker },
-              { label: (0, i18n_exports._)("Choropleth"), value: visualization_schemas_exports.LAYER_TYPE.Choropleth }
+              {
+                label: (0, i18n_exports._)("Choropleth"),
+                value: visualization_schemas_exports.LAYER_TYPE.Choropleth
+              }
             ]
           }
         }
@@ -2146,6 +2321,17 @@ var editorConfig = [
           editor: "editor.columnMultiSelectionByFieldNameEditor"
         }
       ],
+      [
+        {
+          label: (0, i18n_exports._)("Tooltip header field"),
+          option: "layers[0].tooltipHeaderField",
+          editor: "editor.columnSelector",
+          editorProps: {
+            dataSourceKey: "primary",
+            shouldShowInternalFields: false
+          }
+        }
+      ],
       [
         {
           label: (0, i18n_exports._)("Result limit"),
@@ -2433,72 +2619,54 @@ var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport28 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport34 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
 __reExport(getSettingsFromThemedProps_exports, require("@splunk/themes/getSettingsFromThemedProps"));
-var getSettingsFromThemedProps_default = "default" in defaultImport28 ? defaultImport28.default : defaultImport28;
+var getSettingsFromThemedProps_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport35 = __toESM(require("@splunk/visualization-encoding/Options"));
 __reExport(Options_exports, require("@splunk/visualization-encoding/Options"));
-var Options_default = "default" in defaultImport29 ? defaultImport29.default : defaultImport29;
+var Options_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport36 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
 __reExport(SanitizeProps_exports, require("@splunk/visualizations-shared/SanitizeProps"));
-var SanitizeProps_default = "default" in defaultImport30 ? defaultImport30.default : defaultImport30;
+var SanitizeProps_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:@splunk/visualization-context/TimezoneContext
 var TimezoneContext_exports = {};
 __export(TimezoneContext_exports, {
   default: () => TimezoneContext_default
 });
-var defaultImport31 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+var defaultImport37 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
 __reExport(TimezoneContext_exports, require("@splunk/visualization-context/TimezoneContext"));
-var TimezoneContext_default = "default" in defaultImport31 ? defaultImport31.default : defaultImport31;
+var TimezoneContext_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport32 = __toESM(require("@splunk/moment"));
+var defaultImport38 = __toESM(require("@splunk/moment"));
 __reExport(moment_exports, require("@splunk/moment"));
-var moment_default = "default" in defaultImport32 ? defaultImport32.default : defaultImport32;
-
-// esm-externals:@splunk/visualization-context/FeatureFlagContext
-var FeatureFlagContext_exports = {};
-__export(FeatureFlagContext_exports, {
-  default: () => FeatureFlagContext_default
-});
-var defaultImport33 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
-__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
-var FeatureFlagContext_default = "default" in defaultImport33 ? defaultImport33.default : defaultImport33;
+var moment_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // esm-externals:@splunk/async-dynamic-options-evaluator
 var async_dynamic_options_evaluator_exports = {};
 __export(async_dynamic_options_evaluator_exports, {
   default: () => async_dynamic_options_evaluator_default
 });
-var defaultImport34 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
+var defaultImport39 = __toESM(require("@splunk/async-dynamic-options-evaluator"));
 __reExport(async_dynamic_options_evaluator_exports, require("@splunk/async-dynamic-options-evaluator"));
-var async_dynamic_options_evaluator_default = "default" in defaultImport34 ? defaultImport34.default : defaultImport34;
-
-// esm-externals:@splunk/ui-utils/id
-var id_exports = {};
-__export(id_exports, {
-  default: () => id_default
-});
-var defaultImport35 = __toESM(require("@splunk/ui-utils/id"));
-__reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var async_dynamic_options_evaluator_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // src/common/interfaces/VizActionHandler.ts
 var DefaultVizActionHandler = class {
@@ -2706,9 +2874,9 @@ var SizeAwareWrapper_exports = {};
 __export(SizeAwareWrapper_exports, {
   default: () => SizeAwareWrapper_default
 });
-var defaultImport36 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
+var defaultImport40 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
 __reExport(SizeAwareWrapper_exports, require("@splunk/visualizations-shared/SizeAwareWrapper"));
-var SizeAwareWrapper_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
+var SizeAwareWrapper_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -2719,9 +2887,14 @@ var Item = styled_components_default.div.attrs(({ width }) => ({
     position: relative;
     background-color: ${(props) => (0, colorUtils_exports.isColor)(props.backgroundColor) && props.backgroundColor || props.theme.defaultBackgroundColor}};
 `;
-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) })
-}))`
+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) })
+  })
+)`
     position: relative;
     flex-direction: column;
     flex: 1;
@@ -2755,7 +2928,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.4.0 - 92ef39d5c",
+        "data-splunk-visualization-version": "28.0.0 - 0c5f07712",
         width,
         height,
         backgroundColor
@@ -2821,7 +2994,7 @@ var Cover = styled_components_default.div`
     bottom: 0;
 `;
 var Blocker = styled_components_default.div.attrs({
-  "data-splunk-visualization-version": "27.4.0 - 92ef39d5c"
+  "data-splunk-visualization-version": "28.0.0 - 0c5f07712"
 })`
     position: relative;
     width: 100%;
@@ -2838,15 +3011,6 @@ var withEditModeCover = (Visualization, disableEditModeCover) => {
 };
 var withEditModeCover_default = withEditModeCover;
 
-// esm-externals:@splunk/themes/variables
-var variables_exports = {};
-__export(variables_exports, {
-  default: () => variables_default
-});
-var defaultImport37 = __toESM(require("@splunk/themes/variables"));
-__reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
-
 // src/common/components/IconPlaceholder.tsx
 var shouldShowIconPlaceholder = (dataSources, loading = false) => {
   const data = (0, lodash_exports.get)(dataSources, "primary.data.columns[0]", void 0);
@@ -2925,9 +3089,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport38 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport41 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
 __reExport(numberUtils_exports, require("@splunk/visualizations-shared/numberUtils"));
-var numberUtils_default = "default" in defaultImport38 ? defaultImport38.default : defaultImport38;
+var numberUtils_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
 
 // src/common/utils/dataUtils.ts
 var convertToArrOfObjects = (columns, fields) => {
@@ -3216,7 +3380,12 @@ var useGetXAndYFields = ({
         y2Fields: options.y2 ? "> y2 | getField()" : void 0,
         fieldTypes: "> primary | getType()"
       };
-      const { xField = "", yFields = [], y2Fields = [], fieldTypes } = Options_exports.Options.evaluate(
+      const {
+        xField = "",
+        yFields = [],
+        y2Fields = [],
+        fieldTypes
+      } = Options_exports.Options.evaluate(
         { options: optionsToEvaluate, context },
         dataSourcesWithOnlyOnePoint,
         () => {
@@ -3319,9 +3488,9 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport39 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport42 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
 __reExport(FeatureFlags_exports, require("@splunk/visualization-context/FeatureFlags"));
-var FeatureFlags_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
+var FeatureFlags_default = "default" in defaultImport42 ? defaultImport42.default : defaultImport42;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
@@ -3339,9 +3508,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport40 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport43 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
 __reExport(trellisUtils_exports, require("@splunk/visualizations-shared/trellisUtils"));
-var trellisUtils_default = "default" in defaultImport40 ? defaultImport40.default : defaultImport40;
+var trellisUtils_default = "default" in defaultImport43 ? defaultImport43.default : defaultImport43;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -3497,7 +3666,9 @@ var withDashboardViz = (opts) => {
           return result;
         }
       } catch (e) {
-        console.error(`unexpected error evaluating options: ${e.message}`);
+        if (e instanceof Error) {
+          console.error(`unexpected error evaluating options: ${e.message}`);
+        }
         return {};
       }
       return {};
@@ -3556,7 +3727,11 @@ var withDashboardViz = (opts) => {
           if (ev && ev.payload) {
             payload = ev.payload;
           }
-          return onEventTrigger({ originalEvent: ev, payload, type: eventName });
+          return onEventTrigger({
+            originalEvent: ev,
+            payload,
+            type: eventName
+          });
         };
         if (parentKeys) {
           for (let i = parentKeys.length - 1; i >= 0; i -= 1) {
@@ -3622,9 +3797,9 @@ var dsl_exports = {};
 __export(dsl_exports, {
   default: () => dsl_default
 });
-var defaultImport41 = __toESM(require("@splunk/visualization-encoding/utils/dsl"));
+var defaultImport44 = __toESM(require("@splunk/visualization-encoding/utils/dsl"));
 __reExport(dsl_exports, require("@splunk/visualization-encoding/utils/dsl"));
-var dsl_default = "default" in defaultImport41 ? defaultImport41.default : defaultImport41;
+var dsl_default = "default" in defaultImport44 ? defaultImport44.default : defaultImport44;
 
 // src/common/utils/mapUtils.ts
 var columnsNullToZeros = (config2, dataSources, options) => {
@@ -3640,7 +3815,17 @@ var columnsNullToZeros = (config2, dataSources, options) => {
   if (((_b = (_a = mergedOptions.layers) == null ? void 0 : _a[0]) == null ? void 0 : _b.type) === "bubble") {
     const latitudeField = (0, dsl_exports.getFieldsFromDSL)(mergedOptions.layers[0].latitude, dataSources)[0] || "";
     const longitudeField = (0, dsl_exports.getFieldsFromDSL)(mergedOptions.layers[0].longitude, dataSources)[0] || "";
-    const excludedFields = [latitudeField, longitudeField, "geobin"].concat(GEO_LAT_AND_LONG_FIELD);
+    const stringsFields = (0, dsl_exports.getFieldsFromDSL)("> primary | frameBySeriesTypes('string')", dataSources);
+    const excludedFields = Array.from(
+      /* @__PURE__ */ new Set([
+        latitudeField,
+        longitudeField,
+        "geobin",
+        "name",
+        ...stringsFields,
+        ...GEO_LAT_AND_LONG_FIELD
+      ])
+    );
     const indicesToEvaluate = new Set(
       fields.reduce((arr, e, i) => {
         const field = typeof e === "string" ? e : e.name.toString();
@@ -3703,7 +3888,12 @@ var computeVizProps = (props) => {
     (field) => typeof field === "string" ? field : field.name
   );
   layers == null ? void 0 : layers.forEach((l) => formatLayer(l, dataFields, dataSourceData, transformedData));
-  return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, themeColors), { themeColorScheme }), layers), { onOptionsChange, title });
+  return __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, themeColors), {
+    themeColorScheme
+  }), layers), {
+    onOptionsChange,
+    title
+  });
 };
 var withTooltipFields = (Viz) => {
   const VizWithTooltipFields = (_a) => {
@@ -3721,6 +3911,7 @@ var withTooltipFields = (Viz) => {
       if (((_c = (_b2 = mergedOptions.layers) == null ? void 0 : _b2[0]) == null ? void 0 : _c.type) === "bubble") {
         mergedOptions.layers[0].bubbleSizeFields = "> bubbleSize | getField()";
         mergedOptions.layers[0].dataValuesField = "> dataValues | getField()";
+        mergedOptions.layers[0].tooltipHeaderFieldName = "> tooltipHeaderField | getField()";
       }
       const { fields } = dataSources.primary.data;
       if (Array.isArray(mergedOptions.layers[0].additionalTooltipFields) && Array.isArray(fields) && fields.length) {