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

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  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 { useQueryCountContext } 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-single';\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 handleFormatChange = (i: number, format?: FormatOptions): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = format;\n    });\n  };\n\n  const queryCount = useQueryCountContext();\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?.length &&\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            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          />\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  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}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format },\n  availableQueryIndexes,\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}: 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    return options;\n  }, [colorMode, lineStyle, areaOpacity, format, onAddColor, onAddLineStyle, onAddAreaOpacity, onAddFormat]);\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              #{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-single\">Fixed (single)</MenuItem>\n              <MenuItem value=\"fixed\">Fixed</MenuItem>\n            </TextField>\n            <OptionsColorPicker\n              label={`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        {/* 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 aria-label={`delete settings for query n°${queryIndex + 1}`} onClick={onDelete}>\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","TextField","ToggleButton","ToggleButtonGroup","Typography","useTheme","FormatControls","OptionsColorPicker","React","useEffect","useMemo","useRef","useState","DeleteIcon","AddIcon","CloseIcon","produce","useQueryCountContext","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","handleFormatChange","queryCount","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","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","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 { 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-single';\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-single\">Fixed (single)</MenuItem>\n              <MenuItem value=\"fixed\">Fixed</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":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SACEA,GAAG,EACHC,MAAM,EACNC,UAAU,EACVC,IAAI,EACJC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,MAAM,EACNC,SAAS,EACTC,YAAY,EACZC,iBAAiB,EACjBC,UAAU,EACVC,QAAQ,QACH,gBAAgB;AACvB,SAASC,cAAc,EAAiBC,kBAAkB,QAAQ,yBAAyB;AAC3F,OAAOC,SAAuBC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAClF,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,aAAa,uBAAuB;AAC3C,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,kBAAkB,EAAEC,qBAAqB,QAAQ,4BAA4B;AACtF,SACEC,oBAAoB,EACpBC,iBAAiB,EACjBC,cAAc,QAIT,4BAA4B;AAEnC,MAAMC,sBAAsB;AAC5B,MAAMC,qBAAqB,CAAC,GAAG,wFAAwF;AAEvH,OAAO,SAASC,oBAAoBC,KAAwC;IAC1E,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAC5B,MAAMG,oBAAoBD,MAAME,aAAa;IAE7C,MAAMC,4BAA4B,CAACC;QACjCL,SACEV,QAAQW,OAAO,CAACK;YACdA,MAAMH,aAAa,GAAGE;QACxB;IAEJ;IACA,4FAA4F;IAC5F,MAAME,wBAAwBtB,OAAgC;IAC9D,MAAMuB,WAAWvB,OAAO;IACxBF,UAAU;QACR,IAAI,CAACwB,sBAAsBE,OAAO,IAAI,CAACD,SAASC,OAAO,EAAE;QACzDF,sBAAsBE,OAAO,EAAEC;QAC/BF,SAASC,OAAO,GAAG;IACrB,GAAG;QAACP,mBAAmBS;KAAO;IAE9B,MAAMC,yBAAyB,CAACC,GAAwCC;QACtE,IAAIZ,sBAAsBa,WAAW;YACnCX,0BACEd,QAAQY,mBAAmB,CAACI;gBAC1B,MAAMH,gBAAgBG,OAAO,CAACQ,EAAE;gBAChC,IAAIX,eAAe;oBACjBA,cAAca,UAAU,GAAGC,SAASJ,EAAEK,MAAM,CAACjB,KAAK;gBACpD;YACF;QAEJ;IACF;IAEA,MAAMkB,wBAAwB,CAACN,GAAwCC;QACrE,IAAIZ,sBAAsBa,WAAW;YACnCX,0BACEd,QAAQY,mBAAmB,CAACI;gBAC1B,IAAIA,UAAUS,WAAW;oBACvB,MAAMZ,gBAAgBG,KAAK,CAACQ,EAAE;oBAC9B,IAAIX,eAAe;wBACjB,MAAMiB,eAAeP,EAAEK,MAAM,CAACjB,KAAK;wBACnC,IAAI,CAACmB,cAAc;4BACjBjB,cAAckB,SAAS,GAAGN;4BAC1BZ,cAAcmB,UAAU,GAAGP;wBAC7B,OAAO;4BACLZ,cAAckB,SAAS,GAAGD;wBAC5B;oBACF;gBACF;YACF;QAEJ;IACF;IAEA,MAAMG,yBAAyB,CAACD,YAAoBR;QAClD,IAAIZ,sBAAsBa,WAAW;YACnCX,0BACEd,QAAQY,mBAAmB,CAACI;gBAC1B,IAAIA,UAAUS,WAAW;oBACvB,MAAMZ,gBAAgBG,KAAK,CAACQ,EAAE;oBAC9B,IAAIX,eAAe;wBACjBA,cAAcmB,UAAU,GAAGA;oBAC7B;gBACF;YACF;QAEJ;IACF;IAEA,MAAME,wBAAwB,CAACC,WAAmBX;QAChD,IAAIZ,sBAAsBa,WAAW;YACnCX,0BACEd,QAAQY,mBAAmB,CAACI;gBAC1B,IAAIA,UAAUS,WAAW;oBACvB,MAAMZ,gBAAgBG,KAAK,CAACQ,EAAE;oBAC9B,IAAIX,eAAe;wBACjBA,cAAcsB,SAAS,GAAGA;oBAC5B;gBACF;YACF;QAEJ;IACF;IAEA,MAAMC,0BAA0B,CAACC,GAAUC,aAAgCd;QACzE,MAAMe,WAAWC,MAAMC,OAAO,CAACH,eAAeA,WAAW,CAAC,EAAE,GAAGA;QAC/D,IAAI1B,sBAAsBa,WAAW;YACnCX,0BACEd,QAAQY,mBAAmB,CAACI;gBAC1B,IAAIA,UAAUS,WAAW;oBACvB,MAAMZ,gBAAgBG,KAAK,CAACQ,EAAE;oBAC9B,IAAIX,eAAe;wBACjBA,cAAc6B,WAAW,GAAGH;oBAC9B;gBACF;YACF;QAEJ;IACF;IAEA,+DAA+D;IAC/D,MAAMI,sBAAsB,CAACnB,GAAWoB;QACtC,IAAIhC,sBAAsBa,WAAW;YACnCX,0BACEd,QAAQY,mBAAmB,CAACI;gBAC1B,MAAM6B,KAAK7B,KAAK,CAACQ,EAAE;gBACnB,IAAIqB,IAAI;oBACND,QAAQC;gBACV;YACF;QAEJ;IACF;IAEA,MAAMC,2BAA2B,CAACtB;QAChC,IAAIZ,sBAAsBa,WAAW;YACnC,MAAMsB,2BAA2B/C,QAAQY,mBAAmB,CAACI;gBAC3DA,MAAMgC,MAAM,CAACxB,GAAG;YAClB;YACAV,0BAA0BiC;QAC5B;IACF;IAEA,MAAME,WAAW,CAACzB;QAChBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGd,SAAS,GAAG;YACfc,GAAGb,UAAU,GAAG1B;QAClB;IACF;IAEA,MAAM4C,cAAc,CAAC1B;QACnBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGd,SAAS,GAAGN;YACfoB,GAAGb,UAAU,GAAGP;QAClB;IACF;IAEA,MAAM0B,eAAe,CAAC3B;QACpBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGV,SAAS,GAAG;QACjB;IACF;IAEA,MAAMiB,kBAAkB,CAAC5B;QACvBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGV,SAAS,GAAGV;QACjB;IACF;IAEA,MAAM4B,iBAAiB,CAAC7B;QACtBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGH,WAAW,GAAGvC;QACnB;IACF;IAEA,MAAMmD,oBAAoB,CAAC9B;QACzBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGH,WAAW,GAAGjB;QACnB;IACF;IAEA,MAAM8B,YAAY,CAAC/B;QACjBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGW,MAAM,GAAG;gBAAEC,MAAM;gBAAWC,aAAa;YAAK;QACnD;IACF;IAEA,MAAMC,eAAe,CAACnC;QACpBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGW,MAAM,GAAG/B;QACd;IACF;IAEA,MAAMmC,WAAW,CAACpC;QAChBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGgB,KAAK,GAAG;QACb;IACF;IAEA,MAAMC,cAAc,CAACtC;QACnBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGgB,KAAK,GAAGpC;QACb;IACF;IAEA,MAAMsC,oBAAoB,CAACvC,GAAWwC;QACpCrB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGgB,KAAK,GAAGG;QACb;IACF;IAEA,MAAMC,qBAAqB,CAACzC,GAAWgC;QACrCb,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGW,MAAM,GAAGA;QACd;IACF;IAEA,MAAMU,eAAe,CAAC1C;QACpBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGsB,SAAS,GAAG;QACjB;IACF;IAEA,MAAMC,kBAAkB,CAAC5C;QACvBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGsB,SAAS,GAAG1C;QACjB;IACF;IAEA,MAAM,EAAE4C,gBAAgB,EAAE,GAAGnE;IAC7B,MAAMoE,aAAaD,iBAAiBhD,MAAM;IAC1C,MAAMkD,aAAa7E,QAAQ,IAAMO,mBAAmBoE,mBAAmB;QAACA;KAAiB;IAEzF,sFAAsF;IACtF,oFAAoF;IACpF,MAAMG,wBAAwB9E,QAAQ;QACpC,MAAM+E,qBAAqB7D,mBAAmB8D,IAAI,CAAC7D,gBAAkBA,cAAca,UAAU,KAAK,EAAE;QACpG,MAAMiD,kBAAkBnC,MAAMoC,IAAI,CAAC;YAAEvD,QAAQiD;QAAW,GAAG,CAACjC,GAAGb,IAAMA;QACrE,OAAOmD,gBAAgBE,MAAM,CAAC,CAACxC,GAAGX,aAAe,CAAC+C,mBAAmBK,QAAQ,CAACpD;IAChF,GAAG;QAACd;QAAmB0D;KAAW;IAElC,MAAMS,2BAA2BrF,QAAQ;QACvC,OAAO8E,qBAAqB,CAAC,EAAE,IAAIjE;IACrC,GAAG;QAACiE;KAAsB;IAE1B,MAAMQ,uBAA6C;QACjDtD,YAAYqD;IACd;IAEA,MAAME,wBAAwB;QAC5B/D,SAASC,OAAO,GAAG;QACnB,IAAIP,sBAAsBa,WAAW;YACnCX,0BAA0B;gBAACkE;aAAqB;QAClD,OAAO;YACLlE,0BACEd,QAAQY,mBAAmB,CAACI;gBAC1BA,MAAMkE,IAAI,CAACF;YACb;QAEJ;IACF;IAEA,qBACE,MAACjG;;YACEuF,eAAe,kBACd,KAAClF;gBAAW+F,IAAI;gBAAGC,WAAU;0BAAS;iBAItCxE,mBAAmB8D,IAAI,CAAC7D,eAAeW,kBACrC,KAAC6D;oBACCC,UAAU9D,MAAMZ,kBAAkBS,MAAM,GAAG,IAAIJ,wBAAwBQ;oBAEvEZ,eAAeA;oBACf2D,uBAAuBA;oBACvBD,YAAYA;oBACZgB,oBAAoB,CAAChE;wBACnBD,uBAAuBC,GAAGC;oBAC5B;oBACAgE,mBAAmB,CAACjE,IAAMM,sBAAsBN,GAAGC;oBACnDiE,oBAAoB,CAACC,QAAUzD,uBAAuByD,OAAOlE;oBAC7DmE,mBAAmB,CAACxD,YAAcD,sBAAsBC,WAAWX;oBACnEoE,qBAAqB,CAACC,OAAOlF,QAAUyB,wBAAwByD,OAAOlF,OAAOa;oBAC7EsE,UAAU;wBACRhD,yBAAyBtB;oBAC3B;oBACAuE,YAAY,IAAM9C,SAASzB;oBAC3BwE,eAAe,IAAM9C,YAAY1B;oBACjCyE,gBAAgB,IAAM9C,aAAa3B;oBACnC0E,mBAAmB,IAAM9C,gBAAgB5B;oBACzC2E,kBAAkB,IAAM9C,eAAe7B;oBACvC4E,qBAAqB,IAAM9C,kBAAkB9B;oBAC7C6E,aAAa,IAAM9C,UAAU/B;oBAC7B8E,gBAAgB,IAAM3C,aAAanC;oBACnC+E,gBAAgB,CAAC/C,SAAWS,mBAAmBzC,GAAGgC;oBAClDgD,gBAAgB,IAAMtC,aAAa1C;oBACnCiF,mBAAmB,IAAMrC,gBAAgB5C;oBACzCkF,YAAY,IAAM9C,SAASpC;oBAC3BmF,eAAe,IAAM7C,YAAYtC;oBACjCoF,eAAe,CAAC5C,UAAYD,kBAAkBvC,GAAGwC;mBA3B5CxC;YA+BV8C,aAAa,KAAKS,6BAA6BxE,oCAC9C,KAAC7B;gBAAOmI,SAAQ;gBAAYC,yBAAW,KAAChH;gBAAYiH,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAAShC;0BAAuB;;;;AAMlH;AA8BA,SAASI,mBAAmB,EAC1BxE,eAAe,EAAEa,UAAU,EAAEK,SAAS,EAAEC,UAAU,EAAEG,SAAS,EAAEO,WAAW,EAAEc,MAAM,EAAEW,SAAS,EAAEN,KAAK,EAAE,EACtGW,qBAAqB,EACrBD,UAAU,EACVgB,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBE,iBAAiB,EACjBC,mBAAmB,EACnBE,QAAQ,EACRR,QAAQ,EACRS,YAAYA,UAAU,EACtBC,eAAeA,aAAa,EAC5BC,cAAc,EACdC,iBAAiB,EACjBC,gBAAgB,EAChBC,mBAAmB,EACnBC,WAAW,EACXC,cAAc,EACdC,cAAc,EACdC,cAAc,EACdC,iBAAiB,EACjBC,UAAU,EACVC,aAAa,EACbC,aAAa,EACW;IACxB,gDAAgD;IAChD,MAAMM,yBAAyB1C,sBAAsB2C,MAAM,CAACzF,YAAY0F,IAAI,CAAC,CAACC,GAAGC,IAAMD,IAAIC;IAE3F,0BAA0B;IAC1B,MAAM,CAACC,UAAUC,YAAY,GAAG5H,SAA6B;IAE7D,8BAA8B;IAC9B,MAAM6H,mBAAmB/H,QAAQ;QAC/B,MAAMgI,UAAU,EAAE;QAClB,IAAI,CAAC3F,WAAW2F,QAAQxC,IAAI,CAAC;YAAEyC,KAAK;YAASC,OAAO;YAASC,QAAQ9B;QAAW;QAChF,IAAI,CAAC5D,WAAWuF,QAAQxC,IAAI,CAAC;YAAEyC,KAAK;YAAaC,OAAO;YAAcC,QAAQ5B;QAAe;QAC7F,IAAIvD,gBAAgBjB,WAAWiG,QAAQxC,IAAI,CAAC;YAAEyC,KAAK;YAAWC,OAAO;YAAWC,QAAQ1B;QAAiB;QACzG,IAAI3C,WAAW/B,WAAWiG,QAAQxC,IAAI,CAAC;YAAEyC,KAAK;YAAUC,OAAO;YAAUC,QAAQxB;QAAY;QAC7F,IAAI,CAAClC,WAAWuD,QAAQxC,IAAI,CAAC;YAAEyC,KAAK;YAAaC,OAAO;YAAcC,QAAQrB;QAAe;QAC7F,IAAI3C,UAAUpC,WAAWiG,QAAQxC,IAAI,CAAC;YAAEyC,KAAK;YAASC,OAAO;YAASC,QAAQnB;QAAW;QACzF,OAAOgB;IACT,GAAG;QACD3F;QACAI;QACAO;QACAc;QACAW;QACAN;QACAkC;QACAE;QACAE;QACAE;QACAG;QACAE;KACD;IAED,MAAMoB,qBAAqB,CAACjC;QAC1B,IAAI4B,iBAAiBpG,MAAM,KAAK,KAAKoG,gBAAgB,CAAC,EAAE,EAAE;YACxD,2CAA2C;YAC3CA,gBAAgB,CAAC,EAAE,CAACI,MAAM;QAC5B,OAAO;YACL,gBAAgB;YAChBL,YAAY3B,MAAMkC,aAAa;QACjC;IACF;IAEA,MAAMC,kBAAkB;QACtBR,YAAY;IACd;IAEA,MAAMS,sBAAsB,CAACJ;QAC3BA;QACAG;IACF;IAEA,qBACE,MAACjJ;QACCgI,IAAI;YACFmB,cAAc;YACdC,aAAa;YACbC,cAAc;YACdC,GAAG;YACHC,SAAS;YACTC,UAAU;YACVC,eAAe;QACjB;;0BAEA,MAACzJ;gBAAM0J,WAAU;gBAAMC,YAAW;gBAAS3B,IAAI;oBAAEwB,UAAU;oBAAQI,KAAK;oBAAGC,UAAU;gBAAE;;kCAErF,KAAC3J;wBACC4J,MAAM;wBACNvD,UAAUA;wBACV3E,OAAOe;wBACPkG,OAAM;wBACNlH,UAAU6E;wBACVwB,IAAI;4BAAE+B,UAAU;wBAAO;kCAEtB5B,uBAAuBxC,GAAG,CAAC,CAACqE,mBAC3B,KAAClK;gCAA6B8B,OAAOoI;0CAClCxE,UAAU,CAACwE,GAAG,IAAI,CAAC,CAAC,EAAEA,KAAK,GAAG;+BADlB,CAAC,MAAM,EAAEA,IAAI;;oBAO/BhH,2BACC,MAACiH;wBAAgBpB,OAAM;wBAAQqB,UAAUjD;;0CACvC,MAAC/G;gCAAU4J,MAAM;gCAAClI,OAAOoB;gCAAWrB,UAAU8E;gCAAmB0D,MAAK;gCAAQnC,IAAI;oCAAE6B,UAAU;gCAAE;;kDAC9F,KAAC/J;wCAAS8B,OAAM;kDAAe;;kDAC/B,KAAC9B;wCAAS8B,OAAM;kDAAQ;;;;0CAE1B,KAACpB;gCACCqI,OAAOrD,UAAU,CAAC7C,WAAW,IAAI,CAAC,QAAQ,EAAEA,aAAa,GAAG;gCAC5DgE,OAAO1D,cAAc1B;gCACrB6I,eAAe1D;;;;oBAMpBtD,2BACC,MAAC6G;wBAAgBpB,OAAM;wBAAaqB,UAAU/C;;0CAC5C,KAAC/G;gCACCuG,OAAM;gCACN0D,SAAS;gCACTzI,OAAOwB;gCACPzB,UAAU,CAAC2I,IAAI9G;oCACb,IAAIA,aAAa,MAAM;wCACrBoD,kBAAkBpD;oCACpB;gCACF;gCACA2G,MAAK;0CAEJI,OAAOC,OAAO,CAACnJ,mBAAmBsE,GAAG,CAAC,CAAC,CAAC8E,YAAYC,OAAO,iBAC1D,KAACvK;wCAA8ByB,OAAO6I;wCAAYE,cAAY,GAAGF,WAAW,WAAW,CAAC;kDACrFC,OAAO7B,KAAK;uCADI4B;;0CAMvB,KAAC/K;gCAAIsI,IAAI;oCAAE6B,UAAU;gCAAE;;;;oBAK1BlG,gBAAgBjB,2BACf,MAACuH;wBAAgBpB,OAAM;wBAAUqB,UAAU7C;;0CAEzC,KAAC3H;0CACD,KAACK;gCACC6B,OAAO+B;gCACPiH,mBAAkB;gCAClBC,MAAMvJ,eAAeuJ,IAAI;gCACzBC,KAAK;gCACLC,KAAKzJ,eAAeyJ,GAAG;gCACvBC,KAAK1J,eAAe0J,GAAG;gCACvBrJ,UAAUkF;gCACVmB,IAAI;oCAAE6B,UAAU;gCAAE;;;;oBAMvBpF,WAAW/B,2BACV,KAACuH;wBAAgBpB,OAAM;wBAASqB,UAAU3C;kCACxC,cAAA,KAAC7H;4BAAIsI,IAAI;gCAAE+B,UAAU;gCAASR,SAAS;gCAAQK,KAAK;gCAAGH,eAAe;4BAAS;sCAC7E,cAAA,KAAClJ;gCAAeqB,OAAO6C;gCAAQ9C,UAAU6F;;;;oBAM9CpC,2BACC,KAAC6E;wBAAgBpB,OAAM;wBAAaqB,UAAUxC;kCAC5C,cAAA,KAACrH;4BAAWyH,SAAQ;4BAAQnB,OAAM;4BAAiBqB,IAAI;gCAAE6B,UAAU;gCAAGoB,IAAI;4BAAI;sCAAG;;;oBAOpFnG,UAAUpC,2BACT,MAACuH;wBAAgBpB,OAAM;wBAAQqB,UAAUtC;;0CACvC,KAAC3H;gCACCgF,SAASH;gCACTnD,UAAU,CAACa,IAAMqF,cAAcrF,EAAEK,MAAM,CAACoC,OAAO;gCAC/CiG,WAAW;oCAAEC,OAAO;wCAAE,cAAc;oCAAiB;gCAAE;;0CAEzD,KAACzL;gCAAIsI,IAAI;oCAAE6B,UAAU;gCAAE;;;;oBAK1BnB,iBAAiBpG,MAAM,GAAG,mBACzB;;0CACE,KAAC1C;gCAAWsI,SAASa;gCAAoB4B,cAAW;0CAClD,cAAA,KAAC5J;;0CAIH,KAAClB;gCACC2I,UAAUA;gCACV4C,MAAMC,QAAQ7C;gCACd8C,SAASrC;gCACTsC,cAAc;oCACZC,UAAU;oCACVC,YAAY;gCACd;0CAEC/C,iBAAiB/C,GAAG,CAAC,CAAC+F,uBACrB,MAAC5L;wCAECoI,SAAS,IAAMgB,oBAAoBwC,OAAO5C,MAAM;wCAChDd,IAAI;4CAAE+B,UAAU;wCAAQ;;0DAExB,KAAChJ;gDAAQiH,IAAI;oDAAE2D,IAAI;oDAAGC,UAAU;gDAAO;;4CACtCF,OAAO7C,KAAK;;uCALR6C,OAAO9C,GAAG;;;;;;0BAa3B,KAAClJ;gBAAIsI,IAAI;oBAAEuB,SAAS;oBAAQI,YAAY;oBAAUkC,gBAAgB;gBAAS;0BACzE,cAAA,KAACjM;oBACC+K,cAAY,CAAC,oBAAoB,EAAEnF,UAAU,CAAC7C,WAAW,IAAI,CAAC,QAAQ,EAAEA,aAAa,GAAG,EAAE;oBAC1FuF,SAASnB;8BAET,cAAA,KAACjG;;;;;AAKX;AAQA,6BAA6B;AAC7B,SAASmJ,gBAAgBvI,KAA2B;IAClD,MAAM,EAAEmH,KAAK,EAAEiD,QAAQ,EAAE5B,QAAQ,EAAE,GAAGxI;IACtC,MAAMqK,QAAQzL;IAEd,qBACE,MAACZ;QAAIsI,IAAI;YAAEgE,UAAU;YAAYjC,UAAU;QAAQ;;0BACjD,KAAC1J;gBACCyH,SAAQ;gBACRE,IAAI;oBACFgE,UAAU;oBACVC,KAAK,CAAC;oBACNC,MAAM;oBACNC,iBAAiBJ,MAAMK,OAAO,CAACC,UAAU,CAACC,IAAI;oBAC9CC,IAAI;oBACJ5F,OAAO;oBACP6F,QAAQ;gBACV;0BAEC3D;;0BAEH,MAAC7I;gBACC0J,WAAU;gBACVC,YAAW;gBACX8C,SAAS;gBACTzE,IAAI;oBACF0E,QAAQ;oBACRtD,aAAa;oBACbC,cAAc;oBACdC,GAAG;gBACL;;oBAECwC;kCACD,KAAClM;wBAAWuK,MAAK;wBAAQjC,SAASgC;wBAAUS,cAAY,CAAC,OAAO,EAAE9B,OAAO;kCACvE,cAAA,KAAC7H;;;;;;AAKX"}

package/lib/TimeSeriesChartBase.d.ts

@@ -2,10 +2,12 @@ import { MouseEvent } from 'react';
 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';
 export interface TimeChartProps {
     height: number;
     data: TimeSeries[];
     seriesMapping: TimeChartSeriesMapping;
+    annotations?: TimeSeriesAnnotation[];
     timeScale?: TimeScale;
     yAxis?: YAXisComponentOption | YAXisComponentOption[];
     format?: FormatOptions;

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;AAkBzD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,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,0GAkX9B,CAAC"}
+{"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"}

package/lib/TimeSeriesChartBase.js

@@ -21,6 +21,7 @@ import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent,
 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([
     EChartsLineChart,
     EChartsBarChart,
@@ -35,7 +36,7 @@ use([
     TooltipComponent,
     CanvasRenderer
 ]);
-export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({ height, data, seriesMapping, timeScale: timeScaleProp, yAxis, format, seriesFormatMap, grid, isStackedBar = false, tooltipConfig = DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
+export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({ height, data, seriesMapping, annotations, timeScale: timeScaleProp, yAxis, format, seriesFormatMap, grid, isStackedBar = false, tooltipConfig = DEFAULT_TOOLTIP_CONFIG, noDataVariant = 'message', syncGroup, onDataZoom, onDoubleClick, __experimentalEChartsOptionsOverride }, ref) {
     const { chartsTheme, enablePinning, enableSyncGrouping, lastTooltipPinnedCoords, setLastTooltipPinnedCoords } = useChartsContext();
     const isPinningEnabled = tooltipConfig.enablePinning && enablePinning;
     const chartRef = useRef();
@@ -44,7 +45,10 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
     const [pinnedCrosshair, setPinnedCrosshair] = useState(null);
     const [isDragging, setIsDragging] = useState(false);
     const [startX, setStartX] = useState(0);
-    const { timeZone } = useTimeZone();
+    const [hoveredAnnotation, setHoveredAnnotation] = useState(null);
+    const [pinnedAnnotation, setPinnedAnnotation] = useState(null);
+    const [pinnedAnnotationPos, setPinnedAnnotationPos] = useState(null);
+    const { timeZone, formatWithUserTimeZone } = useTimeZone();
     const getTimezoneAwareAxisFormatter = useCallback((rangeMs)=>createTimezoneAwareAxisFormatter(rangeMs, timeZone), [
         timeZone
     ]);
@@ -115,11 +119,44 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
                 if (chartRef.current !== undefined) {
                     enableDataZoom(chartRef.current);
                 }
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            mouseover: (params)=>{
+                // Only markPoint (triangles under the X-axis) opens the annotation tooltip.
+                // Hovering markLine or anything else keeps the regular TimeSeries tooltip visible
+                // and clears any stale hovered annotation (mouseout is sometimes missed by ECharts).
+                if (annotations && params.componentType === 'markPoint' && params.data?.annotationIndex !== undefined) {
+                    const matchedAnnotation = annotations[params.data.annotationIndex] || null;
+                    if (matchedAnnotation) {
+                        setHoveredAnnotation(matchedAnnotation);
+                        return;
+                    }
+                }
+                setHoveredAnnotation(null);
+            },
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            mouseout: (params)=>{
+                if (annotations && params.componentType === 'markPoint' && params.data?.annotationIndex !== undefined && annotations) {
+                    // Only clear if the mouseout corresponds to the currently hovered annotation, so that
+                    // a quick move from one markPoint to another isn't cancelled by a late mouseout event.
+                    const leaving = annotations[params.data.annotationIndex] || null;
+                    setHoveredAnnotation((current)=>current === leaving ? null : current);
+                }
+            },
+            globalout: ()=>{
+                if (annotations) {
+                    // Cursor left the chart canvas — guarantee the annotation tooltip is dismissed.
+                    setHoveredAnnotation(null);
+                }
             }
         };
     }, [
-        onDataZoom,
-        setTooltipPinnedCoords
+        annotations,
+        onDataZoom
+    ]);
+    // Generate annotation series for ECharts markArea (range), markLine (point), and markPoint (markers under X-axis)
+    const annotationSeries = useMemo(()=>buildAnnotationSeries(annotations), [
+        annotations
     ]);
     const { noDataOption } = chartsTheme;
     const option = useMemo(()=>{
@@ -150,8 +187,12 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
         });
         const updatedSeriesMapping = enablePinning && pinnedCrosshair !== null ? [
             ...seriesMapping,
-            pinnedCrosshair
-        ] : seriesMapping;
+            pinnedCrosshair,
+            ...annotationSeries
+        ] : [
+            ...seriesMapping,
+            ...annotationSeries
+        ];
         const option = {
             dataset: dataset,
             series: updatedSeriesMapping,
@@ -203,6 +244,7 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
     }, [
         data,
         seriesMapping,
+        annotationSeries,
         timeScale,
         yAxis,
         format,
@@ -243,6 +285,34 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
         //   e.preventDefault(); // Prevent the default behaviour when right clicked
         // }}
         onClick: (e)=>{
+            // If clicking while hovering an annotation, toggle the annotation tooltip pin
+            // instead of pinning the TimeChartTooltip, so pinned TimeChartTooltip is preserved.
+            if (hoveredAnnotation !== null && e.target instanceof HTMLCanvasElement) {
+                const pinnedPos = {
+                    page: {
+                        x: e.pageX,
+                        y: e.pageY
+                    },
+                    client: {
+                        x: e.clientX,
+                        y: e.clientY
+                    },
+                    plotCanvas: {
+                        x: e.nativeEvent.offsetX,
+                        y: e.nativeEvent.offsetY
+                    },
+                    target: e.target
+                };
+                setPinnedAnnotation((current)=>{
+                    if (current === hoveredAnnotation) {
+                        setPinnedAnnotationPos(null);
+                        return null;
+                    }
+                    setPinnedAnnotationPos(pinnedPos);
+                    return hoveredAnnotation;
+                });
+                return;
+            }
             // Allows user to opt-in to multi tooltip pinning when Ctrl or Cmd key held down
             const isControlKeyPressed = e.ctrlKey || e.metaKey;
             if (isControlKeyPressed) {
@@ -335,6 +405,8 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
             if (tooltipPinnedCoords === null) {
                 setShowTooltip(false);
             }
+            // Defensive: clear hovered annotation in case ECharts missed a mouseout event.
+            setHoveredAnnotation(null);
             if (chartRef.current !== undefined) {
                 clearHighlightedSeries(chartRef.current);
             }
@@ -357,7 +429,7 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
             }
         },
         children: [
-            showTooltip === true && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeChartTooltip, {
+            showTooltip === true && (tooltipPinnedCoords !== null || hoveredAnnotation === null) && option.tooltip?.showContent === false && tooltipConfig.hidden !== true && /*#__PURE__*/ _jsx(TimeChartTooltip, {
                 containerId: chartsTheme.tooltipPortalContainerId,
                 chartRef: chartRef,
                 data: data,
@@ -374,6 +446,17 @@ export const TimeSeriesChartBase = /*#__PURE__*/ forwardRef(function TimeChart({
                     setPinnedCrosshair(null);
                 }
             }),
+            (pinnedAnnotation ?? hoveredAnnotation) && /*#__PURE__*/ _jsx(AnnotationTooltip, {
+                annotation: pinnedAnnotation ?? hoveredAnnotation,
+                containerId: chartsTheme.tooltipPortalContainerId,
+                formatWithUserTimeZone: formatWithUserTimeZone,
+                pinnedPos: pinnedAnnotation !== null ? pinnedAnnotationPos : null,
+                enablePinning: isPinningEnabled,
+                onUnpinClick: ()=>{
+                    setPinnedAnnotation(null);
+                    setPinnedAnnotationPos(null);
+                }
+            }),
             /*#__PURE__*/ _jsx(EChart, {
                 sx: {
                     width: '100%',

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';\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  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    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 { timeZone } = 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    };\n  }, [onDataZoom, setTooltipPinnedCoords]);\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 ? [...seriesMapping, pinnedCrosshair] : seriesMapping;\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    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        // 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        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      {showTooltip === true &&\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      <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","TimeSeriesChartBase","TimeChart","height","data","seriesMapping","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","timeZone","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","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","isControlKeyPressed","ctrlKey","metaKey","preventDefault","pointInGrid","nativeEvent","offsetX","offsetY","target","HTMLCanvasElement","pinnedPos","page","x","pageX","y","pageY","client","clientX","clientY","plotCanvas","cursorX","firstTimeSeriesValues","closestTimestamp","markLine","onMouseDown","onMouseMove","deltaX","onMouseUp","onMouseLeave","onMouseEnter","hidden","containerId","tooltipPortalContainerId","wrapLabels","onUnpinClick","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 { 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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"}

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;AACpF,OAAO,EACL,sBAAsB,EAKvB,MAAM,2BAA2B,CAAC;AAWnC,MAAM,MAAM,oBAAoB,GAAG,UAAU,CAAC,sBAAsB,EAAE,cAAc,CAAC,CAAC;AAWtF,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAwbrF"}
+{"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"}

package/lib/TimeSeriesChartPanel.js

@@ -16,10 +16,12 @@ 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';
 // 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
@@ -100,6 +102,10 @@ export function TimeSeriesChartPanel(props) {
     const [selectedLegendItems, setSelectedLegendItems] = useState('ALL');
     const [legendSorting, setLegendSorting] = useState();
     const { setTimeRange } = useTimeRange();
+    const annotationsWithData = useAnnotationsWithData();
+    const annotations = useMemo(()=>convertAnnotationToTimeSeriesAnnotation(annotationsWithData), [
+        annotationsWithData
+    ]);
     // Populate series data based on query results
     const { timeScale, timeChartData, timeSeriesMapping, legendItems, seriesFormatMap: computedSeriesFormatMap, maxValuesByFormat } = useMemo(()=>{
         const timeScale = getCommonTimeScaleForQueries(queryResults);
@@ -190,9 +196,21 @@ export function TimeSeriesChartPanel(props) {
                                 }
                             }
                         }
+                        // When negativeY is set on this query, negate the rendered values so the
+                        // series renders below the X axis. The original (positive) values are
+                        // preserved in `timeSeries.values` (used for legend calculations) and in
+                        // `queryResults` (used for CSV export).
+                        const baseValues = getTimeSeriesValues(timeSeries, timeScale);
+                        const renderedValues = querySettings?.negativeY ? baseValues.map((tuple)=>{
+                            const [t, v] = tuple;
+                            return [
+                                t,
+                                v === null ? null : -v
+                            ];
+                        }) : baseValues;
                         timeChartData.push({
                             name: formattedSeriesName,
-                            values: getTimeSeriesValues(timeSeries, timeScale)
+                            values: renderedValues
                         });
                     }
                     if (legend && legendItems) {
@@ -348,8 +366,10 @@ export function TimeSeriesChartPanel(props) {
             end: new Date(event.end)
         });
     };
-    // Used to opt in to ECharts trigger item which show subgroup data accurately
-    const isStackedBar = visual.display === 'bar' && visual.stack === 'all';
+    // Used to opt in to ECharts trigger item which show subgroup data accurately.
+    // Derived from the actual series mapping rather than `visual.stack` alone so that
+    // bar charts stacked only via per-query overrides also use the right tooltip mode.
+    const isStackedBar = visual.display === 'bar' && timeSeriesMapping.some((s)=>s?.type === 'bar' && s.stack === 'all');
     // Turn on tooltip pinning by default but opt out for stacked bar or if explicitly set in tooltip panel spec
     let enablePinning = true;
     if (isStackedBar) {
@@ -407,6 +427,7 @@ export function TimeSeriesChartPanel(props) {
                             height: height,
                             data: timeChartData,
                             seriesMapping: timeSeriesMapping,
+                            annotations: annotations,
                             timeScale: timeScale,
                             yAxis: multipleYAxes ?? echartsYAxis,
                             format: format,