@perses-dev/plugin-system 0.50.1 → 0.51.0-beta.0

package/dist/components/HTTPSettingsEditor/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/HTTPSettingsEditor/index.ts"],"names":[],"mappings":"AAaA,cAAc,sBAAsB,CAAC"}

package/dist/components/HTTPSettingsEditor/index.js

@@ -0,0 +1,15 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// 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.
+export * from './HTTPSettingsEditor';
+
+//# sourceMappingURL=index.js.map

package/dist/components/HTTPSettingsEditor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/HTTPSettingsEditor/index.ts"],"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\nexport * from './HTTPSettingsEditor';\n"],"names":[],"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,cAAc,uBAAuB"}

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -77,13 +77,13 @@ export function LegendOptionsEditor({ value, onChange, showValuesEditor = true }
         });
     };
     const isValidLegend = validateLegendSpec(value);
-    const currentPosition = getLegendPosition(value === null || value === void 0 ? void 0 : value.position);
+    const currentPosition = getLegendPosition(value?.position);
     const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];
-    const currentMode = getLegendMode(value === null || value === void 0 ? void 0 : value.mode);
+    const currentMode = getLegendMode(value?.mode);
     const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];
-    const currentSize = getLegendSize(value === null || value === void 0 ? void 0 : value.size);
+    const currentSize = getLegendSize(value?.size);
     const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];
-    const currentValues = (value === null || value === void 0 ? void 0 : value.values) || [];
+    const currentValues = value?.values || [];
     const legendValuesConfig = currentValues.reduce((result, item)=>{
         const config = LEGEND_VALUE_CONFIG[item];
         if (config) {

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

package/dist/components/MetricLabelInput/MetricLabelInput.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/components/MetricLabelInput/MetricLabelInput.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MetricLabelInput/MetricLabelInput.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 { TextField } from '@mui/material';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport { FC } from 'react';\n\nexport interface MetricLabelInputProps {\n  value?: string;\n  onChange: (metricLabel?: string) => void;\n}\n\nexport const MetricLabelInput: FC<MetricLabelInputProps> = ({ value, onChange }) => {\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = event.target.value;\n    onChange(newValue || undefined);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Metric label\"\n      description=\"Specify label to display\"\n      control={<TextField fullWidth name=\"Metric label\" value={value || ''} onChange={handleChange} />}\n    />\n  );\n};\n"],"names":["TextField","OptionsEditorControl","MetricLabelInput","value","onChange","handleChange","event","newValue","target","undefined","label","description","control","fullWidth","name"],"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,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAQ9D,OAAO,MAAMC,mBAA8C,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE;IAC7E,MAAMC,eAAe,CAACC;QACpB,MAAMC,WAAWD,MAAME,MAAM,CAACL,KAAK;QACnCC,SAASG,YAAYE;IACvB;IAEA,qBACE,KAACR;QACCS,OAAM;QACNC,aAAY;QACZC,uBAAS,KAACZ;YAAUa,SAAS;YAACC,MAAK;YAAeX,OAAOA,SAAS;YAAIC,UAAUC;;;AAGtF,EAAE"}
+{"version":3,"sources":["../../../src/components/MetricLabelInput/MetricLabelInput.tsx"],"sourcesContent":["// Copyright 2025 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 { TextField } from '@mui/material';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport { FC } from 'react';\n\nexport interface MetricLabelInputProps {\n  value?: string;\n  onChange: (metricLabel?: string) => void;\n}\n\nexport const MetricLabelInput: FC<MetricLabelInputProps> = ({ value, onChange }) => {\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>): void => {\n    const newValue = event.target.value;\n    onChange(newValue || undefined);\n  };\n\n  return (\n    <OptionsEditorControl\n      label=\"Metric label\"\n      description=\"Specify label to display\"\n      control={<TextField fullWidth name=\"Metric label\" value={value || ''} onChange={handleChange} />}\n    />\n  );\n};\n"],"names":["TextField","OptionsEditorControl","MetricLabelInput","value","onChange","handleChange","event","newValue","target","undefined","label","description","control","fullWidth","name"],"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,SAAS,QAAQ,gBAAgB;AAC1C,SAASC,oBAAoB,QAAQ,yBAAyB;AAQ9D,OAAO,MAAMC,mBAA8C,CAAC,EAAEC,KAAK,EAAEC,QAAQ,EAAE;IAC7E,MAAMC,eAAe,CAACC;QACpB,MAAMC,WAAWD,MAAME,MAAM,CAACL,KAAK;QACnCC,SAASG,YAAYE;IACvB;IAEA,qBACE,KAACR;QACCS,OAAM;QACNC,aAAY;QACZC,uBAAS,KAACZ;YAAUa,SAAS;YAACC,MAAK;YAAeX,OAAOA,SAAS;YAAIC,UAAUC;;;AAGtF,EAAE"}

package/dist/components/MetricLabelInput/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2025 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at

package/dist/components/MetricLabelInput/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/MetricLabelInput/index.ts"],"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\nexport * from './MetricLabelInput';\n"],"names":[],"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,cAAc,qBAAqB"}
+{"version":3,"sources":["../../../src/components/MetricLabelInput/index.ts"],"sourcesContent":["// Copyright 2025 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\nexport * from './MetricLabelInput';\n"],"names":[],"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,cAAc,qBAAqB"}

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;AA6BD;;;;;;;GAOG;AACH,wBAAgB,gBAAgB,CAAC,EAAE,UAAU,EAAE,OAAY,EAAE,QAAQ,EAAE,EAAE,qBAAqB,GAAG,YAAY,CA8E5G"}
+{"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"}

package/dist/components/MultiQueryEditor/MultiQueryEditor.js

@@ -18,30 +18,31 @@ import AddIcon from 'mdi-material-ui/Plus';
 import { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';
 import { QueryEditorContainer } from './QueryEditorContainer';
 function useDefaultQueryDefinition(queryTypes) {
-    var _queryPlugins_;
     // Build the default query plugin
     // This will be used only if the queries are empty, to open a starting query
     // Firs the default query type
     const defaultQueryType = queryTypes[0];
     // Then the default plugin kind
     // Use as default the plugin kind explicitly set as default or the first in the list
-    const { data: queryPlugins } = useListPluginMetadata(queryTypes);
+    const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);
     const { defaultPluginKinds } = usePluginRegistry();
-    var _defaultPluginKinds_defaultQueryType, _ref;
-    const defaultQueryKind = (_ref = (_defaultPluginKinds_defaultQueryType = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[defaultQueryType]) !== null && _defaultPluginKinds_defaultQueryType !== void 0 ? _defaultPluginKinds_defaultQueryType : queryPlugins === null || queryPlugins === void 0 ? void 0 : (_queryPlugins_ = queryPlugins[0]) === null || _queryPlugins_ === void 0 ? void 0 : _queryPlugins_.kind) !== null && _ref !== void 0 ? _ref : '';
+    const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
     const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {
-        useErrorBoundary: true,
+        throwOnError: true,
         enabled: true
     });
     // This default query definition is used if no query is provided initially or when we add a new query
     return {
-        kind: defaultQueryType,
-        spec: {
-            plugin: {
-                kind: defaultQueryKind,
-                spec: (defaultQueryPlugin === null || defaultQueryPlugin === void 0 ? void 0 : defaultQueryPlugin.createInitialOptions()) || {}
+        defaultInitialQueryDefinition: {
+            kind: defaultQueryType,
+            spec: {
+                plugin: {
+                    kind: defaultQueryKind,
+                    spec: defaultQueryPlugin?.createInitialOptions() || {}
+                }
             }
-        }
+        },
+        isLoading
     };
 }
 /**
@@ -52,7 +53,7 @@ function useDefaultQueryDefinition(queryTypes) {
  * @param onChange The callback to call when the queries are modified
  * @constructor
  */ export function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
-    const defaultInitialQueryDefinition = useDefaultQueryDefinition(queryTypes);
+    const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
     // State for which queries are collapsed
     const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
     // Query handlers
@@ -105,9 +106,9 @@ function useDefaultQueryDefinition(queryTypes) {
         });
     };
     // show one query input if queries is empty
-    const queryDefinitions = queries.length ? queries : [
+    const queryDefinitions = queries.length ? queries : !isLoading ? [
         defaultInitialQueryDefinition
-    ];
+    ] : [];
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(Stack, {

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[]): QueryDefinition {\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 } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.kind ?? '';\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    kind: defaultQueryType,\n    spec: {\n      plugin: { kind: defaultQueryKind, spec: defaultQueryPlugin?.createInitialOptions() || {} },\n    },\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 = 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 ? queries : [defaultInitialQueryDefinition];\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","queryPlugins","defaultQueryType","data","defaultPluginKinds","defaultQueryKind","kind","defaultQueryPlugin","useErrorBoundary","enabled","spec","plugin","createInitialOptions","MultiQueryEditor","queries","onChange","defaultInitialQueryDefinition","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 { 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    throwOnError: 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","throwOnError","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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"}

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -19,14 +19,14 @@ import { MultiQueryEditor } from '../MultiQueryEditor';
 export function PanelSpecEditor(props) {
     const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;
     const { kind } = panelDefinition.spec.plugin;
-    const { data: plugin, isLoading, error } = usePlugin('Panel', kind);
+    const { data: plugin, isPending, error } = usePlugin('Panel', kind);
     if (error) {
         return /*#__PURE__*/ _jsx(ErrorAlert, {
             error: error
         });
     }
     // TODO: Proper loading indicator
-    if (isLoading) {
+    if (isPending) {
         return null;
     }
     if (plugin === undefined) {
@@ -40,17 +40,14 @@ export function PanelSpecEditor(props) {
             content: /*#__PURE__*/ _jsx(Controller, {
                 control: control,
                 name: "panelDefinition.spec.queries",
-                render: ({ field })=>{
-                    var _plugin_supportedQueryTypes, _panelDefinition_spec_queries;
-                    return /*#__PURE__*/ _jsx(MultiQueryEditor, {
-                        queryTypes: (_plugin_supportedQueryTypes = plugin.supportedQueryTypes) !== null && _plugin_supportedQueryTypes !== void 0 ? _plugin_supportedQueryTypes : [],
-                        queries: (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [],
+                render: ({ field })=>/*#__PURE__*/ _jsx(MultiQueryEditor, {
+                        queryTypes: plugin.supportedQueryTypes ?? [],
+                        queries: panelDefinition.spec.queries ?? [],
                         onChange: (queries)=>{
                             field.onChange(queries);
                             onQueriesChange(queries);
                         }
-                    });
-                }
+                    })
             })
         });
     }
@@ -92,9 +89,8 @@ export function PanelSpecEditor(props) {
                 })
         })
     });
-    var _panelDefinition_spec_queries;
     return /*#__PURE__*/ _jsx(QueryCountProvider, {
-        queryCount: ((_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : []).length,
+        queryCount: (panelDefinition.spec.queries ?? []).length,
         children: /*#__PURE__*/ _jsx(OptionsEditorTabs, {
             tabs: tabs
         }, tabs.length)

package/dist/components/PanelSpecEditor/PanelSpecEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.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 { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control, Controller } from 'react-hook-form';\nimport { ReactElement } from 'react';\nimport { QueryCountProvider, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps): ReactElement | null {\n  const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isLoading, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isLoading) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n}\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","QueryCountProvider","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","control","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","undefined","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","json","JSON","parse","queryCount","length"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PanelSpecEditor/PanelSpecEditor.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 { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';\nimport { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { Control, Controller } from 'react-hook-form';\nimport { ReactElement } from 'react';\nimport { QueryCountProvider, usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { MultiQueryEditor } from '../MultiQueryEditor';\n\nexport interface PanelSpecEditorProps {\n  control: Control<PanelEditorValues>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\nexport function PanelSpecEditor(props: PanelSpecEditorProps): ReactElement | null {\n  const { control, panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = props;\n  const { kind } = panelDefinition.spec.plugin;\n  const { data: plugin, isPending, error } = usePlugin('Panel', kind);\n\n  if (error) {\n    return <ErrorAlert error={error} />;\n  }\n\n  // TODO: Proper loading indicator\n  if (isPending) {\n    return null;\n  }\n\n  if (plugin === undefined) {\n    throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);\n  }\n\n  const { panelOptionsEditorComponents, hideQueryEditor } = plugin as PanelPlugin;\n  let tabs: OptionsEditorTabsProps['tabs'] = [];\n\n  if (!hideQueryEditor) {\n    tabs.push({\n      label: 'Query',\n      content: (\n        <Controller\n          control={control}\n          name=\"panelDefinition.spec.queries\"\n          render={({ field }) => (\n            <MultiQueryEditor\n              queryTypes={plugin.supportedQueryTypes ?? []}\n              queries={panelDefinition.spec.queries ?? []}\n              onChange={(queries) => {\n                field.onChange(queries);\n                onQueriesChange(queries);\n              }}\n            />\n          )}\n        />\n      ),\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: (\n          <Controller\n            control={control}\n            name=\"panelDefinition.spec.plugin.spec\"\n            render={({ field }) => (\n              <OptionsEditorComponent\n                value={panelDefinition.spec.plugin.spec}\n                onChange={(spec) => {\n                  field.onChange(spec);\n                  onPluginSpecChange(spec);\n                }}\n              />\n            )}\n          />\n        ),\n      }))\n    );\n  }\n\n  // always show json editor and links editor by default\n  tabs.push({\n    label: 'Links',\n    content: <LinksEditor control={control} />,\n  });\n  tabs.push({\n    label: 'JSON',\n    content: (\n      <Controller\n        control={control}\n        name=\"panelDefinition\"\n        render={({ field }) => (\n          <JSONEditor\n            maxHeight=\"80vh\"\n            value={panelDefinition}\n            onChange={(json) => {\n              field.onChange(JSON.parse(json));\n              onJSONChange(json);\n            }}\n          />\n        )}\n      />\n    ),\n  });\n\n  return (\n    <QueryCountProvider queryCount={(panelDefinition.spec.queries ?? []).length}>\n      <OptionsEditorTabs key={tabs.length} tabs={tabs} />\n    </QueryCountProvider>\n  );\n}\n"],"names":["ErrorAlert","JSONEditor","LinksEditor","Controller","QueryCountProvider","usePlugin","OptionsEditorTabs","MultiQueryEditor","PanelSpecEditor","props","control","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isPending","error","undefined","Error","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","name","render","field","queryTypes","supportedQueryTypes","queries","onChange","concat","map","OptionsEditorComponent","value","maxHeight","json","JSON","parse","queryCount","length"],"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,UAAU,EAAEC,UAAU,EAAEC,WAAW,QAAQ,yBAAyB;AAE7E,SAAkBC,UAAU,QAAQ,kBAAkB;AAEtD,SAASC,kBAAkB,EAAEC,SAAS,QAAQ,gBAAgB;AAE9D,SAAiCC,iBAAiB,QAAQ,uBAAuB;AACjF,SAASC,gBAAgB,QAAQ,sBAAsB;AAUvD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,OAAO,EAAEC,eAAe,EAAEC,YAAY,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGL;IACxF,MAAM,EAAEM,IAAI,EAAE,GAAGJ,gBAAgBK,IAAI,CAACC,MAAM;IAC5C,MAAM,EAAEC,MAAMD,MAAM,EAAEE,SAAS,EAAEC,KAAK,EAAE,GAAGf,UAAU,SAASU;IAE9D,IAAIK,OAAO;QACT,qBAAO,KAACpB;YAAWoB,OAAOA;;IAC5B;IAEA,iCAAiC;IACjC,IAAID,WAAW;QACb,OAAO;IACT;IAEA,IAAIF,WAAWI,WAAW;QACxB,MAAM,IAAIC,MAAM,CAAC,mDAAmD,EAAEP,KAAK,CAAC,CAAC;IAC/E;IAEA,MAAM,EAAEQ,4BAA4B,EAAEC,eAAe,EAAE,GAAGP;IAC1D,IAAIQ,OAAuC,EAAE;IAE7C,IAAI,CAACD,iBAAiB;QACpBC,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,uBACE,KAACzB;gBACCO,SAASA;gBACTmB,MAAK;gBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACxB;wBACCyB,YAAYf,OAAOgB,mBAAmB,IAAI,EAAE;wBAC5CC,SAASvB,gBAAgBK,IAAI,CAACkB,OAAO,IAAI,EAAE;wBAC3CC,UAAU,CAACD;4BACTH,MAAMI,QAAQ,CAACD;4BACfrB,gBAAgBqB;wBAClB;;;QAKV;IACF;IAEA,IAAIX,iCAAiCF,WAAW;QAC9CI,OAAOA,KAAKW,MAAM,CAChBb,6BAA6Bc,GAAG,CAAC,CAAC,EAAEV,KAAK,EAAEC,SAASU,sBAAsB,EAAE,GAAM,CAAA;gBAChFX;gBACAC,uBACE,KAACzB;oBACCO,SAASA;oBACTmB,MAAK;oBACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAACO;4BACCC,OAAO5B,gBAAgBK,IAAI,CAACC,MAAM,CAACD,IAAI;4BACvCmB,UAAU,CAACnB;gCACTe,MAAMI,QAAQ,CAACnB;gCACfF,mBAAmBE;4BACrB;;;YAKV,CAAA;IAEJ;IAEA,sDAAsD;IACtDS,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAAC1B;YAAYQ,SAASA;;IACjC;IACAe,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBACE,KAACzB;YACCO,SAASA;YACTmB,MAAK;YACLC,QAAQ,CAAC,EAAEC,KAAK,EAAE,iBAChB,KAAC9B;oBACCuC,WAAU;oBACVD,OAAO5B;oBACPwB,UAAU,CAACM;wBACTV,MAAMI,QAAQ,CAACO,KAAKC,KAAK,CAACF;wBAC1B7B,aAAa6B;oBACf;;;IAKV;IAEA,qBACE,KAACrC;QAAmBwC,YAAY,AAACjC,CAAAA,gBAAgBK,IAAI,CAACkB,OAAO,IAAI,EAAE,AAAD,EAAGW,MAAM;kBACzE,cAAA,KAACvC;YAAoCmB,MAAMA;WAAnBA,KAAKoB,MAAM;;AAGzC"}

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":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA2BnE"}
+{"version":3,"file":"PluginEditor.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/PluginEditor.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,YAAY,CA6BnE"}

package/dist/components/PluginEditor/PluginEditor.js

@@ -12,6 +12,7 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Box } from '@mui/material';
+import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { PluginKindSelect } from '../PluginKindSelect';
 import { PluginSpecEditor } from '../PluginSpecEditor';
 import { usePluginEditor } from './plugin-editor-api';
@@ -44,14 +45,17 @@ import { usePluginEditor } from './plugin-editor-api';
                     readOnly: isReadonly
                 },
                 error: !!error,
-                helperText: error === null || error === void 0 ? void 0 : error.message,
+                helperText: error?.message,
                 onChange: onSelectionChange
             }),
-            /*#__PURE__*/ _jsx(PluginSpecEditor, {
-                pluginSelection: value.selection,
-                value: value.spec,
-                onChange: onSpecChange,
-                isReadonly: isReadonly
+            /*#__PURE__*/ _jsx(ErrorBoundary, {
+                FallbackComponent: ErrorAlert,
+                children: /*#__PURE__*/ _jsx(PluginSpecEditor, {
+                    pluginSelection: value.selection,
+                    value: value.spec,
+                    onChange: onSpecChange,
+                    isReadonly: isReadonly
+                })
             })
         ]
     });

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 } from '@mui/material';\nimport { ReactElement } from 'react';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, 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 */\nexport function PluginEditor(props: PluginEditorProps): ReactElement {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\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      <PluginSpecEditor\n        pluginSelection={value.selection}\n        value={value.spec}\n        onChange={onSpecChange}\n        isReadonly={isReadonly}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginTypes","pluginKindLabel","onChange","_","isReadonly","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","fullWidth","sx","mb","minWidth","margin","label","disabled","selection","InputProps","readOnly","helperText","message","pluginSelection","spec"],"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,QAAQ,gBAAgB;AAEpC,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,6DAA6D;IAC7D,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,eAAe,EAAEC,UAAUC,CAAC,EAAEC,UAAU,EAAE,GAAGC,QAAQ,GAAGP;IACpF,MAAM,EAAEQ,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGd,gBAAgBE;IAChG,qBACE,MAACL;QAAK,GAAGY,MAAM;;0BACb,KAACX;gBACCiB,WAAW;gBACXC,IAAI;oBAAEC,IAAI;oBAAGC,UAAU;gBAAI;gBAC3BC,QAAO;gBACPC,OAAOf;gBACPD,aAAaA;gBACbiB,UAAUV;gBACVR,OAAOO,mBAAmBA,mBAAmBP,MAAMmB,SAAS;gBAC5DC,YAAY;oBAAEC,UAAUhB;gBAAW;gBACnCI,OAAO,CAAC,CAACA;gBACTa,UAAU,EAAEb,kBAAAA,4BAAAA,MAAOc,OAAO;gBAC1BpB,UAAUO;;0BAEZ,KAACd;gBACC4B,iBAAiBxB,MAAMmB,SAAS;gBAChCnB,OAAOA,MAAMyB,IAAI;gBACjBtB,UAAUQ;gBACVN,YAAYA;;;;AAIpB"}
+{"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 } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { ReactElement } from 'react';\nimport { PluginKindSelect } from '../PluginKindSelect';\nimport { PluginSpecEditor } from '../PluginSpecEditor';\nimport { PluginEditorProps, 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 */\nexport function PluginEditor(props: PluginEditorProps): ReactElement {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;\n  const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\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      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        <PluginSpecEditor\n          pluginSelection={value.selection}\n          value={value.spec}\n          onChange={onSpecChange}\n          isReadonly={isReadonly}\n        />\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorAlert","ErrorBoundary","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginTypes","pluginKindLabel","onChange","_","isReadonly","others","pendingSelection","isLoading","error","onSelectionChange","onSpecChange","fullWidth","sx","mb","minWidth","margin","label","disabled","selection","InputProps","readOnly","helperText","message","FallbackComponent","pluginSelection","spec"],"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,QAAQ,gBAAgB;AACpC,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAEnE,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAASC,gBAAgB,QAAQ,sBAAsB;AACvD,SAA4BC,eAAe,QAAQ,sBAAsB;AAEzE;;;;;;;CAOC,GACD,OAAO,SAASC,aAAaC,KAAwB;IACnD,6DAA6D;IAC7D,MAAM,EAAEC,KAAK,EAAEC,WAAW,EAAEC,eAAe,EAAEC,UAAUC,CAAC,EAAEC,UAAU,EAAE,GAAGC,QAAQ,GAAGP;IACpF,MAAM,EAAEQ,gBAAgB,EAAEC,SAAS,EAAEC,KAAK,EAAEC,iBAAiB,EAAEC,YAAY,EAAE,GAAGd,gBAAgBE;IAChG,qBACE,MAACP;QAAK,GAAGc,MAAM;;0BACb,KAACX;gBACCiB,WAAW;gBACXC,IAAI;oBAAEC,IAAI;oBAAGC,UAAU;gBAAI;gBAC3BC,QAAO;gBACPC,OAAOf;gBACPD,aAAaA;gBACbiB,UAAUV;gBACVR,OAAOO,mBAAmBA,mBAAmBP,MAAMmB,SAAS;gBAC5DC,YAAY;oBAAEC,UAAUhB;gBAAW;gBACnCI,OAAO,CAAC,CAACA;gBACTa,YAAYb,OAAOc;gBACnBpB,UAAUO;;0BAEZ,KAAChB;gBAAc8B,mBAAmB/B;0BAChC,cAAA,KAACG;oBACC6B,iBAAiBzB,MAAMmB,SAAS;oBAChCnB,OAAOA,MAAM0B,IAAI;oBACjBvB,UAAUQ;oBACVN,YAAYA;;;;;AAKtB"}

package/dist/components/PluginEditor/plugin-editor-api.js

@@ -45,7 +45,7 @@ import { usePlugin, usePluginRegistry } from '../../runtime';
     });
     const { defaultPluginKinds } = usePluginRegistry();
     const defaultPluginType = pluginTypes[0];
-    const defaultPluginKind = defaultPluginType ? defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[defaultPluginType] : undefined;
+    const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;
     const defaultPluginSelection = defaultPluginType && defaultPluginKind ? {
         type: defaultPluginType,
         kind: defaultPluginKind
@@ -63,7 +63,7 @@ import { usePlugin, usePluginRegistry } from '../../runtime';
         value.selection,
         defaultPluginKind
     ]);
-    const { data: plugin, isFetching, error } = usePlugin(pendingSelection === null || pendingSelection === void 0 ? void 0 : pendingSelection.type, (pendingSelection === null || pendingSelection === void 0 ? void 0 : pendingSelection.kind) || '');
+    const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '');
     useEffect(()=>{
         // Nothing to do if no new plugin kind is pending
         if (!pendingSelection) return;
@@ -73,7 +73,7 @@ import { usePlugin, usePluginRegistry } from '../../runtime';
         rememberCurrentSpecState();
         onChange({
             selection: pendingSelection,
-            spec: plugin.createInitialOptions()
+            spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {}
         });
         if (pendingSelection.type === 'Panel') {
             const panelPlugin = plugin;
@@ -96,9 +96,8 @@ import { usePlugin, usePluginRegistry } from '../../runtime';
    * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we
    * make the switch.
    */ const onSelectionChange = (nextSelection)=>{
-        var _prevSpecState_current_nextSelection_type;
         // If we already have state for this plugin type/kind from a previous selection, just use it
-        const previousState = (_prevSpecState_current_nextSelection_type = prevSpecState.current[nextSelection.type]) === null || _prevSpecState_current_nextSelection_type === void 0 ? void 0 : _prevSpecState_current_nextSelection_type[nextSelection.kind];
+        const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];
         if (previousState !== undefined) {
             rememberCurrentSpecState();
             onChange({

package/dist/components/PluginEditor/plugin-editor-api.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"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 { BoxProps } from '@mui/material';\nimport { UnknownSpec, useEvent } from '@perses-dev/core';\nimport { useState, useRef, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { PanelPlugin, PluginType } from '../../model';\nimport { PluginKindSelectProps } from '../PluginKindSelect/PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor/PluginSpecEditor';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\n\nexport interface PluginEditorSelection {\n  type: PluginType;\n  kind: string;\n}\n\nexport interface PluginEditorValue {\n  selection: PluginEditorSelection;\n  spec: UnknownSpec;\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';\n\nexport interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  pluginTypes: PluginType[];\n  pluginKindLabel: string;\n  value: PluginEditorValue;\n  isReadonly?: boolean;\n  onChange: (next: PluginEditorValue) => void;\n}\n\ntype PreviousSpecState = Record<string, Record<string, UnknownSpec>>;\ntype HideQueryEditorState = Record<string, boolean>;\n\n/**\n * Props needed by the usePluginEditor hook.\n */\nexport type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginTypes' | 'value' | 'onChange'> & {\n  onHideQueryEditorChange?: (isHidden: boolean) => void;\n};\n\n/**\n * Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide\n * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also\n * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin\n * kind back.\n */\nexport function usePluginEditor(props: UsePluginEditorProps): {\n  pendingSelection?: PluginEditorSelection;\n  isLoading: boolean;\n  error: Error | null;\n  onSelectionChange: (s: PluginEditorSelection) => void;\n  onSpecChange: (next: UnknownSpec) => void;\n  rememberCurrentSpecState: () => void;\n} {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function\n\n  // Keep a stable reference, so we don't run the effect below when we don't need to\n  const onChange = useEvent(props.onChange);\n  const onHideQuery = useEvent(onHideQueryEditorChange);\n\n  // The previous spec state for PluginType and kind and a helper function for remembering current values\n  const prevSpecState = useRef<PreviousSpecState>({\n    [value.selection.type]: { [value.selection.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[value.selection.type];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[value.selection.type] = byPluginType;\n    }\n    byPluginType[value.selection.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.selection.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginType = pluginTypes[0];\n  const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;\n  const defaultPluginSelection =\n    defaultPluginType && defaultPluginKind\n      ? {\n          type: defaultPluginType,\n          kind: defaultPluginKind,\n        }\n      : undefined;\n  const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;\n\n  // When kind changes and we haven't loaded that plugin before, we will need to enter a \"pending\" state so that we\n  // can generate proper initial spec values that match the new plugin kind\n  const [pendingSelection, setPendingSelection] = useState<PluginEditorSelection | undefined>(initPendingSelection);\n\n  // Take a default kind in case user write explicitly an empty kind in the initial value\n  useEffect(() => {\n    if (value.selection.kind === '') {\n      value.selection.kind = defaultPluginKind || '';\n    }\n  }, [value.selection, defaultPluginKind]);\n\n  const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '');\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (!pendingSelection) return;\n\n    // Can't get spec value until we have a plugin\n    if (plugin === undefined) return;\n\n    // Fire an onChange to change to the pending kind with initial values from the plugin\n    rememberCurrentSpecState();\n    onChange({\n      selection: pendingSelection,\n      spec: plugin.createInitialOptions(),\n    });\n\n    if (pendingSelection.type === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n    setPendingSelection(undefined);\n  }, [pendingSelection, plugin, rememberCurrentSpecState, onChange, onHideQuery, hideQueryState, value.selection]);\n\n  /**\n   * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we\n   * make the switch.\n   */\n  const onSelectionChange: PluginKindSelectProps['onChange'] = (nextSelection) => {\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        selection: nextSelection,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingSelection(nextSelection);\n    }\n\n    if (\n      nextSelection.type === 'Panel' &&\n      hideQueryState.current[nextSelection.kind] !== undefined &&\n      hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextSelection.kind]);\n    }\n  };\n\n  /**\n   * Spec changes are independent and always just set the spec state.\n   */\n  const onSpecChange: PluginSpecEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec = next;\n      })\n    );\n  };\n\n  return {\n    pendingSelection,\n    isLoading: isFetching,\n    error,\n    onSelectionChange,\n    onSpecChange,\n    rememberCurrentSpecState,\n  };\n}\n"],"names":["useEvent","useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","usePluginEditor","props","pluginTypes","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","selection","type","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginType","defaultPluginKind","defaultPluginSelection","initPendingSelection","pendingSelection","setPendingSelection","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onSelectionChange","nextSelection","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"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 { BoxProps } from '@mui/material';\nimport { UnknownSpec, useEvent } from '@perses-dev/core';\nimport { useState, useRef, useEffect } from 'react';\nimport { produce } from 'immer';\nimport { PanelPlugin, PluginType } from '../../model';\nimport { PluginKindSelectProps } from '../PluginKindSelect/PluginKindSelect';\nimport { PluginSpecEditorProps } from '../PluginSpecEditor/PluginSpecEditor';\nimport { usePlugin, usePluginRegistry } from '../../runtime';\n\nexport interface PluginEditorSelection {\n  type: PluginType;\n  kind: string;\n}\n\nexport interface PluginEditorValue {\n  selection: PluginEditorSelection;\n  spec: UnknownSpec;\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';\n\nexport interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  pluginTypes: PluginType[];\n  pluginKindLabel: string;\n  value: PluginEditorValue;\n  isReadonly?: boolean;\n  onChange: (next: PluginEditorValue) => void;\n}\n\ntype PreviousSpecState = Record<string, Record<string, UnknownSpec>>;\ntype HideQueryEditorState = Record<string, boolean>;\n\n/**\n * Props needed by the usePluginEditor hook.\n */\nexport type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginTypes' | 'value' | 'onChange'> & {\n  onHideQueryEditorChange?: (isHidden: boolean) => void;\n};\n\n/**\n * Returns the state/handlers that power the `PluginEditor` component. Useful for custom components that want to provide\n * a different UI, but want the same behavior of changing `kind` and `spec` together on plugin kind changes. Also\n * remembers previous `spec` values that it's seen, allowing and restores those values if a user switches the plugin\n * kind back.\n */\nexport function usePluginEditor(props: UsePluginEditorProps): {\n  pendingSelection?: PluginEditorSelection;\n  isLoading: boolean;\n  error: Error | null;\n  onSelectionChange: (s: PluginEditorSelection) => void;\n  onSpecChange: (next: UnknownSpec) => void;\n  rememberCurrentSpecState: () => void;\n} {\n  // eslint-disable-next-line @typescript-eslint/no-empty-function\n  const { pluginTypes, value, onHideQueryEditorChange = (): void => {} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function\n\n  // Keep a stable reference, so we don't run the effect below when we don't need to\n  const onChange = useEvent(props.onChange);\n  const onHideQuery = useEvent(onHideQueryEditorChange);\n\n  // The previous spec state for PluginType and kind and a helper function for remembering current values\n  const prevSpecState = useRef<PreviousSpecState>({\n    [value.selection.type]: { [value.selection.kind]: value.spec },\n  });\n  const rememberCurrentSpecState = useEvent(() => {\n    let byPluginType = prevSpecState.current[value.selection.type];\n    if (byPluginType === undefined) {\n      byPluginType = {};\n      prevSpecState.current[value.selection.type] = byPluginType;\n    }\n    byPluginType[value.selection.kind] = value.spec;\n  });\n\n  // The previous hide query state for each panel kind\n  const hideQueryState = useRef<HideQueryEditorState>({\n    [value.selection.kind]: false,\n  });\n\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultPluginType = pluginTypes[0];\n  const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;\n  const defaultPluginSelection =\n    defaultPluginType && defaultPluginKind\n      ? {\n          type: defaultPluginType,\n          kind: defaultPluginKind,\n        }\n      : undefined;\n  const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;\n\n  // When kind changes and we haven't loaded that plugin before, we will need to enter a \"pending\" state so that we\n  // can generate proper initial spec values that match the new plugin kind\n  const [pendingSelection, setPendingSelection] = useState<PluginEditorSelection | undefined>(initPendingSelection);\n\n  // Take a default kind in case user write explicitly an empty kind in the initial value\n  useEffect(() => {\n    if (value.selection.kind === '') {\n      value.selection.kind = defaultPluginKind || '';\n    }\n  }, [value.selection, defaultPluginKind]);\n\n  const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '');\n\n  useEffect(() => {\n    // Nothing to do if no new plugin kind is pending\n    if (!pendingSelection) return;\n\n    // Can't get spec value until we have a plugin\n    if (plugin === undefined) return;\n\n    // Fire an onChange to change to the pending kind with initial values from the plugin\n    rememberCurrentSpecState();\n    onChange({\n      selection: pendingSelection,\n      spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {},\n    });\n\n    if (pendingSelection.type === 'Panel') {\n      const panelPlugin = plugin as PanelPlugin;\n      hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;\n      if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {\n        onHideQuery(!!panelPlugin.hideQueryEditor);\n      }\n    }\n    setPendingSelection(undefined);\n  }, [pendingSelection, plugin, rememberCurrentSpecState, onChange, onHideQuery, hideQueryState, value.selection]);\n\n  /**\n   * When the user tries to change the plugin kind, make sure we have the correct spec for that plugin kind before we\n   * make the switch.\n   */\n  const onSelectionChange: PluginKindSelectProps['onChange'] = (nextSelection) => {\n    // If we already have state for this plugin type/kind from a previous selection, just use it\n    const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];\n    if (previousState !== undefined) {\n      rememberCurrentSpecState();\n      onChange({\n        selection: nextSelection,\n        spec: previousState,\n      });\n    } else {\n      // Otherwise, kick off the async loading process\n      setPendingSelection(nextSelection);\n    }\n\n    if (\n      nextSelection.type === 'Panel' &&\n      hideQueryState.current[nextSelection.kind] !== undefined &&\n      hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]\n    ) {\n      onHideQuery(!!hideQueryState.current[nextSelection.kind]);\n    }\n  };\n\n  /**\n   * Spec changes are independent and always just set the spec state.\n   */\n  const onSpecChange: PluginSpecEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.spec = next;\n      })\n    );\n  };\n\n  return {\n    pendingSelection,\n    isLoading: isFetching,\n    error,\n    onSelectionChange,\n    onSpecChange,\n    rememberCurrentSpecState,\n  };\n}\n"],"names":["useEvent","useState","useRef","useEffect","produce","usePlugin","usePluginRegistry","usePluginEditor","props","pluginTypes","value","onHideQueryEditorChange","onChange","onHideQuery","prevSpecState","selection","type","kind","spec","rememberCurrentSpecState","byPluginType","current","undefined","hideQueryState","defaultPluginKinds","defaultPluginType","defaultPluginKind","defaultPluginSelection","initPendingSelection","pendingSelection","setPendingSelection","data","plugin","isFetching","error","createInitialOptions","panelPlugin","hideQueryEditor","onSelectionChange","nextSelection","previousState","onSpecChange","next","draft","isLoading"],"mappings":"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"}

package/dist/components/PluginKindSelect/PluginKindSelect.js

@@ -26,15 +26,14 @@ import { useListPluginMetadata } from '../../runtime';
     // 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)=>{
-        onChange === null || onChange === void 0 ? void 0 : onChange(optionValueToSelection(event.target.value));
+        onChange?.(optionValueToSelection(event.target.value));
     };
     const renderValue = useCallback((selected)=>{
-        var _data_find;
         if (selected === '') {
             return '';
         }
         const selectedValue = optionValueToSelection(selected);
-        return data === null || data === void 0 ? void 0 : (_data_find = data.find((v)=>v.pluginType === selectedValue.type && v.kind === selectedValue.kind)) === null || _data_find === void 0 ? void 0 : _data_find.display.name;
+        return data?.find((v)=>v.kind === selectedValue.type && v.spec.name === selectedValue.kind)?.spec.display.name;
     }, [
         data
     ]);
@@ -55,14 +54,14 @@ import { useListPluginMetadata } from '../../runtime';
                 value: "",
                 children: "Loading..."
             }),
-            data === null || data === void 0 ? void 0 : data.map((metadata)=>/*#__PURE__*/ _jsx(MenuItem, {
+            data?.map((metadata)=>/*#__PURE__*/ _jsx(MenuItem, {
                     "data-testid": "option",
                     value: selectionToOptionValue({
-                        type: metadata.pluginType,
-                        kind: metadata.kind
+                        type: metadata.kind,
+                        kind: metadata.spec.name
                     }),
-                    children: metadata.display.name
-                }, metadata.pluginType + metadata.kind))
+                    children: metadata.spec.display.name
+                }, metadata.kind + metadata.spec.name))
         ]
     });
 });

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, 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.pluginType === selectedValue.type && v.kind === selectedValue.kind)?.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.pluginType + metadata.kind}\n          value={selectionToOptionValue({ type: metadata.pluginType, kind: metadata.kind })}\n        >\n          {metadata.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","pluginType","type","kind","display","name","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,qBAAAA,+BAAAA,SAAWO,uBAAuBD,MAAME,MAAM,CAACV,KAAK;IACtD;IAEA,MAAMW,cAAcjB,YAClB,CAACkB;YAKQR;QAJP,IAAIQ,aAAa,IAAI;YACnB,OAAO;QACT;QACA,MAAMC,gBAAgBJ,uBAAuBG;QAC7C,OAAOR,iBAAAA,4BAAAA,aAAAA,KAAMU,IAAI,CAAC,CAACC,IAAMA,EAAEC,UAAU,KAAKH,cAAcI,IAAI,IAAIF,EAAEG,IAAI,KAAKL,cAAcK,IAAI,eAAtFd,iCAAAA,WAAyFe,OAAO,CAACC,IAAI;IAC9G,GACA;QAAChB;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,iBAAAA,2BAAAA,KAAMsB,GAAG,CAAC,CAACC,yBACV,KAACpC;oBACCkC,eAAY;oBAEZzB,OAAOM,uBAAuB;wBAAEW,MAAMU,SAASX,UAAU;wBAAEE,MAAMS,SAAST,IAAI;oBAAC;8BAE9ES,SAASR,OAAO,CAACC,IAAI;mBAHjBO,SAASX,UAAU,GAAGW,SAAST,IAAI;;;AAQlD,GAAG;AACHtB,iBAAiBgC,WAAW,GAAG;AAE/B,kDAAkD;AAClD,MAAMC,yBAAyB;AAE/B;;;;CAIC,GACD,SAASvB,uBAAuBwB,QAA+B;IAC7D,OAAO;QAACA,SAASb,IAAI;QAAEa,SAASZ,IAAI;KAAC,CAACa,IAAI,CAACF;AAC7C;AAEA;;;;CAIC,GACD,SAASpB,uBAAuBuB,WAAmB;IACjD,MAAMC,QAAQD,YAAYE,KAAK,CAACL;IAChC,MAAMZ,OAAOgB,KAAK,CAAC,EAAE;IACrB,MAAMf,OAAOe,KAAK,CAAC,EAAE;IACrB,IAAIhB,SAASkB,aAAajB,SAASiB,WAAW;QAC5C,MAAM,IAAIC,MAAM;IAClB;IACA,OAAO;QACLnB;QACAC;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 } 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, 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"}