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

package/lib/GeneralSettingsEditor.d.ts

@@ -1,4 +1,4 @@
-import { ReactElement } from 'react';
-import { TimeSeriesChartOptionsEditorProps } from './time-series-chart-model';
+import type { ReactElement } from 'react';
+import type { TimeSeriesChartOptionsEditorProps } from './time-series-chart-model';
 export declare function TimeSeriesChartGeneralSettings(props: TimeSeriesChartOptionsEditorProps): ReactElement;
 //# sourceMappingURL=GeneralSettingsEditor.d.ts.map

package/lib/GeneralSettingsEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GeneralSettingsEditor.d.ts","sourceRoot":"","sources":["../../src/GeneralSettingsEditor.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AACrC,OAAO,EAIL,iCAAiC,EAClC,MAAM,2BAA2B,CAAC;AAInC,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,iCAAiC,GAAG,YAAY,CAqErG"}
+{"version":3,"file":"GeneralSettingsEditor.d.ts","sourceRoot":"","sources":["../../src/GeneralSettingsEditor.tsx"],"names":[],"mappings":"AAmBA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,KAAK,EAA0B,iCAAiC,EAAE,MAAM,2BAA2B,CAAC;AAO3G,wBAAgB,8BAA8B,CAAC,KAAK,EAAE,iCAAiC,GAAG,YAAY,CAqErG"}

package/lib/GeneralSettingsEditor.js

@@ -11,13 +11,13 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { Button } from '@mui/material';
-import { produce } from 'immer';
-import { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn, ThresholdsEditor } from '@perses-dev/components';
-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 { Button } from "@mui/material";
+import { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn, ThresholdsEditor } from "@perses-dev/components";
+import { LegendOptionsEditor } from "@perses-dev/plugin-system";
+import { produce } from "immer";
+import { DEFAULT_VISUAL, DEFAULT_Y_AXIS } from "./time-series-chart-model.js";
+import { VisualOptionsEditor } from "./VisualOptionsEditor.js";
+import { YAxisOptionsEditor } from "./YAxisOptionsEditor.js";
 export function TimeSeriesChartGeneralSettings(props) {
     const { onChange, value } = props;
     const handleLegendChange = (newLegend)=>{

package/lib/GeneralSettingsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/GeneralSettingsEditor.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 { 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,+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,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"}
+{"version":3,"sources":["../../src/GeneralSettingsEditor.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 { Button } from '@mui/material';\nimport type { ThresholdsEditorProps } from '@perses-dev/components';\nimport { OptionsEditorGroup, OptionsEditorGrid, OptionsEditorColumn, ThresholdsEditor } from '@perses-dev/components';\nimport type { LegendOptionsEditorProps } from '@perses-dev/plugin-system';\nimport { LegendOptionsEditor } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport type { ReactElement } from 'react';\n\nimport type { TimeSeriesChartOptions, TimeSeriesChartOptionsEditorProps } from './time-series-chart-model';\nimport { DEFAULT_VISUAL, DEFAULT_Y_AXIS } from './time-series-chart-model';\nimport type { VisualOptionsEditorProps } from './VisualOptionsEditor';\nimport { VisualOptionsEditor } from './VisualOptionsEditor';\nimport type { YAxisOptionsEditorProps } from './YAxisOptionsEditor';\nimport { YAxisOptionsEditor } 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","OptionsEditorGroup","OptionsEditorGrid","OptionsEditorColumn","ThresholdsEditor","LegendOptionsEditor","produce","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,+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,SAASA,MAAM,QAAQ,gBAAgB;AAEvC,SAASC,kBAAkB,EAAEC,iBAAiB,EAAEC,mBAAmB,EAAEC,gBAAgB,QAAQ,yBAAyB;AAEtH,SAASC,mBAAmB,QAAQ,4BAA4B;AAChE,SAASC,OAAO,QAAQ,QAAQ;AAIhC,SAASC,cAAc,EAAEC,cAAc,QAAQ,+BAA4B;AAE3E,SAASC,mBAAmB,QAAQ,2BAAwB;AAE5D,SAASC,kBAAkB,QAAQ,0BAAuB;AAE1D,OAAO,SAASC,+BAA+BC,KAAwC;IACrF,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAE,GAAGF;IAE5B,MAAMG,qBAA2D,CAACC;QAChE,oDAAoD;QACpDH,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMC,MAAM,GAAGF;QACjB;IAEJ;IAEA,MAAMG,qBAA2D,CAACC;QAChEP,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMI,MAAM,GAAGD;QACjB;IAEJ;IAEA,MAAME,oBAAyD,CAACC;QAC9DV,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMO,KAAK,GAAGD;QAChB;IAEJ;IAEA,MAAME,yBAA4D,CAACC;QACjEb,SACEP,QAAQQ,OAAO,CAACG;YACdA,MAAMS,UAAU,GAAGA;QACrB;IAEJ;IAEA,qBACE,MAACxB;;0BACC,MAACC;;kCACC,KAACE;wBAAoBsB,aAAY;wBAAcb,OAAOA,MAAMI,MAAM;wBAAEL,UAAUE;;kCAC9E,KAACN;wBAAoBK,OAAOA,MAAMO,MAAM,IAAId;wBAAgBM,UAAUM;;;;0BAExE,KAAChB;0BACC,cAAA,KAACO;oBAAmBI,OAAOA,MAAMU,KAAK,IAAIhB;oBAAgBK,UAAUS;;;0BAEtE,MAACnB;;kCACC,KAACC;wBAAiBwB,WAAW;wBAACF,YAAYZ,MAAMY,UAAU;wBAAEb,UAAUY;;kCACtE,KAACxB;wBAAmB4B,OAAM;kCACxB,cAAA,KAAC7B;4BACC8B,SAAQ;4BACRC,OAAM;4BACNC,SAAS;gCACPnB,SACEP,QAAQQ,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,4 +1,4 @@
-import { ReactElement } from 'react';
-import { TimeSeriesChartOptionsEditorProps } from './time-series-chart-model';
+import type { ReactElement } from 'react';
+import type { 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":"AA6BA,OAAc,EAAE,YAAY,EAAwC,MAAM,OAAO,CAAC;AAMlF,OAAO,EAML,iCAAiC,EAClC,MAAM,2BAA2B,CAAC;AAKnC,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iCAAiC,GAAG,YAAY,CAkS1F"}
+{"version":3,"file":"QuerySettingsEditor.d.ts","sourceRoot":"","sources":["../../src/QuerySettingsEditor.tsx"],"names":[],"mappings":"AAmCA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAG1C,OAAO,KAAK,EAGV,iCAAiC,EAClC,MAAM,2BAA2B,CAAC;AAMnC,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,iCAAiC,GAAG,YAAY,CAkS1F"}

package/lib/QuerySettingsEditor.js

@@ -11,15 +11,15 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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 { Box, Button, IconButton, Menu, MenuItem, Slider, Stack, Switch, TextField, ToggleButton, ToggleButtonGroup, Typography, useTheme } from '@mui/material';
-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 { generateQueryNames, useDataQueriesContext } from '@perses-dev/plugin-system';
-import { DEFAULT_AREA_OPACITY, LINE_STYLE_CONFIG, OPACITY_CONFIG } from './time-series-chart-model';
+import { Box, Button, IconButton, Menu, MenuItem, Slider, Stack, Switch, TextField, ToggleButton, ToggleButtonGroup, Typography, useTheme } from "@mui/material";
+import { FormatControls, OptionsColorPicker } from "@perses-dev/components";
+import { generateQueryNames, useDataQueriesContext } from "@perses-dev/plugin-system";
+import { produce } from "immer";
+import CloseIcon from "mdi-material-ui/Close";
+import DeleteIcon from "mdi-material-ui/DeleteOutline";
+import AddIcon from "mdi-material-ui/Plus";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { DEFAULT_AREA_OPACITY, LINE_STYLE_CONFIG, OPACITY_CONFIG } from "./time-series-chart-model.js";
 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) {
@@ -284,9 +284,9 @@ export function QuerySettingsEditor(props) {
         ]
     });
 }
-function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format, negativeY, stack }, availableQueryIndexes, queryNames, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor: onAddColor, onRemoveColor: onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddFormat, onRemoveFormat, onFormatChange, onAddNegativeY, onRemoveNegativeY, onAddStack, onRemoveStack, onStackChange }) {
+function QuerySettingsInput({ querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format, negativeY, stack }, availableQueryIndexes, queryNames, onQueryIndexChange, onColorModeChange, onColorValueChange, onLineStyleChange, onAreaOpacityChange, onDelete, inputRef, onAddColor, onRemoveColor, onAddLineStyle, onRemoveLineStyle, onAddAreaOpacity, onRemoveAreaOpacity, onAddFormat, onRemoveFormat, onFormatChange, onAddNegativeY, onRemoveNegativeY, onAddStack, onRemoveStack, onStackChange }) {
     // current query index should also be selectable
-    const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b)=>a - b);
+    const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).toSorted((a, b)=>a - b);
     // State for dropdown menu
     const [anchorEl, setAnchorEl] = useState(null);
     // Calculate available options

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  Switch,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport { FormatControls, FormatOptions, OptionsColorPicker } from '@perses-dev/components';\nimport React, { ReactElement, useEffect, useMemo, useRef, useState } from 'react';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport { produce } from 'immer';\nimport { generateQueryNames, useDataQueriesContext } from '@perses-dev/plugin-system';\nimport {\n  DEFAULT_AREA_OPACITY,\n  LINE_STYLE_CONFIG,\n  OPACITY_CONFIG,\n  QuerySettingsOptions,\n  TimeSeriesChartOptions,\n  TimeSeriesChartOptionsEditorProps,\n} from './time-series-chart-model';\n\nconst DEFAULT_COLOR_VALUE = '#555';\nconst NO_INDEX_AVAILABLE = -1; // invalid array index value used to represent the fact that no query index is available\n\nexport function QuerySettingsEditor(props: TimeSeriesChartOptionsEditorProps): ReactElement {\n  const { onChange, value } = props;\n  const querySettingsList = value.querySettings;\n\n  const handleQuerySettingsChange = (newQuerySettings: QuerySettingsOptions[]): void => {\n    onChange(\n      produce(value, (draft: TimeSeriesChartOptions) => {\n        draft.querySettings = newQuerySettings;\n      })\n    );\n  };\n  // Every time a new query settings input is added, we want to focus the recently added input\n  const recentlyAddedInputRef = useRef<HTMLInputElement | null>(null);\n  const focusRef = useRef(false);\n  useEffect(() => {\n    if (!recentlyAddedInputRef.current || !focusRef.current) return;\n    recentlyAddedInputRef.current?.focus();\n    focusRef.current = false;\n  }, [querySettingsList?.length]);\n\n  const handleQueryIndexChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const querySettings = draft?.[i];\n          if (querySettings) {\n            querySettings.queryIndex = parseInt(e.target.value);\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorModeChange = (e: React.ChangeEvent<HTMLInputElement>, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              const newColorMode = e.target.value;\n              if (!newColorMode) {\n                querySettings.colorMode = undefined;\n                querySettings.colorValue = undefined;\n              } else {\n                querySettings.colorMode = newColorMode as QuerySettingsOptions['colorMode'];\n              }\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleColorValueChange = (colorValue: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.colorValue = colorValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleLineStyleChange = (lineStyle: string, i: number): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.lineStyle = lineStyle as QuerySettingsOptions['lineStyle'];\n            }\n          }\n        })\n      );\n    }\n  };\n\n  const handleAreaOpacityChange = (_: Event, sliderValue: number | number[], i: number): void => {\n    const newValue = Array.isArray(sliderValue) ? sliderValue[0] : sliderValue;\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          if (draft !== undefined) {\n            const querySettings = draft[i];\n            if (querySettings) {\n              querySettings.areaOpacity = newValue;\n            }\n          }\n        })\n      );\n    }\n  };\n\n  // Helper function to update query settings at a specific index\n  const updateQuerySettings = (i: number, updater: (qs: QuerySettingsOptions) => void): void => {\n    if (querySettingsList !== undefined) {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          const qs = draft[i];\n          if (qs) {\n            updater(qs);\n          }\n        })\n      );\n    }\n  };\n\n  const deleteQuerySettingsInput = (i: number): void => {\n    if (querySettingsList !== undefined) {\n      const updatedQuerySettingsList = produce(querySettingsList, (draft) => {\n        draft.splice(i, 1);\n      });\n      handleQuerySettingsChange(updatedQuerySettingsList);\n    }\n  };\n\n  const addColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = 'fixed';\n      qs.colorValue = DEFAULT_COLOR_VALUE;\n    });\n  };\n\n  const removeColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = undefined;\n      qs.colorValue = undefined;\n    });\n  };\n\n  const addLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = 'solid';\n    });\n  };\n\n  const removeLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = undefined;\n    });\n  };\n\n  const addAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = DEFAULT_AREA_OPACITY;\n    });\n  };\n\n  const removeAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = undefined;\n    });\n  };\n\n  const addFormat = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = { unit: 'decimal', shortValues: true };\n    });\n  };\n\n  const removeFormat = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = undefined;\n    });\n  };\n\n  const addStack = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = false;\n    });\n  };\n\n  const removeStack = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = undefined;\n    });\n  };\n\n  const handleStackChange = (i: number, checked: boolean): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = checked;\n    });\n  };\n\n  const handleFormatChange = (i: number, format?: FormatOptions): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = format;\n    });\n  };\n\n  const addNegativeY = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.negativeY = true;\n    });\n  };\n\n  const removeNegativeY = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.negativeY = undefined;\n    });\n  };\n\n  const { queryDefinitions } = useDataQueriesContext();\n  const queryCount = queryDefinitions.length;\n  const queryNames = useMemo(() => generateQueryNames(queryDefinitions), [queryDefinitions]);\n\n  // Compute the list of query indexes for which query settings are not already defined.\n  // This is to avoid already-booked indexes to still be selectable in the dropdown(s)\n  const availableQueryIndexes = useMemo(() => {\n    const bookedQueryIndexes = querySettingsList?.map((querySettings) => querySettings.queryIndex) ?? [];\n    const allQueryIndexes = Array.from({ length: queryCount }, (_, i) => i);\n    return allQueryIndexes.filter((_, queryIndex) => !bookedQueryIndexes.includes(queryIndex));\n  }, [querySettingsList, queryCount]);\n\n  const firstAvailableQueryIndex = useMemo(() => {\n    return availableQueryIndexes[0] ?? NO_INDEX_AVAILABLE;\n  }, [availableQueryIndexes]);\n\n  const defaultQuerySettings: QuerySettingsOptions = {\n    queryIndex: firstAvailableQueryIndex,\n  };\n\n  const addQuerySettingsInput = (): void => {\n    focusRef.current = true;\n    if (querySettingsList === undefined) {\n      handleQuerySettingsChange([defaultQuerySettings]);\n    } else {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          draft.push(defaultQuerySettings);\n        })\n      );\n    }\n  };\n\n  return (\n    <Stack>\n      {queryCount === 0 ? (\n        <Typography mb={2} fontStyle=\"italic\">\n          No query defined\n        </Typography>\n      ) : (\n        querySettingsList?.map((querySettings, i) => (\n          <QuerySettingsInput\n            inputRef={i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined}\n            key={i}\n            querySettings={querySettings}\n            availableQueryIndexes={availableQueryIndexes}\n            queryNames={queryNames}\n            onQueryIndexChange={(e) => {\n              handleQueryIndexChange(e, i);\n            }}\n            onColorModeChange={(e) => handleColorModeChange(e, i)}\n            onColorValueChange={(color) => handleColorValueChange(color, i)}\n            onLineStyleChange={(lineStyle) => handleLineStyleChange(lineStyle, i)}\n            onAreaOpacityChange={(event, value) => handleAreaOpacityChange(event, value, i)}\n            onDelete={() => {\n              deleteQuerySettingsInput(i);\n            }}\n            onAddColor={() => addColor(i)}\n            onRemoveColor={() => removeColor(i)}\n            onAddLineStyle={() => addLineStyle(i)}\n            onRemoveLineStyle={() => removeLineStyle(i)}\n            onAddAreaOpacity={() => addAreaOpacity(i)}\n            onRemoveAreaOpacity={() => removeAreaOpacity(i)}\n            onAddFormat={() => addFormat(i)}\n            onRemoveFormat={() => removeFormat(i)}\n            onFormatChange={(format) => handleFormatChange(i, format)}\n            onAddNegativeY={() => addNegativeY(i)}\n            onRemoveNegativeY={() => removeNegativeY(i)}\n            onAddStack={() => addStack(i)}\n            onRemoveStack={() => removeStack(i)}\n            onStackChange={(checked) => handleStackChange(i, checked)}\n          />\n        ))\n      )}\n      {queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && (\n        <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={addQuerySettingsInput}>\n          Add Query Settings\n        </Button>\n      )}\n    </Stack>\n  );\n}\n\ninterface QuerySettingsInputProps {\n  querySettings: QuerySettingsOptions;\n  availableQueryIndexes: number[];\n  queryNames: string[];\n  onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorValueChange: (colorValue: string) => void;\n  onLineStyleChange: (lineStyle: string) => void;\n  onAreaOpacityChange: (event: Event, value: number | number[]) => void;\n  onDelete: () => void;\n  inputRef?: React.RefObject<HTMLInputElement | null>;\n  // Optional control handlers\n  onAddColor: () => void;\n  onRemoveColor: () => void;\n  onAddLineStyle: () => void;\n  onRemoveLineStyle: () => void;\n  onAddAreaOpacity: () => void;\n  onRemoveAreaOpacity: () => void;\n  onAddFormat: () => void;\n  onRemoveFormat: () => void;\n  onFormatChange: (format?: FormatOptions) => void;\n  onAddNegativeY: () => void;\n  onRemoveNegativeY: () => void;\n  onAddStack: () => void;\n  onRemoveStack: () => void;\n  onStackChange: (checked: boolean) => void;\n}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format, negativeY, stack },\n  availableQueryIndexes,\n  queryNames,\n  onQueryIndexChange,\n  onColorModeChange,\n  onColorValueChange,\n  onLineStyleChange,\n  onAreaOpacityChange,\n  onDelete,\n  inputRef,\n  onAddColor: onAddColor,\n  onRemoveColor: onRemoveColor,\n  onAddLineStyle,\n  onRemoveLineStyle,\n  onAddAreaOpacity,\n  onRemoveAreaOpacity,\n  onAddFormat,\n  onRemoveFormat,\n  onFormatChange,\n  onAddNegativeY,\n  onRemoveNegativeY,\n  onAddStack,\n  onRemoveStack,\n  onStackChange,\n}: QuerySettingsInputProps): ReactElement {\n  // current query index should also be selectable\n  const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).sort((a, b) => a - b);\n\n  // State for dropdown menu\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  // Calculate available options\n  const availableOptions = useMemo(() => {\n    const options = [];\n    if (!colorMode) options.push({ key: 'color', label: 'Color', action: onAddColor });\n    if (!lineStyle) options.push({ key: 'lineStyle', label: 'Line Style', action: onAddLineStyle });\n    if (areaOpacity === undefined) options.push({ key: 'opacity', label: 'Opacity', action: onAddAreaOpacity });\n    if (format === undefined) options.push({ key: 'format', label: 'Format', action: onAddFormat });\n    if (!negativeY) options.push({ key: 'negativeY', label: 'Negative Y', action: onAddNegativeY });\n    if (stack === undefined) options.push({ key: 'stack', label: 'Stack', action: onAddStack });\n    return options;\n  }, [\n    colorMode,\n    lineStyle,\n    areaOpacity,\n    format,\n    negativeY,\n    stack,\n    onAddColor,\n    onAddLineStyle,\n    onAddAreaOpacity,\n    onAddFormat,\n    onAddNegativeY,\n    onAddStack,\n  ]);\n\n  const handleAddMenuClick = (event: React.MouseEvent<HTMLElement>): void => {\n    if (availableOptions.length === 1 && availableOptions[0]) {\n      // If only one option left, add it directly\n      availableOptions[0].action();\n    } else {\n      // Show dropdown\n      setAnchorEl(event.currentTarget);\n    }\n  };\n\n  const handleMenuClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const handleMenuItemClick = (action: () => void): void => {\n    action();\n    handleMenuClose();\n  };\n\n  return (\n    <Stack\n      sx={{\n        borderBottom: '1px solid',\n        borderColor: 'divider',\n        borderRadius: 1,\n        p: 2,\n        display: 'flex',\n        flexWrap: 'nowrap',\n        flexDirection: 'row',\n      }}\n    >\n      <Stack direction=\"row\" alignItems=\"center\" sx={{ flexWrap: 'wrap', gap: 2, flexGrow: 1 }}>\n        {/* Query Index Selection */}\n        <TextField\n          select\n          inputRef={inputRef}\n          value={queryIndex}\n          label=\"Query\"\n          onChange={onQueryIndexChange}\n          sx={{ minWidth: '75px' }}\n        >\n          {selectableQueryIndexes.map((qi) => (\n            <MenuItem key={`query-${qi}`} value={qi}>\n              {queryNames[qi] ?? `#${qi + 1}`}\n            </MenuItem>\n          ))}\n        </TextField>\n\n        {/* Color section */}\n        {colorMode && (\n          <SettingsSection label=\"Color\" onRemove={onRemoveColor}>\n            <TextField select value={colorMode} onChange={onColorModeChange} size=\"small\" sx={{ flexGrow: 1 }}>\n              <MenuItem value=\"fixed\">Fixed</MenuItem>\n              <MenuItem value=\"fixed-single\">Fixed (single series)</MenuItem>\n            </TextField>\n            <OptionsColorPicker\n              label={queryNames[queryIndex] ?? `Query n°${queryIndex + 1}`}\n              color={colorValue || DEFAULT_COLOR_VALUE}\n              onColorChange={onColorValueChange}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Line Style section */}\n        {lineStyle && (\n          <SettingsSection label=\"Line Style\" onRemove={onRemoveLineStyle}>\n            <ToggleButtonGroup\n              color=\"primary\"\n              exclusive\n              value={lineStyle}\n              onChange={(__, newValue) => {\n                if (newValue !== null) {\n                  onLineStyleChange(newValue);\n                }\n              }}\n              size=\"small\"\n            >\n              {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                  {config.label}\n                </ToggleButton>\n              ))}\n            </ToggleButtonGroup>\n            {/* Spacer to push delete button to the right */}\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Area Opacity section */}\n        {areaOpacity !== undefined && (\n          <SettingsSection label=\"Opacity\" onRemove={onRemoveAreaOpacity}>\n            {/* Spacer as I don't want to add a prop to SettingsSection for left-padding just for that case.. */}\n            <Box />\n            <Slider\n              value={areaOpacity}\n              valueLabelDisplay=\"auto\"\n              step={OPACITY_CONFIG.step}\n              marks\n              min={OPACITY_CONFIG.min}\n              max={OPACITY_CONFIG.max}\n              onChange={onAreaOpacityChange}\n              sx={{ flexGrow: 1 }}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Format section */}\n        {format !== undefined && (\n          <SettingsSection label=\"Format\" onRemove={onRemoveFormat}>\n            <Box sx={{ minWidth: '180px', display: 'flex', gap: 1, flexDirection: 'column' }}>\n              <FormatControls value={format} onChange={onFormatChange} />\n            </Box>\n          </SettingsSection>\n        )}\n\n        {/* Negative Y section (presence-only flag) */}\n        {negativeY && (\n          <SettingsSection label=\"Negative Y\" onRemove={onRemoveNegativeY}>\n            <Typography variant=\"body2\" color=\"text.secondary\" sx={{ flexGrow: 1, py: 0.5 }}>\n              Series rendered below the X axis\n            </Typography>\n          </SettingsSection>\n        )}\n\n        {/* Stack section */}\n        {stack !== undefined && (\n          <SettingsSection label=\"Stack\" onRemove={onRemoveStack}>\n            <Switch\n              checked={stack}\n              onChange={(e) => onStackChange(e.target.checked)}\n              slotProps={{ input: { 'aria-label': 'stack override' } }}\n            />\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Add Options Button - only show if there are available options */}\n        {availableOptions.length > 0 && (\n          <>\n            <IconButton onClick={handleAddMenuClick} aria-label=\"Add option\">\n              <AddIcon />\n            </IconButton>\n\n            {/* Dropdown Menu */}\n            <Menu\n              anchorEl={anchorEl}\n              open={Boolean(anchorEl)}\n              onClose={handleMenuClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'left',\n              }}\n            >\n              {availableOptions.map((option) => (\n                <MenuItem\n                  key={option.key}\n                  onClick={() => handleMenuItemClick(option.action)}\n                  sx={{ minWidth: '120px' }}\n                >\n                  <AddIcon sx={{ mr: 1, fontSize: '1rem' }} />\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Menu>\n          </>\n        )}\n      </Stack>\n      {/* Delete Button for this query settings */}\n      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n        <IconButton\n          aria-label={`delete settings for ${queryNames[queryIndex] ?? `query n°${queryIndex + 1}`}`}\n          onClick={onDelete}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Box>\n    </Stack>\n  );\n}\n\ninterface SettingsSectionProps {\n  label: string;\n  children: React.ReactNode;\n  onRemove: () => void;\n}\n\n// Reusable section component\nfunction SettingsSection(props: SettingsSectionProps): ReactElement {\n  const { label, children, onRemove } = props;\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'relative', minWidth: '250px' }}>\n      <Typography\n        variant=\"caption\"\n        sx={{\n          position: 'absolute',\n          top: -8,\n          left: 12,\n          backgroundColor: theme.palette.background.code,\n          px: 0.5,\n          color: 'text.secondary',\n          zIndex: 1,\n        }}\n      >\n        {label}\n      </Typography>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        spacing={1}\n        sx={{\n          border: '1px solid',\n          borderColor: 'divider',\n          borderRadius: 1,\n          p: 1,\n        }}\n      >\n        {children}\n        <IconButton size=\"small\" onClick={onRemove} aria-label={`Remove ${label}`}>\n          <CloseIcon />\n        </IconButton>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["Box","Button","IconButton","Menu","MenuItem","Slider","Stack","Switch","TextField","ToggleButton","ToggleButtonGroup","Typography","useTheme","FormatControls","OptionsColorPicker","React","useEffect","useMemo","useRef","useState","DeleteIcon","AddIcon","CloseIcon","produce","generateQueryNames","useDataQueriesContext","DEFAULT_AREA_OPACITY","LINE_STYLE_CONFIG","OPACITY_CONFIG","DEFAULT_COLOR_VALUE","NO_INDEX_AVAILABLE","QuerySettingsEditor","props","onChange","value","querySettingsList","querySettings","handleQuerySettingsChange","newQuerySettings","draft","recentlyAddedInputRef","focusRef","current","focus","length","handleQueryIndexChange","e","i","undefined","queryIndex","parseInt","target","handleColorModeChange","newColorMode","colorMode","colorValue","handleColorValueChange","handleLineStyleChange","lineStyle","handleAreaOpacityChange","_","sliderValue","newValue","Array","isArray","areaOpacity","updateQuerySettings","updater","qs","deleteQuerySettingsInput","updatedQuerySettingsList","splice","addColor","removeColor","addLineStyle","removeLineStyle","addAreaOpacity","removeAreaOpacity","addFormat","format","unit","shortValues","removeFormat","addStack","stack","removeStack","handleStackChange","checked","handleFormatChange","addNegativeY","negativeY","removeNegativeY","queryDefinitions","queryCount","queryNames","availableQueryIndexes","bookedQueryIndexes","map","allQueryIndexes","from","filter","includes","firstAvailableQueryIndex","defaultQuerySettings","addQuerySettingsInput","push","mb","fontStyle","QuerySettingsInput","inputRef","onQueryIndexChange","onColorModeChange","onColorValueChange","color","onLineStyleChange","onAreaOpacityChange","event","onDelete","onAddColor","onRemoveColor","onAddLineStyle","onRemoveLineStyle","onAddAreaOpacity","onRemoveAreaOpacity","onAddFormat","onRemoveFormat","onFormatChange","onAddNegativeY","onRemoveNegativeY","onAddStack","onRemoveStack","onStackChange","variant","startIcon","sx","marginTop","onClick","selectableQueryIndexes","concat","sort","a","b","anchorEl","setAnchorEl","availableOptions","options","key","label","action","handleAddMenuClick","currentTarget","handleMenuClose","handleMenuItemClick","borderBottom","borderColor","borderRadius","p","display","flexWrap","flexDirection","direction","alignItems","gap","flexGrow","select","minWidth","qi","SettingsSection","onRemove","size","onColorChange","exclusive","__","Object","entries","styleValue","config","aria-label","valueLabelDisplay","step","marks","min","max","py","slotProps","input","open","Boolean","onClose","anchorOrigin","vertical","horizontal","option","mr","fontSize","justifyContent","children","theme","position","top","left","backgroundColor","palette","background","code","px","zIndex","spacing","border"],"mappings":"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"}
+{"version":3,"sources":["../../src/QuerySettingsEditor.tsx"],"sourcesContent":["// Copyright The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport {\n  Box,\n  Button,\n  IconButton,\n  Menu,\n  MenuItem,\n  Slider,\n  Stack,\n  Switch,\n  TextField,\n  ToggleButton,\n  ToggleButtonGroup,\n  Typography,\n  useTheme,\n} from '@mui/material';\nimport type { FormatOptions } from '@perses-dev/components';\nimport { FormatControls, OptionsColorPicker } from '@perses-dev/components';\nimport { generateQueryNames, useDataQueriesContext } from '@perses-dev/plugin-system';\nimport { produce } from 'immer';\nimport CloseIcon from 'mdi-material-ui/Close';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport type { ReactElement } from 'react';\nimport React, { useEffect, useMemo, useRef, useState } from 'react';\n\nimport type {\n  QuerySettingsOptions,\n  TimeSeriesChartOptions,\n  TimeSeriesChartOptionsEditorProps,\n} from './time-series-chart-model';\nimport { DEFAULT_AREA_OPACITY, LINE_STYLE_CONFIG, OPACITY_CONFIG } 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';\n      qs.colorValue = DEFAULT_COLOR_VALUE;\n    });\n  };\n\n  const removeColor = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.colorMode = undefined;\n      qs.colorValue = undefined;\n    });\n  };\n\n  const addLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = 'solid';\n    });\n  };\n\n  const removeLineStyle = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.lineStyle = undefined;\n    });\n  };\n\n  const addAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = DEFAULT_AREA_OPACITY;\n    });\n  };\n\n  const removeAreaOpacity = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.areaOpacity = undefined;\n    });\n  };\n\n  const addFormat = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = { unit: 'decimal', shortValues: true };\n    });\n  };\n\n  const removeFormat = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = undefined;\n    });\n  };\n\n  const addStack = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = false;\n    });\n  };\n\n  const removeStack = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = undefined;\n    });\n  };\n\n  const handleStackChange = (i: number, checked: boolean): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.stack = checked;\n    });\n  };\n\n  const handleFormatChange = (i: number, format?: FormatOptions): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.format = format;\n    });\n  };\n\n  const addNegativeY = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.negativeY = true;\n    });\n  };\n\n  const removeNegativeY = (i: number): void => {\n    updateQuerySettings(i, (qs) => {\n      qs.negativeY = undefined;\n    });\n  };\n\n  const { queryDefinitions } = useDataQueriesContext();\n  const queryCount = queryDefinitions.length;\n  const queryNames = useMemo(() => generateQueryNames(queryDefinitions), [queryDefinitions]);\n\n  // Compute the list of query indexes for which query settings are not already defined.\n  // This is to avoid already-booked indexes to still be selectable in the dropdown(s)\n  const availableQueryIndexes = useMemo(() => {\n    const bookedQueryIndexes = querySettingsList?.map((querySettings) => querySettings.queryIndex) ?? [];\n    const allQueryIndexes = Array.from({ length: queryCount }, (_, i) => i);\n    return allQueryIndexes.filter((_, queryIndex) => !bookedQueryIndexes.includes(queryIndex));\n  }, [querySettingsList, queryCount]);\n\n  const firstAvailableQueryIndex = useMemo(() => {\n    return availableQueryIndexes[0] ?? NO_INDEX_AVAILABLE;\n  }, [availableQueryIndexes]);\n\n  const defaultQuerySettings: QuerySettingsOptions = {\n    queryIndex: firstAvailableQueryIndex,\n  };\n\n  const addQuerySettingsInput = (): void => {\n    focusRef.current = true;\n    if (querySettingsList === undefined) {\n      handleQuerySettingsChange([defaultQuerySettings]);\n    } else {\n      handleQuerySettingsChange(\n        produce(querySettingsList, (draft) => {\n          draft.push(defaultQuerySettings);\n        }),\n      );\n    }\n  };\n\n  return (\n    <Stack>\n      {queryCount === 0 ? (\n        <Typography mb={2} fontStyle=\"italic\">\n          No query defined\n        </Typography>\n      ) : (\n        querySettingsList?.map((querySettings, i) => (\n          <QuerySettingsInput\n            inputRef={i === querySettingsList.length - 1 ? recentlyAddedInputRef : undefined}\n            key={i}\n            querySettings={querySettings}\n            availableQueryIndexes={availableQueryIndexes}\n            queryNames={queryNames}\n            onQueryIndexChange={(e) => {\n              handleQueryIndexChange(e, i);\n            }}\n            onColorModeChange={(e) => handleColorModeChange(e, i)}\n            onColorValueChange={(color) => handleColorValueChange(color, i)}\n            onLineStyleChange={(lineStyle) => handleLineStyleChange(lineStyle, i)}\n            onAreaOpacityChange={(event, value) => handleAreaOpacityChange(event, value, i)}\n            onDelete={() => {\n              deleteQuerySettingsInput(i);\n            }}\n            onAddColor={() => addColor(i)}\n            onRemoveColor={() => removeColor(i)}\n            onAddLineStyle={() => addLineStyle(i)}\n            onRemoveLineStyle={() => removeLineStyle(i)}\n            onAddAreaOpacity={() => addAreaOpacity(i)}\n            onRemoveAreaOpacity={() => removeAreaOpacity(i)}\n            onAddFormat={() => addFormat(i)}\n            onRemoveFormat={() => removeFormat(i)}\n            onFormatChange={(format) => handleFormatChange(i, format)}\n            onAddNegativeY={() => addNegativeY(i)}\n            onRemoveNegativeY={() => removeNegativeY(i)}\n            onAddStack={() => addStack(i)}\n            onRemoveStack={() => removeStack(i)}\n            onStackChange={(checked) => handleStackChange(i, checked)}\n          />\n        ))\n      )}\n      {queryCount > 0 && firstAvailableQueryIndex !== NO_INDEX_AVAILABLE && (\n        <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={addQuerySettingsInput}>\n          Add Query Settings\n        </Button>\n      )}\n    </Stack>\n  );\n}\n\ninterface QuerySettingsInputProps {\n  querySettings: QuerySettingsOptions;\n  availableQueryIndexes: number[];\n  queryNames: string[];\n  onQueryIndexChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorModeChange: (e: React.ChangeEvent<HTMLInputElement>) => void;\n  onColorValueChange: (colorValue: string) => void;\n  onLineStyleChange: (lineStyle: string) => void;\n  onAreaOpacityChange: (event: Event, value: number | number[]) => void;\n  onDelete: () => void;\n  inputRef?: React.RefObject<HTMLInputElement | null>;\n  // Optional control handlers\n  onAddColor: () => void;\n  onRemoveColor: () => void;\n  onAddLineStyle: () => void;\n  onRemoveLineStyle: () => void;\n  onAddAreaOpacity: () => void;\n  onRemoveAreaOpacity: () => void;\n  onAddFormat: () => void;\n  onRemoveFormat: () => void;\n  onFormatChange: (format?: FormatOptions) => void;\n  onAddNegativeY: () => void;\n  onRemoveNegativeY: () => void;\n  onAddStack: () => void;\n  onRemoveStack: () => void;\n  onStackChange: (checked: boolean) => void;\n}\n\nfunction QuerySettingsInput({\n  querySettings: { queryIndex, colorMode, colorValue, lineStyle, areaOpacity, format, negativeY, stack },\n  availableQueryIndexes,\n  queryNames,\n  onQueryIndexChange,\n  onColorModeChange,\n  onColorValueChange,\n  onLineStyleChange,\n  onAreaOpacityChange,\n  onDelete,\n  inputRef,\n  onAddColor,\n  onRemoveColor,\n  onAddLineStyle,\n  onRemoveLineStyle,\n  onAddAreaOpacity,\n  onRemoveAreaOpacity,\n  onAddFormat,\n  onRemoveFormat,\n  onFormatChange,\n  onAddNegativeY,\n  onRemoveNegativeY,\n  onAddStack,\n  onRemoveStack,\n  onStackChange,\n}: QuerySettingsInputProps): ReactElement {\n  // current query index should also be selectable\n  const selectableQueryIndexes = availableQueryIndexes.concat(queryIndex).toSorted((a, b) => a - b);\n\n  // State for dropdown menu\n  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);\n\n  // Calculate available options\n  const availableOptions = useMemo(() => {\n    const options = [];\n    if (!colorMode) options.push({ key: 'color', label: 'Color', action: onAddColor });\n    if (!lineStyle) options.push({ key: 'lineStyle', label: 'Line Style', action: onAddLineStyle });\n    if (areaOpacity === undefined) options.push({ key: 'opacity', label: 'Opacity', action: onAddAreaOpacity });\n    if (format === undefined) options.push({ key: 'format', label: 'Format', action: onAddFormat });\n    if (!negativeY) options.push({ key: 'negativeY', label: 'Negative Y', action: onAddNegativeY });\n    if (stack === undefined) options.push({ key: 'stack', label: 'Stack', action: onAddStack });\n    return options;\n  }, [\n    colorMode,\n    lineStyle,\n    areaOpacity,\n    format,\n    negativeY,\n    stack,\n    onAddColor,\n    onAddLineStyle,\n    onAddAreaOpacity,\n    onAddFormat,\n    onAddNegativeY,\n    onAddStack,\n  ]);\n\n  const handleAddMenuClick = (event: React.MouseEvent<HTMLElement>): void => {\n    if (availableOptions.length === 1 && availableOptions[0]) {\n      // If only one option left, add it directly\n      availableOptions[0].action();\n    } else {\n      // Show dropdown\n      setAnchorEl(event.currentTarget);\n    }\n  };\n\n  const handleMenuClose = (): void => {\n    setAnchorEl(null);\n  };\n\n  const handleMenuItemClick = (action: () => void): void => {\n    action();\n    handleMenuClose();\n  };\n\n  return (\n    <Stack\n      sx={{\n        borderBottom: '1px solid',\n        borderColor: 'divider',\n        borderRadius: 1,\n        p: 2,\n        display: 'flex',\n        flexWrap: 'nowrap',\n        flexDirection: 'row',\n      }}\n    >\n      <Stack direction=\"row\" alignItems=\"center\" sx={{ flexWrap: 'wrap', gap: 2, flexGrow: 1 }}>\n        {/* Query Index Selection */}\n        <TextField\n          select\n          inputRef={inputRef}\n          value={queryIndex}\n          label=\"Query\"\n          onChange={onQueryIndexChange}\n          sx={{ minWidth: '75px' }}\n        >\n          {selectableQueryIndexes.map((qi) => (\n            <MenuItem key={`query-${qi}`} value={qi}>\n              {queryNames[qi] ?? `#${qi + 1}`}\n            </MenuItem>\n          ))}\n        </TextField>\n\n        {/* Color section */}\n        {colorMode && (\n          <SettingsSection label=\"Color\" onRemove={onRemoveColor}>\n            <TextField select value={colorMode} onChange={onColorModeChange} size=\"small\" sx={{ flexGrow: 1 }}>\n              <MenuItem value=\"fixed\">Fixed</MenuItem>\n              <MenuItem value=\"fixed-single\">Fixed (single series)</MenuItem>\n            </TextField>\n            <OptionsColorPicker\n              label={queryNames[queryIndex] ?? `Query n°${queryIndex + 1}`}\n              color={colorValue || DEFAULT_COLOR_VALUE}\n              onColorChange={onColorValueChange}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Line Style section */}\n        {lineStyle && (\n          <SettingsSection label=\"Line Style\" onRemove={onRemoveLineStyle}>\n            <ToggleButtonGroup\n              color=\"primary\"\n              exclusive\n              value={lineStyle}\n              onChange={(__, newValue) => {\n                if (newValue !== null) {\n                  onLineStyleChange(newValue);\n                }\n              }}\n              size=\"small\"\n            >\n              {Object.entries(LINE_STYLE_CONFIG).map(([styleValue, config]) => (\n                <ToggleButton key={styleValue} value={styleValue} aria-label={`${styleValue} line style`}>\n                  {config.label}\n                </ToggleButton>\n              ))}\n            </ToggleButtonGroup>\n            {/* Spacer to push delete button to the right */}\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Area Opacity section */}\n        {areaOpacity !== undefined && (\n          <SettingsSection label=\"Opacity\" onRemove={onRemoveAreaOpacity}>\n            {/* Spacer as I don't want to add a prop to SettingsSection for left-padding just for that case.. */}\n            <Box />\n            <Slider\n              value={areaOpacity}\n              valueLabelDisplay=\"auto\"\n              step={OPACITY_CONFIG.step}\n              marks\n              min={OPACITY_CONFIG.min}\n              max={OPACITY_CONFIG.max}\n              onChange={onAreaOpacityChange}\n              sx={{ flexGrow: 1 }}\n            />\n          </SettingsSection>\n        )}\n\n        {/* Format section */}\n        {format !== undefined && (\n          <SettingsSection label=\"Format\" onRemove={onRemoveFormat}>\n            <Box sx={{ minWidth: '180px', display: 'flex', gap: 1, flexDirection: 'column' }}>\n              <FormatControls value={format} onChange={onFormatChange} />\n            </Box>\n          </SettingsSection>\n        )}\n\n        {/* Negative Y section (presence-only flag) */}\n        {negativeY && (\n          <SettingsSection label=\"Negative Y\" onRemove={onRemoveNegativeY}>\n            <Typography variant=\"body2\" color=\"text.secondary\" sx={{ flexGrow: 1, py: 0.5 }}>\n              Series rendered below the X axis\n            </Typography>\n          </SettingsSection>\n        )}\n\n        {/* Stack section */}\n        {stack !== undefined && (\n          <SettingsSection label=\"Stack\" onRemove={onRemoveStack}>\n            <Switch\n              checked={stack}\n              onChange={(e) => onStackChange(e.target.checked)}\n              slotProps={{ input: { 'aria-label': 'stack override' } }}\n            />\n            <Box sx={{ flexGrow: 1 }} />\n          </SettingsSection>\n        )}\n\n        {/* Add Options Button - only show if there are available options */}\n        {availableOptions.length > 0 && (\n          <>\n            <IconButton onClick={handleAddMenuClick} aria-label=\"Add option\">\n              <AddIcon />\n            </IconButton>\n\n            {/* Dropdown Menu */}\n            <Menu\n              anchorEl={anchorEl}\n              open={Boolean(anchorEl)}\n              onClose={handleMenuClose}\n              anchorOrigin={{\n                vertical: 'bottom',\n                horizontal: 'left',\n              }}\n            >\n              {availableOptions.map((option) => (\n                <MenuItem\n                  key={option.key}\n                  onClick={() => handleMenuItemClick(option.action)}\n                  sx={{ minWidth: '120px' }}\n                >\n                  <AddIcon sx={{ mr: 1, fontSize: '1rem' }} />\n                  {option.label}\n                </MenuItem>\n              ))}\n            </Menu>\n          </>\n        )}\n      </Stack>\n      {/* Delete Button for this query settings */}\n      <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center' }}>\n        <IconButton\n          aria-label={`delete settings for ${queryNames[queryIndex] ?? `query n°${queryIndex + 1}`}`}\n          onClick={onDelete}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Box>\n    </Stack>\n  );\n}\n\ninterface SettingsSectionProps {\n  label: string;\n  children: React.ReactNode;\n  onRemove: () => void;\n}\n\n// Reusable section component\nfunction SettingsSection(props: SettingsSectionProps): ReactElement {\n  const { label, children, onRemove } = props;\n  const theme = useTheme();\n\n  return (\n    <Box sx={{ position: 'relative', minWidth: '250px' }}>\n      <Typography\n        variant=\"caption\"\n        sx={{\n          position: 'absolute',\n          top: -8,\n          left: 12,\n          backgroundColor: theme.palette.background.code,\n          px: 0.5,\n          color: 'text.secondary',\n          zIndex: 1,\n        }}\n      >\n        {label}\n      </Typography>\n      <Stack\n        direction=\"row\"\n        alignItems=\"center\"\n        spacing={1}\n        sx={{\n          border: '1px solid',\n          borderColor: 'divider',\n          borderRadius: 1,\n          p: 1,\n        }}\n      >\n        {children}\n        <IconButton size=\"small\" onClick={onRemove} aria-label={`Remove ${label}`}>\n          <CloseIcon />\n        </IconButton>\n      </Stack>\n    </Box>\n  );\n}\n"],"names":["Box","Button","IconButton","Menu","MenuItem","Slider","Stack","Switch","TextField","ToggleButton","ToggleButtonGroup","Typography","useTheme","FormatControls","OptionsColorPicker","generateQueryNames","useDataQueriesContext","produce","CloseIcon","DeleteIcon","AddIcon","React","useEffect","useMemo","useRef","useState","DEFAULT_AREA_OPACITY","LINE_STYLE_CONFIG","OPACITY_CONFIG","DEFAULT_COLOR_VALUE","NO_INDEX_AVAILABLE","QuerySettingsEditor","props","onChange","value","querySettingsList","querySettings","handleQuerySettingsChange","newQuerySettings","draft","recentlyAddedInputRef","focusRef","current","focus","length","handleQueryIndexChange","e","i","undefined","queryIndex","parseInt","target","handleColorModeChange","newColorMode","colorMode","colorValue","handleColorValueChange","handleLineStyleChange","lineStyle","handleAreaOpacityChange","_","sliderValue","newValue","Array","isArray","areaOpacity","updateQuerySettings","updater","qs","deleteQuerySettingsInput","updatedQuerySettingsList","splice","addColor","removeColor","addLineStyle","removeLineStyle","addAreaOpacity","removeAreaOpacity","addFormat","format","unit","shortValues","removeFormat","addStack","stack","removeStack","handleStackChange","checked","handleFormatChange","addNegativeY","negativeY","removeNegativeY","queryDefinitions","queryCount","queryNames","availableQueryIndexes","bookedQueryIndexes","map","allQueryIndexes","from","filter","includes","firstAvailableQueryIndex","defaultQuerySettings","addQuerySettingsInput","push","mb","fontStyle","QuerySettingsInput","inputRef","onQueryIndexChange","onColorModeChange","onColorValueChange","color","onLineStyleChange","onAreaOpacityChange","event","onDelete","onAddColor","onRemoveColor","onAddLineStyle","onRemoveLineStyle","onAddAreaOpacity","onRemoveAreaOpacity","onAddFormat","onRemoveFormat","onFormatChange","onAddNegativeY","onRemoveNegativeY","onAddStack","onRemoveStack","onStackChange","variant","startIcon","sx","marginTop","onClick","selectableQueryIndexes","concat","toSorted","a","b","anchorEl","setAnchorEl","availableOptions","options","key","label","action","handleAddMenuClick","currentTarget","handleMenuClose","handleMenuItemClick","borderBottom","borderColor","borderRadius","p","display","flexWrap","flexDirection","direction","alignItems","gap","flexGrow","select","minWidth","qi","SettingsSection","onRemove","size","onColorChange","exclusive","__","Object","entries","styleValue","config","aria-label","valueLabelDisplay","step","marks","min","max","py","slotProps","input","open","Boolean","onClose","anchorOrigin","vertical","horizontal","option","mr","fontSize","justifyContent","children","theme","position","top","left","backgroundColor","palette","background","code","px","zIndex","spacing","border"],"mappings":"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"}

package/lib/TimeSeriesChart.d.ts

@@ -1,5 +1,5 @@
-import { PanelPlugin } from '@perses-dev/plugin-system';
-import { TimeSeriesChartOptions } from './time-series-chart-model';
-import { TimeSeriesChartProps } from './TimeSeriesChartPanel';
+import type { PanelPlugin } from '@perses-dev/plugin-system';
+import type { TimeSeriesChartOptions } from './time-series-chart-model';
+import type { TimeSeriesChartProps } from './TimeSeriesChartPanel';
 export declare const TimeSeriesChart: PanelPlugin<TimeSeriesChartOptions, TimeSeriesChartProps>;
 //# sourceMappingURL=TimeSeriesChart.d.ts.map

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;AAGxG,OAAO,EAAwB,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAGpF,eAAO,MAAM,eAAe,EAAE,WAAW,CAAC,sBAAsB,EAAE,oBAAoB,CAerF,CAAC"}
+{"version":3,"file":"TimeSeriesChart.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChart.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,2BAA2B,CAAC;AAI7D,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,2BAA2B,CAAC;AAExE,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAInE,eAAO,MAAM,eAAe,EAAE,WAAW,CAAC,sBAAsB,EAAE,oBAAoB,CAerF,CAAC"}

package/lib/TimeSeriesChart.js

@@ -10,11 +10,11 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { createInitialTimeSeriesChartOptions } from './time-series-chart-model';
-import { TimeSeriesChartGeneralSettings } from './GeneralSettingsEditor';
-import { QuerySettingsEditor } from './QuerySettingsEditor';
-import { TimeSeriesChartPanel } from './TimeSeriesChartPanel';
-import { TimeSeriesExportAction } from './TimeSeriesExportAction';
+import { TimeSeriesChartGeneralSettings } from "./GeneralSettingsEditor.js";
+import { QuerySettingsEditor } from "./QuerySettingsEditor.js";
+import { createInitialTimeSeriesChartOptions } from "./time-series-chart-model.js";
+import { TimeSeriesChartPanel } from "./TimeSeriesChartPanel.js";
+import { TimeSeriesExportAction } from "./TimeSeriesExportAction.js";
 export const TimeSeriesChart = {
     PanelComponent: TimeSeriesChartPanel,
     supportedQueryTypes: [

package/lib/TimeSeriesChart.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/TimeSeriesChart.ts"],"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 { PanelPlugin } from '@perses-dev/plugin-system';\nimport { createInitialTimeSeriesChartOptions, TimeSeriesChartOptions } from './time-series-chart-model';\nimport { TimeSeriesChartGeneralSettings } from './GeneralSettingsEditor';\nimport { QuerySettingsEditor } from './QuerySettingsEditor';\nimport { TimeSeriesChartPanel, TimeSeriesChartProps } from './TimeSeriesChartPanel';\nimport { TimeSeriesExportAction } from './TimeSeriesExportAction';\n\nexport const TimeSeriesChart: PanelPlugin<TimeSeriesChartOptions, TimeSeriesChartProps> = {\n  PanelComponent: TimeSeriesChartPanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  supportsAnnotations: true,\n  panelOptionsEditorComponents: [\n    { label: 'General Settings', content: TimeSeriesChartGeneralSettings },\n    { label: 'Query Settings', content: QuerySettingsEditor },\n  ],\n  createInitialOptions: createInitialTimeSeriesChartOptions,\n  actions: [\n    {\n      component: TimeSeriesExportAction,\n      location: 'header',\n    },\n  ],\n};\n"],"names":["createInitialTimeSeriesChartOptions","TimeSeriesChartGeneralSettings","QuerySettingsEditor","TimeSeriesChartPanel","TimeSeriesExportAction","TimeSeriesChart","PanelComponent","supportedQueryTypes","supportsAnnotations","panelOptionsEditorComponents","label","content","createInitialOptions","actions","component","location"],"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;AAGjC,SAASA,mCAAmC,QAAgC,4BAA4B;AACxG,SAASC,8BAA8B,QAAQ,0BAA0B;AACzE,SAASC,mBAAmB,QAAQ,wBAAwB;AAC5D,SAASC,oBAAoB,QAA8B,yBAAyB;AACpF,SAASC,sBAAsB,QAAQ,2BAA2B;AAElE,OAAO,MAAMC,kBAA6E;IACxFC,gBAAgBH;IAChBI,qBAAqB;QAAC;KAAkB;IACxCC,qBAAqB;IACrBC,8BAA8B;QAC5B;YAAEC,OAAO;YAAoBC,SAASV;QAA+B;QACrE;YAAES,OAAO;YAAkBC,SAAST;QAAoB;KACzD;IACDU,sBAAsBZ;IACtBa,SAAS;QACP;YACEC,WAAWV;YACXW,UAAU;QACZ;KACD;AACH,EAAE"}
+{"version":3,"sources":["../../src/TimeSeriesChart.ts"],"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 type { PanelPlugin } from '@perses-dev/plugin-system';\n\nimport { TimeSeriesChartGeneralSettings } from './GeneralSettingsEditor';\nimport { QuerySettingsEditor } from './QuerySettingsEditor';\nimport type { TimeSeriesChartOptions } from './time-series-chart-model';\nimport { createInitialTimeSeriesChartOptions } from './time-series-chart-model';\nimport type { TimeSeriesChartProps } from './TimeSeriesChartPanel';\nimport { TimeSeriesChartPanel } from './TimeSeriesChartPanel';\nimport { TimeSeriesExportAction } from './TimeSeriesExportAction';\n\nexport const TimeSeriesChart: PanelPlugin<TimeSeriesChartOptions, TimeSeriesChartProps> = {\n  PanelComponent: TimeSeriesChartPanel,\n  supportedQueryTypes: ['TimeSeriesQuery'],\n  supportsAnnotations: true,\n  panelOptionsEditorComponents: [\n    { label: 'General Settings', content: TimeSeriesChartGeneralSettings },\n    { label: 'Query Settings', content: QuerySettingsEditor },\n  ],\n  createInitialOptions: createInitialTimeSeriesChartOptions,\n  actions: [\n    {\n      component: TimeSeriesExportAction,\n      location: 'header',\n    },\n  ],\n};\n"],"names":["TimeSeriesChartGeneralSettings","QuerySettingsEditor","createInitialTimeSeriesChartOptions","TimeSeriesChartPanel","TimeSeriesExportAction","TimeSeriesChart","PanelComponent","supportedQueryTypes","supportsAnnotations","panelOptionsEditorComponents","label","content","createInitialOptions","actions","component","location"],"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;AAIjC,SAASA,8BAA8B,QAAQ,6BAA0B;AACzE,SAASC,mBAAmB,QAAQ,2BAAwB;AAE5D,SAASC,mCAAmC,QAAQ,+BAA4B;AAEhF,SAASC,oBAAoB,QAAQ,4BAAyB;AAC9D,SAASC,sBAAsB,QAAQ,8BAA2B;AAElE,OAAO,MAAMC,kBAA6E;IACxFC,gBAAgBH;IAChBI,qBAAqB;QAAC;KAAkB;IACxCC,qBAAqB;IACrBC,8BAA8B;QAC5B;YAAEC,OAAO;YAAoBC,SAASX;QAA+B;QACrE;YAAEU,OAAO;YAAkBC,SAASV;QAAoB;KACzD;IACDW,sBAAsBV;IACtBW,SAAS;QACP;YACEC,WAAWV;YACXW,UAAU;QACZ;KACD;AACH,EAAE"}

package/lib/TimeSeriesChartBase.d.ts

@@ -1,8 +1,8 @@
-import { MouseEvent } from 'react';
+import type { ChartInstance, FormatOptions, TimeChartSeriesMapping, TooltipConfig, ZoomEventData } from '@perses-dev/components';
+import type { TimeScale, TimeSeries } from '@perses-dev/spec';
 import type { EChartsCoreOption, GridComponentOption, YAXisComponentOption } from 'echarts';
-import { ChartInstance, FormatOptions, TimeChartSeriesMapping, TooltipConfig, ZoomEventData } from '@perses-dev/components';
-import { TimeScale, TimeSeries } from '@perses-dev/spec';
-import { TimeSeriesAnnotation } from './utils/annotation';
+import type { MouseEvent } from 'react';
+import type { TimeSeriesAnnotation } from './utils/annotation';
 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,EAA0E,MAAM,OAAO,CAAC;AAKvH,OAAO,KAAK,EACV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAejB,OAAO,EACL,aAAa,EAQb,aAAa,EAOb,sBAAsB,EAEtB,aAAa,EAGb,aAAa,EACd,MAAM,wBAAwB,CAAC;AAEhC,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAkB1D,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,WAAW,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,mBAAmB,0GAoc9B,CAAC"}
+{"version":3,"file":"TimeSeriesChartBase.d.ts","sourceRoot":"","sources":["../../src/TimeSeriesChartBase.tsx"],"names":[],"mappings":"AAcA,OAAO,KAAK,EACV,aAAa,EAGb,aAAa,EAEb,sBAAsB,EACtB,aAAa,EACb,aAAa,EACd,MAAM,wBAAwB,CAAC;AAgBhC,OAAO,KAAK,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,KAAK,EAEV,iBAAiB,EACjB,mBAAmB,EAEnB,oBAAoB,EAErB,MAAM,SAAS,CAAC;AAkBjB,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAIxC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAkB/D,MAAM,WAAW,cAAc;IAC7B,MAAM,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,UAAU,EAAE,CAAC;IACnB,aAAa,EAAE,sBAAsB,CAAC;IACtC,WAAW,CAAC,EAAE,oBAAoB,EAAE,CAAC;IACrC,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,KAAK,CAAC,EAAE,oBAAoB,GAAG,oBAAoB,EAAE,CAAC;IACtD,MAAM,CAAC,EAAE,aAAa,CAAC;IACvB;;OAEG;IACH,eAAe,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,aAAa,CAAC,CAAC;IAC7C,IAAI,CAAC,EAAE,mBAAmB,CAAC;IAC3B,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,aAAa,CAAC,EAAE,OAAO,GAAG,SAAS,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,UAAU,CAAC,EAAE,CAAC,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;IACxC,aAAa,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,KAAK,IAAI,CAAC;IACxC,oCAAoC,CAAC,EAAE,CAAC,OAAO,EAAE,iBAAiB,KAAK,iBAAiB,CAAC;CAC1F;AAED,eAAO,MAAM,mBAAmB,0GAoc9B,CAAC"}

package/lib/TimeSeriesChartBase.js

@@ -11,18 +11,18 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // 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 { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Box } from '@mui/material';
-import merge from 'lodash/merge';
-import isEqual from 'lodash/isEqual';
-import { use } from 'echarts/core';
-import { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from 'echarts/charts';
-import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent } from 'echarts/components';
-import { CanvasRenderer } from 'echarts/renderers';
-import { clearHighlightedSeries, DEFAULT_PINNED_CROSSHAIR, DEFAULT_TOOLTIP_CONFIG, EChart, enableDataZoom, getClosestTimestamp, getCommonTimeScale, getFormattedAxis, getPointInGrid, restoreChart, TimeChartTooltip, useChartsContext, useTimeZone } from '@perses-dev/components';
-import { createTimezoneAwareAxisFormatter } from './utils/timezone-formatter';
-import { AnnotationTooltip, buildAnnotationSeries } from './annotations/AnnotationTooltip';
-use([
+import { Box } from "@mui/material";
+import { clearHighlightedSeries, DEFAULT_PINNED_CROSSHAIR, DEFAULT_TOOLTIP_CONFIG, EChart, enableDataZoom, getClosestTimestamp, getCommonTimeScale, getFormattedAxis, getPointInGrid, restoreChart, TimeChartTooltip, useChartsContext, useTimeZone } from "@perses-dev/components";
+import { LineChart as EChartsLineChart, BarChart as EChartsBarChart } from "echarts/charts";
+import { GridComponent, DatasetComponent, DataZoomComponent, MarkAreaComponent, MarkLineComponent, MarkPointComponent, TitleComponent, ToolboxComponent, TooltipComponent } from "echarts/components";
+import { use as registerECharts } from "echarts/core";
+import { CanvasRenderer } from "echarts/renderers";
+import isEqual from "lodash/isEqual";
+import merge from "lodash/merge";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { AnnotationTooltip, buildAnnotationSeries } from "./annotations/AnnotationTooltip.js";
+import { createTimezoneAwareAxisFormatter } from "./utils/timezone-formatter.js";
+registerECharts([
     EChartsLineChart,
     EChartsBarChart,
     GridComponent,