@splunk/visualizations 27.4.0 → 27.5.0

package/Map.js

@@ -629,14 +629,50 @@ 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/react-ui/Popover
 var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport19 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport22 = __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 defaultImport22 ? defaultImport22.default : defaultImport22;
+
+// 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;
 
 // src/Map/PureMap/Tooltip.tsx
 var StyledPopover = styled_components_default(Popover_default)`
@@ -645,6 +681,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 +699,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 +753,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 }, 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, /* @__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 +782,7 @@ var MarkerWrapper = (_a) => {
     areaId,
     areaValue,
     additionalFields = [],
+    tooltipHeader = null,
     map,
     isChoroplethTooltipOpen,
     children,
@@ -724,6 +793,7 @@ var MarkerWrapper = (_a) => {
     "areaId",
     "areaValue",
     "additionalFields",
+    "tooltipHeader",
     "map",
     "isChoroplethTooltipOpen",
     "children",
@@ -782,7 +852,8 @@ var MarkerWrapper = (_a) => {
       areaId,
       areaValue,
       additionalFields,
-      showCoordinates
+      showCoordinates,
+      tooltipHeader
     }
   )));
 };
@@ -791,6 +862,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 +931,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 +948,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,7 +972,7 @@ 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),
@@ -908,7 +985,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 +1006,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 +1034,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 +1082,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 +1104,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 +1149,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 +1164,8 @@ var Marker2 = react_exports.memo(
         map,
         additionalFields,
         "data-test-type": "marker",
-        showCoordinates
+        showCoordinates,
+        tooltipHeader
       },
       icon
     );
@@ -1065,6 +1178,7 @@ var StyledMarkerWrapper2 = styled_components_default(MarkerWrapper_default)`
     cursor: pointer;
 `;
 var generateMarkerWrapperProps = (markerLayer, onMapClick = lodash_exports.noop, showCoordinates) => {
+  var _a;
   const latArray = markerLayer.latitude;
   const lonArray = markerLayer.longitude;
   const isStaticColor = !markerLayer.dataColors;
@@ -1078,13 +1192,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 +1212,7 @@ var generateMarkerWrapperProps = (markerLayer, onMapClick = lodash_exports.noop,
       longitude: lonArray[i],
       color,
       additionalFields,
+      tooltipHeader,
       handleLayerClick,
       showCoordinates
     });
@@ -1175,7 +1291,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 +1327,7 @@ var Choropleth = react_exports.memo(
     strokeColor,
     isThemeChanged,
     additionalFields,
+    tooltipHeader,
     handleMapClick
   }) => {
     const sourceId = getSourceId(id);
@@ -1284,6 +1401,7 @@ var Choropleth = react_exports.memo(
       {
         isChoroplethTooltipOpen: isTooltipOpen,
         additionalFields,
+        tooltipHeader,
         latitude: mouseLat,
         longitude: mouseLng,
         map,
@@ -1316,6 +1434,7 @@ 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 });
@@ -1343,6 +1462,7 @@ var ChoroplethLayer = (props) => {
         areaId,
         areaValue,
         additionalFields: additionalFields[i],
+        tooltipHeader: tooltipHeaderField && tooltipHeaderField[i],
         handleMapClick: (e) => handleMapClick(e, i)
       }
     );
@@ -1355,27 +1475,27 @@ var Message_exports = {};
 __export(Message_exports, {
   default: () => Message_default
 });
-var defaultImport20 = __toESM(require("@splunk/visualizations-shared/Message"));
+var defaultImport24 = __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 defaultImport24 ? defaultImport24.default : defaultImport24;
 
 // esm-externals:@splunk/visualization-context/GeoRegistry
 var GeoRegistry_exports = {};
 __export(GeoRegistry_exports, {
   default: () => GeoRegistry_default
 });
-var defaultImport21 = __toESM(require("@splunk/visualization-context/GeoRegistry"));
+var defaultImport25 = __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 defaultImport25 ? defaultImport25.default : defaultImport25;
 
 // esm-externals:@splunk/visualization-context/GeoJsonProvider
 var GeoJsonProvider_exports = {};
 __export(GeoJsonProvider_exports, {
   default: () => GeoJsonProvider_default
 });
-var defaultImport22 = __toESM(require("@splunk/visualization-context/GeoJsonProvider"));
+var defaultImport26 = __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 defaultImport26 ? defaultImport26.default : defaultImport26;
 
 // src/Map/PureMap/LocalChoroplethLayer.tsx
 var LocalChoroplethLayer = (props) => {
@@ -1486,7 +1606,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]
       }
     );
   }));
@@ -1877,6 +1998,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,50 +2033,41 @@ 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 defaultImport27 = __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 defaultImport27 ? defaultImport27.default : defaultImport27;
 
 // 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 defaultImport28 = __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 defaultImport28 ? defaultImport28.default : defaultImport28;
 
 // esm-externals:@splunk/visualization-icons/placeholders
 var placeholders_exports = {};
 __export(placeholders_exports, {
   default: () => placeholders_default
 });
-var defaultImport26 = __toESM(require("@splunk/visualization-icons/placeholders"));
+var defaultImport29 = __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 defaultImport29 ? defaultImport29.default : defaultImport29;
 
 // esm-externals:@splunk/visualizations-shared/configUtils
 var configUtils_exports = {};
 __export(configUtils_exports, {
   default: () => configUtils_default
 });
-var defaultImport27 = __toESM(require("@splunk/visualizations-shared/configUtils"));
+var defaultImport30 = __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 defaultImport30 ? defaultImport30.default : defaultImport30;
 
 // src/common/utils/configUtils.ts
 function enhanceConfig(vizConfig) {
@@ -2146,6 +2259,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 +2557,63 @@ var getSettingsFromThemedProps_exports = {};
 __export(getSettingsFromThemedProps_exports, {
   default: () => getSettingsFromThemedProps_default
 });
-var defaultImport28 = __toESM(require("@splunk/themes/getSettingsFromThemedProps"));
+var defaultImport31 = __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 defaultImport31 ? defaultImport31.default : defaultImport31;
 
 // esm-externals:@splunk/visualization-encoding/Options
 var Options_exports = {};
 __export(Options_exports, {
   default: () => Options_default
 });
-var defaultImport29 = __toESM(require("@splunk/visualization-encoding/Options"));
+var defaultImport32 = __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 defaultImport32 ? defaultImport32.default : defaultImport32;
 
 // esm-externals:@splunk/visualizations-shared/SanitizeProps
 var SanitizeProps_exports = {};
 __export(SanitizeProps_exports, {
   default: () => SanitizeProps_default
 });
-var defaultImport30 = __toESM(require("@splunk/visualizations-shared/SanitizeProps"));
+var defaultImport33 = __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 defaultImport33 ? defaultImport33.default : defaultImport33;
 
 // esm-externals:@splunk/visualization-context/TimezoneContext
 var TimezoneContext_exports = {};
 __export(TimezoneContext_exports, {
   default: () => TimezoneContext_default
 });
-var defaultImport31 = __toESM(require("@splunk/visualization-context/TimezoneContext"));
+var defaultImport34 = __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 defaultImport34 ? defaultImport34.default : defaultImport34;
 
 // esm-externals:@splunk/moment
 var moment_exports = {};
 __export(moment_exports, {
   default: () => moment_default
 });
-var defaultImport32 = __toESM(require("@splunk/moment"));
+var defaultImport35 = __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 defaultImport35 ? defaultImport35.default : defaultImport35;
 
 // 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 defaultImport36 = __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;
+var async_dynamic_options_evaluator_default = "default" in defaultImport36 ? defaultImport36.default : defaultImport36;
 
 // esm-externals:@splunk/ui-utils/id
 var id_exports = {};
 __export(id_exports, {
   default: () => id_default
 });
-var defaultImport35 = __toESM(require("@splunk/ui-utils/id"));
+var defaultImport37 = __toESM(require("@splunk/ui-utils/id"));
 __reExport(id_exports, require("@splunk/ui-utils/id"));
-var id_default = "default" in defaultImport35 ? defaultImport35.default : defaultImport35;
+var id_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
 
 // src/common/interfaces/VizActionHandler.ts
 var DefaultVizActionHandler = class {
@@ -2706,9 +2821,9 @@ var SizeAwareWrapper_exports = {};
 __export(SizeAwareWrapper_exports, {
   default: () => SizeAwareWrapper_default
 });
-var defaultImport36 = __toESM(require("@splunk/visualizations-shared/SizeAwareWrapper"));
+var defaultImport38 = __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 defaultImport38 ? defaultImport38.default : defaultImport38;
 
 // src/common/hocs/FixedSizeContainer.tsx
 var Item = styled_components_default.div.attrs(({ width }) => ({
@@ -2755,7 +2870,7 @@ var withFixedSizeContainer = (Viz) => {
       FixSizeItem,
       {
         "data-test": "fix-size-item",
-        "data-splunk-visualization-version": "27.4.0 - 92ef39d5c",
+        "data-splunk-visualization-version": "27.5.0 - 5cfbc7064",
         width,
         height,
         backgroundColor
@@ -2821,7 +2936,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": "27.5.0 - 5cfbc7064"
 })`
     position: relative;
     width: 100%;
@@ -2843,9 +2958,9 @@ var variables_exports = {};
 __export(variables_exports, {
   default: () => variables_default
 });
-var defaultImport37 = __toESM(require("@splunk/themes/variables"));
+var defaultImport39 = __toESM(require("@splunk/themes/variables"));
 __reExport(variables_exports, require("@splunk/themes/variables"));
-var variables_default = "default" in defaultImport37 ? defaultImport37.default : defaultImport37;
+var variables_default = "default" in defaultImport39 ? defaultImport39.default : defaultImport39;
 
 // src/common/components/IconPlaceholder.tsx
 var shouldShowIconPlaceholder = (dataSources, loading = false) => {
@@ -2925,9 +3040,9 @@ var numberUtils_exports = {};
 __export(numberUtils_exports, {
   default: () => numberUtils_default
 });
-var defaultImport38 = __toESM(require("@splunk/visualizations-shared/numberUtils"));
+var defaultImport40 = __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 defaultImport40 ? defaultImport40.default : defaultImport40;
 
 // src/common/utils/dataUtils.ts
 var convertToArrOfObjects = (columns, fields) => {
@@ -3319,9 +3434,9 @@ var FeatureFlags_exports = {};
 __export(FeatureFlags_exports, {
   default: () => FeatureFlags_default
 });
-var defaultImport39 = __toESM(require("@splunk/visualization-context/FeatureFlags"));
+var defaultImport41 = __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 defaultImport41 ? defaultImport41.default : defaultImport41;
 
 // src/common/utils/featureFlagUtils.ts
 var getFeatureFlag = (context, flagName) => {
@@ -3339,9 +3454,9 @@ var trellisUtils_exports = {};
 __export(trellisUtils_exports, {
   default: () => trellisUtils_default
 });
-var defaultImport40 = __toESM(require("@splunk/visualizations-shared/trellisUtils"));
+var defaultImport42 = __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 defaultImport42 ? defaultImport42.default : defaultImport42;
 
 // src/common/utils/trellisUtils.ts
 var turnOffLegendDisplayWhenTrellisIsOn = (isTrellisOn, options) => {
@@ -3622,9 +3737,9 @@ var dsl_exports = {};
 __export(dsl_exports, {
   default: () => dsl_default
 });
-var defaultImport41 = __toESM(require("@splunk/visualization-encoding/utils/dsl"));
+var defaultImport43 = __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 defaultImport43 ? defaultImport43.default : defaultImport43;
 
 // src/common/utils/mapUtils.ts
 var columnsNullToZeros = (config2, dataSources, options) => {
@@ -3640,7 +3755,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();
@@ -3721,6 +3846,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) {