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

package/lib/QuerySettingsEditor.js

@@ -10,18 +10,26 @@
 // 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 { IconButton, MenuItem, Stack, TextField, Typography } from '@mui/material';
-import { InfoTooltip, OptionsEditorGroup, OptionsColorPicker } from '@perses-dev/components';
-import { useEffect, useMemo, useRef } from 'react';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Button, IconButton, Menu, MenuItem, Slider, Stack, TextField, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
+import { OptionsColorPicker } from '@perses-dev/components';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import PlusIcon from 'mdi-material-ui/Plus';
+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';
-const DEFAULT_COLOR_MODE = 'fixed';
+import { DEFAULT_AREA_OPACITY, OPACITY_CONFIG, LINE_STYLE_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({ querySettingsList, onChange }) {
+export function QuerySettingsEditor(props) {
+    const { onChange, value } = props;
+    const querySettingsList = value.querySettings;
+    const handleQuerySettingsChange = (newQuerySettings)=>{
+        onChange(produce(value, (draft)=>{
+            draft.querySettings = newQuerySettings;
+        }));
+    };
     // Every time a new query settings input is added, we want to focus the recently added input
     const recentlyAddedInputRef = useRef(null);
     const focusRef = useRef(false);
@@ -34,7 +42,7 @@ export function QuerySettingsEditor({ querySettingsList, onChange }) {
     ]);
     const handleQueryIndexChange = (e, i)=>{
         if (querySettingsList !== undefined) {
-            onChange(produce(querySettingsList, (draft)=>{
+            handleQuerySettingsChange(produce(querySettingsList, (draft)=>{
                 const querySettings = draft?.[i];
                 if (querySettings) {
                     querySettings.queryIndex = parseInt(e.target.value);
@@ -44,11 +52,17 @@ export function QuerySettingsEditor({ querySettingsList, onChange }) {
     };
     const handleColorModeChange = (e, i)=>{
         if (querySettingsList !== undefined) {
-            onChange(produce(querySettingsList, (draft)=>{
+            handleQuerySettingsChange(produce(querySettingsList, (draft)=>{
                 if (draft !== undefined) {
                     const querySettings = draft[i];
                     if (querySettings) {
-                        querySettings.colorMode = e.target.value;
+                        const newColorMode = e.target.value;
+                        if (!newColorMode) {
+                            querySettings.colorMode = undefined;
+                            querySettings.colorValue = undefined;
+                        } else {
+                            querySettings.colorMode = newColorMode;
+                        }
                     }
                 }
             }));
@@ -56,7 +70,7 @@ export function QuerySettingsEditor({ querySettingsList, onChange }) {
     };
     const handleColorValueChange = (colorValue, i)=>{
         if (querySettingsList !== undefined) {
-            onChange(produce(querySettingsList, (draft)=>{
+            handleQuerySettingsChange(produce(querySettingsList, (draft)=>{
                 if (draft !== undefined) {
                     const querySettings = draft[i];
                     if (querySettings) {
@@ -66,14 +80,82 @@ export function QuerySettingsEditor({ querySettingsList, onChange }) {
             }));
         }
     };
+    const handleLineStyleChange = (lineStyle, i)=>{
+        if (querySettingsList !== undefined) {
+            handleQuerySettingsChange(produce(querySettingsList, (draft)=>{
+                if (draft !== undefined) {
+                    const querySettings = draft[i];
+                    if (querySettings) {
+                        querySettings.lineStyle = lineStyle;
+                    }
+                }
+            }));
+        }
+    };
+    const handleAreaOpacityChange = (_, sliderValue, i)=>{
+        const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;
+        if (querySettingsList !== undefined) {
+            handleQuerySettingsChange(produce(querySettingsList, (draft)=>{
+                if (draft !== undefined) {
+                    const querySettings = draft[i];
+                    if (querySettings) {
+                        querySettings.areaOpacity = newValue;
+                    }
+                }
+            }));
+        }
+    };
+    // Helper function to update query settings at a specific index
+    const updateQuerySettings = (i, updater)=>{
+        if (querySettingsList !== undefined) {
+            handleQuerySettingsChange(produce(querySettingsList, (draft)=>{
+                const qs = draft[i];
+                if (qs) {
+                    updater(qs);
+                }
+            }));
+        }
+    };
     const deleteQuerySettingsInput = (i)=>{
         if (querySettingsList !== undefined) {
             const updatedQuerySettingsList = produce(querySettingsList, (draft)=>{
                 draft.splice(i, 1);
             });
-            onChange(updatedQuerySettingsList);
+            handleQuerySettingsChange(updatedQuerySettingsList);
         }
     };
+    const addColor = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.colorMode = 'fixed-single';
+            qs.colorValue = DEFAULT_COLOR_VALUE;
+        });
+    };
+    const removeColor = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.colorMode = undefined;
+            qs.colorValue = undefined;
+        });
+    };
+    const addLineStyle = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.lineStyle = 'solid';
+        });
+    };
+    const removeLineStyle = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.lineStyle = undefined;
+        });
+    };
+    const addAreaOpacity = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.areaOpacity = DEFAULT_AREA_OPACITY;
+        });
+    };
+    const removeAreaOpacity = (i)=>{
+        updateQuerySettings(i, (qs)=>{
+            qs.areaOpacity = undefined;
+        });
+    };
     const queryCount = useQueryCountContext();
     // Compute the list of query indexes for which query settings are not already defined.
     // This is to avoid already-booked indexes to still be selectable in the dropdown(s)
@@ -93,106 +175,306 @@ export function QuerySettingsEditor({ querySettingsList, onChange }) {
         availableQueryIndexes
     ]);
     const defaultQuerySettings = {
-        queryIndex: firstAvailableQueryIndex,
-        colorMode: DEFAULT_COLOR_MODE,
-        colorValue: DEFAULT_COLOR_VALUE
+        queryIndex: firstAvailableQueryIndex
     };
     const addQuerySettingsInput = ()=>{
         focusRef.current = true;
         if (querySettingsList === undefined) {
-            onChange([
+            handleQuerySettingsChange([
                 defaultQuerySettings
             ]);
         } else {
-            onChange(produce(querySettingsList, (draft)=>{
+            handleQuerySettingsChange(produce(querySettingsList, (draft)=>{
                 draft.push(defaultQuerySettings);
             }));
         }
     };
-    return /*#__PURE__*/ _jsx(OptionsEditorGroup, {
-        title: "Query settings",
-        icon: firstAvailableQueryIndex !== NO_INDEX_AVAILABLE ? /*#__PURE__*/ _jsx(InfoTooltip, {
-            description: "Add query settings",
-            children: /*#__PURE__*/ _jsx(IconButton, {
-                size: "small",
-                "aria-label": "add query settings",
+    return /*#__PURE__*/ _jsxs(Stack, {
+        children: [
+            queryCount === 0 ? /*#__PURE__*/ _jsx(Typography, {
+                mb: 2,
+                fontStyle: "italic",
+                children: "No query defined"
+            }) : querySettingsList?.length && querySettingsList.map((querySettings, i)=>/*#__PURE__*/ _jsx(QuerySettingsInput, {
+                    inputRef: i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined,
+                    querySettings: querySettings,
+                    availableQueryIndexes: availableQueryIndexes,
+                    onQueryIndexChange: (e)=>{
+                        handleQueryIndexChange(e, i);
+                    },
+                    onColorModeChange: (e)=>handleColorModeChange(e, i),
+                    onColorValueChange: (color)=>handleColorValueChange(color, i),
+                    onLineStyleChange: (lineStyle)=>handleLineStyleChange(lineStyle, i),
+                    onAreaOpacityChange: (event, value)=>handleAreaOpacityChange(event, value, i),
+                    onDelete: ()=>{
+                        deleteQuerySettingsInput(i);
+                    },
+                    onAddColor: ()=>addColor(i),
+                    onRemoveColor: ()=>removeColor(i),
+                    onAddLineStyle: ()=>addLineStyle(i),
+                    onRemoveLineStyle: ()=>removeLineStyle(i),
+                    onAddAreaOpacity: ()=>addAreaOpacity(i),
+                    onRemoveAreaOpacity: ()=>removeAreaOpacity(i)
+                }, i)),
+            queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && /*#__PURE__*/ _jsx(Button, {
+                variant: "contained",
+                startIcon: /*#__PURE__*/ _jsx(AddIcon, {}),
+                sx: {
+                    marginTop: 1
+                },
                 onClick: addQuerySettingsInput,
-                children: /*#__PURE__*/ _jsx(PlusIcon, {})
+                children: "Add Query Settings"
             })
-        }) : null,
-        children: querySettingsList && querySettingsList.length > 0 ? querySettingsList.map((querySettings, i)=>/*#__PURE__*/ _jsx(QuerySettingsInput, {
-                inputRef: i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined,
-                querySettings: querySettings,
-                availableQueryIndexes: availableQueryIndexes,
-                onQueryIndexChange: (e)=>{
-                    handleQueryIndexChange(e, i);
-                },
-                onColorModeChange: (e)=>handleColorModeChange(e, i),
-                onColorValueChange: (color)=>handleColorValueChange(color, i),
-                onDelete: ()=>{
-                    deleteQuerySettingsInput(i);
-                }
-            }, i)) : /*#__PURE__*/ _jsx(Typography, {
-            mb: 2,
-            fontStyle: "italic",
-            children: "No query settings defined"
-        })
+        ]
     });
 }
-export function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onDelete, inputRef }) {
+function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity }) {
     // current query index should also be selectable
     const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b)=>a - b);
-    return /*#__PURE__*/ _jsxs(Stack, {
-        flex: 1,
-        direction: "row",
-        alignItems: "center",
-        justifyContent: "space-between",
-        spacing: 1,
+    // State for dropdown menu
+    const [anchorEl, setAnchorEl] = useState(null);
+    // Calculate available options
+    const availableOptions = useMemo(()=>{
+        const options = [];
+        if (!colorMode) options.push({
+            key: 'color',
+            label: 'Color',
+            action: onAddColor
+        });
+        if (!lineStyle) options.push({
+            key: 'lineStyle',
+            label: 'Line Style',
+            action: onAddLineStyle
+        });
+        if (areaOpacity === undefined) options.push({
+            key: 'opacity',
+            label: 'Opacity',
+            action: onAddAreaOpacity
+        });
+        return options;
+    }, [
+        colorMode,
+        lineStyle,
+        areaOpacity,
+        onAddColor,
+        onAddLineStyle,
+        onAddAreaOpacity
+    ]);
+    const handleAddMenuClick = (event)=>{
+        if (availableOptions.length === 1 && availableOptions[0]) {
+            // If only one option left, add it directly
+            availableOptions[0].action();
+        } else {
+            // Show dropdown
+            setAnchorEl(event.currentTarget);
+        }
+    };
+    const handleMenuClose = ()=>{
+        setAnchorEl(null);
+    };
+    const handleMenuItemClick = (action)=>{
+        action();
+        handleMenuClose();
+    };
+    return /*#__PURE__*/ _jsx(Stack, {
+        spacing: 2,
+        sx: {
+            borderBottom: '1px solid',
+            borderColor: 'divider',
+            borderRadius: 1,
+            p: 2
+        },
+        children: /*#__PURE__*/ _jsxs(Stack, {
+            direction: "row",
+            alignItems: "center",
+            spacing: 1,
+            sx: {
+                flexWrap: 'wrap',
+                gap: 1
+            },
+            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
+                            }
+                        })
+                    ]
+                }),
+                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: {
+                        flexGrow: 1
+                    }
+                }),
+                /*#__PURE__*/ _jsx(IconButton, {
+                    "aria-label": `delete settings for query n°${queryIndex + 1}`,
+                    onClick: onDelete,
+                    children: /*#__PURE__*/ _jsx(DeleteIcon, {})
+                })
+            ]
+        })
+    });
+}
+// Reusable section component
+function SettingsSection(props) {
+    const { label, children, onRemove } = props;
+    const theme = useTheme();
+    return /*#__PURE__*/ _jsxs(Box, {
+        sx: {
+            position: 'relative',
+            minWidth: '250px'
+        },
         children: [
-            /*#__PURE__*/ _jsx(TextField, {
-                select: true,
-                inputRef: inputRef,
-                value: queryIndex,
-                label: "Query",
-                onChange: onQueryIndexChange,
+            /*#__PURE__*/ _jsx(Typography, {
+                variant: "caption",
                 sx: {
-                    minWidth: '75px'
+                    position: 'absolute',
+                    top: -8,
+                    left: 12,
+                    backgroundColor: theme.palette.background.code,
+                    px: 0.5,
+                    color: 'text.secondary',
+                    zIndex: 1
                 },
-                children: selectableQueryIndexes.map((queryIndex)=>/*#__PURE__*/ _jsxs(MenuItem, {
-                        value: queryIndex,
-                        children: [
-                            "#",
-                            queryIndex + 1
-                        ]
-                    }, `query-${queryIndex}`))
+                children: label
             }),
-            /*#__PURE__*/ _jsxs(TextField, {
-                select: true,
-                value: colorMode,
-                fullWidth: true,
-                label: "Color mode",
-                onChange: onColorModeChange,
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: "row",
+                alignItems: "center",
+                spacing: 1,
+                sx: {
+                    border: '1px solid',
+                    borderColor: 'divider',
+                    borderRadius: 1,
+                    p: 1
+                },
                 children: [
-                    /*#__PURE__*/ _jsx(MenuItem, {
-                        value: "fixed-single",
-                        children: "Fixed (single)"
-                    }),
-                    /*#__PURE__*/ _jsx(MenuItem, {
-                        value: "fixed",
-                        children: "Fixed"
+                    children,
+                    /*#__PURE__*/ _jsx(IconButton, {
+                        size: "small",
+                        onClick: onRemove,
+                        "aria-label": `Remove ${label}`,
+                        children: /*#__PURE__*/ _jsx(CloseIcon, {})
                     })
                 ]
-            }),
-            /*#__PURE__*/ _jsx(OptionsColorPicker, {
-                label: 'Query n°' + queryIndex,
-                color: colorValue,
-                onColorChange: onColorValueChange
-            }),
-            /*#__PURE__*/ _jsx(IconButton, {
-                "aria-label": `delete settings for query n°${queryIndex + 1}`,
-                size: "small",
-                onClick: onDelete,
-                children: /*#__PURE__*/ _jsx(DeleteIcon, {})
             })
         ]
     });

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"}