@splunk/visualizations 28.1.0 → 28.2.0

package/common/utils/mapUtils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/common/utils/mapUtils.ts", "esm-externals:@splunk/visualization-encoding/utils/types", "esm-externals:@splunk/visualization-encoding/utils/dsl", "esm-externals:@splunk/visualizations-shared/hocUtils", "esm-externals:@splunk/visualizations-shared/JSONSchemaUtils", "esm-externals:react", "esm-externals:styled-components", "esm-externals:lodash", "esm-externals:@splunk/visualizations-shared/iconUtils", "esm-externals:@splunk/visualizations-shared/colorUtils", "esm-externals:@splunk/visualizations-shared/RemoteIcon", "esm-externals:@splunk/visualization-context/FeatureFlagContext", "esm-externals:@splunk/ui-utils/id", "esm-externals:d3-scale", "esm-externals:chroma-js", "esm-externals:@splunk/visualization-color-palettes", "esm-externals:@splunk/visualization-schemas", "../../src/Map/PureMap/MapUtils.ts", "esm-externals:maplibre-gl", "esm-externals:@splunk/react-ui/Popover", "esm-externals:@splunk/ui-utils/i18n", "esm-externals:@splunk/themes", "../../src/Map/PureMap/Tooltip.tsx", "../../src/Map/PureMap/MarkerWrapper.tsx", "../../src/Map/PureMap/BubbleLayer.tsx"],
-  "sourcesContent": ["import { isNumber } from '@splunk/visualization-encoding/utils/types';\nimport { getFieldsFromDSL } from '@splunk/visualization-encoding/utils/dsl';\nimport { deepMergeWithArrayPrimitiveOverrides } from '@splunk/visualizations-shared/hocUtils';\nimport { pickFieldFromJSONSchema } from '@splunk/visualizations-shared/JSONSchemaUtils';\nimport { GEO_LAT_AND_LONG_FIELD } from '../../Map/PureMap/BubbleLayer';\n\nexport const columnsNullToZeros = (config, dataSources, options) => {\n    const { primary } = dataSources;\n    const { columns, fields } = primary.data;\n    let newColumns = columns;\n    const mergedOptions = deepMergeWithArrayPrimitiveOverrides(\n        {},\n        options,\n        pickFieldFromJSONSchema(config.optionsSchema, 'default')\n    );\n    if (mergedOptions.layers?.[0]?.type === 'bubble') {\n        const latitudeField = getFieldsFromDSL(mergedOptions.layers[0].latitude, dataSources)[0] || '';\n        const longitudeField = getFieldsFromDSL(mergedOptions.layers[0].longitude, dataSources)[0] || '';\n        const stringsFields = getFieldsFromDSL(\"> primary | frameBySeriesTypes('string')\", dataSources);\n        const excludedFields = Array.from(\n            new Set([\n                latitudeField,\n                longitudeField,\n                'geobin',\n                'name',\n                ...stringsFields,\n                ...GEO_LAT_AND_LONG_FIELD,\n            ])\n        );\n        const indicesToEvaluate = new Set(\n            fields.reduce((arr, e, i) => {\n                const field = typeof e === 'string' ? e : e.name.toString();\n                if (!excludedFields.includes(field)) {\n                    arr.push(i);\n                }\n                return arr;\n            }, [])\n        );\n\n        newColumns = columns.map((column, i) => {\n            if (indicesToEvaluate.has(i)) {\n                // sanitize value and convert string to numeric numbers\n                return column.map(value => (!value || !isNumber(value) ? 0 : +value));\n            }\n            return column;\n        });\n    }\n\n    const modifiedDatasources = {\n        ...dataSources,\n        primary: {\n            ...primary,\n            data: {\n                ...primary.data,\n                columns: newColumns,\n            },\n        },\n    };\n\n    return modifiedDatasources;\n};\n", "\nimport * as defaultImport from \"@splunk/visualization-encoding/utils/types\";\nexport * from \"@splunk/visualization-encoding/utils/types\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualization-encoding/utils/dsl\";\nexport * from \"@splunk/visualization-encoding/utils/dsl\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/hocUtils\";\nexport * from \"@splunk/visualizations-shared/hocUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/JSONSchemaUtils\";\nexport * from \"@splunk/visualizations-shared/JSONSchemaUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"lodash\";\nexport * from \"lodash\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/iconUtils\";\nexport * from \"@splunk/visualizations-shared/iconUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/colorUtils\";\nexport * from \"@splunk/visualizations-shared/colorUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/RemoteIcon\";\nexport * from \"@splunk/visualizations-shared/RemoteIcon\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualization-context/FeatureFlagContext\";\nexport * from \"@splunk/visualization-context/FeatureFlagContext\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/id\";\nexport * from \"@splunk/ui-utils/id\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"d3-scale\";\nexport * from \"d3-scale\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"chroma-js\";\nexport * from \"chroma-js\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualization-color-palettes\";\nexport * from \"@splunk/visualization-color-palettes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualization-schemas\";\nexport * from \"@splunk/visualization-schemas\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import { forEach, sum, isNumber, min as lodashMin, max as lodashMax, get, isEqual, isObject } from 'lodash';\nimport { LngLatBoundsLike } from 'maplibre-gl';\nimport { scalePow } from 'd3-scale';\nimport chroma from 'chroma-js';\nimport type { MapContextInterface, BaseTileConfig } from '@splunk/visualization-context/MapContext';\nimport { isColor } from '@splunk/visualizations-shared/colorUtils';\nimport { VIZ_CATEGORICAL } from '@splunk/visualization-color-palettes';\nimport { isNumber as isNumberUtil } from '@splunk/visualization-encoding/utils/types';\nimport type { GeoJsonDataType } from '@splunk/visualizations-shared/mapUtils';\nimport { LAYER_TYPE } from '@splunk/visualization-schemas';\n\nexport const MAX_LATITUDE = 90;\nexport const MIN_LATITUDE = -90;\nexport const MAX_LONGITUDE = 180;\nexport const MIN_LONGITUDE = -180;\nexport const DEFAULT_RESULT_LIMIT = 1000;\nexport const DEFAULT_CLUSTER_COLOR = '#909090';\nexport const DEFAULT_SERIES_COLORS = VIZ_CATEGORICAL;\n// MapLibre requires a map style specification number which is always 8\nexport const MAP_STYLE_VERSION_NUMBER = 8;\n// currently using one [min, max] value set for bubbles across all zoom levels\n// TODO: design choices on [min, max] bubble size for different zoom levels\nexport const MIN_BUBBLE_RADIUS = 7.11; // 10px\nexport const MAX_BUBBLE_RADIUS = 45.26; // 85px\nexport const DEFAULT_OPACITY = 0.8;\nconst LONGITUDE = 'longitude';\nconst LATITUDE = 'latitude';\ninterface GenericLayerType {\n    type: string;\n    latitude: number[];\n    longitude: number[];\n    dataColors?: string[] | '';\n    seriesColors: string[];\n    additionalTooltipFields?: string[];\n    tooltipHeaderField?: string[];\n    resultLimit: number;\n    metadata?: Array<{ [key: string]: number | string }>;\n}\n\nexport interface MarkerLayerType extends GenericLayerType {\n    type: LAYER_TYPE.Marker;\n}\n\nexport interface BubbleLayerType extends GenericLayerType {\n    type: LAYER_TYPE.Bubble;\n    bubbleSize?: number[][] | number[];\n    bubbleSizeFields: string[];\n    dataValuesField?: string;\n    tooltipHeaderFieldName?: string;\n    geobin?: string[];\n    icon?: string[];\n    tooltipFieldIcons?: string;\n}\n\ninterface BubbleLayerDatumType {\n    zoom: number;\n    values: number[];\n    sanitizedValues: number[];\n    coordinates: number[];\n}\n\nexport interface BubbleLayerDataType {\n    data: BubbleLayerDatumType[];\n    dataRange: number[];\n    isPie: boolean;\n    resultLimit: number;\n    bubbleSizeFields: string[];\n}\n\nexport interface ChoroplethLayerType {\n    type: LAYER_TYPE.Choropleth;\n    areaIds: string[];\n    areaValues: number[];\n    dataColors: string[];\n    additionalTooltipFields?: string[];\n    tooltipHeaderField?: string[];\n    geom?: GeoJsonDataType[];\n    resultLimit?: number;\n    metadata?: Array<{ [key: string]: number | string | GeoJsonDataType }>;\n    source?: string;\n    width?: string | number;\n    height?: string | number;\n    choroplethEmptyAreaColor?: string;\n    choroplethStrokeColor?: string;\n    choroplethOpacity?: number;\n}\n\n// todo(@ssahnoune) - look into this\nexport interface MapLayerClickPayloadType {\n    name?: string;\n    value?: string | number;\n    /* cell values of all cells of clicked row with the field and value - in shape row.<field>.value */\n    [key: string]: string | number;\n}\n\nexport type ClusterLayerType = BubbleLayerType | MarkerLayerType;\nexport type LayerType = ClusterLayerType | ChoroplethLayerType;\n/**\n * Construct a tile preset {key: config} by combining the default + custom tile configs\n * Also returns the default tile config for each theme - light/dark\n * @param {MapContextInterface} args\n * @param {BaseTileConfig[]} args.defaultTileConfig\n * @param {BaseTileConfig[]} args.customTileConfig\n * @returns {Object} tile preset\n */\nexport const getTilePreset = ({\n    defaultTileConfig = [],\n    customTileConfig = [],\n}: MapContextInterface): {\n    tilePreset: Record<string, BaseTileConfig>;\n    defaultTileLight: BaseTileConfig;\n    defaultTileDark: BaseTileConfig;\n} => {\n    const tilePreset = {};\n    let defaultTileLight = {};\n    let defaultTileDark = {};\n    const tileConfigs = [].concat(defaultTileConfig).concat(customTileConfig);\n    forEach(tileConfigs, tileConfig => {\n        const key = tileConfig?.key;\n        const updatedConfig = {\n            theme: 'all',\n            ...tileConfig,\n            version: MAP_STYLE_VERSION_NUMBER,\n        };\n        tilePreset[key] = updatedConfig;\n    });\n\n    if (defaultTileConfig.length > 0) {\n        defaultTileLight =\n            defaultTileConfig.find(config => config.theme === 'light') ??\n            defaultTileConfig.find(config => config.theme === undefined);\n        defaultTileDark =\n            defaultTileConfig.find(config => config.theme === 'dark') ??\n            defaultTileConfig.find(config => config.theme === undefined);\n    }\n\n    return { tilePreset, defaultTileLight, defaultTileDark };\n};\n\n/**\n * Check if baseLayerTileServer is in tilePreset and config matches current theme, if yes, return.\n * If no, construct a mapStyle with baseLayerTilerServer and baseLayerTileServerType\n * Else return default tile config based on current theme\n * @param {Object} args\n * @param {BaseTileConfig[]} args.tilePreset\n * @param {String} args.baseLayerTilerServer\n * @param {String} args.baseLayerTileServerType\n * @param {String} args.colorScheme\n * @param {BaseTileConfig} args.defaultTileDark\n * @param {BaseTileConfig} args.defaultTileLight\n * @returns {BaseTileConfig} mapStyle\n */\nexport const getMapStyle = ({\n    showBaseLayer,\n    baseLayerTileServer = '',\n    baseLayerTileServerType = '',\n    tilePreset = {},\n    colorScheme = 'light',\n    defaultTileLight = {},\n    defaultTileDark = {},\n}: {\n    showBaseLayer: boolean;\n    baseLayerTileServer?: string;\n    baseLayerTileServerType?: string;\n    tilePreset?: Record<string, BaseTileConfig>;\n    colorScheme?: string;\n    defaultTileLight?: BaseTileConfig;\n    defaultTileDark?: BaseTileConfig;\n}): BaseTileConfig => {\n    if (!showBaseLayer) {\n        return {\n            version: MAP_STYLE_VERSION_NUMBER,\n            sources: {\n                'base-tiles': {\n                    type: 'raster',\n                    tiles: [\n                        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=',\n                    ],\n                    tileSize: 256,\n                },\n            },\n            layers: [\n                {\n                    id: 'base-layer',\n                    type: 'raster',\n                    source: 'base-tiles',\n                    minzoom: 0,\n                    maxzoom: 22,\n                },\n            ],\n        };\n    }\n\n    if (\n        baseLayerTileServer &&\n        tilePreset[baseLayerTileServer] &&\n        (tilePreset[baseLayerTileServer].theme === colorScheme ||\n            tilePreset[baseLayerTileServer].theme === 'all')\n    ) {\n        return tilePreset[baseLayerTileServer];\n    }\n\n    if (baseLayerTileServer && baseLayerTileServerType) {\n        let tiles = [];\n        /**\n         * Tile Server URLs (eg: http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png) can specify the variable {s} which refers to a subdomain\n         * Subdomains are used to help with browser parallel requests per domain limitation. These subdomains are typically single letters 'a', 'b' and 'c'\n         * Refer to https://leafletjs.com/SlavaUkraini/reference.html#tilelayer and https://wiki.openstreetmap.org/wiki/Tile_servers\n         */\n        if (baseLayerTileServer.match(/^(https?):\\/\\/{(s|S)}\\../)) {\n            /**\n             * sXML (Leaflet) allows users to define their own tile server URLs + list of available subdomains\n             * In order to preserve this behavior during conversion to splunk.map,\n             * if the variable {s} or {S} is detected, replace it with 'a', 'b' and 'c' - default values for subdomains\n             * TODO: in the future, add an additional prop - baseLayerTileServerSubdomains: ['x', 'y', 'z'], default being ['a', 'b', 'c']\n             */\n            tiles = [\n                baseLayerTileServer.replace(/{(s|S)}/, 'a'),\n                baseLayerTileServer.replace(/{(s|S)}/, 'b'),\n                baseLayerTileServer.replace(/{(s|S)}/, 'c'),\n            ];\n        } else {\n            tiles = [baseLayerTileServer];\n        }\n        // TODO: remove hardcoded style when we allow users to pass in layer style through Viz options\n        const mapStyle = {\n            version: MAP_STYLE_VERSION_NUMBER,\n            sources: {\n                'base-tiles': {\n                    type: baseLayerTileServerType,\n                    tiles,\n                    tileSize: 256,\n                },\n            },\n            layers: [\n                {\n                    id: 'base-layer',\n                    type: 'raster',\n                    source: 'base-tiles',\n                    minzoom: 0,\n                    maxzoom: 24, // https://maplibre.org/maplibre-gl-js-docs/api/map/\n                },\n            ],\n        };\n        return mapStyle;\n    }\n\n    // if tile server is not present in the preset AND we can't construct a mapStyle, fall back on defaults\n    return colorScheme === 'light' ? defaultTileLight : defaultTileDark;\n};\n\nexport interface ZoomConstraints {\n    minZoom: number;\n    maxZoom: number;\n}\n\nexport const getZoomConstraintsFromTileConfig = (\n    tileConfig: BaseTileConfig,\n    baseLayerTileServer?: string\n): ZoomConstraints => {\n    const { sources, layers } = tileConfig;\n    let matchedBaseLayerTileServer = false;\n    // check sources for minzoom maxzoom first\n    const sourceKeys = Object.keys(sources);\n    for (let i = 0; i < sourceKeys.length; i += 1) {\n        const { minzoom, maxzoom } = sources[sourceKeys[i]];\n        if (baseLayerTileServer && sources[sourceKeys[i]].tiles.indexOf(baseLayerTileServer) !== -1) {\n            matchedBaseLayerTileServer = true;\n        }\n        if (\n            ((baseLayerTileServer && matchedBaseLayerTileServer) || !baseLayerTileServer) &&\n            isNumber(minzoom) &&\n            isNumber(maxzoom)\n        ) {\n            return {\n                minZoom: minzoom,\n                maxZoom: maxzoom,\n            };\n        }\n    }\n    // then check layers\n    for (let i = 0; i < layers.length; i += 1) {\n        const { minzoom, maxzoom } = layers[i];\n        if (\n            ((baseLayerTileServer && matchedBaseLayerTileServer) || !baseLayerTileServer) &&\n            isNumber(minzoom) &&\n            isNumber(maxzoom)\n        ) {\n            return {\n                minZoom: minzoom,\n                maxZoom: maxzoom,\n            };\n        }\n    }\n    // Maplibre default - would reset previous min/maxZoom https://maplibre.org/maplibre-gl-js-docs/api/map/\n    return {\n        minZoom: 0,\n        maxZoom: 24,\n    };\n};\n\nexport const getZoomLevelFromGeobin = (geobinStr: string): number => {\n    if (!geobinStr) {\n        return null;\n    }\n    // geostats cmds return geobin with zoom level 0-18, 0-99 in the geobinPattern covers the range\n    const geobinPattern = /bin_id_zl_([0-9]{0,2})?_y_/g;\n    const match = geobinPattern.exec(geobinStr);\n    return (match?.length && parseInt(match[1], 10)) ?? null;\n};\n\n// Bubble colors - static\nexport const getStaticColors = (colorCount: number, colorArray: string[]): string[] => {\n    if (colorCount < 0 || !colorCount) {\n        return [DEFAULT_CLUSTER_COLOR];\n    }\n    if (!colorArray || !colorArray.length) {\n        return [...Array(colorCount).keys()].map(i => DEFAULT_SERIES_COLORS[i]);\n    }\n    // loop through colorArray to pick the first $colorCount colors\n    // start from begining again if colorCount > colorArray.length\n    return [...Array(colorCount).keys()].map(i =>\n        isColor(colorArray[i % colorArray.length]) ? colorArray[i % colorArray.length] : DEFAULT_CLUSTER_COLOR\n    );\n};\n\n// Bubble size\nexport const matchBubbleSize = (dataRange: number[], data: number): any => {\n    const size = scalePow().exponent(0.2).domain(dataRange).range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS])(\n        data\n    );\n\n    if (size > MAX_BUBBLE_RADIUS) {\n        return MAX_BUBBLE_RADIUS;\n    }\n    if (size < MIN_BUBBLE_RADIUS) {\n        return MIN_BUBBLE_RADIUS;\n    }\n    return size;\n};\n\nexport const transposeArray = (array: number[][]): number[][] => {\n    if (!array || !array.length || !array[0] || !array[0].length) {\n        return [];\n    }\n    return array[0].map((_, i) => array.map(row => row[i]));\n};\n\n// sanitize values: update all null, undefined, or negative values to 0\nexport const sanitizeValues = (values: number[] | number[][]) => {\n    // null / undefined\n    if (!values) {\n        return 0;\n    }\n    // number\n    if (!Array.isArray(values)) {\n        return values > 0 ? values : 0;\n    }\n    // array\n    return values.map(arr => sanitizeValues(arr));\n};\n\n// eslint-disable-next-line consistent-return\nexport const sortByValuesField = (bubbleLayer: BubbleLayerType) => {\n    const { bubbleSizeFields, dataValuesField } = bubbleLayer;\n\n    // Find the index of dataValuesField in fields\n    const index = bubbleSizeFields.indexOf(dataValuesField);\n    if (index === -1) return bubbleLayer; // If not found, return as is\n\n    // Move dataValuesField and corresponding sizes to the first position\n    bubbleLayer.bubbleSizeFields.unshift(bubbleLayer.bubbleSizeFields.splice(index, 1)[0]);\n    bubbleLayer.bubbleSize.unshift(bubbleLayer.bubbleSize.splice(index, 1)[0] as number & number[]);\n};\n\nexport const bakeBubbleData = (layer: BubbleLayerType): BubbleLayerDataType => {\n    if (\n        !layer ||\n        !layer.bubbleSize?.length ||\n        !layer.geobin ||\n        !layer.geobin.length ||\n        !layer.latitude ||\n        !layer.latitude.length ||\n        !layer.longitude ||\n        !layer.longitude.length\n    ) {\n        return null;\n    }\n    // if bubbleSize is passed as an array of single number array (data series)\n    // e.g. [value0, value1, ...]\n    // format each value as an array to unify data operations for data series and frames\n    const sanitizedBubbleSize = sanitizeValues(layer.bubbleSize);\n    let transposedBubbleSize: number[][];\n    let transposedSanitizedBubbleSize: number[][];\n    let isPie = false;\n    // format array if bubbleSize is passed as an array of array (data frame)\n    if (Array.isArray(layer.bubbleSize[0])) {\n        // one-time array transpose,\n        // e.g. from [column0data, column0data] (multi series)\n        // to [[column0datum0, column1datum0], [column0datum1, column1data1], ...]\n        // or e.g. from [column0data] (single series)\n        // to [[column0data]]\n        // for easy access of values at each geo location,\n        // and min max pie size computation\n        transposedBubbleSize = transposeArray(layer.bubbleSize as number[][]);\n        transposedSanitizedBubbleSize = transposeArray(sanitizedBubbleSize);\n        // if multiple series in the dataframe, set isPie to true\n        if (layer.bubbleSize.length > 1) {\n            isPie = true;\n            // when dynamic coloring is enabled,\n            // set the configured dataValues field as the first field\n            // to apply dynamic colors only to the first pie slice.\n            if (layer.dataValuesField && !!layer.dataColors) {\n                sortByValuesField(layer);\n            }\n        }\n    } else {\n        transposedBubbleSize = layer.bubbleSize.map(n => [n]);\n        transposedSanitizedBubbleSize = sanitizedBubbleSize.map(n => [n]);\n    }\n    if (!transposedBubbleSize || !transposedBubbleSize.length) {\n        return null;\n    }\n    const data = layer.latitude\n        .map((lat, i) => ({\n            zoom: getZoomLevelFromGeobin(layer.geobin[i]),\n            values: transposedBubbleSize[i],\n            sanitizedValues: transposedSanitizedBubbleSize[i],\n            coordinates: [layer.longitude[i], lat],\n            metadata: layer.metadata ? layer.metadata[i] : {},\n        }))\n        .filter(d => Boolean(d.values));\n\n    // compute the min/max value to encode min/max pie or bubble size\n    let min = sum(transposedSanitizedBubbleSize[0]);\n    let max = sum(transposedSanitizedBubbleSize[1]);\n    transposedSanitizedBubbleSize.forEach(row => {\n        const bubbleSize = sum(row);\n        max = bubbleSize > max ? bubbleSize : max;\n        min = bubbleSize < min ? bubbleSize : min;\n    });\n    return {\n        data,\n        dataRange: [min, max],\n        isPie,\n        resultLimit: layer.resultLimit,\n        bubbleSizeFields: layer.bubbleSizeFields,\n    };\n};\n\nexport const isValidLatLon = (latlon: Array<number | string>): boolean => {\n    if (!latlon || !Array.isArray(latlon) || latlon.length !== 2) {\n        return false;\n    }\n    const [lat, lon] = latlon;\n    if (!isNumberUtil(lat) || !(Number(lat) >= MIN_LATITUDE && Number(lat) <= MAX_LATITUDE)) {\n        return false;\n    }\n    if (!isNumberUtil(lon) || !(Number(lon) >= MIN_LONGITUDE && Number(lon) <= MAX_LONGITUDE)) {\n        return false;\n    }\n    return true;\n};\n\n/**\n * Returns a list of all lat or lon coordinates used in a specified layer\n * @param {LayerType[]} layer\n * @param {string} field\n * @returns {number[]} list of lat coordinates or lon coordinates\n */\nconst getLatOrLonCoordinates = (layer: LayerType, field: string): number[] => {\n    const getClusterValues = (clusterLayer: ClusterLayerType): number[] =>\n        get(clusterLayer, field, []).slice(\n            0,\n            clusterLayer.type === LAYER_TYPE.Marker && clusterLayer.resultLimit\n                ? clusterLayer.resultLimit\n                : DEFAULT_RESULT_LIMIT\n        );\n\n    const getChoroplethValues = (choroplethLayer: ChoroplethLayerType): number[] => {\n        const slicedGeomList = choroplethLayer.geom.slice(0, choroplethLayer.resultLimit);\n        const flatCoordinates = slicedGeomList.flatMap(geomObject => geomObject.coordinates.flat(2));\n        return flatCoordinates.map(coord => coord[field === LONGITUDE ? 0 : 1]);\n    };\n\n    return layer.type === LAYER_TYPE.Choropleth\n        ? getChoroplethValues(layer as ChoroplethLayerType)\n        : getClusterValues(layer as ClusterLayerType);\n};\n\n/**\n * Returns the min and max LongLat pairs to determine the layer boundaries to fit all markers/bubbles\n * @param {LayerType[]} layers\n * @returns {LngLatBoundsLike}\n */\nexport const getGlobalLayerBoundaries = (layers: LayerType[]): LngLatBoundsLike => {\n    const isLayerValid = (field: string): boolean =>\n        layers.every(layer => layer[field] || (layer as ChoroplethLayerType).geom);\n    const getDefaultMax = (field: string) => (field === LONGITUDE ? MAX_LONGITUDE : MAX_LATITUDE);\n    const getDefaultMin = (field: string) => (field === LONGITUDE ? MIN_LONGITUDE : MIN_LATITUDE);\n\n    if (!layers || !Array.isArray(layers) || !layers.length) {\n        return null;\n    }\n\n    const getMin = (field: string): number => {\n        if (!isLayerValid(field)) {\n            return getDefaultMin(field);\n        }\n        return layers.reduce((prevVal, layer) => {\n            const coordinatesNumArr = getLatOrLonCoordinates(layer, field).map(x => +x);\n            return lodashMin([prevVal, ...coordinatesNumArr]);\n        }, getDefaultMax(field));\n    };\n\n    const getMax = (field: string): number => {\n        if (!isLayerValid(field)) {\n            return getDefaultMax(field);\n        }\n        return layers.reduce((prevVal, layer) => {\n            const coordinatesNumArr = getLatOrLonCoordinates(layer, field).map(Number);\n            return lodashMax([prevVal, ...coordinatesNumArr]);\n        }, getDefaultMin(field));\n    };\n\n    return [\n        [getMin(LONGITUDE), getMin(LATITUDE)],\n        [getMax(LONGITUDE), getMax(LATITUDE)],\n    ];\n};\n\nexport const getScaledOpacities = (colors: string[], cfgOpacity: number): number[] => {\n    // extract opacity information from 8 digit hex codes\n    const opacities = colors?.map(color => (color?.length === 9 ? (chroma(color).alpha() ?? 1) : 1));\n    // opacity cannot be greater than configured opacity\n    return opacities?.map(opacity => opacity * cfgOpacity);\n};\n\nexport const compareBaseStyles = (curr, next): boolean => {\n    const currBaseLayer = curr?.layers?.find(layer => layer?.id === 'base-layer');\n    const nextBaseLayer = next?.layers?.find(layer => layer?.id === 'base-layer');\n    const currBaseSource = get(curr?.sources, (currBaseLayer?.source as string) ?? '');\n    const nextBaseSource = get(next?.sources, (nextBaseLayer?.source as string) ?? '');\n\n    if (!currBaseLayer || !nextBaseLayer || !currBaseSource || !nextBaseSource) {\n        return false;\n    }\n\n    return isEqual(currBaseLayer, nextBaseLayer) && isEqual(currBaseSource, nextBaseSource);\n};\n\nexport const formatMetadata = (\n    choroplethLayer: ChoroplethLayerType,\n    i: number\n): { [key: string]: string } => {\n    if (!choroplethLayer || !choroplethLayer.areaIds || !choroplethLayer.areaValues) return {};\n    if (i >= choroplethLayer.areaIds.length) return {};\n\n    const metadata = choroplethLayer.metadata ? choroplethLayer.metadata[i] : {};\n    const name = choroplethLayer.areaIds[i];\n    const value = choroplethLayer.areaValues[i];\n    const base = { name, value: String(value) };\n\n    return Object.keys(metadata).reduce((result, curr) => {\n        const key = `row.${curr}.value`;\n        const val = isObject(metadata[curr]) ? JSON.stringify(metadata[curr]) : String(metadata[curr]);\n        return { ...result, [key]: val };\n    }, base);\n};\n", "\nimport * as defaultImport from \"maplibre-gl\";\nexport * from \"maplibre-gl\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Popover\";\nexport * from \"@splunk/react-ui/Popover\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as React from 'react';\nimport styled from 'styled-components';\nimport Popover from '@splunk/react-ui/Popover';\nimport { isRemoteIcon, isDataURI } from '@splunk/visualizations-shared/iconUtils';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport FeatureFlagContext from '@splunk/visualization-context/FeatureFlagContext';\nimport RemoteIcon from '@splunk/visualizations-shared/RemoteIcon';\nimport { variables } from '@splunk/themes';\nimport { createDOMID } from '@splunk/ui-utils/id';\n\nconst StyledPopover = styled(Popover)`\n    width: 250px;\n    font-size: 12px;\n`;\n\nconst StyledTable = styled.table`\n    margin: 2px 6px 2px 6px;\n    table-layout: fixed;\n    width: calc(100% - 12px);\n`;\n\nconst StyledTitleColumn = styled.td`\n    opacity: 0.85;\n`;\n\nconst StyledValueColumn = styled.td`\n    text-align: right;\n`;\n\nconst StyledColorBlock = styled.div`\n    background-color: ${props => props.color};\n    display: inline-block;\n    margin-right: 4px;\n    border-radius: 2px;\n    width: 6px;\n    height: 11px;\n    transform: translateY(1px);\n`;\n\nconst StyledFieldLabel = styled.span`\n    display: inline-block;\n    white-space: nowrap;\n`;\n\nconst StyledIconWrapper = styled.span`\n    margin-left: 4px;\n    display: inline-block;\n    vertical-align: middle;\n`;\n\nconst StyledTooltipHeader = styled.thead`\n    th {\n        height: 16px;\n        color: ${variables.contentColorActive};\n        padding: 0;\n    }\n\n    span {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n    }\n`;\n\nexport const convertDegToDMS = (decimalDegree: number, type: 'latitude' | 'longitude'): string => {\n    const truncate = n => (n > 0 ? Math.floor(n) : Math.ceil(n));\n    const absoluteDegree = Math.abs(decimalDegree);\n    let degrees = truncate(absoluteDegree);\n    let minutes = truncate((absoluteDegree - degrees) * 60);\n    let seconds = Math.round((absoluteDegree - degrees - minutes / 60) * 3600);\n    if (seconds === 60) {\n        minutes += 1;\n        seconds = 0;\n    }\n    if (minutes === 60) {\n        degrees += 1;\n        minutes = 0;\n    }\n    let direction: string;\n    if (type === 'longitude') {\n        direction = decimalDegree < 0 ? 'W' : 'E';\n    } else if (type === 'latitude') {\n        direction = decimalDegree < 0 ? 'S' : 'N';\n    }\n    return `${degrees}\u00B0 ${minutes}' ${seconds}\" ${direction}`;\n};\n\nexport interface TooltipProps {\n    open?: boolean;\n    anchor?: HTMLElement;\n    latitude?: number;\n    longitude?: number;\n    areaId?: string;\n    areaValue?: number;\n    additionalFields?: Array<{ name: string; value: number | string; color?: string; icon?: string }>;\n    showCoordinates?: boolean;\n    tooltipHeader?: string;\n}\n// only want latitude/longitude for marker and bubble\n// omit for choropleth, and put areaid, areavalue instead\nconst Tooltip = ({\n    open,\n    anchor,\n    latitude,\n    longitude,\n    areaId,\n    areaValue,\n    additionalFields = [],\n    showCoordinates = true,\n    tooltipHeader = null,\n}: TooltipProps): JSX.Element => {\n    const featureFlagContext = React.useContext<FeatureFlagContext>(FeatureFlagContext);\n    const isTooltipIconFlagEnabled = Boolean(\n        featureFlagContext && featureFlagContext.visualizations_enableTooltipIcon\n    );\n    return (\n        <StyledPopover\n            open={open}\n            animation={false}\n            anchor={anchor}\n            data-test=\"map-marker-tooltip\"\n            defaultPlacement=\"above\"\n        >\n            <StyledTable>\n                {tooltipHeader && (\n                    <StyledTooltipHeader data-test=\"tooltip-header\">\n                        <tr>\n                            <th colSpan={2}>\n                                <span data-test=\"tooltip-header-value\">{tooltipHeader}</span>\n                            </th>\n                        </tr>\n                    </StyledTooltipHeader>\n                )}\n                <tbody>\n                    {areaId && areaValue && (\n                        <tr>\n                            <StyledTitleColumn data-test=\"area-id\">{areaId}</StyledTitleColumn>\n                            <StyledValueColumn data-test=\"area-value\">{areaValue}</StyledValueColumn>\n                        </tr>\n                    )}\n                    {Boolean(showCoordinates && latitude) && (\n                        <tr>\n                            <StyledTitleColumn>{_('Latitude')}</StyledTitleColumn>\n                            <StyledValueColumn data-test=\"latitude\">\n                                {convertDegToDMS(latitude, 'latitude')}\n                            </StyledValueColumn>\n                        </tr>\n                    )}\n                    {Boolean(showCoordinates && longitude) && (\n                        <tr>\n                            <StyledTitleColumn>{_('Longitude')}</StyledTitleColumn>\n                            <StyledValueColumn data-test=\"longitude\">\n                                {convertDegToDMS(longitude, 'longitude')}\n                            </StyledValueColumn>\n                        </tr>\n                    )}\n                    {additionalFields\n                        .filter(({ value }) => value && String(value) !== '0')\n                        .map(({ name, value, color, icon }) => (\n                            <tr key={createDOMID()}>\n                                <StyledTitleColumn data-test=\"field-title\">\n                                    {color ? (\n                                        <StyledColorBlock data-test=\"field-color\" color={color} />\n                                    ) : null}\n                                    <StyledFieldLabel>\n                                        {name}\n                                        {isTooltipIconFlagEnabled &&\n                                        icon &&\n                                        (isRemoteIcon(icon) || isDataURI(icon)) ? (\n                                            <StyledIconWrapper data-test=\"field-icon\">\n                                                <RemoteIcon iconURL={icon} width={16} height={16} />\n                                            </StyledIconWrapper>\n                                        ) : null}\n                                    </StyledFieldLabel>\n                                </StyledTitleColumn>\n                                <StyledValueColumn data-test=\"field-value\">{value}</StyledValueColumn>\n                            </tr>\n                        ))}\n                </tbody>\n            </StyledTable>\n        </StyledPopover>\n    );\n};\n\nexport default Tooltip;\n", "import type { Map } from 'maplibre-gl';\nimport { Marker } from 'maplibre-gl';\nimport * as React from 'react';\nimport type { TooltipProps } from './Tooltip';\nimport Tooltip from './Tooltip';\n\nexport interface MarkerWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n    latitude: number;\n    longitude: number;\n    areaId?: string;\n    areaValue?: number;\n    additionalFields?: TooltipProps['additionalFields'];\n    tooltipHeader?: TooltipProps['tooltipHeader'];\n    map: React.MutableRefObject<Map>;\n    isChoroplethTooltipOpen?: boolean;\n    showCoordinates?: boolean;\n}\n\nconst MarkerWrapper = ({\n    longitude,\n    latitude,\n    areaId,\n    areaValue,\n    additionalFields = [],\n    tooltipHeader = null,\n    map,\n    isChoroplethTooltipOpen,\n    children,\n    showCoordinates = true,\n    ...otherProps\n}: MarkerWrapperProps): JSX.Element => {\n    const container = React.useRef<HTMLDivElement>();\n    const marker = React.useRef<Marker>();\n    const [isTooltipOpen, setTooltipOpenStatus] = React.useState(false);\n\n    const isChoroplethTooltip = React.useCallback(\n        () => isChoroplethTooltipOpen !== undefined,\n        [isChoroplethTooltipOpen]\n    );\n\n    const openTooltip = React.useCallback(() => setTooltipOpenStatus(true), []);\n    const closeTooltip = React.useCallback(() => setTooltipOpenStatus(false), []);\n\n    const cleanupMarker = React.useCallback(() => {\n        if (marker.current) {\n            marker.current.remove();\n            marker.current = undefined;\n        }\n    }, []);\n\n    React.useEffect(() => {\n        try {\n            if (marker.current) {\n                marker.current.setLngLat([longitude, latitude]);\n            } else {\n                marker.current = new Marker({ element: container.current });\n                marker.current.setLngLat([longitude, latitude]);\n                marker.current.addTo(map.current);\n            }\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.error(error);\n            cleanupMarker();\n        }\n    }, [latitude, longitude, map]);\n\n    React.useEffect(() => cleanupMarker, []);\n    const filteredAdditionalFields = additionalFields.filter(({ value }) => value && String(value) !== '0');\n    const showTooltip = showCoordinates || filteredAdditionalFields.length || (areaId && areaValue);\n    return (\n        <div style={{ visibility: isChoroplethTooltip() ? 'hidden' : 'visible' }}>\n            <div\n                style={{\n                    visibility: isChoroplethTooltip() ? 'hidden' : 'visible',\n                }}\n                ref={container}\n                data-test=\"map-marker\"\n                onMouseOver={openTooltip}\n                onMouseLeave={closeTooltip}\n                onFocus={openTooltip}\n                onBlur={closeTooltip}\n                {...otherProps}\n            >\n                {children}\n            </div>\n            <div>\n                {showTooltip && (\n                    <Tooltip\n                        open={isChoroplethTooltip() ? isChoroplethTooltipOpen : isTooltipOpen}\n                        anchor={container.current}\n                        latitude={isChoroplethTooltip() ? null : latitude}\n                        longitude={isChoroplethTooltip() ? null : longitude}\n                        areaId={areaId}\n                        areaValue={areaValue}\n                        additionalFields={additionalFields}\n                        showCoordinates={showCoordinates}\n                        tooltipHeader={tooltipHeader}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default MarkerWrapper;\n", "import * as React from 'react';\nimport styled from 'styled-components';\nimport type { Map } from 'maplibre-gl';\nimport { sum } from 'lodash';\nimport { isRemoteIcon, isDataURI } from '@splunk/visualizations-shared/iconUtils';\nimport { isColor } from '@splunk/visualizations-shared/colorUtils';\nimport RemoteIcon from '@splunk/visualizations-shared/RemoteIcon';\nimport FeatureFlagContext from '@splunk/visualization-context/FeatureFlagContext';\nimport { createDOMID } from '@splunk/ui-utils/id';\nimport {\n    bakeBubbleData,\n    BubbleLayerType,\n    DEFAULT_SERIES_COLORS,\n    DEFAULT_RESULT_LIMIT,\n    DEFAULT_CLUSTER_COLOR,\n    getStaticColors,\n    matchBubbleSize,\n} from './MapUtils';\nimport MarkerWrapper from './MarkerWrapper';\nimport type { TooltipProps } from './Tooltip';\n\nexport const GEO_BOUND_PREFIX = '_geo_bounds_';\nexport const GEO_LAT_AND_LONG_FIELD = ['_geo_long_field', '_geo_lat_field'];\nexport const ICON_DISPLAY_CUTOFF = 16;\nexport interface PieSegmentProps {\n    start: number;\n    end: number;\n    radius: number;\n    color: string;\n    themeColor: string;\n    segmentMetadata?: { name: string; value: number; color: string };\n    handleBubbleClick?: (e: Event, name: string, count: number) => void;\n}\n\nexport const PieSegment = React.memo(\n    ({\n        start,\n        end,\n        radius,\n        color,\n        themeColor,\n        segmentMetadata,\n        handleBubbleClick,\n    }: PieSegmentProps): JSX.Element => {\n        const { name, value } = segmentMetadata ?? {};\n        const handleSegmentClick = React.useCallback(\n            e => {\n                handleBubbleClick(e, name, value);\n            },\n            [name, value, handleBubbleClick]\n        );\n\n        if (end - start === 1) {\n            return (\n                <circle\n                    onClick={handleSegmentClick}\n                    cx={radius}\n                    cy={radius}\n                    r={radius}\n                    fill={color}\n                    fillOpacity={0.5}\n                    strokeWidth={1.5}\n                    stroke={color}\n                />\n            );\n        }\n        const a0 = 2 * Math.PI * (start - 0.25);\n        const a1 = 2 * Math.PI * (end - 0.25);\n        const x0 = Math.cos(a0);\n        const y0 = Math.sin(a0);\n        const x1 = Math.cos(a1);\n        const y1 = Math.sin(a1);\n        const arc = end - start > 0.5 ? 1 : 0;\n\n        return (\n            <path\n                onClick={handleSegmentClick}\n                d={`M ${radius} ${radius} L ${radius + radius * x0} ${\n                    radius + radius * y0\n                } A ${radius} ${radius} 0 ${arc} 1 ${radius + radius * x1} ${\n                    radius + radius * y1\n                } L ${radius} ${radius} A 0 0 0 ${arc} 0 ${radius} ${radius}`}\n                fill={color}\n                fillOpacity={0.8}\n                stroke={themeColor}\n                strokeWidth={2}\n                strokeOpacity={0.3}\n            />\n        );\n    }\n);\n\nPieSegment.displayName = 'MapBubblePieSegment';\n\nconst StyledMarkerWrapper = styled(MarkerWrapper)`\n    cursor: pointer;\n`;\n\nexport interface BubbleProps {\n    originalValues: number[];\n    valueRange: number[];\n    colors: string[];\n    themeColor: string;\n    isPie: boolean;\n    latitude: number;\n    longitude: number;\n    bubbleSize: Required<TooltipProps['additionalFields'][number] & { value: number }>[];\n    additionalFields?: TooltipProps['additionalFields'];\n    tooltipHeader?: TooltipProps['tooltipHeader'];\n    map: React.MutableRefObject<Map>;\n    handleMapClick?: any;\n    icon?: string;\n    showCoordinates?: boolean;\n}\n\nexport const Bubble = React.memo(\n    ({\n        originalValues,\n        valueRange,\n        colors,\n        themeColor,\n        isPie,\n        latitude,\n        longitude,\n        bubbleSize,\n        additionalFields = [],\n        tooltipHeader = null,\n        map,\n        handleMapClick,\n        icon,\n        showCoordinates,\n    }: BubbleProps): JSX.Element => {\n        const featureFlagContext = React.useContext<FeatureFlagContext>(FeatureFlagContext);\n        const isBubbleMapIconFlagEnabled = Boolean(\n            featureFlagContext && featureFlagContext.visualizations_enableBubbleMapIcon\n        );\n\n        const onBubbleClick = React.useCallback(\n            (e, name, value) => {\n                handleMapClick(e, name, value);\n                e.stopPropagation();\n            },\n            [handleMapClick]\n        );\n\n        // sanitize values\n        const allZeros = originalValues.every(v => v === 0);\n        const values = originalValues.map(v => (v > 0 ? v : 0));\n        const total = values.reduce((totalValue, v) => totalValue + v, 0);\n        const radius = matchBubbleSize(valueRange, total);\n\n        const bubble = React.useMemo(() => {\n            if (allZeros || !originalValues.length) return null;\n\n            const offsets: number[] = [];\n            let runningTotal = 0;\n            values.forEach(count => {\n                offsets.push(runningTotal);\n                runningTotal += count;\n            });\n\n            const width = radius * 2;\n            return (\n                <svg width={width} height={width} viewBox={`-3 -3 ${width + 6} ${width + 6}`}>\n                    {isPie && (\n                        <circle\n                            cx={radius}\n                            cy={radius}\n                            r={radius}\n                            fill=\"none\"\n                            strokeWidth={2}\n                            stroke={themeColor}\n                            strokeOpacity={0.3}\n                        />\n                    )}\n                    {values.map((v, i) => (\n                        <PieSegment\n                            key={createDOMID()}\n                            start={offsets[i] / total}\n                            end={(offsets[i] + v) / total}\n                            radius={radius}\n                            color={colors[i]}\n                            themeColor={themeColor}\n                            segmentMetadata={bubbleSize[i]}\n                            handleBubbleClick={onBubbleClick}\n                        />\n                    ))}\n                </svg>\n            );\n        }, [\n            bubbleSize,\n            colors,\n            isPie,\n            onBubbleClick,\n            originalValues,\n            themeColor,\n            allZeros,\n            radius,\n            total,\n            values,\n        ]);\n\n        if (!bubble) {\n            return null;\n        }\n\n        return (\n            <StyledMarkerWrapper\n                longitude={longitude}\n                latitude={latitude}\n                additionalFields={[...bubbleSize, ...additionalFields]}\n                tooltipHeader={tooltipHeader}\n                map={map}\n                data-test-type=\"bubble\"\n                showCoordinates={showCoordinates}\n            >\n                {bubble}\n                {isBubbleMapIconFlagEnabled &&\n                    radius >= ICON_DISPLAY_CUTOFF &&\n                    icon &&\n                    (isRemoteIcon(icon) || isDataURI(icon)) && (\n                        <div\n                            data-test=\"bubble-icon-wrapper\"\n                            style={{\n                                position: 'absolute',\n                                top: `${radius}px`,\n                                left: `${radius}px`,\n                                transform: 'translate(-50%, -50%)',\n                                pointerEvents: 'none',\n                            }}\n                        >\n                            <RemoteIcon iconURL={icon} width={radius * 0.8} height={radius * 0.8} />\n                        </div>\n                    )}\n            </StyledMarkerWrapper>\n        );\n    }\n);\nBubble.displayName = 'MapBubble';\n\nexport interface BubbleLayerProps {\n    bubbleLayer: BubbleLayerType;\n    themeColorScheme: string;\n    zoom: number;\n    map: React.MutableRefObject<Map>;\n    onMapClick?: any;\n    showCoordinates?: boolean;\n}\n\nconst BubbleLayer = (props: BubbleLayerProps): JSX.Element => {\n    const { bubbleLayer, themeColorScheme, map, zoom, onMapClick, showCoordinates } = props;\n\n    bubbleLayer.seriesColors = bubbleLayer.seriesColors || DEFAULT_SERIES_COLORS;\n    bubbleLayer.bubbleSize = bubbleLayer.bubbleSize || [];\n    bubbleLayer.icon = bubbleLayer.icon || [];\n    const bakedData = React.useMemo(() => bakeBubbleData(bubbleLayer), [bubbleLayer]);\n    const staticColors = React.useMemo(\n        () => getStaticColors(bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors),\n        [bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors]\n    );\n    const { data = [], dataRange = [], resultLimit, bubbleSizeFields, isPie } = bakedData ?? {};\n    const { additionalTooltipFields = [], tooltipHeaderFieldName = null } = bubbleLayer;\n    const roundedZoom = Math.round(zoom);\n    const themeColor = themeColorScheme === 'light' ? '#ffffff' : '#1a1c20';\n    const dynamicColors = bubbleLayer.dataColors;\n\n    // filter data for the current zoom level and sort base on values\n    const dataToRender = React.useMemo(\n        () =>\n            data\n                .reduce((acc, datum, i) => {\n                    if (datum.zoom === roundedZoom) {\n                        acc.push({ data: datum, idx: i });\n                    }\n                    return acc;\n                }, [])\n                .slice(0, resultLimit || DEFAULT_RESULT_LIMIT)\n                .sort((a, b) => sum(b.data.values) - sum(a.data.values)),\n        [data, resultLimit, roundedZoom]\n    );\n\n    const handleMapClick = React.useCallback(\n        (e, name, value, i) => {\n            // retrieve metadata from the appropriate datum, indexed by i\n            const metadata = dataToRender[i]?.data?.metadata ?? {};\n            const payload = Object.keys(metadata).reduce(\n                (acc, curr) => {\n                    const key = `row.${curr}.value`;\n                    const val = String(metadata[curr]);\n                    return { ...acc, [key]: val };\n                },\n                { name, value: String(value) }\n            );\n\n            onMapClick({ e, payload });\n        },\n        [dataToRender, onMapClick]\n    );\n\n    return (\n        <>\n            {dataToRender.map((datum, i) => {\n                const colors = dynamicColors\n                    ? [\n                          dataToRender.map(obj =>\n                              isColor(dynamicColors[obj.idx]) ? dynamicColors[obj.idx] : DEFAULT_CLUSTER_COLOR\n                          )[i],\n                      ]\n                    : staticColors;\n\n                const [longitude, latitude] = datum.data.coordinates;\n                const bubbleSize = datum.data.values.map((value, index) => ({\n                    name: bubbleSizeFields[index],\n                    value,\n                    color: colors[index],\n                }));\n\n                const additionalFields = bubbleLayer.metadata\n                    ? additionalTooltipFields.map(field => ({\n                          name: field,\n                          value: datum.data.metadata[field],\n                          icon: bubbleLayer.tooltipFieldIcons?.[field],\n                      }))\n                    : [];\n\n                const tooltipHeaderField =\n                    bubbleLayer.metadata && datum.data.metadata[tooltipHeaderFieldName];\n\n                return (\n                    <Bubble\n                        // eslint-disable-next-line\n                        key={String(i)}\n                        originalValues={datum.data.values}\n                        valueRange={dataRange}\n                        colors={colors}\n                        themeColor={themeColor}\n                        isPie={isPie}\n                        longitude={longitude}\n                        latitude={latitude}\n                        bubbleSize={bubbleSize}\n                        additionalFields={additionalFields}\n                        tooltipHeader={tooltipHeaderField}\n                        map={map}\n                        handleMapClick={(e, name, value) => handleMapClick(e, name, value, i)}\n                        icon={bubbleLayer.icon[datum.idx]}\n                        showCoordinates={showCoordinates}\n                    />\n                );\n            })}\n        </>\n    );\n};\n\nexport default BubbleLayer;\n"],
+  "sourcesContent": ["import { isNumber } from '@splunk/visualization-encoding/utils/types';\nimport { getFieldsFromDSL } from '@splunk/visualization-encoding/utils/dsl';\nimport { deepMergeWithArrayPrimitiveOverrides } from '@splunk/visualizations-shared/hocUtils';\nimport { pickFieldFromJSONSchema } from '@splunk/visualizations-shared/JSONSchemaUtils';\nimport { GEO_LAT_AND_LONG_FIELD } from '../../Map/PureMap/BubbleLayer';\n\nexport const columnsNullToZeros = (config, dataSources, options) => {\n    const { primary } = dataSources;\n    const { columns, fields } = primary.data;\n    let newColumns = columns;\n    const mergedOptions = deepMergeWithArrayPrimitiveOverrides(\n        {},\n        options,\n        pickFieldFromJSONSchema(config.optionsSchema, 'default')\n    );\n    if (mergedOptions.layers?.[0]?.type === 'bubble') {\n        const latitudeField = getFieldsFromDSL(mergedOptions.layers[0].latitude, dataSources)[0] || '';\n        const longitudeField = getFieldsFromDSL(mergedOptions.layers[0].longitude, dataSources)[0] || '';\n        const stringsFields = getFieldsFromDSL(\"> primary | frameBySeriesTypes('string')\", dataSources);\n        const excludedFields = Array.from(\n            new Set([\n                latitudeField,\n                longitudeField,\n                'geobin',\n                'name',\n                ...stringsFields,\n                ...GEO_LAT_AND_LONG_FIELD,\n            ])\n        );\n        const indicesToEvaluate = new Set(\n            fields.reduce((arr, e, i) => {\n                const field = typeof e === 'string' ? e : e.name.toString();\n                if (!excludedFields.includes(field)) {\n                    arr.push(i);\n                }\n                return arr;\n            }, [])\n        );\n\n        newColumns = columns.map((column, i) => {\n            if (indicesToEvaluate.has(i)) {\n                // sanitize value and convert string to numeric numbers\n                return column.map(value => (!value || !isNumber(value) ? 0 : +value));\n            }\n            return column;\n        });\n    }\n\n    const modifiedDatasources = {\n        ...dataSources,\n        primary: {\n            ...primary,\n            data: {\n                ...primary.data,\n                columns: newColumns,\n            },\n        },\n    };\n\n    return modifiedDatasources;\n};\n", "\nimport * as defaultImport from \"@splunk/visualization-encoding/utils/types\";\nexport * from \"@splunk/visualization-encoding/utils/types\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualization-encoding/utils/dsl\";\nexport * from \"@splunk/visualization-encoding/utils/dsl\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/hocUtils\";\nexport * from \"@splunk/visualizations-shared/hocUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/JSONSchemaUtils\";\nexport * from \"@splunk/visualizations-shared/JSONSchemaUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"react\";\nexport * from \"react\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"styled-components\";\nexport * from \"styled-components\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"lodash\";\nexport * from \"lodash\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/iconUtils\";\nexport * from \"@splunk/visualizations-shared/iconUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/colorUtils\";\nexport * from \"@splunk/visualizations-shared/colorUtils\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualizations-shared/RemoteIcon\";\nexport * from \"@splunk/visualizations-shared/RemoteIcon\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualization-context/FeatureFlagContext\";\nexport * from \"@splunk/visualization-context/FeatureFlagContext\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/id\";\nexport * from \"@splunk/ui-utils/id\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"d3-scale\";\nexport * from \"d3-scale\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"chroma-js\";\nexport * from \"chroma-js\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualization-color-palettes\";\nexport * from \"@splunk/visualization-color-palettes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/visualization-schemas\";\nexport * from \"@splunk/visualization-schemas\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import { forEach, sum, isNumber, min as lodashMin, max as lodashMax, get, isEqual, isObject } from 'lodash';\nimport { LngLatBoundsLike } from 'maplibre-gl';\nimport { scalePow } from 'd3-scale';\nimport chroma from 'chroma-js';\nimport type { MapContextInterface, BaseTileConfig } from '@splunk/visualization-context/MapContext';\nimport { isColor } from '@splunk/visualizations-shared/colorUtils';\nimport { VIZ_CATEGORICAL } from '@splunk/visualization-color-palettes';\nimport { isNumber as isNumberUtil } from '@splunk/visualization-encoding/utils/types';\nimport type { GeoJsonDataType } from '@splunk/visualizations-shared/mapUtils';\nimport { LAYER_TYPE } from '@splunk/visualization-schemas';\n\nexport const MAX_LATITUDE = 90;\nexport const MIN_LATITUDE = -90;\nexport const MAX_LONGITUDE = 180;\nexport const MIN_LONGITUDE = -180;\nexport const DEFAULT_RESULT_LIMIT = 1000;\nexport const DEFAULT_CLUSTER_COLOR = '#909090';\nexport const DEFAULT_SERIES_COLORS = VIZ_CATEGORICAL;\n// MapLibre requires a map style specification number which is always 8\nexport const MAP_STYLE_VERSION_NUMBER = 8;\n// currently using one [min, max] value set for bubbles across all zoom levels\n// TODO: design choices on [min, max] bubble size for different zoom levels\nexport const MIN_BUBBLE_RADIUS = 7.11; // 10px\nexport const MAX_BUBBLE_RADIUS = 45.26; // 85px\nexport const DEFAULT_OPACITY = 0.8;\nconst LONGITUDE = 'longitude';\nconst LATITUDE = 'latitude';\ninterface GenericLayerType {\n    type: string;\n    latitude: number[];\n    longitude: number[];\n    dataColors?: string[] | '';\n    seriesColors: string[];\n    additionalTooltipFields?: string[];\n    tooltipHeaderField?: string[];\n    resultLimit: number;\n    metadata?: Array<{ [key: string]: number | string }>;\n}\n\nexport interface MarkerLayerType extends GenericLayerType {\n    type: LAYER_TYPE.Marker;\n}\n\nexport interface BubbleLayerType extends GenericLayerType {\n    type: LAYER_TYPE.Bubble;\n    bubbleSize?: number[][] | number[];\n    bubbleSizeFields: string[];\n    dataValuesField?: string;\n    tooltipHeaderFieldName?: string;\n    geobin?: string[];\n    icon?: string[];\n    tooltipFieldIcons?: string;\n}\n\ninterface BubbleLayerDatumType {\n    zoom: number;\n    values: number[];\n    sanitizedValues: number[];\n    coordinates: number[];\n}\n\nexport interface BubbleLayerDataType {\n    data: BubbleLayerDatumType[];\n    dataRange: number[];\n    isPie: boolean;\n    resultLimit: number;\n    bubbleSizeFields: string[];\n}\n\nexport interface ChoroplethLayerType {\n    type: LAYER_TYPE.Choropleth;\n    areaIds: string[];\n    areaValues: number[];\n    dataColors: string[];\n    additionalTooltipFields?: string[];\n    tooltipHeaderField?: string[];\n    geom?: GeoJsonDataType;\n    resultLimit?: number;\n    metadata?: Array<{ [key: string]: number | string | GeoJsonDataType }>;\n    source?: string;\n    width?: string | number;\n    height?: string | number;\n    choroplethEmptyAreaColor?: string;\n    choroplethStrokeColor?: string;\n    choroplethOpacity?: number;\n}\n\n// todo(@ssahnoune) - look into this\nexport interface MapLayerClickPayloadType {\n    name?: string;\n    value?: string | number;\n    /* cell values of all cells of clicked row with the field and value - in shape row.<field>.value */\n    [key: string]: string | number;\n}\n\nexport type ClusterLayerType = BubbleLayerType | MarkerLayerType;\nexport type LayerType = ClusterLayerType | ChoroplethLayerType;\n/**\n * Construct a tile preset {key: config} by combining the default + custom tile configs\n * Also returns the default tile config for each theme - light/dark\n * @param {MapContextInterface} args\n * @param {BaseTileConfig[]} args.defaultTileConfig\n * @param {BaseTileConfig[]} args.customTileConfig\n * @returns {Object} tile preset\n */\nexport const getTilePreset = ({\n    defaultTileConfig = [],\n    customTileConfig = [],\n}: MapContextInterface): {\n    tilePreset: Record<string, BaseTileConfig>;\n    defaultTileLight: BaseTileConfig;\n    defaultTileDark: BaseTileConfig;\n} => {\n    const tilePreset = {};\n    let defaultTileLight = {};\n    let defaultTileDark = {};\n    const tileConfigs = [].concat(defaultTileConfig).concat(customTileConfig);\n    forEach(tileConfigs, tileConfig => {\n        const key = tileConfig?.key;\n        const updatedConfig = {\n            theme: 'all',\n            ...tileConfig,\n            version: MAP_STYLE_VERSION_NUMBER,\n        };\n        tilePreset[key] = updatedConfig;\n    });\n\n    if (defaultTileConfig.length > 0) {\n        defaultTileLight =\n            defaultTileConfig.find(config => config.theme === 'light') ??\n            defaultTileConfig.find(config => config.theme === undefined);\n        defaultTileDark =\n            defaultTileConfig.find(config => config.theme === 'dark') ??\n            defaultTileConfig.find(config => config.theme === undefined);\n    }\n\n    return { tilePreset, defaultTileLight, defaultTileDark };\n};\n\n/**\n * Check if baseLayerTileServer is in tilePreset and config matches current theme, if yes, return.\n * If no, construct a mapStyle with baseLayerTilerServer and baseLayerTileServerType\n * Else return default tile config based on current theme\n * @param {Object} args\n * @param {BaseTileConfig[]} args.tilePreset\n * @param {String} args.baseLayerTilerServer\n * @param {String} args.baseLayerTileServerType\n * @param {String} args.colorScheme\n * @param {BaseTileConfig} args.defaultTileDark\n * @param {BaseTileConfig} args.defaultTileLight\n * @returns {BaseTileConfig} mapStyle\n */\nexport const getMapStyle = ({\n    showBaseLayer,\n    baseLayerTileServer = '',\n    baseLayerTileServerType = '',\n    tilePreset = {},\n    colorScheme = 'light',\n    defaultTileLight = {},\n    defaultTileDark = {},\n}: {\n    showBaseLayer: boolean;\n    baseLayerTileServer?: string;\n    baseLayerTileServerType?: string;\n    tilePreset?: Record<string, BaseTileConfig>;\n    colorScheme?: string;\n    defaultTileLight?: BaseTileConfig;\n    defaultTileDark?: BaseTileConfig;\n}): BaseTileConfig => {\n    if (!showBaseLayer) {\n        return {\n            version: MAP_STYLE_VERSION_NUMBER,\n            sources: {\n                'base-tiles': {\n                    type: 'raster',\n                    tiles: [\n                        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII=',\n                    ],\n                    tileSize: 256,\n                },\n            },\n            layers: [\n                {\n                    id: 'base-layer',\n                    type: 'raster',\n                    source: 'base-tiles',\n                    minzoom: 0,\n                    maxzoom: 22,\n                },\n            ],\n        };\n    }\n\n    if (\n        baseLayerTileServer &&\n        tilePreset[baseLayerTileServer] &&\n        (tilePreset[baseLayerTileServer].theme === colorScheme ||\n            tilePreset[baseLayerTileServer].theme === 'all')\n    ) {\n        return tilePreset[baseLayerTileServer];\n    }\n\n    if (baseLayerTileServer && baseLayerTileServerType) {\n        let tiles = [];\n        /**\n         * Tile Server URLs (eg: http://{s}.somedomain.com/blabla/{z}/{x}/{y}{r}.png) can specify the variable {s} which refers to a subdomain\n         * Subdomains are used to help with browser parallel requests per domain limitation. These subdomains are typically single letters 'a', 'b' and 'c'\n         * Refer to https://leafletjs.com/SlavaUkraini/reference.html#tilelayer and https://wiki.openstreetmap.org/wiki/Tile_servers\n         */\n        if (baseLayerTileServer.match(/^(https?):\\/\\/{(s|S)}\\../)) {\n            /**\n             * sXML (Leaflet) allows users to define their own tile server URLs + list of available subdomains\n             * In order to preserve this behavior during conversion to splunk.map,\n             * if the variable {s} or {S} is detected, replace it with 'a', 'b' and 'c' - default values for subdomains\n             * TODO: in the future, add an additional prop - baseLayerTileServerSubdomains: ['x', 'y', 'z'], default being ['a', 'b', 'c']\n             */\n            tiles = [\n                baseLayerTileServer.replace(/{(s|S)}/, 'a'),\n                baseLayerTileServer.replace(/{(s|S)}/, 'b'),\n                baseLayerTileServer.replace(/{(s|S)}/, 'c'),\n            ];\n        } else {\n            tiles = [baseLayerTileServer];\n        }\n        // TODO: remove hardcoded style when we allow users to pass in layer style through Viz options\n        const mapStyle = {\n            version: MAP_STYLE_VERSION_NUMBER,\n            sources: {\n                'base-tiles': {\n                    type: baseLayerTileServerType,\n                    tiles,\n                    tileSize: 256,\n                },\n            },\n            layers: [\n                {\n                    id: 'base-layer',\n                    type: 'raster',\n                    source: 'base-tiles',\n                    minzoom: 0,\n                    maxzoom: 24, // https://maplibre.org/maplibre-gl-js-docs/api/map/\n                },\n            ],\n        };\n        return mapStyle;\n    }\n\n    // if tile server is not present in the preset AND we can't construct a mapStyle, fall back on defaults\n    return colorScheme === 'light' ? defaultTileLight : defaultTileDark;\n};\n\nexport interface ZoomConstraints {\n    minZoom: number;\n    maxZoom: number;\n}\n\nexport const getZoomConstraintsFromTileConfig = (\n    tileConfig: BaseTileConfig,\n    baseLayerTileServer?: string\n): ZoomConstraints => {\n    const { sources, layers } = tileConfig;\n    let matchedBaseLayerTileServer = false;\n    // check sources for minzoom maxzoom first\n    const sourceKeys = Object.keys(sources);\n    for (let i = 0; i < sourceKeys.length; i += 1) {\n        const { minzoom, maxzoom } = sources[sourceKeys[i]];\n        if (baseLayerTileServer && sources[sourceKeys[i]].tiles.indexOf(baseLayerTileServer) !== -1) {\n            matchedBaseLayerTileServer = true;\n        }\n        if (\n            ((baseLayerTileServer && matchedBaseLayerTileServer) || !baseLayerTileServer) &&\n            isNumber(minzoom) &&\n            isNumber(maxzoom)\n        ) {\n            return {\n                minZoom: minzoom,\n                maxZoom: maxzoom,\n            };\n        }\n    }\n    // then check layers\n    for (let i = 0; i < layers.length; i += 1) {\n        const { minzoom, maxzoom } = layers[i];\n        if (\n            ((baseLayerTileServer && matchedBaseLayerTileServer) || !baseLayerTileServer) &&\n            isNumber(minzoom) &&\n            isNumber(maxzoom)\n        ) {\n            return {\n                minZoom: minzoom,\n                maxZoom: maxzoom,\n            };\n        }\n    }\n    // Maplibre default - would reset previous min/maxZoom https://maplibre.org/maplibre-gl-js-docs/api/map/\n    return {\n        minZoom: 0,\n        maxZoom: 24,\n    };\n};\n\nexport const getZoomLevelFromGeobin = (geobinStr: string): number => {\n    if (!geobinStr) {\n        return null;\n    }\n    // geostats cmds return geobin with zoom level 0-18, 0-99 in the geobinPattern covers the range\n    const geobinPattern = /bin_id_zl_([0-9]{0,2})?_y_/g;\n    const match = geobinPattern.exec(geobinStr);\n    return (match?.length && parseInt(match[1], 10)) ?? null;\n};\n\n// Bubble colors - static\nexport const getStaticColors = (colorCount: number, colorArray: string[]): string[] => {\n    if (colorCount < 0 || !colorCount) {\n        return [DEFAULT_CLUSTER_COLOR];\n    }\n    if (!colorArray || !colorArray.length) {\n        return [...Array(colorCount).keys()].map(i => DEFAULT_SERIES_COLORS[i]);\n    }\n    // loop through colorArray to pick the first $colorCount colors\n    // start from begining again if colorCount > colorArray.length\n    return [...Array(colorCount).keys()].map(i =>\n        isColor(colorArray[i % colorArray.length]) ? colorArray[i % colorArray.length] : DEFAULT_CLUSTER_COLOR\n    );\n};\n\n// Bubble size\nexport const matchBubbleSize = (dataRange: number[], data: number): any => {\n    const size = scalePow().exponent(0.2).domain(dataRange).range([MIN_BUBBLE_RADIUS, MAX_BUBBLE_RADIUS])(\n        data\n    );\n\n    if (size > MAX_BUBBLE_RADIUS) {\n        return MAX_BUBBLE_RADIUS;\n    }\n    if (size < MIN_BUBBLE_RADIUS) {\n        return MIN_BUBBLE_RADIUS;\n    }\n    return size;\n};\n\nexport const transposeArray = (array: number[][]): number[][] => {\n    if (!array || !array.length || !array[0] || !array[0].length) {\n        return [];\n    }\n    return array[0].map((_, i) => array.map(row => row[i]));\n};\n\n// sanitize values: update all null, undefined, or negative values to 0\nexport const sanitizeValues = (values: number[] | number[][]) => {\n    // null / undefined\n    if (!values) {\n        return 0;\n    }\n    // number\n    if (!Array.isArray(values)) {\n        return values > 0 ? values : 0;\n    }\n    // array\n    return values.map(arr => sanitizeValues(arr));\n};\n\n// eslint-disable-next-line consistent-return\nexport const sortByValuesField = (bubbleLayer: BubbleLayerType) => {\n    const { bubbleSizeFields, dataValuesField } = bubbleLayer;\n\n    // Find the index of dataValuesField in fields\n    const index = bubbleSizeFields.indexOf(dataValuesField);\n    if (index === -1) return bubbleLayer; // If not found, return as is\n\n    // Move dataValuesField and corresponding sizes to the first position\n    bubbleLayer.bubbleSizeFields.unshift(bubbleLayer.bubbleSizeFields.splice(index, 1)[0]);\n    bubbleLayer.bubbleSize.unshift(bubbleLayer.bubbleSize.splice(index, 1)[0] as number & number[]);\n};\n\nexport const bakeBubbleData = (layer: BubbleLayerType): BubbleLayerDataType => {\n    if (\n        !layer ||\n        !layer.bubbleSize?.length ||\n        !layer.geobin ||\n        !layer.geobin.length ||\n        !layer.latitude ||\n        !layer.latitude.length ||\n        !layer.longitude ||\n        !layer.longitude.length\n    ) {\n        return null;\n    }\n    // if bubbleSize is passed as an array of single number array (data series)\n    // e.g. [value0, value1, ...]\n    // format each value as an array to unify data operations for data series and frames\n    const sanitizedBubbleSize = sanitizeValues(layer.bubbleSize);\n    let transposedBubbleSize: number[][];\n    let transposedSanitizedBubbleSize: number[][];\n    let isPie = false;\n    // format array if bubbleSize is passed as an array of array (data frame)\n    if (Array.isArray(layer.bubbleSize[0])) {\n        // one-time array transpose,\n        // e.g. from [column0data, column0data] (multi series)\n        // to [[column0datum0, column1datum0], [column0datum1, column1data1], ...]\n        // or e.g. from [column0data] (single series)\n        // to [[column0data]]\n        // for easy access of values at each geo location,\n        // and min max pie size computation\n        transposedBubbleSize = transposeArray(layer.bubbleSize as number[][]);\n        transposedSanitizedBubbleSize = transposeArray(sanitizedBubbleSize);\n        // if multiple series in the dataframe, set isPie to true\n        if (layer.bubbleSize.length > 1) {\n            isPie = true;\n            // when dynamic coloring is enabled,\n            // set the configured dataValues field as the first field\n            // to apply dynamic colors only to the first pie slice.\n            if (layer.dataValuesField && !!layer.dataColors) {\n                sortByValuesField(layer);\n            }\n        }\n    } else {\n        transposedBubbleSize = layer.bubbleSize.map(n => [n]);\n        transposedSanitizedBubbleSize = sanitizedBubbleSize.map(n => [n]);\n    }\n    if (!transposedBubbleSize || !transposedBubbleSize.length) {\n        return null;\n    }\n    const data = layer.latitude\n        .map((lat, i) => ({\n            zoom: getZoomLevelFromGeobin(layer.geobin[i]),\n            values: transposedBubbleSize[i],\n            sanitizedValues: transposedSanitizedBubbleSize[i],\n            coordinates: [layer.longitude[i], lat],\n            metadata: layer.metadata ? layer.metadata[i] : {},\n        }))\n        .filter(d => Boolean(d.values));\n\n    // compute the min/max value to encode min/max pie or bubble size\n    let min = sum(transposedSanitizedBubbleSize[0]);\n    let max = sum(transposedSanitizedBubbleSize[1]);\n    transposedSanitizedBubbleSize.forEach(row => {\n        const bubbleSize = sum(row);\n        max = bubbleSize > max ? bubbleSize : max;\n        min = bubbleSize < min ? bubbleSize : min;\n    });\n    return {\n        data,\n        dataRange: [min, max],\n        isPie,\n        resultLimit: layer.resultLimit,\n        bubbleSizeFields: layer.bubbleSizeFields,\n    };\n};\n\nexport const isValidLatLon = (latlon: Array<number | string>): boolean => {\n    if (!latlon || !Array.isArray(latlon) || latlon.length !== 2) {\n        return false;\n    }\n    const [lat, lon] = latlon;\n    if (!isNumberUtil(lat) || !(Number(lat) >= MIN_LATITUDE && Number(lat) <= MAX_LATITUDE)) {\n        return false;\n    }\n    if (!isNumberUtil(lon) || !(Number(lon) >= MIN_LONGITUDE && Number(lon) <= MAX_LONGITUDE)) {\n        return false;\n    }\n    return true;\n};\n\n/**\n * Returns a list of all lat or lon coordinates used in a specified layer\n * @param {LayerType[]} layer\n * @param {string} field\n * @returns {number[]} list of lat coordinates or lon coordinates\n */\nconst getLatOrLonCoordinates = (layer: LayerType, field: string): number[] => {\n    const getClusterValues = (clusterLayer: ClusterLayerType): number[] =>\n        get(clusterLayer, field, []).slice(\n            0,\n            clusterLayer.type === LAYER_TYPE.Marker && clusterLayer.resultLimit\n                ? clusterLayer.resultLimit\n                : DEFAULT_RESULT_LIMIT\n        );\n\n    const getChoroplethValues = (choroplethLayer: ChoroplethLayerType): number[] => {\n        const slicedGeomList = choroplethLayer.geom.slice(0, choroplethLayer.resultLimit);\n        const flatCoordinates = slicedGeomList.flatMap(geomObject => geomObject.coordinates.flat(2));\n        return flatCoordinates.map(coord => coord[field === LONGITUDE ? 0 : 1]);\n    };\n\n    return layer.type === LAYER_TYPE.Choropleth\n        ? getChoroplethValues(layer as ChoroplethLayerType)\n        : getClusterValues(layer as ClusterLayerType);\n};\n\n/**\n * Returns the min and max LongLat pairs to determine the layer boundaries to fit all markers/bubbles\n * @param {LayerType[]} layers\n * @returns {LngLatBoundsLike}\n */\nexport const getGlobalLayerBoundaries = (layers: LayerType[]): LngLatBoundsLike => {\n    const isLayerValid = (field: string): boolean =>\n        layers.every(layer => layer[field] || (layer as ChoroplethLayerType).geom);\n    const getDefaultMax = (field: string) => (field === LONGITUDE ? MAX_LONGITUDE : MAX_LATITUDE);\n    const getDefaultMin = (field: string) => (field === LONGITUDE ? MIN_LONGITUDE : MIN_LATITUDE);\n\n    if (!layers || !Array.isArray(layers) || !layers.length) {\n        return null;\n    }\n\n    const getMin = (field: string): number => {\n        if (!isLayerValid(field)) {\n            return getDefaultMin(field);\n        }\n        return layers.reduce((prevVal, layer) => {\n            const coordinatesNumArr = getLatOrLonCoordinates(layer, field).map(x => +x);\n            return lodashMin([prevVal, ...coordinatesNumArr]);\n        }, getDefaultMax(field));\n    };\n\n    const getMax = (field: string): number => {\n        if (!isLayerValid(field)) {\n            return getDefaultMax(field);\n        }\n        return layers.reduce((prevVal, layer) => {\n            const coordinatesNumArr = getLatOrLonCoordinates(layer, field).map(Number);\n            return lodashMax([prevVal, ...coordinatesNumArr]);\n        }, getDefaultMin(field));\n    };\n\n    return [\n        [getMin(LONGITUDE), getMin(LATITUDE)],\n        [getMax(LONGITUDE), getMax(LATITUDE)],\n    ];\n};\n\nexport const getScaledOpacities = (colors: string[], cfgOpacity: number): number[] => {\n    // extract opacity information from 8 digit hex codes\n    const opacities = colors?.map(color => (color?.length === 9 ? (chroma(color).alpha() ?? 1) : 1));\n    // opacity cannot be greater than configured opacity\n    return opacities?.map(opacity => opacity * cfgOpacity);\n};\n\nexport const compareBaseStyles = (curr, next): boolean => {\n    const currBaseLayer = curr?.layers?.find(layer => layer?.id === 'base-layer');\n    const nextBaseLayer = next?.layers?.find(layer => layer?.id === 'base-layer');\n    const currBaseSource = get(curr?.sources, (currBaseLayer?.source as string) ?? '');\n    const nextBaseSource = get(next?.sources, (nextBaseLayer?.source as string) ?? '');\n\n    if (!currBaseLayer || !nextBaseLayer || !currBaseSource || !nextBaseSource) {\n        return false;\n    }\n\n    return isEqual(currBaseLayer, nextBaseLayer) && isEqual(currBaseSource, nextBaseSource);\n};\n\nexport const formatMetadata = (\n    choroplethLayer: ChoroplethLayerType,\n    i: number\n): { [key: string]: string } => {\n    if (!choroplethLayer || !choroplethLayer.areaIds || !choroplethLayer.areaValues) return {};\n    if (i >= choroplethLayer.areaIds.length) return {};\n\n    const metadata = choroplethLayer.metadata ? choroplethLayer.metadata[i] : {};\n    const name = choroplethLayer.areaIds[i];\n    const value = choroplethLayer.areaValues[i];\n    const base = { name, value: String(value) };\n\n    return Object.keys(metadata).reduce((result, curr) => {\n        const key = `row.${curr}.value`;\n        const val = isObject(metadata[curr]) ? JSON.stringify(metadata[curr]) : String(metadata[curr]);\n        return { ...result, [key]: val };\n    }, base);\n};\n", "\nimport * as defaultImport from \"maplibre-gl\";\nexport * from \"maplibre-gl\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/react-ui/Popover\";\nexport * from \"@splunk/react-ui/Popover\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/ui-utils/i18n\";\nexport * from \"@splunk/ui-utils/i18n\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "\nimport * as defaultImport from \"@splunk/themes\";\nexport * from \"@splunk/themes\";\nexport default ('default' in defaultImport ? defaultImport.default : defaultImport);\n", "import * as React from 'react';\nimport styled from 'styled-components';\nimport Popover from '@splunk/react-ui/Popover';\nimport { isRemoteIcon, isDataURI } from '@splunk/visualizations-shared/iconUtils';\nimport { _ } from '@splunk/ui-utils/i18n';\nimport FeatureFlagContext from '@splunk/visualization-context/FeatureFlagContext';\nimport RemoteIcon from '@splunk/visualizations-shared/RemoteIcon';\nimport { variables } from '@splunk/themes';\nimport { createDOMID } from '@splunk/ui-utils/id';\n\nconst StyledPopover = styled(Popover)`\n    width: 250px;\n    font-size: 12px;\n`;\n\nconst StyledTable = styled.table`\n    margin: 2px 6px 2px 6px;\n    table-layout: fixed;\n    width: calc(100% - 12px);\n`;\n\nconst StyledTitleColumn = styled.td`\n    opacity: 0.85;\n`;\n\nconst StyledValueColumn = styled.td`\n    text-align: right;\n`;\n\nconst StyledColorBlock = styled.div`\n    background-color: ${props => props.color};\n    display: inline-block;\n    margin-right: 4px;\n    border-radius: 2px;\n    width: 6px;\n    height: 11px;\n    transform: translateY(1px);\n`;\n\nconst StyledFieldLabel = styled.span`\n    display: inline-block;\n    white-space: nowrap;\n`;\n\nconst StyledIconWrapper = styled.span`\n    margin-left: 4px;\n    display: inline-block;\n    vertical-align: middle;\n`;\n\nconst StyledTooltipHeader = styled.thead`\n    th {\n        height: 16px;\n        color: ${variables.contentColorActive};\n        padding: 0;\n    }\n\n    span {\n        display: block;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n        width: 100%;\n    }\n`;\n\nexport const convertDegToDMS = (decimalDegree: number, type: 'latitude' | 'longitude'): string => {\n    const truncate = n => (n > 0 ? Math.floor(n) : Math.ceil(n));\n    const absoluteDegree = Math.abs(decimalDegree);\n    let degrees = truncate(absoluteDegree);\n    let minutes = truncate((absoluteDegree - degrees) * 60);\n    let seconds = Math.round((absoluteDegree - degrees - minutes / 60) * 3600);\n    if (seconds === 60) {\n        minutes += 1;\n        seconds = 0;\n    }\n    if (minutes === 60) {\n        degrees += 1;\n        minutes = 0;\n    }\n    let direction: string;\n    if (type === 'longitude') {\n        direction = decimalDegree < 0 ? 'W' : 'E';\n    } else if (type === 'latitude') {\n        direction = decimalDegree < 0 ? 'S' : 'N';\n    }\n    return `${degrees}\u00B0 ${minutes}' ${seconds}\" ${direction}`;\n};\n\nexport interface TooltipProps {\n    open?: boolean;\n    anchor?: HTMLElement;\n    latitude?: number;\n    longitude?: number;\n    areaId?: string;\n    areaValue?: number;\n    additionalFields?: Array<{ name: string; value: number | string; color?: string; icon?: string }>;\n    showCoordinates?: boolean;\n    tooltipHeader?: string;\n}\n// only want latitude/longitude for marker and bubble\n// omit for choropleth, and put areaid, areavalue instead\nconst Tooltip = ({\n    open,\n    anchor,\n    latitude,\n    longitude,\n    areaId,\n    areaValue,\n    additionalFields = [],\n    showCoordinates = true,\n    tooltipHeader = null,\n}: TooltipProps): JSX.Element => {\n    const featureFlagContext = React.useContext<FeatureFlagContext>(FeatureFlagContext);\n    const isTooltipIconFlagEnabled = Boolean(\n        featureFlagContext && featureFlagContext.visualizations_enableTooltipIcon\n    );\n    return (\n        <StyledPopover\n            open={open}\n            animation={false}\n            anchor={anchor}\n            data-test=\"map-marker-tooltip\"\n            defaultPlacement=\"above\"\n        >\n            <StyledTable>\n                {tooltipHeader && (\n                    <StyledTooltipHeader data-test=\"tooltip-header\">\n                        <tr>\n                            <th colSpan={2}>\n                                <span data-test=\"tooltip-header-value\">{tooltipHeader}</span>\n                            </th>\n                        </tr>\n                    </StyledTooltipHeader>\n                )}\n                <tbody>\n                    {areaId && areaValue && (\n                        <tr>\n                            <StyledTitleColumn data-test=\"area-id\">{areaId}</StyledTitleColumn>\n                            <StyledValueColumn data-test=\"area-value\">{areaValue}</StyledValueColumn>\n                        </tr>\n                    )}\n                    {Boolean(showCoordinates && latitude) && (\n                        <tr>\n                            <StyledTitleColumn>{_('Latitude')}</StyledTitleColumn>\n                            <StyledValueColumn data-test=\"latitude\">\n                                {convertDegToDMS(latitude, 'latitude')}\n                            </StyledValueColumn>\n                        </tr>\n                    )}\n                    {Boolean(showCoordinates && longitude) && (\n                        <tr>\n                            <StyledTitleColumn>{_('Longitude')}</StyledTitleColumn>\n                            <StyledValueColumn data-test=\"longitude\">\n                                {convertDegToDMS(longitude, 'longitude')}\n                            </StyledValueColumn>\n                        </tr>\n                    )}\n                    {additionalFields\n                        .filter(({ value }) => value && String(value) !== '0')\n                        .map(({ name, value, color, icon }) => (\n                            <tr key={createDOMID()}>\n                                <StyledTitleColumn data-test=\"field-title\">\n                                    {color ? (\n                                        <StyledColorBlock data-test=\"field-color\" color={color} />\n                                    ) : null}\n                                    <StyledFieldLabel>\n                                        {name}\n                                        {isTooltipIconFlagEnabled &&\n                                        icon &&\n                                        (isRemoteIcon(icon) || isDataURI(icon)) ? (\n                                            <StyledIconWrapper data-test=\"field-icon\">\n                                                <RemoteIcon iconURL={icon} width={16} height={16} />\n                                            </StyledIconWrapper>\n                                        ) : null}\n                                    </StyledFieldLabel>\n                                </StyledTitleColumn>\n                                <StyledValueColumn data-test=\"field-value\">{value}</StyledValueColumn>\n                            </tr>\n                        ))}\n                </tbody>\n            </StyledTable>\n        </StyledPopover>\n    );\n};\n\nexport default Tooltip;\n", "import type { Map } from 'maplibre-gl';\nimport { Marker } from 'maplibre-gl';\nimport * as React from 'react';\nimport type { TooltipProps } from './Tooltip';\nimport Tooltip from './Tooltip';\n\nexport interface MarkerWrapperProps extends React.HTMLAttributes<HTMLDivElement> {\n    latitude: number;\n    longitude: number;\n    areaId?: string;\n    areaValue?: number;\n    additionalFields?: TooltipProps['additionalFields'];\n    tooltipHeader?: TooltipProps['tooltipHeader'];\n    map: React.MutableRefObject<Map>;\n    isChoroplethTooltipOpen?: boolean;\n    showCoordinates?: boolean;\n}\n\nconst MarkerWrapper = ({\n    longitude,\n    latitude,\n    areaId,\n    areaValue,\n    additionalFields = [],\n    tooltipHeader = null,\n    map,\n    isChoroplethTooltipOpen,\n    children,\n    showCoordinates = true,\n    ...otherProps\n}: MarkerWrapperProps): JSX.Element => {\n    const container = React.useRef<HTMLDivElement>();\n    const marker = React.useRef<Marker>();\n    const [isTooltipOpen, setTooltipOpenStatus] = React.useState(false);\n\n    const isChoroplethTooltip = React.useCallback(\n        () => isChoroplethTooltipOpen !== undefined,\n        [isChoroplethTooltipOpen]\n    );\n\n    const openTooltip = React.useCallback(() => setTooltipOpenStatus(true), []);\n    const closeTooltip = React.useCallback(() => setTooltipOpenStatus(false), []);\n\n    const cleanupMarker = React.useCallback(() => {\n        if (marker.current) {\n            marker.current.remove();\n            marker.current = undefined;\n        }\n    }, []);\n\n    React.useEffect(() => {\n        try {\n            if (marker.current) {\n                marker.current.setLngLat([longitude, latitude]);\n            } else {\n                marker.current = new Marker({ element: container.current });\n                marker.current.setLngLat([longitude, latitude]);\n                marker.current.addTo(map.current);\n            }\n        } catch (error) {\n            // eslint-disable-next-line no-console\n            console.error(error);\n            cleanupMarker();\n        }\n    }, [latitude, longitude, map]);\n\n    React.useEffect(() => cleanupMarker, []);\n    const filteredAdditionalFields = additionalFields.filter(({ value }) => value && String(value) !== '0');\n    const showTooltip = showCoordinates || filteredAdditionalFields.length || (areaId && areaValue);\n    return (\n        <div style={{ visibility: isChoroplethTooltip() ? 'hidden' : 'visible' }}>\n            <div\n                style={{\n                    visibility: isChoroplethTooltip() ? 'hidden' : 'visible',\n                }}\n                ref={container}\n                data-test=\"map-marker\"\n                onMouseOver={openTooltip}\n                onMouseLeave={closeTooltip}\n                onFocus={openTooltip}\n                onBlur={closeTooltip}\n                {...otherProps}\n            >\n                {children}\n            </div>\n            <div>\n                {showTooltip && (\n                    <Tooltip\n                        open={isChoroplethTooltip() ? isChoroplethTooltipOpen : isTooltipOpen}\n                        anchor={container.current}\n                        latitude={isChoroplethTooltip() ? null : latitude}\n                        longitude={isChoroplethTooltip() ? null : longitude}\n                        areaId={areaId}\n                        areaValue={areaValue}\n                        additionalFields={additionalFields}\n                        showCoordinates={showCoordinates}\n                        tooltipHeader={tooltipHeader}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default MarkerWrapper;\n", "import * as React from 'react';\nimport styled from 'styled-components';\nimport type { Map } from 'maplibre-gl';\nimport { sum } from 'lodash';\nimport { isRemoteIcon, isDataURI } from '@splunk/visualizations-shared/iconUtils';\nimport { isColor } from '@splunk/visualizations-shared/colorUtils';\nimport RemoteIcon from '@splunk/visualizations-shared/RemoteIcon';\nimport FeatureFlagContext from '@splunk/visualization-context/FeatureFlagContext';\nimport { createDOMID } from '@splunk/ui-utils/id';\nimport {\n    bakeBubbleData,\n    BubbleLayerType,\n    DEFAULT_SERIES_COLORS,\n    DEFAULT_RESULT_LIMIT,\n    DEFAULT_CLUSTER_COLOR,\n    getStaticColors,\n    matchBubbleSize,\n} from './MapUtils';\nimport MarkerWrapper from './MarkerWrapper';\nimport type { TooltipProps } from './Tooltip';\n\nexport const GEO_BOUND_PREFIX = '_geo_bounds_';\nexport const GEO_LAT_AND_LONG_FIELD = ['_geo_long_field', '_geo_lat_field'];\nexport const ICON_DISPLAY_CUTOFF = 16;\nexport interface PieSegmentProps {\n    start: number;\n    end: number;\n    radius: number;\n    color: string;\n    themeColor: string;\n    segmentMetadata?: { name: string; value: number; color: string };\n    handleBubbleClick?: (e: Event, name: string, count: number) => void;\n}\n\nexport const PieSegment = React.memo(\n    ({\n        start,\n        end,\n        radius,\n        color,\n        themeColor,\n        segmentMetadata,\n        handleBubbleClick,\n    }: PieSegmentProps): JSX.Element => {\n        const { name, value } = segmentMetadata ?? {};\n        const handleSegmentClick = React.useCallback(\n            e => {\n                handleBubbleClick(e, name, value);\n            },\n            [name, value, handleBubbleClick]\n        );\n\n        if (end - start === 1) {\n            return (\n                <circle\n                    onClick={handleSegmentClick}\n                    cx={radius}\n                    cy={radius}\n                    r={radius}\n                    fill={color}\n                    fillOpacity={0.5}\n                    strokeWidth={1.5}\n                    stroke={color}\n                />\n            );\n        }\n        const a0 = 2 * Math.PI * (start - 0.25);\n        const a1 = 2 * Math.PI * (end - 0.25);\n        const x0 = Math.cos(a0);\n        const y0 = Math.sin(a0);\n        const x1 = Math.cos(a1);\n        const y1 = Math.sin(a1);\n        const arc = end - start > 0.5 ? 1 : 0;\n\n        return (\n            <path\n                onClick={handleSegmentClick}\n                d={`M ${radius} ${radius} L ${radius + radius * x0} ${\n                    radius + radius * y0\n                } A ${radius} ${radius} 0 ${arc} 1 ${radius + radius * x1} ${\n                    radius + radius * y1\n                } L ${radius} ${radius} A 0 0 0 ${arc} 0 ${radius} ${radius}`}\n                fill={color}\n                fillOpacity={0.8}\n                stroke={themeColor}\n                strokeWidth={2}\n                strokeOpacity={0.3}\n            />\n        );\n    }\n);\n\nPieSegment.displayName = 'MapBubblePieSegment';\n\nconst StyledMarkerWrapper = styled(MarkerWrapper)`\n    cursor: pointer;\n`;\n\nexport interface BubbleProps {\n    originalValues: number[];\n    valueRange: number[];\n    colors: string[];\n    themeColor: string;\n    isPie: boolean;\n    latitude: number;\n    longitude: number;\n    bubbleSize: Required<TooltipProps['additionalFields'][number] & { value: number }>[];\n    additionalFields?: TooltipProps['additionalFields'];\n    tooltipHeader?: TooltipProps['tooltipHeader'];\n    map: React.MutableRefObject<Map>;\n    handleMapClick?: any;\n    icon?: string;\n    showCoordinates?: boolean;\n}\n\nexport const Bubble = React.memo(\n    ({\n        originalValues,\n        valueRange,\n        colors,\n        themeColor,\n        isPie,\n        latitude,\n        longitude,\n        bubbleSize,\n        additionalFields = [],\n        tooltipHeader = null,\n        map,\n        handleMapClick,\n        icon,\n        showCoordinates,\n    }: BubbleProps): JSX.Element => {\n        const featureFlagContext = React.useContext<FeatureFlagContext>(FeatureFlagContext);\n        const isBubbleMapIconFlagEnabled = Boolean(\n            featureFlagContext && featureFlagContext.visualizations_enableBubbleMapIcon\n        );\n\n        const onBubbleClick = React.useCallback(\n            (e, name, value) => {\n                handleMapClick(e, name, value);\n                e.stopPropagation();\n            },\n            [handleMapClick]\n        );\n\n        // sanitize values\n        const allZeros = originalValues.every(v => v === 0);\n        const values = originalValues.map(v => (v > 0 ? v : 0));\n        const total = values.reduce((totalValue, v) => totalValue + v, 0);\n        const radius = matchBubbleSize(valueRange, total);\n\n        const bubble = React.useMemo(() => {\n            if (allZeros || !originalValues.length) return null;\n\n            const offsets: number[] = [];\n            let runningTotal = 0;\n            values.forEach(count => {\n                offsets.push(runningTotal);\n                runningTotal += count;\n            });\n\n            const width = radius * 2;\n            return (\n                <svg width={width} height={width} viewBox={`-3 -3 ${width + 6} ${width + 6}`}>\n                    {isPie && (\n                        <circle\n                            cx={radius}\n                            cy={radius}\n                            r={radius}\n                            fill=\"none\"\n                            strokeWidth={2}\n                            stroke={themeColor}\n                            strokeOpacity={0.3}\n                        />\n                    )}\n                    {values.map((v, i) => (\n                        <PieSegment\n                            key={createDOMID()}\n                            start={offsets[i] / total}\n                            end={(offsets[i] + v) / total}\n                            radius={radius}\n                            color={colors[i]}\n                            themeColor={themeColor}\n                            segmentMetadata={bubbleSize[i]}\n                            handleBubbleClick={onBubbleClick}\n                        />\n                    ))}\n                </svg>\n            );\n        }, [\n            bubbleSize,\n            colors,\n            isPie,\n            onBubbleClick,\n            originalValues,\n            themeColor,\n            allZeros,\n            radius,\n            total,\n            values,\n        ]);\n\n        if (!bubble) {\n            return null;\n        }\n\n        return (\n            <StyledMarkerWrapper\n                longitude={longitude}\n                latitude={latitude}\n                additionalFields={[...bubbleSize, ...additionalFields]}\n                tooltipHeader={tooltipHeader}\n                map={map}\n                data-test-type=\"bubble\"\n                showCoordinates={showCoordinates}\n            >\n                {bubble}\n                {isBubbleMapIconFlagEnabled &&\n                    radius >= ICON_DISPLAY_CUTOFF &&\n                    icon &&\n                    (isRemoteIcon(icon) || isDataURI(icon)) && (\n                        <div\n                            data-test=\"bubble-icon-wrapper\"\n                            style={{\n                                position: 'absolute',\n                                top: `${radius}px`,\n                                left: `${radius}px`,\n                                transform: 'translate(-50%, -50%)',\n                                pointerEvents: 'none',\n                            }}\n                        >\n                            <RemoteIcon iconURL={icon} width={radius * 0.8} height={radius * 0.8} />\n                        </div>\n                    )}\n            </StyledMarkerWrapper>\n        );\n    }\n);\nBubble.displayName = 'MapBubble';\n\nexport interface BubbleLayerProps {\n    bubbleLayer: BubbleLayerType;\n    themeColorScheme: string;\n    zoom: number;\n    map: React.MutableRefObject<Map>;\n    onMapClick?: any;\n    showCoordinates?: boolean;\n}\n\nconst BubbleLayer = (props: BubbleLayerProps): JSX.Element => {\n    const { bubbleLayer, themeColorScheme, map, zoom, onMapClick, showCoordinates } = props;\n\n    bubbleLayer.seriesColors = bubbleLayer.seriesColors || DEFAULT_SERIES_COLORS;\n    bubbleLayer.bubbleSize = bubbleLayer.bubbleSize || [];\n    bubbleLayer.icon = bubbleLayer.icon || [];\n    const bakedData = React.useMemo(() => bakeBubbleData(bubbleLayer), [bubbleLayer]);\n    const staticColors = React.useMemo(\n        () => getStaticColors(bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors),\n        [bubbleLayer.bubbleSize.length, bubbleLayer.seriesColors]\n    );\n    const { data = [], dataRange = [], resultLimit, bubbleSizeFields, isPie } = bakedData ?? {};\n    const { additionalTooltipFields = [], tooltipHeaderFieldName = null } = bubbleLayer;\n    const roundedZoom = Math.round(zoom);\n    const themeColor = themeColorScheme === 'light' ? '#ffffff' : '#1a1c20';\n    const dynamicColors = bubbleLayer.dataColors;\n\n    // filter data for the current zoom level and sort base on values\n    const dataToRender = React.useMemo(\n        () =>\n            data\n                .reduce((acc, datum, i) => {\n                    if (datum.zoom === roundedZoom) {\n                        acc.push({ data: datum, idx: i });\n                    }\n                    return acc;\n                }, [])\n                .slice(0, resultLimit || DEFAULT_RESULT_LIMIT)\n                .sort((a, b) => sum(b.data.values) - sum(a.data.values)),\n        [data, resultLimit, roundedZoom]\n    );\n\n    const handleMapClick = React.useCallback(\n        (e, name, value, i) => {\n            // retrieve metadata from the appropriate datum, indexed by i\n            const metadata = dataToRender[i]?.data?.metadata ?? {};\n            const payload = Object.keys(metadata).reduce(\n                (acc, curr) => {\n                    const key = `row.${curr}.value`;\n                    const val = String(metadata[curr]);\n                    return { ...acc, [key]: val };\n                },\n                { name, value: String(value) }\n            );\n\n            onMapClick({ e, payload });\n        },\n        [dataToRender, onMapClick]\n    );\n\n    return (\n        <>\n            {dataToRender.map((datum, i) => {\n                const colors = dynamicColors\n                    ? [\n                          dataToRender.map(obj =>\n                              isColor(dynamicColors[obj.idx]) ? dynamicColors[obj.idx] : DEFAULT_CLUSTER_COLOR\n                          )[i],\n                      ]\n                    : staticColors;\n\n                const [longitude, latitude] = datum.data.coordinates;\n                const bubbleSize = datum.data.values.map((value, index) => ({\n                    name: bubbleSizeFields[index],\n                    value,\n                    color: colors[index],\n                }));\n\n                const additionalFields = bubbleLayer.metadata\n                    ? additionalTooltipFields.map(field => ({\n                          name: field,\n                          value: datum.data.metadata[field],\n                          icon: bubbleLayer.tooltipFieldIcons?.[field],\n                      }))\n                    : [];\n\n                const tooltipHeaderField =\n                    bubbleLayer.metadata && datum.data.metadata[tooltipHeaderFieldName];\n\n                return (\n                    <Bubble\n                        // eslint-disable-next-line\n                        key={String(i)}\n                        originalValues={datum.data.values}\n                        valueRange={dataRange}\n                        colors={colors}\n                        themeColor={themeColor}\n                        isPie={isPie}\n                        longitude={longitude}\n                        latitude={latitude}\n                        bubbleSize={bubbleSize}\n                        additionalFields={additionalFields}\n                        tooltipHeader={tooltipHeaderField}\n                        map={map}\n                        handleMapClick={(e, name, value) => handleMapClick(e, name, value, i)}\n                        icon={bubbleLayer.icon[datum.idx]}\n                        showCoordinates={showCoordinates}\n                    />\n                );\n            })}\n        </>\n    );\n};\n\nexport default BubbleLayer;\n"],
   "mappings": "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",
   "names": ["defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport", "defaultImport"]
 }

package/common/utils/tableUtils.js

@@ -23,37 +23,38 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/common/utils/tableUtils.ts
 var tableUtils_exports = {};
 __export(tableUtils_exports, {
-  findFooterTotal: () => findFooterTotal,
-  hasSummarySum: () => hasSummarySum,
-  updateSumTotalValues: () => updateSumTotalValues
+  buildPercentagesByFieldFromTotals: () => buildPercentagesByFieldFromTotals,
+  buildTotalsByFieldFromFieldsMeta: () => buildTotalsByFieldFromFieldsMeta
 });
 module.exports = __toCommonJS(tableUtils_exports);
-var hasSummarySum = (fields) => {
-  return fields.some((field) => typeof field === "object" && field["summary.sum"] !== void 0);
-};
-var updateSumTotalValues = (primaryDataSource) => {
-  const { data } = primaryDataSource;
-  const { columns, fields } = data;
-  if (!data || !columns || !fields) {
-    return primaryDataSource;
-  }
-  if (hasSummarySum(fields)) {
-    fields.forEach((field, idx) => {
-      let footerTotal = "";
-      if (typeof field === "object" && field["summary.sum"] !== void 0) {
-        footerTotal = field["summary.sum"];
+var buildTotalsByFieldFromFieldsMeta = (fieldsMeta) => {
+  const totalsByField = {};
+  const fields = Array.isArray(fieldsMeta) ? fieldsMeta : [];
+  fields.forEach((f) => {
+    var _a;
+    if (f && typeof f === "object" && Object.prototype.hasOwnProperty.call(f, "summary.sum")) {
+      const name = (_a = f.name) != null ? _a : "";
+      if (name) {
+        const raw = f["summary.sum"];
+        const isEmptyString = typeof raw === "string" && raw.trim() === "";
+        if (raw !== null && raw !== void 0 && !isEmptyString) {
+          const n = Number(raw);
+          if (Number.isFinite(n)) totalsByField[name] = n;
+        }
       }
-      if (columns[idx]) {
-        columns[idx] = [...columns[idx], footerTotal];
-      }
-    });
-  }
-  return primaryDataSource;
+    }
+  });
+  return totalsByField;
 };
-var findFooterTotal = (headersMetadata) => {
-  return headersMetadata.reduce((total, field) => {
-    const value = field["summary.sum"] ? +field["summary.sum"] : 0;
-    return total + value;
-  }, 0);
+var buildPercentagesByFieldFromTotals = (totalsByField) => {
+  const entries = Object.entries(totalsByField).filter(([, v]) => Number.isFinite(v));
+  const grandTotal = entries.reduce((acc, [, v]) => acc + Number(v), 0);
+  if (grandTotal <= 0) return {};
+  const percentages = {};
+  entries.forEach(([k, v]) => {
+    const pct = (Number(v) / grandTotal * 100).toFixed(2);
+    percentages[k] = `${pct}%`;
+  });
+  return percentages;
 };
 //# sourceMappingURL=tableUtils.js.map

package/common/utils/tableUtils.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/common/utils/tableUtils.ts"],
-  "sourcesContent": ["import { FieldEntry } from '@splunk/visualizations-shared/dataSourceUtils';\nimport { DataSource } from '../interfaces';\n\n// Helper function to check if field[\"summary.sum\"] exists in any of the field object in fields array\nexport const hasSummarySum = (fields: FieldEntry[] | string[]) => {\n    return fields.some(field => typeof field === 'object' && field['summary.sum'] !== undefined);\n};\n\nexport const updateSumTotalValues = (primaryDataSource: DataSource): DataSource => {\n    const { data } = primaryDataSource;\n    const { columns, fields } = data;\n    if (!data || !columns || !fields) {\n        return primaryDataSource;\n    }\n    // Build the footer row, if any field has \"summary.sum\" defined\n    if (hasSummarySum(fields)) {\n        fields.forEach((field: FieldEntry | string, idx: number) => {\n            let footerTotal = '';\n            if (typeof field === 'object' && field['summary.sum'] !== undefined) {\n                footerTotal = field['summary.sum'];\n            }\n            // Add the footer total as empty '' to the columns to even out the column lengths\n            if (columns[idx]) {\n                columns[idx] = [...columns[idx], footerTotal];\n            }\n        });\n    }\n    return primaryDataSource;\n};\n\nexport const findFooterTotal = (headersMetadata: FieldEntry[]): number => {\n    return headersMetadata.reduce((total, field) => {\n        const value = field['summary.sum'] ? +field['summary.sum'] : 0;\n        return total + value;\n    }, 0);\n};\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAIO,IAAM,gBAAgB,CAAC,WAAoC;AAC9D,SAAO,OAAO,KAAK,WAAS,OAAO,UAAU,YAAY,MAAM,aAAa,MAAM,MAAS;AAC/F;AAEO,IAAM,uBAAuB,CAAC,sBAA8C;AAC/E,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,EAAE,SAAS,OAAO,IAAI;AAC5B,MAAI,CAAC,QAAQ,CAAC,WAAW,CAAC,QAAQ;AAC9B,WAAO;AAAA,EACX;AAEA,MAAI,cAAc,MAAM,GAAG;AACvB,WAAO,QAAQ,CAAC,OAA4B,QAAgB;AACxD,UAAI,cAAc;AAClB,UAAI,OAAO,UAAU,YAAY,MAAM,aAAa,MAAM,QAAW;AACjE,sBAAc,MAAM,aAAa;AAAA,MACrC;AAEA,UAAI,QAAQ,GAAG,GAAG;AACd,gBAAQ,GAAG,IAAI,CAAC,GAAG,QAAQ,GAAG,GAAG,WAAW;AAAA,MAChD;AAAA,IACJ,CAAC;AAAA,EACL;AACA,SAAO;AACX;AAEO,IAAM,kBAAkB,CAAC,oBAA0C;AACtE,SAAO,gBAAgB,OAAO,CAAC,OAAO,UAAU;AAC5C,UAAM,QAAQ,MAAM,aAAa,IAAI,CAAC,MAAM,aAAa,IAAI;AAC7D,WAAO,QAAQ;AAAA,EACnB,GAAG,CAAC;AACR;",
+  "sourcesContent": ["// extractUnitFromFormattedString removed; footer formatting will use columnFormat options\n\n// Build a map of totals keyed by field name from fields metadata\nexport const buildTotalsByFieldFromFieldsMeta = (\n    fieldsMeta: Array<Record<string, unknown>> | undefined | null\n): Record<string, number> => {\n    const totalsByField: Record<string, number> = {};\n    const fields = Array.isArray(fieldsMeta) ? fieldsMeta : [];\n    fields.forEach(f => {\n        if (f && typeof f === 'object' && Object.prototype.hasOwnProperty.call(f, 'summary.sum')) {\n            const name = (f as { name?: string }).name ?? '';\n            if (name) {\n                const raw = f['summary.sum'];\n                const isEmptyString = typeof raw === 'string' && raw.trim() === '';\n                if (raw !== null && raw !== undefined && !isEmptyString) {\n                    const n = Number(raw);\n                    if (Number.isFinite(n)) totalsByField[name] = n;\n                }\n            }\n        }\n    });\n    return totalsByField;\n};\n\n// Build a percentage map from a totals map. Only numeric totals participate; sum must be > 0\nexport const buildPercentagesByFieldFromTotals = (\n    totalsByField: Record<string, number>\n): Record<string, string> => {\n    const entries = Object.entries(totalsByField).filter(([, v]) => Number.isFinite(v));\n    const grandTotal = entries.reduce((acc, [, v]) => acc + Number(v), 0);\n    if (grandTotal <= 0) return {};\n    const percentages: Record<string, string> = {};\n    entries.forEach(([k, v]) => {\n        const pct = ((Number(v) / grandTotal) * 100).toFixed(2);\n        percentages[k] = `${pct}%`;\n    });\n    return percentages;\n};\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAGO,IAAM,mCAAmC,CAC5C,eACyB;AACzB,QAAM,gBAAwC,CAAC;AAC/C,QAAM,SAAS,MAAM,QAAQ,UAAU,IAAI,aAAa,CAAC;AACzD,SAAO,QAAQ,OAAK;AARxB;AASQ,QAAI,KAAK,OAAO,MAAM,YAAY,OAAO,UAAU,eAAe,KAAK,GAAG,aAAa,GAAG;AACtF,YAAM,QAAQ,OAAwB,SAAxB,YAAgC;AAC9C,UAAI,MAAM;AACN,cAAM,MAAM,EAAE,aAAa;AAC3B,cAAM,gBAAgB,OAAO,QAAQ,YAAY,IAAI,KAAK,MAAM;AAChE,YAAI,QAAQ,QAAQ,QAAQ,UAAa,CAAC,eAAe;AACrD,gBAAM,IAAI,OAAO,GAAG;AACpB,cAAI,OAAO,SAAS,CAAC,EAAG,eAAc,IAAI,IAAI;AAAA,QAClD;AAAA,MACJ;AAAA,IACJ;AAAA,EACJ,CAAC;AACD,SAAO;AACX;AAGO,IAAM,oCAAoC,CAC7C,kBACyB;AACzB,QAAM,UAAU,OAAO,QAAQ,aAAa,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC,MAAM,OAAO,SAAS,CAAC,CAAC;AAClF,QAAM,aAAa,QAAQ,OAAO,CAAC,KAAK,CAAC,EAAE,CAAC,MAAM,MAAM,OAAO,CAAC,GAAG,CAAC;AACpE,MAAI,cAAc,EAAG,QAAO,CAAC;AAC7B,QAAM,cAAsC,CAAC;AAC7C,UAAQ,QAAQ,CAAC,CAAC,GAAG,CAAC,MAAM;AACxB,UAAM,OAAQ,OAAO,CAAC,IAAI,aAAc,KAAK,QAAQ,CAAC;AACtD,gBAAY,CAAC,IAAI,GAAG,GAAG;AAAA,EAC3B,CAAC;AACD,SAAO;AACX;",
   "names": []
 }