@perses-dev/plugin-system 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-histogram-types-78c5104

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -10,10 +10,10 @@
 // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 // See the License for the specific language governing permissions and
 // limitations under the License.
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Switch } from '@mui/material';
 import { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core';
-import { ErrorAlert, OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';
+import { ErrorAlert, OptionsEditorControl, OptionsEditorGroup, SettingsAutocomplete } from '@perses-dev/components';
 import { LEGEND_MODE_CONFIG, LEGEND_POSITIONS_CONFIG, validateLegendSpec, LEGEND_VALUE_CONFIG, LEGEND_SIZE_CONFIG } from '../../model';
 const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
     return {
@@ -39,7 +39,7 @@ const VALUE_OPTIONS = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config])=>{
         ...config
     };
 });
-export function LegendOptionsEditor({ value, onChange }) {
+export function LegendOptionsEditor({ value, onChange, showValuesEditor = true }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
         const legendValue = checked === true ? {
@@ -77,13 +77,13 @@ export function LegendOptionsEditor({ value, onChange }) {
         });
     };
     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) {
@@ -94,7 +94,8 @@ export function LegendOptionsEditor({ value, onChange }) {
         }
         return result;
     }, []);
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs(OptionsEditorGroup, {
+        title: "Legend",
         children: [
             !isValidLegend && /*#__PURE__*/ _jsx(ErrorAlert, {
                 error: {
@@ -150,7 +151,7 @@ export function LegendOptionsEditor({ value, onChange }) {
                     disableClearable: true
                 })
             }),
-            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+            showValuesEditor && /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Values",
                 control: // For some reason, the inferred option type doesn't always seem to work
                 // quite right when `multiple` is true. Explicitly setting the generics

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, SettingsAutocomplete } from '@perses-dev/components';\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}\n\nexport function LegendOptionsEditor({ value, onChange }: LegendOptionsEditorProps) {\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) => {\n    onChange({\n      ...value,\n      position: newValue.id,\n    });\n  };\n\n  const handleLegendModeChange = (_: unknown, newValue: LegendModeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      mode: newValue.id,\n    });\n  };\n\n  const handleLegendSizeChange = (_: unknown, newValue: LegendSizeOption) => {\n    onChange({\n      ...value,\n      position: currentPosition,\n      size: newValue.id,\n    });\n  };\n\n  const handleLegendValueChange = (_: unknown, newValue: LegendValueOption[]) => {\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    <>\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      <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  );\n}\n"],"names":["Switch","DEFAULT_LEGEND","getLegendMode","getLegendPosition","getLegendSize","ErrorAlert","OptionsEditorControl","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","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","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.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export interface MetricLabelInputProps {
+    value?: string;
+    onChange: (metricLabel?: string) => void;
+}
+export declare const MetricLabelInput: FC<MetricLabelInputProps>;
+//# sourceMappingURL=MetricLabelInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricLabelInput.d.ts","sourceRoot":"","sources":["../../../src/components/MetricLabelInput/MetricLabelInput.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,EAAE,EAAE,MAAM,OAAO,CAAC;AAE3B,MAAM,WAAW,qBAAqB;IACpC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,CAAC,WAAW,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;CAC1C;AAED,eAAO,MAAM,gBAAgB,EAAE,EAAE,CAAC,qBAAqB,CAatD,CAAC"}

package/dist/components/MetricLabelInput/MetricLabelInput.js

@@ -0,0 +1,33 @@
+// 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
+//
+// 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.
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TextField } from '@mui/material';
+import { OptionsEditorControl } from '@perses-dev/components';
+export const MetricLabelInput = ({ value, onChange })=>{
+    const handleChange = (event)=>{
+        const newValue = event.target.value;
+        onChange(newValue || undefined);
+    };
+    return /*#__PURE__*/ _jsx(OptionsEditorControl, {
+        label: "Metric label",
+        description: "Specify label to display",
+        control: /*#__PURE__*/ _jsx(TextField, {
+            fullWidth: true,
+            name: "Metric label",
+            value: value || '',
+            onChange: handleChange
+        })
+    });
+};
+
+//# sourceMappingURL=MetricLabelInput.js.map

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

@@ -0,0 +1 @@
+{"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.d.ts

@@ -0,0 +1,2 @@
+export * from './MetricLabelInput';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/MetricLabelInput/index.js

@@ -0,0 +1,15 @@
+// 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
+//
+// 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 './MetricLabelInput';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"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

@@ -0,0 +1,17 @@
+import { ReactElement } from 'react';
+import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
+export interface MultiQueryEditorProps {
+    queryTypes: QueryPluginType[];
+    queries?: QueryDefinition[];
+    onChange: (queries: QueryDefinition[]) => void;
+}
+/**
+ * A component render a list of {@link QueryEditorContainer} for the given query definitions.
+ * It allows adding, removing and editing queries.
+ * @param queryTypes The list of query types that the underlying editor will propose
+ * @param queries The list of query definitions to render
+ * @param onChange The callback to call when the queries are modified
+ * @constructor
+ */
+export declare function MultiQueryEditor({ queryTypes, queries, onChange }: MultiQueryEditorProps): ReactElement;
+//# sourceMappingURL=MultiQueryEditor.d.ts.map

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

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

package/dist/components/{TimeSeriesQueryEditor/TimeSeriesQueryEditor.js → MultiQueryEditor/MultiQueryEditor.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -15,32 +15,46 @@ import { useState } from 'react';
 import { produce } from 'immer';
 import { Button, Stack } from '@mui/material';
 import AddIcon from 'mdi-material-ui/Plus';
-import { TIME_SERIES_QUERY_KEY, useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';
-import { TimeSeriesQueryInput } from './TimeSeriesQueryInput';
-export function TimeSeriesQueryEditor({ queries = [], onChange }) {
-    var _timeSeriesPlugins_;
+import { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';
+import { QueryEditorContainer } from './QueryEditorContainer';
+function useDefaultQueryDefinition(queryTypes) {
     // 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, isLoading } = useListPluginMetadata(queryTypes);
     const { defaultPluginKinds } = usePluginRegistry();
-    const { data: timeSeriesPlugins } = useListPluginMetadata(TIME_SERIES_QUERY_KEY);
-    var _defaultPluginKinds_TIME_SERIES_QUERY_KEY, _ref;
-    const defaultTimeSeriesQueryKind = (_ref = (_defaultPluginKinds_TIME_SERIES_QUERY_KEY = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[TIME_SERIES_QUERY_KEY]) !== null && _defaultPluginKinds_TIME_SERIES_QUERY_KEY !== void 0 ? _defaultPluginKinds_TIME_SERIES_QUERY_KEY : timeSeriesPlugins === null || timeSeriesPlugins === void 0 ? void 0 : (_timeSeriesPlugins_ = timeSeriesPlugins[0]) === null || _timeSeriesPlugins_ === void 0 ? void 0 : _timeSeriesPlugins_.kind) !== null && _ref !== void 0 ? _ref : '';
-    const { data: defaultQueryPlugin } = usePlugin(TIME_SERIES_QUERY_KEY, defaultTimeSeriesQueryKind, {
-        useErrorBoundary: true,
+    const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';
+    const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {
+        throwOnError: true,
         enabled: true
     });
     // This default query definition is used if no query is provided initially or when we add a new query
-    const defaultInitialQueryDefinition = {
-        kind: TIME_SERIES_QUERY_KEY,
-        spec: {
-            plugin: {
-                kind: defaultTimeSeriesQueryKind,
-                spec: (defaultQueryPlugin === null || defaultQueryPlugin === void 0 ? void 0 : defaultQueryPlugin.createInitialOptions()) || {}
+    return {
+        defaultInitialQueryDefinition: {
+            kind: defaultQueryType,
+            spec: {
+                plugin: {
+                    kind: defaultQueryKind,
+                    spec: defaultQueryPlugin?.createInitialOptions() || {}
+                }
             }
-        }
+        },
+        isLoading
     };
+}
+/**
+ * A component render a list of {@link QueryEditorContainer} for the given query definitions.
+ * It allows adding, removing and editing queries.
+ * @param queryTypes The list of query types that the underlying editor will propose
+ * @param queries The list of query definitions to render
+ * @param onChange The callback to call when the queries are modified
+ * @constructor
+ */ export function MultiQueryEditor({ queryTypes, queries = [], onChange }) {
+    const { defaultInitialQueryDefinition, isLoading } = useDefaultQueryDefinition(queryTypes);
     // State for which queries are collapsed
-    // TODO: Would be easier if we had IDs for queries.
     const [queriesCollapsed, setQueriesCollapsed] = useState(queries.map(()=>false));
     // Query handlers
     const handleQueryChange = (index, queryDef)=>{
@@ -55,7 +69,6 @@ export function TimeSeriesQueryEditor({ queries = [], onChange }) {
         }));
     };
     const handleQueryAdd = ()=>{
-        if (!defaultQueryPlugin) return;
         onChange(produce(queries, (draft)=>{
             if (draft) {
                 draft.push(defaultInitialQueryDefinition);
@@ -93,14 +106,15 @@ export function TimeSeriesQueryEditor({ queries = [], onChange }) {
         });
     };
     // 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, {
                 spacing: 1,
-                children: queryDefinitions.map((query, i)=>/*#__PURE__*/ _jsx(TimeSeriesQueryInput, {
+                children: queryDefinitions.map((query, i)=>/*#__PURE__*/ _jsx(QueryEditorContainer, {
+                        queryTypes: queryTypes,
                         index: i,
                         query: query,
                         isCollapsed: !!queriesCollapsed[i],
@@ -122,4 +136,4 @@ export function TimeSeriesQueryEditor({ queries = [], onChange }) {
     });
 }
 
-//# sourceMappingURL=TimeSeriesQueryEditor.js.map
+//# sourceMappingURL=MultiQueryEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/MultiQueryEditor.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { ReactElement, useState } from 'react';\nimport { produce } from 'immer';\nimport { Button, Stack } from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { useListPluginMetadata, usePlugin, usePluginRegistry } from '../../runtime';\nimport { QueryEditorContainer } from './QueryEditorContainer';\n\nexport interface MultiQueryEditorProps {\n  queryTypes: QueryPluginType[];\n  queries?: QueryDefinition[];\n  onChange: (queries: QueryDefinition[]) => void;\n}\n\nfunction useDefaultQueryDefinition(queryTypes: QueryPluginType[]): {\n  defaultInitialQueryDefinition: QueryDefinition;\n  isLoading: boolean;\n} {\n  // Build the default query plugin\n  // This will be used only if the queries are empty, to open a starting query\n\n  // Firs the default query type\n  const defaultQueryType = queryTypes[0]!;\n\n  // Then the default plugin kind\n  // Use as default the plugin kind explicitly set as default or the first in the list\n  const { data: queryPlugins, isLoading } = useListPluginMetadata(queryTypes);\n  const { defaultPluginKinds } = usePluginRegistry();\n  const defaultQueryKind = defaultPluginKinds?.[defaultQueryType] ?? queryPlugins?.[0]?.spec.name ?? '';\n\n  const { data: defaultQueryPlugin } = usePlugin(defaultQueryType, defaultQueryKind, {\n    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/MultiQueryEditor/QueryEditorContainer.d.ts

@@ -0,0 +1,29 @@
+import { QueryDefinition, QueryPluginType } from '@perses-dev/core';
+import { ReactElement } from 'react';
+/**
+ * Properties for {@link QueryEditorContainer}
+ */
+interface QueryEditorContainerProps {
+    queryTypes: QueryPluginType[];
+    index: number;
+    query: QueryDefinition;
+    onChange: (index: number, query: QueryDefinition) => void;
+    onCollapseExpand: (index: number) => void;
+    isCollapsed?: boolean;
+    onDelete?: (index: number) => void;
+}
+/**
+ * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible
+ * to not take too much space.
+ * @param queryTypes the supported query types
+ * @param index the index of the query in the list
+ * @param query the query definition
+ * @param isCollapsed whether the query editor is collapsed or not
+ * @param onDelete callback when the query is deleted
+ * @param onChange callback when the query is changed
+ * @param onCollapseExpand callback when the query is collapsed or expanded
+ * @constructor
+ */
+export declare const QueryEditorContainer: ({ queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand, }: QueryEditorContainerProps) => ReactElement;
+export {};
+//# sourceMappingURL=QueryEditorContainer.d.ts.map

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

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

package/dist/components/{TraceQueryEditor/TraceQueryInput.js → MultiQueryEditor/QueryEditorContainer.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// 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
@@ -11,13 +11,24 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { produce } from 'immer';
 import { Stack, IconButton, Typography, Box } from '@mui/material';
+import DeleteIcon from 'mdi-material-ui/DeleteOutline';
 import ChevronDown from 'mdi-material-ui/ChevronDown';
 import ChevronRight from 'mdi-material-ui/ChevronRight';
-import DeleteIcon from 'mdi-material-ui/DeleteOutline';
-import produce from 'immer';
 import { PluginEditor } from '../PluginEditor';
-export const TraceQueryInput = ({ index, query, isCollapsed, onDelete, onChange, onCollapseExpand })=>{
+/**
+ * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible
+ * to not take too much space.
+ * @param queryTypes the supported query types
+ * @param index the index of the query in the list
+ * @param query the query definition
+ * @param isCollapsed whether the query editor is collapsed or not
+ * @param onDelete callback when the query is deleted
+ * @param onChange callback when the query is changed
+ * @param onCollapseExpand callback when the query is collapsed or expanded
+ * @constructor
+ */ export const QueryEditorContainer = ({ queryTypes, index, query, isCollapsed, onDelete, onChange, onCollapseExpand })=>{
     return /*#__PURE__*/ _jsxs(Stack, {
         spacing: 1,
         children: [
@@ -36,7 +47,7 @@ export const TraceQueryInput = ({ index, query, isCollapsed, onDelete, onChange,
                         variant: "overline",
                         component: "h4",
                         children: [
-                            "Query ",
+                            "Query #",
                             index + 1
                         ]
                     }),
@@ -53,6 +64,7 @@ export const TraceQueryInput = ({ index, query, isCollapsed, onDelete, onChange,
                 ]
             }),
             !isCollapsed && /*#__PURE__*/ _jsx(QueryEditor, {
+                queryTypes: queryTypes,
                 value: query,
                 onChange: (next)=>onChange(index, next)
             })
@@ -60,24 +72,35 @@ export const TraceQueryInput = ({ index, query, isCollapsed, onDelete, onChange,
     }, index);
 };
 /**
- * Displays an editor for TraceQueryDefinition objects.
+ * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.
+ * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin
+ * spec for this plugin.
+ * @param props
+ * @constructor
  */ function QueryEditor(props) {
-    const { value, onChange, ...others } = props;
-    const { spec: { plugin } } = value;
+    const { value, onChange, queryTypes, ...others } = props;
     const handlePluginChange = (next)=>{
         onChange(produce(value, (draft)=>{
-            draft.spec.plugin = next;
+            draft.kind = next.selection.type;
+            draft.spec.plugin.kind = next.selection.kind;
+            draft.spec.plugin.spec = next.spec;
         }));
     };
     return /*#__PURE__*/ _jsx(Box, {
         ...others,
         children: /*#__PURE__*/ _jsx(PluginEditor, {
-            pluginType: "TraceQuery",
+            pluginTypes: queryTypes,
             pluginKindLabel: "Query Type",
-            value: plugin,
+            value: {
+                selection: {
+                    kind: value.spec.plugin.kind,
+                    type: value.kind
+                },
+                spec: value.spec.plugin.spec
+            },
             onChange: handlePluginChange
         })
     });
 }
 
-//# sourceMappingURL=TraceQueryInput.js.map
+//# sourceMappingURL=QueryEditorContainer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/MultiQueryEditor/QueryEditorContainer.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { produce } from 'immer';\nimport { QueryDefinition, QueryPluginType } from '@perses-dev/core';\nimport { Stack, IconButton, Typography, BoxProps, Box } from '@mui/material';\nimport DeleteIcon from 'mdi-material-ui/DeleteOutline';\nimport ChevronDown from 'mdi-material-ui/ChevronDown';\nimport ChevronRight from 'mdi-material-ui/ChevronRight';\nimport { ReactElement } from 'react';\nimport { PluginEditor, PluginEditorProps } from '../PluginEditor';\n\n/**\n * Properties for {@link QueryEditorContainer}\n */\ninterface QueryEditorContainerProps {\n  queryTypes: QueryPluginType[];\n  index: number;\n  query: QueryDefinition;\n  onChange: (index: number, query: QueryDefinition) => void;\n  onCollapseExpand: (index: number) => void;\n  isCollapsed?: boolean;\n  onDelete?: (index: number) => void;\n}\n\n/**\n * Container for a query editor. This component is responsible for rendering the query editor, and make it collapsible\n * to not take too much space.\n * @param queryTypes the supported query types\n * @param index the index of the query in the list\n * @param query the query definition\n * @param isCollapsed whether the query editor is collapsed or not\n * @param onDelete callback when the query is deleted\n * @param onChange callback when the query is changed\n * @param onCollapseExpand callback when the query is collapsed or expanded\n * @constructor\n */\nexport const QueryEditorContainer = ({\n  queryTypes,\n  index,\n  query,\n  isCollapsed,\n  onDelete,\n  onChange,\n  onCollapseExpand,\n}: QueryEditorContainerProps): ReactElement => {\n  return (\n    <Stack key={index} spacing={1}>\n      <Stack direction=\"row\" alignItems=\"center\" borderBottom={1} borderColor={(theme) => theme.palette.divider}>\n        <IconButton size=\"small\" onClick={() => onCollapseExpand(index)}>\n          {isCollapsed ? <ChevronRight /> : <ChevronDown />}\n        </IconButton>\n        <Typography variant=\"overline\" component=\"h4\">\n          Query #{index + 1}\n        </Typography>\n        <IconButton\n          size=\"small\"\n          // Use `visibility` to ensure that the row has the same height when delete button is visible or not visible\n          sx={{ marginLeft: 'auto', visibility: `${onDelete ? 'visible' : 'hidden'}` }}\n          onClick={() => onDelete && onDelete(index)}\n        >\n          <DeleteIcon />\n        </IconButton>\n      </Stack>\n      {!isCollapsed && <QueryEditor queryTypes={queryTypes} value={query} onChange={(next) => onChange(index, next)} />}\n    </Stack>\n  );\n};\n\n// Props on MUI Box that we don't want people to pass because we're either redefining them or providing them in\n// this component\ntype OmittedMuiProps = 'children' | 'value' | 'onChange';\ninterface QueryEditorProps extends Omit<BoxProps, OmittedMuiProps> {\n  queryTypes: QueryPluginType[];\n  value: QueryDefinition;\n  onChange: (next: QueryDefinition) => void;\n}\n\n/**\n * Editor for a query definition. This component is responsible for rendering the plugin editor for the given query.\n * This will allow user to select a plugin extending from the given supported query types, and then edit the plugin\n * spec for this plugin.\n * @param props\n * @constructor\n */\nfunction QueryEditor(props: QueryEditorProps): ReactElement {\n  const { value, onChange, queryTypes, ...others } = props;\n\n  const handlePluginChange: PluginEditorProps['onChange'] = (next) => {\n    onChange(\n      produce(value, (draft) => {\n        draft.kind = next.selection.type;\n        draft.spec.plugin.kind = next.selection.kind;\n        draft.spec.plugin.spec = next.spec;\n      })\n    );\n  };\n\n  return (\n    <Box {...others}>\n      <PluginEditor\n        pluginTypes={queryTypes}\n        pluginKindLabel=\"Query Type\"\n        value={{\n          selection: {\n            kind: value.spec.plugin.kind,\n            type: value.kind,\n          },\n          spec: value.spec.plugin.spec,\n        }}\n        onChange={handlePluginChange}\n      />\n    </Box>\n  );\n}\n"],"names":["produce","Stack","IconButton","Typography","Box","DeleteIcon","ChevronDown","ChevronRight","PluginEditor","QueryEditorContainer","queryTypes","index","query","isCollapsed","onDelete","onChange","onCollapseExpand","spacing","direction","alignItems","borderBottom","borderColor","theme","palette","divider","size","onClick","variant","component","sx","marginLeft","visibility","QueryEditor","value","next","props","others","handlePluginChange","draft","kind","selection","type","spec","plugin","pluginTypes","pluginKindLabel"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,OAAO,QAAQ,QAAQ;AAEhC,SAASC,KAAK,EAAEC,UAAU,EAAEC,UAAU,EAAYC,GAAG,QAAQ,gBAAgB;AAC7E,OAAOC,gBAAgB,gCAAgC;AACvD,OAAOC,iBAAiB,8BAA8B;AACtD,OAAOC,kBAAkB,+BAA+B;AAExD,SAASC,YAAY,QAA2B,kBAAkB;AAelE;;;;;;;;;;;CAWC,GACD,OAAO,MAAMC,uBAAuB,CAAC,EACnCC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,WAAW,EACXC,QAAQ,EACRC,QAAQ,EACRC,gBAAgB,EACU;IAC1B,qBACE,MAACf;QAAkBgB,SAAS;;0BAC1B,MAAChB;gBAAMiB,WAAU;gBAAMC,YAAW;gBAASC,cAAc;gBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;;kCACvG,KAACtB;wBAAWuB,MAAK;wBAAQC,SAAS,IAAMV,iBAAiBL;kCACtDE,4BAAc,KAACN,kCAAkB,KAACD;;kCAErC,MAACH;wBAAWwB,SAAQ;wBAAWC,WAAU;;4BAAK;4BACpCjB,QAAQ;;;kCAElB,KAACT;wBACCuB,MAAK;wBACL,2GAA2G;wBAC3GI,IAAI;4BAAEC,YAAY;4BAAQC,YAAY,GAAGjB,WAAW,YAAY,UAAU;wBAAC;wBAC3EY,SAAS,IAAMZ,YAAYA,SAASH;kCAEpC,cAAA,KAACN;;;;YAGJ,CAACQ,6BAAe,KAACmB;gBAAYtB,YAAYA;gBAAYuB,OAAOrB;gBAAOG,UAAU,CAACmB,OAASnB,SAASJ,OAAOuB;;;OAjB9FvB;AAoBhB,EAAE;AAWF;;;;;;CAMC,GACD,SAASqB,YAAYG,KAAuB;IAC1C,MAAM,EAAEF,KAAK,EAAElB,QAAQ,EAAEL,UAAU,EAAE,GAAG0B,QAAQ,GAAGD;IAEnD,MAAME,qBAAoD,CAACH;QACzDnB,SACEf,QAAQiC,OAAO,CAACK;YACdA,MAAMC,IAAI,GAAGL,KAAKM,SAAS,CAACC,IAAI;YAChCH,MAAMI,IAAI,CAACC,MAAM,CAACJ,IAAI,GAAGL,KAAKM,SAAS,CAACD,IAAI;YAC5CD,MAAMI,IAAI,CAACC,MAAM,CAACD,IAAI,GAAGR,KAAKQ,IAAI;QACpC;IAEJ;IAEA,qBACE,KAACtC;QAAK,GAAGgC,MAAM;kBACb,cAAA,KAAC5B;YACCoC,aAAalC;YACbmC,iBAAgB;YAChBZ,OAAO;gBACLO,WAAW;oBACTD,MAAMN,MAAMS,IAAI,CAACC,MAAM,CAACJ,IAAI;oBAC5BE,MAAMR,MAAMM,IAAI;gBAClB;gBACAG,MAAMT,MAAMS,IAAI,CAACC,MAAM,CAACD,IAAI;YAC9B;YACA3B,UAAUsB;;;AAIlB"}

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

@@ -0,0 +1,2 @@
+export * from './MultiQueryEditor';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/components/MultiQueryEditor/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 './MultiQueryEditor';
+
+//# sourceMappingURL=index.js.map

package/dist/components/{TraceQueryEditor → MultiQueryEditor}/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/TraceQueryEditor/index.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\nexport * from './TraceQueryEditor';\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/MultiQueryEditor/index.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\nexport * from './MultiQueryEditor';\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/OptionsEditorRadios/OptionsEditorRadios.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ReactElement, ReactNode } from 'react';
 export type OptionsEditorRadio = {
     label: string;
     /**
@@ -12,5 +12,5 @@ export type OptionsEditorRadiosProps = {
     onModeChange: (value: number) => void;
     isReadonly?: boolean;
 };
-export declare const OptionsEditorRadios: (props: OptionsEditorRadiosProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OptionsEditorRadios: (props: OptionsEditorRadiosProps) => ReactElement;
 //# sourceMappingURL=OptionsEditorRadios.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OptionsEditorRadios.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG5C,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,4CAoClE,CAAC"}
+{"version":3,"file":"OptionsEditorRadios.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG1D,MAAM,MAAM,kBAAkB,GAAG;IAC/B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,IAAI,EAAE,kBAAkB,EAAE,CAAC;IAC3B,UAAU,EAAE,MAAM,CAAC;IACnB,YAAY,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,mBAAmB,UAAW,wBAAwB,KAAG,YAoCrE,CAAC"}

package/dist/components/OptionsEditorRadios/OptionsEditorRadios.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.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 { FormControl, FormControlLabel, Radio, RadioGroup, RadioGroupProps, Box } from '@mui/material';\nimport { ReactNode, useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorRadio = {\n  label: string;\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: ReactNode;\n};\n\nexport type OptionsEditorRadiosProps = {\n  tabs: OptionsEditorRadio[];\n  defaultTab: number;\n  onModeChange: (value: number) => void;\n  isReadonly?: boolean;\n};\n\nexport const OptionsEditorRadios = (props: OptionsEditorRadiosProps) => {\n  const { tabs, defaultTab, onModeChange, isReadonly } = props;\n  const [activeTab, setActiveTab] = useState(defaultTab);\n\n  const handleChange: RadioGroupProps['onChange'] = (_, value) => {\n    const v = parseInt(value);\n    setActiveTab(v);\n    onModeChange(v);\n  };\n\n  return (\n    <>\n      <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n        <FormControl>\n          <RadioGroup\n            row\n            defaultValue={defaultTab}\n            value={activeTab}\n            onChange={handleChange}\n            aria-labelledby=\"Configuration radio\"\n          >\n            {tabs.map(({ label }, i) => {\n              return <FormControlLabel disabled={isReadonly} key={label} value={i} control={<Radio />} label={label} />;\n            })}\n          </RadioGroup>\n        </FormControl>\n      </Box>\n      {tabs.map(({ label, content }, i) => {\n        return (\n          <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n            {content}\n          </OptionsEditorTabPanel>\n        );\n      })}\n    </>\n  );\n};\n"],"names":["FormControl","FormControlLabel","Radio","RadioGroup","Box","useState","OptionsEditorTabPanel","OptionsEditorRadios","props","tabs","defaultTab","onModeChange","isReadonly","activeTab","setActiveTab","handleChange","_","value","v","parseInt","sx","borderBottom","borderColor","theme","palette","divider","row","defaultValue","onChange","aria-labelledby","map","label","i","disabled","control","content","index"],"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,WAAW,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,GAAG,QAAQ,gBAAgB;AACvG,SAAoBC,QAAQ,QAAQ,QAAQ;AAC5C,SAASC,qBAAqB,QAAQ,2BAA2B;AAiBjE,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGJ;IACvD,MAAM,CAACK,WAAWC,aAAa,GAAGT,SAASK;IAE3C,MAAMK,eAA4C,CAACC,GAAGC;QACpD,MAAMC,IAAIC,SAASF;QACnBH,aAAaI;QACbP,aAAaO;IACf;IAEA,qBACE;;0BACE,KAACd;gBAAIgB,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAACzB;8BACC,cAAA,KAACG;wBACCuB,GAAG;wBACHC,cAAcjB;wBACdO,OAAOJ;wBACPe,UAAUb;wBACVc,mBAAgB;kCAEfpB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;4BACpB,qBAAO,KAAC/B;gCAAiBgC,UAAUrB;gCAAwBK,OAAOe;gCAAGE,uBAAS,KAAChC;gCAAU6B,OAAOA;+BAA5CA;wBACtD;;;;YAILtB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAAC1B;oBAAkCW,OAAOJ;oBAAWuB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}
+{"version":3,"sources":["../../../src/components/OptionsEditorRadios/OptionsEditorRadios.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 { FormControl, FormControlLabel, Radio, RadioGroup, RadioGroupProps, Box } from '@mui/material';\nimport { ReactElement, ReactNode, useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorRadio = {\n  label: string;\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: ReactNode;\n};\n\nexport type OptionsEditorRadiosProps = {\n  tabs: OptionsEditorRadio[];\n  defaultTab: number;\n  onModeChange: (value: number) => void;\n  isReadonly?: boolean;\n};\n\nexport const OptionsEditorRadios = (props: OptionsEditorRadiosProps): ReactElement => {\n  const { tabs, defaultTab, onModeChange, isReadonly } = props;\n  const [activeTab, setActiveTab] = useState(defaultTab);\n\n  const handleChange: RadioGroupProps['onChange'] = (_, value) => {\n    const v = parseInt(value);\n    setActiveTab(v);\n    onModeChange(v);\n  };\n\n  return (\n    <>\n      <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n        <FormControl>\n          <RadioGroup\n            row\n            defaultValue={defaultTab}\n            value={activeTab}\n            onChange={handleChange}\n            aria-labelledby=\"Configuration radio\"\n          >\n            {tabs.map(({ label }, i) => {\n              return <FormControlLabel disabled={isReadonly} key={label} value={i} control={<Radio />} label={label} />;\n            })}\n          </RadioGroup>\n        </FormControl>\n      </Box>\n      {tabs.map(({ label, content }, i) => {\n        return (\n          <OptionsEditorTabPanel key={label} value={activeTab} index={i}>\n            {content}\n          </OptionsEditorTabPanel>\n        );\n      })}\n    </>\n  );\n};\n"],"names":["FormControl","FormControlLabel","Radio","RadioGroup","Box","useState","OptionsEditorTabPanel","OptionsEditorRadios","props","tabs","defaultTab","onModeChange","isReadonly","activeTab","setActiveTab","handleChange","_","value","v","parseInt","sx","borderBottom","borderColor","theme","palette","divider","row","defaultValue","onChange","aria-labelledby","map","label","i","disabled","control","content","index"],"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,WAAW,EAAEC,gBAAgB,EAAEC,KAAK,EAAEC,UAAU,EAAmBC,GAAG,QAAQ,gBAAgB;AACvG,SAAkCC,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,qBAAqB,QAAQ,2BAA2B;AAiBjE,OAAO,MAAMC,sBAAsB,CAACC;IAClC,MAAM,EAAEC,IAAI,EAAEC,UAAU,EAAEC,YAAY,EAAEC,UAAU,EAAE,GAAGJ;IACvD,MAAM,CAACK,WAAWC,aAAa,GAAGT,SAASK;IAE3C,MAAMK,eAA4C,CAACC,GAAGC;QACpD,MAAMC,IAAIC,SAASF;QACnBH,aAAaI;QACbP,aAAaO;IACf;IAEA,qBACE;;0BACE,KAACd;gBAAIgB,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAACzB;8BACC,cAAA,KAACG;wBACCuB,GAAG;wBACHC,cAAcjB;wBACdO,OAAOJ;wBACPe,UAAUb;wBACVc,mBAAgB;kCAEfpB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;4BACpB,qBAAO,KAAC/B;gCAAiBgC,UAAUrB;gCAAwBK,OAAOe;gCAAGE,uBAAS,KAAChC;gCAAU6B,OAAOA;+BAA5CA;wBACtD;;;;YAILtB,KAAKqB,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAAC1B;oBAAkCW,OAAOJ;oBAAWuB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.d.ts

@@ -1,9 +1,9 @@
-/// <reference types="react" />
+import { ReactElement } from 'react';
 interface OptionsEditorTabPanelProps {
     children: React.ReactNode;
     index: number;
     value: number;
 }
-export declare function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps): import("react/jsx-runtime").JSX.Element;
+export declare function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps): ReactElement;
 export {};
 //# sourceMappingURL=OptionsEditorTabPanel.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OptionsEditorTabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.tsx"],"names":[],"mappings":";AAeA,UAAU,0BAA0B;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,2CAgBtE"}
+{"version":3,"file":"OptionsEditorTabPanel.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,OAAO,CAAC;AAErC,UAAU,0BAA0B;IAClC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,0BAA0B,GAAG,YAAY,CAgBrF"}

package/dist/components/OptionsEditorTabPanel/OptionsEditorTabPanel.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.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';\n\ninterface OptionsEditorTabPanelProps {\n  children: React.ReactNode;\n  index: number;\n  value: number;\n}\n\nexport function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps) {\n  const { children, value, index, ...other } = props;\n\n  const isActive = value === index;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`options-editor-tabpanel-${index}`}\n      aria-labelledby={`options-editor-tab-${index}`}\n      {...other}\n    >\n      {isActive && <Box mt={2}>{children}</Box>}\n    </div>\n  );\n}\n"],"names":["Box","OptionsEditorTabPanel","props","children","value","index","other","isActive","div","role","hidden","id","aria-labelledby","mt"],"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;AAQpC,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,OAAO,GAAGJ;IAE7C,MAAMK,WAAWH,UAAUC;IAE3B,qBACE,KAACG;QACCC,MAAK;QACLC,QAAQ,CAACH;QACTI,IAAI,CAAC,wBAAwB,EAAEN,MAAM,CAAC;QACtCO,mBAAiB,CAAC,mBAAmB,EAAEP,MAAM,CAAC;QAC7C,GAAGC,KAAK;kBAERC,0BAAY,KAACP;YAAIa,IAAI;sBAAIV;;;AAGhC"}
+{"version":3,"sources":["../../../src/components/OptionsEditorTabPanel/OptionsEditorTabPanel.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';\n\ninterface OptionsEditorTabPanelProps {\n  children: React.ReactNode;\n  index: number;\n  value: number;\n}\n\nexport function OptionsEditorTabPanel(props: OptionsEditorTabPanelProps): ReactElement {\n  const { children, value, index, ...other } = props;\n\n  const isActive = value === index;\n\n  return (\n    <div\n      role=\"tabpanel\"\n      hidden={!isActive}\n      id={`options-editor-tabpanel-${index}`}\n      aria-labelledby={`options-editor-tab-${index}`}\n      {...other}\n    >\n      {isActive && <Box mt={2}>{children}</Box>}\n    </div>\n  );\n}\n"],"names":["Box","OptionsEditorTabPanel","props","children","value","index","other","isActive","div","role","hidden","id","aria-labelledby","mt"],"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;AASpC,OAAO,SAASC,sBAAsBC,KAAiC;IACrE,MAAM,EAAEC,QAAQ,EAAEC,KAAK,EAAEC,KAAK,EAAE,GAAGC,OAAO,GAAGJ;IAE7C,MAAMK,WAAWH,UAAUC;IAE3B,qBACE,KAACG;QACCC,MAAK;QACLC,QAAQ,CAACH;QACTI,IAAI,CAAC,wBAAwB,EAAEN,OAAO;QACtCO,mBAAiB,CAAC,mBAAmB,EAAEP,OAAO;QAC7C,GAAGC,KAAK;kBAERC,0BAAY,KAACP;YAAIa,IAAI;sBAAIV;;;AAGhC"}