@perses-dev/plugin-system 0.0.0-snapshot-ts-panel-actions-76080ec → 0.0.0-snapshot-reverse-proxy-75afbd7

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -10,36 +10,25 @@
 // 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 { Switch } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Switch, ToggleButtonGroup, ToggleButton } from '@mui/material';
 import { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core';
 import { ErrorAlert, OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';
-import { LEGEND_MODE_CONFIG, LEGEND_POSITIONS_CONFIG, validateLegendSpec, LEGEND_VALUE_CONFIG, LEGEND_SIZE_CONFIG } from '../../model';
+import { useMemo } from 'react';
+import { LEGEND_MODE_CONFIG, LEGEND_POSITIONS_CONFIG, validateLegendSpec, LEGEND_VALUE_CONFIG, LEGEND_SIZE_CONFIG, comparisonLegends } from '../../model';
 const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
     return {
         id: id,
         ...config
     };
 });
-const MODE_OPTIONS = Object.entries(LEGEND_MODE_CONFIG).map(([id, config])=>{
-    return {
-        id: id,
-        ...config
-    };
-});
 const SIZE_OPTIONS = Object.entries(LEGEND_SIZE_CONFIG).map(([id, config])=>{
     return {
         id: id,
         ...config
     };
 });
-const VALUE_OPTIONS = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config])=>{
-    return {
-        id: id,
-        ...config
-    };
-});
-export function LegendOptionsEditor({ value, onChange, showValuesEditor = true }) {
+export function LegendOptionsEditor({ value, onChange, showValuesEditor = true, calculation = 'aggregation' }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
         const legendValue = checked === true ? {
@@ -53,13 +42,6 @@ export function LegendOptionsEditor({ value, onChange, showValuesEditor = true }
             position: newValue.id
         });
     };
-    const handleLegendModeChange = (_, newValue)=>{
-        onChange({
-            ...value,
-            position: currentPosition,
-            mode: newValue.id
-        });
-    };
     const handleLegendSizeChange = (_, newValue)=>{
         onChange({
             ...value,
@@ -80,20 +62,51 @@ export function LegendOptionsEditor({ value, onChange, showValuesEditor = true }
     const currentPosition = getLegendPosition(value?.position);
     const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];
     const currentMode = getLegendMode(value?.mode);
-    const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];
     const currentSize = getLegendSize(value?.size);
     const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];
-    const currentValues = value?.values || [];
-    const legendValuesConfig = currentValues.reduce((result, item)=>{
-        const config = LEGEND_VALUE_CONFIG[item];
-        if (config) {
-            result.push({
-                ...config,
-                id: item
+    const legendValuesConfig = useMemo(()=>{
+        const currentValues = value?.values;
+        if (!currentValues?.length) return [];
+        if (calculation === 'aggregation') {
+            return currentValues.reduce((result, item)=>{
+                const config = LEGEND_VALUE_CONFIG[item];
+                if (config) {
+                    result.push({
+                        ...config,
+                        id: item
+                    });
+                }
+                return result;
+            }, []);
+        }
+        return currentValues.map((id)=>{
+            const { label, description } = comparisonLegends[id];
+            return {
+                id,
+                label,
+                description
+            };
+        });
+    }, [
+        calculation,
+        value?.values
+    ]);
+    const valueOptions = useMemo(()=>{
+        if (calculation === 'aggregation') {
+            return Object.entries(LEGEND_VALUE_CONFIG || {}).map(([id, config])=>{
+                return {
+                    id: id,
+                    ...config
+                };
             });
         }
-        return result;
-    }, []);
+        return Object.entries(comparisonLegends).map(([id, config])=>({
+                id: id,
+                ...config
+            }));
+    }, [
+        calculation
+    ]);
     return /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
         title: "Legend",
         children: [
@@ -106,69 +119,83 @@ export function LegendOptionsEditor({ value, onChange, showValuesEditor = true }
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Show",
                 control: /*#__PURE__*/ _jsx(Switch, {
-                    checked: value !== undefined,
+                    checked: !!value,
                     onChange: handleLegendShowChange
                 })
             }),
-            /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: "Position",
-                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
-                    value: {
-                        ...legendPositionConfig,
-                        id: currentPosition
-                    },
-                    options: POSITION_OPTIONS,
-                    onChange: handleLegendPositionChange,
-                    disabled: value === undefined,
-                    disableClearable: true
-                })
-            }),
-            /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: "Mode",
-                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
-                    value: {
-                        ...legendModeConfig,
-                        id: currentMode
-                    },
-                    options: MODE_OPTIONS,
-                    onChange: handleLegendModeChange,
-                    disabled: value === undefined,
-                    disableClearable: true
-                })
-            }),
-            /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: "Size",
-                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
-                    value: {
-                        ...legendSizeConfig,
-                        id: currentSize
-                    },
-                    options: SIZE_OPTIONS,
-                    onChange: handleLegendSizeChange,
-                    // TODO: enable sizes for list mode when we normalize the layout of
-                    // lists to more closely match tables.
-                    disabled: value === undefined || currentMode !== 'table',
-                    disableClearable: true
-                })
-            }),
-            showValuesEditor && /*#__PURE__*/ _jsx(OptionsEditorControl, {
-                label: "Values",
-                control: // For some reason, the inferred option type doesn't always seem to work
-                // quite right when `multiple` is true. Explicitly setting the generics
-                // to work around this.
-                /*#__PURE__*/ _jsx(SettingsAutocomplete, {
-                    multiple: true,
-                    disableCloseOnSelect: true,
-                    disableClearable: true,
-                    value: legendValuesConfig,
-                    options: VALUE_OPTIONS,
-                    onChange: handleLegendValueChange,
-                    disabled: value === undefined || currentMode !== 'table',
-                    limitTags: 1,
-                    ChipProps: {
-                        size: 'small'
-                    }
-                })
+            value && /*#__PURE__*/ _jsxs(_Fragment, {
+                children: [
+                    /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                        label: "Position",
+                        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                            value: {
+                                ...legendPositionConfig,
+                                id: currentPosition
+                            },
+                            options: POSITION_OPTIONS,
+                            onChange: handleLegendPositionChange,
+                            disableClearable: true
+                        })
+                    }),
+                    /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                        label: "Mode",
+                        control: /*#__PURE__*/ _jsx(ToggleButtonGroup, {
+                            color: "primary",
+                            exclusive: true,
+                            value: currentMode,
+                            "aria-label": "Mode",
+                            onChange: (__, newValue)=>{
+                                onChange({
+                                    ...value,
+                                    position: currentPosition,
+                                    mode: newValue
+                                });
+                            },
+                            children: Object.entries(LEGEND_MODE_CONFIG).map(([modeId, config])=>/*#__PURE__*/ _jsx(ToggleButton, {
+                                    value: modeId,
+                                    selected: currentMode === modeId,
+                                    "aria-label": `display ${modeId} mode`,
+                                    children: config.label
+                                }, modeId))
+                        })
+                    }),
+                    currentMode === 'table' && /*#__PURE__*/ _jsxs(_Fragment, {
+                        children: [
+                            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                                label: "Size",
+                                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                                    value: {
+                                        ...legendSizeConfig,
+                                        id: currentSize
+                                    },
+                                    options: SIZE_OPTIONS,
+                                    onChange: handleLegendSizeChange,
+                                    // TODO: enable sizes for list mode when we normalize the layout of
+                                    // lists to more closely match tables.
+                                    disableClearable: true
+                                })
+                            }),
+                            showValuesEditor && /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                                label: "Values",
+                                control: // For some reason, the inferred option type doesn't always seem to work
+                                // quite right when `multiple` is true. Explicitly setting the generics
+                                // to work around this.
+                                /*#__PURE__*/ _jsx(SettingsAutocomplete, {
+                                    multiple: true,
+                                    disableCloseOnSelect: true,
+                                    disableClearable: true,
+                                    value: legendValuesConfig,
+                                    options: valueOptions,
+                                    onChange: handleLegendValueChange,
+                                    limitTags: 1,
+                                    ChipProps: {
+                                        size: 'small'
+                                    }
+                                })
+                            })
+                        ]
+                    })
+                ]
             })
         ]
     });

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.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 { Switch, SwitchProps } from '@mui/material';\nimport { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core';\nimport { ErrorAlert, OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport {\n  LEGEND_MODE_CONFIG,\n  LEGEND_POSITIONS_CONFIG,\n  LegendSpecOptions,\n  LegendSingleSelectConfig,\n  validateLegendSpec,\n  LEGEND_VALUE_CONFIG,\n  LegendValue,\n  LEGEND_SIZE_CONFIG,\n} from '../../model';\n\ntype LegendPositionOption = LegendSingleSelectConfig & { id: LegendSpecOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendSpecOptions['position'],\n    ...config,\n  };\n});\n\ntype LegendModeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['mode'] };\n\nconst MODE_OPTIONS: LegendModeOption[] = Object.entries(LEGEND_MODE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['mode'],\n    ...config,\n  };\n});\n\ntype LegendSizeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['size'] };\n\nconst SIZE_OPTIONS: LegendSizeOption[] = Object.entries(LEGEND_SIZE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['size'],\n    ...config,\n  };\n});\n\ntype LegendValueOption = LegendSingleSelectConfig & { id: LegendValue };\nconst VALUE_OPTIONS: LegendValueOption[] = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendValue,\n    ...config,\n  };\n});\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n  showValuesEditor?: boolean;\n}\n\nexport function LegendOptionsEditor({\n  value,\n  onChange,\n  showValuesEditor = true,\n}: LegendOptionsEditorProps): ReactElement {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption): void => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendModeChange = (_: unknown, newValue: LegendModeOption): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      mode: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      values: newValue.map((value) => {\n        return value.id;\n      }),\n    });\n  };\n\n  const isValidLegend = validateLegendSpec(value);\n  const currentPosition = getLegendPosition(value?.position);\n  const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];\n\n  const currentMode = getLegendMode(value?.mode);\n  const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];\n\n  const currentSize = getLegendSize(value?.size);\n  const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];\n\n  const currentValues = value?.values || [];\n  const legendValuesConfig = currentValues.reduce((result, item) => {\n    const config = LEGEND_VALUE_CONFIG[item];\n    if (config) {\n      result.push({ ...config, id: item });\n    }\n    return result;\n  }, [] as LegendValueOption[]);\n\n  return (\n    <OptionsEditorGroup title=\"Legend\">\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl\n        label=\"Show\"\n        control={<Switch checked={value !== undefined} onChange={handleLegendShowChange} />}\n      />\n      <OptionsEditorControl\n        label=\"Position\"\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...legendPositionConfig,\n              id: currentPosition,\n            }}\n            options={POSITION_OPTIONS}\n            onChange={handleLegendPositionChange}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Mode\"\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...legendModeConfig,\n              id: currentMode,\n            }}\n            options={MODE_OPTIONS}\n            onChange={handleLegendModeChange}\n            disabled={value === undefined}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      <OptionsEditorControl\n        label=\"Size\"\n        control={\n          <SettingsAutocomplete\n            value={{\n              ...legendSizeConfig,\n              id: currentSize,\n            }}\n            options={SIZE_OPTIONS}\n            onChange={handleLegendSizeChange}\n            // TODO: enable sizes for list mode when we normalize the layout of\n            // lists to more closely match tables.\n            disabled={value === undefined || currentMode !== 'table'}\n            disableClearable\n          ></SettingsAutocomplete>\n        }\n      />\n      {showValuesEditor && (\n        <OptionsEditorControl\n          label=\"Values\"\n          control={\n            // For some reason, the inferred option type doesn't always seem to work\n            // quite right when `multiple` is true. Explicitly setting the generics\n            // to work around this.\n            <SettingsAutocomplete<LegendValueOption, true, true>\n              multiple={true}\n              disableCloseOnSelect\n              disableClearable\n              value={legendValuesConfig}\n              options={VALUE_OPTIONS}\n              onChange={handleLegendValueChange}\n              disabled={value === undefined || currentMode !== 'table'}\n              limitTags={1}\n              ChipProps={{\n                size: 'small',\n              }}\n            />\n          }\n        />\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Switch","DEFAULT_LEGEND","getLegendMode","getLegendPosition","getLegendSize","ErrorAlert","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","POSITION_OPTIONS","Object","entries","map","id","config","MODE_OPTIONS","SIZE_OPTIONS","VALUE_OPTIONS","LegendOptionsEditor","value","onChange","showValuesEditor","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendModeChange","currentPosition","mode","handleLegendSizeChange","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","legendModeConfig","currentSize","legendSizeConfig","currentValues","legendValuesConfig","reduce","result","item","push","title","error","name","message","label","control","options","disabled","disableClearable","multiple","disableCloseOnSelect","limitTags","ChipProps"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.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 { Switch, SwitchProps, ToggleButtonGroup, ToggleButton } from '@mui/material';\nimport { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core';\nimport { ErrorAlert, OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';\nimport { ReactElement, useMemo } from 'react';\nimport {\n  LEGEND_MODE_CONFIG,\n  LEGEND_POSITIONS_CONFIG,\n  LegendSpecOptions,\n  LegendSingleSelectConfig,\n  validateLegendSpec,\n  LEGEND_VALUE_CONFIG,\n  LegendValue,\n  LEGEND_SIZE_CONFIG,\n  comparisonLegends,\n  ComparisonValues,\n} from '../../model';\n\ntype LegendPositionOption = LegendSingleSelectConfig & { id: LegendSpecOptions['position'] };\n\nconst POSITION_OPTIONS: LegendPositionOption[] = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as LegendSpecOptions['position'],\n    ...config,\n  };\n});\n\ntype LegendSizeOption = LegendSingleSelectConfig & { id: Required<LegendSpecOptions>['size'] };\n\nconst SIZE_OPTIONS: LegendSizeOption[] = Object.entries(LEGEND_SIZE_CONFIG).map(([id, config]) => {\n  return {\n    id: id as Required<LegendSpecOptions>['size'],\n    ...config,\n  };\n});\n\ntype LegendValueOption = LegendSingleSelectConfig & { id: LegendValue | ComparisonValues };\n\nexport interface LegendOptionsEditorProps {\n  value?: LegendSpecOptions;\n  onChange: (legend?: LegendSpecOptions) => void;\n  showValuesEditor?: boolean;\n  calculation?: 'aggregation' | 'comparison';\n}\n\nexport function LegendOptionsEditor({\n  value,\n  onChange,\n  showValuesEditor = true,\n  calculation = 'aggregation',\n}: LegendOptionsEditorProps): ReactElement {\n  const handleLegendShowChange: SwitchProps['onChange'] = (_: unknown, checked: boolean) => {\n    // legend is hidden when legend obj is undefined\n    const legendValue = checked === true ? { position: DEFAULT_LEGEND.position } : undefined;\n    onChange(legendValue);\n  };\n\n  const handleLegendPositionChange = (_: unknown, newValue: LegendPositionOption): void => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]): void => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      values: newValue.map((value) => {\n        return value.id;\n      }),\n    });\n  };\n\n  const isValidLegend = validateLegendSpec(value);\n  const currentPosition = getLegendPosition(value?.position);\n  const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];\n\n  const currentMode = getLegendMode(value?.mode);\n\n  const currentSize = getLegendSize(value?.size);\n  const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];\n\n  const legendValuesConfig = useMemo(() => {\n    const currentValues = value?.values;\n    if (!currentValues?.length) return [];\n\n    if (calculation === 'aggregation') {\n      return currentValues.reduce((result, item) => {\n        const config = LEGEND_VALUE_CONFIG[item as LegendValue];\n        if (config) {\n          result.push({ ...config, id: item });\n        }\n        return result;\n      }, [] as LegendValueOption[]);\n    }\n\n    return currentValues.map((id) => {\n      const { label, description } = comparisonLegends[id as ComparisonValues];\n      return {\n        id,\n        label,\n        description,\n      };\n    });\n  }, [calculation, value?.values]);\n\n  const valueOptions = useMemo(() => {\n    if (calculation === 'aggregation') {\n      return Object.entries(LEGEND_VALUE_CONFIG || {}).map(([id, config]) => {\n        return {\n          id: id as LegendValue,\n          ...config,\n        };\n      });\n    }\n\n    return Object.entries(comparisonLegends).map(([id, config]) => ({\n      id: id as ComparisonValues,\n      ...config,\n    }));\n  }, [calculation]);\n\n  return (\n    <OptionsEditorGroup title=\"Legend\">\n      {!isValidLegend && <ErrorAlert error={{ name: 'invalid-legend', message: 'Invalid legend spec' }} />}\n      <OptionsEditorControl label=\"Show\" control={<Switch checked={!!value} onChange={handleLegendShowChange} />} />\n      {value && (\n        <>\n          <OptionsEditorControl\n            label=\"Position\"\n            control={\n              <SettingsAutocomplete\n                value={{\n                  ...legendPositionConfig,\n                  id: currentPosition,\n                }}\n                options={POSITION_OPTIONS}\n                onChange={handleLegendPositionChange}\n                disableClearable\n              />\n            }\n          />\n          <OptionsEditorControl\n            label=\"Mode\"\n            control={\n              <ToggleButtonGroup\n                color=\"primary\"\n                exclusive\n                value={currentMode}\n                aria-label=\"Mode\"\n                onChange={(__, newValue) => {\n                  onChange({\n                    ...value,\n                    position: currentPosition,\n                    mode: newValue,\n                  });\n                }}\n              >\n                {Object.entries(LEGEND_MODE_CONFIG).map(([modeId, config]) => (\n                  <ToggleButton\n                    key={modeId}\n                    value={modeId}\n                    selected={currentMode === modeId}\n                    aria-label={`display ${modeId} mode`}\n                  >\n                    {config.label}\n                  </ToggleButton>\n                ))}\n              </ToggleButtonGroup>\n            }\n          />\n          {currentMode === 'table' && (\n            <>\n              <OptionsEditorControl\n                label=\"Size\"\n                control={\n                  <SettingsAutocomplete\n                    value={{\n                      ...legendSizeConfig,\n                      id: currentSize,\n                    }}\n                    options={SIZE_OPTIONS}\n                    onChange={handleLegendSizeChange}\n                    // TODO: enable sizes for list mode when we normalize the layout of\n                    // lists to more closely match tables.\n                    disableClearable\n                  />\n                }\n              />\n              {showValuesEditor && (\n                <OptionsEditorControl\n                  label=\"Values\"\n                  control={\n                    // For some reason, the inferred option type doesn't always seem to work\n                    // quite right when `multiple` is true. Explicitly setting the generics\n                    // to work around this.\n                    <SettingsAutocomplete<LegendValueOption, true, true>\n                      multiple={true}\n                      disableCloseOnSelect\n                      disableClearable\n                      value={legendValuesConfig}\n                      options={valueOptions}\n                      onChange={handleLegendValueChange}\n                      limitTags={1}\n                      ChipProps={{\n                        size: 'small',\n                      }}\n                    />\n                  }\n                />\n              )}\n            </>\n          )}\n        </>\n      )}\n    </OptionsEditorGroup>\n  );\n}\n"],"names":["Switch","ToggleButtonGroup","ToggleButton","DEFAULT_LEGEND","getLegendMode","getLegendPosition","getLegendSize","ErrorAlert","OptionsEditorControl","OptionsEditorGroup","SettingsAutocomplete","useMemo","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","comparisonLegends","POSITION_OPTIONS","Object","entries","map","id","config","SIZE_OPTIONS","LegendOptionsEditor","value","onChange","showValuesEditor","calculation","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendSizeChange","currentPosition","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","mode","currentSize","legendSizeConfig","legendValuesConfig","currentValues","length","reduce","result","item","push","label","description","valueOptions","title","error","name","message","control","options","disableClearable","color","exclusive","aria-label","__","modeId","selected","multiple","disableCloseOnSelect","limitTags","ChipProps"],"mappings":"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"}

package/dist/components/MultiQueryEditor/MultiQueryEditor.d.ts

@@ -1,5 +1,6 @@
-import { ReactElement } from 'react';
+/// <reference types="react" />
 import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
+import { PluginEditorRef } from '../PluginEditor';
 export interface MultiQueryEditorProps {
     queryTypes: QueryPluginType[];
     queries?: QueryDefinition[];
@@ -13,5 +14,5 @@ export interface MultiQueryEditorProps {
  * @param onChange The callback to call when the queries are modified
  * @constructor
  */
-export declare function MultiQueryEditor({ queryTypes, queries, onChange }: MultiQueryEditorProps): ReactElement;
+export declare const MultiQueryEditor: import("react").ForwardRefExoticComponent<MultiQueryEditorProps & import("react").RefAttributes<PluginEditorRef>>;
 //# sourceMappingURL=MultiQueryEditor.d.ts.map

package/dist/components/MultiQueryEditor/MultiQueryEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MultiQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAI/C,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAIpE,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AAmCD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,GAAG,YAAY,CAkF5G"}
+{"version":3,"file":"MultiQueryEditor.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,qBAAqB;IACpC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,QAAQ,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAChD;AAmCD;;;;;;;GAOG;AAEH,eAAO,MAAM,gBAAgB,mHAmF3B,CAAC"}

package/dist/components/MultiQueryEditor/MultiQueryEditor.js

@@ -11,7 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useState } from 'react';
+import { forwardRef, useState } from 'react';
 import { produce } from 'immer';
 import { Button, Stack } from '@mui/material';
 import AddIcon from 'mdi-material-ui/Plus';
@@ -52,7 +52,8 @@ function useDefaultQueryDefinition(queryTypes) {
  * @param queries The list of query definitions to render
  * @param onChange The callback to call when the queries are modified
  * @constructor
- */ export function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
+ */ export const MultiQueryEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { queryTypes, queries = [], onChange } = props;
     const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
@@ -114,6 +115,7 @@ function useDefaultQueryDefinition(queryTypes) {
             /*#__PURE__*/ _jsx(Stack, {
                 spacing: 1,
                 children: queryDefinitions.map((query, i)=>/*#__PURE__*/ _jsx(QueryEditorContainer, {
+                        ref: ref,
                         queryTypes: queryTypes,
                         index: i,
                         query: query,
@@ -134,6 +136,7 @@ function useDefaultQueryDefinition(queryTypes) {
             })
         ]
     });
-}
+});
+MultiQueryEditor.displayName = 'MultiQueryEditor';
 
 //# sourceMappingURL=MultiQueryEditor.js.map

package/dist/components/MultiQueryEditor/MultiQueryEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(queryTypes: QueryPluginType[]): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\nexport function MultiQueryEditor({ queryTypes, queries = [], onChange }: MultiQueryEditorProps): ReactElement {\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);\n\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n}\n"],"names":["useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","queries","onChange","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","length","spacing","query","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 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 { forwardRef, ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { PluginEditorRef } from '../PluginEditor';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(queryTypes: QueryPluginType[]): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    useErrorBoundary: true,\n    enabled: true,\n  });\n\n  // This default query definition is used if no query is provided initially or when we add a new query\n  return {\n    defaultInitialQueryDefinition: {\n      kind: defaultQueryType,\n      spec: {\n        plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n      },\n    },\n    isLoading,\n  };\n}\n\n/**\n * A component render a list of {@link QueryEditorContainer} for the given query definitions.\n * It allows adding, removing and editing queries.\n * @param queryTypes The list of query types that the underlying editor will propose\n * @param queries The list of query definitions to render\n * @param onChange The callback to call when the queries are modified\n * @constructor\n */\n\nexport const MultiQueryEditor = forwardRef<PluginEditorRef, MultiQueryEditorProps>((props, ref): ReactElement => {\n  const { queryTypes, queries = [], onChange } = props;\n  const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);\n  // State for which queries are collapsed\n  const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(() => false));\n\n  // Query handlers\n  const handleQueryChange = (index: number, queryDef: QueryDefinition): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft[index] = queryDef;\n        } else {\n          draft = [queryDef];\n        }\n      })\n    );\n  };\n\n  const handleQueryAdd = (): void => {\n    onChange(\n      produce(queries, (draft) => {\n        if (draft) {\n          draft.push(defaultInitialQueryDefinition);\n        } else {\n          draft = [...queries, defaultInitialQueryDefinition];\n        }\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.push(false);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryDelete = (index: number): void => {\n    onChange(\n      produce(queries, (draft) => {\n        draft.splice(index, 1);\n      })\n    );\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed.splice(index, 1);\n      return [...queriesCollapsed];\n    });\n  };\n\n  const handleQueryCollapseExpand = (index: number): void => {\n    setQueriesCollapsed((queriesCollapsed) => {\n      queriesCollapsed[index] = !queriesCollapsed[index];\n      return [...queriesCollapsed];\n    });\n  };\n\n  // show one query input if queries is empty\n  const queryDefinitions: QueryDefinition[] = queries.length\n    ? queries\n    : !isLoading\n      ? [defaultInitialQueryDefinition]\n      : [];\n\n  return (\n    <>\n      <Stack spacing={1}>\n        {queryDefinitions.map((query: QueryDefinition, i: number) => (\n          <QueryEditorContainer\n            ref={ref}\n            queryTypes={queryTypes}\n            key={i}\n            index={i}\n            query={query}\n            isCollapsed={!!queriesCollapsed[i]}\n            onChange={handleQueryChange}\n            onDelete={queries.length > 1 ? handleQueryDelete : undefined}\n            onCollapseExpand={handleQueryCollapseExpand}\n          />\n        ))}\n      </Stack>\n      <Button variant=\"contained\" startIcon={<AddIcon />} sx={{ marginTop: 1 }} onClick={handleQueryAdd}>\n        Add Query\n      </Button>\n    </>\n  );\n});\n\nMultiQueryEditor.displayName = 'MultiQueryEditor';\n"],"names":["forwardRef","useState","produce","Button","Stack","AddIcon","useListPluginMetadata","usePlugin","usePluginRegistry","QueryEditorContainer","useDefaultQueryDefinition","queryTypes","defaultQueryType","data","queryPlugins","isLoading","defaultPluginKinds","defaultQueryKind","spec","name","defaultQueryPlugin","useErrorBoundary","enabled","defaultInitialQueryDefinition","kind","plugin","createInitialOptions","MultiQueryEditor","props","ref","queries","onChange","queriesCollapsed","setQueriesCollapsed","map","handleQueryChange","index","queryDef","draft","handleQueryAdd","push","handleQueryDelete","splice","handleQueryCollapseExpand","queryDefinitions","length","spacing","query","i","isCollapsed","onDelete","undefined","onCollapseExpand","variant","startIcon","sx","marginTop","onClick","displayName"],"mappings":"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"}

package/dist/components/MultiQueryEditor/QueryEditorContainer.d.ts

@@ -1,5 +1,6 @@
+/// <reference types="react" />
 import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
-import { ReactElement } from 'react';
+import { PluginEditorRef } from '../PluginEditor';
 /**
  * Properties for {@link QueryEditorContainer}
  */
@@ -24,6 +25,6 @@ interface QueryEditorContainerProps {
  * @param onCollapseExpand callback when the query is collapsed or expanded
  * @constructor
  */
-export declare const QueryEditorContainer: ({ queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand, }: QueryEditorContainerProps) => ReactElement;
+export declare const QueryEditorContainer: import("react").ForwardRefExoticComponent<QueryEditorContainerProps & import("react").RefAttributes<PluginEditorRef>>;
 export {};
 //# sourceMappingURL=QueryEditorContainer.d.ts.map

package/dist/components/MultiQueryEditor/QueryEditorContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"QueryEditorContainer.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAKpE,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC;;GAEG;AACH,UAAU,yBAAyB;IACjC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,oBAAoB,qFAQ9B,yBAAyB,KAAG,YAsB9B,CAAC"}
+{"version":3,"file":"QueryEditorContainer.d.ts","sourceRoot":"","sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAMpE,OAAO,EAAmC,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAGnF;;GAEG;AACH,UAAU,yBAAyB;IACjC,UAAU,EAAE,eAAe,EAAE,CAAC;IAC9B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;IAC1D,gBAAgB,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED;;;;;;;;;;;GAWG;AAEH,eAAO,MAAM,oBAAoB,uHA2BhC,CAAC"}

package/dist/components/MultiQueryEditor/QueryEditorContainer.js

@@ -16,7 +16,9 @@ import { Stack, IconButton, Typography, Box } from '@mui/material';
 import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import ChevronDown from 'mdi-material-ui/ChevronDown';
 import ChevronRight from 'mdi-material-ui/ChevronRight';
+import { forwardRef } from 'react';
 import { PluginEditor } from '../PluginEditor';
+import { useTimeRange } from '../../runtime';
 /**
  * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible
  * to not take too much space.
@@ -28,7 +30,8 @@ import { PluginEditor } from '../PluginEditor';
  * @param onChange callback when the query is changed
  * @param onCollapseExpand callback when the query is collapsed or expanded
  * @constructor
- */ export const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand })=>{
+ */ export const QueryEditorContainer = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1,
         children: [
@@ -64,21 +67,24 @@ import { PluginEditor } from '../PluginEditor';
                 ]
             }),
             !isCollapsed && /*#__PURE__*/ _jsx(QueryEditor, {
+                ref: ref,
                 queryTypes: queryTypes,
                 value: query,
                 onChange: (next)=>onChange(index, next)
             })
         ]
     }, index);
-};
+});
+QueryEditorContainer.displayName = 'QueryEditorContainer';
 /**
  * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.
  * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin
  * spec for this plugin.
  * @param props
  * @constructor
- */ function QueryEditor(props) {
+ */ const QueryEditor = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { value, onChange, queryTypes, ...others } = props;
+    const { refresh } = useTimeRange();
     const handlePluginChange = (next)=>{
         onChange(produce(value, (draft)=>{
             draft.kind = next.selection.type;
@@ -89,6 +95,9 @@ import { PluginEditor } from '../PluginEditor';
     return /*#__PURE__*/ _jsx(Box, {
         ...others,
         children: /*#__PURE__*/ _jsx(PluginEditor, {
+            postExecuteRunQuery: refresh,
+            ref: ref,
+            withRunQueryButton: true,
             pluginTypes: queryTypes,
             pluginKindLabel: "Query Type",
             value: {
@@ -101,6 +110,7 @@ import { PluginEditor } from '../PluginEditor';
             onChange: handlePluginChange
         })
     });
-}
+});
+QueryEditor.displayName = 'QueryEditor';
 
 //# sourceMappingURL=QueryEditorContainer.js.map

package/dist/components/MultiQueryEditor/QueryEditorContainer.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { ReactElement } from 'react';\nimport { PluginEditor, PluginEditorProps } from '../PluginEditor';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  onChange: (index: number, query: QueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\n/**\n * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n */\nexport const QueryEditorContainer = ({\n  queryTypes,\n  index,\n  query,\n  isCollapsed,\n  onDelete,\n  onChange,\n  onCollapseExpand,\n}: QueryEditorContainerProps): ReactElement => {\n  return (\n    <Stack key={index} spacing={1}>\n      <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\n        <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n          {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n        </IconButton>\n        <Typography variant=\"overline\" component=\"h4\">\n          Query #{index + 1}\n        </Typography>\n        <IconButton\n          size=\"small\"\n          // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n          sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n          onClick={() => onDelete && onDelete(index)}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Stack>\n      {!isCollapsed && <QueryEditor queryTypes={queryTypes} value={query} onChange={(next) => onChange(index, next)} />}\n    </Stack>\n  );\n};\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  queryTypes: QueryPluginType[];\n  value: QueryDefinition;\n  onChange: (next: QueryDefinition) => void;\n}\n\n/**\n * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\nfunction QueryEditor(props: QueryEditorProps): ReactElement {\n  const { value, onChange, queryTypes, ...others } = props;\n\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.kind = next.selection.type;\n        draft.spec.plugin.kind = next.selection.kind;\n        draft.spec.plugin.spec = next.spec;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      <PluginEditor\n        pluginTypes={queryTypes}\n        pluginKindLabel=\"Query Type\"\n        value={{\n          selection: {\n            kind: value.spec.plugin.kind,\n            type: value.kind,\n          },\n          spec: value.spec.plugin.spec,\n        }}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n}\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","PluginEditor","QueryEditorContainer","queryTypes","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","props","others","handlePluginChange","draft","kind","selection","type","spec","plugin","pluginTypes","pluginKindLabel"],"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,OAAO,QAAQ,QAAQ;AAEhC,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AAExD,SAASC,YAAY,QAA2B,kBAAkB;AAelE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,gBAAgB,EACU;IAC1B,qBACE,MAACf;QAAkBgB,SAAS;;0BAC1B,MAAChB;gBAAMiB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAACtB;wBAAWuB,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACN,kCAAkB,KAACD;;kCAErC,MAACH;wBAAWwB,SAAQ;wBAAWC,WAAU;;4BAAK;4BACpCjB,QAAQ;;;kCAElB,KAACT;wBACCuB,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,GAAGjB,WAAW,YAAY,UAAU;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACN;;;;YAGJ,CAACQ,6BAAe,KAACmB;gBAAYtB,YAAYA;gBAAYuB,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAjB9FvB;AAoBhB,EAAE;AAWF;;;;;;CAMC,GACD,SAASqB,YAAYG,KAAuB;IAC1C,MAAM,EAAEF,KAAK,EAAElB,QAAQ,EAAEL,UAAU,EAAE,GAAG0B,QAAQ,GAAGD;IAEnD,MAAME,qBAAoD,CAACH;QACzDnB,SACEf,QAAQiC,OAAO,CAACK;YACdA,MAAMC,IAAI,GAAGL,KAAKM,SAAS,CAACC,IAAI;YAChCH,MAAMI,IAAI,CAACC,MAAM,CAACJ,IAAI,GAAGL,KAAKM,SAAS,CAACD,IAAI;YAC5CD,MAAMI,IAAI,CAACC,MAAM,CAACD,IAAI,GAAGR,KAAKQ,IAAI;QACpC;IAEJ;IAEA,qBACE,KAACtC;QAAK,GAAGgC,MAAM;kBACb,cAAA,KAAC5B;YACCoC,aAAalC;YACbmC,iBAAgB;YAChBZ,OAAO;gBACLO,WAAW;oBACTD,MAAMN,MAAMS,IAAI,CAACC,MAAM,CAACJ,IAAI;oBAC5BE,MAAMR,MAAMM,IAAI;gBAClB;gBACAG,MAAMT,MAAMS,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;YACA3B,UAAUsB;;;AAIlB"}
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { forwardRef, ReactElement } from 'react';\nimport { PluginEditor, PluginEditorProps, PluginEditorRef } from '../PluginEditor';\nimport { useTimeRange } from '../../runtime';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  onChange: (index: number, query: QueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\n/**\n * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n */\n\nexport const QueryEditorContainer = forwardRef<PluginEditorRef, QueryEditorContainerProps>(\n  (props, ref): ReactElement => {\n    const { queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand } = props;\n    return (\n      <Stack key={index} spacing={1}>\n        <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\n          <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n            {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n          </IconButton>\n          <Typography variant=\"overline\" component=\"h4\">\n            Query #{index + 1}\n          </Typography>\n          <IconButton\n            size=\"small\"\n            // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n            sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n            onClick={() => onDelete && onDelete(index)}\n          >\n            <DeleteIcon />\n          </IconButton>\n        </Stack>\n        {!isCollapsed && (\n          <QueryEditor ref={ref} queryTypes={queryTypes} value={query} onChange={(next) => onChange(index, next)} />\n        )}\n      </Stack>\n    );\n  }\n);\n\nQueryEditorContainer.displayName = 'QueryEditorContainer';\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  queryTypes: QueryPluginType[];\n  value: QueryDefinition;\n  onChange: (next: QueryDefinition) => void;\n}\n\n/**\n * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\n\nconst QueryEditor = forwardRef<PluginEditorRef, QueryEditorProps>((props, ref): ReactElement => {\n  const { value, onChange, queryTypes, ...others } = props;\n  const { refresh } = useTimeRange();\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.kind = next.selection.type;\n        draft.spec.plugin.kind = next.selection.kind;\n        draft.spec.plugin.spec = next.spec;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      <PluginEditor\n        postExecuteRunQuery={refresh}\n        ref={ref}\n        withRunQueryButton\n        pluginTypes={queryTypes}\n        pluginKindLabel=\"Query Type\"\n        value={{\n          selection: {\n            kind: value.spec.plugin.kind,\n            type: value.kind,\n          },\n          spec: value.spec.plugin.spec,\n        }}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n});\n\nQueryEditor.displayName = 'QueryEditor';\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","forwardRef","PluginEditor","useTimeRange","QueryEditorContainer","props","ref","queryTypes","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","displayName","others","refresh","handlePluginChange","draft","kind","selection","type","spec","plugin","postExecuteRunQuery","withRunQueryButton","pluginTypes","pluginKindLabel"],"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,OAAO,QAAQ,QAAQ;AAEhC,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AACxD,SAASC,UAAU,QAAsB,QAAQ;AACjD,SAASC,YAAY,QAA4C,kBAAkB;AACnF,SAASC,YAAY,QAAQ,gBAAgB;AAe7C;;;;;;;;;;;CAWC,GAED,OAAO,MAAMC,qCAAuBH,WAClC,CAACI,OAAOC;IACN,MAAM,EAAEC,UAAU,EAAEC,KAAK,EAAEC,KAAK,EAAEC,WAAW,EAAEC,QAAQ,EAAEC,QAAQ,EAAEC,gBAAgB,EAAE,GAAGR;IACxF,qBACE,MAACX;QAAkBoB,SAAS;;0BAC1B,MAACpB;gBAAMqB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAAC1B;wBAAW2B,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACV,kCAAkB,KAACD;;kCAErC,MAACH;wBAAW4B,SAAQ;wBAAWC,WAAU;;4BAAK;4BACpCjB,QAAQ;;;kCAElB,KAACb;wBACC2B,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,GAAGjB,WAAW,YAAY,UAAU;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACV;;;;YAGJ,CAACY,6BACA,KAACmB;gBAAYvB,KAAKA;gBAAKC,YAAYA;gBAAYuB,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAlBzFvB;AAsBhB,GACA;AAEFJ,qBAAqB4B,WAAW,GAAG;AAWnC;;;;;;CAMC,GAED,MAAMH,4BAAc5B,WAA8C,CAACI,OAAOC;IACxE,MAAM,EAAEwB,KAAK,EAAElB,QAAQ,EAAEL,UAAU,EAAE,GAAG0B,QAAQ,GAAG5B;IACnD,MAAM,EAAE6B,OAAO,EAAE,GAAG/B;IACpB,MAAMgC,qBAAoD,CAACJ;QACzDnB,SACEnB,QAAQqC,OAAO,CAACM;YACdA,MAAMC,IAAI,GAAGN,KAAKO,SAAS,CAACC,IAAI;YAChCH,MAAMI,IAAI,CAACC,MAAM,CAACJ,IAAI,GAAGN,KAAKO,SAAS,CAACD,IAAI;YAC5CD,MAAMI,IAAI,CAACC,MAAM,CAACD,IAAI,GAAGT,KAAKS,IAAI;QACpC;IAEJ;IAEA,qBACE,KAAC3C;QAAK,GAAGoC,MAAM;kBACb,cAAA,KAAC/B;YACCwC,qBAAqBR;YACrB5B,KAAKA;YACLqC,kBAAkB;YAClBC,aAAarC;YACbsC,iBAAgB;YAChBf,OAAO;gBACLQ,WAAW;oBACTD,MAAMP,MAAMU,IAAI,CAACC,MAAM,CAACJ,IAAI;oBAC5BE,MAAMT,MAAMO,IAAI;gBAClB;gBACAG,MAAMV,MAAMU,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;YACA5B,UAAUuB;;;AAIlB;AAEAN,YAAYG,WAAW,GAAG"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.d.ts

@@ -1,6 +1,7 @@
+/// <reference types="react" />
 import { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';
 import { Control } from 'react-hook-form';
-import { ReactElement } from 'react';
+import { PluginEditorRef } from '../PluginEditor';
 export interface PanelSpecEditorProps {
     control: Control<PanelEditorValues>;
     panelDefinition: PanelDefinition;
@@ -8,5 +9,5 @@ export interface PanelSpecEditorProps {
     onPluginSpecChange: (spec: UnknownSpec) => void;
     onJSONChange: (panelDefinitionStr: string) => void;
 }
-export declare function PanelSpecEditor(props: PanelSpecEditorProps): ReactElement | null;
+export declare const PanelSpecEditor: import("react").ForwardRefExoticComponent<PanelSpecEditorProps & import("react").RefAttributes<PluginEditorRef>>;
 //# sourceMappingURL=PanelSpecEditor.d.ts.map

package/dist/components/PanelSpecEditor/PanelSpecEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAE,OAAO,EAAc,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAMrC,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,GAAG,IAAI,CAgGhF"}
+{"version":3,"file":"PanelSpecEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpG,OAAO,EAAE,OAAO,EAAc,MAAM,iBAAiB,CAAC;AAMtD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,oBAAoB;IACnC,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAED,eAAO,MAAM,eAAe,kHAgG1B,CAAC"}