@perses-dev/timeseries-chart-plugin 0.12.1 → 0.13.0-beta.1

package/lib/QuerySettingsEditor.js

@@ -12,14 +12,14 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { Box, Button, IconButton, Menu, MenuItem, Slider, Stack, TextField, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
-import { OptionsColorPicker, UnitSelector } from '@perses-dev/components';
+import { FormatControls, OptionsColorPicker } from '@perses-dev/components';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import AddIcon from 'mdi-material-ui/Plus';
 import CloseIcon from 'mdi-material-ui/Close';
 import { produce } from 'immer';
 import { useQueryCountContext } from '@perses-dev/plugin-system';
-import { DEFAULT_AREA_OPACITY, OPACITY_CONFIG, LINE_STYLE_CONFIG } from './time-series-chart-model';
+import { DEFAULT_AREA_OPACITY, LINE_STYLE_CONFIG, OPACITY_CONFIG } from './time-series-chart-model';
 const DEFAULT_COLOR_VALUE = '#555';
 const NO_INDEX_AVAILABLE = -1; // invalid array index value used to represent the fact that no query index is available
 export function QuerySettingsEditor(props) {
@@ -156,19 +156,20 @@ export function QuerySettingsEditor(props) {
             qs.areaOpacity = undefined;
         });
     };
-    const addUnit = (i)=>{
+    const addFormat = (i)=>{
         updateQuerySettings(i, (qs)=>{
             qs.format = {
-                unit: 'decimal'
+                unit: 'decimal',
+                shortValues: true
             };
         });
     };
-    const removeUnit = (i)=>{
+    const removeFormat = (i)=>{
         updateQuerySettings(i, (qs)=>{
             qs.format = undefined;
         });
     };
-    const handleUnitChange = (i, format)=>{
+    const handleFormatChange = (i, format)=>{
         updateQuerySettings(i, (qs)=>{
             qs.format = format;
         });
@@ -232,9 +233,9 @@ export function QuerySettingsEditor(props) {
                     onRemoveLineStyle: ()=>removeLineStyle(i),
                     onAddAreaOpacity: ()=>addAreaOpacity(i),
                     onRemoveAreaOpacity: ()=>removeAreaOpacity(i),
-                    onAddUnit: ()=>addUnit(i),
-                    onRemoveUnit: ()=>removeUnit(i),
-                    onUnitChange: (format)=>handleUnitChange(i, format)
+                    onAddFormat: ()=>addFormat(i),
+                    onRemoveFormat: ()=>removeFormat(i),
+                    onFormatChange: (format)=>handleFormatChange(i, format)
                 }, i)),
             queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && /*#__PURE__*/ _jsx(Button, {
                 variant: "contained",
@@ -248,7 +249,7 @@ export function QuerySettingsEditor(props) {
         ]
     });
 }
-function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddUnit, onRemoveUnit, onUnitChange }) {
+function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddFormat, onRemoveFormat, onFormatChange }) {
     // current query index should also be selectable
     const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b)=>a - b);
     // State for dropdown menu
@@ -272,9 +273,9 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
             action: onAddAreaOpacity
         });
         if (format === undefined) options.push({
-            key: 'unit',
-            label: 'Unit',
-            action: onAddUnit
+            key: 'format',
+            label: 'Format',
+            action: onAddFormat
         });
         return options;
     }, [
@@ -285,7 +286,7 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
         onAddColor,
         onAddLineStyle,
         onAddAreaOpacity,
-        onAddUnit
+        onAddFormat
     ]);
     const handleAddMenuClick = (event)=>{
         if (availableOptions.length === 1 && availableOptions[0]) {
@@ -303,172 +304,183 @@ function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue
         action();
         handleMenuClose();
     };
-    return /*#__PURE__*/ _jsx(Stack, {
+    return /*#__PURE__*/ _jsxs(Stack, {
         sx: {
             borderBottom: '1px solid',
             borderColor: 'divider',
             borderRadius: 1,
-            p: 2
+            p: 2,
+            display: 'flex',
+            flexWrap: 'nowrap',
+            flexDirection: 'row'
         },
-        children: /*#__PURE__*/ _jsxs(Stack, {
-            direction: "row",
-            alignItems: "center",
-            sx: {
-                flexWrap: 'wrap',
-                gap: 2
-            },
-            children: [
-                /*#__PURE__*/ _jsx(TextField, {
-                    select: true,
-                    inputRef: inputRef,
-                    value: queryIndex,
-                    label: "Query",
-                    onChange: onQueryIndexChange,
-                    sx: {
-                        minWidth: '75px'
-                    },
-                    children: selectableQueryIndexes.map((qi)=>/*#__PURE__*/ _jsxs(MenuItem, {
-                            value: qi,
-                            children: [
-                                "#",
-                                qi + 1
-                            ]
-                        }, `query-${qi}`))
-                }),
-                colorMode && /*#__PURE__*/ _jsxs(SettingsSection, {
-                    label: "Color",
-                    onRemove: onRemoveColor,
-                    children: [
-                        /*#__PURE__*/ _jsxs(TextField, {
-                            select: true,
-                            value: colorMode,
-                            onChange: onColorModeChange,
-                            size: "small",
-                            sx: {
-                                flexGrow: 1
-                            },
-                            children: [
-                                /*#__PURE__*/ _jsx(MenuItem, {
-                                    value: "fixed-single",
-                                    children: "Fixed (single)"
-                                }),
-                                /*#__PURE__*/ _jsx(MenuItem, {
-                                    value: "fixed",
-                                    children: "Fixed"
-                                })
-                            ]
-                        }),
-                        /*#__PURE__*/ _jsx(OptionsColorPicker, {
-                            label: `Query n°${queryIndex + 1}`,
-                            color: colorValue || DEFAULT_COLOR_VALUE,
-                            onColorChange: onColorValueChange
-                        })
-                    ]
-                }),
-                lineStyle && /*#__PURE__*/ _jsxs(SettingsSection, {
-                    label: "Line Style",
-                    onRemove: onRemoveLineStyle,
-                    children: [
-                        /*#__PURE__*/ _jsx(ToggleButtonGroup, {
-                            color: "primary",
-                            exclusive: true,
-                            value: lineStyle,
-                            onChange: (__, newValue)=>{
-                                if (newValue !== null) {
-                                    onLineStyleChange(newValue);
-                                }
-                            },
-                            size: "small",
-                            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(Box, {
-                            sx: {
-                                flexGrow: 1
-                            }
-                        })
-                    ]
-                }),
-                areaOpacity !== undefined && /*#__PURE__*/ _jsxs(SettingsSection, {
-                    label: "Opacity",
-                    onRemove: onRemoveAreaOpacity,
-                    children: [
-                        /*#__PURE__*/ _jsx(Box, {}),
-                        /*#__PURE__*/ _jsx(Slider, {
-                            value: areaOpacity,
-                            valueLabelDisplay: "auto",
-                            step: OPACITY_CONFIG.step,
-                            marks: true,
-                            min: OPACITY_CONFIG.min,
-                            max: OPACITY_CONFIG.max,
-                            onChange: onAreaOpacityChange,
-                            sx: {
-                                flexGrow: 1
-                            }
-                        })
-                    ]
-                }),
-                format !== undefined && /*#__PURE__*/ _jsx(SettingsSection, {
-                    label: "Unit",
-                    onRemove: onRemoveUnit,
-                    children: /*#__PURE__*/ _jsx(Box, {
+        children: [
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                alignItems: "center",
+                sx: {
+                    flexWrap: 'wrap',
+                    gap: 2,
+                    flexGrow: 1
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(TextField, {
+                        select: true,
+                        inputRef: inputRef,
+                        value: queryIndex,
+                        label: "Query",
+                        onChange: onQueryIndexChange,
                         sx: {
-                            minWidth: '180px'
+                            minWidth: '75px'
                         },
-                        children: /*#__PURE__*/ _jsx(UnitSelector, {
-                            value: format,
-                            onChange: onUnitChange
-                        })
-                    })
-                }),
-                availableOptions.length > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
-                    children: [
-                        /*#__PURE__*/ _jsx(IconButton, {
-                            onClick: handleAddMenuClick,
-                            "aria-label": "Add option",
-                            children: /*#__PURE__*/ _jsx(AddIcon, {})
-                        }),
-                        /*#__PURE__*/ _jsx(Menu, {
-                            anchorEl: anchorEl,
-                            open: Boolean(anchorEl),
-                            onClose: handleMenuClose,
-                            anchorOrigin: {
-                                vertical: 'bottom',
-                                horizontal: 'left'
+                        children: selectableQueryIndexes.map((qi)=>/*#__PURE__*/ _jsxs(MenuItem, {
+                                value: qi,
+                                children: [
+                                    "#",
+                                    qi + 1
+                                ]
+                            }, `query-${qi}`))
+                    }),
+                    colorMode && /*#__PURE__*/ _jsxs(SettingsSection, {
+                        label: "Color",
+                        onRemove: onRemoveColor,
+                        children: [
+                            /*#__PURE__*/ _jsxs(TextField, {
+                                select: true,
+                                value: colorMode,
+                                onChange: onColorModeChange,
+                                size: "small",
+                                sx: {
+                                    flexGrow: 1
+                                },
+                                children: [
+                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                        value: "fixed-single",
+                                        children: "Fixed (single)"
+                                    }),
+                                    /*#__PURE__*/ _jsx(MenuItem, {
+                                        value: "fixed",
+                                        children: "Fixed"
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ _jsx(OptionsColorPicker, {
+                                label: `Query n°${queryIndex + 1}`,
+                                color: colorValue || DEFAULT_COLOR_VALUE,
+                                onColorChange: onColorValueChange
+                            })
+                        ]
+                    }),
+                    lineStyle && /*#__PURE__*/ _jsxs(SettingsSection, {
+                        label: "Line Style",
+                        onRemove: onRemoveLineStyle,
+                        children: [
+                            /*#__PURE__*/ _jsx(ToggleButtonGroup, {
+                                color: "primary",
+                                exclusive: true,
+                                value: lineStyle,
+                                onChange: (__, newValue)=>{
+                                    if (newValue !== null) {
+                                        onLineStyleChange(newValue);
+                                    }
+                                },
+                                size: "small",
+                                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(Box, {
+                                sx: {
+                                    flexGrow: 1
+                                }
+                            })
+                        ]
+                    }),
+                    areaOpacity !== undefined && /*#__PURE__*/ _jsxs(SettingsSection, {
+                        label: "Opacity",
+                        onRemove: onRemoveAreaOpacity,
+                        children: [
+                            /*#__PURE__*/ _jsx(Box, {}),
+                            /*#__PURE__*/ _jsx(Slider, {
+                                value: areaOpacity,
+                                valueLabelDisplay: "auto",
+                                step: OPACITY_CONFIG.step,
+                                marks: true,
+                                min: OPACITY_CONFIG.min,
+                                max: OPACITY_CONFIG.max,
+                                onChange: onAreaOpacityChange,
+                                sx: {
+                                    flexGrow: 1
+                                }
+                            })
+                        ]
+                    }),
+                    format !== undefined && /*#__PURE__*/ _jsx(SettingsSection, {
+                        label: "Format",
+                        onRemove: onRemoveFormat,
+                        children: /*#__PURE__*/ _jsx(Box, {
+                            sx: {
+                                minWidth: '180px',
+                                display: 'flex',
+                                gap: 1,
+                                flexDirection: 'column'
                             },
-                            children: availableOptions.map((option)=>/*#__PURE__*/ _jsxs(MenuItem, {
-                                    onClick: ()=>handleMenuItemClick(option.action),
-                                    sx: {
-                                        minWidth: '120px'
-                                    },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(AddIcon, {
-                                            sx: {
-                                                mr: 1,
-                                                fontSize: '1rem'
-                                            }
-                                        }),
-                                        option.label
-                                    ]
-                                }, option.key))
+                            children: /*#__PURE__*/ _jsx(FormatControls, {
+                                value: format,
+                                onChange: onFormatChange
+                            })
                         })
-                    ]
-                }),
-                /*#__PURE__*/ _jsx(Box, {
-                    sx: {
-                        flexGrow: 1
-                    }
-                }),
-                /*#__PURE__*/ _jsx(IconButton, {
+                    }),
+                    availableOptions.length > 0 && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(IconButton, {
+                                onClick: handleAddMenuClick,
+                                "aria-label": "Add option",
+                                children: /*#__PURE__*/ _jsx(AddIcon, {})
+                            }),
+                            /*#__PURE__*/ _jsx(Menu, {
+                                anchorEl: anchorEl,
+                                open: Boolean(anchorEl),
+                                onClose: handleMenuClose,
+                                anchorOrigin: {
+                                    vertical: 'bottom',
+                                    horizontal: 'left'
+                                },
+                                children: availableOptions.map((option)=>/*#__PURE__*/ _jsxs(MenuItem, {
+                                        onClick: ()=>handleMenuItemClick(option.action),
+                                        sx: {
+                                            minWidth: '120px'
+                                        },
+                                        children: [
+                                            /*#__PURE__*/ _jsx(AddIcon, {
+                                                sx: {
+                                                    mr: 1,
+                                                    fontSize: '1rem'
+                                                }
+                                            }),
+                                            option.label
+                                        ]
+                                    }, option.key))
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center'
+                },
+                children: /*#__PURE__*/ _jsx(IconButton, {
                     "aria-label": `delete settings for query n°${queryIndex + 1}`,
                     onClick: onDelete,
                     children: /*#__PURE__*/ _jsx(DeleteIcon, {})
                 })
-            ]
-        })
+            })
+        ]
     });
 }
 // Reusable section component

package/lib/QuerySettingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/QuerySettingsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  IconButton,\n  Menu,\n  MenuItem,\n  Slider,\n  Stack,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport { OptionsColorPicker, UnitSelector } from '@perses-dev/components';\nimport { FormatOptions } from '@perses-dev/core';\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[]): void => {\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.querySettings = newQuerySettings;\n      })\n    );\n  };\n  // Every time a new query settings input is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [querySettingsList?.length]);\n\n  const handleQueryIndexChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const querySettings = draft?.[i];\n          if (querySettings) {\n            querySettings.queryIndex = parseInt(e.target.value);\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorModeChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              const newColorMode = e.target.value;\n              if (!newColorMode) {\n                querySettings.colorMode = undefined;\n                querySettings.colorValue = undefined;\n              } else {\n                querySettings.colorMode = newColorMode as QuerySettingsOptions['colorMode'];\n              }\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorValueChange = (colorValue: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.colorValue = colorValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleLineStyleChange = (lineStyle: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.lineStyle = lineStyle as QuerySettingsOptions['lineStyle'];\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[], i: number): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.areaOpacity = newValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  // Helper function to update query settings at a specific index\n  const updateQuerySettings = (i: number, updater: (qs: QuerySettingsOptions) => void): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const qs = draft[i];\n          if (qs) {\n            updater(qs);\n          }\n        })\n      );\n    }\n  };\n\n  const deleteQuerySettingsInput = (i: number): void => {\n    if (querySettingsList !== undefined) {\n      const updatedQuerySettingsList = produce(querySettingsList, (draft) => {\n        draft.splice(i, 1);\n      });\n      handleQuerySettingsChange(updatedQuerySettingsList);\n    }\n  };\n\n  const addColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = 'fixed-single';\n      qs.colorValue = DEFAULT_COLOR_VALUE;\n    });\n  };\n\n  const removeColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = undefined;\n      qs.colorValue = undefined;\n    });\n  };\n\n  const addLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = 'solid';\n    });\n  };\n\n  const removeLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = undefined;\n    });\n  };\n\n  const addAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = DEFAULT_AREA_OPACITY;\n    });\n  };\n\n  const removeAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = undefined;\n    });\n  };\n\n  const addUnit = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = { unit: 'decimal' };\n    });\n  };\n\n  const removeUnit = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = undefined;\n    });\n  };\n\n  const handleUnitChange = (i: number, format?: FormatOptions): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = format;\n    });\n  };\n\n  const queryCount = useQueryCountContext();\n\n  // Compute the list of query indexes for which query settings are not already defined.\n  // This is to avoid already-booked indexes to still be selectable in the dropdown(s)\n  const availableQueryIndexes = useMemo(() => {\n    const bookedQueryIndexes = querySettingsList?.map((querySettings) => querySettings.queryIndex) ?? [];\n    const allQueryIndexes = Array.from({ length: queryCount }, (_, i) => i);\n    return allQueryIndexes.filter((_, queryIndex) => !bookedQueryIndexes.includes(queryIndex));\n  }, [querySettingsList, queryCount]);\n\n  const firstAvailableQueryIndex = useMemo(() => {\n    return availableQueryIndexes[0] ?? NO_INDEX_AVAILABLE;\n  }, [availableQueryIndexes]);\n\n  const defaultQuerySettings: QuerySettingsOptions = {\n    queryIndex: firstAvailableQueryIndex,\n  };\n\n  const addQuerySettingsInput = (): void => {\n    focusRef.current = true;\n    if (querySettingsList === undefined) {\n      handleQuerySettingsChange([defaultQuerySettings]);\n    } else {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          draft.push(defaultQuerySettings);\n        })\n      );\n    }\n  };\n\n  return (\n    <Stack>\n      {queryCount === 0 ? (\n        <Typography mb={2} fontStyle=\"italic\">\n          No query defined\n        </Typography>\n      ) : (\n        querySettingsList?.length &&\n        querySettingsList.map((querySettings, i) => (\n          <QuerySettingsInput\n            inputRef={i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined}\n            key={i}\n            querySettings={querySettings}\n            availableQueryIndexes={availableQueryIndexes}\n            onQueryIndexChange={(e) => {\n              handleQueryIndexChange(e, i);\n            }}\n            onColorModeChange={(e) => handleColorModeChange(e, i)}\n            onColorValueChange={(color) => handleColorValueChange(color, i)}\n            onLineStyleChange={(lineStyle) => handleLineStyleChange(lineStyle, i)}\n            onAreaOpacityChange={(event, value) => handleAreaOpacityChange(event, value, i)}\n            onDelete={() => {\n              deleteQuerySettingsInput(i);\n            }}\n            onAddColor={() => addColor(i)}\n            onRemoveColor={() => removeColor(i)}\n            onAddLineStyle={() => addLineStyle(i)}\n            onRemoveLineStyle={() => removeLineStyle(i)}\n            onAddAreaOpacity={() => addAreaOpacity(i)}\n            onRemoveAreaOpacity={() => removeAreaOpacity(i)}\n            onAddUnit={() => addUnit(i)}\n            onRemoveUnit={() => removeUnit(i)}\n            onUnitChange={(format) => handleUnitChange(i, format)}\n          />\n        ))\n      )}\n      {queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && (\n        <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={addQuerySettingsInput}>\n          Add Query Settings\n        </Button>\n      )}\n    </Stack>\n  );\n}\n\ninterface QuerySettingsInputProps {\n  querySettings: QuerySettingsOptions;\n  availableQueryIndexes: number[];\n  onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorValueChange: (colorValue: string) => void;\n  onLineStyleChange: (lineStyle: string) => void;\n  onAreaOpacityChange: (event: Event, value: number | number[]) => void;\n  onDelete: () => void;\n  inputRef?: React.RefObject<HTMLInputElement | null>;\n  // Optional control handlers\n  onAddColor: () => void;\n  onRemoveColor: () => void;\n  onAddLineStyle: () => void;\n  onRemoveLineStyle: () => void;\n  onAddAreaOpacity: () => void;\n  onRemoveAreaOpacity: () => void;\n  onAddUnit: () => void;\n  onRemoveUnit: () => void;\n  onUnitChange: (format?: FormatOptions) => void;\n}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format },\n  availableQueryIndexes,\n  onQueryIndexChange,\n  onColorModeChange,\n  onColorValueChange,\n  onLineStyleChange,\n  onAreaOpacityChange,\n  onDelete,\n  inputRef,\n  onAddColor: onAddColor,\n  onRemoveColor: onRemoveColor,\n  onAddLineStyle,\n  onRemoveLineStyle,\n  onAddAreaOpacity,\n  onRemoveAreaOpacity,\n  onAddUnit,\n  onRemoveUnit,\n  onUnitChange,\n}: QuerySettingsInputProps): ReactElement {\n  // current query index should also be selectable\n  const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b) => a - b);\n\n  // State for dropdown menu\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  // Calculate available options\n  const availableOptions = useMemo(() => {\n    const options = [];\n    if (!colorMode) options.push({ key: 'color', label: 'Color', action: onAddColor });\n    if (!lineStyle) options.push({ key: 'lineStyle', label: 'Line Style', action: onAddLineStyle });\n    if (areaOpacity === undefined) options.push({ key: 'opacity', label: 'Opacity', action: onAddAreaOpacity });\n    if (format === undefined) options.push({ key: 'unit', label: 'Unit', action: onAddUnit });\n    return options;\n  }, [colorMode, lineStyle, areaOpacity, format, onAddColor, onAddLineStyle, onAddAreaOpacity, onAddUnit]);\n\n  const handleAddMenuClick = (event: React.MouseEvent<HTMLElement>): void => {\n    if (availableOptions.length === 1 && availableOptions[0]) {\n      // If only one option left, add it directly\n      availableOptions[0].action();\n    } else {\n      // Show dropdown\n      setAnchorEl(event.currentTarget);\n    }\n  };\n\n  const handleMenuClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const handleMenuItemClick = (action: () => void): void => {\n    action();\n    handleMenuClose();\n  };\n\n  return (\n    <Stack sx={{ borderBottom: '1px solid', borderColor: 'divider', borderRadius: 1, p: 2 }}>\n      <Stack direction=\"row\" alignItems=\"center\" sx={{ flexWrap: 'wrap', gap: 2 }}>\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        {/* Unit section */}\n        {format !== undefined && (\n          <SettingsSection label=\"Unit\" onRemove={onRemoveUnit}>\n            <Box sx={{ minWidth: '180px' }}>\n              <UnitSelector value={format} onChange={onUnitChange} />\n            </Box>\n          </SettingsSection>\n        )}\n\n        {/* Add Options Button - only show if there are available options */}\n        {availableOptions.length > 0 && (\n          <>\n            <IconButton onClick={handleAddMenuClick} aria-label=\"Add option\">\n              <AddIcon />\n            </IconButton>\n\n            {/* Dropdown Menu */}\n            <Menu\n              anchorEl={anchorEl}\n              open={Boolean(anchorEl)}\n              onClose={handleMenuClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'left',\n              }}\n            >\n              {availableOptions.map((option) => (\n                <MenuItem\n                  key={option.key}\n                  onClick={() => handleMenuItemClick(option.action)}\n                  sx={{ minWidth: '120px' }}\n                >\n                  <AddIcon sx={{ mr: 1, fontSize: '1rem' }} />\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Menu>\n          </>\n        )}\n\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","UnitSelector","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","addUnit","format","unit","removeUnit","handleUnitChange","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","onAddUnit","onRemoveUnit","onUnitChange","variant","startIcon","sx","marginTop","onClick","selectableQueryIndexes","concat","sort","a","b","anchorEl","setAnchorEl","availableOptions","options","key","label","action","handleAddMenuClick","currentTarget","handleMenuClose","handleMenuItemClick","borderBottom","borderColor","borderRadius","p","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","spacing","border"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SACEA,GAAG,EACHC,MAAM,EACNC,UAAU,EACVC,IAAI,EACJC,QAAQ,EACRC,MAAM,EACNC,KAAK,EACLC,SAAS,EACTC,YAAY,EACZC,iBAAiB,EACjBC,UAAU,EACVC,QAAQ,QACH,gBAAgB;AACvB,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,yBAAyB;AAE1E,OAAOC,SAAuBC,SAAS,EAAEC,OAAO,EAAEC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAClF,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,aAAa,uBAAuB;AAC3C,OAAOC,eAAe,wBAAwB;AAC9C,SAASC,OAAO,QAAQ,QAAQ;AAChC,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,SAIEC,oBAAoB,EACpBC,cAAc,EACdC,iBAAiB,QACZ,4BAA4B;AAEnC,MAAMC,sBAAsB;AAC5B,MAAMC,qBAAqB,CAAC,GAAG,wFAAwF;AAEvH,OAAO,SAASC,oBAAoBC,KAAwC;IAC1E,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAC5B,MAAMG,oBAAoBD,MAAME,aAAa;IAE7C,MAAMC,4BAA4B,CAACC;QACjCL,SACET,QAAQU,OAAO,CAACK;YACdA,MAAMH,aAAa,GAAGE;QACxB;IAEJ;IACA,4FAA4F;IAC5F,MAAME,wBAAwBrB,OAAgC;IAC9D,MAAMsB,WAAWtB,OAAO;IACxBF,UAAU;QACR,IAAI,CAACuB,sBAAsBE,OAAO,IAAI,CAACD,SAASC,OAAO,EAAE;QACzDF,sBAAsBE,OAAO,EAAEC;QAC/BF,SAASC,OAAO,GAAG;IACrB,GAAG;QAACP,mBAAmBS;KAAO;IAE9B,MAAMC,yBAAyB,CAACC,GAAwCC;QACtE,IAAIZ,sBAAsBa,WAAW;YACnCX,0BACEb,QAAQW,mBAAmB,CAACI;gBAC1B,MAAMH,gBAAgBG,OAAO,CAACQ,EAAE;gBAChC,IAAIX,eAAe;oBACjBA,cAAca,UAAU,GAAGC,SAASJ,EAAEK,MAAM,CAACjB,KAAK;gBACpD;YACF;QAEJ;IACF;IAEA,MAAMkB,wBAAwB,CAACN,GAAwCC;QACrE,IAAIZ,sBAAsBa,WAAW;YACnCX,0BACEb,QAAQW,mBAAmB,CAACI;gBAC1B,IAAIA,UAAUS,WAAW;oBACvB,MAAMZ,gBAAgBG,KAAK,CAACQ,EAAE;oBAC9B,IAAIX,eAAe;wBACjB,MAAMiB,eAAeP,EAAEK,MAAM,CAACjB,KAAK;wBACnC,IAAI,CAACmB,cAAc;4BACjBjB,cAAckB,SAAS,GAAGN;4BAC1BZ,cAAcmB,UAAU,GAAGP;wBAC7B,OAAO;4BACLZ,cAAckB,SAAS,GAAGD;wBAC5B;oBACF;gBACF;YACF;QAEJ;IACF;IAEA,MAAMG,yBAAyB,CAACD,YAAoBR;QAClD,IAAIZ,sBAAsBa,WAAW;YACnCX,0BACEb,QAAQW,mBAAmB,CAACI;gBAC1B,IAAIA,UAAUS,WAAW;oBACvB,MAAMZ,gBAAgBG,KAAK,CAACQ,EAAE;oBAC9B,IAAIX,eAAe;wBACjBA,cAAcmB,UAAU,GAAGA;oBAC7B;gBACF;YACF;QAEJ;IACF;IAEA,MAAME,wBAAwB,CAACC,WAAmBX;QAChD,IAAIZ,sBAAsBa,WAAW;YACnCX,0BACEb,QAAQW,mBAAmB,CAACI;gBAC1B,IAAIA,UAAUS,WAAW;oBACvB,MAAMZ,gBAAgBG,KAAK,CAACQ,EAAE;oBAC9B,IAAIX,eAAe;wBACjBA,cAAcsB,SAAS,GAAGA;oBAC5B;gBACF;YACF;QAEJ;IACF;IAEA,MAAMC,0BAA0B,CAACC,GAAUC,aAAgCd;QACzE,MAAMe,WAAWC,MAAMC,OAAO,CAACH,eAAeA,WAAW,CAAC,EAAE,GAAGA;QAC/D,IAAI1B,sBAAsBa,WAAW;YACnCX,0BACEb,QAAQW,mBAAmB,CAACI;gBAC1B,IAAIA,UAAUS,WAAW;oBACvB,MAAMZ,gBAAgBG,KAAK,CAACQ,EAAE;oBAC9B,IAAIX,eAAe;wBACjBA,cAAc6B,WAAW,GAAGH;oBAC9B;gBACF;YACF;QAEJ;IACF;IAEA,+DAA+D;IAC/D,MAAMI,sBAAsB,CAACnB,GAAWoB;QACtC,IAAIhC,sBAAsBa,WAAW;YACnCX,0BACEb,QAAQW,mBAAmB,CAACI;gBAC1B,MAAM6B,KAAK7B,KAAK,CAACQ,EAAE;gBACnB,IAAIqB,IAAI;oBACND,QAAQC;gBACV;YACF;QAEJ;IACF;IAEA,MAAMC,2BAA2B,CAACtB;QAChC,IAAIZ,sBAAsBa,WAAW;YACnC,MAAMsB,2BAA2B9C,QAAQW,mBAAmB,CAACI;gBAC3DA,MAAMgC,MAAM,CAACxB,GAAG;YAClB;YACAV,0BAA0BiC;QAC5B;IACF;IAEA,MAAME,WAAW,CAACzB;QAChBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGd,SAAS,GAAG;YACfc,GAAGb,UAAU,GAAG1B;QAClB;IACF;IAEA,MAAM4C,cAAc,CAAC1B;QACnBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGd,SAAS,GAAGN;YACfoB,GAAGb,UAAU,GAAGP;QAClB;IACF;IAEA,MAAM0B,eAAe,CAAC3B;QACpBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGV,SAAS,GAAG;QACjB;IACF;IAEA,MAAMiB,kBAAkB,CAAC5B;QACvBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGV,SAAS,GAAGV;QACjB;IACF;IAEA,MAAM4B,iBAAiB,CAAC7B;QACtBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGH,WAAW,GAAGvC;QACnB;IACF;IAEA,MAAMmD,oBAAoB,CAAC9B;QACzBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGH,WAAW,GAAGjB;QACnB;IACF;IAEA,MAAM8B,UAAU,CAAC/B;QACfmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGW,MAAM,GAAG;gBAAEC,MAAM;YAAU;QAChC;IACF;IAEA,MAAMC,aAAa,CAAClC;QAClBmB,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGW,MAAM,GAAG/B;QACd;IACF;IAEA,MAAMkC,mBAAmB,CAACnC,GAAWgC;QACnCb,oBAAoBnB,GAAG,CAACqB;YACtBA,GAAGW,MAAM,GAAGA;QACd;IACF;IAEA,MAAMI,aAAa1D;IAEnB,sFAAsF;IACtF,oFAAoF;IACpF,MAAM2D,wBAAwBlE,QAAQ;QACpC,MAAMmE,qBAAqBlD,mBAAmBmD,IAAI,CAAClD,gBAAkBA,cAAca,UAAU,KAAK,EAAE;QACpG,MAAMsC,kBAAkBxB,MAAMyB,IAAI,CAAC;YAAE5C,QAAQuC;QAAW,GAAG,CAACvB,GAAGb,IAAMA;QACrE,OAAOwC,gBAAgBE,MAAM,CAAC,CAAC7B,GAAGX,aAAe,CAACoC,mBAAmBK,QAAQ,CAACzC;IAChF,GAAG;QAACd;QAAmBgD;KAAW;IAElC,MAAMQ,2BAA2BzE,QAAQ;QACvC,OAAOkE,qBAAqB,CAAC,EAAE,IAAItD;IACrC,GAAG;QAACsD;KAAsB;IAE1B,MAAMQ,uBAA6C;QACjD3C,YAAY0C;IACd;IAEA,MAAME,wBAAwB;QAC5BpD,SAASC,OAAO,GAAG;QACnB,IAAIP,sBAAsBa,WAAW;YACnCX,0BAA0B;gBAACuD;aAAqB;QAClD,OAAO;YACLvD,0BACEb,QAAQW,mBAAmB,CAACI;gBAC1BA,MAAMuD,IAAI,CAACF;YACb;QAEJ;IACF;IAEA,qBACE,MAACpF;;YACE2E,eAAe,kBACd,KAACvE;gBAAWmF,IAAI;gBAAGC,WAAU;0BAAS;iBAItC7D,mBAAmBS,UACnBT,kBAAkBmD,GAAG,CAAC,CAAClD,eAAeW,kBACpC,KAACkD;oBACCC,UAAUnD,MAAMZ,kBAAkBS,MAAM,GAAG,IAAIJ,wBAAwBQ;oBAEvEZ,eAAeA;oBACfgD,uBAAuBA;oBACvBe,oBAAoB,CAACrD;wBACnBD,uBAAuBC,GAAGC;oBAC5B;oBACAqD,mBAAmB,CAACtD,IAAMM,sBAAsBN,GAAGC;oBACnDsD,oBAAoB,CAACC,QAAU9C,uBAAuB8C,OAAOvD;oBAC7DwD,mBAAmB,CAAC7C,YAAcD,sBAAsBC,WAAWX;oBACnEyD,qBAAqB,CAACC,OAAOvE,QAAUyB,wBAAwB8C,OAAOvE,OAAOa;oBAC7E2D,UAAU;wBACRrC,yBAAyBtB;oBAC3B;oBACA4D,YAAY,IAAMnC,SAASzB;oBAC3B6D,eAAe,IAAMnC,YAAY1B;oBACjC8D,gBAAgB,IAAMnC,aAAa3B;oBACnC+D,mBAAmB,IAAMnC,gBAAgB5B;oBACzCgE,kBAAkB,IAAMnC,eAAe7B;oBACvCiE,qBAAqB,IAAMnC,kBAAkB9B;oBAC7CkE,WAAW,IAAMnC,QAAQ/B;oBACzBmE,cAAc,IAAMjC,WAAWlC;oBAC/BoE,cAAc,CAACpC,SAAWG,iBAAiBnC,GAAGgC;mBArBzChC;YAyBVoC,aAAa,KAAKQ,6BAA6B7D,oCAC9C,KAAC3B;gBAAOiH,SAAQ;gBAAYC,yBAAW,KAAC/F;gBAAYgG,IAAI;oBAAEC,WAAW;gBAAE;gBAAGC,SAAS3B;0BAAuB;;;;AAMlH;AAwBA,SAASI,mBAAmB,EAC1B7D,eAAe,EAAEa,UAAU,EAAEK,SAAS,EAAEC,UAAU,EAAEG,SAAS,EAAEO,WAAW,EAAEc,MAAM,EAAE,EACpFK,qBAAqB,EACrBe,kBAAkB,EAClBC,iBAAiB,EACjBC,kBAAkB,EAClBE,iBAAiB,EACjBC,mBAAmB,EACnBE,QAAQ,EACRR,QAAQ,EACRS,YAAYA,UAAU,EACtBC,eAAeA,aAAa,EAC5BC,cAAc,EACdC,iBAAiB,EACjBC,gBAAgB,EAChBC,mBAAmB,EACnBC,SAAS,EACTC,YAAY,EACZC,YAAY,EACY;IACxB,gDAAgD;IAChD,MAAMM,yBAAyBrC,sBAAsBsC,MAAM,CAACzE,YAAY0E,IAAI,CAAC,CAACC,GAAGC,IAAMD,IAAIC;IAE3F,0BAA0B;IAC1B,MAAM,CAACC,UAAUC,YAAY,GAAG3G,SAA6B;IAE7D,8BAA8B;IAC9B,MAAM4G,mBAAmB9G,QAAQ;QAC/B,MAAM+G,UAAU,EAAE;QAClB,IAAI,CAAC3E,WAAW2E,QAAQnC,IAAI,CAAC;YAAEoC,KAAK;YAASC,OAAO;YAASC,QAAQzB;QAAW;QAChF,IAAI,CAACjD,WAAWuE,QAAQnC,IAAI,CAAC;YAAEoC,KAAK;YAAaC,OAAO;YAAcC,QAAQvB;QAAe;QAC7F,IAAI5C,gBAAgBjB,WAAWiF,QAAQnC,IAAI,CAAC;YAAEoC,KAAK;YAAWC,OAAO;YAAWC,QAAQrB;QAAiB;QACzG,IAAIhC,WAAW/B,WAAWiF,QAAQnC,IAAI,CAAC;YAAEoC,KAAK;YAAQC,OAAO;YAAQC,QAAQnB;QAAU;QACvF,OAAOgB;IACT,GAAG;QAAC3E;QAAWI;QAAWO;QAAac;QAAQ4B;QAAYE;QAAgBE;QAAkBE;KAAU;IAEvG,MAAMoB,qBAAqB,CAAC5B;QAC1B,IAAIuB,iBAAiBpF,MAAM,KAAK,KAAKoF,gBAAgB,CAAC,EAAE,EAAE;YACxD,2CAA2C;YAC3CA,gBAAgB,CAAC,EAAE,CAACI,MAAM;QAC5B,OAAO;YACL,gBAAgB;YAChBL,YAAYtB,MAAM6B,aAAa;QACjC;IACF;IAEA,MAAMC,kBAAkB;QACtBR,YAAY;IACd;IAEA,MAAMS,sBAAsB,CAACJ;QAC3BA;QACAG;IACF;IAEA,qBACE,KAAC/H;QAAM8G,IAAI;YAAEmB,cAAc;YAAaC,aAAa;YAAWC,cAAc;YAAGC,GAAG;QAAE;kBACpF,cAAA,MAACpI;YAAMqI,WAAU;YAAMC,YAAW;YAASxB,IAAI;gBAAEyB,UAAU;gBAAQC,KAAK;YAAE;;8BAExE,KAACvI;oBACCwI,MAAM;oBACN/C,UAAUA;oBACVhE,OAAOe;oBACPkF,OAAM;oBACNlG,UAAUkE;oBACVmB,IAAI;wBAAE4B,UAAU;oBAAO;8BAEtBzB,uBAAuBnC,GAAG,CAAC,CAAC6D,mBAC3B,MAAC7I;4BAA6B4B,OAAOiH;;gCAAI;gCACrCA,KAAK;;2BADM,CAAC,MAAM,EAAEA,IAAI;;gBAO/B7F,2BACC,MAAC8F;oBAAgBjB,OAAM;oBAAQkB,UAAUzC;;sCACvC,MAACnG;4BAAUwI,MAAM;4BAAC/G,OAAOoB;4BAAWrB,UAAUmE;4BAAmBkD,MAAK;4BAAQhC,IAAI;gCAAEiC,UAAU;4BAAE;;8CAC9F,KAACjJ;oCAAS4B,OAAM;8CAAe;;8CAC/B,KAAC5B;oCAAS4B,OAAM;8CAAQ;;;;sCAE1B,KAACpB;4BACCqH,OAAO,CAAC,QAAQ,EAAElF,aAAa,GAAG;4BAClCqD,OAAO/C,cAAc1B;4BACrB2H,eAAenD;;;;gBAMpB3C,2BACC,MAAC0F;oBAAgBjB,OAAM;oBAAakB,UAAUvC;;sCAC5C,KAACnG;4BACC2F,OAAM;4BACNmD,SAAS;4BACTvH,OAAOwB;4BACPzB,UAAU,CAACyH,IAAI5F;gCACb,IAAIA,aAAa,MAAM;oCACrByC,kBAAkBzC;gCACpB;4BACF;4BACAwF,MAAK;sCAEJK,OAAOC,OAAO,CAAChI,mBAAmB0D,GAAG,CAAC,CAAC,CAACuE,YAAYC,OAAO,iBAC1D,KAACpJ;oCAA8BwB,OAAO2H;oCAAYE,cAAY,GAAGF,WAAW,WAAW,CAAC;8CACrFC,OAAO3B,KAAK;mCADI0B;;sCAMvB,KAAC3J;4BAAIoH,IAAI;gCAAEiC,UAAU;4BAAE;;;;gBAK1BtF,gBAAgBjB,2BACf,MAACoG;oBAAgBjB,OAAM;oBAAUkB,UAAUrC;;sCAEzC,KAAC9G;sCACD,KAACK;4BACC2B,OAAO+B;4BACP+F,mBAAkB;4BAClBC,MAAMtI,eAAesI,IAAI;4BACzBC,KAAK;4BACLC,KAAKxI,eAAewI,GAAG;4BACvBC,KAAKzI,eAAeyI,GAAG;4BACvBnI,UAAUuE;4BACVc,IAAI;gCAAEiC,UAAU;4BAAE;;;;gBAMvBxE,WAAW/B,2BACV,KAACoG;oBAAgBjB,OAAM;oBAAOkB,UAAUnC;8BACtC,cAAA,KAAChH;wBAAIoH,IAAI;4BAAE4B,UAAU;wBAAQ;kCAC3B,cAAA,KAACnI;4BAAamB,OAAO6C;4BAAQ9C,UAAUkF;;;;gBAM5Ca,iBAAiBpF,MAAM,GAAG,mBACzB;;sCACE,KAACxC;4BAAWoH,SAASa;4BAAoB0B,cAAW;sCAClD,cAAA,KAACzI;;sCAIH,KAACjB;4BACCyH,UAAUA;4BACVuC,MAAMC,QAAQxC;4BACdyC,SAAShC;4BACTiC,cAAc;gCACZC,UAAU;gCACVC,YAAY;4BACd;sCAEC1C,iBAAiB1C,GAAG,CAAC,CAACqF,uBACrB,MAACrK;oCAECkH,SAAS,IAAMgB,oBAAoBmC,OAAOvC,MAAM;oCAChDd,IAAI;wCAAE4B,UAAU;oCAAQ;;sDAExB,KAAC5H;4CAAQgG,IAAI;gDAAEsD,IAAI;gDAAGC,UAAU;4CAAO;;wCACtCF,OAAOxC,KAAK;;mCALRwC,OAAOzC,GAAG;;;;8BAazB,KAAChI;oBAAIoH,IAAI;wBAAEiC,UAAU;oBAAE;;8BAGvB,KAACnJ;oBAAW2J,cAAY,CAAC,4BAA4B,EAAE9G,aAAa,GAAG;oBAAEuE,SAASd;8BAChF,cAAA,KAACrF;;;;;AAKX;AAQA,6BAA6B;AAC7B,SAAS+H,gBAAgBpH,KAA2B;IAClD,MAAM,EAAEmG,KAAK,EAAE2C,QAAQ,EAAEzB,QAAQ,EAAE,GAAGrH;IACtC,MAAM+I,QAAQlK;IAEd,qBACE,MAACX;QAAIoH,IAAI;YAAE0D,UAAU;YAAY9B,UAAU;QAAQ;;0BACjD,KAACtI;gBACCwG,SAAQ;gBACRE,IAAI;oBACF0D,UAAU;oBACVC,KAAK,CAAC;oBACNC,MAAM;oBACNC,iBAAiBJ,MAAMK,OAAO,CAACC,UAAU,CAACC,IAAI;oBAC9CC,IAAI;oBACJjF,OAAO;oBACPkF,QAAQ;gBACV;0BAECrD;;0BAEH,MAAC3H;gBACCqI,WAAU;gBACVC,YAAW;gBACX2C,SAAS;gBACTnE,IAAI;oBACFoE,QAAQ;oBACRhD,aAAa;oBACbC,cAAc;oBACdC,GAAG;gBACL;;oBAECkC;kCACD,KAAC1K;wBAAWkJ,MAAK;wBAAQ9B,SAAS6B;wBAAUU,cAAY,CAAC,OAAO,EAAE5B,OAAO;kCACvE,cAAA,KAAC5G;;;;;;AAKX"}
+{"version":3,"sources":["../../src/QuerySettingsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  IconButton,\n  Menu,\n  MenuItem,\n  Slider,\n  Stack,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport { FormatControls, FormatOptions, OptionsColorPicker } from '@perses-dev/components';\nimport React, { ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { produce } from 'immer';\nimport { useQueryCountContext } from '@perses-dev/plugin-system';\nimport {\n  DEFAULT_AREA_OPACITY,\n  LINE_STYLE_CONFIG,\n  OPACITY_CONFIG,\n  QuerySettingsOptions,\n  TimeSeriesChartOptions,\n  TimeSeriesChartOptionsEditorProps,\n} from './time-series-chart-model';\n\nconst DEFAULT_COLOR_VALUE = '#555';\nconst NO_INDEX_AVAILABLE = -1; // invalid array index value used to represent the fact that no query index is available\n\nexport function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const querySettingsList = value.querySettings;\n\n  const handleQuerySettingsChange = (newQuerySettings: QuerySettingsOptions[]): void => {\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.querySettings = newQuerySettings;\n      })\n    );\n  };\n  // Every time a new query settings input is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [querySettingsList?.length]);\n\n  const handleQueryIndexChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const querySettings = draft?.[i];\n          if (querySettings) {\n            querySettings.queryIndex = parseInt(e.target.value);\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorModeChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              const newColorMode = e.target.value;\n              if (!newColorMode) {\n                querySettings.colorMode = undefined;\n                querySettings.colorValue = undefined;\n              } else {\n                querySettings.colorMode = newColorMode as QuerySettingsOptions['colorMode'];\n              }\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorValueChange = (colorValue: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.colorValue = colorValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleLineStyleChange = (lineStyle: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.lineStyle = lineStyle as QuerySettingsOptions['lineStyle'];\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[], i: number): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.areaOpacity = newValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  // Helper function to update query settings at a specific index\n  const updateQuerySettings = (i: number, updater: (qs: QuerySettingsOptions) => void): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const qs = draft[i];\n          if (qs) {\n            updater(qs);\n          }\n        })\n      );\n    }\n  };\n\n  const deleteQuerySettingsInput = (i: number): void => {\n    if (querySettingsList !== undefined) {\n      const updatedQuerySettingsList = produce(querySettingsList, (draft) => {\n        draft.splice(i, 1);\n      });\n      handleQuerySettingsChange(updatedQuerySettingsList);\n    }\n  };\n\n  const addColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = 'fixed-single';\n      qs.colorValue = DEFAULT_COLOR_VALUE;\n    });\n  };\n\n  const removeColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = undefined;\n      qs.colorValue = undefined;\n    });\n  };\n\n  const addLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = 'solid';\n    });\n  };\n\n  const removeLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = undefined;\n    });\n  };\n\n  const addAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = DEFAULT_AREA_OPACITY;\n    });\n  };\n\n  const removeAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = undefined;\n    });\n  };\n\n  const addFormat = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = { unit: 'decimal', shortValues: true };\n    });\n  };\n\n  const removeFormat = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = undefined;\n    });\n  };\n\n  const handleFormatChange = (i: number, format?: FormatOptions): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = format;\n    });\n  };\n\n  const queryCount = useQueryCountContext();\n\n  // Compute the list of query indexes for which query settings are not already defined.\n  // This is to avoid already-booked indexes to still be selectable in the dropdown(s)\n  const availableQueryIndexes = useMemo(() => {\n    const bookedQueryIndexes = querySettingsList?.map((querySettings) => querySettings.queryIndex) ?? [];\n    const allQueryIndexes = Array.from({ length: queryCount }, (_, i) => i);\n    return allQueryIndexes.filter((_, queryIndex) => !bookedQueryIndexes.includes(queryIndex));\n  }, [querySettingsList, queryCount]);\n\n  const firstAvailableQueryIndex = useMemo(() => {\n    return availableQueryIndexes[0] ?? NO_INDEX_AVAILABLE;\n  }, [availableQueryIndexes]);\n\n  const defaultQuerySettings: QuerySettingsOptions = {\n    queryIndex: firstAvailableQueryIndex,\n  };\n\n  const addQuerySettingsInput = (): void => {\n    focusRef.current = true;\n    if (querySettingsList === undefined) {\n      handleQuerySettingsChange([defaultQuerySettings]);\n    } else {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          draft.push(defaultQuerySettings);\n        })\n      );\n    }\n  };\n\n  return (\n    <Stack>\n      {queryCount === 0 ? (\n        <Typography mb={2} fontStyle=\"italic\">\n          No query defined\n        </Typography>\n      ) : (\n        querySettingsList?.length &&\n        querySettingsList.map((querySettings, i) => (\n          <QuerySettingsInput\n            inputRef={i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined}\n            key={i}\n            querySettings={querySettings}\n            availableQueryIndexes={availableQueryIndexes}\n            onQueryIndexChange={(e) => {\n              handleQueryIndexChange(e, i);\n            }}\n            onColorModeChange={(e) => handleColorModeChange(e, i)}\n            onColorValueChange={(color) => handleColorValueChange(color, i)}\n            onLineStyleChange={(lineStyle) => handleLineStyleChange(lineStyle, i)}\n            onAreaOpacityChange={(event, value) => handleAreaOpacityChange(event, value, i)}\n            onDelete={() => {\n              deleteQuerySettingsInput(i);\n            }}\n            onAddColor={() => addColor(i)}\n            onRemoveColor={() => removeColor(i)}\n            onAddLineStyle={() => addLineStyle(i)}\n            onRemoveLineStyle={() => removeLineStyle(i)}\n            onAddAreaOpacity={() => addAreaOpacity(i)}\n            onRemoveAreaOpacity={() => removeAreaOpacity(i)}\n            onAddFormat={() => addFormat(i)}\n            onRemoveFormat={() => removeFormat(i)}\n            onFormatChange={(format) => handleFormatChange(i, format)}\n          />\n        ))\n      )}\n      {queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && (\n        <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={addQuerySettingsInput}>\n          Add Query Settings\n        </Button>\n      )}\n    </Stack>\n  );\n}\n\ninterface QuerySettingsInputProps {\n  querySettings: QuerySettingsOptions;\n  availableQueryIndexes: number[];\n  onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorValueChange: (colorValue: string) => void;\n  onLineStyleChange: (lineStyle: string) => void;\n  onAreaOpacityChange: (event: Event, value: number | number[]) => void;\n  onDelete: () => void;\n  inputRef?: React.RefObject<HTMLInputElement | null>;\n  // Optional control handlers\n  onAddColor: () => void;\n  onRemoveColor: () => void;\n  onAddLineStyle: () => void;\n  onRemoveLineStyle: () => void;\n  onAddAreaOpacity: () => void;\n  onRemoveAreaOpacity: () => void;\n  onAddFormat: () => void;\n  onRemoveFormat: () => void;\n  onFormatChange: (format?: FormatOptions) => void;\n}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format },\n  availableQueryIndexes,\n  onQueryIndexChange,\n  onColorModeChange,\n  onColorValueChange,\n  onLineStyleChange,\n  onAreaOpacityChange,\n  onDelete,\n  inputRef,\n  onAddColor: onAddColor,\n  onRemoveColor: onRemoveColor,\n  onAddLineStyle,\n  onRemoveLineStyle,\n  onAddAreaOpacity,\n  onRemoveAreaOpacity,\n  onAddFormat,\n  onRemoveFormat,\n  onFormatChange,\n}: QuerySettingsInputProps): ReactElement {\n  // current query index should also be selectable\n  const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b) => a - b);\n\n  // State for dropdown menu\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  // Calculate available options\n  const availableOptions = useMemo(() => {\n    const options = [];\n    if (!colorMode) options.push({ key: 'color', label: 'Color', action: onAddColor });\n    if (!lineStyle) options.push({ key: 'lineStyle', label: 'Line Style', action: onAddLineStyle });\n    if (areaOpacity === undefined) options.push({ key: 'opacity', label: 'Opacity', action: onAddAreaOpacity });\n    if (format === undefined) options.push({ key: 'format', label: 'Format', action: onAddFormat });\n    return options;\n  }, [colorMode, lineStyle, areaOpacity, format, onAddColor, onAddLineStyle, onAddAreaOpacity, onAddFormat]);\n\n  const handleAddMenuClick = (event: React.MouseEvent<HTMLElement>): void => {\n    if (availableOptions.length === 1 && availableOptions[0]) {\n      // If only one option left, add it directly\n      availableOptions[0].action();\n    } else {\n      // Show dropdown\n      setAnchorEl(event.currentTarget);\n    }\n  };\n\n  const handleMenuClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const handleMenuItemClick = (action: () => void): void => {\n    action();\n    handleMenuClose();\n  };\n\n  return (\n    <Stack\n      sx={{\n        borderBottom: '1px solid',\n        borderColor: 'divider',\n        borderRadius: 1,\n        p: 2,\n        display: 'flex',\n        flexWrap: 'nowrap',\n        flexDirection: 'row',\n      }}\n    >\n      <Stack direction=\"row\" alignItems=\"center\" sx={{ flexWrap: 'wrap', gap: 2, flexGrow: 1 }}>\n        {/* Query Index Selection */}\n        <TextField\n          select\n          inputRef={inputRef}\n          value={queryIndex}\n          label=\"Query\"\n          onChange={onQueryIndexChange}\n          sx={{ minWidth: '75px' }}\n        >\n          {selectableQueryIndexes.map((qi) => (\n            <MenuItem key={`query-${qi}`} value={qi}>\n              #{qi + 1}\n            </MenuItem>\n          ))}\n        </TextField>\n\n        {/* Color section */}\n        {colorMode && (\n          <SettingsSection label=\"Color\" onRemove={onRemoveColor}>\n            <TextField select value={colorMode} onChange={onColorModeChange} size=\"small\" sx={{ flexGrow: 1 }}>\n              <MenuItem value=\"fixed-single\">Fixed (single)</MenuItem>\n              <MenuItem value=\"fixed\">Fixed</MenuItem>\n            </TextField>\n            <OptionsColorPicker\n              label={`Query n°${queryIndex + 1}`}\n              color={colorValue || DEFAULT_COLOR_VALUE}\n              onColorChange={onColorValueChange}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Line Style section */}\n        {lineStyle && (\n          <SettingsSection label=\"Line Style\" onRemove={onRemoveLineStyle}>\n            <ToggleButtonGroup\n              color=\"primary\"\n              exclusive\n              value={lineStyle}\n              onChange={(__, newValue) => {\n                if (newValue !== null) {\n                  onLineStyleChange(newValue);\n                }\n              }}\n              size=\"small\"\n            >\n              {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                  {config.label}\n                </ToggleButton>\n              ))}\n            </ToggleButtonGroup>\n            {/* Spacer to push delete button to the right */}\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Area Opacity section */}\n        {areaOpacity !== undefined && (\n          <SettingsSection label=\"Opacity\" onRemove={onRemoveAreaOpacity}>\n            {/* Spacer as I don't want to add a prop to SettingsSection for left-padding just for that case.. */}\n            <Box />\n            <Slider\n              value={areaOpacity}\n              valueLabelDisplay=\"auto\"\n              step={OPACITY_CONFIG.step}\n              marks\n              min={OPACITY_CONFIG.min}\n              max={OPACITY_CONFIG.max}\n              onChange={onAreaOpacityChange}\n              sx={{ flexGrow: 1 }}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Format section */}\n        {format !== undefined && (\n          <SettingsSection label=\"Format\" onRemove={onRemoveFormat}>\n            <Box sx={{ minWidth: '180px', display: 'flex', gap: 1, flexDirection: 'column' }}>\n              <FormatControls value={format} onChange={onFormatChange} />\n            </Box>\n          </SettingsSection>\n        )}\n\n        {/* Add Options Button - only show if there are available options */}\n        {availableOptions.length > 0 && (\n          <>\n            <IconButton onClick={handleAddMenuClick} aria-label=\"Add option\">\n              <AddIcon />\n            </IconButton>\n\n            {/* Dropdown Menu */}\n            <Menu\n              anchorEl={anchorEl}\n              open={Boolean(anchorEl)}\n              onClose={handleMenuClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'left',\n              }}\n            >\n              {availableOptions.map((option) => (\n                <MenuItem\n                  key={option.key}\n                  onClick={() => handleMenuItemClick(option.action)}\n                  sx={{ minWidth: '120px' }}\n                >\n                  <AddIcon sx={{ mr: 1, fontSize: '1rem' }} />\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Menu>\n          </>\n        )}\n      </Stack>\n      {/* Delete Button for this query settings */}\n      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n        <IconButton aria-label={`delete settings for query n°${queryIndex + 1}`} onClick={onDelete}>\n          <DeleteIcon />\n        </IconButton>\n      </Box>\n    </Stack>\n  );\n}\n\ninterface SettingsSectionProps {\n  label: string;\n  children: React.ReactNode;\n  onRemove: () => void;\n}\n\n// Reusable section component\nfunction SettingsSection(props: SettingsSectionProps): ReactElement {\n  const { label, children, onRemove } = props;\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'relative', minWidth: '250px' }}>\n      <Typography\n        variant=\"caption\"\n        sx={{\n          position: 'absolute',\n          top: -8,\n          left: 12,\n          backgroundColor: theme.palette.background.code,\n          px: 0.5,\n          color: 'text.secondary',\n          zIndex: 1,\n        }}\n      >\n        {label}\n      </Typography>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        spacing={1}\n        sx={{\n          border: '1px solid',\n          borderColor: 'divider',\n          borderRadius: 1,\n          p: 1,\n        }}\n      >\n        {children}\n        <IconButton size=\"small\" onClick={onRemove} aria-label={`Remove ${label}`}>\n          <CloseIcon />\n        </IconButton>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["Box","Button","IconButton","Menu","MenuItem","Slider","Stack","TextField","ToggleButton","ToggleButtonGroup","Typography","useTheme","FormatControls","OptionsColorPicker","React","useEffect","useMemo","useRef","useState","DeleteIcon","AddIcon","CloseIcon","produce","useQueryCountContext","DEFAULT_AREA_OPACITY","LINE_STYLE_CONFIG","OPACITY_CONFIG","DEFAULT_COLOR_VALUE","NO_INDEX_AVAILABLE","QuerySettingsEditor","props","onChange","value","querySettingsList","querySettings","handleQuerySettingsChange","newQuerySettings","draft","recentlyAddedInputRef","focusRef","current","focus","length","handleQueryIndexChange","e","i","undefined","queryIndex","parseInt","target","handleColorModeChange","newColorMode","colorMode","colorValue","handleColorValueChange","handleLineStyleChange","lineStyle","handleAreaOpacityChange","_","sliderValue","newValue","Array","isArray","areaOpacity","updateQuerySettings","updater","qs","deleteQuerySettingsInput","updatedQuerySettingsList","splice","addColor","removeColor","addLineStyle","removeLineStyle","addAreaOpacity","removeAreaOpacity","addFormat","format","unit","shortValues","removeFormat","handleFormatChange","queryCount","availableQueryIndexes","bookedQueryIndexes","map","allQueryIndexes","from","filter","includes","firstAvailableQueryIndex","defaultQuerySettings","addQuerySettingsInput","push","mb","fontStyle","QuerySettingsInput","inputRef","onQueryIndexChange","onColorModeChange","onColorValueChange","color","onLineStyleChange","onAreaOpacityChange","event","onDelete","onAddColor","onRemoveColor","onAddLineStyle","onRemoveLineStyle","onAddAreaOpacity","onRemoveAreaOpacity","onAddFormat","onRemoveFormat","onFormatChange","variant","startIcon","sx","marginTop","onClick","selectableQueryIndexes","concat","sort","a","b","anchorEl","setAnchorEl","availableOptions","options","key","label","action","handleAddMenuClick","currentTarget","handleMenuClose","handleMenuItemClick","borderBottom","borderColor","borderRadius","p","display","flexWrap","flexDirection","direction","alignItems","gap","flexGrow","select","minWidth","qi","SettingsSection","onRemove","size","onColorChange","exclusive","__","Object","entries","styleValue","config","aria-label","valueLabelDisplay","step","marks","min","max","open","Boolean","onClose","anchorOrigin","vertical","horizontal","option","mr","fontSize","justifyContent","children","theme","position","top","left","backgroundColor","palette","background","code","px","zIndex","spacing","border"],"mappings":"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"}

package/lib/TimeSeriesChartBase.d.ts

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

package/lib/TimeSeriesChartBase.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeSeriesChartBase.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartBase.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAA6D,MAAM,OAAO,CAAC;AAK1G,OAAO,EAAsB,SAAS,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC5F,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAejB,OAAO,EACL,aAAa,EAcb,sBAAsB,EAEtB,aAAa,EAGb,aAAa,EACd,MAAM,wBAAwB,CAAC;AAkBhC,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,mBAAmB,0GA6W9B,CAAC"}
+{"version":3,"file":"TimeSeriesChartBase.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartBase.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAc,UAAU,EAA0E,MAAM,OAAO,CAAC;AAKvH,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAejB,OAAO,EACL,aAAa,EAQb,aAAa,EAOb,sBAAsB,EAEtB,aAAa,EAGb,aAAa,EACd,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAkBzD,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,mBAAmB,0GAkX9B,CAAC"}