@perses-dev/components 0.55.0-beta.2 → 0.55.0-beta.6

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 Calendar from 'mdi-material-ui/Calendar';\nimport EarthIcon from 'mdi-material-ui/Earth';\nimport { TimeRangeValue, isRelativeTimeRange, AbsoluteTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { useTimeZone } from '../context';\nimport { TimeZoneOption, getTimeZoneOptions } from '../model/timeZoneOption';\nimport { TimeOption } from '../model';\nimport { SettingsAutocomplete, SettingsAutocompleteOption } 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 = useRef();\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  let tzAutocompleteValue: SettingsAutocompleteOption | undefined = undefined;\n  {\n    const current = tzOptions.find((o) => o.value === timeZone);\n    if (current) tzAutocompleteValue = { id: current.value, label: current.display };\n  }\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.current}\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={anchorEl}>\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","Calendar","EarthIcon","isRelativeTimeRange","toAbsoluteTimeRange","useMemo","useRef","useState","useTimeZone","getTimeZoneOptions","SettingsAutocomplete","getGMTOffset","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","timeZoneProp","timeZoneOptions","onTimeZoneChange","ctxTimeZone","anchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","tzOptions","tzAnchorEl","setTzAnchorEl","tzOpen","Boolean","tzLabel","find","o","display","tzOffset","localOffset","tzAutocompleteOptions","map","id","label","tzAutocompleteValue","current","anchorOrigin","vertical","horizontal","transformOrigin","onClose","sx","theme","padding","spacing","p","minWidth","onClick","e","stopPropagation","options","_e","option","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":";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;AAC7F,OAAOC,cAAc,2BAA2B;AAChD,OAAOC,eAAe,wBAAwB;AAC9C,SAAyBC,mBAAmB,EAAqBC,mBAAmB,QAAQ,mBAAmB;AAC/G,SAAuBC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChE,SAASC,WAAW,QAAQ,aAAa;AACzC,SAAyBC,kBAAkB,QAAQ,0BAA0B;AAE7E,SAASC,oBAAoB,QAAoC,0BAA0B;AAC3F,SAASC,YAAY,QAAQ,kBAAkB;AAC/C,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,qBAAqB,EAAEC,eAAe,QAAQ,UAAU;AA+BjE;;;;;CAKC,GACD,OAAO,SAASC,kBAAkB,EAChCC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,MAAM,EACNC,sBAAsB,IAAI,EAC1BC,UAAUC,YAAY,EACtBC,eAAe,EACfC,gBAAgB,EACO;IACvB,MAAM,EAAEH,UAAUI,WAAW,EAAE,GAAGjB;IAClC,MAAMa,WAAWC,gBAAgBG;IAEjC,MAAMC,WAAWpB;IACjB,MAAM,CAACqB,wBAAwBC,0BAA0B,GAAGrB,SAAS;IAErE,MAAMsB,qBAAqBxB,QAAQ;QACjC,OAAOF,oBAAoBa,SAASZ,oBAAoBY,SAASA;IACnE,GAAG;QAACA;KAAM;IAEV,MAAMc,aAAazB,QACjB,IAAMQ,sBAAsBV,oBAAoBa,SAASe,YAAYf,OAAOK,WAC5E;QAACL;QAAOK;KAAS;IAGnB,MAAM,CAACW,MAAMC,QAAQ,GAAG1B,SAAS;IACjC,MAAM2B,YAAYX,mBAAmBd;IACrC,MAAM,CAAC0B,YAAYC,cAAc,GAAG7B,SAA6B;IACjE,MAAM8B,SAASC,QAAQH;IACvB,MAAMI,UAAUL,UAAUM,IAAI,CAAC,CAACC,IAAMA,EAAEzB,KAAK,KAAKK,WAAWqB,WAAWrB;IACxE,MAAMsB,WAAWhC,aAAaU;IAC9B,MAAMuB,cAAcjC,aAAa;IACjC,MAAMkC,wBAAwBX,UAAUY,GAAG,CAAC,CAACL,IAAO,CAAA;YAAEM,IAAIN,EAAEzB,KAAK;YAAEgC,OAAOP,EAAEC,OAAO;QAAC,CAAA;IACpF,IAAIO,sBAA8DlB;IAClE;QACE,MAAMmB,UAAUhB,UAAUM,IAAI,CAAC,CAACC,IAAMA,EAAEzB,KAAK,KAAKK;QAClD,IAAI6B,SAASD,sBAAsB;YAAEF,IAAIG,QAAQlC,KAAK;YAAEgC,OAAOE,QAAQR,OAAO;QAAC;IACjF;IAEA,qBACE;;0BACE,KAAC9C;gBACC8B,UAAUS;gBACVgB,cAAc;oBAAEC,UAAU;oBAAUC,YAAY;gBAAQ;gBACxDC,iBAAiB;oBAAEF,UAAU;oBAAOC,YAAY;gBAAQ;gBACxDrB,MAAMK;gBACNkB,SAAS,IAAMnB,cAAc;gBAC7BoB,IAAI,CAACC,QAAW,CAAA;wBAAEC,SAASD,MAAME,OAAO,CAAC;oBAAG,CAAA;0BAE5C,cAAA,KAACjE;oBACC8D,IAAI;wBAAEI,GAAG;wBAAGC,UAAU;oBAAI;oBAC1BC,SAAS,CAACC;wBACRA,EAAEC,eAAe;oBACnB;8BAEA,cAAA,KAACtD;wBACCuD,SAASpB;wBACT7B,OAAOiC;wBACP/B,UAAU,CAACgD,IAAIC;4BACb,IAAIA,QAAQ;gCACV,MAAMC,WAAWlC,UAAUM,IAAI,CAAC,CAACC,IAAMA,EAAEzB,KAAK,KAAKmD,OAAOpB,EAAE;gCAC5D,IAAIqB,UAAU5C,mBAAmB4C;4BACnC;4BACAhC,cAAc;wBAChB;wBACAiC,gBAAgB;wBAChBC,aAAa,CAACC,uBAAW,KAACxE;gCAAW,GAAGwE,MAAM;gCAAEC,aAAY;gCAAmBC,MAAK;;;;;0BAI1F,KAAC7E;gBACC8B,UAAUA,SAASwB,OAAO;gBAC1BC,cAAc;oBAAEC,UAAU;oBAAUC,YAAY;gBAAS;gBACzDrB,MAAML;gBACN4B,SAAS,IAAM3B,0BAA0B;gBACzC4B,IAAI,CAACC,QAAW,CAAA;wBAAEC,SAASD,MAAME,OAAO,CAAC;oBAAG,CAAA;0BAE5C,cAAA,KAAC/C;oBACC8D,kBAAkB7C;oBAClBX,UAAU,CAACF;wBACTE,SAASF;wBACTY,0BAA0B;wBAC1BK,QAAQ;oBACV;oBACA0C,UAAU,IAAM/C,0BAA0B;oBAC1CP,UAAUA;;;0BAGd,KAAC3B;gBAAIkF,KAAKlD;0BACR,cAAA,MAAC7B;oBACCmC,MAAMA;oBACNhB,OAAOF,gBAAgBE,OAAOK;oBAC9ByC,SAAS,IAAM7B,QAAQ,CAACD;oBACxB6C,eAAe5E;oBACf6E,aAAa,kBACX,MAAC9E;4BAAM+E,WAAU;4BAAMC,YAAW;4BAASrB,SAAS;;8CAClD,KAACsB;8CACEhE,YAAYuB,IAAI,CAAC,CAAC0C,MAAQpE,gBAAgBoE,IAAIlE,KAAK,EAAEK,cAAcP,gBAAgBE,OAAOK,YACvFqB,WAAW5B,gBAAgBE,OAAOK;;gCAEvCsB,aAAaC,6BACZ,MAAClD;oCAAI8D,IAAI;wCAAE2B,YAAY;wCAAWC,OAAO;oCAAiB;;wCAAG;wCAAGzC;;;;;oBAItE0C,YAAY;wBAAE,cAAc,CAAC,oCAAoC,EAAErE,OAAO;oBAAC;oBAC3EwC,IAAI;wBACF,mBAAmB;4BAAE8B,WAAW;4BAAOC,WAAW;wBAAO;wBACzD,2DAA2D;4BAAEC,cAAc;wBAAO;wBAClF,qBAAqBrE,SAAS;4BAAEsE,YAAYtE;4BAAQuE,UAAU;wBAAE,IAAI,CAAC;oBACvE;;sCAEA,KAAC/F;4BACCgG,aAAa;4BACb7B,SAAS,CAACC;gCACRA,EAAE6B,cAAc;gCAChB7B,EAAEC,eAAe;4BACnB;4BACAR,IAAI;gCAAEqC,QAAQ;gCAAW,WAAW;oCAAEC,iBAAiB;gCAAc;gCAAGC,IAAI;gCAAKC,IAAI;4BAAE;sCAEvF,cAAA,MAACtG;gCAAI8D,IAAI;oCAAEd,SAAS;oCAAQsC,YAAY;oCAAUiB,OAAO;oCAAQC,gBAAgB;gCAAgB;;kDAC/F,MAACxG;wCAAI8D,IAAI;4CAAEd,SAAS;4CAAQyD,eAAe;4CAAUnB,YAAY;wCAAa;;0DAC5E,KAACtF;gDAAI8D,IAAI;oDAAE2B,YAAY;gDAAY;0DAAG;;0DACtC,MAACzF;gDAAI8D,IAAI;oDAAE4B,OAAO;oDAAkBD,YAAY;oDAAWiB,IAAI;gDAAK;;oDAAG;oDAAW7D;;;;;kDAEpF,KAAC7C;wCAAI8D,IAAI;4CAAEd,SAAS;4CAAQsC,YAAY;4CAAUqB,IAAI;4CAAGC,IAAI;wCAAI;kDAC/D,cAAA,KAACxG;4CACC2E,MAAK;4CACL8B,cAAW;4CACXzC,SAAS,CAACC;gDACRA,EAAE6B,cAAc;gDAChB7B,EAAEC,eAAe;gDACjB5B,cAAc2B,EAAEyC,aAAa;4CAC/B;sDAEA,cAAA,KAACtG;gDAAUuG,UAAS;;;;;;;wBAK3BxF,YAAY6B,GAAG,CAAC,CAAC4D,MAAMC,oBACtB,KAAChH;gCAECqB,OAAOF,gBAAgB4F,KAAK1F,KAAK,EAAEK;gCACnCyC,SAAS;oCACP5C,SAASwF,KAAK1F,KAAK;gCACrB;0CAEC0F,KAAKhE,OAAO;+BANRiE;wBASRvF,qCACC,KAACzB;4BACCqB,OAAOF,gBAAgBgB,WAAWd,KAAK,EAAEK;4BACzCyC,SAAS,IAAMlC,0BAA0B;sCAExCE,WAAWY,OAAO;;;;;;;AAOjC"}
+{"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, useRef, 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 type { SettingsAutocompleteOption } from '../SettingsAutocomplete';\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 = useRef();\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  let tzAutocompleteValue: SettingsAutocompleteOption | undefined = undefined;\n  {\n    const current = tzOptions.find((o) => o.value === timeZone);\n    if (current) tzAutocompleteValue = { id: current.value, label: current.display };\n  }\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.current}\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={anchorEl}>\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","useRef","useState","useTimeZone","getTimeZoneOptions","SettingsAutocomplete","getGMTOffset","DateTimeRangePicker","buildCustomTimeOption","formatTimeRange","TimeRangeSelector","value","timeOptions","onChange","height","showCustomTimeRange","timeZone","timeZoneProp","timeZoneOptions","onTimeZoneChange","ctxTimeZone","anchorEl","showCustomDateSelector","setShowCustomDateSelector","convertedTimeRange","lastOption","undefined","open","setOpen","tzOptions","tzAnchorEl","setTzAnchorEl","tzOpen","Boolean","tzLabel","find","o","display","tzOffset","localOffset","tzAutocompleteOptions","map","id","label","tzAutocompleteValue","current","anchorOrigin","vertical","horizontal","transformOrigin","onClose","sx","theme","padding","spacing","p","minWidth","onClick","e","stopPropagation","options","_e","option","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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"}

package/dist/TimeRangeSelector/index.js

@@ -10,7 +10,7 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-export * from './TimeRangeSelector';
-export * from './DateTimeRangePicker';
+export * from "./TimeRangeSelector.js";
+export * from "./DateTimeRangePicker.js";
 
 //# sourceMappingURL=index.js.map

package/dist/TimeRangeSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeRangeSelector/index.ts"],"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\nexport * from './TimeRangeSelector';\nexport * from './DateTimeRangePicker';\n"],"names":[],"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,cAAc,sBAAsB;AACpC,cAAc,wBAAwB"}
+{"version":3,"sources":["../../src/TimeRangeSelector/index.ts"],"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\nexport * from './TimeRangeSelector';\nexport * from './DateTimeRangePicker';\n"],"names":[],"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,cAAc,yBAAsB;AACpC,cAAc,2BAAwB"}

package/dist/TimeRangeSelector/utils.d.ts

@@ -1,4 +1,4 @@
-import { AbsoluteTimeRange, TimeRangeValue } from '@perses-dev/spec';
+import type { AbsoluteTimeRange, TimeRangeValue } from '@perses-dev/spec';
 export declare const DATE_TIME_FORMAT = "yyyy-MM-dd HH:mm:ss";
 export interface CustomTimeOption {
     value: TimeRangeValue | undefined;

package/dist/TimeRangeSelector/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/utils.ts"],"names":[],"mappings":"AAcA,OAAO,EAAE,iBAAiB,EAAuB,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAG1F,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,cAAc,GAAG,SAAS,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,gBAAgB,CAE9G;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,GAAG,OAAO,CAWzE;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAI/G;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAK3F"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/TimeRangeSelector/utils.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAM1E,eAAO,MAAM,gBAAgB,wBAAwB,CAAC;AAEtD,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,cAAc,GAAG,SAAS,CAAC;IAClC,OAAO,EAAE,MAAM,CAAC;CACjB;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,iBAAiB,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,gBAAgB,CAE9G;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,GAAG,OAAO,CAWzE;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAAC,SAAS,EAAE,iBAAiB,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,GAAG,MAAM,CAI/G;AAED;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,cAAc,GAAG,SAAS,EAAE,QAAQ,EAAE,MAAM,GAAG,MAAM,CAK3F"}

package/dist/TimeRangeSelector/utils.js

@@ -10,9 +10,9 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { isBefore, isValid } from 'date-fns';
-import { isRelativeTimeRange } from '@perses-dev/spec';
-import { formatWithTimeZone } from '../utils';
+import { isRelativeTimeRange } from "@perses-dev/spec";
+import { isBefore, isValid } from "date-fns";
+import { formatWithTimeZone } from "../utils/index.js";
 export const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';
 export function buildCustomTimeOption(value, timeZone) {
     return {

package/dist/TimeRangeSelector/utils.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeRangeSelector/utils.ts"],"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 { isBefore, isValid } from 'date-fns';\nimport { AbsoluteTimeRange, isRelativeTimeRange, TimeRangeValue } from '@perses-dev/spec';\nimport { formatWithTimeZone } from '../utils';\n\nexport const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface CustomTimeOption {\n  value: TimeRangeValue | undefined;\n  display: string;\n}\n\nexport function buildCustomTimeOption(value: AbsoluteTimeRange | undefined, timeZone: string): CustomTimeOption {\n  return { value, display: formatTimeRange(value, timeZone) };\n}\n\n/**\n * Date validation and check if end is after start\n */\nexport function validateDateRange(startDate: Date, endDate: Date): boolean {\n  // TODO: display error as helperText\n  if (!isValid(startDate) || !isValid(endDate)) {\n    console.error('Invalid Date');\n    return false;\n  }\n  if (!isBefore(startDate, endDate)) {\n    console.error('End Time is before Start Time');\n    return false;\n  }\n  return true;\n}\n\n/**\n * Format start and end time based on provided date format\n * @param timeRange absolute time range with a start and end datetime\n * @param dateFormat date format string\n * @param timeZone\n */\nexport function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string, timeZone?: string): string {\n  const formattedStart = formatWithTimeZone(timeRange.start, dateFormat, timeZone);\n  const formattedEnd = formatWithTimeZone(timeRange.end, dateFormat, timeZone);\n  return `${formattedStart} - ${formattedEnd}`;\n}\n\n/**\n * Format the time range for display purpose only (e.g. in the selector)\n * @param value\n * @param timeZone\n */\nexport function formatTimeRange(value: TimeRangeValue | undefined, timeZone: string): string {\n  if (!value) {\n    return 'Custom Time Range';\n  }\n  return !isRelativeTimeRange(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;\n}\n"],"names":["isBefore","isValid","isRelativeTimeRange","formatWithTimeZone","DATE_TIME_FORMAT","buildCustomTimeOption","value","timeZone","display","formatTimeRange","validateDateRange","startDate","endDate","console","error","formatAbsoluteRange","timeRange","dateFormat","formattedStart","start","formattedEnd","end","pastDuration"],"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,QAAQ,EAAEC,OAAO,QAAQ,WAAW;AAC7C,SAA4BC,mBAAmB,QAAwB,mBAAmB;AAC1F,SAASC,kBAAkB,QAAQ,WAAW;AAE9C,OAAO,MAAMC,mBAAmB,sBAAsB;AAOtD,OAAO,SAASC,sBAAsBC,KAAoC,EAAEC,QAAgB;IAC1F,OAAO;QAAED;QAAOE,SAASC,gBAAgBH,OAAOC;IAAU;AAC5D;AAEA;;CAEC,GACD,OAAO,SAASG,kBAAkBC,SAAe,EAAEC,OAAa;IAC9D,oCAAoC;IACpC,IAAI,CAACX,QAAQU,cAAc,CAACV,QAAQW,UAAU;QAC5CC,QAAQC,KAAK,CAAC;QACd,OAAO;IACT;IACA,IAAI,CAACd,SAASW,WAAWC,UAAU;QACjCC,QAAQC,KAAK,CAAC;QACd,OAAO;IACT;IACA,OAAO;AACT;AAEA;;;;;CAKC,GACD,OAAO,SAASC,oBAAoBC,SAA4B,EAAEC,UAAkB,EAAEV,QAAiB;IACrG,MAAMW,iBAAiBf,mBAAmBa,UAAUG,KAAK,EAAEF,YAAYV;IACvE,MAAMa,eAAejB,mBAAmBa,UAAUK,GAAG,EAAEJ,YAAYV;IACnE,OAAO,GAAGW,eAAe,GAAG,EAAEE,cAAc;AAC9C;AAEA;;;;CAIC,GACD,OAAO,SAASX,gBAAgBH,KAAiC,EAAEC,QAAgB;IACjF,IAAI,CAACD,OAAO;QACV,OAAO;IACT;IACA,OAAO,CAACJ,oBAAoBI,SAASS,oBAAoBT,OAAOF,kBAAkBG,YAAYD,MAAMgB,YAAY;AAClH"}
+{"version":3,"sources":["../../src/TimeRangeSelector/utils.ts"],"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 type { AbsoluteTimeRange, TimeRangeValue } from '@perses-dev/spec';\nimport { isRelativeTimeRange } from '@perses-dev/spec';\nimport { isBefore, isValid } from 'date-fns';\n\nimport { formatWithTimeZone } from '../utils';\n\nexport const DATE_TIME_FORMAT = 'yyyy-MM-dd HH:mm:ss';\n\nexport interface CustomTimeOption {\n  value: TimeRangeValue | undefined;\n  display: string;\n}\n\nexport function buildCustomTimeOption(value: AbsoluteTimeRange | undefined, timeZone: string): CustomTimeOption {\n  return { value, display: formatTimeRange(value, timeZone) };\n}\n\n/**\n * Date validation and check if end is after start\n */\nexport function validateDateRange(startDate: Date, endDate: Date): boolean {\n  // TODO: display error as helperText\n  if (!isValid(startDate) || !isValid(endDate)) {\n    console.error('Invalid Date');\n    return false;\n  }\n  if (!isBefore(startDate, endDate)) {\n    console.error('End Time is before Start Time');\n    return false;\n  }\n  return true;\n}\n\n/**\n * Format start and end time based on provided date format\n * @param timeRange absolute time range with a start and end datetime\n * @param dateFormat date format string\n * @param timeZone\n */\nexport function formatAbsoluteRange(timeRange: AbsoluteTimeRange, dateFormat: string, timeZone?: string): string {\n  const formattedStart = formatWithTimeZone(timeRange.start, dateFormat, timeZone);\n  const formattedEnd = formatWithTimeZone(timeRange.end, dateFormat, timeZone);\n  return `${formattedStart} - ${formattedEnd}`;\n}\n\n/**\n * Format the time range for display purpose only (e.g. in the selector)\n * @param value\n * @param timeZone\n */\nexport function formatTimeRange(value: TimeRangeValue | undefined, timeZone: string): string {\n  if (!value) {\n    return 'Custom Time Range';\n  }\n  return !isRelativeTimeRange(value) ? formatAbsoluteRange(value, DATE_TIME_FORMAT, timeZone) : value.pastDuration;\n}\n"],"names":["isRelativeTimeRange","isBefore","isValid","formatWithTimeZone","DATE_TIME_FORMAT","buildCustomTimeOption","value","timeZone","display","formatTimeRange","validateDateRange","startDate","endDate","console","error","formatAbsoluteRange","timeRange","dateFormat","formattedStart","start","formattedEnd","end","pastDuration"],"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;AAGjC,SAASA,mBAAmB,QAAQ,mBAAmB;AACvD,SAASC,QAAQ,EAAEC,OAAO,QAAQ,WAAW;AAE7C,SAASC,kBAAkB,QAAQ,oBAAW;AAE9C,OAAO,MAAMC,mBAAmB,sBAAsB;AAOtD,OAAO,SAASC,sBAAsBC,KAAoC,EAAEC,QAAgB;IAC1F,OAAO;QAAED;QAAOE,SAASC,gBAAgBH,OAAOC;IAAU;AAC5D;AAEA;;CAEC,GACD,OAAO,SAASG,kBAAkBC,SAAe,EAAEC,OAAa;IAC9D,oCAAoC;IACpC,IAAI,CAACV,QAAQS,cAAc,CAACT,QAAQU,UAAU;QAC5CC,QAAQC,KAAK,CAAC;QACd,OAAO;IACT;IACA,IAAI,CAACb,SAASU,WAAWC,UAAU;QACjCC,QAAQC,KAAK,CAAC;QACd,OAAO;IACT;IACA,OAAO;AACT;AAEA;;;;;CAKC,GACD,OAAO,SAASC,oBAAoBC,SAA4B,EAAEC,UAAkB,EAAEV,QAAiB;IACrG,MAAMW,iBAAiBf,mBAAmBa,UAAUG,KAAK,EAAEF,YAAYV;IACvE,MAAMa,eAAejB,mBAAmBa,UAAUK,GAAG,EAAEJ,YAAYV;IACnE,OAAO,GAAGW,eAAe,GAAG,EAAEE,cAAc;AAC9C;AAEA;;;;CAIC,GACD,OAAO,SAASX,gBAAgBH,KAAiC,EAAEC,QAAgB;IACjF,IAAI,CAACD,OAAO;QACV,OAAO;IACT;IACA,OAAO,CAACN,oBAAoBM,SAASS,oBAAoBT,OAAOF,kBAAkBG,YAAYD,MAAMgB,YAAY;AAClH"}

package/dist/TimeSeriesTooltip/SeriesInfo.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface SeriesInfoProps {
     seriesName: string;
     y: number;

package/dist/TimeSeriesTooltip/SeriesInfo.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAKrC,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA0E/D"}
+{"version":3,"file":"SeriesInfo.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesInfo.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAM1C,MAAM,WAAW,eAAe;IAC9B,UAAU,EAAE,MAAM,CAAC;IACnB,CAAC,EAAE,MAAM,CAAC;IACV,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CA0E/D"}

package/dist/TimeSeriesTooltip/SeriesInfo.js

@@ -11,10 +11,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Box } from '@mui/material';
-import { SeriesMarker } from './SeriesMarker';
-import { SeriesLabelsStack } from './SeriesLabelsStack';
-import { TOOLTIP_LABELS_MAX_WIDTH, EMPHASIZED_SERIES_DESCRIPTION, NEARBY_SERIES_DESCRIPTION } from './tooltip-model';
+import { Box } from "@mui/material";
+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

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 { ReactElement } from 'react';\nimport { SeriesMarker } from './SeriesMarker';\nimport { SeriesLabelsStack } from './SeriesLabelsStack';\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","SeriesMarker","SeriesLabelsStack","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;AAEpC,SAASC,YAAY,QAAQ,iBAAiB;AAC9C,SAASC,iBAAiB,QAAQ,sBAAsB;AACxD,SAASC,wBAAwB,EAAEC,6BAA6B,EAAEC,yBAAyB,QAAQ,kBAAkB;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,KAACZ;YACCO,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,KAAC1B;wBAAaS,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","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"}

package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
+import type { ReactElement } from 'react';
 export interface SeriesLabelsStackProps {
     formattedY: string;
     metricName: string;

package/dist/TimeSeriesTooltip/SeriesLabelsStack.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeriesLabelsStack.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesLabelsStack.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAiE7E"}
+{"version":3,"file":"SeriesLabelsStack.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesLabelsStack.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,YAAY,CAiE7E"}

package/dist/TimeSeriesTooltip/SeriesLabelsStack.js

@@ -11,8 +11,8 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Box, Divider, Stack, Typography } from '@mui/material';
-import { SeriesMarker } from './SeriesMarker';
+import { Box, Divider, Stack, Typography } from "@mui/material";
+import { SeriesMarker } from "./SeriesMarker.js";
 export function SeriesLabelsStack(props) {
     const { formattedY, markerColor, metricName, metricLabels } = props;
     return /*#__PURE__*/ _jsxs(Stack, {

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 { ReactElement } from 'react';\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;AAEhE,SAASC,YAAY,QAAQ,iBAAiB;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","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"}

package/dist/TimeSeriesTooltip/SeriesMarker.d.ts

@@ -1,5 +1,5 @@
-import { BoxProps } from '@mui/material';
-import { ReactElement } from 'react';
+import type { BoxProps } from '@mui/material';
+import type { ReactElement } from 'react';
 interface SeriesMarkerProps extends BoxProps<'div'> {
     markerColor: string;
 }

package/dist/TimeSeriesTooltip/SeriesMarker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SeriesMarker.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesMarker.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,UAAU,iBAAkB,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACjD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAkBnE"}
+{"version":3,"file":"SeriesMarker.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/SeriesMarker.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAE9C,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,UAAU,iBAAkB,SAAQ,QAAQ,CAAC,KAAK,CAAC;IACjD,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CAkBnE"}

package/dist/TimeSeriesTooltip/SeriesMarker.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx } from "react/jsx-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.
@@ -11,8 +10,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Box } from '@mui/material';
-import { combineSx } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Box } from "@mui/material";
+import { combineSx } from "../utils/index.js";
 export function SeriesMarker(props) {
     const { markerColor, sx } = props;
     return /*#__PURE__*/ _jsx(Box, {

package/dist/TimeSeriesTooltip/SeriesMarker.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesMarker.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, BoxProps } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { combineSx } from '../utils';\n\ninterface SeriesMarkerProps extends BoxProps<'div'> {\n  markerColor: string;\n}\n\nexport function SeriesMarker(props: SeriesMarkerProps): ReactElement {\n  const { markerColor, sx } = props;\n  return (\n    <Box\n      sx={combineSx(\n        {\n          display: 'inline-block',\n          width: '11px',\n          height: '11px',\n          borderRadius: '2px',\n          marginRight: 1,\n          verticalAlign: 'top',\n        },\n        sx\n      )}\n      style={{ backgroundColor: markerColor }}\n    ></Box>\n  );\n}\n"],"names":["Box","combineSx","SeriesMarker","props","markerColor","sx","display","width","height","borderRadius","marginRight","verticalAlign","style","backgroundColor"],"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,QAAkB,gBAAgB;AAE9C,SAASC,SAAS,QAAQ,WAAW;AAMrC,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,WAAW,EAAEC,EAAE,EAAE,GAAGF;IAC5B,qBACE,KAACH;QACCK,IAAIJ,UACF;YACEK,SAAS;YACTC,OAAO;YACPC,QAAQ;YACRC,cAAc;YACdC,aAAa;YACbC,eAAe;QACjB,GACAN;QAEFO,OAAO;YAAEC,iBAAiBT;QAAY;;AAG5C"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/SeriesMarker.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 type { BoxProps } from '@mui/material';\nimport { Box } from '@mui/material';\nimport type { ReactElement } from 'react';\n\nimport { combineSx } from '../utils';\n\ninterface SeriesMarkerProps extends BoxProps<'div'> {\n  markerColor: string;\n}\n\nexport function SeriesMarker(props: SeriesMarkerProps): ReactElement {\n  const { markerColor, sx } = props;\n  return (\n    <Box\n      sx={combineSx(\n        {\n          display: 'inline-block',\n          width: '11px',\n          height: '11px',\n          borderRadius: '2px',\n          marginRight: 1,\n          verticalAlign: 'top',\n        },\n        sx,\n      )}\n      style={{ backgroundColor: markerColor }}\n    ></Box>\n  );\n}\n"],"names":["Box","combineSx","SeriesMarker","props","markerColor","sx","display","width","height","borderRadius","marginRight","verticalAlign","style","backgroundColor"],"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;;AAGjC,SAASA,GAAG,QAAQ,gBAAgB;AAGpC,SAASC,SAAS,QAAQ,oBAAW;AAMrC,OAAO,SAASC,aAAaC,KAAwB;IACnD,MAAM,EAAEC,WAAW,EAAEC,EAAE,EAAE,GAAGF;IAC5B,qBACE,KAACH;QACCK,IAAIJ,UACF;YACEK,SAAS;YACTC,OAAO;YACPC,QAAQ;YACRC,cAAc;YACdC,aAAa;YACbC,eAAe;QACjB,GACAN;QAEFO,OAAO;YAAEC,iBAAiBT;QAAY;;AAG5C"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts

@@ -1,8 +1,8 @@
-import { MutableRefObject } from 'react';
-import { ECharts as EChartsInstance } from 'echarts/core';
-import { TimeSeries } from '@perses-dev/spec';
-import { FormatOptions, TimeChartSeriesMapping } from '../model';
-import { CursorCoordinates } from './tooltip-model';
+import type { TimeSeries } from '@perses-dev/spec';
+import type { ECharts as EChartsInstance } from 'echarts/core';
+import type { MutableRefObject } from 'react';
+import type { FormatOptions, TimeChartSeriesMapping } from '../model';
+import type { CursorCoordinates } from './tooltip-model';
 export interface TimeChartTooltipProps {
     chartRef: MutableRefObject<EChartsInstance | undefined>;
     data: TimeSeries[];

package/dist/TimeSeriesTooltip/TimeChartTooltip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAQ,gBAAgB,EAAkD,MAAM,OAAO,CAAC;AAE/F,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC1D,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAE9C,OAAO,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAoB,MAAM,iBAAiB,CAAC;AAMtE,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6DAiG3B,CAAC"}
+{"version":3,"file":"TimeChartTooltip.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,cAAc,CAAC;AAC/D,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,OAAO,CAAC;AAI9C,OAAO,KAAK,EAAE,aAAa,EAAE,sBAAsB,EAAE,MAAM,UAAU,CAAC;AAEtE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AAMzD,MAAM,WAAW,qBAAqB;IACpC,QAAQ,EAAE,gBAAgB,CAAC,eAAe,GAAG,SAAS,CAAC,CAAC;IACxD,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACpC;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;IAC1B,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,gBAAgB,6DAiG3B,CAAC"}

package/dist/TimeSeriesTooltip/TimeChartTooltip.js

@@ -11,14 +11,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';
-import { Box, Portal, Stack } from '@mui/material';
-import useResizeObserver from 'use-resize-observer';
-import { useMousePosition } from './tooltip-model';
-import { assembleTransform, getTooltipStyles } from './utils';
-import { getNearbySeriesData } from './nearby-series';
-import { TooltipHeader } from './TooltipHeader';
-import { TooltipContent } from './TooltipContent';
+import { Box, Portal, Stack } from "@mui/material";
+import { memo, useCallback, useLayoutEffect, useRef, useState } from "react";
+import useResizeObserver from "use-resize-observer";
+import { getNearbySeriesData } from "./nearby-series.js";
+import { useMousePosition } from "./tooltip-model.js";
+import { TooltipContent } from "./TooltipContent.js";
+import { TooltipHeader } from "./TooltipHeader.js";
+import { assembleTransform, getTooltipStyles } from "./utils.js";
 export const TimeChartTooltip = /*#__PURE__*/ memo(function TimeChartTooltip({ containerId, chartRef, data, seriesMapping, enablePinning = true, wrapLabels, format, seriesFormatMap, onUnpinClick, pinnedPos }) {
     const [showAllSeries, setShowAllSeries] = useState(false);
     const transform = useRef();

package/dist/TimeSeriesTooltip/TimeChartTooltip.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.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 { memo, MutableRefObject, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport { Box, Portal, Stack } from '@mui/material';\nimport { ECharts as EChartsInstance } from 'echarts/core';\nimport { TimeSeries } from '@perses-dev/spec';\nimport useResizeObserver from 'use-resize-observer';\nimport { FormatOptions, TimeChartSeriesMapping } from '../model';\nimport { CursorCoordinates, useMousePosition } from './tooltip-model';\nimport { assembleTransform, getTooltipStyles } from './utils';\nimport { getNearbySeriesData } from './nearby-series';\nimport { TooltipHeader } from './TooltipHeader';\nimport { TooltipContent } from './TooltipContent';\n\nexport interface TimeChartTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options for per-series formatting (used with multiple Y axes)\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  seriesFormatMap,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const transform = useRef<string | undefined>();\n  const tooltipElementRef = useRef<HTMLDivElement | null>(null);\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  // Stable callback — prevents the ResizeObserver from disconnecting/reconnecting on every render.\n  const setTooltipRef = useCallback(\n    (node: HTMLDivElement | null): void => {\n      tooltipElementRef.current = node;\n      tooltipRef(node);\n    },\n    [tooltipRef]\n  );\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n\n  // Synchronously reposition after every render to prevent one-frame viewport overflow.\n  useLayoutEffect(() => {\n    if (mousePos === null) return;\n    const node = tooltipElementRef.current;\n    if (!node) return;\n    const rect = node.getBoundingClientRect();\n    if (rect.height === 0 || rect.width === 0) return;\n    const nextTransform = assembleTransform(mousePos, pinnedPos, rect.height, rect.width, containerElement);\n    if (nextTransform && nextTransform !== transform.current) {\n      transform.current = nextTransform;\n      node.style.transform = nextTransform;\n    }\n  });\n\n  if (mousePos === null || mousePos.target === null || data === null) return null;\n\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n\n  // Cap height to container so the tooltip is not cut off.\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    data,\n    seriesMapping,\n    pinnedPos,\n    chart,\n    format,\n    seriesFormatMap,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={setTooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform: transform.current,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["memo","useCallback","useLayoutEffect","useRef","useState","Box","Portal","Stack","useResizeObserver","useMousePosition","assembleTransform","getTooltipStyles","getNearbySeriesData","TooltipHeader","TooltipContent","TimeChartTooltip","containerId","chartRef","data","seriesMapping","enablePinning","wrapLabels","format","seriesFormatMap","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","transform","tooltipElementRef","mousePos","height","width","ref","tooltipRef","isTooltipPinned","setTooltipRef","node","current","containerElement","document","querySelector","undefined","rect","getBoundingClientRect","nextTransform","style","target","tagName","chart","maxHeight","nearbySeries","length","totalSeries","container","sx","theme","spacing","onShowAllClick","checked","series"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TimeChartTooltip.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, Portal, Stack } from '@mui/material';\nimport type { TimeSeries } from '@perses-dev/spec';\nimport type { ECharts as EChartsInstance } from 'echarts/core';\nimport type { MutableRefObject } from 'react';\nimport { memo, useCallback, useLayoutEffect, useRef, useState } from 'react';\nimport useResizeObserver from 'use-resize-observer';\n\nimport type { FormatOptions, TimeChartSeriesMapping } from '../model';\nimport { getNearbySeriesData } from './nearby-series';\nimport type { CursorCoordinates } from './tooltip-model';\nimport { useMousePosition } from './tooltip-model';\nimport { TooltipContent } from './TooltipContent';\nimport { TooltipHeader } from './TooltipHeader';\nimport { assembleTransform, getTooltipStyles } from './utils';\n\nexport interface TimeChartTooltipProps {\n  chartRef: MutableRefObject<EChartsInstance | undefined>;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  enablePinning?: boolean;\n  pinnedPos: CursorCoordinates | null;\n  /**\n   * The id of the container that will have the chart tooltip appended to it.\n   * By default, the chart tooltip is attached to document.body.\n   */\n  containerId?: string;\n  onUnpinClick?: () => void;\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options for per-series formatting (used with multiple Y axes)\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  wrapLabels?: boolean;\n}\n\nexport const TimeChartTooltip = memo(function TimeChartTooltip({\n  containerId,\n  chartRef,\n  data,\n  seriesMapping,\n  enablePinning = true,\n  wrapLabels,\n  format,\n  seriesFormatMap,\n  onUnpinClick,\n  pinnedPos,\n}: TimeChartTooltipProps) {\n  const [showAllSeries, setShowAllSeries] = useState(false);\n  const transform = useRef<string | undefined>();\n  const tooltipElementRef = useRef<HTMLDivElement | null>(null);\n\n  const mousePos = useMousePosition();\n  const { height, width, ref: tooltipRef } = useResizeObserver();\n\n  const isTooltipPinned = pinnedPos !== null && enablePinning;\n\n  // Stable callback — prevents the ResizeObserver from disconnecting/reconnecting on every render.\n  const setTooltipRef = useCallback(\n    (node: HTMLDivElement | null): void => {\n      tooltipElementRef.current = node;\n      tooltipRef(node);\n    },\n    [tooltipRef],\n  );\n\n  const containerElement = containerId ? document.querySelector(containerId) : undefined;\n\n  // Synchronously reposition after every render to prevent one-frame viewport overflow.\n  useLayoutEffect(() => {\n    if (mousePos === null) return;\n    const node = tooltipElementRef.current;\n    if (!node) return;\n    const rect = node.getBoundingClientRect();\n    if (rect.height === 0 || rect.width === 0) return;\n    const nextTransform = assembleTransform(mousePos, pinnedPos, rect.height, rect.width, containerElement);\n    if (nextTransform && nextTransform !== transform.current) {\n      transform.current = nextTransform;\n      node.style.transform = nextTransform;\n    }\n  });\n\n  if (mousePos === null || mousePos.target === null || data === null) return null;\n\n  if (pinnedPos === null && (mousePos.target as HTMLElement).tagName !== 'CANVAS') return null;\n\n  const chart = chartRef.current;\n\n  // Cap height to container so the tooltip is not cut off.\n  const maxHeight = containerElement ? containerElement.getBoundingClientRect().height : undefined;\n\n  transform.current = assembleTransform(mousePos, pinnedPos, height ?? 0, width ?? 0, containerElement);\n\n  const nearbySeries = getNearbySeriesData({\n    mousePos,\n    data,\n    seriesMapping,\n    pinnedPos,\n    chart,\n    format,\n    seriesFormatMap,\n    showAllSeries,\n  });\n  if (nearbySeries.length === 0) {\n    return null;\n  }\n\n  const totalSeries = data.length;\n\n  return (\n    <Portal container={containerElement}>\n      <Box\n        ref={setTooltipRef}\n        sx={(theme) => getTooltipStyles(theme, pinnedPos, maxHeight)}\n        style={{\n          transform: transform.current,\n        }}\n      >\n        <Stack spacing={0.5}>\n          <TooltipHeader\n            nearbySeries={nearbySeries}\n            totalSeries={totalSeries}\n            enablePinning={enablePinning}\n            isTooltipPinned={isTooltipPinned}\n            showAllSeries={showAllSeries}\n            onShowAllClick={(checked) => setShowAllSeries(checked)}\n            onUnpinClick={onUnpinClick}\n          />\n          <TooltipContent series={nearbySeries} wrapLabels={wrapLabels} />\n        </Stack>\n      </Box>\n    </Portal>\n  );\n});\n"],"names":["Box","Portal","Stack","memo","useCallback","useLayoutEffect","useRef","useState","useResizeObserver","getNearbySeriesData","useMousePosition","TooltipContent","TooltipHeader","assembleTransform","getTooltipStyles","TimeChartTooltip","containerId","chartRef","data","seriesMapping","enablePinning","wrapLabels","format","seriesFormatMap","onUnpinClick","pinnedPos","showAllSeries","setShowAllSeries","transform","tooltipElementRef","mousePos","height","width","ref","tooltipRef","isTooltipPinned","setTooltipRef","node","current","containerElement","document","querySelector","undefined","rect","getBoundingClientRect","nextTransform","style","target","tagName","chart","maxHeight","nearbySeries","length","totalSeries","container","sx","theme","spacing","onShowAllClick","checked","series"],"mappings":"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"}

package/dist/TimeSeriesTooltip/TooltipContent.d.ts

@@ -1,5 +1,5 @@
-import { ReactElement } from 'react';
-import { NearbySeriesArray } from './types';
+import type { ReactElement } from 'react';
+import type { NearbySeriesArray } from './types';
 export interface TooltipContentProps {
     series: NearbySeriesArray | null;
     wrapLabels?: boolean;

package/dist/TimeSeriesTooltip/TooltipContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAW,MAAM,OAAO,CAAC;AAE9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAG5C,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,GAAG,IAAI,CAsC9E"}
+{"version":3,"file":"TooltipContent.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipContent.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAI1C,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,mBAAmB;IAClC,MAAM,EAAE,iBAAiB,GAAG,IAAI,CAAC;IACjC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,GAAG,IAAI,CAsC9E"}

package/dist/TimeSeriesTooltip/TooltipContent.js

@@ -11,9 +11,9 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { useMemo } from 'react';
-import { Box } from '@mui/material';
-import { SeriesInfo } from './SeriesInfo';
+import { Box } from "@mui/material";
+import { useMemo } from "react";
+import { SeriesInfo } from "./SeriesInfo.js";
 export function TooltipContent(props) {
     const { series, wrapLabels } = props;
     const sortedFocusedSeries = useMemo(()=>{

package/dist/TimeSeriesTooltip/TooltipContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.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 { ReactElement, useMemo } from 'react';\nimport { Box } from '@mui/material';\nimport { NearbySeriesArray } from './types';\nimport { SeriesInfo } from './SeriesInfo';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps): ReactElement | null {\n  const { series, wrapLabels } = props;\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [series]);\n\n  if (series === null || sortedFocusedSeries === null) {\n    return null;\n  }\n  // TODO: use react-virtuoso to improve performance\n  return (\n    <Box\n      sx={(theme) => ({\n        display: 'table',\n        padding: theme.spacing(0.5, 2),\n      })}\n    >\n      {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor }) => {\n        if (datumIdx === null || seriesIdx === null) return null;\n        const key = seriesIdx.toString() + datumIdx.toString();\n\n        return (\n          <SeriesInfo\n            key={key}\n            seriesName={seriesName}\n            y={y}\n            formattedY={formattedY}\n            markerColor={markerColor}\n            totalSeries={sortedFocusedSeries.length}\n            wrapLabels={wrapLabels}\n            emphasizeText={isClosestToCursor}\n          />\n        );\n      })}\n    </Box>\n  );\n}\n"],"names":["useMemo","Box","SeriesInfo","TooltipContent","props","series","wrapLabels","sortedFocusedSeries","sort","a","b","y","sx","theme","display","padding","spacing","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"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,SAAuBA,OAAO,QAAQ,QAAQ;AAC9C,SAASC,GAAG,QAAQ,gBAAgB;AAEpC,SAASC,UAAU,QAAQ,eAAe;AAO1C,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAE/B,MAAMG,sBAAsBP,QAAQ;QAClC,IAAIK,WAAW,MAAM,OAAO;QAC5B,OAAOA,OAAOG,IAAI,CAAC,CAACC,GAAGC,IAAOD,EAAEE,CAAC,GAAGD,EAAEC,CAAC,GAAG,CAAC,IAAI;IACjD,GAAG;QAACN;KAAO;IAEX,IAAIA,WAAW,QAAQE,wBAAwB,MAAM;QACnD,OAAO;IACT;IACA,kDAAkD;IAClD,qBACE,KAACN;QACCW,IAAI,CAACC,QAAW,CAAA;gBACdC,SAAS;gBACTC,SAASF,MAAMG,OAAO,CAAC,KAAK;YAC9B,CAAA;kBAECT,oBAAoBU,GAAG,CAAC,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAET,CAAC,EAAEU,UAAU,EAAEC,WAAW,EAAEC,iBAAiB,EAAE;YAC1G,IAAIL,aAAa,QAAQC,cAAc,MAAM,OAAO;YACpD,MAAMK,MAAML,UAAUM,QAAQ,KAAKP,SAASO,QAAQ;YAEpD,qBACE,KAACvB;gBAECkB,YAAYA;gBACZT,GAAGA;gBACHU,YAAYA;gBACZC,aAAaA;gBACbI,aAAanB,oBAAoBoB,MAAM;gBACvCrB,YAAYA;gBACZsB,eAAeL;eAPVC;QAUX;;AAGN"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipContent.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';\nimport { useMemo } from 'react';\n\nimport { SeriesInfo } from './SeriesInfo';\nimport type { NearbySeriesArray } from './types';\n\nexport interface TooltipContentProps {\n  series: NearbySeriesArray | null;\n  wrapLabels?: boolean;\n}\n\nexport function TooltipContent(props: TooltipContentProps): ReactElement | null {\n  const { series, wrapLabels } = props;\n\n  const sortedFocusedSeries = useMemo(() => {\n    if (series === null) return null;\n    return series.sort((a, b) => (a.y > b.y ? -1 : 1));\n  }, [series]);\n\n  if (series === null || sortedFocusedSeries === null) {\n    return null;\n  }\n  // TODO: use react-virtuoso to improve performance\n  return (\n    <Box\n      sx={(theme) => ({\n        display: 'table',\n        padding: theme.spacing(0.5, 2),\n      })}\n    >\n      {sortedFocusedSeries.map(({ datumIdx, seriesIdx, seriesName, y, formattedY, markerColor, isClosestToCursor }) => {\n        if (datumIdx === null || seriesIdx === null) return null;\n        const key = seriesIdx.toString() + datumIdx.toString();\n\n        return (\n          <SeriesInfo\n            key={key}\n            seriesName={seriesName}\n            y={y}\n            formattedY={formattedY}\n            markerColor={markerColor}\n            totalSeries={sortedFocusedSeries.length}\n            wrapLabels={wrapLabels}\n            emphasizeText={isClosestToCursor}\n          />\n        );\n      })}\n    </Box>\n  );\n}\n"],"names":["Box","useMemo","SeriesInfo","TooltipContent","props","series","wrapLabels","sortedFocusedSeries","sort","a","b","y","sx","theme","display","padding","spacing","map","datumIdx","seriesIdx","seriesName","formattedY","markerColor","isClosestToCursor","key","toString","totalSeries","length","emphasizeText"],"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;AAEpC,SAASC,OAAO,QAAQ,QAAQ;AAEhC,SAASC,UAAU,QAAQ,kBAAe;AAQ1C,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,MAAM,EAAEC,UAAU,EAAE,GAAGF;IAE/B,MAAMG,sBAAsBN,QAAQ;QAClC,IAAII,WAAW,MAAM,OAAO;QAC5B,OAAOA,OAAOG,IAAI,CAAC,CAACC,GAAGC,IAAOD,EAAEE,CAAC,GAAGD,EAAEC,CAAC,GAAG,CAAC,IAAI;IACjD,GAAG;QAACN;KAAO;IAEX,IAAIA,WAAW,QAAQE,wBAAwB,MAAM;QACnD,OAAO;IACT;IACA,kDAAkD;IAClD,qBACE,KAACP;QACCY,IAAI,CAACC,QAAW,CAAA;gBACdC,SAAS;gBACTC,SAASF,MAAMG,OAAO,CAAC,KAAK;YAC9B,CAAA;kBAECT,oBAAoBU,GAAG,CAAC,CAAC,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,UAAU,EAAET,CAAC,EAAEU,UAAU,EAAEC,WAAW,EAAEC,iBAAiB,EAAE;YAC1G,IAAIL,aAAa,QAAQC,cAAc,MAAM,OAAO;YACpD,MAAMK,MAAML,UAAUM,QAAQ,KAAKP,SAASO,QAAQ;YAEpD,qBACE,KAACvB;gBAECkB,YAAYA;gBACZT,GAAGA;gBACHU,YAAYA;gBACZC,aAAaA;gBACbI,aAAanB,oBAAoBoB,MAAM;gBACvCrB,YAAYA;gBACZsB,eAAeL;eAPVC;QAUX;;AAGN"}

package/dist/TimeSeriesTooltip/TooltipHeader.d.ts

@@ -1,5 +1,4 @@
-/// <reference types="react" />
-import { NearbySeriesArray } from './types';
+import type { NearbySeriesArray } from './types';
 export interface TooltipHeaderProps {
     nearbySeries: NearbySeriesArray;
     totalSeries: number;

package/dist/TimeSeriesTooltip/TooltipHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TooltipHeader.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"names":[],"mappings":";AAkBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQ5C,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,0DA4HxB,CAAC"}
+{"version":3,"file":"TooltipHeader.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesTooltip/TooltipHeader.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAEjD,MAAM,WAAW,kBAAkB;IACjC,YAAY,EAAE,iBAAiB,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,OAAO,CAAC;IACzB,aAAa,EAAE,OAAO,CAAC;IACvB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;IAC5C,YAAY,CAAC,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,eAAO,MAAM,aAAa,0DA4HxB,CAAC"}

package/dist/TimeSeriesTooltip/TooltipHeader.js

@@ -11,12 +11,12 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { Box, Divider, Typography, Stack, Switch } from '@mui/material';
-import Pin from 'mdi-material-ui/Pin';
-import PinOutline from 'mdi-material-ui/PinOutline';
-import { memo } from 'react';
-import { useTimeZone } from '../context/TimeZoneProvider';
-import { TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_WIDTH, PIN_TOOLTIP_HELP_TEXT, UNPIN_TOOLTIP_HELP_TEXT } from './tooltip-model';
+import { Box, Divider, Typography, Stack, Switch } from "@mui/material";
+import Pin from "mdi-material-ui/Pin";
+import PinOutline from "mdi-material-ui/PinOutline";
+import { memo } from "react";
+import { useTimeZone } from "../context/TimeZoneProvider.js";
+import { TOOLTIP_BG_COLOR_FALLBACK, TOOLTIP_MAX_WIDTH, PIN_TOOLTIP_HELP_TEXT, UNPIN_TOOLTIP_HELP_TEXT } from "./tooltip-model.js";
 export const TooltipHeader = /*#__PURE__*/ memo(function TooltipHeader({ nearbySeries, totalSeries, isTooltipPinned, showAllSeries, enablePinning = true, onShowAllClick, onUnpinClick }) {
     const { formatWithUserTimeZone } = useTimeZone();
     const seriesTimeMs = nearbySeries[0]?.date ?? null;

package/dist/TimeSeriesTooltip/TooltipHeader.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipHeader.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, Typography, Stack, Switch } from '@mui/material';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport { memo, ReactElement } from 'react';\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport { NearbySeriesArray } from './types';\nimport {\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  PIN_TOOLTIP_HELP_TEXT,\n  UNPIN_TOOLTIP_HELP_TEXT,\n} from './tooltip-model';\n\nexport interface TooltipHeaderProps {\n  nearbySeries: NearbySeriesArray;\n  totalSeries: number;\n  isTooltipPinned: boolean;\n  showAllSeries: boolean;\n  enablePinning?: boolean;\n  onShowAllClick?: (checked: boolean) => void;\n  onUnpinClick?: () => void;\n}\n\nexport const TooltipHeader = memo(function TooltipHeader({\n  nearbySeries,\n  totalSeries,\n  isTooltipPinned,\n  showAllSeries,\n  enablePinning = true,\n  onShowAllClick,\n  onUnpinClick,\n}: TooltipHeaderProps) {\n  const { formatWithUserTimeZone } = useTimeZone();\n  const seriesTimeMs = nearbySeries[0]?.date ?? null;\n  if (seriesTimeMs === null) {\n    return null;\n  }\n\n  const formatTimeSeriesHeader = (timeMs: number): ReactElement => {\n    const date = new Date(timeMs);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n    return (\n      <Box>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </Box>\n    );\n  };\n\n  // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT\n  const showAllSeriesToggle = enablePinning && totalSeries > 5;\n\n  const pinTooltipHelpText = isTooltipPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT;\n\n  return (\n    <Box\n      sx={(theme) => ({\n        width: '100%',\n        maxWidth: TOOLTIP_MAX_WIDTH,\n        padding: theme.spacing(1.5, 2, 0.5, 2),\n        backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n        position: 'sticky',\n        top: 0,\n        left: 0,\n      })}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          display: 'flex',\n          justifyContent: 'start',\n          alignItems: 'center',\n          paddingBottom: 0.5,\n        }}\n      >\n        {formatTimeSeriesHeader(seriesTimeMs)}\n        <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }}>\n          {showAllSeriesToggle && (\n            <Stack direction=\"row\" gap={0.5} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n              <Typography sx={{ fontSize: 11 }}>Show All</Typography>\n              <Switch\n                checked={showAllSeries}\n                size=\"small\"\n                onChange={(_, checked) => {\n                  if (onShowAllClick !== undefined) {\n                    return onShowAllClick(checked);\n                  }\n                }}\n                sx={(theme) => ({\n                  '& .MuiSwitch-switchBase': {\n                    color: theme.palette.common.white,\n                  },\n                  '& .MuiSwitch-track': {\n                    backgroundColor: theme.palette.common.white,\n                  },\n                })}\n              />\n            </Stack>\n          )}\n          {enablePinning && (\n            <Stack direction=\"row\" alignItems=\"center\">\n              <Typography\n                sx={{\n                  marginRight: 0.5,\n                  fontSize: 11,\n                  verticalAlign: 'middle',\n                }}\n              >\n                {pinTooltipHelpText}\n              </Typography>\n              {isTooltipPinned ? (\n                <Pin\n                  onClick={() => {\n                    if (onUnpinClick !== undefined) {\n                      onUnpinClick();\n                    }\n                  }}\n                  sx={{\n                    fontSize: 16,\n                    cursor: 'pointer',\n                  }}\n                />\n              ) : (\n                <PinOutline sx={{ fontSize: 16 }} />\n              )}\n            </Stack>\n          )}\n        </Stack>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          width: '100%',\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n    </Box>\n  );\n});\n"],"names":["Box","Divider","Typography","Stack","Switch","Pin","PinOutline","memo","useTimeZone","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT","TooltipHeader","nearbySeries","totalSeries","isTooltipPinned","showAllSeries","enablePinning","onShowAllClick","onUnpinClick","formatWithUserTimeZone","seriesTimeMs","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","showAllSeriesToggle","pinTooltipHelpText","width","maxWidth","padding","spacing","backgroundColor","designSystem","grey","position","top","left","display","justifyContent","alignItems","paddingBottom","direction","gap","marginLeft","textAlign","fontSize","checked","size","onChange","_","undefined","marginRight","verticalAlign","onClick","cursor","borderColor"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesTooltip/TooltipHeader.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, Typography, Stack, Switch } from '@mui/material';\nimport Pin from 'mdi-material-ui/Pin';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport type { ReactElement } from 'react';\nimport { memo } from 'react';\n\nimport { useTimeZone } from '../context/TimeZoneProvider';\nimport {\n  TOOLTIP_BG_COLOR_FALLBACK,\n  TOOLTIP_MAX_WIDTH,\n  PIN_TOOLTIP_HELP_TEXT,\n  UNPIN_TOOLTIP_HELP_TEXT,\n} from './tooltip-model';\nimport type { NearbySeriesArray } from './types';\n\nexport interface TooltipHeaderProps {\n  nearbySeries: NearbySeriesArray;\n  totalSeries: number;\n  isTooltipPinned: boolean;\n  showAllSeries: boolean;\n  enablePinning?: boolean;\n  onShowAllClick?: (checked: boolean) => void;\n  onUnpinClick?: () => void;\n}\n\nexport const TooltipHeader = memo(function TooltipHeader({\n  nearbySeries,\n  totalSeries,\n  isTooltipPinned,\n  showAllSeries,\n  enablePinning = true,\n  onShowAllClick,\n  onUnpinClick,\n}: TooltipHeaderProps) {\n  const { formatWithUserTimeZone } = useTimeZone();\n  const seriesTimeMs = nearbySeries[0]?.date ?? null;\n  if (seriesTimeMs === null) {\n    return null;\n  }\n\n  const formatTimeSeriesHeader = (timeMs: number): ReactElement => {\n    const date = new Date(timeMs);\n    const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');\n    const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');\n    return (\n      <Box>\n        <Typography\n          variant=\"caption\"\n          sx={(theme) => ({\n            color: theme.palette.common.white,\n          })}\n        >\n          {formattedDate}\n        </Typography>\n        <Typography variant=\"caption\">\n          <strong>{formattedTime}</strong>\n        </Typography>\n      </Box>\n    );\n  };\n\n  // TODO: accurately calc whether more series are outside scrollable region using yBuffer, avg series name length, TOOLTIP_MAX_HEIGHT\n  const showAllSeriesToggle = enablePinning && totalSeries > 5;\n\n  const pinTooltipHelpText = isTooltipPinned ? UNPIN_TOOLTIP_HELP_TEXT : PIN_TOOLTIP_HELP_TEXT;\n\n  return (\n    <Box\n      sx={(theme) => ({\n        width: '100%',\n        maxWidth: TOOLTIP_MAX_WIDTH,\n        padding: theme.spacing(1.5, 2, 0.5, 2),\n        backgroundColor: theme.palette.designSystem?.grey[800] ?? TOOLTIP_BG_COLOR_FALLBACK,\n        position: 'sticky',\n        top: 0,\n        left: 0,\n      })}\n    >\n      <Box\n        sx={{\n          width: '100%',\n          display: 'flex',\n          justifyContent: 'start',\n          alignItems: 'center',\n          paddingBottom: 0.5,\n        }}\n      >\n        {formatTimeSeriesHeader(seriesTimeMs)}\n        <Stack direction=\"row\" gap={1} sx={{ marginLeft: 'auto' }}>\n          {showAllSeriesToggle && (\n            <Stack direction=\"row\" gap={0.5} alignItems=\"center\" sx={{ textAlign: 'right' }}>\n              <Typography sx={{ fontSize: 11 }}>Show All</Typography>\n              <Switch\n                checked={showAllSeries}\n                size=\"small\"\n                onChange={(_, checked) => {\n                  if (onShowAllClick !== undefined) {\n                    return onShowAllClick(checked);\n                  }\n                }}\n                sx={(theme) => ({\n                  '& .MuiSwitch-switchBase': {\n                    color: theme.palette.common.white,\n                  },\n                  '& .MuiSwitch-track': {\n                    backgroundColor: theme.palette.common.white,\n                  },\n                })}\n              />\n            </Stack>\n          )}\n          {enablePinning && (\n            <Stack direction=\"row\" alignItems=\"center\">\n              <Typography\n                sx={{\n                  marginRight: 0.5,\n                  fontSize: 11,\n                  verticalAlign: 'middle',\n                }}\n              >\n                {pinTooltipHelpText}\n              </Typography>\n              {isTooltipPinned ? (\n                <Pin\n                  onClick={() => {\n                    if (onUnpinClick !== undefined) {\n                      onUnpinClick();\n                    }\n                  }}\n                  sx={{\n                    fontSize: 16,\n                    cursor: 'pointer',\n                  }}\n                />\n              ) : (\n                <PinOutline sx={{ fontSize: 16 }} />\n              )}\n            </Stack>\n          )}\n        </Stack>\n      </Box>\n      <Divider\n        sx={(theme) => ({\n          width: '100%',\n          borderColor: theme.palette.grey['500'],\n        })}\n      />\n    </Box>\n  );\n});\n"],"names":["Box","Divider","Typography","Stack","Switch","Pin","PinOutline","memo","useTimeZone","TOOLTIP_BG_COLOR_FALLBACK","TOOLTIP_MAX_WIDTH","PIN_TOOLTIP_HELP_TEXT","UNPIN_TOOLTIP_HELP_TEXT","TooltipHeader","nearbySeries","totalSeries","isTooltipPinned","showAllSeries","enablePinning","onShowAllClick","onUnpinClick","formatWithUserTimeZone","seriesTimeMs","date","formatTimeSeriesHeader","timeMs","Date","formattedDate","formattedTime","variant","sx","theme","color","palette","common","white","strong","showAllSeriesToggle","pinTooltipHelpText","width","maxWidth","padding","spacing","backgroundColor","designSystem","grey","position","top","left","display","justifyContent","alignItems","paddingBottom","direction","gap","marginLeft","textAlign","fontSize","checked","size","onChange","_","undefined","marginRight","verticalAlign","onClick","cursor","borderColor"],"mappings":"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"}