@perses-dev/timeseries-chart-plugin 0.13.0 → 0.14.0-beta.2

package/lib/QuerySettingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuerySettingsEditor.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 {\n  Box,\n  Button,\n  IconButton,\n  Menu,\n  MenuItem,\n  Slider,\n  Stack,\n  Switch,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport { FormatControls, FormatOptions, OptionsColorPicker } from '@perses-dev/components';\nimport React, { ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { produce } from 'immer';\nimport { generateQueryNames, useDataQueriesContext } from '@perses-dev/plugin-system';\nimport {\n  DEFAULT_AREA_OPACITY,\n  LINE_STYLE_CONFIG,\n  OPACITY_CONFIG,\n  QuerySettingsOptions,\n  TimeSeriesChartOptions,\n  TimeSeriesChartOptionsEditorProps,\n} from './time-series-chart-model';\n\nconst DEFAULT_COLOR_VALUE = '#555';\nconst NO_INDEX_AVAILABLE = -1; // invalid array index value used to represent the fact that no query index is available\n\nexport function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const querySettingsList = value.querySettings;\n\n  const handleQuerySettingsChange = (newQuerySettings: QuerySettingsOptions[]): void => {\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.querySettings = newQuerySettings;\n      })\n    );\n  };\n  // Every time a new query settings input is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [querySettingsList?.length]);\n\n  const handleQueryIndexChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const querySettings = draft?.[i];\n          if (querySettings) {\n            querySettings.queryIndex = parseInt(e.target.value);\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorModeChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              const newColorMode = e.target.value;\n              if (!newColorMode) {\n                querySettings.colorMode = undefined;\n                querySettings.colorValue = undefined;\n              } else {\n                querySettings.colorMode = newColorMode as QuerySettingsOptions['colorMode'];\n              }\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorValueChange = (colorValue: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.colorValue = colorValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleLineStyleChange = (lineStyle: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.lineStyle = lineStyle as QuerySettingsOptions['lineStyle'];\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[], i: number): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.areaOpacity = newValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  // Helper function to update query settings at a specific index\n  const updateQuerySettings = (i: number, updater: (qs: QuerySettingsOptions) => void): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const qs = draft[i];\n          if (qs) {\n            updater(qs);\n          }\n        })\n      );\n    }\n  };\n\n  const deleteQuerySettingsInput = (i: number): void => {\n    if (querySettingsList !== undefined) {\n      const updatedQuerySettingsList = produce(querySettingsList, (draft) => {\n        draft.splice(i, 1);\n      });\n      handleQuerySettingsChange(updatedQuerySettingsList);\n    }\n  };\n\n  const addColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = 'fixed';\n      qs.colorValue = DEFAULT_COLOR_VALUE;\n    });\n  };\n\n  const removeColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = undefined;\n      qs.colorValue = undefined;\n    });\n  };\n\n  const addLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = 'solid';\n    });\n  };\n\n  const removeLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = undefined;\n    });\n  };\n\n  const addAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = DEFAULT_AREA_OPACITY;\n    });\n  };\n\n  const removeAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = undefined;\n    });\n  };\n\n  const addFormat = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = { unit: 'decimal', shortValues: true };\n    });\n  };\n\n  const removeFormat = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = undefined;\n    });\n  };\n\n  const addStack = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = false;\n    });\n  };\n\n  const removeStack = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = undefined;\n    });\n  };\n\n  const handleStackChange = (i: number, checked: boolean): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = checked;\n    });\n  };\n\n  const handleFormatChange = (i: number, format?: FormatOptions): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = format;\n    });\n  };\n\n  const addNegativeY = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.negativeY = true;\n    });\n  };\n\n  const removeNegativeY = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.negativeY = undefined;\n    });\n  };\n\n  const { queryDefinitions } = useDataQueriesContext();\n  const queryCount = queryDefinitions.length;\n  const queryNames = useMemo(() => generateQueryNames(queryDefinitions), [queryDefinitions]);\n\n  // Compute the list of query indexes for which query settings are not already defined.\n  // This is to avoid already-booked indexes to still be selectable in the dropdown(s)\n  const availableQueryIndexes = useMemo(() => {\n    const bookedQueryIndexes = querySettingsList?.map((querySettings) => querySettings.queryIndex) ?? [];\n    const allQueryIndexes = Array.from({ length: queryCount }, (_, i) => i);\n    return allQueryIndexes.filter((_, queryIndex) => !bookedQueryIndexes.includes(queryIndex));\n  }, [querySettingsList, queryCount]);\n\n  const firstAvailableQueryIndex = useMemo(() => {\n    return availableQueryIndexes[0] ?? NO_INDEX_AVAILABLE;\n  }, [availableQueryIndexes]);\n\n  const defaultQuerySettings: QuerySettingsOptions = {\n    queryIndex: firstAvailableQueryIndex,\n  };\n\n  const addQuerySettingsInput = (): void => {\n    focusRef.current = true;\n    if (querySettingsList === undefined) {\n      handleQuerySettingsChange([defaultQuerySettings]);\n    } else {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          draft.push(defaultQuerySettings);\n        })\n      );\n    }\n  };\n\n  return (\n    <Stack>\n      {queryCount === 0 ? (\n        <Typography mb={2} fontStyle=\"italic\">\n          No query defined\n        </Typography>\n      ) : (\n        querySettingsList?.map((querySettings, i) => (\n          <QuerySettingsInput\n            inputRef={i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined}\n            key={i}\n            querySettings={querySettings}\n            availableQueryIndexes={availableQueryIndexes}\n            queryNames={queryNames}\n            onQueryIndexChange={(e) => {\n              handleQueryIndexChange(e, i);\n            }}\n            onColorModeChange={(e) => handleColorModeChange(e, i)}\n            onColorValueChange={(color) => handleColorValueChange(color, i)}\n            onLineStyleChange={(lineStyle) => handleLineStyleChange(lineStyle, i)}\n            onAreaOpacityChange={(event, value) => handleAreaOpacityChange(event, value, i)}\n            onDelete={() => {\n              deleteQuerySettingsInput(i);\n            }}\n            onAddColor={() => addColor(i)}\n            onRemoveColor={() => removeColor(i)}\n            onAddLineStyle={() => addLineStyle(i)}\n            onRemoveLineStyle={() => removeLineStyle(i)}\n            onAddAreaOpacity={() => addAreaOpacity(i)}\n            onRemoveAreaOpacity={() => removeAreaOpacity(i)}\n            onAddFormat={() => addFormat(i)}\n            onRemoveFormat={() => removeFormat(i)}\n            onFormatChange={(format) => handleFormatChange(i, format)}\n            onAddNegativeY={() => addNegativeY(i)}\n            onRemoveNegativeY={() => removeNegativeY(i)}\n            onAddStack={() => addStack(i)}\n            onRemoveStack={() => removeStack(i)}\n            onStackChange={(checked) => handleStackChange(i, checked)}\n          />\n        ))\n      )}\n      {queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && (\n        <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={addQuerySettingsInput}>\n          Add Query Settings\n        </Button>\n      )}\n    </Stack>\n  );\n}\n\ninterface QuerySettingsInputProps {\n  querySettings: QuerySettingsOptions;\n  availableQueryIndexes: number[];\n  queryNames: string[];\n  onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorValueChange: (colorValue: string) => void;\n  onLineStyleChange: (lineStyle: string) => void;\n  onAreaOpacityChange: (event: Event, value: number | number[]) => void;\n  onDelete: () => void;\n  inputRef?: React.RefObject<HTMLInputElement | null>;\n  // Optional control handlers\n  onAddColor: () => void;\n  onRemoveColor: () => void;\n  onAddLineStyle: () => void;\n  onRemoveLineStyle: () => void;\n  onAddAreaOpacity: () => void;\n  onRemoveAreaOpacity: () => void;\n  onAddFormat: () => void;\n  onRemoveFormat: () => void;\n  onFormatChange: (format?: FormatOptions) => void;\n  onAddNegativeY: () => void;\n  onRemoveNegativeY: () => void;\n  onAddStack: () => void;\n  onRemoveStack: () => void;\n  onStackChange: (checked: boolean) => void;\n}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format, negativeY, stack },\n  availableQueryIndexes,\n  queryNames,\n  onQueryIndexChange,\n  onColorModeChange,\n  onColorValueChange,\n  onLineStyleChange,\n  onAreaOpacityChange,\n  onDelete,\n  inputRef,\n  onAddColor: onAddColor,\n  onRemoveColor: onRemoveColor,\n  onAddLineStyle,\n  onRemoveLineStyle,\n  onAddAreaOpacity,\n  onRemoveAreaOpacity,\n  onAddFormat,\n  onRemoveFormat,\n  onFormatChange,\n  onAddNegativeY,\n  onRemoveNegativeY,\n  onAddStack,\n  onRemoveStack,\n  onStackChange,\n}: QuerySettingsInputProps): ReactElement {\n  // current query index should also be selectable\n  const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b) => a - b);\n\n  // State for dropdown menu\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  // Calculate available options\n  const availableOptions = useMemo(() => {\n    const options = [];\n    if (!colorMode) options.push({ key: 'color', label: 'Color', action: onAddColor });\n    if (!lineStyle) options.push({ key: 'lineStyle', label: 'Line Style', action: onAddLineStyle });\n    if (areaOpacity === undefined) options.push({ key: 'opacity', label: 'Opacity', action: onAddAreaOpacity });\n    if (format === undefined) options.push({ key: 'format', label: 'Format', action: onAddFormat });\n    if (!negativeY) options.push({ key: 'negativeY', label: 'Negative Y', action: onAddNegativeY });\n    if (stack === undefined) options.push({ key: 'stack', label: 'Stack', action: onAddStack });\n    return options;\n  }, [\n    colorMode,\n    lineStyle,\n    areaOpacity,\n    format,\n    negativeY,\n    stack,\n    onAddColor,\n    onAddLineStyle,\n    onAddAreaOpacity,\n    onAddFormat,\n    onAddNegativeY,\n    onAddStack,\n  ]);\n\n  const handleAddMenuClick = (event: React.MouseEvent<HTMLElement>): void => {\n    if (availableOptions.length === 1 && availableOptions[0]) {\n      // If only one option left, add it directly\n      availableOptions[0].action();\n    } else {\n      // Show dropdown\n      setAnchorEl(event.currentTarget);\n    }\n  };\n\n  const handleMenuClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const handleMenuItemClick = (action: () => void): void => {\n    action();\n    handleMenuClose();\n  };\n\n  return (\n    <Stack\n      sx={{\n        borderBottom: '1px solid',\n        borderColor: 'divider',\n        borderRadius: 1,\n        p: 2,\n        display: 'flex',\n        flexWrap: 'nowrap',\n        flexDirection: 'row',\n      }}\n    >\n      <Stack direction=\"row\" alignItems=\"center\" sx={{ flexWrap: 'wrap', gap: 2, flexGrow: 1 }}>\n        {/* Query Index Selection */}\n        <TextField\n          select\n          inputRef={inputRef}\n          value={queryIndex}\n          label=\"Query\"\n          onChange={onQueryIndexChange}\n          sx={{ minWidth: '75px' }}\n        >\n          {selectableQueryIndexes.map((qi) => (\n            <MenuItem key={`query-${qi}`} value={qi}>\n              {queryNames[qi] ?? `#${qi + 1}`}\n            </MenuItem>\n          ))}\n        </TextField>\n\n        {/* Color section */}\n        {colorMode && (\n          <SettingsSection label=\"Color\" onRemove={onRemoveColor}>\n            <TextField select value={colorMode} onChange={onColorModeChange} size=\"small\" sx={{ flexGrow: 1 }}>\n              <MenuItem value=\"fixed\">Fixed</MenuItem>\n              <MenuItem value=\"fixed-single\">Fixed (single series)</MenuItem>\n            </TextField>\n            <OptionsColorPicker\n              label={queryNames[queryIndex] ?? `Query n°${queryIndex + 1}`}\n              color={colorValue || DEFAULT_COLOR_VALUE}\n              onColorChange={onColorValueChange}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Line Style section */}\n        {lineStyle && (\n          <SettingsSection label=\"Line Style\" onRemove={onRemoveLineStyle}>\n            <ToggleButtonGroup\n              color=\"primary\"\n              exclusive\n              value={lineStyle}\n              onChange={(__, newValue) => {\n                if (newValue !== null) {\n                  onLineStyleChange(newValue);\n                }\n              }}\n              size=\"small\"\n            >\n              {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                  {config.label}\n                </ToggleButton>\n              ))}\n            </ToggleButtonGroup>\n            {/* Spacer to push delete button to the right */}\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Area Opacity section */}\n        {areaOpacity !== undefined && (\n          <SettingsSection label=\"Opacity\" onRemove={onRemoveAreaOpacity}>\n            {/* Spacer as I don't want to add a prop to SettingsSection for left-padding just for that case.. */}\n            <Box />\n            <Slider\n              value={areaOpacity}\n              valueLabelDisplay=\"auto\"\n              step={OPACITY_CONFIG.step}\n              marks\n              min={OPACITY_CONFIG.min}\n              max={OPACITY_CONFIG.max}\n              onChange={onAreaOpacityChange}\n              sx={{ flexGrow: 1 }}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Format section */}\n        {format !== undefined && (\n          <SettingsSection label=\"Format\" onRemove={onRemoveFormat}>\n            <Box sx={{ minWidth: '180px', display: 'flex', gap: 1, flexDirection: 'column' }}>\n              <FormatControls value={format} onChange={onFormatChange} />\n            </Box>\n          </SettingsSection>\n        )}\n\n        {/* Negative Y section (presence-only flag) */}\n        {negativeY && (\n          <SettingsSection label=\"Negative Y\" onRemove={onRemoveNegativeY}>\n            <Typography variant=\"body2\" color=\"text.secondary\" sx={{ flexGrow: 1, py: 0.5 }}>\n              Series rendered below the X axis\n            </Typography>\n          </SettingsSection>\n        )}\n\n        {/* Stack section */}\n        {stack !== undefined && (\n          <SettingsSection label=\"Stack\" onRemove={onRemoveStack}>\n            <Switch\n              checked={stack}\n              onChange={(e) => onStackChange(e.target.checked)}\n              slotProps={{ input: { 'aria-label': 'stack override' } }}\n            />\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Add Options Button - only show if there are available options */}\n        {availableOptions.length > 0 && (\n          <>\n            <IconButton onClick={handleAddMenuClick} aria-label=\"Add option\">\n              <AddIcon />\n            </IconButton>\n\n            {/* Dropdown Menu */}\n            <Menu\n              anchorEl={anchorEl}\n              open={Boolean(anchorEl)}\n              onClose={handleMenuClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'left',\n              }}\n            >\n              {availableOptions.map((option) => (\n                <MenuItem\n                  key={option.key}\n                  onClick={() => handleMenuItemClick(option.action)}\n                  sx={{ minWidth: '120px' }}\n                >\n                  <AddIcon sx={{ mr: 1, fontSize: '1rem' }} />\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Menu>\n          </>\n        )}\n      </Stack>\n      {/* Delete Button for this query settings */}\n      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n        <IconButton\n          aria-label={`delete settings for ${queryNames[queryIndex] ?? `query n°${queryIndex + 1}`}`}\n          onClick={onDelete}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Box>\n    </Stack>\n  );\n}\n\ninterface SettingsSectionProps {\n  label: string;\n  children: React.ReactNode;\n  onRemove: () => void;\n}\n\n// Reusable section component\nfunction SettingsSection(props: SettingsSectionProps): ReactElement {\n  const { label, children, onRemove } = props;\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'relative', minWidth: '250px' }}>\n      <Typography\n        variant=\"caption\"\n        sx={{\n          position: 'absolute',\n          top: -8,\n          left: 12,\n          backgroundColor: theme.palette.background.code,\n          px: 0.5,\n          color: 'text.secondary',\n          zIndex: 1,\n        }}\n      >\n        {label}\n      </Typography>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        spacing={1}\n        sx={{\n          border: '1px solid',\n          borderColor: 'divider',\n          borderRadius: 1,\n          p: 1,\n        }}\n      >\n        {children}\n        <IconButton size=\"small\" onClick={onRemove} aria-label={`Remove ${label}`}>\n          <CloseIcon />\n        </IconButton>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["Box","Button","IconButton","Menu","MenuItem","Slider","Stack","Switch","TextField","ToggleButton","ToggleButtonGroup","Typography","useTheme","FormatControls","OptionsColorPicker","React","useEffect","useMemo","useRef","useState","DeleteIcon","AddIcon","CloseIcon","produce","generateQueryNames","useDataQueriesContext","DEFAULT_AREA_OPACITY","LINE_STYLE_CONFIG","OPACITY_CONFIG","DEFAULT_COLOR_VALUE","NO_INDEX_AVAILABLE","QuerySettingsEditor","props","onChange","value","querySettingsList","querySettings","handleQuerySettingsChange","newQuerySettings","draft","recentlyAddedInputRef","focusRef","current","focus","length","handleQueryIndexChange","e","i","undefined","queryIndex","parseInt","target","handleColorModeChange","newColorMode","colorMode","colorValue","handleColorValueChange","handleLineStyleChange","lineStyle","handleAreaOpacityChange","_","sliderValue","newValue","Array","isArray","areaOpacity","updateQuerySettings","updater","qs","deleteQuerySettingsInput","updatedQuerySettingsList","splice","addColor","removeColor","addLineStyle","removeLineStyle","addAreaOpacity","removeAreaOpacity","addFormat","format","unit","shortValues","removeFormat","addStack","stack","removeStack","handleStackChange","checked","handleFormatChange","addNegativeY","negativeY","removeNegativeY","queryDefinitions","queryCount","queryNames","availableQueryIndexes","bookedQueryIndexes","map","allQueryIndexes","from","filter","includes","firstAvailableQueryIndex","defaultQuerySettings","addQuerySettingsInput","push","mb","fontStyle","QuerySettingsInput","inputRef","onQueryIndexChange","onColorModeChange","onColorValueChange","color","onLineStyleChange","onAreaOpacityChange","event","onDelete","onAddColor","onRemoveColor","onAddLineStyle","onRemoveLineStyle","onAddAreaOpacity","onRemoveAreaOpacity","onAddFormat","onRemoveFormat","onFormatChange","onAddNegativeY","onRemoveNegativeY","onAddStack","onRemoveStack","onStackChange","variant","startIcon","sx","marginTop","onClick","selectableQueryIndexes","concat","sort","a","b","anchorEl","setAnchorEl","availableOptions","options","key","label","action","handleAddMenuClick","currentTarget","handleMenuClose","handleMenuItemClick","borderBottom","borderColor","borderRadius","p","display","flexWrap","flexDirection","direction","alignItems","gap","flexGrow","select","minWidth","qi","SettingsSection","onRemove","size","onColorChange","exclusive","__","Object","entries","styleValue","config","aria-label","valueLabelDisplay","step","marks","min","max","py","slotProps","input","open","Boolean","onClose","anchorOrigin","vertical","horizontal","option","mr","fontSize","justifyContent","children","theme","position","top","left","backgroundColor","palette","background","code","px","zIndex","spacing","border"],"mappings":"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"}
+{"version":3,"sources":["../../src/QuerySettingsEditor.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 {\n  Box,\n  Button,\n  IconButton,\n  Menu,\n  MenuItem,\n  Slider,\n  Stack,\n  Switch,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport type { FormatOptions } from '@perses-dev/components';\nimport { FormatControls, OptionsColorPicker } from '@perses-dev/components';\nimport { generateQueryNames, useDataQueriesContext } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\n\nimport type {\n  QuerySettingsOptions,\n  TimeSeriesChartOptions,\n  TimeSeriesChartOptionsEditorProps,\n} from './time-series-chart-model';\nimport { DEFAULT_AREA_OPACITY, LINE_STYLE_CONFIG, OPACITY_CONFIG } from './time-series-chart-model';\n\nconst DEFAULT_COLOR_VALUE = '#555';\nconst NO_INDEX_AVAILABLE = -1; // invalid array index value used to represent the fact that no query index is available\n\nexport function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const querySettingsList = value.querySettings;\n\n  const handleQuerySettingsChange = (newQuerySettings: QuerySettingsOptions[]): void => {\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.querySettings = newQuerySettings;\n      }),\n    );\n  };\n  // Every time a new query settings input is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [querySettingsList?.length]);\n\n  const handleQueryIndexChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const querySettings = draft?.[i];\n          if (querySettings) {\n            querySettings.queryIndex = parseInt(e.target.value);\n          }\n        }),\n      );\n    }\n  };\n\n  const handleColorModeChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              const newColorMode = e.target.value;\n              if (!newColorMode) {\n                querySettings.colorMode = undefined;\n                querySettings.colorValue = undefined;\n              } else {\n                querySettings.colorMode = newColorMode as QuerySettingsOptions['colorMode'];\n              }\n            }\n          }\n        }),\n      );\n    }\n  };\n\n  const handleColorValueChange = (colorValue: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.colorValue = colorValue;\n            }\n          }\n        }),\n      );\n    }\n  };\n\n  const handleLineStyleChange = (lineStyle: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.lineStyle = lineStyle as QuerySettingsOptions['lineStyle'];\n            }\n          }\n        }),\n      );\n    }\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[], i: number): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.areaOpacity = newValue;\n            }\n          }\n        }),\n      );\n    }\n  };\n\n  // Helper function to update query settings at a specific index\n  const updateQuerySettings = (i: number, updater: (qs: QuerySettingsOptions) => void): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const qs = draft[i];\n          if (qs) {\n            updater(qs);\n          }\n        }),\n      );\n    }\n  };\n\n  const deleteQuerySettingsInput = (i: number): void => {\n    if (querySettingsList !== undefined) {\n      const updatedQuerySettingsList = produce(querySettingsList, (draft) => {\n        draft.splice(i, 1);\n      });\n      handleQuerySettingsChange(updatedQuerySettingsList);\n    }\n  };\n\n  const addColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = 'fixed';\n      qs.colorValue = DEFAULT_COLOR_VALUE;\n    });\n  };\n\n  const removeColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = undefined;\n      qs.colorValue = undefined;\n    });\n  };\n\n  const addLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = 'solid';\n    });\n  };\n\n  const removeLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = undefined;\n    });\n  };\n\n  const addAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = DEFAULT_AREA_OPACITY;\n    });\n  };\n\n  const removeAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = undefined;\n    });\n  };\n\n  const addFormat = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = { unit: 'decimal', shortValues: true };\n    });\n  };\n\n  const removeFormat = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = undefined;\n    });\n  };\n\n  const addStack = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = false;\n    });\n  };\n\n  const removeStack = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = undefined;\n    });\n  };\n\n  const handleStackChange = (i: number, checked: boolean): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = checked;\n    });\n  };\n\n  const handleFormatChange = (i: number, format?: FormatOptions): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = format;\n    });\n  };\n\n  const addNegativeY = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.negativeY = true;\n    });\n  };\n\n  const removeNegativeY = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.negativeY = undefined;\n    });\n  };\n\n  const { queryDefinitions } = useDataQueriesContext();\n  const queryCount = queryDefinitions.length;\n  const queryNames = useMemo(() => generateQueryNames(queryDefinitions), [queryDefinitions]);\n\n  // Compute the list of query indexes for which query settings are not already defined.\n  // This is to avoid already-booked indexes to still be selectable in the dropdown(s)\n  const availableQueryIndexes = useMemo(() => {\n    const bookedQueryIndexes = querySettingsList?.map((querySettings) => querySettings.queryIndex) ?? [];\n    const allQueryIndexes = Array.from({ length: queryCount }, (_, i) => i);\n    return allQueryIndexes.filter((_, queryIndex) => !bookedQueryIndexes.includes(queryIndex));\n  }, [querySettingsList, queryCount]);\n\n  const firstAvailableQueryIndex = useMemo(() => {\n    return availableQueryIndexes[0] ?? NO_INDEX_AVAILABLE;\n  }, [availableQueryIndexes]);\n\n  const defaultQuerySettings: QuerySettingsOptions = {\n    queryIndex: firstAvailableQueryIndex,\n  };\n\n  const addQuerySettingsInput = (): void => {\n    focusRef.current = true;\n    if (querySettingsList === undefined) {\n      handleQuerySettingsChange([defaultQuerySettings]);\n    } else {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          draft.push(defaultQuerySettings);\n        }),\n      );\n    }\n  };\n\n  return (\n    <Stack>\n      {queryCount === 0 ? (\n        <Typography mb={2} fontStyle=\"italic\">\n          No query defined\n        </Typography>\n      ) : (\n        querySettingsList?.map((querySettings, i) => (\n          <QuerySettingsInput\n            inputRef={i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined}\n            key={i}\n            querySettings={querySettings}\n            availableQueryIndexes={availableQueryIndexes}\n            queryNames={queryNames}\n            onQueryIndexChange={(e) => {\n              handleQueryIndexChange(e, i);\n            }}\n            onColorModeChange={(e) => handleColorModeChange(e, i)}\n            onColorValueChange={(color) => handleColorValueChange(color, i)}\n            onLineStyleChange={(lineStyle) => handleLineStyleChange(lineStyle, i)}\n            onAreaOpacityChange={(event, value) => handleAreaOpacityChange(event, value, i)}\n            onDelete={() => {\n              deleteQuerySettingsInput(i);\n            }}\n            onAddColor={() => addColor(i)}\n            onRemoveColor={() => removeColor(i)}\n            onAddLineStyle={() => addLineStyle(i)}\n            onRemoveLineStyle={() => removeLineStyle(i)}\n            onAddAreaOpacity={() => addAreaOpacity(i)}\n            onRemoveAreaOpacity={() => removeAreaOpacity(i)}\n            onAddFormat={() => addFormat(i)}\n            onRemoveFormat={() => removeFormat(i)}\n            onFormatChange={(format) => handleFormatChange(i, format)}\n            onAddNegativeY={() => addNegativeY(i)}\n            onRemoveNegativeY={() => removeNegativeY(i)}\n            onAddStack={() => addStack(i)}\n            onRemoveStack={() => removeStack(i)}\n            onStackChange={(checked) => handleStackChange(i, checked)}\n          />\n        ))\n      )}\n      {queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && (\n        <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={addQuerySettingsInput}>\n          Add Query Settings\n        </Button>\n      )}\n    </Stack>\n  );\n}\n\ninterface QuerySettingsInputProps {\n  querySettings: QuerySettingsOptions;\n  availableQueryIndexes: number[];\n  queryNames: string[];\n  onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorValueChange: (colorValue: string) => void;\n  onLineStyleChange: (lineStyle: string) => void;\n  onAreaOpacityChange: (event: Event, value: number | number[]) => void;\n  onDelete: () => void;\n  inputRef?: React.RefObject<HTMLInputElement | null>;\n  // Optional control handlers\n  onAddColor: () => void;\n  onRemoveColor: () => void;\n  onAddLineStyle: () => void;\n  onRemoveLineStyle: () => void;\n  onAddAreaOpacity: () => void;\n  onRemoveAreaOpacity: () => void;\n  onAddFormat: () => void;\n  onRemoveFormat: () => void;\n  onFormatChange: (format?: FormatOptions) => void;\n  onAddNegativeY: () => void;\n  onRemoveNegativeY: () => void;\n  onAddStack: () => void;\n  onRemoveStack: () => void;\n  onStackChange: (checked: boolean) => void;\n}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format, negativeY, stack },\n  availableQueryIndexes,\n  queryNames,\n  onQueryIndexChange,\n  onColorModeChange,\n  onColorValueChange,\n  onLineStyleChange,\n  onAreaOpacityChange,\n  onDelete,\n  inputRef,\n  onAddColor,\n  onRemoveColor,\n  onAddLineStyle,\n  onRemoveLineStyle,\n  onAddAreaOpacity,\n  onRemoveAreaOpacity,\n  onAddFormat,\n  onRemoveFormat,\n  onFormatChange,\n  onAddNegativeY,\n  onRemoveNegativeY,\n  onAddStack,\n  onRemoveStack,\n  onStackChange,\n}: QuerySettingsInputProps): ReactElement {\n  // current query index should also be selectable\n  const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).toSorted((a, b) => a - b);\n\n  // State for dropdown menu\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  // Calculate available options\n  const availableOptions = useMemo(() => {\n    const options = [];\n    if (!colorMode) options.push({ key: 'color', label: 'Color', action: onAddColor });\n    if (!lineStyle) options.push({ key: 'lineStyle', label: 'Line Style', action: onAddLineStyle });\n    if (areaOpacity === undefined) options.push({ key: 'opacity', label: 'Opacity', action: onAddAreaOpacity });\n    if (format === undefined) options.push({ key: 'format', label: 'Format', action: onAddFormat });\n    if (!negativeY) options.push({ key: 'negativeY', label: 'Negative Y', action: onAddNegativeY });\n    if (stack === undefined) options.push({ key: 'stack', label: 'Stack', action: onAddStack });\n    return options;\n  }, [\n    colorMode,\n    lineStyle,\n    areaOpacity,\n    format,\n    negativeY,\n    stack,\n    onAddColor,\n    onAddLineStyle,\n    onAddAreaOpacity,\n    onAddFormat,\n    onAddNegativeY,\n    onAddStack,\n  ]);\n\n  const handleAddMenuClick = (event: React.MouseEvent<HTMLElement>): void => {\n    if (availableOptions.length === 1 && availableOptions[0]) {\n      // If only one option left, add it directly\n      availableOptions[0].action();\n    } else {\n      // Show dropdown\n      setAnchorEl(event.currentTarget);\n    }\n  };\n\n  const handleMenuClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const handleMenuItemClick = (action: () => void): void => {\n    action();\n    handleMenuClose();\n  };\n\n  return (\n    <Stack\n      sx={{\n        borderBottom: '1px solid',\n        borderColor: 'divider',\n        borderRadius: 1,\n        p: 2,\n        display: 'flex',\n        flexWrap: 'nowrap',\n        flexDirection: 'row',\n      }}\n    >\n      <Stack direction=\"row\" alignItems=\"center\" sx={{ flexWrap: 'wrap', gap: 2, flexGrow: 1 }}>\n        {/* Query Index Selection */}\n        <TextField\n          select\n          inputRef={inputRef}\n          value={queryIndex}\n          label=\"Query\"\n          onChange={onQueryIndexChange}\n          sx={{ minWidth: '75px' }}\n        >\n          {selectableQueryIndexes.map((qi) => (\n            <MenuItem key={`query-${qi}`} value={qi}>\n              {queryNames[qi] ?? `#${qi + 1}`}\n            </MenuItem>\n          ))}\n        </TextField>\n\n        {/* Color section */}\n        {colorMode && (\n          <SettingsSection label=\"Color\" onRemove={onRemoveColor}>\n            <TextField select value={colorMode} onChange={onColorModeChange} size=\"small\" sx={{ flexGrow: 1 }}>\n              <MenuItem value=\"fixed\">Fixed</MenuItem>\n              <MenuItem value=\"fixed-single\">Fixed (single series)</MenuItem>\n            </TextField>\n            <OptionsColorPicker\n              label={queryNames[queryIndex] ?? `Query n°${queryIndex + 1}`}\n              color={colorValue || DEFAULT_COLOR_VALUE}\n              onColorChange={onColorValueChange}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Line Style section */}\n        {lineStyle && (\n          <SettingsSection label=\"Line Style\" onRemove={onRemoveLineStyle}>\n            <ToggleButtonGroup\n              color=\"primary\"\n              exclusive\n              value={lineStyle}\n              onChange={(__, newValue) => {\n                if (newValue !== null) {\n                  onLineStyleChange(newValue);\n                }\n              }}\n              size=\"small\"\n            >\n              {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                  {config.label}\n                </ToggleButton>\n              ))}\n            </ToggleButtonGroup>\n            {/* Spacer to push delete button to the right */}\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Area Opacity section */}\n        {areaOpacity !== undefined && (\n          <SettingsSection label=\"Opacity\" onRemove={onRemoveAreaOpacity}>\n            {/* Spacer as I don't want to add a prop to SettingsSection for left-padding just for that case.. */}\n            <Box />\n            <Slider\n              value={areaOpacity}\n              valueLabelDisplay=\"auto\"\n              step={OPACITY_CONFIG.step}\n              marks\n              min={OPACITY_CONFIG.min}\n              max={OPACITY_CONFIG.max}\n              onChange={onAreaOpacityChange}\n              sx={{ flexGrow: 1 }}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Format section */}\n        {format !== undefined && (\n          <SettingsSection label=\"Format\" onRemove={onRemoveFormat}>\n            <Box sx={{ minWidth: '180px', display: 'flex', gap: 1, flexDirection: 'column' }}>\n              <FormatControls value={format} onChange={onFormatChange} />\n            </Box>\n          </SettingsSection>\n        )}\n\n        {/* Negative Y section (presence-only flag) */}\n        {negativeY && (\n          <SettingsSection label=\"Negative Y\" onRemove={onRemoveNegativeY}>\n            <Typography variant=\"body2\" color=\"text.secondary\" sx={{ flexGrow: 1, py: 0.5 }}>\n              Series rendered below the X axis\n            </Typography>\n          </SettingsSection>\n        )}\n\n        {/* Stack section */}\n        {stack !== undefined && (\n          <SettingsSection label=\"Stack\" onRemove={onRemoveStack}>\n            <Switch\n              checked={stack}\n              onChange={(e) => onStackChange(e.target.checked)}\n              slotProps={{ input: { 'aria-label': 'stack override' } }}\n            />\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Add Options Button - only show if there are available options */}\n        {availableOptions.length > 0 && (\n          <>\n            <IconButton onClick={handleAddMenuClick} aria-label=\"Add option\">\n              <AddIcon />\n            </IconButton>\n\n            {/* Dropdown Menu */}\n            <Menu\n              anchorEl={anchorEl}\n              open={Boolean(anchorEl)}\n              onClose={handleMenuClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'left',\n              }}\n            >\n              {availableOptions.map((option) => (\n                <MenuItem\n                  key={option.key}\n                  onClick={() => handleMenuItemClick(option.action)}\n                  sx={{ minWidth: '120px' }}\n                >\n                  <AddIcon sx={{ mr: 1, fontSize: '1rem' }} />\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Menu>\n          </>\n        )}\n      </Stack>\n      {/* Delete Button for this query settings */}\n      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n        <IconButton\n          aria-label={`delete settings for ${queryNames[queryIndex] ?? `query n°${queryIndex + 1}`}`}\n          onClick={onDelete}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Box>\n    </Stack>\n  );\n}\n\ninterface SettingsSectionProps {\n  label: string;\n  children: React.ReactNode;\n  onRemove: () => void;\n}\n\n// Reusable section component\nfunction SettingsSection(props: SettingsSectionProps): ReactElement {\n  const { label, children, onRemove } = props;\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'relative', minWidth: '250px' }}>\n      <Typography\n        variant=\"caption\"\n        sx={{\n          position: 'absolute',\n          top: -8,\n          left: 12,\n          backgroundColor: theme.palette.background.code,\n          px: 0.5,\n          color: 'text.secondary',\n          zIndex: 1,\n        }}\n      >\n        {label}\n      </Typography>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        spacing={1}\n        sx={{\n          border: '1px solid',\n          borderColor: 'divider',\n          borderRadius: 1,\n          p: 1,\n        }}\n      >\n        {children}\n        <IconButton size=\"small\" onClick={onRemove} aria-label={`Remove ${label}`}>\n          <CloseIcon />\n        </IconButton>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["Box","Button","IconButton","Menu","MenuItem","Slider","Stack","Switch","TextField","ToggleButton","ToggleButtonGroup","Typography","useTheme","FormatControls","OptionsColorPicker","generateQueryNames","useDataQueriesContext","produce","CloseIcon","DeleteIcon","AddIcon","React","useEffect","useMemo","useRef","useState","DEFAULT_AREA_OPACITY","LINE_STYLE_CONFIG","OPACITY_CONFIG","DEFAULT_COLOR_VALUE","NO_INDEX_AVAILABLE","QuerySettingsEditor","props","onChange","value","querySettingsList","querySettings","handleQuerySettingsChange","newQuerySettings","draft","recentlyAddedInputRef","focusRef","current","focus","length","handleQueryIndexChange","e","i","undefined","queryIndex","parseInt","target","handleColorModeChange","newColorMode","colorMode","colorValue","handleColorValueChange","handleLineStyleChange","lineStyle","handleAreaOpacityChange","_","sliderValue","newValue","Array","isArray","areaOpacity","updateQuerySettings","updater","qs","deleteQuerySettingsInput","updatedQuerySettingsList","splice","addColor","removeColor","addLineStyle","removeLineStyle","addAreaOpacity","removeAreaOpacity","addFormat","format","unit","shortValues","removeFormat","addStack","stack","removeStack","handleStackChange","checked","handleFormatChange","addNegativeY","negativeY","removeNegativeY","queryDefinitions","queryCount","queryNames","availableQueryIndexes","bookedQueryIndexes","map","allQueryIndexes","from","filter","includes","firstAvailableQueryIndex","defaultQuerySettings","addQuerySettingsInput","push","mb","fontStyle","QuerySettingsInput","inputRef","onQueryIndexChange","onColorModeChange","onColorValueChange","color","onLineStyleChange","onAreaOpacityChange","event","onDelete","onAddColor","onRemoveColor","onAddLineStyle","onRemoveLineStyle","onAddAreaOpacity","onRemoveAreaOpacity","onAddFormat","onRemoveFormat","onFormatChange","onAddNegativeY","onRemoveNegativeY","onAddStack","onRemoveStack","onStackChange","variant","startIcon","sx","marginTop","onClick","selectableQueryIndexes","concat","toSorted","a","b","anchorEl","setAnchorEl","availableOptions","options","key","label","action","handleAddMenuClick","currentTarget","handleMenuClose","handleMenuItemClick","borderBottom","borderColor","borderRadius","p","display","flexWrap","flexDirection","direction","alignItems","gap","flexGrow","select","minWidth","qi","SettingsSection","onRemove","size","onColorChange","exclusive","__","Object","entries","styleValue","config","aria-label","valueLabelDisplay","step","marks","min","max","py","slotProps","input","open","Boolean","onClose","anchorOrigin","vertical","horizontal","option","mr","fontSize","justifyContent","children","theme","position","top","left","backgroundColor","palette","background","code","px","zIndex","spacing","border"],"mappings":"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"}

package/lib/TimeSeriesChart.d.ts

@@ -1,5 +1,5 @@
-import { PanelPlugin } from '@perses-dev/plugin-system';
-import { TimeSeriesChartOptions } from './time-series-chart-model';
-import { TimeSeriesChartProps } from './TimeSeriesChartPanel';
+import type { PanelPlugin } from '@perses-dev/plugin-system';
+import type { TimeSeriesChartOptions } from './time-series-chart-model';
+import type { TimeSeriesChartProps } from './TimeSeriesChartPanel';
 export declare const TimeSeriesChart: PanelPlugin<TimeSeriesChartOptions, TimeSeriesChartProps>;
 //# sourceMappingURL=TimeSeriesChart.d.ts.map

package/lib/TimeSeriesChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesChart.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChart.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAuC,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAGxG,OAAO,EAAwB,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGpF,eAAO,MAAM,eAAe,EAAE,WAAW,CAAC,sBAAsB,EAAE,oBAAoB,CAcrF,CAAC"}
+{"version":3,"file":"TimeSeriesChart.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChart.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAI7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAInE,eAAO,MAAM,eAAe,EAAE,WAAW,CAAC,sBAAsB,EAAE,oBAAoB,CAerF,CAAC"}

package/lib/TimeSeriesChart.js

@@ -10,16 +10,17 @@
 // 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 { createInitialTimeSeriesChartOptions } from './time-series-chart-model';
-import { TimeSeriesChartGeneralSettings } from './GeneralSettingsEditor';
-import { QuerySettingsEditor } from './QuerySettingsEditor';
-import { TimeSeriesChartPanel } from './TimeSeriesChartPanel';
-import { TimeSeriesExportAction } from './TimeSeriesExportAction';
+import { TimeSeriesChartGeneralSettings } from "./GeneralSettingsEditor.js";
+import { QuerySettingsEditor } from "./QuerySettingsEditor.js";
+import { createInitialTimeSeriesChartOptions } from "./time-series-chart-model.js";
+import { TimeSeriesChartPanel } from "./TimeSeriesChartPanel.js";
+import { TimeSeriesExportAction } from "./TimeSeriesExportAction.js";
 export const TimeSeriesChart = {
     PanelComponent: TimeSeriesChartPanel,
     supportedQueryTypes: [
         'TimeSeriesQuery'
     ],
+    supportsAnnotations: true,
     panelOptionsEditorComponents: [
         {
             label: 'General Settings',

package/lib/TimeSeriesChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesChart.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 { PanelPlugin } from '@perses-dev/plugin-system';\nimport { createInitialTimeSeriesChartOptions, TimeSeriesChartOptions } from './time-series-chart-model';\nimport { TimeSeriesChartGeneralSettings } from './GeneralSettingsEditor';\nimport { QuerySettingsEditor } from './QuerySettingsEditor';\nimport { TimeSeriesChartPanel, TimeSeriesChartProps } from './TimeSeriesChartPanel';\nimport { TimeSeriesExportAction } from './TimeSeriesExportAction';\n\nexport const TimeSeriesChart: PanelPlugin<TimeSeriesChartOptions, TimeSeriesChartProps> = {\n  PanelComponent: TimeSeriesChartPanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  panelOptionsEditorComponents: [\n    { label: 'General Settings', content: TimeSeriesChartGeneralSettings },\n    { label: 'Query Settings', content: QuerySettingsEditor },\n  ],\n  createInitialOptions: createInitialTimeSeriesChartOptions,\n  actions: [\n    {\n      component: TimeSeriesExportAction,\n      location: 'header',\n    },\n  ],\n};\n"],"names":["createInitialTimeSeriesChartOptions","TimeSeriesChartGeneralSettings","QuerySettingsEditor","TimeSeriesChartPanel","TimeSeriesExportAction","TimeSeriesChart","PanelComponent","supportedQueryTypes","panelOptionsEditorComponents","label","content","createInitialOptions","actions","component","location"],"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,mCAAmC,QAAgC,4BAA4B;AACxG,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,oBAAoB,QAA8B,yBAAyB;AACpF,SAASC,sBAAsB,QAAQ,2BAA2B;AAElE,OAAO,MAAMC,kBAA6E;IACxFC,gBAAgBH;IAChBI,qBAAqB;QAAC;KAAkB;IACxCC,8BAA8B;QAC5B;YAAEC,OAAO;YAAoBC,SAAST;QAA+B;QACrE;YAAEQ,OAAO;YAAkBC,SAASR;QAAoB;KACzD;IACDS,sBAAsBX;IACtBY,SAAS;QACP;YACEC,WAAWT;YACXU,UAAU;QACZ;KACD;AACH,EAAE"}
+{"version":3,"sources":["../../src/TimeSeriesChart.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 { PanelPlugin } from '@perses-dev/plugin-system';\n\nimport { TimeSeriesChartGeneralSettings } from './GeneralSettingsEditor';\nimport { QuerySettingsEditor } from './QuerySettingsEditor';\nimport type { TimeSeriesChartOptions } from './time-series-chart-model';\nimport { createInitialTimeSeriesChartOptions } from './time-series-chart-model';\nimport type { TimeSeriesChartProps } from './TimeSeriesChartPanel';\nimport { TimeSeriesChartPanel } from './TimeSeriesChartPanel';\nimport { TimeSeriesExportAction } from './TimeSeriesExportAction';\n\nexport const TimeSeriesChart: PanelPlugin<TimeSeriesChartOptions, TimeSeriesChartProps> = {\n  PanelComponent: TimeSeriesChartPanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  supportsAnnotations: true,\n  panelOptionsEditorComponents: [\n    { label: 'General Settings', content: TimeSeriesChartGeneralSettings },\n    { label: 'Query Settings', content: QuerySettingsEditor },\n  ],\n  createInitialOptions: createInitialTimeSeriesChartOptions,\n  actions: [\n    {\n      component: TimeSeriesExportAction,\n      location: 'header',\n    },\n  ],\n};\n"],"names":["TimeSeriesChartGeneralSettings","QuerySettingsEditor","createInitialTimeSeriesChartOptions","TimeSeriesChartPanel","TimeSeriesExportAction","TimeSeriesChart","PanelComponent","supportedQueryTypes","supportsAnnotations","panelOptionsEditorComponents","label","content","createInitialOptions","actions","component","location"],"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;AAIjC,SAASA,8BAA8B,QAAQ,6BAA0B;AACzE,SAASC,mBAAmB,QAAQ,2BAAwB;AAE5D,SAASC,mCAAmC,QAAQ,+BAA4B;AAEhF,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,sBAAsB,QAAQ,8BAA2B;AAElE,OAAO,MAAMC,kBAA6E;IACxFC,gBAAgBH;IAChBI,qBAAqB;QAAC;KAAkB;IACxCC,qBAAqB;IACrBC,8BAA8B;QAC5B;YAAEC,OAAO;YAAoBC,SAASX;QAA+B;QACrE;YAAEU,OAAO;YAAkBC,SAASV;QAAoB;KACzD;IACDW,sBAAsBV;IACtBW,SAAS;QACP;YACEC,WAAWV;YACXW,UAAU;QACZ;KACD;AACH,EAAE"}

package/lib/TimeSeriesChartBase.d.ts

@@ -1,8 +1,8 @@
-import { MouseEvent } from 'react';
+import type { ChartInstance, FormatOptions, TimeChartSeriesMapping, TooltipConfig, ZoomEventData } from '@perses-dev/components';
+import type { TimeScale, TimeSeries } from '@perses-dev/spec';
 import type { EChartsCoreOption, GridComponentOption, YAXisComponentOption } from 'echarts';
-import { ChartInstance, FormatOptions, TimeChartSeriesMapping, TooltipConfig, ZoomEventData } from '@perses-dev/components';
-import { TimeScale, TimeSeries } from '@perses-dev/spec';
-import { TimeSeriesAnnotation } from './utils/annotation';
+import type { MouseEvent } from 'react';
+import type { TimeSeriesAnnotation } from './utils/annotation';
 export interface TimeChartProps {
     height: number;
     data: TimeSeries[];

package/lib/TimeSeriesChartBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesChartBase.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartBase.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAA0E,MAAM,OAAO,CAAC;AAKvH,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAejB,OAAO,EACL,aAAa,EAQb,aAAa,EAOb,sBAAsB,EAEtB,aAAa,EAGb,aAAa,EACd,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAkB1D,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,WAAW,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,mBAAmB,0GAoc9B,CAAC"}
+{"version":3,"file":"TimeSeriesChartBase.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartBase.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,aAAa,EAGb,aAAa,EAEb,sBAAsB,EACtB,aAAa,EACb,aAAa,EACd,MAAM,wBAAwB,CAAC;AAgBhC,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,KAAK,EAEV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAkBjB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAkB/D,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,WAAW,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,mBAAmB,0GAoc9B,CAAC"}

package/lib/TimeSeriesChartBase.js

@@ -11,18 +11,18 @@ 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 { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Box } from '@mui/material';
-import merge from 'lodash/merge';
-import isEqual from 'lodash/isEqual';
-import { use } from 'echarts/core';
-import { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';
-import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
-import { clearHighlightedSeries, DEFAULT_PINNED_CROSSHAIR, DEFAULT_TOOLTIP_CONFIG, EChart, enableDataZoom, getClosestTimestamp, getCommonTimeScale, getFormattedAxis, getPointInGrid, restoreChart, TimeChartTooltip, useChartsContext, useTimeZone } from '@perses-dev/components';
-import { createTimezoneAwareAxisFormatter } from './utils/timezone-formatter';
-import { AnnotationTooltip, buildAnnotationSeries } from './annotations/AnnotationTooltip';
-use([
+import { Box } from "@mui/material";
+import { clearHighlightedSeries, DEFAULT_PINNED_CROSSHAIR, DEFAULT_TOOLTIP_CONFIG, EChart, enableDataZoom, getClosestTimestamp, getCommonTimeScale, getFormattedAxis, getPointInGrid, restoreChart, TimeChartTooltip, useChartsContext, useTimeZone } from "@perses-dev/components";
+import { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from "echarts/charts";
+import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent } from "echarts/components";
+import { use as registerECharts } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import isEqual from "lodash/isEqual";
+import merge from "lodash/merge";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { AnnotationTooltip, buildAnnotationSeries } from "./annotations/AnnotationTooltip.js";
+import { createTimezoneAwareAxisFormatter } from "./utils/timezone-formatter.js";
+registerECharts([
     EChartsLineChart,
     EChartsBarChart,
     GridComponent,

package/lib/TimeSeriesChartBase.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesChartBase.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 { forwardRef, MouseEvent, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport { Box } from '@mui/material';\nimport merge from 'lodash/merge';\nimport isEqual from 'lodash/isEqual';\n\nimport type {\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { ECharts as EChartsInstance, use } from 'echarts/core';\nimport { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport {\n  ChartInstance,\n  ChartInstanceFocusOpts,\n  clearHighlightedSeries,\n  CursorCoordinates,\n  DEFAULT_PINNED_CROSSHAIR,\n  DEFAULT_TOOLTIP_CONFIG,\n  EChart,\n  enableDataZoom,\n  FormatOptions,\n  getClosestTimestamp,\n  getCommonTimeScale,\n  getFormattedAxis,\n  getPointInGrid,\n  OnEventsType,\n  restoreChart,\n  TimeChartSeriesMapping,\n  TimeChartTooltip,\n  TooltipConfig,\n  useChartsContext,\n  useTimeZone,\n  ZoomEventData,\n} from '@perses-dev/components';\nimport { DatasetOption } from 'echarts/types/dist/shared';\nimport { TimeScale, TimeSeries } from '@perses-dev/spec';\nimport { createTimezoneAwareAxisFormatter } from './utils/timezone-formatter';\nimport { TimeSeriesAnnotation } from './utils/annotation';\nimport { AnnotationTooltip, buildAnnotationSeries } from './annotations/AnnotationTooltip';\n\nuse([\n  EChartsLineChart,\n  EChartsBarChart,\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport interface TimeChartProps {\n  height: number;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  annotations?: TimeSeriesAnnotation[];\n  timeScale?: TimeScale;\n  yAxis?: YAXisComponentOption | YAXisComponentOption[];\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options, used for tooltip formatting when series have different units\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  grid?: GridComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  isStackedBar?: boolean;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(function TimeChart(\n  {\n    height,\n    data,\n    seriesMapping,\n    annotations,\n    timeScale: timeScaleProp,\n    yAxis,\n    format,\n    seriesFormatMap,\n    grid,\n    isStackedBar = false,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref\n) {\n  const { chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } =\n    useChartsContext();\n  const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const [pinnedCrosshair, setPinnedCrosshair] = useState<LineSeriesOption | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n  const [hoveredAnnotation, setHoveredAnnotation] = useState<TimeSeriesAnnotation | null>(null);\n  const [pinnedAnnotation, setPinnedAnnotation] = useState<TimeSeriesAnnotation | null>(null);\n  const [pinnedAnnotationPos, setPinnedAnnotationPos] = useState<CursorCoordinates | null>(null);\n  const { timeZone, formatWithUserTimeZone } = useTimeZone();\n\n  const getTimezoneAwareAxisFormatter = useCallback(\n    (rangeMs: number): ((value: number) => string) => createTimezoneAwareAxisFormatter(rangeMs, timeZone),\n    [timeZone]\n  );\n\n  let timeScale: TimeScale;\n  if (timeScaleProp === undefined) {\n    const commonTimeScale = getCommonTimeScale(data);\n    if (commonTimeScale === undefined) {\n      // set default to past 5 years\n      const today = new Date();\n      const pastDate = new Date(today);\n      pastDate.setFullYear(today.getFullYear() - 5);\n      const todayMs = today.getTime();\n      const pastDateMs = pastDate.getTime();\n      timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n    } else {\n      timeScale = commonTimeScale;\n    }\n  } else {\n    timeScale = timeScaleProp;\n  }\n\n  useImperativeHandle(ref, () => {\n    return {\n      highlightSeries({ name }: ChartInstanceFocusOpts): void {\n        if (!chartRef.current) {\n          // when chart undef, do not highlight series when hovering over legend\n          return;\n        }\n\n        chartRef.current.dispatchAction({ type: 'highlight', seriesId: name });\n      },\n      clearHighlightedSeries: (): void => {\n        if (!chartRef.current) {\n          // when chart undef, do not clear highlight series\n          return;\n        }\n        clearHighlightedSeries(chartRef.current);\n      },\n    };\n  }, []);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params): void => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const xAxisStartValue = params.batch[0].startValue;\n        const xAxisEndValue = params.batch[0].endValue;\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      finished: (): void => {\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      mouseover: (params: any): void => {\n        // Only markPoint (triangles under the X-axis) opens the annotation tooltip.\n        // Hovering markLine or anything else keeps the regular TimeSeries tooltip visible\n        // and clears any stale hovered annotation (mouseout is sometimes missed by ECharts).\n        if (annotations && params.componentType === 'markPoint' && params.data?.annotationIndex !== undefined) {\n          const matchedAnnotation = annotations[params.data.annotationIndex] || null;\n          if (matchedAnnotation) {\n            setHoveredAnnotation(matchedAnnotation);\n            return;\n          }\n        }\n        setHoveredAnnotation(null);\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      mouseout: (params: any): void => {\n        if (\n          annotations &&\n          params.componentType === 'markPoint' &&\n          params.data?.annotationIndex !== undefined &&\n          annotations\n        ) {\n          // Only clear if the mouseout corresponds to the currently hovered annotation, so that\n          // a quick move from one markPoint to another isn't cancelled by a late mouseout event.\n          const leaving = annotations[params.data.annotationIndex] || null;\n          setHoveredAnnotation((current) => (current === leaving ? null : current));\n        }\n      },\n      globalout: (): void => {\n        if (annotations) {\n          // Cursor left the chart canvas — guarantee the annotation tooltip is dismissed.\n          setHoveredAnnotation(null);\n        }\n      },\n    };\n  }, [annotations, onDataZoom]);\n\n  // Generate annotation series for ECharts markArea (range), markLine (point), and markPoint (markers under X-axis)\n  const annotationSeries = useMemo(() => buildAnnotationSeries(annotations), [annotations]);\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data === null || (data.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    // Utilizes ECharts dataset so raw data is separate from series option style properties\n    // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n    const dataset: DatasetOption[] = [];\n    data.map((d, index) => {\n      const values = d.values.map(([timestamp, value]) => {\n        const val: string | number = value === null ? '-' : value; // echarts use '-' to represent null data\n        return [timestamp, val];\n      });\n      dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n    });\n\n    const updatedSeriesMapping =\n      enablePinning && pinnedCrosshair !== null\n        ? [...seriesMapping, pinnedCrosshair, ...annotationSeries]\n        : [...seriesMapping, ...annotationSeries];\n\n    const option: EChartsCoreOption = {\n      dataset: dataset,\n      series: updatedSeriesMapping,\n      xAxis: {\n        type: 'time',\n        min: timeScale.startMs,\n        max: timeScale.endMs,\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getTimezoneAwareAxisFormatter(timeScale.rangeMs ?? 0),\n        },\n        axisPointer: {\n          snap: false, // important so shared crosshair does not lag\n        },\n      },\n      // If yAxis is already an array (multiple Y axes), use it directly; otherwise use getFormattedAxis\n      yAxis: Array.isArray(yAxis) ? yAxis : getFormattedAxis(yAxis, format),\n      animation: false,\n      tooltip: {\n        show: true,\n        // ECharts tooltip content hidden by default since we use custom tooltip instead.\n        // Stacked bar uses ECharts tooltip so subgroup data shows correctly.\n        showContent: isStackedBar,\n        trigger: isStackedBar ? 'item' : 'axis',\n        appendToBody: isStackedBar,\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: false, // xAxis.axisPointer.snap takes priority\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n\n    return option;\n  }, [\n    data,\n    seriesMapping,\n    annotationSeries,\n    timeScale,\n    yAxis,\n    format,\n    grid,\n    noDataOption,\n    __experimentalEChartsOptionsOverride,\n    noDataVariant,\n    isStackedBar,\n    enablePinning,\n    pinnedCrosshair,\n    getTimezoneAwareAxisFormatter,\n  ]);\n\n  // Update adjacent charts so tooltip is unpinned when current chart is clicked.\n  useEffect(() => {\n    // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.\n    // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.\n    const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;\n    if (multipleTooltipsPinned) {\n      if (!isEqual(lastTooltipPinnedCoords, tooltipPinnedCoords)) {\n        setTooltipPinnedCoords(null);\n        if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {\n          setPinnedCrosshair(null);\n        }\n      }\n    }\n    // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastTooltipPinnedCoords, seriesMapping]);\n\n  return (\n    <Box\n      style={{ height }}\n      // onContextMenu={(e) => {\n      //   // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here\n      //   e.preventDefault(); // Prevent the default behaviour when right clicked\n      // }}\n      onClick={(e) => {\n        // If clicking while hovering an annotation, toggle the annotation tooltip pin\n        // instead of pinning the TimeChartTooltip, so pinned TimeChartTooltip is preserved.\n        if (hoveredAnnotation !== null && e.target instanceof HTMLCanvasElement) {\n          const pinnedPos: CursorCoordinates = {\n            page: { x: e.pageX, y: e.pageY },\n            client: { x: e.clientX, y: e.clientY },\n            plotCanvas: { x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY },\n            target: e.target,\n          };\n          setPinnedAnnotation((current) => {\n            if (current === hoveredAnnotation) {\n              setPinnedAnnotationPos(null);\n              return null;\n            }\n            setPinnedAnnotationPos(pinnedPos);\n            return hoveredAnnotation;\n          });\n          return;\n        }\n\n        // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down\n        const isControlKeyPressed = e.ctrlKey || e.metaKey;\n        if (isControlKeyPressed) {\n          e.preventDefault();\n        }\n\n        // Determine where on chart canvas to plot pinned crosshair as markLine.\n        const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);\n        if (pointInGrid === null) {\n          return;\n        }\n\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {\n          // Pin tooltip and update shared charts context to remember these coordinates.\n          const pinnedPos: CursorCoordinates = {\n            page: {\n              x: e.pageX,\n              y: e.pageY,\n            },\n            client: {\n              x: e.clientX,\n              y: e.clientY,\n            },\n            plotCanvas: {\n              x: e.nativeEvent.offsetX,\n              y: e.nativeEvent.offsetY,\n            },\n            target: e.target,\n          };\n\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return pinnedPos;\n            } else {\n              setPinnedCrosshair(null);\n              return null;\n            }\n          });\n\n          setPinnedCrosshair((current) => {\n            // Only add pinned crosshair line series when there is not one already in seriesMapping.\n            if (current === null) {\n              const cursorX = pointInGrid[0];\n\n              // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent\n              const firstTimeSeriesValues = data[0]?.values;\n              const closestTimestamp = getClosestTimestamp(firstTimeSeriesValues, cursorX);\n\n              // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right\n              const pinnedCrosshair = merge({}, DEFAULT_PINNED_CROSSHAIR, {\n                markLine: {\n                  data: [\n                    {\n                      xAxis: closestTimestamp,\n                    },\n                  ],\n                },\n              } as LineSeriesOption);\n              return pinnedCrosshair;\n            } else {\n              // Clear previously set pinned crosshair\n              return null;\n            }\n          });\n\n          if (!isControlKeyPressed) {\n            setLastTooltipPinnedCoords(pinnedPos);\n          }\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        // Defensive: clear hovered annotation in case ECharts missed a mouseout event.\n        setHoveredAnnotation(null);\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead.\n          Keep the time chart tooltip visible when pinned even if user hovers an annotation. */}\n      {showTooltip === true &&\n        (tooltipPinnedCoords !== null || hoveredAnnotation === null) &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeChartTooltip\n            containerId={chartsTheme.tooltipPortalContainerId}\n            chartRef={chartRef}\n            data={data}\n            seriesMapping={seriesMapping}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={isPinningEnabled}\n            pinnedPos={tooltipPinnedCoords}\n            format={format}\n            seriesFormatMap={seriesFormatMap}\n            onUnpinClick={() => {\n              // Unpins tooltip when clicking Pin icon in TooltipHeader.\n              setTooltipPinnedCoords(null);\n              // Clear previously set pinned crosshair.\n              setPinnedCrosshair(null);\n            }}\n          />\n        )}\n      {/* Pinned annotation takes priority over hovered. */}\n      {(pinnedAnnotation ?? hoveredAnnotation) && (\n        <AnnotationTooltip\n          annotation={(pinnedAnnotation ?? hoveredAnnotation) as TimeSeriesAnnotation}\n          containerId={chartsTheme.tooltipPortalContainerId}\n          formatWithUserTimeZone={formatWithUserTimeZone}\n          pinnedPos={pinnedAnnotation !== null ? pinnedAnnotationPos : null}\n          enablePinning={isPinningEnabled}\n          onUnpinClick={() => {\n            setPinnedAnnotation(null);\n            setPinnedAnnotationPos(null);\n          }}\n        />\n      )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={enableSyncGrouping ? syncGroup : undefined}\n      />\n    </Box>\n  );\n});\n"],"names":["forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","Box","merge","isEqual","use","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","CanvasRenderer","clearHighlightedSeries","DEFAULT_PINNED_CROSSHAIR","DEFAULT_TOOLTIP_CONFIG","EChart","enableDataZoom","getClosestTimestamp","getCommonTimeScale","getFormattedAxis","getPointInGrid","restoreChart","TimeChartTooltip","useChartsContext","useTimeZone","createTimezoneAwareAxisFormatter","AnnotationTooltip","buildAnnotationSeries","TimeSeriesChartBase","TimeChart","height","data","seriesMapping","annotations","timeScale","timeScaleProp","yAxis","format","seriesFormatMap","grid","isStackedBar","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","chartsTheme","enablePinning","enableSyncGrouping","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","isPinningEnabled","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","pinnedCrosshair","setPinnedCrosshair","isDragging","setIsDragging","startX","setStartX","hoveredAnnotation","setHoveredAnnotation","pinnedAnnotation","setPinnedAnnotation","pinnedAnnotationPos","setPinnedAnnotationPos","timeZone","formatWithUserTimeZone","getTimezoneAwareAxisFormatter","rangeMs","undefined","commonTimeScale","today","Date","pastDate","setFullYear","getFullYear","todayMs","getTime","pastDateMs","startMs","endMs","stepMs","highlightSeries","name","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","setTimeout","batch","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","finished","mouseover","componentType","annotationIndex","matchedAnnotation","mouseout","leaving","globalout","annotationSeries","noDataOption","option","length","dataset","map","d","index","values","timestamp","value","val","push","id","source","dimensions","updatedSeriesMapping","series","xAxis","min","max","axisLabel","hideOverlap","formatter","axisPointer","snap","Array","isArray","animation","tooltip","show","showContent","trigger","appendToBody","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","multipleTooltipsPinned","style","onClick","e","target","HTMLCanvasElement","pinnedPos","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","isControlKeyPressed","ctrlKey","metaKey","preventDefault","pointInGrid","cursorX","firstTimeSeriesValues","closestTimestamp","markLine","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","wrapLabels","onUnpinClick","annotation","sx","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesChartBase.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 {\n  ChartInstance,\n  ChartInstanceFocusOpts,\n  CursorCoordinates,\n  FormatOptions,\n  OnEventsType,\n  TimeChartSeriesMapping,\n  TooltipConfig,\n  ZoomEventData,\n} from '@perses-dev/components';\nimport {\n  clearHighlightedSeries,\n  DEFAULT_PINNED_CROSSHAIR,\n  DEFAULT_TOOLTIP_CONFIG,\n  EChart,\n  enableDataZoom,\n  getClosestTimestamp,\n  getCommonTimeScale,\n  getFormattedAxis,\n  getPointInGrid,\n  restoreChart,\n  TimeChartTooltip,\n  useChartsContext,\n  useTimeZone,\n} from '@perses-dev/components';\nimport type { TimeScale, TimeSeries } from '@perses-dev/spec';\nimport type {\n  DatasetComponentOption as DatasetOption,\n  EChartsCoreOption,\n  GridComponentOption,\n  LineSeriesOption,\n  YAXisComponentOption,\n  TooltipComponentOption,\n} from 'echarts';\nimport { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';\nimport {\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n} from 'echarts/components';\nimport type { ECharts as EChartsInstance } from 'echarts/core';\nimport { use as registerECharts } from 'echarts/core';\nimport { CanvasRenderer } from 'echarts/renderers';\nimport isEqual from 'lodash/isEqual';\nimport merge from 'lodash/merge';\nimport type { MouseEvent } from 'react';\nimport { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\n\nimport { AnnotationTooltip, buildAnnotationSeries } from './annotations/AnnotationTooltip';\nimport type { TimeSeriesAnnotation } from './utils/annotation';\nimport { createTimezoneAwareAxisFormatter } from './utils/timezone-formatter';\n\nregisterECharts([\n  EChartsLineChart,\n  EChartsBarChart,\n  GridComponent,\n  DatasetComponent,\n  DataZoomComponent,\n  MarkAreaComponent,\n  MarkLineComponent,\n  MarkPointComponent,\n  TitleComponent,\n  ToolboxComponent,\n  TooltipComponent,\n  CanvasRenderer,\n]);\n\nexport interface TimeChartProps {\n  height: number;\n  data: TimeSeries[];\n  seriesMapping: TimeChartSeriesMapping;\n  annotations?: TimeSeriesAnnotation[];\n  timeScale?: TimeScale;\n  yAxis?: YAXisComponentOption | YAXisComponentOption[];\n  format?: FormatOptions;\n  /**\n   * Map of series ID to format options, used for tooltip formatting when series have different units\n   */\n  seriesFormatMap?: Map<string, FormatOptions>;\n  grid?: GridComponentOption;\n  tooltipConfig?: TooltipConfig;\n  noDataVariant?: 'chart' | 'message';\n  syncGroup?: string;\n  isStackedBar?: boolean;\n  onDataZoom?: (e: ZoomEventData) => void;\n  onDoubleClick?: (e: MouseEvent) => void;\n  __experimentalEChartsOptionsOverride?: (options: EChartsCoreOption) => EChartsCoreOption;\n}\n\nexport const TimeSeriesChartBase = forwardRef<ChartInstance, TimeChartProps>(function TimeChart(\n  {\n    height,\n    data,\n    seriesMapping,\n    annotations,\n    timeScale: timeScaleProp,\n    yAxis,\n    format,\n    seriesFormatMap,\n    grid,\n    isStackedBar = false,\n    tooltipConfig = DEFAULT_TOOLTIP_CONFIG,\n    noDataVariant = 'message',\n    syncGroup,\n    onDataZoom,\n    onDoubleClick,\n    __experimentalEChartsOptionsOverride,\n  },\n  ref,\n) {\n  const { chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } =\n    useChartsContext();\n  const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;\n  const chartRef = useRef<EChartsInstance>();\n  const [showTooltip, setShowTooltip] = useState<boolean>(true);\n  const [tooltipPinnedCoords, setTooltipPinnedCoords] = useState<CursorCoordinates | null>(null);\n  const [pinnedCrosshair, setPinnedCrosshair] = useState<LineSeriesOption | null>(null);\n  const [isDragging, setIsDragging] = useState(false);\n  const [startX, setStartX] = useState(0);\n  const [hoveredAnnotation, setHoveredAnnotation] = useState<TimeSeriesAnnotation | null>(null);\n  const [pinnedAnnotation, setPinnedAnnotation] = useState<TimeSeriesAnnotation | null>(null);\n  const [pinnedAnnotationPos, setPinnedAnnotationPos] = useState<CursorCoordinates | null>(null);\n  const { timeZone, formatWithUserTimeZone } = useTimeZone();\n\n  const getTimezoneAwareAxisFormatter = useCallback(\n    (rangeMs: number): ((value: number) => string) => createTimezoneAwareAxisFormatter(rangeMs, timeZone),\n    [timeZone],\n  );\n\n  let timeScale: TimeScale;\n  if (timeScaleProp === undefined) {\n    const commonTimeScale = getCommonTimeScale(data);\n    if (commonTimeScale === undefined) {\n      // set default to past 5 years\n      const today = new Date();\n      const pastDate = new Date(today);\n      pastDate.setFullYear(today.getFullYear() - 5);\n      const todayMs = today.getTime();\n      const pastDateMs = pastDate.getTime();\n      timeScale = { startMs: pastDateMs, endMs: todayMs, stepMs: 1, rangeMs: todayMs - pastDateMs };\n    } else {\n      timeScale = commonTimeScale;\n    }\n  } else {\n    timeScale = timeScaleProp;\n  }\n\n  useImperativeHandle(ref, () => {\n    return {\n      highlightSeries({ name }: ChartInstanceFocusOpts): void {\n        if (!chartRef.current) {\n          // when chart undef, do not highlight series when hovering over legend\n          return;\n        }\n\n        chartRef.current.dispatchAction({ type: 'highlight', seriesId: name });\n      },\n      clearHighlightedSeries: (): void => {\n        if (!chartRef.current) {\n          // when chart undef, do not clear highlight series\n          return;\n        }\n        clearHighlightedSeries(chartRef.current);\n      },\n    };\n  }, []);\n\n  const handleEvents: OnEventsType<LineSeriesOption['data'] | unknown> = useMemo(() => {\n    return {\n      datazoom: (params): void => {\n        if (onDataZoom === undefined) {\n          setTimeout(() => {\n            // workaround so unpin happens after click event\n            setTooltipPinnedCoords(null);\n          }, 10);\n        }\n        if (onDataZoom === undefined || params.batch[0] === undefined) return;\n        const xAxisStartValue = params.batch[0].startValue;\n        const xAxisEndValue = params.batch[0].endValue;\n        if (xAxisStartValue !== undefined && xAxisEndValue !== undefined) {\n          const zoomEvent: ZoomEventData = {\n            start: xAxisStartValue,\n            end: xAxisEndValue,\n          };\n          onDataZoom(zoomEvent);\n        }\n      },\n      finished: (): void => {\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      mouseover: (params: any): void => {\n        // Only markPoint (triangles under the X-axis) opens the annotation tooltip.\n        // Hovering markLine or anything else keeps the regular TimeSeries tooltip visible\n        // and clears any stale hovered annotation (mouseout is sometimes missed by ECharts).\n        if (annotations && params.componentType === 'markPoint' && params.data?.annotationIndex !== undefined) {\n          const matchedAnnotation = annotations[params.data.annotationIndex] || null;\n          if (matchedAnnotation) {\n            setHoveredAnnotation(matchedAnnotation);\n            return;\n          }\n        }\n        setHoveredAnnotation(null);\n      },\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      mouseout: (params: any): void => {\n        if (\n          annotations &&\n          params.componentType === 'markPoint' &&\n          params.data?.annotationIndex !== undefined &&\n          annotations\n        ) {\n          // Only clear if the mouseout corresponds to the currently hovered annotation, so that\n          // a quick move from one markPoint to another isn't cancelled by a late mouseout event.\n          const leaving = annotations[params.data.annotationIndex] || null;\n          setHoveredAnnotation((current) => (current === leaving ? null : current));\n        }\n      },\n      globalout: (): void => {\n        if (annotations) {\n          // Cursor left the chart canvas — guarantee the annotation tooltip is dismissed.\n          setHoveredAnnotation(null);\n        }\n      },\n    };\n  }, [annotations, onDataZoom]);\n\n  // Generate annotation series for ECharts markArea (range), markLine (point), and markPoint (markers under X-axis)\n  const annotationSeries = useMemo(() => buildAnnotationSeries(annotations), [annotations]);\n\n  const { noDataOption } = chartsTheme;\n\n  const option: EChartsCoreOption = useMemo(() => {\n    // The \"chart\" `noDataVariant` is only used when the `timeSeries` is an\n    // empty array because a `null` value will throw an error.\n    if (data === null || (data.length === 0 && noDataVariant === 'message')) return noDataOption;\n\n    // Utilizes ECharts dataset so raw data is separate from series option style properties\n    // https://apache.github.io/echarts-handbook/en/concepts/dataset/\n    const dataset: DatasetOption[] = [];\n    data.map((d, index) => {\n      const values = d.values.map(([timestamp, value]) => {\n        const val: string | number = value === null ? '-' : value; // echarts use '-' to represent null data\n        return [timestamp, val];\n      });\n      dataset.push({ id: index, source: [...values], dimensions: ['time', 'value'] });\n    });\n\n    const updatedSeriesMapping =\n      enablePinning && pinnedCrosshair !== null\n        ? [...seriesMapping, pinnedCrosshair, ...annotationSeries]\n        : [...seriesMapping, ...annotationSeries];\n\n    const option: EChartsCoreOption = {\n      dataset: dataset,\n      series: updatedSeriesMapping,\n      xAxis: {\n        type: 'time',\n        min: timeScale.startMs,\n        max: timeScale.endMs,\n        axisLabel: {\n          hideOverlap: true,\n          formatter: getTimezoneAwareAxisFormatter(timeScale.rangeMs ?? 0),\n        },\n        axisPointer: {\n          snap: false, // important so shared crosshair does not lag\n        },\n      },\n      // If yAxis is already an array (multiple Y axes), use it directly; otherwise use getFormattedAxis\n      yAxis: Array.isArray(yAxis) ? yAxis : getFormattedAxis(yAxis, format),\n      animation: false,\n      tooltip: {\n        show: true,\n        // ECharts tooltip content hidden by default since we use custom tooltip instead.\n        // Stacked bar uses ECharts tooltip so subgroup data shows correctly.\n        showContent: isStackedBar,\n        trigger: isStackedBar ? 'item' : 'axis',\n        appendToBody: isStackedBar,\n      },\n      // https://echarts.apache.org/en/option.html#axisPointer\n      axisPointer: {\n        type: 'line',\n        z: 0, // ensure point symbol shows on top of dashed line\n        triggerEmphasis: false, // https://github.com/apache/echarts/issues/18495\n        triggerTooltip: false,\n        snap: false, // xAxis.axisPointer.snap takes priority\n      },\n      toolbox: {\n        feature: {\n          dataZoom: {\n            icon: null, // https://stackoverflow.com/a/67684076/17575201\n            yAxisIndex: 'none',\n          },\n        },\n      },\n      grid,\n    };\n\n    if (__experimentalEChartsOptionsOverride) {\n      return __experimentalEChartsOptionsOverride(option);\n    }\n\n    return option;\n  }, [\n    data,\n    seriesMapping,\n    annotationSeries,\n    timeScale,\n    yAxis,\n    format,\n    grid,\n    noDataOption,\n    __experimentalEChartsOptionsOverride,\n    noDataVariant,\n    isStackedBar,\n    enablePinning,\n    pinnedCrosshair,\n    getTimezoneAwareAxisFormatter,\n  ]);\n\n  // Update adjacent charts so tooltip is unpinned when current chart is clicked.\n  useEffect(() => {\n    // Only allow pinning one tooltip at a time, subsequent tooltip click unpins previous.\n    // Multiple tooltips can only be pinned if Ctrl or Cmd key is pressed while clicking.\n    const multipleTooltipsPinned = tooltipPinnedCoords !== null && lastTooltipPinnedCoords !== null;\n    if (multipleTooltipsPinned) {\n      if (!isEqual(lastTooltipPinnedCoords, tooltipPinnedCoords)) {\n        setTooltipPinnedCoords(null);\n        if (tooltipPinnedCoords !== null && pinnedCrosshair !== null) {\n          setPinnedCrosshair(null);\n        }\n      }\n    }\n    // tooltipPinnedCoords CANNOT be in dep array or tooltip pinning breaks in the current chart's onClick\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [lastTooltipPinnedCoords, seriesMapping]);\n\n  return (\n    <Box\n      style={{ height }}\n      // onContextMenu={(e) => {\n      //   // TODO: confirm tooltip pinning works correctly on Windows, should e.preventDefault() be added here\n      //   e.preventDefault(); // Prevent the default behaviour when right clicked\n      // }}\n      onClick={(e) => {\n        // If clicking while hovering an annotation, toggle the annotation tooltip pin\n        // instead of pinning the TimeChartTooltip, so pinned TimeChartTooltip is preserved.\n        if (hoveredAnnotation !== null && e.target instanceof HTMLCanvasElement) {\n          const pinnedPos: CursorCoordinates = {\n            page: { x: e.pageX, y: e.pageY },\n            client: { x: e.clientX, y: e.clientY },\n            plotCanvas: { x: e.nativeEvent.offsetX, y: e.nativeEvent.offsetY },\n            target: e.target,\n          };\n          setPinnedAnnotation((current) => {\n            if (current === hoveredAnnotation) {\n              setPinnedAnnotationPos(null);\n              return null;\n            }\n            setPinnedAnnotationPos(pinnedPos);\n            return hoveredAnnotation;\n          });\n          return;\n        }\n\n        // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down\n        const isControlKeyPressed = e.ctrlKey || e.metaKey;\n        if (isControlKeyPressed) {\n          e.preventDefault();\n        }\n\n        // Determine where on chart canvas to plot pinned crosshair as markLine.\n        const pointInGrid = getPointInGrid(e.nativeEvent.offsetX, e.nativeEvent.offsetY, chartRef.current);\n        if (pointInGrid === null) {\n          return;\n        }\n\n        // Pin and unpin when clicking on chart canvas but not tooltip text.\n        if (isPinningEnabled && e.target instanceof HTMLCanvasElement) {\n          // Pin tooltip and update shared charts context to remember these coordinates.\n          const pinnedPos: CursorCoordinates = {\n            page: {\n              x: e.pageX,\n              y: e.pageY,\n            },\n            client: {\n              x: e.clientX,\n              y: e.clientY,\n            },\n            plotCanvas: {\n              x: e.nativeEvent.offsetX,\n              y: e.nativeEvent.offsetY,\n            },\n            target: e.target,\n          };\n\n          setTooltipPinnedCoords((current) => {\n            if (current === null) {\n              return pinnedPos;\n            } else {\n              setPinnedCrosshair(null);\n              return null;\n            }\n          });\n\n          setPinnedCrosshair((current) => {\n            // Only add pinned crosshair line series when there is not one already in seriesMapping.\n            if (current === null) {\n              const cursorX = pointInGrid[0];\n\n              // Only need to loop through first dataset source since getCommonTimeScale ensures xAxis timestamps are consistent\n              const firstTimeSeriesValues = data[0]?.values;\n              const closestTimestamp = getClosestTimestamp(firstTimeSeriesValues, cursorX);\n\n              // Crosshair snaps to nearest timestamp since cursor may be slightly to left or right\n              const pinnedCrosshair = merge({}, DEFAULT_PINNED_CROSSHAIR, {\n                markLine: {\n                  data: [\n                    {\n                      xAxis: closestTimestamp,\n                    },\n                  ],\n                },\n              } as LineSeriesOption);\n              return pinnedCrosshair;\n            } else {\n              // Clear previously set pinned crosshair\n              return null;\n            }\n          });\n\n          if (!isControlKeyPressed) {\n            setLastTooltipPinnedCoords(pinnedPos);\n          }\n        }\n      }}\n      onMouseDown={(e) => {\n        const { clientX } = e;\n        setIsDragging(true);\n        setStartX(clientX);\n      }}\n      onMouseMove={(e) => {\n        // Allow clicking inside tooltip to copy labels.\n        if (!(e.target instanceof HTMLCanvasElement)) {\n          return;\n        }\n        const { clientX } = e;\n        if (isDragging) {\n          const deltaX = clientX - startX;\n          if (deltaX > 0) {\n            // Hide tooltip when user drags to zoom.\n            setShowTooltip(false);\n          }\n        }\n      }}\n      onMouseUp={() => {\n        setIsDragging(false);\n        setStartX(0);\n        setShowTooltip(true);\n      }}\n      onMouseLeave={() => {\n        if (tooltipPinnedCoords === null) {\n          setShowTooltip(false);\n        }\n        // Defensive: clear hovered annotation in case ECharts missed a mouseout event.\n        setHoveredAnnotation(null);\n        if (chartRef.current !== undefined) {\n          clearHighlightedSeries(chartRef.current);\n        }\n      }}\n      onMouseEnter={() => {\n        setShowTooltip(true);\n        if (chartRef.current !== undefined) {\n          enableDataZoom(chartRef.current);\n        }\n      }}\n      onDoubleClick={(e) => {\n        setTooltipPinnedCoords(null);\n        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior\n        if (onDoubleClick === undefined) {\n          if (chartRef.current !== undefined) {\n            restoreChart(chartRef.current);\n          }\n        } else {\n          onDoubleClick(e);\n        }\n      }}\n    >\n      {/* Allows overrides prop to hide custom tooltip and use the ECharts option.tooltip instead.\n          Keep the time chart tooltip visible when pinned even if user hovers an annotation. */}\n      {showTooltip === true &&\n        (tooltipPinnedCoords !== null || hoveredAnnotation === null) &&\n        (option.tooltip as TooltipComponentOption)?.showContent === false &&\n        tooltipConfig.hidden !== true && (\n          <TimeChartTooltip\n            containerId={chartsTheme.tooltipPortalContainerId}\n            chartRef={chartRef}\n            data={data}\n            seriesMapping={seriesMapping}\n            wrapLabels={tooltipConfig.wrapLabels}\n            enablePinning={isPinningEnabled}\n            pinnedPos={tooltipPinnedCoords}\n            format={format}\n            seriesFormatMap={seriesFormatMap}\n            onUnpinClick={() => {\n              // Unpins tooltip when clicking Pin icon in TooltipHeader.\n              setTooltipPinnedCoords(null);\n              // Clear previously set pinned crosshair.\n              setPinnedCrosshair(null);\n            }}\n          />\n        )}\n      {/* Pinned annotation takes priority over hovered. */}\n      {(pinnedAnnotation ?? hoveredAnnotation) && (\n        <AnnotationTooltip\n          annotation={(pinnedAnnotation ?? hoveredAnnotation) as TimeSeriesAnnotation}\n          containerId={chartsTheme.tooltipPortalContainerId}\n          formatWithUserTimeZone={formatWithUserTimeZone}\n          pinnedPos={pinnedAnnotation !== null ? pinnedAnnotationPos : null}\n          enablePinning={isPinningEnabled}\n          onUnpinClick={() => {\n            setPinnedAnnotation(null);\n            setPinnedAnnotationPos(null);\n          }}\n        />\n      )}\n      <EChart\n        sx={{\n          width: '100%',\n          height: '100%',\n        }}\n        option={option}\n        theme={chartsTheme.echartsTheme}\n        onEvents={handleEvents}\n        _instance={chartRef}\n        syncGroup={enableSyncGrouping ? syncGroup : undefined}\n      />\n    </Box>\n  );\n});\n"],"names":["Box","clearHighlightedSeries","DEFAULT_PINNED_CROSSHAIR","DEFAULT_TOOLTIP_CONFIG","EChart","enableDataZoom","getClosestTimestamp","getCommonTimeScale","getFormattedAxis","getPointInGrid","restoreChart","TimeChartTooltip","useChartsContext","useTimeZone","LineChart","EChartsLineChart","BarChart","EChartsBarChart","GridComponent","DatasetComponent","DataZoomComponent","MarkAreaComponent","MarkLineComponent","MarkPointComponent","TitleComponent","ToolboxComponent","TooltipComponent","use","registerECharts","CanvasRenderer","isEqual","merge","forwardRef","useCallback","useEffect","useImperativeHandle","useMemo","useRef","useState","AnnotationTooltip","buildAnnotationSeries","createTimezoneAwareAxisFormatter","TimeSeriesChartBase","TimeChart","height","data","seriesMapping","annotations","timeScale","timeScaleProp","yAxis","format","seriesFormatMap","grid","isStackedBar","tooltipConfig","noDataVariant","syncGroup","onDataZoom","onDoubleClick","__experimentalEChartsOptionsOverride","ref","chartsTheme","enablePinning","enableSyncGrouping","lastTooltipPinnedCoords","setLastTooltipPinnedCoords","isPinningEnabled","chartRef","showTooltip","setShowTooltip","tooltipPinnedCoords","setTooltipPinnedCoords","pinnedCrosshair","setPinnedCrosshair","isDragging","setIsDragging","startX","setStartX","hoveredAnnotation","setHoveredAnnotation","pinnedAnnotation","setPinnedAnnotation","pinnedAnnotationPos","setPinnedAnnotationPos","timeZone","formatWithUserTimeZone","getTimezoneAwareAxisFormatter","rangeMs","undefined","commonTimeScale","today","Date","pastDate","setFullYear","getFullYear","todayMs","getTime","pastDateMs","startMs","endMs","stepMs","highlightSeries","name","current","dispatchAction","type","seriesId","handleEvents","datazoom","params","setTimeout","batch","xAxisStartValue","startValue","xAxisEndValue","endValue","zoomEvent","start","end","finished","mouseover","componentType","annotationIndex","matchedAnnotation","mouseout","leaving","globalout","annotationSeries","noDataOption","option","length","dataset","map","d","index","values","timestamp","value","val","push","id","source","dimensions","updatedSeriesMapping","series","xAxis","min","max","axisLabel","hideOverlap","formatter","axisPointer","snap","Array","isArray","animation","tooltip","show","showContent","trigger","appendToBody","z","triggerEmphasis","triggerTooltip","toolbox","feature","dataZoom","icon","yAxisIndex","multipleTooltipsPinned","style","onClick","e","target","HTMLCanvasElement","pinnedPos","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","nativeEvent","offsetX","offsetY","isControlKeyPressed","ctrlKey","metaKey","preventDefault","pointInGrid","cursorX","firstTimeSeriesValues","closestTimestamp","markLine","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","wrapLabels","onUnpinClick","annotation","sx","width","theme","echartsTheme","onEvents","_instance"],"mappings":"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"}

package/lib/TimeSeriesChartPanel.d.ts

@@ -1,7 +1,7 @@
-import { ReactElement } from 'react';
-import { PanelProps } from '@perses-dev/plugin-system';
-import { TimeSeriesData } from '@perses-dev/spec';
-import { TimeSeriesChartOptions } from './time-series-chart-model';
+import type { PanelProps } from '@perses-dev/plugin-system';
+import type { TimeSeriesData } from '@perses-dev/spec';
+import type { ReactElement } from 'react';
+import type { TimeSeriesChartOptions } from './time-series-chart-model';
 export type TimeSeriesChartProps = PanelProps<TimeSeriesChartOptions, TimeSeriesData>;
 export declare function TimeSeriesChartPanel(props: TimeSeriesChartProps): ReactElement | null;
 //# sourceMappingURL=TimeSeriesChartPanel.d.ts.map

package/lib/TimeSeriesChartPanel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesChartPanel.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartPanel.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAA6B,MAAM,OAAO,CAAC;AAIhE,OAAO,EAEL,UAAU,EAMX,MAAM,2BAA2B,CAAC;AAqBnC,OAAO,EAAc,cAAc,EAAwB,MAAM,kBAAkB,CAAC;AAEpF,OAAO,EACL,sBAAsB,EAKvB,MAAM,2BAA2B,CAAC;AAYnC,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,sBAAsB,EAAE,cAAc,CAAC,CAAC;AAWtF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA+crF"}
+{"version":3,"file":"TimeSeriesChartPanel.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartPanel.tsx"],"names":[],"mappings":"AAqCA,OAAO,KAAK,EAAE,UAAU,EAAmB,MAAM,2BAA2B,CAAC;AAQ7E,OAAO,KAAK,EAAc,cAAc,EAAwB,MAAM,kBAAkB,CAAC;AAGzF,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAAE,sBAAsB,EAAwB,MAAM,2BAA2B,CAAC;AAc9F,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,sBAAsB,EAAE,cAAc,CAAC,CAAC;AAWtF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CA+crF"}

package/lib/TimeSeriesChartPanel.js

@@ -11,17 +11,17 @@ 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 { useMemo, useRef, useState } from 'react';
-import { Box, useTheme } from '@mui/material';
-import merge from 'lodash/merge';
-import { LEGEND_VALUE_CONFIG, useTimeRange, validateLegendSpec, legendValues, getCalculations } from '@perses-dev/plugin-system';
-import { YAxisLabel, useChartsTheme, ContentWithLegend, useId, DEFAULT_TOOLTIP_CONFIG, getFormattedMultipleYAxes, DEFAULT_LEGEND, formatValue, getTimeSeriesValues } from '@perses-dev/components';
-import { useAnnotationsWithData } from '@perses-dev/dashboards';
-import { DEFAULT_FORMAT, DEFAULT_VISUAL, THRESHOLD_PLOT_INTERVAL } from './time-series-chart-model';
-import { getTimeSeries, getCommonTimeScaleForQueries, convertPanelYAxis, getThresholdSeries, convertPercentThreshold } from './utils/data-transform';
-import { getSeriesColor } from './utils/palette-gen';
-import { TimeSeriesChartBase } from './TimeSeriesChartBase';
-import { convertAnnotationToTimeSeriesAnnotation } from './utils/annotation';
+import { Box, useTheme } from "@mui/material";
+import { YAxisLabel, useChartsTheme, ContentWithLegend, useId, DEFAULT_TOOLTIP_CONFIG, getFormattedMultipleYAxes, DEFAULT_LEGEND, formatValue, getTimeSeriesValues } from "@perses-dev/components";
+import { usePanelAnnotationsWithData } from "@perses-dev/dashboards";
+import { LEGEND_VALUE_CONFIG, useTimeRange, validateLegendSpec, legendValues, getCalculations } from "@perses-dev/plugin-system";
+import merge from "lodash/merge";
+import { useMemo, useRef, useState } from "react";
+import { DEFAULT_FORMAT, DEFAULT_VISUAL, THRESHOLD_PLOT_INTERVAL } from "./time-series-chart-model.js";
+import { TimeSeriesChartBase } from "./TimeSeriesChartBase.js";
+import { convertAnnotationToTimeSeriesAnnotation } from "./utils/annotation.js";
+import { getTimeSeries, getCommonTimeScaleForQueries, convertPanelYAxis, getThresholdSeries, convertPercentThreshold } from "./utils/data-transform.js";
+import { getSeriesColor } from "./utils/palette-gen.js";
 // Using an "ALL" value to handle the case on first loading the chart where we
 // want to select all, but do not want all of the legend items to be visually highlighted.
 // This helps us differentiate those cases more clearly instead of inferring it
@@ -102,7 +102,7 @@ export function TimeSeriesChartPanel(props) {
     const [selectedLegendItems, setSelectedLegendItems] = useState('ALL');
     const [legendSorting, setLegendSorting] = useState();
     const { setTimeRange } = useTimeRange();
-    const annotationsWithData = useAnnotationsWithData();
+    const annotationsWithData = usePanelAnnotationsWithData(props.definition?.spec.annotations);
     const annotations = useMemo(()=>convertAnnotationToTimeSeriesAnnotation(annotationsWithData), [
         annotationsWithData
     ]);