@splunk/visualizations 27.4.0 → 28.0.0

package/common/utils/mapUtils.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;
@@ -129,50 +130,86 @@ var defaultImport7 = __toESM(require("lodash"));
 __reExport(lodash_exports, require("lodash"));
 var lodash_default = "default" in defaultImport7 ? defaultImport7.default : defaultImport7;
 
+// esm-externals:@splunk/visualizations-shared/iconUtils
+var iconUtils_exports = {};
+__export(iconUtils_exports, {
+  default: () => iconUtils_default
+});
+var defaultImport8 = __toESM(require("@splunk/visualizations-shared/iconUtils"));
+__reExport(iconUtils_exports, require("@splunk/visualizations-shared/iconUtils"));
+var iconUtils_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+
 // esm-externals:@splunk/visualizations-shared/colorUtils
 var colorUtils_exports = {};
 __export(colorUtils_exports, {
   default: () => colorUtils_default
 });
-var defaultImport8 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
+var defaultImport9 = __toESM(require("@splunk/visualizations-shared/colorUtils"));
 __reExport(colorUtils_exports, require("@splunk/visualizations-shared/colorUtils"));
-var colorUtils_default = "default" in defaultImport8 ? defaultImport8.default : defaultImport8;
+var colorUtils_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+
+// esm-externals:@splunk/visualizations-shared/RemoteIcon
+var RemoteIcon_exports = {};
+__export(RemoteIcon_exports, {
+  default: () => RemoteIcon_default
+});
+var defaultImport10 = __toESM(require("@splunk/visualizations-shared/RemoteIcon"));
+__reExport(RemoteIcon_exports, require("@splunk/visualizations-shared/RemoteIcon"));
+var RemoteIcon_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+
+// esm-externals:@splunk/visualization-context/FeatureFlagContext
+var FeatureFlagContext_exports = {};
+__export(FeatureFlagContext_exports, {
+  default: () => FeatureFlagContext_default
+});
+var defaultImport11 = __toESM(require("@splunk/visualization-context/FeatureFlagContext"));
+__reExport(FeatureFlagContext_exports, require("@splunk/visualization-context/FeatureFlagContext"));
+var FeatureFlagContext_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+
+// esm-externals:@splunk/ui-utils/id
+var id_exports = {};
+__export(id_exports, {
+  default: () => id_default
+});
+var defaultImport12 = __toESM(require("@splunk/ui-utils/id"));
+__reExport(id_exports, require("@splunk/ui-utils/id"));
+var id_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
 
 // esm-externals:d3-scale
 var d3_scale_exports = {};
 __export(d3_scale_exports, {
   default: () => d3_scale_default
 });
-var defaultImport9 = __toESM(require("d3-scale"));
+var defaultImport13 = __toESM(require("d3-scale"));
 __reExport(d3_scale_exports, require("d3-scale"));
-var d3_scale_default = "default" in defaultImport9 ? defaultImport9.default : defaultImport9;
+var d3_scale_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
 
 // esm-externals:chroma-js
 var chroma_js_exports = {};
 __export(chroma_js_exports, {
   default: () => chroma_js_default
 });
-var defaultImport10 = __toESM(require("chroma-js"));
+var defaultImport14 = __toESM(require("chroma-js"));
 __reExport(chroma_js_exports, require("chroma-js"));
-var chroma_js_default = "default" in defaultImport10 ? defaultImport10.default : defaultImport10;
+var chroma_js_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
 
 // esm-externals:@splunk/visualization-color-palettes
 var visualization_color_palettes_exports = {};
 __export(visualization_color_palettes_exports, {
   default: () => visualization_color_palettes_default
 });
-var defaultImport11 = __toESM(require("@splunk/visualization-color-palettes"));
+var defaultImport15 = __toESM(require("@splunk/visualization-color-palettes"));
 __reExport(visualization_color_palettes_exports, require("@splunk/visualization-color-palettes"));
-var visualization_color_palettes_default = "default" in defaultImport11 ? defaultImport11.default : defaultImport11;
+var visualization_color_palettes_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
 
 // esm-externals:@splunk/visualization-schemas
 var visualization_schemas_exports = {};
 __export(visualization_schemas_exports, {
   default: () => visualization_schemas_default
 });
-var defaultImport12 = __toESM(require("@splunk/visualization-schemas"));
+var defaultImport16 = __toESM(require("@splunk/visualization-schemas"));
 __reExport(visualization_schemas_exports, require("@splunk/visualization-schemas"));
-var visualization_schemas_default = "default" in defaultImport12 ? defaultImport12.default : defaultImport12;
+var visualization_schemas_default = "default" in defaultImport16 ? defaultImport16.default : defaultImport16;
 
 // src/Map/PureMap/MapUtils.ts
 var MIN_BUBBLE_RADIUS = 7.11;
@@ -195,27 +232,36 @@ var maplibre_gl_exports = {};
 __export(maplibre_gl_exports, {
   default: () => maplibre_gl_default
 });
-var defaultImport13 = __toESM(require("maplibre-gl"));
+var defaultImport17 = __toESM(require("maplibre-gl"));
 __reExport(maplibre_gl_exports, require("maplibre-gl"));
-var maplibre_gl_default = "default" in defaultImport13 ? defaultImport13.default : defaultImport13;
+var maplibre_gl_default = "default" in defaultImport17 ? defaultImport17.default : defaultImport17;
 
 // esm-externals:@splunk/react-ui/Popover
 var Popover_exports = {};
 __export(Popover_exports, {
   default: () => Popover_default
 });
-var defaultImport14 = __toESM(require("@splunk/react-ui/Popover"));
+var defaultImport18 = __toESM(require("@splunk/react-ui/Popover"));
 __reExport(Popover_exports, require("@splunk/react-ui/Popover"));
-var Popover_default = "default" in defaultImport14 ? defaultImport14.default : defaultImport14;
+var Popover_default = "default" in defaultImport18 ? defaultImport18.default : defaultImport18;
 
 // esm-externals:@splunk/ui-utils/i18n
 var i18n_exports = {};
 __export(i18n_exports, {
   default: () => i18n_default
 });
-var defaultImport15 = __toESM(require("@splunk/ui-utils/i18n"));
+var defaultImport19 = __toESM(require("@splunk/ui-utils/i18n"));
 __reExport(i18n_exports, require("@splunk/ui-utils/i18n"));
-var i18n_default = "default" in defaultImport15 ? defaultImport15.default : defaultImport15;
+var i18n_default = "default" in defaultImport19 ? defaultImport19.default : defaultImport19;
+
+// esm-externals:@splunk/themes
+var themes_exports = {};
+__export(themes_exports, {
+  default: () => themes_default
+});
+var defaultImport20 = __toESM(require("@splunk/themes"));
+__reExport(themes_exports, require("@splunk/themes"));
+var themes_default = "default" in defaultImport20 ? defaultImport20.default : defaultImport20;
 
 // src/Map/PureMap/Tooltip.tsx
 var StyledPopover = styled_components_default(Popover_default)`
@@ -224,6 +270,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`
@@ -241,6 +288,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);
@@ -271,18 +342,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
@@ -293,6 +371,7 @@ var MarkerWrapper = (_a) => {
     areaId,
     areaValue,
     additionalFields = [],
+    tooltipHeader = null,
     map,
     isChoroplethTooltipOpen,
     children,
@@ -303,6 +382,7 @@ var MarkerWrapper = (_a) => {
     "areaId",
     "areaValue",
     "additionalFields",
+    "tooltipHeader",
     "map",
     "isChoroplethTooltipOpen",
     "children",
@@ -311,9 +391,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(() => {
@@ -342,7 +423,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,
@@ -361,7 +444,8 @@ var MarkerWrapper = (_a) => {
       areaId,
       areaValue,
       additionalFields,
-      showCoordinates
+      showCoordinates,
+      tooltipHeader
     }
   )));
 };
@@ -369,6 +453,7 @@ var MarkerWrapper_default = MarkerWrapper;
 
 // src/Map/PureMap/BubbleLayer.tsx
 var GEO_LAT_AND_LONG_FIELD = ["_geo_long_field", "_geo_lat_field"];
+var ICON_DISPLAY_CUTOFF = 16;
 var PieSegment = react_exports.memo(
   ({
     start,
@@ -437,10 +522,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);
@@ -448,21 +539,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,
@@ -473,10 +563,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,
@@ -486,7 +576,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;
     }
@@ -496,11 +597,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 })
+      )
     );
   }
 );
@@ -520,7 +636,17 @@ var columnsNullToZeros = (config, 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();