@perses-dev/plugin-system 0.52.0-rc.1 → 0.53.0-beta.0

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -10,8 +10,8 @@
 // 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 { useMemo } from 'react';
@@ -22,12 +22,6 @@ const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, confi
         ...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,
@@ -48,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,
@@ -75,7 +62,6 @@ 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 legendValuesConfig = useMemo(()=>{
@@ -137,65 +123,79 @@ export function LegendOptionsEditor({ value, onChange, showValuesEditor = true,
                     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,
-                    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 || 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: valueOptions,
-                    onChange: handleLegendValueChange,
-                    disabled: !value || 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, 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 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 | 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 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 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      <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}\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 || 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={valueOptions}\n              onChange={handleLegendValueChange}\n              disabled={!value || 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","useMemo","LEGEND_MODE_CONFIG","LEGEND_POSITIONS_CONFIG","validateLegendSpec","LEGEND_VALUE_CONFIG","LEGEND_SIZE_CONFIG","comparisonLegends","POSITION_OPTIONS","Object","entries","map","id","config","MODE_OPTIONS","SIZE_OPTIONS","LegendOptionsEditor","value","onChange","showValuesEditor","calculation","handleLegendShowChange","_","checked","legendValue","position","undefined","handleLegendPositionChange","newValue","handleLegendModeChange","currentPosition","mode","handleLegendSizeChange","size","handleLegendValueChange","values","isValidLegend","legendPositionConfig","currentMode","legendModeConfig","currentSize","legendSizeConfig","legendValuesConfig","currentValues","length","reduce","result","item","push","label","description","valueOptions","title","error","name","message","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/PluginEditor/PluginEditor.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAmB,MAAM,qBAAqB,CAAC;AAE1F;;;;;;;GAOG;AAEH,eAAO,MAAM,YAAY,4HAqFvB,CAAC"}
+{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":";AAoBA,OAAO,EAAE,iBAAiB,EAAE,eAAe,EAAmB,MAAM,qBAAqB,CAAC;AAE1F;;;;;;;GAOG;AAEH,eAAO,MAAM,YAAY,4HAwFvB,CAAC"}

package/dist/components/PluginEditor/PluginEditor.js

@@ -72,13 +72,16 @@ import { usePluginEditor } from './plugin-editor-api';
             /*#__PURE__*/ _jsxs(Box, {
                 sx: {
                     display: 'flex',
-                    flexDirection: 'row'
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    justifyContent: 'space-between',
+                    gap: 1,
+                    mb: 1
                 },
                 children: [
                     /*#__PURE__*/ _jsx(PluginKindSelect, {
                         fullWidth: false,
                         sx: {
-                            mb: 2,
                             minWidth: 120
                         },
                         margin: "dense",
@@ -86,8 +89,10 @@ import { usePluginEditor } from './plugin-editor-api';
                         pluginTypes: pluginTypes,
                         disabled: isLoading,
                         value: pendingSelection ? pendingSelection : value.selection,
-                        InputProps: {
-                            readOnly: isReadonly
+                        slotProps: {
+                            input: {
+                                readOnly: isReadonly
+                            }
                         },
                         error: !!error,
                         helperText: error?.message,
@@ -96,12 +101,6 @@ import { usePluginEditor } from './plugin-editor-api';
                     withRunQueryButton && !isLoading && /*#__PURE__*/ _jsx(Button, {
                         "data-testid": "run_query_button",
                         variant: "contained",
-                        sx: {
-                            marginTop: 1.5,
-                            marginBottom: 1.5,
-                            paddingTop: 0.5,
-                            marginLeft: 'auto'
-                        },
                         startIcon: /*#__PURE__*/ _jsx(Reload, {}),
                         onClick: runQueryHandler,
                         children: "Run Query"

package/dist/components/PluginEditor/PluginEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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 { Box, Button } from '@mui/material';\nimport Reload from 'mdi-material-ui/Reload';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { forwardRef, ReactElement, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, PluginEditorRef, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\n\nexport const PluginEditor = forwardRef<PluginEditorRef, PluginEditorProps>((props, ref): ReactElement => {\n  const {\n    value,\n    withRunQueryButton = true,\n    pluginTypes,\n    pluginKindLabel,\n    onChange: _,\n    isReadonly,\n    postExecuteRunQuery: refresh,\n    ...others\n  } = props;\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n\n  /* \n     We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,\n     because at the end of the day, they are all specs.\n     However, let's have them separated to keep the code simple and readable.\n     Reason: Only Query string field is common between all of them. Other specs may be different\n     Example: Legend, and MinSteps\n    */\n  const [watchedQuery, setWatchQuery] = useState<string>(value.spec['query'] as string);\n  const [watchedOtherSpecs, setWatchOtherSpecs] = useState<UnknownSpec>(value.spec);\n\n  const runQueryHandler = useCallback((): void => {\n    onSpecChange({ ...value.spec, ...watchedOtherSpecs, query: watchedQuery });\n    refresh?.();\n  }, [value.spec, onSpecChange, watchedQuery, watchedOtherSpecs, refresh]);\n\n  const queryHandlerSettings = useMemo(() => {\n    return withRunQueryButton\n      ? {\n          runWithOnBlur: false,\n          watchQueryChanges: (query: string): void => {\n            setWatchQuery(query);\n          },\n          setWatchOtherSpecs: (otherSpecs: UnknownSpec): void => {\n            setWatchOtherSpecs(otherSpecs);\n          },\n        }\n      : undefined;\n  }, [withRunQueryButton]);\n\n  useImperativeHandle(ref, () => ({ flushChanges: runQueryHandler }));\n\n  return (\n    <Box {...others}>\n      <Box sx={{ display: 'flex', flexDirection: 'row' }}>\n        <PluginKindSelect\n          fullWidth={false}\n          sx={{ mb: 2, minWidth: 120 }}\n          margin=\"dense\"\n          label={pluginKindLabel}\n          pluginTypes={pluginTypes}\n          disabled={isLoading}\n          value={pendingSelection ? pendingSelection : value.selection}\n          InputProps={{ readOnly: isReadonly }}\n          error={!!error}\n          helperText={error?.message}\n          onChange={onSelectionChange}\n        />\n\n        {withRunQueryButton && !isLoading && (\n          <Button\n            data-testid=\"run_query_button\"\n            variant=\"contained\"\n            sx={{ marginTop: 1.5, marginBottom: 1.5, paddingTop: 0.5, marginLeft: 'auto' }}\n            startIcon={<Reload />}\n            onClick={runQueryHandler}\n          >\n            Run Query\n          </Button>\n        )}\n      </Box>\n\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PluginSpecEditor\n          pluginSelection={value.selection}\n          value={value.spec}\n          onChange={onSpecChange}\n          isReadonly={isReadonly}\n          queryHandlerSettings={queryHandlerSettings}\n        />\n      </ErrorBoundary>\n    </Box>\n  );\n});\n\nPluginEditor.displayName = 'PluginEditor';\n"],"names":["Box","Button","Reload","ErrorAlert","ErrorBoundary","forwardRef","useCallback","useImperativeHandle","useMemo","useState","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","ref","value","withRunQueryButton","pluginTypes","pluginKindLabel","onChange","_","isReadonly","postExecuteRunQuery","refresh","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","watchedQuery","setWatchQuery","spec","watchedOtherSpecs","setWatchOtherSpecs","runQueryHandler","query","queryHandlerSettings","runWithOnBlur","watchQueryChanges","otherSpecs","undefined","flushChanges","sx","display","flexDirection","fullWidth","mb","minWidth","margin","label","disabled","selection","InputProps","readOnly","helperText","message","data-testid","variant","marginTop","marginBottom","paddingTop","marginLeft","startIcon","onClick","FallbackComponent","pluginSelection","displayName"],"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,GAAG,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,yBAAyB;AAC5C,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAASC,UAAU,EAAgBC,WAAW,EAAEC,mBAAmB,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAEtG,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA6CC,eAAe,QAAQ,sBAAsB;AAE1F;;;;;;;CAOC,GAED,OAAO,MAAMC,6BAAeR,WAA+C,CAACS,OAAOC;IACjF,MAAM,EACJC,KAAK,EACLC,qBAAqB,IAAI,EACzBC,WAAW,EACXC,eAAe,EACfC,UAAUC,CAAC,EACXC,UAAU,EACVC,qBAAqBC,OAAO,EAC5B,GAAGC,QACJ,GAAGX;IACJ,MAAM,EAAEY,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGlB,gBAAgBE;IAEhG;;;;;;IAME,GACF,MAAM,CAACiB,cAAcC,cAAc,GAAGvB,SAAiBO,MAAMiB,IAAI,CAAC,QAAQ;IAC1E,MAAM,CAACC,mBAAmBC,mBAAmB,GAAG1B,SAAsBO,MAAMiB,IAAI;IAEhF,MAAMG,kBAAkB9B,YAAY;QAClCwB,aAAa;YAAE,GAAGd,MAAMiB,IAAI;YAAE,GAAGC,iBAAiB;YAAEG,OAAON;QAAa;QACxEP;IACF,GAAG;QAACR,MAAMiB,IAAI;QAAEH;QAAcC;QAAcG;QAAmBV;KAAQ;IAEvE,MAAMc,uBAAuB9B,QAAQ;QACnC,OAAOS,qBACH;YACEsB,eAAe;YACfC,mBAAmB,CAACH;gBAClBL,cAAcK;YAChB;YACAF,oBAAoB,CAACM;gBACnBN,mBAAmBM;YACrB;QACF,IACAC;IACN,GAAG;QAACzB;KAAmB;IAEvBV,oBAAoBQ,KAAK,IAAO,CAAA;YAAE4B,cAAcP;QAAgB,CAAA;IAEhE,qBACE,MAACpC;QAAK,GAAGyB,MAAM;;0BACb,MAACzB;gBAAI4C,IAAI;oBAAEC,SAAS;oBAAQC,eAAe;gBAAM;;kCAC/C,KAACpC;wBACCqC,WAAW;wBACXH,IAAI;4BAAEI,IAAI;4BAAGC,UAAU;wBAAI;wBAC3BC,QAAO;wBACPC,OAAOhC;wBACPD,aAAaA;wBACbkC,UAAUzB;wBACVX,OAAOU,mBAAmBA,mBAAmBV,MAAMqC,SAAS;wBAC5DC,YAAY;4BAAEC,UAAUjC;wBAAW;wBACnCM,OAAO,CAAC,CAACA;wBACT4B,YAAY5B,OAAO6B;wBACnBrC,UAAUS;;oBAGXZ,sBAAsB,CAACU,2BACtB,KAAC1B;wBACCyD,eAAY;wBACZC,SAAQ;wBACRf,IAAI;4BAAEgB,WAAW;4BAAKC,cAAc;4BAAKC,YAAY;4BAAKC,YAAY;wBAAO;wBAC7EC,yBAAW,KAAC9D;wBACZ+D,SAAS7B;kCACV;;;;0BAML,KAAChC;gBAAc8D,mBAAmB/D;0BAChC,cAAA,KAACQ;oBACCwD,iBAAiBnD,MAAMqC,SAAS;oBAChCrC,OAAOA,MAAMiB,IAAI;oBACjBb,UAAUU;oBACVR,YAAYA;oBACZgB,sBAAsBA;;;;;AAKhC,GAAG;AAEHzB,aAAauD,WAAW,GAAG"}
+{"version":3,"sources":["../../../src/components/PluginEditor/PluginEditor.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 { Box, Button } from '@mui/material';\nimport Reload from 'mdi-material-ui/Reload';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { forwardRef, ReactElement, useCallback, useImperativeHandle, useMemo, useState } from 'react';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, PluginEditorRef, usePluginEditor } from './plugin-editor-api';\n\n/**\n * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property\n * that's common in our JSON specs where a user selects a plugin `kind` and then edits the `spec` via that plugin's\n * editor component. It takes care of transitioning from one plugin kind to another \"all at once\" so that when the\n * plugin's kind changes, the spec is also changed at the same time so those options editor components don't see a\n * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the\n * `usePluginEditor` hook that powers this component.\n */\n\nexport const PluginEditor = forwardRef<PluginEditorRef, PluginEditorProps>((props, ref): ReactElement => {\n  const {\n    value,\n    withRunQueryButton = true,\n    pluginTypes,\n    pluginKindLabel,\n    onChange: _,\n    isReadonly,\n    postExecuteRunQuery: refresh,\n    ...others\n  } = props;\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n\n  /* \n     We could technically merge the watchedQuery, watchedOtherSpecs into a single watched-object,\n     because at the end of the day, they are all specs.\n     However, let's have them separated to keep the code simple and readable.\n     Reason: Only Query string field is common between all of them. Other specs may be different\n     Example: Legend, and MinSteps\n    */\n  const [watchedQuery, setWatchQuery] = useState<string>(value.spec['query'] as string);\n  const [watchedOtherSpecs, setWatchOtherSpecs] = useState<UnknownSpec>(value.spec);\n\n  const runQueryHandler = useCallback((): void => {\n    onSpecChange({ ...value.spec, ...watchedOtherSpecs, query: watchedQuery });\n    refresh?.();\n  }, [value.spec, onSpecChange, watchedQuery, watchedOtherSpecs, refresh]);\n\n  const queryHandlerSettings = useMemo(() => {\n    return withRunQueryButton\n      ? {\n          runWithOnBlur: false,\n          watchQueryChanges: (query: string): void => {\n            setWatchQuery(query);\n          },\n          setWatchOtherSpecs: (otherSpecs: UnknownSpec): void => {\n            setWatchOtherSpecs(otherSpecs);\n          },\n        }\n      : undefined;\n  }, [withRunQueryButton]);\n\n  useImperativeHandle(ref, () => ({ flushChanges: runQueryHandler }));\n\n  return (\n    <Box {...others}>\n      <Box\n        sx={{\n          display: 'flex',\n          flexDirection: 'row',\n          alignItems: 'center',\n          justifyContent: 'space-between',\n          gap: 1,\n          mb: 1,\n        }}\n      >\n        <PluginKindSelect\n          fullWidth={false}\n          sx={{ minWidth: 120 }}\n          margin=\"dense\"\n          label={pluginKindLabel}\n          pluginTypes={pluginTypes}\n          disabled={isLoading}\n          value={pendingSelection ? pendingSelection : value.selection}\n          slotProps={{ input: { readOnly: isReadonly } }}\n          error={!!error}\n          helperText={error?.message}\n          onChange={onSelectionChange}\n        />\n\n        {withRunQueryButton && !isLoading && (\n          <Button data-testid=\"run_query_button\" variant=\"contained\" startIcon={<Reload />} onClick={runQueryHandler}>\n            Run Query\n          </Button>\n        )}\n      </Box>\n\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PluginSpecEditor\n          pluginSelection={value.selection}\n          value={value.spec}\n          onChange={onSpecChange}\n          isReadonly={isReadonly}\n          queryHandlerSettings={queryHandlerSettings}\n        />\n      </ErrorBoundary>\n    </Box>\n  );\n});\n\nPluginEditor.displayName = 'PluginEditor';\n"],"names":["Box","Button","Reload","ErrorAlert","ErrorBoundary","forwardRef","useCallback","useImperativeHandle","useMemo","useState","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","ref","value","withRunQueryButton","pluginTypes","pluginKindLabel","onChange","_","isReadonly","postExecuteRunQuery","refresh","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","watchedQuery","setWatchQuery","spec","watchedOtherSpecs","setWatchOtherSpecs","runQueryHandler","query","queryHandlerSettings","runWithOnBlur","watchQueryChanges","otherSpecs","undefined","flushChanges","sx","display","flexDirection","alignItems","justifyContent","gap","mb","fullWidth","minWidth","margin","label","disabled","selection","slotProps","input","readOnly","helperText","message","data-testid","variant","startIcon","onClick","FallbackComponent","pluginSelection","displayName"],"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,GAAG,EAAEC,MAAM,QAAQ,gBAAgB;AAC5C,OAAOC,YAAY,yBAAyB;AAC5C,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAASC,UAAU,EAAgBC,WAAW,EAAEC,mBAAmB,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAEtG,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA6CC,eAAe,QAAQ,sBAAsB;AAE1F;;;;;;;CAOC,GAED,OAAO,MAAMC,6BAAeR,WAA+C,CAACS,OAAOC;IACjF,MAAM,EACJC,KAAK,EACLC,qBAAqB,IAAI,EACzBC,WAAW,EACXC,eAAe,EACfC,UAAUC,CAAC,EACXC,UAAU,EACVC,qBAAqBC,OAAO,EAC5B,GAAGC,QACJ,GAAGX;IACJ,MAAM,EAAEY,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGlB,gBAAgBE;IAEhG;;;;;;IAME,GACF,MAAM,CAACiB,cAAcC,cAAc,GAAGvB,SAAiBO,MAAMiB,IAAI,CAAC,QAAQ;IAC1E,MAAM,CAACC,mBAAmBC,mBAAmB,GAAG1B,SAAsBO,MAAMiB,IAAI;IAEhF,MAAMG,kBAAkB9B,YAAY;QAClCwB,aAAa;YAAE,GAAGd,MAAMiB,IAAI;YAAE,GAAGC,iBAAiB;YAAEG,OAAON;QAAa;QACxEP;IACF,GAAG;QAACR,MAAMiB,IAAI;QAAEH;QAAcC;QAAcG;QAAmBV;KAAQ;IAEvE,MAAMc,uBAAuB9B,QAAQ;QACnC,OAAOS,qBACH;YACEsB,eAAe;YACfC,mBAAmB,CAACH;gBAClBL,cAAcK;YAChB;YACAF,oBAAoB,CAACM;gBACnBN,mBAAmBM;YACrB;QACF,IACAC;IACN,GAAG;QAACzB;KAAmB;IAEvBV,oBAAoBQ,KAAK,IAAO,CAAA;YAAE4B,cAAcP;QAAgB,CAAA;IAEhE,qBACE,MAACpC;QAAK,GAAGyB,MAAM;;0BACb,MAACzB;gBACC4C,IAAI;oBACFC,SAAS;oBACTC,eAAe;oBACfC,YAAY;oBACZC,gBAAgB;oBAChBC,KAAK;oBACLC,IAAI;gBACN;;kCAEA,KAACxC;wBACCyC,WAAW;wBACXP,IAAI;4BAAEQ,UAAU;wBAAI;wBACpBC,QAAO;wBACPC,OAAOnC;wBACPD,aAAaA;wBACbqC,UAAU5B;wBACVX,OAAOU,mBAAmBA,mBAAmBV,MAAMwC,SAAS;wBAC5DC,WAAW;4BAAEC,OAAO;gCAAEC,UAAUrC;4BAAW;wBAAE;wBAC7CM,OAAO,CAAC,CAACA;wBACTgC,YAAYhC,OAAOiC;wBACnBzC,UAAUS;;oBAGXZ,sBAAsB,CAACU,2BACtB,KAAC1B;wBAAO6D,eAAY;wBAAmBC,SAAQ;wBAAYC,yBAAW,KAAC9D;wBAAW+D,SAAS7B;kCAAiB;;;;0BAMhH,KAAChC;gBAAc8D,mBAAmB/D;0BAChC,cAAA,KAACQ;oBACCwD,iBAAiBnD,MAAMwC,SAAS;oBAChCxC,OAAOA,MAAMiB,IAAI;oBACjBb,UAAUU;oBACVR,YAAYA;oBACZgB,sBAAsBA;;;;;AAKhC,GAAG;AAEHzB,aAAauD,WAAW,GAAG"}

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

@@ -1 +1 @@
-{"version":3,"file":"PluginKindSelect.d.ts","sourceRoot":"","sources":["../../../src/components/PluginKindSelect/PluginKindSelect.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuB,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACpG,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,wHA8C3B,CAAC"}
+{"version":3,"file":"PluginKindSelect.d.ts","sourceRoot":"","sources":["../../../src/components/PluginKindSelect/PluginKindSelect.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAuB,cAAc,EAAE,MAAM,eAAe,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,aAAa,CAAC;AAEzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,iBAAiB,CAAC;AAExD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,cAAc,EAAE,OAAO,GAAG,UAAU,GAAG,UAAU,CAAC;IACpG,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,KAAK,CAAC,EAAE,qBAAqB,CAAC;IAC9B,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;CAC/C;AAED;;;;;;GAMG;AACH,eAAO,MAAM,gBAAgB,wHAoD3B,CAAC"}

package/dist/components/PluginKindSelect/PluginKindSelect.js

@@ -12,7 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { MenuItem, TextField } from '@mui/material';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef, useCallback, useMemo } from 'react';
 import { useListPluginMetadata } from '../../runtime';
 /**
  * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific
@@ -23,6 +23,9 @@ import { useListPluginMetadata } from '../../runtime';
  */ export const PluginKindSelect = /*#__PURE__*/ forwardRef((props, ref)=>{
     const { pluginTypes, value: propValue, onChange, ...others } = props;
     const { data, isLoading } = useListPluginMetadata(pluginTypes);
+    const sortedData = useMemo(()=>data?.sort((a, b)=>a.spec.display.name.localeCompare(b.spec.display.name)), [
+        data
+    ]);
     // Pass an empty value while options are still loading so MUI doesn't complain about us using an "out of range" value
     const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);
     const handleChange = (event)=>{
@@ -33,9 +36,9 @@ import { useListPluginMetadata } from '../../runtime';
             return '';
         }
         const selectedValue = optionValueToSelection(selected);
-        return data?.find((v)=>v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;
+        return sortedData?.find((v)=>v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;
     }, [
-        data
+        sortedData
     ]);
     // TODO: Does this need a loading indicator of some kind?
     return /*#__PURE__*/ _jsxs(TextField, {
@@ -54,7 +57,7 @@ import { useListPluginMetadata } from '../../runtime';
                 value: "",
                 children: "Loading..."
             }),
-            data?.map((metadata)=>/*#__PURE__*/ _jsx(MenuItem, {
+            sortedData?.map((metadata)=>/*#__PURE__*/ _jsx(MenuItem, {
                     "data-testid": "option",
                     value: selectionToOptionValue({
                         type: metadata.kind,

package/dist/components/PluginKindSelect/PluginKindSelect.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginKindSelect/PluginKindSelect.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 { MenuItem, TextField, TextFieldProps } from '@mui/material';\nimport { forwardRef, ReactElement, useCallback } from 'react';\nimport { PluginType } from '../../model';\nimport { useListPluginMetadata } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'children'> {\n  pluginTypes: PluginType[];\n  value?: PluginEditorSelection;\n  onChange?: (s: PluginEditorSelection) => void;\n}\n\n/**\n * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific\n * plugin types. (e.g. \"Show a list of all the Panel plugins\", or \"Show a list of all the Variable plugins\", or \"Show\n * a list of all the TimeSeriesQuery, TraceQuery, ProfileQuery, and LogQuery plugins\").\n * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know\n * when the user changes the plugin type (it fires at start for the default value.)\n */\nexport const PluginKindSelect = forwardRef((props: PluginKindSelectProps, ref): ReactElement => {\n  const { pluginTypes, value: propValue, onChange, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata(pluginTypes);\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);\n\n  const handleChange = (event: { target: { value: string } }): void => {\n    onChange?.(optionValueToSelection(event.target.value));\n  };\n\n  const renderValue = useCallback(\n    (selected: unknown) => {\n      if (selected === '') {\n        return '';\n      }\n      const selectedValue = optionValueToSelection(selected as string);\n      return data?.find((v) => v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;\n    },\n    [data]\n  );\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <TextField\n      select\n      inputRef={ref}\n      {...others}\n      value={value}\n      aria-label={value}\n      onChange={handleChange}\n      SelectProps={{ renderValue }}\n      data-testid=\"plugin-kind-select\"\n    >\n      {isLoading && <MenuItem value=\"\">Loading...</MenuItem>}\n      {data?.map((metadata) => (\n        <MenuItem\n          data-testid=\"option\"\n          key={metadata.kind + metadata.spec.name}\n          value={selectionToOptionValue({ type: metadata.kind, kind: metadata.spec.name })}\n        >\n          {metadata.spec.display.name}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n});\nPluginKindSelect.displayName = 'PluginKindSelect';\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a PluginEditorSelection,\n * returns a string value like `{type}_____{kind}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectionToOptionValue(selector: PluginEditorSelection): string {\n  return [selector.type, selector.kind].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{type}_____{kind}`,\n * returns a PluginEditorSelection to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelection(optionValue: string): PluginEditorSelection {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const type = words[0] as PluginType | undefined;\n  const kind = words[1];\n  if (type === undefined || kind === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    type,\n    kind,\n  };\n}\n"],"names":["MenuItem","TextField","forwardRef","useCallback","useListPluginMetadata","PluginKindSelect","props","ref","pluginTypes","value","propValue","onChange","others","data","isLoading","selectionToOptionValue","handleChange","event","optionValueToSelection","target","renderValue","selected","selectedValue","find","v","kind","type","spec","name","display","select","inputRef","aria-label","SelectProps","data-testid","map","metadata","displayName","OPTION_VALUE_DELIMITER","selector","join","optionValue","words","split","undefined","Error"],"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,QAAQ,EAAEC,SAAS,QAAwB,gBAAgB;AACpE,SAASC,UAAU,EAAgBC,WAAW,QAAQ,QAAQ;AAE9D,SAASC,qBAAqB,QAAQ,gBAAgB;AAStD;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAmBH,WAAW,CAACI,OAA8BC;IACxE,MAAM,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,QAAQ,GAAGN;IAC/D,MAAM,EAAEO,IAAI,EAAEC,SAAS,EAAE,GAAGV,sBAAsBI;IAElD,qHAAqH;IACrH,MAAMC,QAAQ,CAACC,aAAaI,YAAY,KAAKC,uBAAuBL;IAEpE,MAAMM,eAAe,CAACC;QACpBN,WAAWO,uBAAuBD,MAAME,MAAM,CAACV,KAAK;IACtD;IAEA,MAAMW,cAAcjB,YAClB,CAACkB;QACC,IAAIA,aAAa,IAAI;YACnB,OAAO;QACT;QACA,MAAMC,gBAAgBJ,uBAAuBG;QAC7C,OAAOR,MAAMU,KAAK,CAACC,IAAMA,EAAEC,IAAI,KAAKH,cAAcI,IAAI,IAAIF,EAAEG,IAAI,CAACC,IAAI,KAAKN,cAAcG,IAAI,GAAGE,KAAKE,QAAQD;IAC9G,GACA;QAACf;KAAK;IAGR,yDAAyD;IACzD,qBACE,MAACZ;QACC6B,MAAM;QACNC,UAAUxB;QACT,GAAGK,MAAM;QACVH,OAAOA;QACPuB,cAAYvB;QACZE,UAAUK;QACViB,aAAa;YAAEb;QAAY;QAC3Bc,eAAY;;YAEXpB,2BAAa,KAACd;gBAASS,OAAM;0BAAG;;YAChCI,MAAMsB,IAAI,CAACC,yBACV,KAACpC;oBACCkC,eAAY;oBAEZzB,OAAOM,uBAAuB;wBAAEW,MAAMU,SAASX,IAAI;wBAAEA,MAAMW,SAAST,IAAI,CAACC,IAAI;oBAAC;8BAE7EQ,SAAST,IAAI,CAACE,OAAO,CAACD,IAAI;mBAHtBQ,SAASX,IAAI,GAAGW,SAAST,IAAI,CAACC,IAAI;;;AAQjD,GAAG;AACHvB,iBAAiBgC,WAAW,GAAG;AAE/B,kDAAkD;AAClD,MAAMC,yBAAyB;AAE/B;;;;CAIC,GACD,SAASvB,uBAAuBwB,QAA+B;IAC7D,OAAO;QAACA,SAASb,IAAI;QAAEa,SAASd,IAAI;KAAC,CAACe,IAAI,CAACF;AAC7C;AAEA;;;;CAIC,GACD,SAASpB,uBAAuBuB,WAAmB;IACjD,MAAMC,QAAQD,YAAYE,KAAK,CAACL;IAChC,MAAMZ,OAAOgB,KAAK,CAAC,EAAE;IACrB,MAAMjB,OAAOiB,KAAK,CAAC,EAAE;IACrB,IAAIhB,SAASkB,aAAanB,SAASmB,WAAW;QAC5C,MAAM,IAAIC,MAAM;IAClB;IACA,OAAO;QACLnB;QACAD;IACF;AACF"}
+{"version":3,"sources":["../../../src/components/PluginKindSelect/PluginKindSelect.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 { MenuItem, TextField, TextFieldProps } from '@mui/material';\nimport { forwardRef, ReactElement, useCallback, useMemo } from 'react';\nimport { PluginType } from '../../model';\nimport { useListPluginMetadata } from '../../runtime';\nimport { PluginEditorSelection } from '../PluginEditor';\n\nexport interface PluginKindSelectProps extends Omit<TextFieldProps, 'value' | 'onChange' | 'children'> {\n  pluginTypes: PluginType[];\n  value?: PluginEditorSelection;\n  onChange?: (s: PluginEditorSelection) => void;\n}\n\n/**\n * Displays a MUI Select input for selecting a plugin's kind from a list of all the available plugins of some specific\n * plugin types. (e.g. \"Show a list of all the Panel plugins\", or \"Show a list of all the Variable plugins\", or \"Show\n * a list of all the TimeSeriesQuery, TraceQuery, ProfileQuery, and LogQuery plugins\").\n * The value of the select is the kind of the plugin, but you can also listen to the `onPluginTypeChange` event to know\n * when the user changes the plugin type (it fires at start for the default value.)\n */\nexport const PluginKindSelect = forwardRef((props: PluginKindSelectProps, ref): ReactElement => {\n  const { pluginTypes, value: propValue, onChange, ...others } = props;\n  const { data, isLoading } = useListPluginMetadata(pluginTypes);\n\n  const sortedData = useMemo(\n    () => data?.sort((a, b) => a.spec.display.name.localeCompare(b.spec.display.name)),\n    [data]\n  );\n\n  // Pass an empty value while options are still loading so MUI doesn't complain about us using an \"out of range\" value\n  const value = !propValue || isLoading ? '' : selectionToOptionValue(propValue);\n\n  const handleChange = (event: { target: { value: string } }): void => {\n    onChange?.(optionValueToSelection(event.target.value));\n  };\n\n  const renderValue = useCallback(\n    (selected: unknown) => {\n      if (selected === '') {\n        return '';\n      }\n      const selectedValue = optionValueToSelection(selected as string);\n      return sortedData?.find((v) => v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display\n        .name;\n    },\n    [sortedData]\n  );\n\n  // TODO: Does this need a loading indicator of some kind?\n  return (\n    <TextField\n      select\n      inputRef={ref}\n      {...others}\n      value={value}\n      aria-label={value}\n      onChange={handleChange}\n      SelectProps={{ renderValue }}\n      data-testid=\"plugin-kind-select\"\n    >\n      {isLoading && <MenuItem value=\"\">Loading...</MenuItem>}\n      {sortedData?.map((metadata) => (\n        <MenuItem\n          data-testid=\"option\"\n          key={metadata.kind + metadata.spec.name}\n          value={selectionToOptionValue({ type: metadata.kind, kind: metadata.spec.name })}\n        >\n          {metadata.spec.display.name}\n        </MenuItem>\n      ))}\n    </TextField>\n  );\n});\nPluginKindSelect.displayName = 'PluginKindSelect';\n\n// Delimiter used to stringify/parse option values\nconst OPTION_VALUE_DELIMITER = '_____';\n\n/**\n * Given a PluginEditorSelection,\n * returns a string value like `{type}_____{kind}` that can be used as a Select input value.\n * @param selector\n */\nfunction selectionToOptionValue(selector: PluginEditorSelection): string {\n  return [selector.type, selector.kind].join(OPTION_VALUE_DELIMITER);\n}\n\n/**\n * Given an option value name like `{type}_____{kind}`,\n * returns a PluginEditorSelection to be used by the query data model.\n * @param optionValue\n */\nfunction optionValueToSelection(optionValue: string): PluginEditorSelection {\n  const words = optionValue.split(OPTION_VALUE_DELIMITER);\n  const type = words[0] as PluginType | undefined;\n  const kind = words[1];\n  if (type === undefined || kind === undefined) {\n    throw new Error('Invalid optionValue string');\n  }\n  return {\n    type,\n    kind,\n  };\n}\n"],"names":["MenuItem","TextField","forwardRef","useCallback","useMemo","useListPluginMetadata","PluginKindSelect","props","ref","pluginTypes","value","propValue","onChange","others","data","isLoading","sortedData","sort","a","b","spec","display","name","localeCompare","selectionToOptionValue","handleChange","event","optionValueToSelection","target","renderValue","selected","selectedValue","find","v","kind","type","select","inputRef","aria-label","SelectProps","data-testid","map","metadata","displayName","OPTION_VALUE_DELIMITER","selector","join","optionValue","words","split","undefined","Error"],"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,QAAQ,EAAEC,SAAS,QAAwB,gBAAgB;AACpE,SAASC,UAAU,EAAgBC,WAAW,EAAEC,OAAO,QAAQ,QAAQ;AAEvE,SAASC,qBAAqB,QAAQ,gBAAgB;AAStD;;;;;;CAMC,GACD,OAAO,MAAMC,iCAAmBJ,WAAW,CAACK,OAA8BC;IACxE,MAAM,EAAEC,WAAW,EAAEC,OAAOC,SAAS,EAAEC,QAAQ,EAAE,GAAGC,QAAQ,GAAGN;IAC/D,MAAM,EAAEO,IAAI,EAAEC,SAAS,EAAE,GAAGV,sBAAsBI;IAElD,MAAMO,aAAaZ,QACjB,IAAMU,MAAMG,KAAK,CAACC,GAAGC,IAAMD,EAAEE,IAAI,CAACC,OAAO,CAACC,IAAI,CAACC,aAAa,CAACJ,EAAEC,IAAI,CAACC,OAAO,CAACC,IAAI,IAChF;QAACR;KAAK;IAGR,qHAAqH;IACrH,MAAMJ,QAAQ,CAACC,aAAaI,YAAY,KAAKS,uBAAuBb;IAEpE,MAAMc,eAAe,CAACC;QACpBd,WAAWe,uBAAuBD,MAAME,MAAM,CAAClB,KAAK;IACtD;IAEA,MAAMmB,cAAc1B,YAClB,CAAC2B;QACC,IAAIA,aAAa,IAAI;YACnB,OAAO;QACT;QACA,MAAMC,gBAAgBJ,uBAAuBG;QAC7C,OAAOd,YAAYgB,KAAK,CAACC,IAAMA,EAAEC,IAAI,KAAKH,cAAcI,IAAI,IAAIF,EAAEb,IAAI,CAACE,IAAI,KAAKS,cAAcG,IAAI,GAAGd,KAAKC,QACvGC;IACL,GACA;QAACN;KAAW;IAGd,yDAAyD;IACzD,qBACE,MAACf;QACCmC,MAAM;QACNC,UAAU7B;QACT,GAAGK,MAAM;QACVH,OAAOA;QACP4B,cAAY5B;QACZE,UAAUa;QACVc,aAAa;YAAEV;QAAY;QAC3BW,eAAY;;YAEXzB,2BAAa,KAACf;gBAASU,OAAM;0BAAG;;YAChCM,YAAYyB,IAAI,CAACC,yBAChB,KAAC1C;oBACCwC,eAAY;oBAEZ9B,OAAOc,uBAAuB;wBAAEW,MAAMO,SAASR,IAAI;wBAAEA,MAAMQ,SAAStB,IAAI,CAACE,IAAI;oBAAC;8BAE7EoB,SAAStB,IAAI,CAACC,OAAO,CAACC,IAAI;mBAHtBoB,SAASR,IAAI,GAAGQ,SAAStB,IAAI,CAACE,IAAI;;;AAQjD,GAAG;AACHhB,iBAAiBqC,WAAW,GAAG;AAE/B,kDAAkD;AAClD,MAAMC,yBAAyB;AAE/B;;;;CAIC,GACD,SAASpB,uBAAuBqB,QAA+B;IAC7D,OAAO;QAACA,SAASV,IAAI;QAAEU,SAASX,IAAI;KAAC,CAACY,IAAI,CAACF;AAC7C;AAEA;;;;CAIC,GACD,SAASjB,uBAAuBoB,WAAmB;IACjD,MAAMC,QAAQD,YAAYE,KAAK,CAACL;IAChC,MAAMT,OAAOa,KAAK,CAAC,EAAE;IACrB,MAAMd,OAAOc,KAAK,CAAC,EAAE;IACrB,IAAIb,SAASe,aAAahB,SAASgB,WAAW;QAC5C,MAAM,IAAIC,MAAM;IAClB;IACA,OAAO;QACLhB;QACAD;IACF;AACF"}

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAA0B,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAwTtF,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}
+{"version":3,"file":"VariableEditorForm.d.ts","sourceRoot":"","sources":["../../../../src/components/Variables/VariableEditorForm/VariableEditorForm.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,qBAAqB,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAEtE,OAAO,EAAE,kBAAkB,EAA0B,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAmUtF,UAAU,uBAAuB;IAC/B,yBAAyB,EAAE,kBAAkB,CAAC;IAC9C,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,OAAO,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IAC1C,MAAM,EAAE,CAAC,GAAG,EAAE,kBAAkB,KAAK,IAAI,CAAC;IAC1C,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,QAAQ,CAAC,EAAE,qBAAqB,CAAC;CAClC;AAED,wBAAgB,kBAAkB,CAAC,EACjC,yBAAyB,EACzB,MAAM,EACN,OAAO,EACP,UAAU,EACV,cAAc,EACd,MAAM,EACN,OAAO,EACP,QAAQ,GACT,EAAE,uBAAuB,GAAG,YAAY,CAoMxC"}

package/dist/components/Variables/VariableEditorForm/VariableEditorForm.js

@@ -22,6 +22,7 @@ import { useValidationSchemas } from '../../../context';
 import { VARIABLE_TYPES } from '../variable-model';
 import { useTimeRange } from '../../../runtime';
 import { VariableListPreview, VariablePreview } from './VariablePreview';
+import { SORT_METHODS } from './variable-editor-form-model';
 function FallbackPreview() {
     return /*#__PURE__*/ _jsx("div", {
         children: "Error previewing values"
@@ -107,6 +108,10 @@ function ListVariableEditorForm({ action, control }) {
         control: control,
         name: 'spec.allowAllValue'
     });
+    const sortMethod = useWatch({
+        control: control,
+        name: 'spec.sort'
+    });
     // When variable kind is selected we need to provide default values
     // TODO: check if react-hook-form has a better way to do this
     const values = form.getValues();
@@ -116,6 +121,15 @@ function ListVariableEditorForm({ action, control }) {
     if (values.spec.allowMultiple === undefined) {
         form.setValue('spec.allowMultiple', false);
     }
+    if (!values.spec.plugin) {
+        form.setValue('spec.plugin', {
+            kind: 'StaticListVariable',
+            spec: {}
+        });
+    }
+    if (!values.spec.sort) {
+        form.setValue('spec.sort', 'none');
+    }
     const { refresh } = useTimeRange();
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
@@ -128,18 +142,17 @@ function ListVariableEditorForm({ action, control }) {
                 spacing: 2,
                 mb: 2,
                 children: [
-                    kind ? /*#__PURE__*/ _jsx(Box, {
+                    /*#__PURE__*/ _jsx(Box, {
                         children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: FallbackPreview,
                             resetKeys: [
                                 previewSpec
                             ],
                             children: /*#__PURE__*/ _jsx(VariableListPreview, {
+                                sortMethod: sortMethod,
                                 definition: previewSpec
                             })
                         })
-                    }) : /*#__PURE__*/ _jsx(VariablePreview, {
-                        isLoading: true
                     }),
                     /*#__PURE__*/ _jsx(Stack, {
                         children: /*#__PURE__*/ _jsx(ErrorBoundary, {
@@ -205,7 +218,7 @@ function ListVariableEditorForm({ action, control }) {
                         children: /*#__PURE__*/ _jsx(Controller, {
                             control: control,
                             name: "spec.sort",
-                            render: ({ field, fieldState })=>/*#__PURE__*/ _jsxs(TextField, {
+                            render: ({ field, fieldState })=>/*#__PURE__*/ _jsx(TextField, {
                                     select: true,
                                     ...field,
                                     fullWidth: true,
@@ -222,36 +235,14 @@ function ListVariableEditorForm({ action, control }) {
                                     onChange: (event)=>{
                                         field.onChange(event);
                                     },
-                                    children: [
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "none",
-                                            children: "None"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "alphabetical-asc",
-                                            children: "Alphabetical, asc"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "alphabetical-desc",
-                                            children: "Alphabetical, desc"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "numerical-asc",
-                                            children: "Numerical, asc"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "numerical-desc",
-                                            children: "Numerical, desc"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "alphabetical-ci-asc",
-                                            children: "Alphabetical, case-insensitive, asc"
-                                        }),
-                                        /*#__PURE__*/ _jsx(MenuItem, {
-                                            value: "alphabetical-ci-desc",
-                                            children: "Alphabetical, case-insensitive, desc"
-                                        })
-                                    ]
+                                    children: Object.keys(SORT_METHODS).map((key)=>{
+                                        if (!SORT_METHODS[key]) return null;
+                                        const { label } = SORT_METHODS[key];
+                                        return /*#__PURE__*/ _jsx(MenuItem, {
+                                            value: key,
+                                            children: label
+                                        }, key);
+                                    })
                                 })
                         })
                     })