@perses-dev/components 0.55.0-rc.1 → 0.56.0-beta.0

package/dist/TimeRangeSelector/TimeRangeSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, MenuItem, Popover, Select, IconButton, TextField, Stack } from '@mui/material';\nimport type { TimeRangeValue, AbsoluteTimeRange } from '@perses-dev/spec';\nimport { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport EarthIcon from 'mdi-material-ui/Earth';\nimport type { ReactElement } from 'react';\nimport { useMemo, useState } from 'react';\n\nimport { useTimeZone } from '../context';\nimport type { TimeOption } from '../model';\nimport type { TimeZoneOption } from '../model/timeZoneOption';\nimport { getTimeZoneOptions } from '../model/timeZoneOption';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { getGMTOffset } from '../utils/format';\nimport { DateTimeRangePicker } from './DateTimeRangePicker';\nimport { buildCustomTimeOption, formatTimeRange } from './utils';\n\ninterface TimeRangeSelectorProps {\n  /**\n   * The current value of the time range.\n   */\n  value: TimeRangeValue;\n  /**\n   * The list of time options to display in the dropdown.\n   * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.\n   */\n  timeOptions: TimeOption[];\n  /**\n   * The callback to call when the time range changes.\n   */\n  onChange: (value: TimeRangeValue) => void;\n  /**\n   * Custom line height for the select component.\n   */\n  height?: string;\n  /**\n   * Whether to show the custom time range option.\n   * Defaults to true.\n   */\n  showCustomTimeRange?: boolean;\n  /** Optional explicit timezone and change handler to enable changing tz from the selector */\n  timeZone?: string;\n  timeZoneOptions?: TimeZoneOption[];\n  onTimeZoneChange?: (timeZone: TimeZoneOption) => void;\n}\n\n/**\n * Date & time selection component to customize what data renders on dashboard.\n * This includes relative shortcuts and the ability to pick absolute start and end times.\n * @param props\n * @constructor\n */\nexport function TimeRangeSelector({\n  value,\n  timeOptions,\n  onChange,\n  height,\n  showCustomTimeRange = true,\n  timeZone: timeZoneProp,\n  timeZoneOptions,\n  onTimeZoneChange,\n}: TimeRangeSelectorProps): ReactElement {\n  const { timeZone: ctxTimeZone } = useTimeZone();\n  const timeZone = timeZoneProp ?? ctxTimeZone;\n\n  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  const lastOption = useMemo(\n    () => buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone),\n    [value, timeZone],\n  );\n\n  const [open, setOpen] = useState(false);\n  const tzOptions = timeZoneOptions ?? getTimeZoneOptions();\n  const [tzAnchorEl, setTzAnchorEl] = useState<HTMLElement | null>(null);\n  const tzOpen = Boolean(tzAnchorEl);\n  const tzLabel = tzOptions.find((o) => o.value === timeZone)?.display ?? timeZone;\n  const tzOffset = getGMTOffset(timeZone);\n  const localOffset = getGMTOffset('local');\n  const tzAutocompleteOptions = tzOptions.map((o) => ({ id: o.value, label: o.display }));\n  const tzAutocompleteValue = tzAutocompleteOptions.find((option) => option.id === timeZone);\n\n  return (\n    <>\n      <Popover\n        anchorEl={tzAnchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        open={tzOpen}\n        onClose={() => setTzAnchorEl(null)}\n        sx={(theme) => ({ padding: theme.spacing(1) })}\n      >\n        <Box\n          sx={{ p: 1, minWidth: 260 }}\n          onClick={(e) => {\n            e.stopPropagation();\n          }}\n        >\n          <SettingsAutocomplete\n            options={tzAutocompleteOptions}\n            value={tzAutocompleteValue}\n            onChange={(_e, option) => {\n              if (option) {\n                const selected = tzOptions.find((o) => o.value === option.id);\n                if (selected) onTimeZoneChange?.(selected);\n              }\n              setTzAnchorEl(null);\n            }}\n            disableClearable\n            renderInput={(params) => <TextField {...params} placeholder=\"Search timezones\" size=\"small\" />}\n          />\n        </Box>\n      </Popover>\n      <Popover\n        anchorEl={anchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({ padding: theme.spacing(2) })}\n      >\n        <DateTimeRangePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n            setOpen(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n          timeZone={timeZone}\n        />\n      </Popover>\n      <Box ref={setAnchorEl}>\n        <Select\n          open={open}\n          value={formatTimeRange(value, timeZone)}\n          onClick={() => setOpen(!open)}\n          IconComponent={Calendar}\n          renderValue={() => (\n            <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n              <span>\n                {timeOptions.find((opt) => formatTimeRange(opt.value, timeZone) === formatTimeRange(value, timeZone))\n                  ?.display ?? formatTimeRange(value, timeZone)}\n              </span>\n              {tzOffset !== localOffset && (\n                <Box sx={{ typography: 'caption', color: 'text.secondary' }}>· {tzOffset}</Box>\n              )}\n            </Stack>\n          )}\n          inputProps={{ 'aria-label': `Select time range. Currently set to ${value}` }}\n          sx={{\n            '.MuiSelect-icon': { marginTop: '1px', transform: 'none' },\n            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': { paddingRight: '36px' },\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          <MenuItem\n            disableRipple\n            onClick={(e: React.MouseEvent) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n            sx={{ cursor: 'default', '&:hover': { backgroundColor: 'transparent' }, py: 0.5, px: 1 }}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }}>\n              <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>\n                <Box sx={{ typography: 'subtitle1' }}>Time Range</Box>\n                <Box sx={{ color: 'text.secondary', typography: 'caption', mt: 0.25 }}>Timezone: {tzLabel}</Box>\n              </Box>\n              <Box sx={{ display: 'flex', alignItems: 'center', pr: 1, ml: 1.5 }}>\n                <IconButton\n                  size=\"small\"\n                  aria-label=\"Select timezone\"\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setTzAnchorEl(e.currentTarget);\n                  }}\n                >\n                  <EarthIcon fontSize=\"small\" />\n                </IconButton>\n              </Box>\n            </Box>\n          </MenuItem>\n          {timeOptions.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              value={formatTimeRange(item.value, timeZone)}\n              onClick={() => {\n                onChange(item.value);\n              }}\n            >\n              {item.display}\n            </MenuItem>\n          ))}\n          {showCustomTimeRange && (\n            <MenuItem\n              value={formatTimeRange(lastOption.value, timeZone)}\n              onClick={() => setShowCustomDateSelector(true)}\n            >\n              {lastOption.display}\n            </MenuItem>\n          )}\n        </Select>\n      </Box>\n    </>\n  );\n}\n"],"names":["Box","MenuItem","Popover","Select","IconButton","TextField","Stack","isRelativeTimeRange","toAbsoluteTimeRange","Calendar","EarthIcon","useMemo","useState","useTimeZone","getTimeZoneOptions","SettingsAutocomplete","getGMTOffset","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","timeZoneProp","timeZoneOptions","onTimeZoneChange","ctxTimeZone","anchorEl","setAnchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","tzOptions","tzAnchorEl","setTzAnchorEl","tzOpen","Boolean","tzLabel","find","o","display","tzOffset","localOffset","tzAutocompleteOptions","map","id","label","tzAutocompleteValue","option","anchorOrigin","vertical","horizontal","transformOrigin","onClose","sx","theme","padding","spacing","p","minWidth","onClick","e","stopPropagation","options","_e","selected","disableClearable","renderInput","params","placeholder","size","initialTimeRange","onCancel","ref","IconComponent","renderValue","direction","alignItems","span","opt","typography","color","inputProps","marginTop","transform","paddingRight","lineHeight","paddingY","disableRipple","preventDefault","cursor","backgroundColor","py","px","width","justifyContent","flexDirection","mt","pr","ml","aria-label","currentTarget","fontSize","item","idx"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeRangeSelector/TimeRangeSelector.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, MenuItem, Popover, Select, IconButton, TextField, Stack } from '@mui/material';\nimport type { TimeRangeValue, AbsoluteTimeRange } from '@perses-dev/spec';\nimport { isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';\nimport Calendar from 'mdi-material-ui/Calendar';\nimport EarthIcon from 'mdi-material-ui/Earth';\nimport type { ReactElement } from 'react';\nimport { useMemo, useState } from 'react';\n\nimport { useTimeZone } from '../context';\nimport type { TimeOption } from '../model';\nimport type { TimeZoneOption } from '../model/timeZoneOption';\nimport { getTimeZoneOptions } from '../model/timeZoneOption';\nimport { SettingsAutocomplete } from '../SettingsAutocomplete';\nimport { getGMTOffset } from '../utils/format';\nimport { DateTimeRangePicker } from './DateTimeRangePicker';\nimport { buildCustomTimeOption, formatTimeRange } from './utils';\n\ninterface TimeRangeSelectorProps {\n  /**\n   * The current value of the time range.\n   */\n  value: TimeRangeValue;\n  /**\n   * The list of time options to display in the dropdown.\n   * The component will automatically add the last two options as a zoom out x2 and a custom absolute time range.\n   */\n  timeOptions: TimeOption[];\n  /**\n   * The callback to call when the time range changes.\n   */\n  onChange: (value: TimeRangeValue) => void;\n  /**\n   * Custom line height for the select component.\n   */\n  height?: string;\n  /**\n   * Whether to show the custom time range option.\n   * Defaults to true.\n   */\n  showCustomTimeRange?: boolean;\n  /** Optional explicit timezone and change handler to enable changing tz from the selector */\n  timeZone?: string;\n  timeZoneOptions?: TimeZoneOption[];\n  onTimeZoneChange?: (timeZone: TimeZoneOption) => void;\n}\n\n/**\n * Date & time selection component to customize what data renders on dashboard.\n * This includes relative shortcuts and the ability to pick absolute start and end times.\n * @param props\n * @constructor\n */\nexport function TimeRangeSelector({\n  value,\n  timeOptions,\n  onChange,\n  height,\n  showCustomTimeRange = true,\n  timeZone: timeZoneProp,\n  timeZoneOptions,\n  onTimeZoneChange,\n}: TimeRangeSelectorProps): ReactElement {\n  const { timeZone: ctxTimeZone } = useTimeZone();\n  const timeZone = timeZoneProp ?? ctxTimeZone;\n\n  const [anchorEl, setAnchorEl] = useState<HTMLDivElement | null>(null);\n  const [showCustomDateSelector, setShowCustomDateSelector] = useState(false);\n\n  const convertedTimeRange = useMemo(() => {\n    return isRelativeTimeRange(value) ? toAbsoluteTimeRange(value) : value;\n  }, [value]);\n\n  const lastOption = useMemo(\n    () => buildCustomTimeOption(isRelativeTimeRange(value) ? undefined : value, timeZone),\n    [value, timeZone],\n  );\n\n  const [open, setOpen] = useState(false);\n  const tzOptions = timeZoneOptions ?? getTimeZoneOptions();\n  const [tzAnchorEl, setTzAnchorEl] = useState<HTMLElement | null>(null);\n  const tzOpen = Boolean(tzAnchorEl);\n  const tzLabel = tzOptions.find((o) => o.value === timeZone)?.display ?? timeZone;\n  const tzOffset = getGMTOffset(timeZone);\n  const localOffset = getGMTOffset('local');\n  const tzAutocompleteOptions = tzOptions.map((o) => ({ id: o.value, label: o.display }));\n  const tzAutocompleteValue = tzAutocompleteOptions.find((option) => option.id === timeZone);\n  const displayValue =\n    timeOptions.find((opt) => formatTimeRange(opt.value, timeZone) === formatTimeRange(value, timeZone))?.display ??\n    formatTimeRange(value, timeZone);\n\n  return (\n    <>\n      <Popover\n        anchorEl={tzAnchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}\n        transformOrigin={{ vertical: 'top', horizontal: 'right' }}\n        open={tzOpen}\n        onClose={() => setTzAnchorEl(null)}\n        sx={(theme) => ({ padding: theme.spacing(1) })}\n      >\n        <Box\n          sx={{ p: 1, minWidth: 260 }}\n          onClick={(e) => {\n            e.stopPropagation();\n          }}\n        >\n          <SettingsAutocomplete\n            options={tzAutocompleteOptions}\n            value={tzAutocompleteValue}\n            onChange={(_e, option) => {\n              if (option) {\n                const selected = tzOptions.find((o) => o.value === option.id);\n                if (selected) onTimeZoneChange?.(selected);\n              }\n              setTzAnchorEl(null);\n            }}\n            disableClearable\n            renderInput={(params) => <TextField {...params} placeholder=\"Search timezones\" size=\"small\" />}\n          />\n        </Box>\n      </Popover>\n      <Popover\n        anchorEl={anchorEl}\n        anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }}\n        open={showCustomDateSelector}\n        onClose={() => setShowCustomDateSelector(false)}\n        sx={(theme) => ({ padding: theme.spacing(2) })}\n      >\n        <DateTimeRangePicker\n          initialTimeRange={convertedTimeRange}\n          onChange={(value: AbsoluteTimeRange) => {\n            onChange(value);\n            setShowCustomDateSelector(false);\n            setOpen(false);\n          }}\n          onCancel={() => setShowCustomDateSelector(false)}\n          timeZone={timeZone}\n        />\n      </Popover>\n      <Box ref={setAnchorEl}>\n        <Select\n          open={open}\n          value={formatTimeRange(value, timeZone)}\n          onClick={() => setOpen(!open)}\n          IconComponent={Calendar}\n          renderValue={() => (\n            <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n              <span>{displayValue}</span>\n              {tzOffset !== localOffset && (\n                <Box sx={{ typography: 'caption', color: 'text.secondary' }}>· {tzOffset}</Box>\n              )}\n            </Stack>\n          )}\n          inputProps={{ 'aria-label': `Select time range. Currently set to ${displayValue}` }}\n          sx={{\n            '.MuiSelect-icon': { marginTop: '1px', transform: 'none' },\n            '.MuiSelect-select.MuiSelect-outlined.MuiInputBase-input': { paddingRight: '36px' },\n            '.MuiSelect-select': height ? { lineHeight: height, paddingY: 0 } : {},\n          }}\n        >\n          <MenuItem\n            disableRipple\n            onClick={(e: React.MouseEvent) => {\n              e.preventDefault();\n              e.stopPropagation();\n            }}\n            sx={{ cursor: 'default', '&:hover': { backgroundColor: 'transparent' }, py: 0.5, px: 1 }}\n          >\n            <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', justifyContent: 'space-between' }}>\n              <Box sx={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start' }}>\n                <Box sx={{ typography: 'subtitle1' }}>Time Range</Box>\n                <Box sx={{ color: 'text.secondary', typography: 'caption', mt: 0.25 }}>Timezone: {tzLabel}</Box>\n              </Box>\n              <Box sx={{ display: 'flex', alignItems: 'center', pr: 1, ml: 1.5 }}>\n                <IconButton\n                  size=\"small\"\n                  aria-label=\"Select timezone\"\n                  onClick={(e) => {\n                    e.preventDefault();\n                    e.stopPropagation();\n                    setTzAnchorEl(e.currentTarget);\n                  }}\n                >\n                  <EarthIcon fontSize=\"small\" />\n                </IconButton>\n              </Box>\n            </Box>\n          </MenuItem>\n          {timeOptions.map((item, idx) => (\n            <MenuItem\n              key={idx}\n              value={formatTimeRange(item.value, timeZone)}\n              onClick={() => {\n                onChange(item.value);\n              }}\n            >\n              {item.display}\n            </MenuItem>\n          ))}\n          {showCustomTimeRange && (\n            <MenuItem\n              value={formatTimeRange(lastOption.value, timeZone)}\n              onClick={() => setShowCustomDateSelector(true)}\n            >\n              {lastOption.display}\n            </MenuItem>\n          )}\n        </Select>\n      </Box>\n    </>\n  );\n}\n"],"names":["Box","MenuItem","Popover","Select","IconButton","TextField","Stack","isRelativeTimeRange","toAbsoluteTimeRange","Calendar","EarthIcon","useState","useTimeZone","getTimeZoneOptions","SettingsAutocomplete","getGMTOffset","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,QAAQ,EAAEC,OAAO,EAAEC,MAAM,EAAEC,UAAU,EAAEC,SAAS,EAAEC,KAAK,QAAQ,gBAAgB;AAE7F,SAASC,mBAAmB,EAAEC,mBAAmB,QAAQ,mBAAmB;AAC5E,OAAOC,cAAc,2BAA2B;AAChD,OAAOC,eAAe,wBAAwB;AAE9C,SAAkBC,QAAQ,QAAQ,QAAQ;AAE1C,SAASC,WAAW,QAAQ,sBAAa;AAGzC,SAASC,kBAAkB,QAAQ,6BAA0B;AAC7D,SAASC,oBAAoB,QAAQ,mCAA0B;AAC/D,SAASC,YAAY,QAAQ,qBAAkB;AAC/C,SAASC,mBAAmB,QAAQ,2BAAwB;AAC5D,SAASC,qBAAqB,EAAEC,eAAe,QAAQ,aAAU;AA+BjE;;;;;CAKC,GACD,OAAO"}

package/dist/TimeSeriesTooltip/SeriesInfo.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -16,75 +17,198 @@ import { SeriesLabelsStack } from "./SeriesLabelsStack.js";
 import { SeriesMarker } from "./SeriesMarker.js";
 import { TOOLTIP_LABELS_MAX_WIDTH, EMPHASIZED_SERIES_DESCRIPTION, NEARBY_SERIES_DESCRIPTION } from "./tooltip-model.js";
 export function SeriesInfo(props) {
-    const { seriesName, formattedY, markerColor, totalSeries, emphasizeText = false, wrapLabels = true } = props;
-    // metric __name__ comes before opening curly brace, ignore if not populated
-    // ex with metric name: node_load15{env="demo",job="node"}
-    // ex without metric name: {env="demo",job="node"}
-    const splitName = seriesName.split('{');
+    const $ = _c(35);
+    const { seriesName, formattedY, markerColor, totalSeries, emphasizeText: t0, wrapLabels: t1 } = props;
+    const emphasizeText = t0 === undefined ? false : t0;
+    const wrapLabels = t1 === undefined ? true : t1;
+    let t2;
+    if ($[0] !== seriesName) {
+        t2 = seriesName.split("{");
+        $[0] = seriesName;
+        $[1] = t2;
+    } else {
+        t2 = $[1];
+    }
+    const splitName = t2;
     const seriesLabels = splitName[1] ?? seriesName;
-    // remove curly braces that wrap labels
-    const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');
-    // determine whether to show labels on separate lines
-    const splitLabels = formattedSeriesLabels.split(',');
+    let t3;
+    if ($[2] !== seriesLabels) {
+        const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, "");
+        t3 = formattedSeriesLabels.split(",");
+        $[2] = seriesLabels;
+        $[3] = t3;
+    } else {
+        t3 = $[3];
+    }
+    const splitLabels = t3;
     if (totalSeries === 1 && splitLabels.length > 1) {
-        const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';
-        return /*#__PURE__*/ _jsx(SeriesLabelsStack, {
-            formattedY: formattedY,
-            metricName: metricName,
-            metricLabels: splitLabels,
-            markerColor: markerColor
-        });
+        const metricName = splitName[0] ? `${splitName[0]}:` : "value:";
+        let t4;
+        if ($[4] !== formattedY || $[5] !== markerColor || $[6] !== metricName || $[7] !== splitLabels) {
+            t4 = /*#__PURE__*/ _jsx(SeriesLabelsStack, {
+                formattedY: formattedY,
+                metricName: metricName,
+                metricLabels: splitLabels,
+                markerColor: markerColor
+            });
+            $[4] = formattedY;
+            $[5] = markerColor;
+            $[6] = metricName;
+            $[7] = splitLabels;
+            $[8] = t4;
+        } else {
+            t4 = $[8];
+        }
+        return t4;
     }
-    // add space after commas so wrapLabels works
-    const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');
-    return /*#__PURE__*/ _jsxs(Box, {
-        sx: {
-            display: 'table-row',
+    let t4;
+    if ($[9] !== seriesName) {
+        let t5;
+        if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+            t5 = /[,]/g;
+            $[11] = t5;
+        } else {
+            t5 = $[11];
+        }
+        t4 = seriesName.replace(t5, ", ");
+        $[9] = seriesName;
+        $[10] = t4;
+    } else {
+        t4 = $[10];
+    }
+    const formattedSeriesInfo = t4;
+    let t5;
+    if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = {
+            display: "table-row",
             paddingTop: 0.5
-        },
-        children: [
-            /*#__PURE__*/ _jsxs(Box, {
-                sx: {
-                    display: 'table-cell',
-                    maxWidth: '520px'
-                },
-                children: [
-                    /*#__PURE__*/ _jsx(SeriesMarker, {
-                        markerColor: markerColor,
-                        sx: {
-                            marginTop: 0.5
-                        }
-                    }),
-                    /*#__PURE__*/ _jsx(Box, {
-                        component: "span",
-                        sx: (theme)=>({
-                                display: 'inline-block',
-                                width: 'calc(100% - 20px)',
-                                minWidth: 150,
-                                maxWidth: TOOLTIP_LABELS_MAX_WIDTH,
-                                overflow: 'hidden',
-                                color: theme.palette.common.white,
-                                fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
-                                textOverflow: 'ellipsis',
-                                whiteSpace: wrapLabels ? 'normal' : 'nowrap'
-                            }),
-                        "aria-label": emphasizeText ? EMPHASIZED_SERIES_DESCRIPTION : NEARBY_SERIES_DESCRIPTION,
-                        children: formattedSeriesInfo
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx(Box, {
-                sx: (theme)=>({
-                        display: 'table-cell',
-                        paddingLeft: 1.5,
-                        textAlign: 'right',
-                        verticalAlign: 'top',
-                        fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular
-                    }),
-                children: formattedY
-            })
-        ]
-    });
+        };
+        $[12] = t5;
+    } else {
+        t5 = $[12];
+    }
+    let t6;
+    if ($[13] === Symbol.for("react.memo_cache_sentinel")) {
+        t6 = {
+            display: "table-cell",
+            maxWidth: "520px"
+        };
+        $[13] = t6;
+    } else {
+        t6 = $[13];
+    }
+    let t7;
+    if ($[14] === Symbol.for("react.memo_cache_sentinel")) {
+        t7 = {
+            marginTop: 0.5
+        };
+        $[14] = t7;
+    } else {
+        t7 = $[14];
+    }
+    let t8;
+    if ($[15] !== markerColor) {
+        t8 = /*#__PURE__*/ _jsx(SeriesMarker, {
+            markerColor: markerColor,
+            sx: t7
+        });
+        $[15] = markerColor;
+        $[16] = t8;
+    } else {
+        t8 = $[16];
+    }
+    let t9;
+    if ($[17] !== emphasizeText || $[18] !== wrapLabels) {
+        t9 = (theme)=>({
+                display: "inline-block",
+                width: "calc(100% - 20px)",
+                minWidth: 150,
+                maxWidth: TOOLTIP_LABELS_MAX_WIDTH,
+                overflow: "hidden",
+                color: theme.palette.common.white,
+                fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
+                textOverflow: "ellipsis",
+                whiteSpace: wrapLabels ? "normal" : "nowrap"
+            });
+        $[17] = emphasizeText;
+        $[18] = wrapLabels;
+        $[19] = t9;
+    } else {
+        t9 = $[19];
+    }
+    const t10 = emphasizeText ? EMPHASIZED_SERIES_DESCRIPTION : NEARBY_SERIES_DESCRIPTION;
+    let t11;
+    if ($[20] !== formattedSeriesInfo || $[21] !== t10 || $[22] !== t9) {
+        t11 = /*#__PURE__*/ _jsx(Box, {
+            component: "span",
+            sx: t9,
+            "aria-label": t10,
+            children: formattedSeriesInfo
+        });
+        $[20] = formattedSeriesInfo;
+        $[21] = t10;
+        $[22] = t9;
+        $[23] = t11;
+    } else {
+        t11 = $[23];
+    }
+    let t12;
+    if ($[24] !== t11 || $[25] !== t8) {
+        t12 = /*#__PURE__*/ _jsxs(Box, {
+            sx: t6,
+            children: [
+                t8,
+                t11
+            ]
+        });
+        $[24] = t11;
+        $[25] = t8;
+        $[26] = t12;
+    } else {
+        t12 = $[26];
+    }
+    let t13;
+    if ($[27] !== emphasizeText) {
+        t13 = (theme_0)=>({
+                display: "table-cell",
+                paddingLeft: 1.5,
+                textAlign: "right",
+                verticalAlign: "top",
+                fontWeight: emphasizeText ? theme_0.typography.fontWeightBold : theme_0.typography.fontWeightRegular
+            });
+        $[27] = emphasizeText;
+        $[28] = t13;
+    } else {
+        t13 = $[28];
+    }
+    let t14;
+    if ($[29] !== formattedY || $[30] !== t13) {
+        t14 = /*#__PURE__*/ _jsx(Box, {
+            sx: t13,
+            children: formattedY
+        });
+        $[29] = formattedY;
+        $[30] = t13;
+        $[31] = t14;
+    } else {
+        t14 = $[31];
+    }
+    let t15;
+    if ($[32] !== t12 || $[33] !== t14) {
+        t15 = /*#__PURE__*/ _jsxs(Box, {
+            sx: t5,
+            children: [
+                t12,
+                t14
+            ]
+        });
+        $[32] = t12;
+        $[33] = t14;
+        $[34] = t15;
+    } else {
+        t15 = $[34];
+    }
+    return t15;
 }
 
 //# sourceMappingURL=SeriesInfo.js.map

package/dist/TimeSeriesTooltip/SeriesInfo.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\nimport { SeriesMarker } from './SeriesMarker';\nimport { TOOLTIP_LABELS_MAX_WIDTH, EMPHASIZED_SERIES_DESCRIPTION, NEARBY_SERIES_DESCRIPTION } from './tooltip-model';\n\nexport interface SeriesInfoProps {\n  seriesName: string;\n  y: number;\n  formattedY: string;\n  markerColor: string;\n  totalSeries: number;\n  emphasizeText?: boolean;\n  wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps): ReactElement {\n  const { seriesName, formattedY, markerColor, totalSeries, emphasizeText = false, wrapLabels = true } = props;\n\n  // metric __name__ comes before opening curly brace, ignore if not populated\n  // ex with metric name: node_load15{env=\"demo\",job=\"node\"}\n  // ex without metric name: {env=\"demo\",job=\"node\"}\n  const splitName = seriesName.split('{');\n  const seriesLabels = splitName[1] ?? seriesName;\n\n  // remove curly braces that wrap labels\n  const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');\n\n  // determine whether to show labels on separate lines\n  const splitLabels = formattedSeriesLabels.split(',');\n  if (totalSeries === 1 && splitLabels.length > 1) {\n    const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';\n    return (\n      <SeriesLabelsStack\n        formattedY={formattedY}\n        metricName={metricName}\n        metricLabels={splitLabels}\n        markerColor={markerColor}\n      />\n    );\n  }\n\n  // add space after commas so wrapLabels works\n  const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');\n\n  return (\n    <Box\n      sx={{\n        display: 'table-row',\n        paddingTop: 0.5,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'table-cell',\n          maxWidth: '520px',\n        }}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.5 }} />\n        <Box\n          component=\"span\"\n          sx={(theme) => ({\n            display: 'inline-block',\n            width: 'calc(100% - 20px)',\n            minWidth: 150,\n            maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n            overflow: 'hidden',\n            color: theme.palette.common.white,\n            fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,\n            textOverflow: 'ellipsis',\n            whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n          })}\n          aria-label={emphasizeText ? EMPHASIZED_SERIES_DESCRIPTION : NEARBY_SERIES_DESCRIPTION}\n        >\n          {formattedSeriesInfo}\n        </Box>\n      </Box>\n      <Box\n        sx={(theme) => ({\n          display: 'table-cell',\n          paddingLeft: 1.5,\n          textAlign: 'right',\n          verticalAlign: 'top',\n          fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,\n        })}\n      >\n        {formattedY}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","SeriesLabelsStack","SeriesMarker","TOOLTIP_LABELS_MAX_WIDTH","EMPHASIZED_SERIES_DESCRIPTION","NEARBY_SERIES_DESCRIPTION","SeriesInfo","props","seriesName","formattedY","markerColor","totalSeries","emphasizeText","wrapLabels","splitName","split","seriesLabels","formattedSeriesLabels","replace","splitLabels","length","metricName","metricLabels","formattedSeriesInfo","sx","display","paddingTop","maxWidth","marginTop","component","theme","width","minWidth","overflow","color","palette","common","white","fontWeight","typography","fontWeightBold","fontWeightRegular","textOverflow","whiteSpace","aria-label","paddingLeft","textAlign","verticalAlign"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,SAASC,YAAY,QAAQ,oBAAiB;AAC9C,SAASC,wBAAwB,EAAEC,6BAA6B,EAAEC,yBAAyB,QAAQ,qBAAkB;AAYrH,OAAO,SAASC,WAAWC,KAAsB;IAC/C,MAAM,EAAEC,UAAU,EAAEC,UAAU,EAAEC,WAAW,EAAEC,WAAW,EAAEC,gBAAgB,KAAK,EAAEC,aAAa,IAAI,EAAE,GAAGN;IAEvG,4EAA4E;IAC5E,0DAA0D;IAC1D,kDAAkD;IAClD,MAAMO,YAAYN,WAAWO,KAAK,CAAC;IACnC,MAAMC,eAAeF,SAAS,CAAC,EAAE,IAAIN;IAErC,uCAAuC;IACvC,MAAMS,wBAAwBD,aAAaE,OAAO,CAAC,SAAS;IAE5D,qDAAqD;IACrD,MAAMC,cAAcF,sBAAsBF,KAAK,CAAC;IAChD,IAAIJ,gBAAgB,KAAKQ,YAAYC,MAAM,GAAG,GAAG;QAC/C,MAAMC,aAAaP,SAAS,CAAC,EAAE,GAAG,GAAGA,SAAS,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;QACvD,qBACE,KAACb;YACCQ,YAAYA;YACZY,YAAYA;YACZC,cAAcH;YACdT,aAAaA;;IAGnB;IAEA,6CAA6C;IAC7C,MAAMa,sBAAsBf,WAAWU,OAAO,CAAC,QAAQ;IAEvD,qBACE,MAAClB;QACCwB,IAAI;YACFC,SAAS;YACTC,YAAY;QACd;;0BAEA,MAAC1B;gBACCwB,IAAI;oBACFC,SAAS;oBACTE,UAAU;gBACZ;;kCAEA,KAACzB;wBAAaQ,aAAaA;wBAAac,IAAI;4BAAEI,WAAW;wBAAI;;kCAC7D,KAAC5B;wBACC6B,WAAU;wBACVL,IAAI,CAACM,QAAW,CAAA;gCACdL,SAAS;gCACTM,OAAO;gCACPC,UAAU;gCACVL,UAAUxB;gCACV8B,UAAU;gCACVC,OAAOJ,MAAMK,OAAO,CAACC,MAAM,CAACC,KAAK;gCACjCC,YAAY1B,gBAAgBkB,MAAMS,UAAU,CAACC,cAAc,GAAGV,MAAMS,UAAU,CAACE,iBAAiB;gCAChGC,cAAc;gCACdC,YAAY9B,aAAa,WAAW;4BACtC,CAAA;wBACA+B,cAAYhC,gBAAgBR,gCAAgCC;kCAE3DkB;;;;0BAGL,KAACvB;gBACCwB,IAAI,CAACM,QAAW,CAAA;wBACdL,SAAS;wBACToB,aAAa;wBACbC,WAAW;wBACXC,eAAe;wBACfT,YAAY1B,gBAAgBkB,MAAMS,UAAU,CAACC,cAAc,GAAGV,MAAMS,UAAU,CAACE,iBAAiB;oBAClG,CAAA;0BAEChC;;;;AAIT"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\nimport { SeriesMarker } from './SeriesMarker';\nimport { TOOLTIP_LABELS_MAX_WIDTH, EMPHASIZED_SERIES_DESCRIPTION, NEARBY_SERIES_DESCRIPTION } from './tooltip-model';\n\nexport interface SeriesInfoProps {\n  seriesName: string;\n  y: number;\n  formattedY: string;\n  markerColor: string;\n  totalSeries: number;\n  emphasizeText?: boolean;\n  wrapLabels?: boolean;\n}\n\nexport function SeriesInfo(props: SeriesInfoProps): ReactElement {\n  const { seriesName, formattedY, markerColor, totalSeries, emphasizeText = false, wrapLabels = true } = props;\n\n  // metric __name__ comes before opening curly brace, ignore if not populated\n  // ex with metric name: node_load15{env=\"demo\",job=\"node\"}\n  // ex without metric name: {env=\"demo\",job=\"node\"}\n  const splitName = seriesName.split('{');\n  const seriesLabels = splitName[1] ?? seriesName;\n\n  // remove curly braces that wrap labels\n  const formattedSeriesLabels = seriesLabels.replace(/[{}]/g, '');\n\n  // determine whether to show labels on separate lines\n  const splitLabels = formattedSeriesLabels.split(',');\n  if (totalSeries === 1 && splitLabels.length > 1) {\n    const metricName = splitName[0] ? `${splitName[0]}:` : 'value:';\n    return (\n      <SeriesLabelsStack\n        formattedY={formattedY}\n        metricName={metricName}\n        metricLabels={splitLabels}\n        markerColor={markerColor}\n      />\n    );\n  }\n\n  // add space after commas so wrapLabels works\n  const formattedSeriesInfo = seriesName.replace(/[,]/g, ', ');\n\n  return (\n    <Box\n      sx={{\n        display: 'table-row',\n        paddingTop: 0.5,\n      }}\n    >\n      <Box\n        sx={{\n          display: 'table-cell',\n          maxWidth: '520px',\n        }}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.5 }} />\n        <Box\n          component=\"span\"\n          sx={(theme) => ({\n            display: 'inline-block',\n            width: 'calc(100% - 20px)',\n            minWidth: 150,\n            maxWidth: TOOLTIP_LABELS_MAX_WIDTH,\n            overflow: 'hidden',\n            color: theme.palette.common.white,\n            fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,\n            textOverflow: 'ellipsis',\n            whiteSpace: wrapLabels ? 'normal' : 'nowrap',\n          })}\n          aria-label={emphasizeText ? EMPHASIZED_SERIES_DESCRIPTION : NEARBY_SERIES_DESCRIPTION}\n        >\n          {formattedSeriesInfo}\n        </Box>\n      </Box>\n      <Box\n        sx={(theme) => ({\n          display: 'table-cell',\n          paddingLeft: 1.5,\n          textAlign: 'right',\n          verticalAlign: 'top',\n          fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,\n        })}\n      >\n        {formattedY}\n      </Box>\n    </Box>\n  );\n}\n"],"names":["Box","SeriesLabelsStack","SeriesMarker","TOOLTIP_LABELS_MAX_WIDTH","EMPHASIZED_SERIES_DESCRIPTION","NEARBY_SERIES_DESCRIPTION"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,SAASC,iBAAiB,QAAQ,yBAAsB;AACxD,SAASC,YAAY,QAAQ,oBAAiB;AAC9C,SAASC,wBAAwB,EAAEC,6BAA6B,EAAEC,yBAAyB,QAAQ,qBAAkB;AAYrH,OAAO"}

package/dist/TimeSeriesTooltip/SeriesLabelsStack.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { c as _c } from "react-compiler-runtime";
 // Copyright The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
@@ -14,86 +15,175 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box, Divider, Stack, Typography } from "@mui/material";
 import { SeriesMarker } from "./SeriesMarker.js";
 export function SeriesLabelsStack(props) {
+    const $ = _c(19);
     const { formattedY, markerColor, metricName, metricLabels } = props;
-    return /*#__PURE__*/ _jsxs(Stack, {
-        spacing: 0.5,
-        children: [
-            /*#__PURE__*/ _jsxs(Box, {
-                sx: (theme)=>({
-                        display: 'flex',
-                        height: '16px',
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        justifyContent: 'left',
-                        color: theme.palette.common.white,
-                        fontSize: '11px'
-                    }),
-                children: [
-                    /*#__PURE__*/ _jsx(SeriesMarker, {
-                        markerColor: markerColor,
-                        sx: {
-                            marginTop: 0.25
-                        }
-                    }),
-                    /*#__PURE__*/ _jsxs(Box, {
-                        component: "span",
-                        children: [
-                            metricName,
-                            /*#__PURE__*/ _jsx(Box, {
-                                component: "span",
-                                sx: (theme)=>({
-                                        color: theme.palette.common.white,
-                                        fontWeight: 700,
-                                        paddingLeft: '2px'
-                                    }),
-                                children: formattedY
-                            })
-                        ]
-                    })
-                ]
-            }),
-            /*#__PURE__*/ _jsx(Divider, {
-                sx: (theme)=>({
-                        borderColor: theme.palette.grey['500']
-                    })
-            }),
-            /*#__PURE__*/ _jsx(Box, {
-                sx: (theme)=>({
-                        color: theme.palette.common.white
-                    }),
-                children: metricLabels.map((label)=>{
-                    // show labels on separate lines when many labels and only one focused series
-                    if (label) {
-                        const [name, value] = label.split('=');
-                        const formattedName = value !== undefined ? `${name}: ` : name;
-                        const formattedValue = value !== undefined ? value.replace(/(^"|"$)/g, '') : value;
-                        return /*#__PURE__*/ _jsxs(Box, {
-                            sx: {
-                                display: 'flex',
-                                gap: '4px'
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    sx: {
-                                        fontSize: '11px'
-                                    },
-                                    children: formattedName
-                                }),
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    sx: (theme)=>({
-                                            color: theme.palette.common.white,
-                                            fontWeight: 700,
-                                            fontSize: '11px'
-                                        }),
-                                    children: formattedValue
-                                })
-                            ]
-                        }, label);
-                    }
+    let t0;
+    if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+        t0 = {
+            marginTop: 0.25
+        };
+        $[0] = t0;
+    } else {
+        t0 = $[0];
+    }
+    let t1;
+    if ($[1] !== markerColor) {
+        t1 = /*#__PURE__*/ _jsx(SeriesMarker, {
+            markerColor: markerColor,
+            sx: t0
+        });
+        $[1] = markerColor;
+        $[2] = t1;
+    } else {
+        t1 = $[2];
+    }
+    let t2;
+    if ($[3] !== formattedY) {
+        t2 = /*#__PURE__*/ _jsx(Box, {
+            component: "span",
+            sx: _temp2,
+            children: formattedY
+        });
+        $[3] = formattedY;
+        $[4] = t2;
+    } else {
+        t2 = $[4];
+    }
+    let t3;
+    if ($[5] !== metricName || $[6] !== t2) {
+        t3 = /*#__PURE__*/ _jsxs(Box, {
+            component: "span",
+            children: [
+                metricName,
+                t2
+            ]
+        });
+        $[5] = metricName;
+        $[6] = t2;
+        $[7] = t3;
+    } else {
+        t3 = $[7];
+    }
+    let t4;
+    if ($[8] !== t1 || $[9] !== t3) {
+        t4 = /*#__PURE__*/ _jsxs(Box, {
+            sx: _temp,
+            children: [
+                t1,
+                t3
+            ]
+        });
+        $[8] = t1;
+        $[9] = t3;
+        $[10] = t4;
+    } else {
+        t4 = $[10];
+    }
+    let t5;
+    if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+        t5 = /*#__PURE__*/ _jsx(Divider, {
+            sx: _temp3
+        });
+        $[11] = t5;
+    } else {
+        t5 = $[11];
+    }
+    let t6;
+    if ($[12] !== metricLabels) {
+        t6 = metricLabels.map(_temp6);
+        $[12] = metricLabels;
+        $[13] = t6;
+    } else {
+        t6 = $[13];
+    }
+    let t7;
+    if ($[14] !== t6) {
+        t7 = /*#__PURE__*/ _jsx(Box, {
+            sx: _temp4,
+            children: t6
+        });
+        $[14] = t6;
+        $[15] = t7;
+    } else {
+        t7 = $[15];
+    }
+    let t8;
+    if ($[16] !== t4 || $[17] !== t7) {
+        t8 = /*#__PURE__*/ _jsxs(Stack, {
+            spacing: 0.5,
+            children: [
+                t4,
+                t5,
+                t7
+            ]
+        });
+        $[16] = t4;
+        $[17] = t7;
+        $[18] = t8;
+    } else {
+        t8 = $[18];
+    }
+    return t8;
+}
+function _temp6(label) {
+    if (label) {
+        const [name, value] = label.split("=");
+        const formattedName = value !== undefined ? `${name}: ` : name;
+        const formattedValue = value !== undefined ? value.replace(/(^"|"$)/g, "") : value;
+        return /*#__PURE__*/ _jsxs(Box, {
+            sx: {
+                display: "flex",
+                gap: "4px"
+            },
+            children: [
+                /*#__PURE__*/ _jsx(Typography, {
+                    sx: {
+                        fontSize: "11px"
+                    },
+                    children: formattedName
+                }),
+                /*#__PURE__*/ _jsx(Typography, {
+                    sx: _temp5,
+                    children: formattedValue
                 })
-            })
-        ]
-    });
+            ]
+        }, label);
+    }
+}
+function _temp5(theme_3) {
+    return {
+        color: theme_3.palette.common.white,
+        fontWeight: 700,
+        fontSize: "11px"
+    };
+}
+function _temp4(theme_2) {
+    return {
+        color: theme_2.palette.common.white
+    };
+}
+function _temp3(theme_1) {
+    return {
+        borderColor: theme_1.palette.grey["500"]
+    };
+}
+function _temp2(theme_0) {
+    return {
+        color: theme_0.palette.common.white,
+        fontWeight: 700,
+        paddingLeft: "2px"
+    };
+}
+function _temp(theme) {
+    return {
+        display: "flex",
+        height: "16px",
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "left",
+        color: theme.palette.common.white,
+        fontSize: "11px"
+    };
 }
 
 //# sourceMappingURL=SeriesLabelsStack.js.map

package/dist/TimeSeriesTooltip/SeriesLabelsStack.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesLabelsStack.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { SeriesMarker } from './SeriesMarker';\n\nexport interface SeriesLabelsStackProps {\n  formattedY: string;\n  metricName: string;\n  metricLabels: string[];\n  markerColor: string;\n}\n\nexport function SeriesLabelsStack(props: SeriesLabelsStackProps): ReactElement {\n  const { formattedY, markerColor, metricName, metricLabels } = props;\n  return (\n    <Stack spacing={0.5}>\n      <Box\n        sx={(theme) => ({\n          display: 'flex',\n          height: '16px',\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'left',\n          color: theme.palette.common.white,\n          fontSize: '11px',\n        })}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.25 }} />\n        <Box component=\"span\">\n          {metricName}\n          <Box\n            component=\"span\"\n            sx={(theme) => ({\n              color: theme.palette.common.white,\n              fontWeight: 700,\n              paddingLeft: '2px',\n            })}\n          >\n            {formattedY}\n          </Box>\n        </Box>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n      <Box\n        sx={(theme) => ({\n          color: theme.palette.common.white,\n        })}\n      >\n        {metricLabels.map((label) => {\n          // show labels on separate lines when many labels and only one focused series\n          if (label) {\n            const [name, value] = label.split('=');\n            const formattedName = value !== undefined ? `${name}: ` : name;\n            const formattedValue = value !== undefined ? value.replace(/(^\"|\"$)/g, '') : value;\n            return (\n              <Box key={label} sx={{ display: 'flex', gap: '4px' }}>\n                <Typography sx={{ fontSize: '11px' }}>{formattedName}</Typography>\n                <Typography\n                  sx={(theme) => ({\n                    color: theme.palette.common.white,\n                    fontWeight: 700,\n                    fontSize: '11px',\n                  })}\n                >\n                  {formattedValue}\n                </Typography>\n              </Box>\n            );\n          }\n        })}\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["Box","Divider","Stack","Typography","SeriesMarker","SeriesLabelsStack","props","formattedY","markerColor","metricName","metricLabels","spacing","sx","theme","display","height","flexDirection","alignItems","justifyContent","color","palette","common","white","fontSize","marginTop","component","fontWeight","paddingLeft","borderColor","grey","map","label","name","value","split","formattedName","undefined","formattedValue","replace","gap"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAGhE,SAASC,YAAY,QAAQ,oBAAiB;AAS9C,OAAO,SAASC,kBAAkBC,KAA6B;IAC7D,MAAM,EAAEC,UAAU,EAAEC,WAAW,EAAEC,UAAU,EAAEC,YAAY,EAAE,GAAGJ;IAC9D,qBACE,MAACJ;QAAMS,SAAS;;0BACd,MAACX;gBACCY,IAAI,CAACC,QAAW,CAAA;wBACdC,SAAS;wBACTC,QAAQ;wBACRC,eAAe;wBACfC,YAAY;wBACZC,gBAAgB;wBAChBC,OAAON,MAAMO,OAAO,CAACC,MAAM,CAACC,KAAK;wBACjCC,UAAU;oBACZ,CAAA;;kCAEA,KAACnB;wBAAaI,aAAaA;wBAAaI,IAAI;4BAAEY,WAAW;wBAAK;;kCAC9D,MAACxB;wBAAIyB,WAAU;;4BACZhB;0CACD,KAACT;gCACCyB,WAAU;gCACVb,IAAI,CAACC,QAAW,CAAA;wCACdM,OAAON,MAAMO,OAAO,CAACC,MAAM,CAACC,KAAK;wCACjCI,YAAY;wCACZC,aAAa;oCACf,CAAA;0CAECpB;;;;;;0BAIP,KAACN;gBACCW,IAAI,CAACC,QAAW,CAAA;wBACde,aAAaf,MAAMO,OAAO,CAACS,IAAI,CAAC,MAAM;oBACxC,CAAA;;0BAEF,KAAC7B;gBACCY,IAAI,CAACC,QAAW,CAAA;wBACdM,OAAON,MAAMO,OAAO,CAACC,MAAM,CAACC,KAAK;oBACnC,CAAA;0BAECZ,aAAaoB,GAAG,CAAC,CAACC;oBACjB,6EAA6E;oBAC7E,IAAIA,OAAO;wBACT,MAAM,CAACC,MAAMC,MAAM,GAAGF,MAAMG,KAAK,CAAC;wBAClC,MAAMC,gBAAgBF,UAAUG,YAAY,GAAGJ,KAAK,EAAE,CAAC,GAAGA;wBAC1D,MAAMK,iBAAiBJ,UAAUG,YAAYH,MAAMK,OAAO,CAAC,YAAY,MAAML;wBAC7E,qBACE,MAACjC;4BAAgBY,IAAI;gCAAEE,SAAS;gCAAQyB,KAAK;4BAAM;;8CACjD,KAACpC;oCAAWS,IAAI;wCAAEW,UAAU;oCAAO;8CAAIY;;8CACvC,KAAChC;oCACCS,IAAI,CAACC,QAAW,CAAA;4CACdM,OAAON,MAAMO,OAAO,CAACC,MAAM,CAACC,KAAK;4CACjCI,YAAY;4CACZH,UAAU;wCACZ,CAAA;8CAECc;;;2BATKN;oBAad;gBACF;;;;AAIR"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesLabelsStack.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, Divider, Stack, Typography } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { SeriesMarker } from './SeriesMarker';\n\nexport interface SeriesLabelsStackProps {\n  formattedY: string;\n  metricName: string;\n  metricLabels: string[];\n  markerColor: string;\n}\n\nexport function SeriesLabelsStack(props: SeriesLabelsStackProps): ReactElement {\n  const { formattedY, markerColor, metricName, metricLabels } = props;\n  return (\n    <Stack spacing={0.5}>\n      <Box\n        sx={(theme) => ({\n          display: 'flex',\n          height: '16px',\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'left',\n          color: theme.palette.common.white,\n          fontSize: '11px',\n        })}\n      >\n        <SeriesMarker markerColor={markerColor} sx={{ marginTop: 0.25 }} />\n        <Box component=\"span\">\n          {metricName}\n          <Box\n            component=\"span\"\n            sx={(theme) => ({\n              color: theme.palette.common.white,\n              fontWeight: 700,\n              paddingLeft: '2px',\n            })}\n          >\n            {formattedY}\n          </Box>\n        </Box>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n      <Box\n        sx={(theme) => ({\n          color: theme.palette.common.white,\n        })}\n      >\n        {metricLabels.map((label) => {\n          // show labels on separate lines when many labels and only one focused series\n          if (label) {\n            const [name, value] = label.split('=');\n            const formattedName = value !== undefined ? `${name}: ` : name;\n            const formattedValue = value !== undefined ? value.replace(/(^\"|\"$)/g, '') : value;\n            return (\n              <Box key={label} sx={{ display: 'flex', gap: '4px' }}>\n                <Typography sx={{ fontSize: '11px' }}>{formattedName}</Typography>\n                <Typography\n                  sx={(theme) => ({\n                    color: theme.palette.common.white,\n                    fontWeight: 700,\n                    fontSize: '11px',\n                  })}\n                >\n                  {formattedValue}\n                </Typography>\n              </Box>\n            );\n          }\n        })}\n      </Box>\n    </Stack>\n  );\n}\n"],"names":["Box","Divider","Stack","Typography","SeriesMarker"],"mappings":";;AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,GAAG,EAAEC,OAAO,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAGhE,SAASC,YAAY,QAAQ,oBAAiB;AAS9C,OAAO"}