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

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

@@ -18,8 +18,7 @@ import { LegendOptionsEditor } from '@perses-dev/plugin-system';
 import { DEFAULT_VISUAL, DEFAULT_Y_AXIS } from './time-series-chart-model';
 import { VisualOptionsEditor } from './VisualOptionsEditor';
 import { YAxisOptionsEditor } from './YAxisOptionsEditor';
-import { QuerySettingsEditor } from './QuerySettingsEditor';
-export function TimeSeriesChartOptionsEditorSettings(props) {
+export function TimeSeriesChartGeneralSettings(props) {
     const { onChange, value } = props;
     const handleLegendChange = (newLegend)=>{
         // TODO (sjcobb): fix type, add position, fix glitch
@@ -37,11 +36,6 @@ export function TimeSeriesChartOptionsEditorSettings(props) {
             draft.yAxis = newYAxis;
         }));
     };
-    const handleQuerySettingsChange = (newQuerySettings)=>{
-        onChange(produce(value, (draft)=>{
-            draft.querySettings = newQuerySettings;
-        }));
-    };
     const handleThresholdsChange = (thresholds)=>{
         onChange(produce(value, (draft)=>{
             draft.thresholds = thresholds;
@@ -75,10 +69,6 @@ export function TimeSeriesChartOptionsEditorSettings(props) {
                         thresholds: value.thresholds,
                         onChange: handleThresholdsChange
                     }),
-                    /*#__PURE__*/ _jsx(QuerySettingsEditor, {
-                        querySettingsList: value.querySettings,
-                        onChange: handleQuerySettingsChange
-                    }),
                     /*#__PURE__*/ _jsx(OptionsEditorGroup, {
                         title: "Reset Settings",
                         children: /*#__PURE__*/ _jsx(Button, {
@@ -86,12 +76,11 @@ export function TimeSeriesChartOptionsEditorSettings(props) {
                             color: "secondary",
                             onClick: ()=>{
                                 onChange(produce(value, (draft)=>{
-                                    // reset button removes all optional panel options
+                                    // reset button removes all general panel options
                                     draft.yAxis = undefined;
                                     draft.legend = undefined;
                                     draft.visual = undefined;
                                     draft.thresholds = undefined;
-                                    draft.querySettings = undefined;
                                 }));
                             },
                             children: "Reset To Defaults"
@@ -103,4 +92,4 @@ export function TimeSeriesChartOptionsEditorSettings(props) {
     });
 }
 
-//# sourceMappingURL=TimeSeriesChartOptionsEditorSettings.js.map
+//# sourceMappingURL=GeneralSettingsEditor.js.map

package/lib/GeneralSettingsEditor.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/GeneralSettingsEditor.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 { Button } from '@mui/material';\nimport { produce } from 'immer';\nimport {\n  OptionsEditorGroup,\n  OptionsEditorGrid,\n  OptionsEditorColumn,\n  ThresholdsEditor,\n  ThresholdsEditorProps,\n} from '@perses-dev/components';\nimport { LegendOptionsEditor, LegendOptionsEditorProps } from '@perses-dev/plugin-system';\nimport { ReactElement } from 'react';\nimport {\n  TimeSeriesChartOptions,\n  DEFAULT_VISUAL,\n  DEFAULT_Y_AXIS,\n  TimeSeriesChartOptionsEditorProps,\n} from './time-series-chart-model';\nimport { VisualOptionsEditor, VisualOptionsEditorProps } from './VisualOptionsEditor';\nimport { YAxisOptionsEditor, YAxisOptionsEditorProps } from './YAxisOptionsEditor';\n\nexport function TimeSeriesChartGeneralSettings(props: TimeSeriesChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n\n  const handleLegendChange: LegendOptionsEditorProps['onChange'] = (newLegend) => {\n    // TODO (sjcobb): fix type, add position, fix glitch\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.legend = newLegend;\n      })\n    );\n  };\n\n  const handleVisualChange: VisualOptionsEditorProps['onChange'] = (newVisual) => {\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.visual = newVisual;\n      })\n    );\n  };\n\n  const handleYAxisChange: YAxisOptionsEditorProps['onChange'] = (newYAxis) => {\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.yAxis = newYAxis;\n      })\n    );\n  };\n\n  const handleThresholdsChange: ThresholdsEditorProps['onChange'] = (thresholds) => {\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.thresholds = thresholds;\n      })\n    );\n  };\n\n  return (\n    <OptionsEditorGrid>\n      <OptionsEditorColumn>\n        <LegendOptionsEditor calculation=\"aggregation\" value={value.legend} onChange={handleLegendChange} />\n        <VisualOptionsEditor value={value.visual ?? DEFAULT_VISUAL} onChange={handleVisualChange} />\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <YAxisOptionsEditor value={value.yAxis ?? DEFAULT_Y_AXIS} onChange={handleYAxisChange} />\n      </OptionsEditorColumn>\n      <OptionsEditorColumn>\n        <ThresholdsEditor hideDefault thresholds={value.thresholds} onChange={handleThresholdsChange} />\n        <OptionsEditorGroup title=\"Reset Settings\">\n          <Button\n            variant=\"outlined\"\n            color=\"secondary\"\n            onClick={() => {\n              onChange(\n                produce(value, (draft: TimeSeriesChartOptions) => {\n                  // reset button removes all general panel options\n                  draft.yAxis = undefined;\n                  draft.legend = undefined;\n                  draft.visual = undefined;\n                  draft.thresholds = undefined;\n                })\n              );\n            }}\n          >\n            Reset To Defaults\n          </Button>\n        </OptionsEditorGroup>\n      </OptionsEditorColumn>\n    </OptionsEditorGrid>\n  );\n}\n"],"names":["Button","produce","OptionsEditorGroup","OptionsEditorGrid","OptionsEditorColumn","ThresholdsEditor","LegendOptionsEditor","DEFAULT_VISUAL","DEFAULT_Y_AXIS","VisualOptionsEditor","YAxisOptionsEditor","TimeSeriesChartGeneralSettings","props","onChange","value","handleLegendChange","newLegend","draft","legend","handleVisualChange","newVisual","visual","handleYAxisChange","newYAxis","yAxis","handleThresholdsChange","thresholds","calculation","hideDefault","title","variant","color","onClick","undefined"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,MAAM,QAAQ,gBAAgB;AACvC,SAASC,OAAO,QAAQ,QAAQ;AAChC,SACEC,kBAAkB,EAClBC,iBAAiB,EACjBC,mBAAmB,EACnBC,gBAAgB,QAEX,yBAAyB;AAChC,SAASC,mBAAmB,QAAkC,4BAA4B;AAE1F,SAEEC,cAAc,EACdC,cAAc,QAET,4BAA4B;AACnC,SAASC,mBAAmB,QAAkC,wBAAwB;AACtF,SAASC,kBAAkB,QAAiC,uBAAuB;AAEnF,OAAO,SAASC,+BAA+BC,KAAwC;IACrF,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,qBAA2D,CAACC;QAChE,oDAAoD;QACpDH,SACEZ,QAAQa,OAAO,CAACG;YACdA,MAAMC,MAAM,GAAGF;QACjB;IAEJ;IAEA,MAAMG,qBAA2D,CAACC;QAChEP,SACEZ,QAAQa,OAAO,CAACG;YACdA,MAAMI,MAAM,GAAGD;QACjB;IAEJ;IAEA,MAAME,oBAAyD,CAACC;QAC9DV,SACEZ,QAAQa,OAAO,CAACG;YACdA,MAAMO,KAAK,GAAGD;QAChB;IAEJ;IAEA,MAAME,yBAA4D,CAACC;QACjEb,SACEZ,QAAQa,OAAO,CAACG;YACdA,MAAMS,UAAU,GAAGA;QACrB;IAEJ;IAEA,qBACE,MAACvB;;0BACC,MAACC;;kCACC,KAACE;wBAAoBqB,aAAY;wBAAcb,OAAOA,MAAMI,MAAM;wBAAEL,UAAUE;;kCAC9E,KAACN;wBAAoBK,OAAOA,MAAMO,MAAM,IAAId;wBAAgBM,UAAUM;;;;0BAExE,KAACf;0BACC,cAAA,KAACM;oBAAmBI,OAAOA,MAAMU,KAAK,IAAIhB;oBAAgBK,UAAUS;;;0BAEtE,MAAClB;;kCACC,KAACC;wBAAiBuB,WAAW;wBAACF,YAAYZ,MAAMY,UAAU;wBAAEb,UAAUY;;kCACtE,KAACvB;wBAAmB2B,OAAM;kCACxB,cAAA,KAAC7B;4BACC8B,SAAQ;4BACRC,OAAM;4BACNC,SAAS;gCACPnB,SACEZ,QAAQa,OAAO,CAACG;oCACd,iDAAiD;oCACjDA,MAAMO,KAAK,GAAGS;oCACdhB,MAAMC,MAAM,GAAGe;oCACfhB,MAAMI,MAAM,GAAGY;oCACfhB,MAAMS,UAAU,GAAGO;gCACrB;4BAEJ;sCACD;;;;;;;AAOX"}

package/lib/QuerySettingsEditor.d.ts

@@ -1,18 +1,4 @@
-import { ReactElement, RefObject } from 'react';
-import { QuerySettingsOptions } from './time-series-chart-model';
-export interface QuerySettingsEditorProps {
-    querySettingsList?: QuerySettingsOptions[];
-    onChange: (querySettingsList: QuerySettingsOptions[]) => void;
-}
-export declare function QuerySettingsEditor({ querySettingsList, onChange }: QuerySettingsEditorProps): ReactElement;
-export interface QuerySettingsInputProps {
-    querySettings: QuerySettingsOptions;
-    availableQueryIndexes: number[];
-    onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-    onColorValueChange: (colorValue: string) => void;
-    onDelete: () => void;
-    inputRef?: RefObject<HTMLInputElement | null>;
-}
-export declare function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue }, availableQueryIndexes, onQueryIndexChange, onColorModeChange, onColorValueChange, onDelete, inputRef, }: QuerySettingsInputProps): ReactElement;
+import { ReactElement } from 'react';
+import { TimeSeriesChartOptionsEditorProps } from './time-series-chart-model';
+export declare function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): ReactElement;
 //# sourceMappingURL=QuerySettingsEditor.d.ts.map

package/lib/QuerySettingsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QuerySettingsEditor.d.ts","sourceRoot":"","sources":["../../src/QuerySettingsEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,SAAS,EAA8B,MAAM,OAAO,CAAC;AAK5E,OAAO,EAAE,oBAAoB,EAAE,MAAM,2BAA2B,CAAC;AAMjE,MAAM,WAAW,wBAAwB;IACvC,iBAAiB,CAAC,EAAE,oBAAoB,EAAE,CAAC;IAC3C,QAAQ,EAAE,CAAC,iBAAiB,EAAE,oBAAoB,EAAE,KAAK,IAAI,CAAC;CAC/D;AAED,wBAAgB,mBAAmB,CAAC,EAAE,iBAAiB,EAAE,QAAQ,EAAE,EAAE,wBAAwB,GAAG,YAAY,CAoI3G;AAED,MAAM,WAAW,uBAAuB;IACtC,aAAa,EAAE,oBAAoB,CAAC;IACpC,qBAAqB,EAAE,MAAM,EAAE,CAAC;IAChC,kBAAkB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACrE,iBAAiB,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACpE,kBAAkB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC,gBAAgB,GAAG,IAAI,CAAC,CAAC;CAC/C;AAED,wBAAgB,kBAAkB,CAAC,EACjC,aAAa,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAE,EACpD,qBAAqB,EACrB,kBAAkB,EAClB,iBAAiB,EACjB,kBAAkB,EAClB,QAAQ,EACR,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CA8BxC"}
+{"version":3,"file":"QuerySettingsEditor.d.ts","sourceRoot":"","sources":["../../src/QuerySettingsEditor.tsx"],"names":[],"mappings":"AA4BA,OAAc,EAAE,YAAY,EAAwC,MAAM,OAAO,CAAC;AAMlF,OAAO,EAEL,iCAAiC,EAKlC,MAAM,2BAA2B,CAAC;AAKnC,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iCAAiC,GAAG,YAAY,CAwO1F"}

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, {})
             })
         ]
     });