@perses-dev/timeseries-chart-plugin 0.10.1 → 0.10.2

package/lib/QuerySettingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuerySettingsEditor.tsx"],"sourcesContent":["// Copyright 2023 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 { IconButton, MenuItem, Stack, TextField, Typography } from '@mui/material';\nimport { InfoTooltip, OptionsEditorGroup, OptionsColorPicker } from '@perses-dev/components';\nimport { ReactElement, RefObject, useEffect, useMemo, useRef } from 'react';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport PlusIcon from 'mdi-material-ui/Plus';\nimport { produce } from 'immer';\nimport { useQueryCountContext } from '@perses-dev/plugin-system';\nimport { QuerySettingsOptions } from './time-series-chart-model';\n\nconst DEFAULT_COLOR_MODE = 'fixed';\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 interface QuerySettingsEditorProps {\n  querySettingsList?: QuerySettingsOptions[];\n  onChange: (querySettingsList: QuerySettingsOptions[]) => void;\n}\n\nexport function QuerySettingsEditor({ querySettingsList, onChange }: QuerySettingsEditorProps): ReactElement {\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      onChange(\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      onChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.colorMode = e.target.value as QuerySettingsOptions['colorMode'];\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorValueChange = (colorValue: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      onChange(\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 deleteQuerySettingsInput = (i: number): void => {\n    if (querySettingsList !== undefined) {\n      const updatedQuerySettingsList = produce(querySettingsList, (draft) => {\n        draft.splice(i, 1);\n      });\n      onChange(updatedQuerySettingsList);\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    colorMode: DEFAULT_COLOR_MODE,\n    colorValue: DEFAULT_COLOR_VALUE,\n  };\n\n  const addQuerySettingsInput = (): void => {\n    focusRef.current = true;\n    if (querySettingsList === undefined) {\n      onChange([defaultQuerySettings]);\n    } else {\n      onChange(\n        produce(querySettingsList, (draft) => {\n          draft.push(defaultQuerySettings);\n        })\n      );\n    }\n  };\n\n  return (\n    <OptionsEditorGroup\n      title=\"Query settings\"\n      icon={\n        firstAvailableQueryIndex !== NO_INDEX_AVAILABLE ? (\n          <InfoTooltip description=\"Add query settings\">\n            <IconButton size=\"small\" aria-label=\"add query settings\" onClick={addQuerySettingsInput}>\n              <PlusIcon />\n            </IconButton>\n          </InfoTooltip>\n        ) : null\n      }\n    >\n      {querySettingsList && querySettingsList.length > 0 ? (\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            onDelete={() => {\n              deleteQuerySettingsInput(i);\n            }}\n          />\n        ))\n      ) : (\n        <Typography mb={2} fontStyle=\"italic\">\n          No query settings defined\n        </Typography>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n\nexport interface 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  onDelete: () => void;\n  inputRef?: RefObject<HTMLInputElement | null>;\n}\n\nexport function QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue },\n  availableQueryIndexes,\n  onQueryIndexChange,\n  onColorModeChange,\n  onColorValueChange,\n  onDelete,\n  inputRef,\n}: QuerySettingsInputProps): ReactElement {\n  // current query index should also be selectable\n  const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b) => a - b);\n\n  return (\n    <Stack flex={1} direction=\"row\" alignItems=\"center\" justifyContent=\"space-between\" spacing={1}>\n      <TextField\n        select\n        inputRef={inputRef}\n        value={queryIndex}\n        label=\"Query\"\n        onChange={onQueryIndexChange}\n        sx={{ minWidth: '75px' }} // instead of `fullWidth` otherwise it's taking too much space\n      >\n        {selectableQueryIndexes.map((queryIndex) => (\n          <MenuItem key={`query-${queryIndex}`} value={queryIndex}>\n            #{queryIndex + 1}\n          </MenuItem>\n        ))}\n      </TextField>\n      <TextField select value={colorMode} fullWidth label=\"Color mode\" onChange={onColorModeChange}>\n        <MenuItem value=\"fixed-single\">Fixed (single)</MenuItem>\n        <MenuItem value=\"fixed\">Fixed</MenuItem>\n      </TextField>\n      <OptionsColorPicker label={'Query n°' + queryIndex} color={colorValue} onColorChange={onColorValueChange} />\n      <IconButton aria-label={`delete settings for query n°${queryIndex + 1}`} size=\"small\" onClick={onDelete}>\n        <DeleteIcon />\n      </IconButton>\n    </Stack>\n  );\n}\n"],"names":["IconButton","MenuItem","Stack","TextField","Typography","InfoTooltip","OptionsEditorGroup","OptionsColorPicker","useEffect","useMemo","useRef","DeleteIcon","PlusIcon","produce","useQueryCountContext","DEFAULT_COLOR_MODE","DEFAULT_COLOR_VALUE","NO_INDEX_AVAILABLE","QuerySettingsEditor","querySettingsList","onChange","recentlyAddedInputRef","focusRef","current","focus","length","handleQueryIndexChange","e","i","undefined","draft","querySettings","queryIndex","parseInt","target","value","handleColorModeChange","colorMode","handleColorValueChange","colorValue","deleteQuerySettingsInput","updatedQuerySettingsList","splice","queryCount","availableQueryIndexes","bookedQueryIndexes","map","allQueryIndexes","Array","from","_","filter","includes","firstAvailableQueryIndex","defaultQuerySettings","addQuerySettingsInput","push","title","icon","description","size","aria-label","onClick","QuerySettingsInput","inputRef","onQueryIndexChange","onColorModeChange","onColorValueChange","color","onDelete","mb","fontStyle","selectableQueryIndexes","concat","sort","a","b","flex","direction","alignItems","justifyContent","spacing","select","label","sx","minWidth","fullWidth","onColorChange"],"mappings":"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"}
+{"version":3,"sources":["../../src/QuerySettingsEditor.tsx"],"sourcesContent":["// Copyright 2023 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 { 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  TimeSeriesChartOptions,\n  TimeSeriesChartOptionsEditorProps,\n  QuerySettingsOptions,\n  DEFAULT_AREA_OPACITY,\n  OPACITY_CONFIG,\n  LINE_STYLE_CONFIG,\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[]) => {\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 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          />\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}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity },\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}: 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    return options;\n  }, [colorMode, lineStyle, areaOpacity, onAddColor, onAddLineStyle, onAddAreaOpacity]);\n\n  const handleAddMenuClick = (event: React.MouseEvent<HTMLElement>) => {\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 = () => {\n    setAnchorEl(null);\n  };\n\n  const handleMenuItemClick = (action: () => void) => {\n    action();\n    handleMenuClose();\n  };\n\n  return (\n    <Stack spacing={2} sx={{ borderBottom: '1px solid', borderColor: 'divider', borderRadius: 1, p: 2 }}>\n      <Stack direction=\"row\" alignItems=\"center\" spacing={1} sx={{ flexWrap: 'wrap', gap: 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        {/* 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\n        {/* Spacer to push delete button to the right */}\n        <Box sx={{ flexGrow: 1 }} />\n\n        {/* Delete Button for this query settings */}\n        <IconButton aria-label={`delete settings for query n°${queryIndex + 1}`} onClick={onDelete}>\n          <DeleteIcon />\n        </IconButton>\n      </Stack>\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","OptionsColorPicker","React","useEffect","useMemo","useRef","useState","DeleteIcon","AddIcon","CloseIcon","produce","useQueryCountContext","DEFAULT_AREA_OPACITY","OPACITY_CONFIG","LINE_STYLE_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","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","variant","startIcon","sx","marginTop","onClick","selectableQueryIndexes","concat","sort","a","b","anchorEl","setAnchorEl","availableOptions","options","key","label","action","handleAddMenuClick","currentTarget","handleMenuClose","handleMenuItemClick","spacing","borderBottom","borderColor","borderRadius","p","direction","alignItems","flexWrap","gap","select","minWidth","qi","SettingsSection","onRemove","size","flexGrow","onColorChange","exclusive","__","Object","entries","styleValue","config","aria-label","valueLabelDisplay","step","marks","min","max","open","Boolean","onClose","anchorOrigin","vertical","horizontal","option","mr","fontSize","children","theme","position","top","left","backgroundColor","palette","background","code","px","zIndex","border"],"mappings":"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"}

package/lib/TimeSeriesChart.d.ts.map

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

package/lib/TimeSeriesChart.js

@@ -11,7 +11,8 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { createInitialTimeSeriesChartOptions } from './time-series-chart-model';
-import { TimeSeriesChartOptionsEditorSettings } from './TimeSeriesChartOptionsEditorSettings';
+import { TimeSeriesChartGeneralSettings } from './GeneralSettingsEditor';
+import { QuerySettingsEditor } from './QuerySettingsEditor';
 import { TimeSeriesChartPanel } from './TimeSeriesChartPanel';
 import { TimeSeriesExportAction } from './TimeSeriesExportAction';
 export const TimeSeriesChart = {
@@ -21,8 +22,12 @@ export const TimeSeriesChart = {
     ],
     panelOptionsEditorComponents: [
         {
-            label: 'Settings',
-            content: TimeSeriesChartOptionsEditorSettings
+            label: 'General Settings',
+            content: TimeSeriesChartGeneralSettings
+        },
+        {
+            label: 'Query Settings',
+            content: QuerySettingsEditor
         }
     ],
     createInitialOptions: createInitialTimeSeriesChartOptions,

package/lib/TimeSeriesChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesChart.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelPlugin } from '@perses-dev/plugin-system';\nimport { createInitialTimeSeriesChartOptions, TimeSeriesChartOptions } from './time-series-chart-model';\nimport { TimeSeriesChartOptionsEditorSettings } from './TimeSeriesChartOptionsEditorSettings';\nimport { TimeSeriesChartPanel, TimeSeriesChartProps } from './TimeSeriesChartPanel';\nimport { TimeSeriesExportAction } from './TimeSeriesExportAction';\n\nexport const TimeSeriesChart: PanelPlugin<TimeSeriesChartOptions, TimeSeriesChartProps> = {\n  PanelComponent: TimeSeriesChartPanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  panelOptionsEditorComponents: [{ label: 'Settings', content: TimeSeriesChartOptionsEditorSettings }],\n  createInitialOptions: createInitialTimeSeriesChartOptions,\n  actions: [\n    {\n      component: TimeSeriesExportAction,\n      location: 'header',\n    },\n  ],\n};\n"],"names":["createInitialTimeSeriesChartOptions","TimeSeriesChartOptionsEditorSettings","TimeSeriesChartPanel","TimeSeriesExportAction","TimeSeriesChart","PanelComponent","supportedQueryTypes","panelOptionsEditorComponents","label","content","createInitialOptions","actions","component","location"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,mCAAmC,QAAgC,4BAA4B;AACxG,SAASC,oCAAoC,QAAQ,yCAAyC;AAC9F,SAASC,oBAAoB,QAA8B,yBAAyB;AACpF,SAASC,sBAAsB,QAAQ,2BAA2B;AAElE,OAAO,MAAMC,kBAA6E;IACxFC,gBAAgBH;IAChBI,qBAAqB;QAAC;KAAkB;IACxCC,8BAA8B;QAAC;YAAEC,OAAO;YAAYC,SAASR;QAAqC;KAAE;IACpGS,sBAAsBV;IACtBW,SAAS;QACP;YACEC,WAAWT;YACXU,UAAU;QACZ;KACD;AACH,EAAE"}
+{"version":3,"sources":["../../src/TimeSeriesChart.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { PanelPlugin } from '@perses-dev/plugin-system';\nimport { createInitialTimeSeriesChartOptions, TimeSeriesChartOptions } from './time-series-chart-model';\nimport { TimeSeriesChartGeneralSettings } from './GeneralSettingsEditor';\nimport { QuerySettingsEditor } from './QuerySettingsEditor';\nimport { TimeSeriesChartPanel, TimeSeriesChartProps } from './TimeSeriesChartPanel';\nimport { TimeSeriesExportAction } from './TimeSeriesExportAction';\n\nexport const TimeSeriesChart: PanelPlugin<TimeSeriesChartOptions, TimeSeriesChartProps> = {\n  PanelComponent: TimeSeriesChartPanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  panelOptionsEditorComponents: [\n    { label: 'General Settings', content: TimeSeriesChartGeneralSettings },\n    { label: 'Query Settings', content: QuerySettingsEditor },\n  ],\n  createInitialOptions: createInitialTimeSeriesChartOptions,\n  actions: [\n    {\n      component: TimeSeriesExportAction,\n      location: 'header',\n    },\n  ],\n};\n"],"names":["createInitialTimeSeriesChartOptions","TimeSeriesChartGeneralSettings","QuerySettingsEditor","TimeSeriesChartPanel","TimeSeriesExportAction","TimeSeriesChart","PanelComponent","supportedQueryTypes","panelOptionsEditorComponents","label","content","createInitialOptions","actions","component","location"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAGjC,SAASA,mCAAmC,QAAgC,4BAA4B;AACxG,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,oBAAoB,QAA8B,yBAAyB;AACpF,SAASC,sBAAsB,QAAQ,2BAA2B;AAElE,OAAO,MAAMC,kBAA6E;IACxFC,gBAAgBH;IAChBI,qBAAqB;QAAC;KAAkB;IACxCC,8BAA8B;QAC5B;YAAEC,OAAO;YAAoBC,SAAST;QAA+B;QACrE;YAAEQ,OAAO;YAAkBC,SAASR;QAAoB;KACzD;IACDS,sBAAsBX;IACtBY,SAAS;QACP;YACEC,WAAWT;YACXU,UAAU;QACZ;KACD;AACH,EAAE"}

package/lib/TimeSeriesChartPanel.js

@@ -141,7 +141,7 @@ export function TimeSeriesChartPanel(props) {
                         const datasetIndex = timeChartData.length;
                         // Each series is stored as a separate dataset source.
                         // https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets
-                        timeSeriesMapping.push(getTimeSeries(seriesId, datasetIndex, formattedSeriesName, visual, timeScale, seriesColor));
+                        timeSeriesMapping.push(getTimeSeries(seriesId, datasetIndex, formattedSeriesName, visual, timeScale, seriesColor, querySettings));
                         timeChartData.push({
                             name: formattedSeriesName,
                             values: getTimeSeriesValues(timeSeries, timeScale)

package/lib/TimeSeriesChartPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesChartPanel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport type { GridComponentOption } from 'echarts';\nimport merge from 'lodash/merge';\nimport {\n  getTimeSeriesValues,\n  DEFAULT_LEGEND,\n  getCalculations,\n  formatValue,\n  StepOptions,\n  TimeSeries,\n  TimeSeriesValueTuple,\n  TimeSeriesData,\n  CalculationType,\n} from '@perses-dev/core';\nimport {\n  LEGEND_VALUE_CONFIG,\n  PanelProps,\n  useTimeRange,\n  validateLegendSpec,\n  legendValues,\n} from '@perses-dev/plugin-system';\nimport {\n  ChartInstance,\n  YAxisLabel,\n  ZoomEventData,\n  useChartsTheme,\n  SelectedLegendItemState,\n  ContentWithLegend,\n  TableColumnConfig,\n  LegendItem,\n  LegendProps,\n  useId,\n  TooltipConfig,\n  DEFAULT_TOOLTIP_CONFIG,\n  TimeChartSeriesMapping,\n} from '@perses-dev/components';\nimport {\n  TimeSeriesChartOptions,\n  DEFAULT_FORMAT,\n  DEFAULT_VISUAL,\n  THRESHOLD_PLOT_INTERVAL,\n  QuerySettingsOptions,\n} from './time-series-chart-model';\nimport {\n  getTimeSeries,\n  getCommonTimeScaleForQueries,\n  convertPanelYAxis,\n  getThresholdSeries,\n  convertPercentThreshold,\n} from './utils/data-transform';\nimport { getSeriesColor } from './utils/palette-gen';\nimport { TimeSeriesChartBase } from './TimeSeriesChartBase';\n\nexport type TimeSeriesChartProps = PanelProps<TimeSeriesChartOptions, TimeSeriesData>;\n\n// Using an \"ALL\" value to handle the case on first loading the chart where we\n// want to select all, but do not want all of the legend items to be visually highlighted.\n// This helps us differentiate those cases more clearly instead of inferring it\n// based on the state of the data. This also helps us avoid some coding\n// complexity around initializing a full record for the initial load that would\n// currently require significantly more refactoring of this component.\n// TODO: simplify this if we switch the list-based legend UI to use checkboxes,\n// where we *would* want to visually select all items in this case.\n\nexport function TimeSeriesChartPanel(props: TimeSeriesChartProps): ReactElement | null {\n  const {\n    spec: { thresholds, yAxis, tooltip, querySettings: querySettingsList },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n  const chartId = useId('time-series-panel');\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ECharts theme comes from ChartsProvider, more info: https://echarts.apache.org/en/option.html#color\n  // Colors are manually applied since our legend and tooltip are built custom with React.\n  const categoricalPalette = chartsTheme.echartsTheme.color;\n\n  // TODO: consider refactoring how the layout/spacing/alignment are calculated\n  // the next time significant changes are made to the time series panel (e.g.\n  // when making improvements to the legend to more closely match designs).\n  // This may also want to include moving some of this logic down to the shared,\n  // embeddable components.\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  // populate default 'position' and other future properties\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  // TODO: add support for y_axis_alt.format\n  const format = props.spec.yAxis?.format ?? DEFAULT_FORMAT;\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n  const visual = useMemo(() => {\n    return merge({}, DEFAULT_VISUAL, props.spec.visual);\n  }, [props.spec.visual]);\n\n  // convert Perses dashboard format to be ECharts compatible\n  const echartsYAxis = useMemo(() => {\n    return convertPanelYAxis(yAxis);\n  }, [yAxis]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const { setTimeRange } = useTimeRange();\n\n  // Populate series data based on query results\n  const { timeScale, timeChartData, timeSeriesMapping, legendItems } = useMemo(() => {\n    const timeScale = getCommonTimeScaleForQueries(queryResults);\n    if (timeScale === undefined) {\n      return {\n        timeChartData: [],\n        timeSeriesMapping: [],\n      };\n    }\n\n    const legendItems: LegendItem[] = [];\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 timeChartData: TimeSeries[] = [];\n    const timeSeriesMapping: TimeChartSeriesMapping = [];\n\n    // Index is counted across multiple queries which ensures the categorical color palette does not reset for every query\n    let seriesIndex = 0;\n\n    // Mapping of each set of query results to be ECharts option compatible\n    // TODO: Look into performance optimizations and moving parts of mapping to the lower level chart\n    for (let queryIndex = 0; queryIndex < queryResults.length; queryIndex++) {\n      const result = queryResults[queryIndex];\n\n      // Retrieve querySettings for this query, if exists.\n      // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute\n      let querySettings: QuerySettingsOptions | undefined;\n      for (const item of querySettingsList ?? []) {\n        if (item.queryIndex === queryIndex) {\n          querySettings = item;\n          // We don't break the loop here just in case there are multiple querySettings defined for the\n          // same queryIndex, because in that case we want the last one to take precedence.\n        }\n      }\n\n      if (result) {\n        for (let i = 0; i < result.data.series.length; i++) {\n          const timeSeries: TimeSeries | undefined = result.data.series[i];\n          if (timeSeries === undefined) {\n            return { timeChartData: [], timeSeriesMapping: [], legendItems: [] };\n          }\n\n          // Format is determined by seriesNameFormat in query spec\n          const formattedSeriesName = timeSeries.formattedName ?? timeSeries.name;\n\n          // Color is used for line, tooltip, and legend\n          const seriesColor = getSeriesColor({\n            // ECharts type for color is not always an array but it is always an array in ChartsProvider\n            categoricalPalette: categoricalPalette as string[],\n            visual,\n            muiPrimaryColor: muiTheme.palette.primary.main,\n            seriesName: formattedSeriesName,\n            seriesIndex,\n            querySettings: querySettings,\n            queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1,\n          });\n\n          // We add a unique id for the chart to disambiguate items across charts\n          // when there are multiple on the page.\n          const seriesId = chartId + timeSeries.name + seriesIndex;\n\n          const legendCalculations = legend?.values\n            ? getCalculations(timeSeries.values, legend.values as CalculationType[])\n            : undefined;\n\n          // When we initially load the chart, we want to show all series, but\n          // DO NOT want to visualy highlight all the items in the legend.\n          const isSelectAll = selectedLegendItems === 'ALL';\n          const isSelected = !isSelectAll && !!selectedLegendItems[seriesId];\n          const showTimeSeries = isSelected || isSelectAll;\n\n          if (showTimeSeries) {\n            // Use timeChartData.length to ensure the data that is passed into the tooltip accounts for\n            // which legend items are selected. This must happen before timeChartData.push to avoid an\n            // off-by-one error, seriesIndex cannot be used since it's needed to cycle through palette\n            const datasetIndex = timeChartData.length;\n\n            // Each series is stored as a separate dataset source.\n            // https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\n            timeSeriesMapping.push(\n              getTimeSeries(seriesId, datasetIndex, formattedSeriesName, visual, timeScale, seriesColor)\n            );\n\n            timeChartData.push({\n              name: formattedSeriesName,\n              values: getTimeSeriesValues(timeSeries, timeScale),\n            });\n          }\n\n          if (legend && legendItems) {\n            legendItems.push({\n              id: seriesId, // Avoids duplicate key console errors when there are duplicate series names\n              label: formattedSeriesName,\n              color: seriesColor,\n              data: legendCalculations,\n            });\n          }\n\n          // Used for repeating colors in Categorical palette\n          seriesIndex++;\n        }\n      }\n    }\n\n    if (thresholds && thresholds.steps) {\n      // Convert how thresholds are defined in the panel spec to valid ECharts 'line' series.\n      // These are styled with predefined colors and a dashed style to look different than series from query results.\n      // Regular series are used instead of markLines since thresholds currently show in our React TimeSeriesTooltip.\n      const thresholdsColors = chartsTheme.thresholds;\n      const defaultThresholdColor = thresholds.defaultColor ?? thresholdsColors.defaultColor;\n      thresholds.steps.forEach((step: StepOptions, index: number) => {\n        const stepPaletteColor = thresholdsColors.palette[index] ?? defaultThresholdColor;\n        const thresholdLineColor = step.color ?? stepPaletteColor;\n        const stepOption: StepOptions = {\n          color: thresholdLineColor,\n          value:\n            // yAxis is passed here since it corresponds to dashboard JSON instead of the already converted ECharts yAxis\n            thresholds.mode === 'percent'\n              ? convertPercentThreshold(step.value, timeChartData, yAxis?.max, yAxis?.min)\n              : step.value,\n        };\n        const thresholdName = step.name ?? `Threshold ${index + 1}`;\n\n        // Generates array of [time, step.value] where time ranges from timescale.startMs to timescale.endMs with an interval of 15s\n        const thresholdTimeValueTuple: TimeSeriesValueTuple[] = [];\n        let currentTimestamp = timeScale.startMs;\n        while (currentTimestamp <= timeScale.endMs) {\n          thresholdTimeValueTuple.push([currentTimestamp, stepOption.value]);\n          // Used to plot fake thresholds datapoints so correct nearby threshold series shows in tooltip without flicker\n          currentTimestamp += 1000 * THRESHOLD_PLOT_INTERVAL;\n        }\n\n        timeChartData.push({\n          name: thresholdName,\n          values: thresholdTimeValueTuple,\n        });\n        timeSeriesMapping.push(getThresholdSeries(thresholdName, stepOption, seriesIndex));\n        seriesIndex++;\n      });\n    }\n\n    return {\n      timeScale,\n      timeChartData,\n      timeSeriesMapping,\n      legendItems,\n    };\n  }, [\n    queryResults,\n    thresholds,\n    selectedLegendItems,\n    legend,\n    visual,\n    querySettingsList,\n    yAxis?.max,\n    yAxis?.min,\n    categoricalPalette,\n    chartId,\n    chartsTheme.thresholds,\n    muiTheme.palette.primary.main,\n  ]);\n\n  // Translate the legend values into columns for the table legend.\n  const legendColumns = useMemo(() => {\n    if (!legend?.values) {\n      return [];\n    }\n\n    // Iterating the predefined list of possible values to retain a specific\n    // intended order of values.\n    return legendValues.reduce(\n      (columns, legendValue) => {\n        const legendConfig = LEGEND_VALUE_CONFIG[legendValue];\n\n        if (legendConfig && legend?.values?.includes(legendValue)) {\n          columns.push({\n            accessorKey: `data.${legendValue}`,\n            header: legendConfig.label,\n            headerDescription: legendConfig.description,\n            // Intentionally hardcoding a column width to start based on discussions\n            // with design around keeping this simple to start. This may need\n            // revisiting in the future to handle edge cases with very large values.\n            width: 72,\n            align: 'right',\n            cell: ({ getValue }) => {\n              const cellValue = getValue();\n              return typeof cellValue === 'number' && format ? formatValue(cellValue, format) : cellValue;\n            },\n            cellDescription: true,\n            enableSorting: true,\n          });\n        }\n\n        return columns;\n      },\n      [] as Array<TableColumnConfig<LegendItem>>\n    );\n  }, [legend?.values, format]);\n\n  if (adjustedContentDimensions === undefined) {\n    return null;\n  }\n\n  // override default spacing, see: https://echarts.apache.org/en/option.html#grid\n  const gridLeft = yAxis && yAxis.label ? 30 : 20;\n  const gridOverrides: GridComponentOption = {\n    left: !echartsYAxis.show ? 0 : gridLeft,\n    right: 20,\n    bottom: 0,\n  };\n\n  const handleDataZoom = (event: ZoomEventData): void => {\n    // TODO: add ECharts transition animation on zoom\n    setTimeRange({ start: new Date(event.start), end: new Date(event.end) });\n  };\n\n  // Used to opt in to ECharts trigger item which show subgroup data accurately\n  const isStackedBar = visual.display === 'bar' && visual.stack === 'all';\n\n  // Turn on tooltip pinning by default but opt out for stacked bar or if explicitly set in tooltip panel spec\n  let enablePinning = true;\n  if (isStackedBar) {\n    enablePinning = false;\n  } else if (tooltip?.enablePinning !== undefined) {\n    enablePinning = tooltip.enablePinning;\n  }\n  const tooltipConfig: TooltipConfig = {\n    ...DEFAULT_TOOLTIP_CONFIG,\n    enablePinning,\n  };\n\n  return (\n    <Box sx={{ padding: `${contentPadding}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions.width}\n        height={adjustedContentDimensions.height}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems || [],\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: legendColumns,\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              {yAxis && yAxis.show && yAxis.label && <YAxisLabel name={yAxis.label} height={height} />}\n              <TimeSeriesChartBase\n                ref={chartRef}\n                height={height}\n                data={timeChartData}\n                seriesMapping={timeSeriesMapping}\n                timeScale={timeScale}\n                yAxis={echartsYAxis}\n                format={format}\n                grid={gridOverrides}\n                isStackedBar={isStackedBar}\n                tooltipConfig={tooltipConfig}\n                syncGroup=\"default-panel-group\" // TODO: make configurable from dashboard settings and per panel-group overrides\n                onDataZoom={handleDataZoom}\n                //  Show an empty chart when there is no data because the user unselected all items in\n                // the legend. Otherwise, show a \"no data\" message.\n                noDataVariant={!timeChartData.length && legendItems && legendItems.length > 0 ? 'chart' : 'message'}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","useTheme","merge","getTimeSeriesValues","DEFAULT_LEGEND","getCalculations","formatValue","LEGEND_VALUE_CONFIG","useTimeRange","validateLegendSpec","legendValues","YAxisLabel","useChartsTheme","ContentWithLegend","useId","DEFAULT_TOOLTIP_CONFIG","DEFAULT_FORMAT","DEFAULT_VISUAL","THRESHOLD_PLOT_INTERVAL","getTimeSeries","getCommonTimeScaleForQueries","convertPanelYAxis","getThresholdSeries","convertPercentThreshold","getSeriesColor","TimeSeriesChartBase","TimeSeriesChartPanel","props","spec","thresholds","yAxis","tooltip","querySettings","querySettingsList","contentDimensions","queryResults","chartsTheme","muiTheme","chartId","chartRef","categoricalPalette","echartsTheme","color","contentPadding","container","padding","default","adjustedContentDimensions","width","height","undefined","legend","format","visual","echartsYAxis","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","setTimeRange","timeScale","timeChartData","timeSeriesMapping","legendItems","seriesIndex","queryIndex","length","result","item","i","data","series","timeSeries","formattedSeriesName","formattedName","name","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","queryHasMultipleResults","seriesId","legendCalculations","values","isSelectAll","isSelected","showTimeSeries","datasetIndex","push","id","label","steps","thresholdsColors","defaultThresholdColor","defaultColor","forEach","step","index","stepPaletteColor","thresholdLineColor","stepOption","value","mode","max","min","thresholdName","thresholdTimeValueTuple","currentTimestamp","startMs","endMs","legendColumns","reduce","columns","legendValue","legendConfig","includes","accessorKey","header","headerDescription","description","align","cell","getValue","cellValue","cellDescription","enableSorting","gridLeft","gridOverrides","left","show","right","bottom","handleDataZoom","event","start","Date","end","isStackedBar","display","stack","enablePinning","tooltipConfig","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style","ref","seriesMapping","grid","syncGroup","onDataZoom","noDataVariant"],"mappings":"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"}
+{"version":3,"sources":["../../src/TimeSeriesChartPanel.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useMemo, useRef, useState } from 'react';\nimport { Box, useTheme } from '@mui/material';\nimport type { GridComponentOption } from 'echarts';\nimport merge from 'lodash/merge';\nimport {\n  getTimeSeriesValues,\n  DEFAULT_LEGEND,\n  getCalculations,\n  formatValue,\n  StepOptions,\n  TimeSeries,\n  TimeSeriesValueTuple,\n  TimeSeriesData,\n  CalculationType,\n} from '@perses-dev/core';\nimport {\n  LEGEND_VALUE_CONFIG,\n  PanelProps,\n  useTimeRange,\n  validateLegendSpec,\n  legendValues,\n} from '@perses-dev/plugin-system';\nimport {\n  ChartInstance,\n  YAxisLabel,\n  ZoomEventData,\n  useChartsTheme,\n  SelectedLegendItemState,\n  ContentWithLegend,\n  TableColumnConfig,\n  LegendItem,\n  LegendProps,\n  useId,\n  TooltipConfig,\n  DEFAULT_TOOLTIP_CONFIG,\n  TimeChartSeriesMapping,\n} from '@perses-dev/components';\nimport {\n  TimeSeriesChartOptions,\n  DEFAULT_FORMAT,\n  DEFAULT_VISUAL,\n  THRESHOLD_PLOT_INTERVAL,\n  QuerySettingsOptions,\n} from './time-series-chart-model';\nimport {\n  getTimeSeries,\n  getCommonTimeScaleForQueries,\n  convertPanelYAxis,\n  getThresholdSeries,\n  convertPercentThreshold,\n} from './utils/data-transform';\nimport { getSeriesColor } from './utils/palette-gen';\nimport { TimeSeriesChartBase } from './TimeSeriesChartBase';\n\nexport type TimeSeriesChartProps = PanelProps<TimeSeriesChartOptions, TimeSeriesData>;\n\n// Using an \"ALL\" value to handle the case on first loading the chart where we\n// want to select all, but do not want all of the legend items to be visually highlighted.\n// This helps us differentiate those cases more clearly instead of inferring it\n// based on the state of the data. This also helps us avoid some coding\n// complexity around initializing a full record for the initial load that would\n// currently require significantly more refactoring of this component.\n// TODO: simplify this if we switch the list-based legend UI to use checkboxes,\n// where we *would* want to visually select all items in this case.\n\nexport function TimeSeriesChartPanel(props: TimeSeriesChartProps): ReactElement | null {\n  const {\n    spec: { thresholds, yAxis, tooltip, querySettings: querySettingsList },\n    contentDimensions,\n    queryResults,\n  } = props;\n  const chartsTheme = useChartsTheme();\n  const muiTheme = useTheme();\n  const chartId = useId('time-series-panel');\n\n  const chartRef = useRef<ChartInstance>(null);\n\n  // ECharts theme comes from ChartsProvider, more info: https://echarts.apache.org/en/option.html#color\n  // Colors are manually applied since our legend and tooltip are built custom with React.\n  const categoricalPalette = chartsTheme.echartsTheme.color;\n\n  // TODO: consider refactoring how the layout/spacing/alignment are calculated\n  // the next time significant changes are made to the time series panel (e.g.\n  // when making improvements to the legend to more closely match designs).\n  // This may also want to include moving some of this logic down to the shared,\n  // embeddable components.\n  const contentPadding = chartsTheme.container.padding.default;\n  const adjustedContentDimensions: typeof contentDimensions = contentDimensions\n    ? {\n        width: contentDimensions.width - contentPadding * 2,\n        height: contentDimensions.height - contentPadding * 2,\n      }\n    : undefined;\n\n  // populate default 'position' and other future properties\n  const legend = useMemo(() => {\n    return props.spec.legend && validateLegendSpec(props.spec.legend)\n      ? merge({}, DEFAULT_LEGEND, props.spec.legend)\n      : undefined;\n  }, [props.spec.legend]);\n\n  // TODO: add support for y_axis_alt.format\n  const format = props.spec.yAxis?.format ?? DEFAULT_FORMAT;\n\n  // ensures there are fallbacks for unset properties since most\n  // users should not need to customize visual display\n  const visual = useMemo(() => {\n    return merge({}, DEFAULT_VISUAL, props.spec.visual);\n  }, [props.spec.visual]);\n\n  // convert Perses dashboard format to be ECharts compatible\n  const echartsYAxis = useMemo(() => {\n    return convertPanelYAxis(yAxis);\n  }, [yAxis]);\n\n  const [selectedLegendItems, setSelectedLegendItems] = useState<SelectedLegendItemState>('ALL');\n  const [legendSorting, setLegendSorting] = useState<NonNullable<LegendProps['tableProps']>['sorting']>();\n\n  const { setTimeRange } = useTimeRange();\n\n  // Populate series data based on query results\n  const { timeScale, timeChartData, timeSeriesMapping, legendItems } = useMemo(() => {\n    const timeScale = getCommonTimeScaleForQueries(queryResults);\n    if (timeScale === undefined) {\n      return {\n        timeChartData: [],\n        timeSeriesMapping: [],\n      };\n    }\n\n    const legendItems: LegendItem[] = [];\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 timeChartData: TimeSeries[] = [];\n    const timeSeriesMapping: TimeChartSeriesMapping = [];\n\n    // Index is counted across multiple queries which ensures the categorical color palette does not reset for every query\n    let seriesIndex = 0;\n\n    // Mapping of each set of query results to be ECharts option compatible\n    // TODO: Look into performance optimizations and moving parts of mapping to the lower level chart\n    for (let queryIndex = 0; queryIndex < queryResults.length; queryIndex++) {\n      const result = queryResults[queryIndex];\n\n      // Retrieve querySettings for this query, if exists.\n      // queries & querySettings indices do not necessarily match, so we have to check the tail value of the $ref attribute\n      let querySettings: QuerySettingsOptions | undefined;\n      for (const item of querySettingsList ?? []) {\n        if (item.queryIndex === queryIndex) {\n          querySettings = item;\n          // We don't break the loop here just in case there are multiple querySettings defined for the\n          // same queryIndex, because in that case we want the last one to take precedence.\n        }\n      }\n\n      if (result) {\n        for (let i = 0; i < result.data.series.length; i++) {\n          const timeSeries: TimeSeries | undefined = result.data.series[i];\n          if (timeSeries === undefined) {\n            return { timeChartData: [], timeSeriesMapping: [], legendItems: [] };\n          }\n\n          // Format is determined by seriesNameFormat in query spec\n          const formattedSeriesName = timeSeries.formattedName ?? timeSeries.name;\n\n          // Color is used for line, tooltip, and legend\n          const seriesColor = getSeriesColor({\n            // ECharts type for color is not always an array but it is always an array in ChartsProvider\n            categoricalPalette: categoricalPalette as string[],\n            visual,\n            muiPrimaryColor: muiTheme.palette.primary.main,\n            seriesName: formattedSeriesName,\n            seriesIndex,\n            querySettings: querySettings,\n            queryHasMultipleResults: (queryResults[queryIndex]?.data?.series?.length ?? 0) > 1,\n          });\n\n          // We add a unique id for the chart to disambiguate items across charts\n          // when there are multiple on the page.\n          const seriesId = chartId + timeSeries.name + seriesIndex;\n\n          const legendCalculations = legend?.values\n            ? getCalculations(timeSeries.values, legend.values as CalculationType[])\n            : undefined;\n\n          // When we initially load the chart, we want to show all series, but\n          // DO NOT want to visualy highlight all the items in the legend.\n          const isSelectAll = selectedLegendItems === 'ALL';\n          const isSelected = !isSelectAll && !!selectedLegendItems[seriesId];\n          const showTimeSeries = isSelected || isSelectAll;\n\n          if (showTimeSeries) {\n            // Use timeChartData.length to ensure the data that is passed into the tooltip accounts for\n            // which legend items are selected. This must happen before timeChartData.push to avoid an\n            // off-by-one error, seriesIndex cannot be used since it's needed to cycle through palette\n            const datasetIndex = timeChartData.length;\n\n            // Each series is stored as a separate dataset source.\n            // https://apache.github.io/echarts-handbook/en/concepts/dataset/#how-to-reference-several-datasets\n            timeSeriesMapping.push(\n              getTimeSeries(seriesId, datasetIndex, formattedSeriesName, visual, timeScale, seriesColor, querySettings)\n            );\n\n            timeChartData.push({\n              name: formattedSeriesName,\n              values: getTimeSeriesValues(timeSeries, timeScale),\n            });\n          }\n\n          if (legend && legendItems) {\n            legendItems.push({\n              id: seriesId, // Avoids duplicate key console errors when there are duplicate series names\n              label: formattedSeriesName,\n              color: seriesColor,\n              data: legendCalculations,\n            });\n          }\n\n          // Used for repeating colors in Categorical palette\n          seriesIndex++;\n        }\n      }\n    }\n\n    if (thresholds && thresholds.steps) {\n      // Convert how thresholds are defined in the panel spec to valid ECharts 'line' series.\n      // These are styled with predefined colors and a dashed style to look different than series from query results.\n      // Regular series are used instead of markLines since thresholds currently show in our React TimeSeriesTooltip.\n      const thresholdsColors = chartsTheme.thresholds;\n      const defaultThresholdColor = thresholds.defaultColor ?? thresholdsColors.defaultColor;\n      thresholds.steps.forEach((step: StepOptions, index: number) => {\n        const stepPaletteColor = thresholdsColors.palette[index] ?? defaultThresholdColor;\n        const thresholdLineColor = step.color ?? stepPaletteColor;\n        const stepOption: StepOptions = {\n          color: thresholdLineColor,\n          value:\n            // yAxis is passed here since it corresponds to dashboard JSON instead of the already converted ECharts yAxis\n            thresholds.mode === 'percent'\n              ? convertPercentThreshold(step.value, timeChartData, yAxis?.max, yAxis?.min)\n              : step.value,\n        };\n        const thresholdName = step.name ?? `Threshold ${index + 1}`;\n\n        // Generates array of [time, step.value] where time ranges from timescale.startMs to timescale.endMs with an interval of 15s\n        const thresholdTimeValueTuple: TimeSeriesValueTuple[] = [];\n        let currentTimestamp = timeScale.startMs;\n        while (currentTimestamp <= timeScale.endMs) {\n          thresholdTimeValueTuple.push([currentTimestamp, stepOption.value]);\n          // Used to plot fake thresholds datapoints so correct nearby threshold series shows in tooltip without flicker\n          currentTimestamp += 1000 * THRESHOLD_PLOT_INTERVAL;\n        }\n\n        timeChartData.push({\n          name: thresholdName,\n          values: thresholdTimeValueTuple,\n        });\n        timeSeriesMapping.push(getThresholdSeries(thresholdName, stepOption, seriesIndex));\n        seriesIndex++;\n      });\n    }\n\n    return {\n      timeScale,\n      timeChartData,\n      timeSeriesMapping,\n      legendItems,\n    };\n  }, [\n    queryResults,\n    thresholds,\n    selectedLegendItems,\n    legend,\n    visual,\n    querySettingsList,\n    yAxis?.max,\n    yAxis?.min,\n    categoricalPalette,\n    chartId,\n    chartsTheme.thresholds,\n    muiTheme.palette.primary.main,\n  ]);\n\n  // Translate the legend values into columns for the table legend.\n  const legendColumns = useMemo(() => {\n    if (!legend?.values) {\n      return [];\n    }\n\n    // Iterating the predefined list of possible values to retain a specific\n    // intended order of values.\n    return legendValues.reduce(\n      (columns, legendValue) => {\n        const legendConfig = LEGEND_VALUE_CONFIG[legendValue];\n\n        if (legendConfig && legend?.values?.includes(legendValue)) {\n          columns.push({\n            accessorKey: `data.${legendValue}`,\n            header: legendConfig.label,\n            headerDescription: legendConfig.description,\n            // Intentionally hardcoding a column width to start based on discussions\n            // with design around keeping this simple to start. This may need\n            // revisiting in the future to handle edge cases with very large values.\n            width: 72,\n            align: 'right',\n            cell: ({ getValue }) => {\n              const cellValue = getValue();\n              return typeof cellValue === 'number' && format ? formatValue(cellValue, format) : cellValue;\n            },\n            cellDescription: true,\n            enableSorting: true,\n          });\n        }\n\n        return columns;\n      },\n      [] as Array<TableColumnConfig<LegendItem>>\n    );\n  }, [legend?.values, format]);\n\n  if (adjustedContentDimensions === undefined) {\n    return null;\n  }\n\n  // override default spacing, see: https://echarts.apache.org/en/option.html#grid\n  const gridLeft = yAxis && yAxis.label ? 30 : 20;\n  const gridOverrides: GridComponentOption = {\n    left: !echartsYAxis.show ? 0 : gridLeft,\n    right: 20,\n    bottom: 0,\n  };\n\n  const handleDataZoom = (event: ZoomEventData): void => {\n    // TODO: add ECharts transition animation on zoom\n    setTimeRange({ start: new Date(event.start), end: new Date(event.end) });\n  };\n\n  // Used to opt in to ECharts trigger item which show subgroup data accurately\n  const isStackedBar = visual.display === 'bar' && visual.stack === 'all';\n\n  // Turn on tooltip pinning by default but opt out for stacked bar or if explicitly set in tooltip panel spec\n  let enablePinning = true;\n  if (isStackedBar) {\n    enablePinning = false;\n  } else if (tooltip?.enablePinning !== undefined) {\n    enablePinning = tooltip.enablePinning;\n  }\n  const tooltipConfig: TooltipConfig = {\n    ...DEFAULT_TOOLTIP_CONFIG,\n    enablePinning,\n  };\n\n  return (\n    <Box sx={{ padding: `${contentPadding}px` }}>\n      <ContentWithLegend\n        width={adjustedContentDimensions.width}\n        height={adjustedContentDimensions.height}\n        // Making this small enough that the medium size doesn't get\n        // responsive-handling-ed away when in the panel options editor.\n        minChildrenHeight={50}\n        legendSize={legend?.size}\n        legendProps={\n          legend && {\n            options: legend,\n            data: legendItems || [],\n            selectedItems: selectedLegendItems,\n            onSelectedItemsChange: setSelectedLegendItems,\n            tableProps: {\n              columns: legendColumns,\n              sorting: legendSorting,\n              onSortingChange: setLegendSorting,\n            },\n            onItemMouseOver: (e, { id }): void => {\n              chartRef.current?.highlightSeries({ name: id });\n            },\n            onItemMouseOut: (): void => {\n              chartRef.current?.clearHighlightedSeries();\n            },\n          }\n        }\n      >\n        {({ height, width }) => {\n          return (\n            <Box style={{ height, width }}>\n              {yAxis && yAxis.show && yAxis.label && <YAxisLabel name={yAxis.label} height={height} />}\n              <TimeSeriesChartBase\n                ref={chartRef}\n                height={height}\n                data={timeChartData}\n                seriesMapping={timeSeriesMapping}\n                timeScale={timeScale}\n                yAxis={echartsYAxis}\n                format={format}\n                grid={gridOverrides}\n                isStackedBar={isStackedBar}\n                tooltipConfig={tooltipConfig}\n                syncGroup=\"default-panel-group\" // TODO: make configurable from dashboard settings and per panel-group overrides\n                onDataZoom={handleDataZoom}\n                //  Show an empty chart when there is no data because the user unselected all items in\n                // the legend. Otherwise, show a \"no data\" message.\n                noDataVariant={!timeChartData.length && legendItems && legendItems.length > 0 ? 'chart' : 'message'}\n              />\n            </Box>\n          );\n        }}\n      </ContentWithLegend>\n    </Box>\n  );\n}\n"],"names":["useMemo","useRef","useState","Box","useTheme","merge","getTimeSeriesValues","DEFAULT_LEGEND","getCalculations","formatValue","LEGEND_VALUE_CONFIG","useTimeRange","validateLegendSpec","legendValues","YAxisLabel","useChartsTheme","ContentWithLegend","useId","DEFAULT_TOOLTIP_CONFIG","DEFAULT_FORMAT","DEFAULT_VISUAL","THRESHOLD_PLOT_INTERVAL","getTimeSeries","getCommonTimeScaleForQueries","convertPanelYAxis","getThresholdSeries","convertPercentThreshold","getSeriesColor","TimeSeriesChartBase","TimeSeriesChartPanel","props","spec","thresholds","yAxis","tooltip","querySettings","querySettingsList","contentDimensions","queryResults","chartsTheme","muiTheme","chartId","chartRef","categoricalPalette","echartsTheme","color","contentPadding","container","padding","default","adjustedContentDimensions","width","height","undefined","legend","format","visual","echartsYAxis","selectedLegendItems","setSelectedLegendItems","legendSorting","setLegendSorting","setTimeRange","timeScale","timeChartData","timeSeriesMapping","legendItems","seriesIndex","queryIndex","length","result","item","i","data","series","timeSeries","formattedSeriesName","formattedName","name","seriesColor","muiPrimaryColor","palette","primary","main","seriesName","queryHasMultipleResults","seriesId","legendCalculations","values","isSelectAll","isSelected","showTimeSeries","datasetIndex","push","id","label","steps","thresholdsColors","defaultThresholdColor","defaultColor","forEach","step","index","stepPaletteColor","thresholdLineColor","stepOption","value","mode","max","min","thresholdName","thresholdTimeValueTuple","currentTimestamp","startMs","endMs","legendColumns","reduce","columns","legendValue","legendConfig","includes","accessorKey","header","headerDescription","description","align","cell","getValue","cellValue","cellDescription","enableSorting","gridLeft","gridOverrides","left","show","right","bottom","handleDataZoom","event","start","Date","end","isStackedBar","display","stack","enablePinning","tooltipConfig","sx","minChildrenHeight","legendSize","size","legendProps","options","selectedItems","onSelectedItemsChange","tableProps","sorting","onSortingChange","onItemMouseOver","e","current","highlightSeries","onItemMouseOut","clearHighlightedSeries","style","ref","seriesMapping","grid","syncGroup","onDataZoom","noDataVariant"],"mappings":"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"}

package/lib/VisualOptionsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VisualOptionsEditor.d.ts","sourceRoot":"","sources":["../../src/VisualOptionsEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAUL,4BAA4B,EAC7B,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,4BAA4B,CAAC;IACpC,QAAQ,EAAE,CAAC,MAAM,EAAE,4BAA4B,KAAK,IAAI,CAAC;CAC1D;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CA+H/F"}
+{"version":3,"file":"VisualOptionsEditor.d.ts","sourceRoot":"","sources":["../../src/VisualOptionsEditor.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAYL,4BAA4B,EAE7B,MAAM,2BAA2B,CAAC;AAEnC,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,4BAA4B,CAAC;IACpC,QAAQ,EAAE,CAAC,MAAM,EAAE,4BAA4B,KAAK,IAAI,CAAC;CAC1D;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAsJ/F"}

package/lib/VisualOptionsEditor.js

@@ -10,11 +10,11 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { produce } from 'immer';
 import { Slider, Switch, ToggleButton, ToggleButtonGroup } from '@mui/material';
 import { OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';
-import { DEFAULT_AREA_OPACITY, DEFAULT_CONNECT_NULLS, DEFAULT_LINE_WIDTH, DEFAULT_POINT_RADIUS, POINT_SIZE_OFFSET, STACK_CONFIG, STACK_OPTIONS, VISUAL_CONFIG } from './time-series-chart-model';
+import { DEFAULT_AREA_OPACITY, DEFAULT_CONNECT_NULLS, DEFAULT_LINE_WIDTH, DEFAULT_LINE_STYLE, DEFAULT_POINT_RADIUS, POINT_SIZE_OFFSET, STACK_CONFIG, STACK_OPTIONS, LINE_STYLE_CONFIG, VISUAL_CONFIG, DEFAULT_DISPLAY } from './time-series-chart-model';
 export function VisualOptionsEditor({ value, onChange }) {
     const handleLineWidthChange = (_, sliderValue)=>{
         const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;
@@ -35,61 +35,6 @@ export function VisualOptionsEditor({ value, onChange }) {
     return /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
         title: "Visual",
         children: [
-            /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: "Display",
-                control: /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
-                    color: "primary",
-                    exclusive: true,
-                    value: value.display,
-                    onChange: (__, newValue)=>{
-                        onChange({
-                            ...value,
-                            display: newValue
-                        });
-                    },
-                    children: [
-                        /*#__PURE__*/ _jsx(ToggleButton, {
-                            value: "line",
-                            selected: value.display === undefined || value.display === 'line',
-                            "aria-label": "display line series",
-                            children: "Line"
-                        }),
-                        /*#__PURE__*/ _jsx(ToggleButton, {
-                            value: "bar",
-                            "aria-label": "display bar series",
-                            children: "Bar"
-                        })
-                    ]
-                })
-            }),
-            /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: VISUAL_CONFIG.lineWidth.label,
-                control: /*#__PURE__*/ _jsx(Slider, {
-                    "data-testid": VISUAL_CONFIG.lineWidth.testId,
-                    value: value.lineWidth ?? DEFAULT_LINE_WIDTH,
-                    valueLabelDisplay: "auto",
-                    step: VISUAL_CONFIG.lineWidth.step,
-                    marks: true,
-                    min: VISUAL_CONFIG.lineWidth.min,
-                    max: VISUAL_CONFIG.lineWidth.max,
-                    disabled: value.display === 'bar',
-                    onChange: handleLineWidthChange
-                })
-            }),
-            /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: VISUAL_CONFIG.areaOpacity.label,
-                control: /*#__PURE__*/ _jsx(Slider, {
-                    "data-testid": VISUAL_CONFIG.areaOpacity.testId,
-                    value: value.areaOpacity ?? DEFAULT_AREA_OPACITY,
-                    valueLabelDisplay: "auto",
-                    step: VISUAL_CONFIG.areaOpacity.step,
-                    marks: true,
-                    min: VISUAL_CONFIG.areaOpacity.min,
-                    max: VISUAL_CONFIG.areaOpacity.max,
-                    disabled: value.display === 'bar',
-                    onChange: handleAreaOpacityChange
-                })
-            }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: VISUAL_CONFIG.stack.label,
                 control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
@@ -114,17 +59,92 @@ export function VisualOptionsEditor({ value, onChange }) {
                 })
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: VISUAL_CONFIG.connectNulls.label,
-                control: /*#__PURE__*/ _jsx(Switch, {
-                    checked: value.connectNulls ?? DEFAULT_CONNECT_NULLS,
-                    disabled: value.display === 'bar',
-                    onChange: (e)=>{
+                label: "Display",
+                control: /*#__PURE__*/ _jsxs(ToggleButtonGroup, {
+                    color: "primary",
+                    exclusive: true,
+                    value: value.display ?? DEFAULT_DISPLAY,
+                    onChange: (__, newValue)=>{
                         onChange({
                             ...value,
-                            connectNulls: e.target.checked
+                            display: newValue
                         });
-                    }
+                    },
+                    children: [
+                        /*#__PURE__*/ _jsx(ToggleButton, {
+                            value: "line",
+                            selected: value.display === undefined || value.display === 'line',
+                            "aria-label": "display line series",
+                            children: "Line"
+                        }),
+                        /*#__PURE__*/ _jsx(ToggleButton, {
+                            value: "bar",
+                            "aria-label": "display bar series",
+                            children: "Bar"
+                        })
+                    ]
                 })
+            }),
+            value.display === 'line' && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                        label: VISUAL_CONFIG.lineWidth.label,
+                        control: /*#__PURE__*/ _jsx(Slider, {
+                            "data-testid": VISUAL_CONFIG.lineWidth.testId,
+                            value: value.lineWidth ?? DEFAULT_LINE_WIDTH,
+                            valueLabelDisplay: "auto",
+                            step: VISUAL_CONFIG.lineWidth.step,
+                            marks: true,
+                            min: VISUAL_CONFIG.lineWidth.min,
+                            max: VISUAL_CONFIG.lineWidth.max,
+                            onChange: handleLineWidthChange
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                        label: VISUAL_CONFIG.lineStyle.label,
+                        control: /*#__PURE__*/ _jsx(ToggleButtonGroup, {
+                            color: "primary",
+                            exclusive: true,
+                            value: value.lineStyle ?? DEFAULT_LINE_STYLE,
+                            onChange: (__, newValue)=>{
+                                onChange({
+                                    ...value,
+                                    lineStyle: newValue
+                                });
+                            },
+                            children: Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config])=>/*#__PURE__*/ _jsx(ToggleButton, {
+                                    value: styleValue,
+                                    "aria-label": `${styleValue} line style`,
+                                    children: config.label
+                                }, styleValue))
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                        label: VISUAL_CONFIG.areaOpacity.label,
+                        control: /*#__PURE__*/ _jsx(Slider, {
+                            "data-testid": VISUAL_CONFIG.areaOpacity.testId,
+                            value: value.areaOpacity ?? DEFAULT_AREA_OPACITY,
+                            valueLabelDisplay: "auto",
+                            step: VISUAL_CONFIG.areaOpacity.step,
+                            marks: true,
+                            min: VISUAL_CONFIG.areaOpacity.min,
+                            max: VISUAL_CONFIG.areaOpacity.max,
+                            onChange: handleAreaOpacityChange
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                        label: VISUAL_CONFIG.connectNulls.label,
+                        control: /*#__PURE__*/ _jsx(Switch, {
+                            checked: value.connectNulls ?? DEFAULT_CONNECT_NULLS,
+                            onChange: (e)=>{
+                                onChange({
+                                    ...value,
+                                    connectNulls: e.target.checked
+                                });
+                            }
+                        })
+                    })
+                ]
             })
         ]
     });

package/lib/VisualOptionsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/VisualOptionsEditor.tsx"],"sourcesContent":["// Copyright 2023 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 { produce } from 'immer';\nimport { Slider, Switch, ToggleButton, ToggleButtonGroup } from '@mui/material';\nimport { OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport {\n  DEFAULT_AREA_OPACITY,\n  DEFAULT_CONNECT_NULLS,\n  DEFAULT_LINE_WIDTH,\n  DEFAULT_POINT_RADIUS,\n  POINT_SIZE_OFFSET,\n  STACK_CONFIG,\n  StackOptions,\n  STACK_OPTIONS,\n  VISUAL_CONFIG,\n  TimeSeriesChartVisualOptions,\n} from './time-series-chart-model';\n\nexport interface VisualOptionsEditorProps {\n  value: TimeSeriesChartVisualOptions;\n  onChange: (visual: TimeSeriesChartVisualOptions) => void;\n}\n\nexport function VisualOptionsEditor({ value, onChange }: VisualOptionsEditorProps): ReactElement {\n  const handleLineWidthChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    const symbolSize = newValue !== undefined ? newValue + POINT_SIZE_OFFSET : DEFAULT_POINT_RADIUS;\n    onChange(\n      produce(value, (draft) => {\n        draft.lineWidth = newValue;\n        draft.pointRadius = symbolSize;\n      })\n    );\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    onChange(\n      produce(value, (draft) => {\n        draft.areaOpacity = newValue;\n      })\n    );\n  };\n\n  const currentStack: StackOptions = value.stack ?? 'none';\n  const stackConfig = STACK_CONFIG[currentStack];\n\n  return (\n    <OptionsEditorGroup title=\"Visual\">\n      <OptionsEditorControl\n        label=\"Display\"\n        control={\n          <ToggleButtonGroup\n            color=\"primary\"\n            exclusive\n            value={value.display}\n            onChange={(__, newValue) => {\n              onChange({\n                ...value,\n                display: newValue,\n              });\n            }}\n          >\n            <ToggleButton\n              value=\"line\"\n              selected={value.display === undefined || value.display === 'line'}\n              aria-label=\"display line series\"\n            >\n              Line\n            </ToggleButton>\n            <ToggleButton value=\"bar\" aria-label=\"display bar series\">\n              Bar\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      <OptionsEditorControl\n        label={VISUAL_CONFIG.lineWidth.label}\n        control={\n          <Slider\n            data-testid={VISUAL_CONFIG.lineWidth.testId}\n            value={value.lineWidth ?? DEFAULT_LINE_WIDTH}\n            valueLabelDisplay=\"auto\"\n            step={VISUAL_CONFIG.lineWidth.step}\n            marks\n            min={VISUAL_CONFIG.lineWidth.min}\n            max={VISUAL_CONFIG.lineWidth.max}\n            disabled={value.display === 'bar'}\n            onChange={handleLineWidthChange}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label={VISUAL_CONFIG.areaOpacity.label}\n        control={\n          <Slider\n            data-testid={VISUAL_CONFIG.areaOpacity.testId}\n            value={value.areaOpacity ?? DEFAULT_AREA_OPACITY}\n            valueLabelDisplay=\"auto\"\n            step={VISUAL_CONFIG.areaOpacity.step}\n            marks\n            min={VISUAL_CONFIG.areaOpacity.min}\n            max={VISUAL_CONFIG.areaOpacity.max}\n            disabled={value.display === 'bar'}\n            onChange={handleAreaOpacityChange}\n          />\n        }\n      />\n      <OptionsEditorControl\n        label={VISUAL_CONFIG.stack.label}\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...stackConfig,\n              id: currentStack,\n            }}\n            options={STACK_OPTIONS}\n            onChange={(__, newValue) => {\n              const updatedValue: TimeSeriesChartVisualOptions = {\n                ...value,\n                stack: newValue.id === 'none' ? undefined : newValue.id, // stack is optional so remove property when 'None' is selected\n              };\n              // stacked area chart preset to automatically set area under a curve shading\n              if (newValue.id === 'all' && !value.areaOpacity) {\n                updatedValue.areaOpacity = 0.3;\n              }\n              onChange(updatedValue);\n            }}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label={VISUAL_CONFIG.connectNulls.label}\n        control={\n          <Switch\n            checked={value.connectNulls ?? DEFAULT_CONNECT_NULLS}\n            disabled={value.display === 'bar'}\n            onChange={(e) => {\n              onChange({\n                ...value,\n                connectNulls: e.target.checked,\n              });\n            }}\n          />\n        }\n      />\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["produce","Slider","Switch","ToggleButton","ToggleButtonGroup","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","DEFAULT_AREA_OPACITY","DEFAULT_CONNECT_NULLS","DEFAULT_LINE_WIDTH","DEFAULT_POINT_RADIUS","POINT_SIZE_OFFSET","STACK_CONFIG","STACK_OPTIONS","VISUAL_CONFIG","VisualOptionsEditor","value","onChange","handleLineWidthChange","_","sliderValue","newValue","Array","isArray","symbolSize","undefined","draft","lineWidth","pointRadius","handleAreaOpacityChange","areaOpacity","currentStack","stack","stackConfig","title","label","control","color","exclusive","display","__","selected","aria-label","data-testid","testId","valueLabelDisplay","step","marks","min","max","disabled","id","options","updatedValue","disableClearable","connectNulls","checked","e","target"],"mappings":"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"}
+{"version":3,"sources":["../../src/VisualOptionsEditor.tsx"],"sourcesContent":["// Copyright 2023 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 { produce } from 'immer';\nimport { Slider, Switch, ToggleButton, ToggleButtonGroup } from '@mui/material';\nimport { OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport {\n  DEFAULT_AREA_OPACITY,\n  DEFAULT_CONNECT_NULLS,\n  DEFAULT_LINE_WIDTH,\n  DEFAULT_LINE_STYLE,\n  DEFAULT_POINT_RADIUS,\n  POINT_SIZE_OFFSET,\n  STACK_CONFIG,\n  StackOptions,\n  STACK_OPTIONS,\n  LINE_STYLE_CONFIG,\n  VISUAL_CONFIG,\n  TimeSeriesChartVisualOptions,\n  DEFAULT_DISPLAY,\n} from './time-series-chart-model';\n\nexport interface VisualOptionsEditorProps {\n  value: TimeSeriesChartVisualOptions;\n  onChange: (visual: TimeSeriesChartVisualOptions) => void;\n}\n\nexport function VisualOptionsEditor({ value, onChange }: VisualOptionsEditorProps): ReactElement {\n  const handleLineWidthChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    const symbolSize = newValue !== undefined ? newValue + POINT_SIZE_OFFSET : DEFAULT_POINT_RADIUS;\n    onChange(\n      produce(value, (draft) => {\n        draft.lineWidth = newValue;\n        draft.pointRadius = symbolSize;\n      })\n    );\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[]): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    onChange(\n      produce(value, (draft) => {\n        draft.areaOpacity = newValue;\n      })\n    );\n  };\n\n  const currentStack: StackOptions = value.stack ?? 'none';\n  const stackConfig = STACK_CONFIG[currentStack];\n\n  return (\n    <OptionsEditorGroup title=\"Visual\">\n      <OptionsEditorControl\n        label={VISUAL_CONFIG.stack.label}\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...stackConfig,\n              id: currentStack,\n            }}\n            options={STACK_OPTIONS}\n            onChange={(__, newValue) => {\n              const updatedValue: TimeSeriesChartVisualOptions = {\n                ...value,\n                stack: newValue.id === 'none' ? undefined : newValue.id, // stack is optional so remove property when 'None' is selected\n              };\n              // stacked area chart preset to automatically set area under a curve shading\n              if (newValue.id === 'all' && !value.areaOpacity) {\n                updatedValue.areaOpacity = 0.3;\n              }\n              onChange(updatedValue);\n            }}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Display\"\n        control={\n          <ToggleButtonGroup\n            color=\"primary\"\n            exclusive\n            value={value.display ?? DEFAULT_DISPLAY}\n            onChange={(__, newValue) => {\n              onChange({\n                ...value,\n                display: newValue,\n              });\n            }}\n          >\n            <ToggleButton\n              value=\"line\"\n              selected={value.display === undefined || value.display === 'line'}\n              aria-label=\"display line series\"\n            >\n              Line\n            </ToggleButton>\n            <ToggleButton value=\"bar\" aria-label=\"display bar series\">\n              Bar\n            </ToggleButton>\n          </ToggleButtonGroup>\n        }\n      />\n      {value.display === 'line' && (\n        <>\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.lineWidth.label}\n            control={\n              <Slider\n                data-testid={VISUAL_CONFIG.lineWidth.testId}\n                value={value.lineWidth ?? DEFAULT_LINE_WIDTH}\n                valueLabelDisplay=\"auto\"\n                step={VISUAL_CONFIG.lineWidth.step}\n                marks\n                min={VISUAL_CONFIG.lineWidth.min}\n                max={VISUAL_CONFIG.lineWidth.max}\n                onChange={handleLineWidthChange}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.lineStyle.label}\n            control={\n              <ToggleButtonGroup\n                color=\"primary\"\n                exclusive\n                value={value.lineStyle ?? DEFAULT_LINE_STYLE}\n                onChange={(__, newValue) => {\n                  onChange({\n                    ...value,\n                    lineStyle: newValue,\n                  });\n                }}\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            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.areaOpacity.label}\n            control={\n              <Slider\n                data-testid={VISUAL_CONFIG.areaOpacity.testId}\n                value={value.areaOpacity ?? DEFAULT_AREA_OPACITY}\n                valueLabelDisplay=\"auto\"\n                step={VISUAL_CONFIG.areaOpacity.step}\n                marks\n                min={VISUAL_CONFIG.areaOpacity.min}\n                max={VISUAL_CONFIG.areaOpacity.max}\n                onChange={handleAreaOpacityChange}\n              />\n            }\n          />\n          <OptionsEditorControl\n            label={VISUAL_CONFIG.connectNulls.label}\n            control={\n              <Switch\n                checked={value.connectNulls ?? DEFAULT_CONNECT_NULLS}\n                onChange={(e) => {\n                  onChange({\n                    ...value,\n                    connectNulls: e.target.checked,\n                  });\n                }}\n              />\n            }\n          />\n        </>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["produce","Slider","Switch","ToggleButton","ToggleButtonGroup","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","DEFAULT_AREA_OPACITY","DEFAULT_CONNECT_NULLS","DEFAULT_LINE_WIDTH","DEFAULT_LINE_STYLE","DEFAULT_POINT_RADIUS","POINT_SIZE_OFFSET","STACK_CONFIG","STACK_OPTIONS","LINE_STYLE_CONFIG","VISUAL_CONFIG","DEFAULT_DISPLAY","VisualOptionsEditor","value","onChange","handleLineWidthChange","_","sliderValue","newValue","Array","isArray","symbolSize","undefined","draft","lineWidth","pointRadius","handleAreaOpacityChange","areaOpacity","currentStack","stack","stackConfig","title","label","control","id","options","__","updatedValue","disabled","disableClearable","color","exclusive","display","selected","aria-label","data-testid","testId","valueLabelDisplay","step","marks","min","max","lineStyle","Object","entries","map","styleValue","config","connectNulls","checked","e","target"],"mappings":"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"}

package/lib/cjs/{TimeSeriesChartOptionsEditorSettings.js → GeneralSettingsEditor.js}

@@ -14,10 +14,10 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TimeSeriesChartOptionsEditorSettings", {
+Object.defineProperty(exports, "TimeSeriesChartGeneralSettings", {
     enumerable: true,
     get: function() {
-        return TimeSeriesChartOptionsEditorSettings;
+        return TimeSeriesChartGeneralSettings;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -28,8 +28,7 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _timeserieschartmodel = require("./time-series-chart-model");
 const _VisualOptionsEditor = require("./VisualOptionsEditor");
 const _YAxisOptionsEditor = require("./YAxisOptionsEditor");
-const _QuerySettingsEditor = require("./QuerySettingsEditor");
-function TimeSeriesChartOptionsEditorSettings(props) {
+function TimeSeriesChartGeneralSettings(props) {
     const { onChange, value } = props;
     const handleLegendChange = (newLegend)=>{
         // TODO (sjcobb): fix type, add position, fix glitch
@@ -47,11 +46,6 @@ function TimeSeriesChartOptionsEditorSettings(props) {
             draft.yAxis = newYAxis;
         }));
     };
-    const handleQuerySettingsChange = (newQuerySettings)=>{
-        onChange((0, _immer.produce)(value, (draft)=>{
-            draft.querySettings = newQuerySettings;
-        }));
-    };
     const handleThresholdsChange = (thresholds)=>{
         onChange((0, _immer.produce)(value, (draft)=>{
             draft.thresholds = thresholds;
@@ -85,10 +79,6 @@ function TimeSeriesChartOptionsEditorSettings(props) {
                         thresholds: value.thresholds,
                         onChange: handleThresholdsChange
                     }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_QuerySettingsEditor.QuerySettingsEditor, {
-                        querySettingsList: value.querySettings,
-                        onChange: handleQuerySettingsChange
-                    }),
                     /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.OptionsEditorGroup, {
                         title: "Reset Settings",
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Button, {
@@ -96,12 +86,11 @@ function TimeSeriesChartOptionsEditorSettings(props) {
                             color: "secondary",
                             onClick: ()=>{
                                 onChange((0, _immer.produce)(value, (draft)=>{
-                                    // reset button removes all optional panel options
+                                    // reset button removes all general panel options
                                     draft.yAxis = undefined;
                                     draft.legend = undefined;
                                     draft.visual = undefined;
                                     draft.thresholds = undefined;
-                                    draft.querySettings = undefined;
                                 }));
                             },
                             children: "Reset To Defaults"