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

package/dist/components/OptionsEditorTabs/OptionsEditorTabs.d.ts

@@ -1,13 +1,13 @@
-/// <reference types="react" />
+import { ReactElement, ReactNode } from 'react';
 export type OptionsEditorTab = {
     label: string;
     /**
      * Content rendered when the tab is active.
      */
-    content: React.ReactNode;
+    content: ReactNode;
 };
 export type OptionsEditorTabsProps = {
     tabs: OptionsEditorTab[];
 };
-export declare const OptionsEditorTabs: ({ tabs }: OptionsEditorTabsProps) => import("react/jsx-runtime").JSX.Element;
+export declare const OptionsEditorTabs: ({ tabs }: OptionsEditorTabsProps) => ReactElement;
 //# sourceMappingURL=OptionsEditorTabs.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OptionsEditorTabs.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.tsx"],"names":[],"mappings":";AAiBA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,gBAAgB,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,sBAAsB,4CAgCjE,CAAC"}
+{"version":3,"file":"OptionsEditorTabs.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAY,MAAM,OAAO,CAAC;AAG1D,MAAM,MAAM,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG;IACnC,IAAI,EAAE,gBAAgB,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,sBAAsB,KAAG,YAgCpE,CAAC"}

package/dist/components/OptionsEditorTabs/OptionsEditorTabs.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.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 { Tab, Tabs, TabsProps, Box } from '@mui/material';\nimport { useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorTab = {\n  label: string;\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: React.ReactNode;\n};\n\nexport type OptionsEditorTabsProps = {\n  tabs: OptionsEditorTab[];\n};\n\nexport const OptionsEditorTabs = ({ tabs }: OptionsEditorTabsProps) => {\n  const [activeTab, setActiveTab] = useState(0);\n\n  const handleChange: TabsProps['onChange'] = (_, newValue) => {\n    setActiveTab(newValue);\n  };\n\n  return (\n    <>\n      <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n        <Tabs value={activeTab} onChange={handleChange} aria-label=\"Panel configuration tabs\">\n          {tabs.map(({ label }, i) => {\n            return (\n              <Tab\n                key={label}\n                label={label}\n                id={`options-editor-tab-${i}`}\n                aria-controls={`options-editor-tabpanel-${i}`}\n              />\n            );\n          })}\n        </Tabs>\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":["Tab","Tabs","Box","useState","OptionsEditorTabPanel","OptionsEditorTabs","tabs","activeTab","setActiveTab","handleChange","_","newValue","sx","borderBottom","borderColor","theme","palette","divider","value","onChange","aria-label","map","label","i","id","aria-controls","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,GAAG,EAAEC,IAAI,EAAaC,GAAG,QAAQ,gBAAgB;AAC1D,SAASC,QAAQ,QAAQ,QAAQ;AACjC,SAASC,qBAAqB,QAAQ,2BAA2B;AAcjE,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,IAAI,EAA0B;IAChE,MAAM,CAACC,WAAWC,aAAa,GAAGL,SAAS;IAE3C,MAAMM,eAAsC,CAACC,GAAGC;QAC9CH,aAAaG;IACf;IAEA,qBACE;;0BACE,KAACT;gBAAIU,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAAChB;oBAAKiB,OAAOX;oBAAWY,UAAUV;oBAAcW,cAAW;8BACxDd,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;wBACpB,qBACE,KAACvB;4BAECsB,OAAOA;4BACPE,IAAI,CAAC,mBAAmB,EAAED,EAAE,CAAC;4BAC7BE,iBAAe,CAAC,wBAAwB,EAAEF,EAAE,CAAC;2BAHxCD;oBAMX;;;YAGHhB,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAACnB;oBAAkCc,OAAOX;oBAAWoB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}
+{"version":3,"sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.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 { Tab, Tabs, TabsProps, Box } from '@mui/material';\nimport { ReactElement, ReactNode, useState } from 'react';\nimport { OptionsEditorTabPanel } from '../OptionsEditorTabPanel';\n\nexport type OptionsEditorTab = {\n  label: string;\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: ReactNode;\n};\n\nexport type OptionsEditorTabsProps = {\n  tabs: OptionsEditorTab[];\n};\n\nexport const OptionsEditorTabs = ({ tabs }: OptionsEditorTabsProps): ReactElement => {\n  const [activeTab, setActiveTab] = useState(0);\n\n  const handleChange: TabsProps['onChange'] = (_, newValue) => {\n    setActiveTab(newValue);\n  };\n\n  return (\n    <>\n      <Box sx={{ borderBottom: 1, borderColor: (theme) => theme.palette.divider }}>\n        <Tabs value={activeTab} onChange={handleChange} aria-label=\"Panel configuration tabs\">\n          {tabs.map(({ label }, i) => {\n            return (\n              <Tab\n                key={label}\n                label={label}\n                id={`options-editor-tab-${i}`}\n                aria-controls={`options-editor-tabpanel-${i}`}\n              />\n            );\n          })}\n        </Tabs>\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":["Tab","Tabs","Box","useState","OptionsEditorTabPanel","OptionsEditorTabs","tabs","activeTab","setActiveTab","handleChange","_","newValue","sx","borderBottom","borderColor","theme","palette","divider","value","onChange","aria-label","map","label","i","id","aria-controls","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,GAAG,EAAEC,IAAI,EAAaC,GAAG,QAAQ,gBAAgB;AAC1D,SAAkCC,QAAQ,QAAQ,QAAQ;AAC1D,SAASC,qBAAqB,QAAQ,2BAA2B;AAcjE,OAAO,MAAMC,oBAAoB,CAAC,EAAEC,IAAI,EAA0B;IAChE,MAAM,CAACC,WAAWC,aAAa,GAAGL,SAAS;IAE3C,MAAMM,eAAsC,CAACC,GAAGC;QAC9CH,aAAaG;IACf;IAEA,qBACE;;0BACE,KAACT;gBAAIU,IAAI;oBAAEC,cAAc;oBAAGC,aAAa,CAACC,QAAUA,MAAMC,OAAO,CAACC,OAAO;gBAAC;0BACxE,cAAA,KAAChB;oBAAKiB,OAAOX;oBAAWY,UAAUV;oBAAcW,cAAW;8BACxDd,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAE,EAAEC;wBACpB,qBACE,KAACvB;4BAECsB,OAAOA;4BACPE,IAAI,CAAC,mBAAmB,EAAED,GAAG;4BAC7BE,iBAAe,CAAC,wBAAwB,EAAEF,GAAG;2BAHxCD;oBAMX;;;YAGHhB,KAAKe,GAAG,CAAC,CAAC,EAAEC,KAAK,EAAEI,OAAO,EAAE,EAAEH;gBAC7B,qBACE,KAACnB;oBAAkCc,OAAOX;oBAAWoB,OAAOJ;8BACzDG;mBADyBJ;YAIhC;;;AAGN,EAAE"}

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

@@ -1,9 +1,12 @@
-import { PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';
+import { PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/core';
+import { Control } from 'react-hook-form';
+import { ReactElement } from 'react';
 export interface PanelSpecEditorProps {
+    control: Control<PanelEditorValues>;
     panelDefinition: PanelDefinition;
     onQueriesChange: (queries: QueryDefinition[]) => void;
     onPluginSpecChange: (spec: UnknownSpec) => void;
     onJSONChange: (panelDefinitionStr: string) => void;
 }
-export declare function PanelSpecEditor(props: PanelSpecEditorProps): import("react/jsx-runtime").JSX.Element | null;
+export declare function PanelSpecEditor(props: PanelSpecEditorProps): ReactElement | null;
 //# sourceMappingURL=PanelSpecEditor.d.ts.map

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

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

package/dist/components/PanelSpecEditor/PanelSpecEditor.js

@@ -11,98 +11,90 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ErrorAlert, JSONEditor } from '@perses-dev/components';
-import { usePlugin } from '../../runtime';
+import { ErrorAlert, JSONEditor, LinksEditor } from '@perses-dev/components';
+import { Controller } from 'react-hook-form';
+import { QueryCountProvider, usePlugin } from '../../runtime';
 import { OptionsEditorTabs } from '../OptionsEditorTabs';
-import { TimeSeriesQueryEditor } from '../TimeSeriesQueryEditor';
-import { TraceQueryEditor } from '../TraceQueryEditor';
+import { MultiQueryEditor } from '../MultiQueryEditor';
 export function PanelSpecEditor(props) {
-    const { panelDefinition, onJSONChange, onQueriesChange, onPluginSpecChange } = 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) {
         throw new Error(`Missing implementation for panel plugin with kind '${kind}'`);
     }
-    const getQueryType = ()=>{
-        var _panelDefinition_spec, _queriesList_;
-        const queriesList = panelDefinition === null || panelDefinition === void 0 ? void 0 : (_panelDefinition_spec = panelDefinition.spec) === null || _panelDefinition_spec === void 0 ? void 0 : _panelDefinition_spec.queries;
-        if (queriesList === undefined) {
-            return '';
-        }
-        const queryType = (_queriesList_ = queriesList[0]) === null || _queriesList_ === void 0 ? void 0 : _queriesList_.kind;
-        return queryType;
-    };
-    // Get the corresponding queryEditor depending on the queryType
-    const getQueryEditorComponent = ()=>{
-        const queryType = getQueryType();
-        // default case handles cause where there is no queryType yet (e.g. UI > 'editing' mode > 'Add Panel')
-        switch(queryType){
-            case 'TimeSeriesQuery':
-                var _panelDefinition_spec_queries;
-                return /*#__PURE__*/ _jsx(TimeSeriesQueryEditor, {
-                    queries: (_panelDefinition_spec_queries = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries !== void 0 ? _panelDefinition_spec_queries : [],
-                    onChange: onQueriesChange
-                });
-            case 'TraceQuery':
-                var _panelDefinition_spec_queries1;
-                return /*#__PURE__*/ _jsx(TraceQueryEditor, {
-                    queries: (_panelDefinition_spec_queries1 = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries1 !== void 0 ? _panelDefinition_spec_queries1 : [],
-                    onChange: onQueriesChange
-                });
-            default:
-                // ScatterChart only handles trace queries for now
-                if (kind === 'ScatterChart') {
-                    var _panelDefinition_spec_queries2;
-                    return /*#__PURE__*/ _jsx(TraceQueryEditor, {
-                        queries: (_panelDefinition_spec_queries2 = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries2 !== void 0 ? _panelDefinition_spec_queries2 : [],
-                        onChange: onQueriesChange
-                    });
-                }
-                var _panelDefinition_spec_queries3;
-                return /*#__PURE__*/ _jsx(TimeSeriesQueryEditor, {
-                    queries: (_panelDefinition_spec_queries3 = panelDefinition.spec.queries) !== null && _panelDefinition_spec_queries3 !== void 0 ? _panelDefinition_spec_queries3 : [],
-                    onChange: onQueriesChange
-                });
-        }
-    };
     const { panelOptionsEditorComponents, hideQueryEditor } = plugin;
     let tabs = [];
     if (!hideQueryEditor) {
         tabs.push({
             label: 'Query',
-            content: getQueryEditorComponent()
+            content: /*#__PURE__*/ _jsx(Controller, {
+                control: control,
+                name: "panelDefinition.spec.queries",
+                render: ({ field })=>/*#__PURE__*/ _jsx(MultiQueryEditor, {
+                        queryTypes: plugin.supportedQueryTypes ?? [],
+                        queries: panelDefinition.spec.queries ?? [],
+                        onChange: (queries)=>{
+                            field.onChange(queries);
+                            onQueriesChange(queries);
+                        }
+                    })
+            })
         });
     }
     if (panelOptionsEditorComponents !== undefined) {
         tabs = tabs.concat(panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent })=>({
                 label,
-                content: /*#__PURE__*/ _jsx(OptionsEditorComponent, {
-                    value: panelDefinition.spec.plugin.spec,
-                    onChange: onPluginSpecChange
+                content: /*#__PURE__*/ _jsx(Controller, {
+                    control: control,
+                    name: "panelDefinition.spec.plugin.spec",
+                    render: ({ field })=>/*#__PURE__*/ _jsx(OptionsEditorComponent, {
+                            value: panelDefinition.spec.plugin.spec,
+                            onChange: (spec)=>{
+                                field.onChange(spec);
+                                onPluginSpecChange(spec);
+                            }
+                        })
                 })
             })));
     }
-    // always show json editor by default
+    // always show json editor and links editor by default
+    tabs.push({
+        label: 'Links',
+        content: /*#__PURE__*/ _jsx(LinksEditor, {
+            control: control
+        })
+    });
     tabs.push({
         label: 'JSON',
-        content: /*#__PURE__*/ _jsx(JSONEditor, {
-            maxHeight: "80vh",
-            value: panelDefinition,
-            onChange: onJSONChange
+        content: /*#__PURE__*/ _jsx(Controller, {
+            control: control,
+            name: "panelDefinition",
+            render: ({ field })=>/*#__PURE__*/ _jsx(JSONEditor, {
+                    maxHeight: "80vh",
+                    value: panelDefinition,
+                    onChange: (json)=>{
+                        field.onChange(JSON.parse(json));
+                        onJSONChange(json);
+                    }
+                })
         })
     });
-    return /*#__PURE__*/ _jsx(OptionsEditorTabs, {
-        tabs: tabs
-    }, tabs.length);
+    return /*#__PURE__*/ _jsx(QueryCountProvider, {
+        queryCount: (panelDefinition.spec.queries ?? []).length,
+        children: /*#__PURE__*/ _jsx(OptionsEditorTabs, {
+            tabs: tabs
+        }, tabs.length)
+    });
 }
 
 //# sourceMappingURL=PanelSpecEditor.js.map

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 } from '@perses-dev/components';\nimport { PanelDefinition, QueryDefinition, UnknownSpec } from '@perses-dev/core';\nimport { usePlugin } from '../../runtime';\nimport { PanelPlugin } from '../../model';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from '../OptionsEditorTabs';\nimport { TimeSeriesQueryEditor } from '../TimeSeriesQueryEditor';\nimport { TraceQueryEditor } from '../TraceQueryEditor';\n\nexport interface PanelSpecEditorProps {\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) {\n  const { 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 getQueryType = (): string => {\n    const queriesList = panelDefinition?.spec?.queries;\n    if (queriesList === undefined) {\n      return '';\n    }\n    const queryType: string = queriesList[0]?.kind;\n    return queryType;\n  };\n\n  // Get the corresponding queryEditor depending on the queryType\n  const getQueryEditorComponent = () => {\n    const queryType = getQueryType();\n    // default case handles cause where there is no queryType yet (e.g. UI > 'editing' mode > 'Add Panel')\n    switch (queryType) {\n      case 'TimeSeriesQuery':\n        return <TimeSeriesQueryEditor queries={panelDefinition.spec.queries ?? []} onChange={onQueriesChange} />;\n      case 'TraceQuery':\n        return <TraceQueryEditor queries={panelDefinition.spec.queries ?? []} onChange={onQueriesChange} />;\n      default:\n        // ScatterChart only handles trace queries for now\n        if (kind === 'ScatterChart') {\n          return <TraceQueryEditor queries={panelDefinition.spec.queries ?? []} onChange={onQueriesChange} />;\n        }\n        return <TimeSeriesQueryEditor queries={panelDefinition.spec.queries ?? []} onChange={onQueriesChange} />;\n    }\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: getQueryEditorComponent(),\n    });\n  }\n\n  if (panelOptionsEditorComponents !== undefined) {\n    tabs = tabs.concat(\n      panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n        label,\n        content: <OptionsEditorComponent value={panelDefinition.spec.plugin.spec} onChange={onPluginSpecChange} />,\n      }))\n    );\n  }\n\n  // always show json editor by default\n  tabs.push({\n    label: 'JSON',\n    content: <JSONEditor maxHeight=\"80vh\" value={panelDefinition} onChange={onJSONChange} />,\n  });\n\n  return <OptionsEditorTabs key={tabs.length} tabs={tabs} />;\n}\n"],"names":["ErrorAlert","JSONEditor","usePlugin","OptionsEditorTabs","TimeSeriesQueryEditor","TraceQueryEditor","PanelSpecEditor","props","panelDefinition","onJSONChange","onQueriesChange","onPluginSpecChange","kind","spec","plugin","data","isLoading","error","undefined","Error","getQueryType","queriesList","queries","queryType","getQueryEditorComponent","onChange","panelOptionsEditorComponents","hideQueryEditor","tabs","push","label","content","concat","map","OptionsEditorComponent","value","maxHeight","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,QAAQ,yBAAyB;AAEhE,SAASC,SAAS,QAAQ,gBAAgB;AAE1C,SAAiCC,iBAAiB,QAAQ,uBAAuB;AACjF,SAASC,qBAAqB,QAAQ,2BAA2B;AACjE,SAASC,gBAAgB,QAAQ,sBAAsB;AASvD,OAAO,SAASC,gBAAgBC,KAA2B;IACzD,MAAM,EAAEC,eAAe,EAAEC,YAAY,EAAEC,eAAe,EAAEC,kBAAkB,EAAE,GAAGJ;IAC/E,MAAM,EAAEK,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,KAACjB;YAAWiB,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,MAAMQ,eAAe;YACCZ,uBAIMa;QAJ1B,MAAMA,cAAcb,4BAAAA,uCAAAA,wBAAAA,gBAAiBK,IAAI,cAArBL,4CAAAA,sBAAuBc,OAAO;QAClD,IAAID,gBAAgBH,WAAW;YAC7B,OAAO;QACT;QACA,MAAMK,aAAoBF,gBAAAA,WAAW,CAAC,EAAE,cAAdA,oCAAAA,cAAgBT,IAAI;QAC9C,OAAOW;IACT;IAEA,+DAA+D;IAC/D,MAAMC,0BAA0B;QAC9B,MAAMD,YAAYH;QAClB,sGAAsG;QACtG,OAAQG;YACN,KAAK;oBACoCf;gBAAvC,qBAAO,KAACJ;oBAAsBkB,SAASd,CAAAA,gCAAAA,gBAAgBK,IAAI,CAACS,OAAO,cAA5Bd,2CAAAA,gCAAgC,EAAE;oBAAEiB,UAAUf;;YACvF,KAAK;oBAC+BF;gBAAlC,qBAAO,KAACH;oBAAiBiB,SAASd,CAAAA,iCAAAA,gBAAgBK,IAAI,CAACS,OAAO,cAA5Bd,4CAAAA,iCAAgC,EAAE;oBAAEiB,UAAUf;;YAClF;gBACE,kDAAkD;gBAClD,IAAIE,SAAS,gBAAgB;wBACOJ;oBAAlC,qBAAO,KAACH;wBAAiBiB,SAASd,CAAAA,iCAAAA,gBAAgBK,IAAI,CAACS,OAAO,cAA5Bd,4CAAAA,iCAAgC,EAAE;wBAAEiB,UAAUf;;gBAClF;oBACuCF;gBAAvC,qBAAO,KAACJ;oBAAsBkB,SAASd,CAAAA,iCAAAA,gBAAgBK,IAAI,CAACS,OAAO,cAA5Bd,4CAAAA,iCAAgC,EAAE;oBAAEiB,UAAUf;;QACzF;IACF;IAEA,MAAM,EAAEgB,4BAA4B,EAAEC,eAAe,EAAE,GAAGb;IAC1D,IAAIc,OAAuC,EAAE;IAE7C,IAAI,CAACD,iBAAiB;QACpBC,KAAKC,IAAI,CAAC;YACRC,OAAO;YACPC,SAASP;QACX;IACF;IAEA,IAAIE,iCAAiCR,WAAW;QAC9CU,OAAOA,KAAKI,MAAM,CAChBN,6BAA6BO,GAAG,CAAC,CAAC,EAAEH,KAAK,EAAEC,SAASG,sBAAsB,EAAE,GAAM,CAAA;gBAChFJ;gBACAC,uBAAS,KAACG;oBAAuBC,OAAO3B,gBAAgBK,IAAI,CAACC,MAAM,CAACD,IAAI;oBAAEY,UAAUd;;YACtF,CAAA;IAEJ;IAEA,qCAAqC;IACrCiB,KAAKC,IAAI,CAAC;QACRC,OAAO;QACPC,uBAAS,KAAC9B;YAAWmC,WAAU;YAAOD,OAAO3B;YAAiBiB,UAAUhB;;IAC1E;IAEA,qBAAO,KAACN;QAAoCyB,MAAMA;OAAnBA,KAAKS,MAAM;AAC5C"}
+{"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

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { PluginEditorProps } from './plugin-editor-api';
 /**
  * A combination `PluginKindSelect` and `PluginSpecEditor` component. This is meant for editing the `plugin` property
@@ -7,5 +8,5 @@ import { PluginEditorProps } from './plugin-editor-api';
  * previous plugin's spec state. If you just want this behavior, but in a different UI layout from this, try the
  * `usePluginEditor` hook that powers this component.
  */
-export declare function PluginEditor(props: PluginEditorProps): import("react/jsx-runtime").JSX.Element;
+export declare function PluginEditor(props: PluginEditorProps): ReactElement;
 //# sourceMappingURL=PluginEditor.d.ts.map

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":"AAgBA,OAAO,EAAE,iBAAiB,EAAmB,MAAM,qBAAqB,CAAC;AAEzE;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,2CA4BpD"}
+{"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';
@@ -24,35 +25,37 @@ import { usePluginEditor } from './plugin-editor-api';
  * `usePluginEditor` hook that powers this component.
  */ export function PluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const { value, pluginType, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
-    const { pendingKind, isLoading, error, onKindChange, onSpecChange } = usePluginEditor(props);
+    const { value, pluginTypes, pluginKindLabel, onChange: _, isReadonly, ...others } = props;
+    const { pendingSelection, isLoading, error, onSelectionChange, onSpecChange } = usePluginEditor(props);
     return /*#__PURE__*/ _jsxs(Box, {
         ...others,
         children: [
             /*#__PURE__*/ _jsx(PluginKindSelect, {
                 fullWidth: false,
                 sx: {
-                    mb: 1,
+                    mb: 2,
                     minWidth: 120
                 },
                 margin: "dense",
                 label: pluginKindLabel,
-                pluginType: pluginType,
+                pluginTypes: pluginTypes,
                 disabled: isLoading,
-                value: pendingKind !== '' ? pendingKind : value.kind,
+                value: pendingSelection ? pendingSelection : value.selection,
                 InputProps: {
                     readOnly: isReadonly
                 },
                 error: !!error,
-                helperText: error === null || error === void 0 ? void 0 : error.message,
-                onChange: onKindChange
+                helperText: error?.message,
+                onChange: onSelectionChange
             }),
-            /*#__PURE__*/ _jsx(PluginSpecEditor, {
-                pluginType: pluginType,
-                pluginKind: value.kind,
-                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 { 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) {\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  const { value, pluginType, pluginKindLabel, onChange: _, isReadonly, ...others } = props;\n  const { pendingKind, isLoading, error, onKindChange, onSpecChange } = usePluginEditor(props);\n  return (\n    <Box {...others}>\n      <PluginKindSelect\n        fullWidth={false}\n        sx={{ mb: 1, minWidth: 120 }}\n        margin=\"dense\"\n        label={pluginKindLabel}\n        pluginType={pluginType}\n        disabled={isLoading}\n        value={pendingKind !== '' ? pendingKind : value.kind}\n        InputProps={{ readOnly: isReadonly }}\n        error={!!error}\n        helperText={error?.message}\n        onChange={onKindChange}\n      />\n      <PluginSpecEditor\n        pluginType={pluginType}\n        pluginKind={value.kind}\n        value={value.spec}\n        onChange={onSpecChange}\n        isReadonly={isReadonly}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","PluginKindSelect","PluginSpecEditor","usePluginEditor","PluginEditor","props","value","pluginType","pluginKindLabel","onChange","_","isReadonly","others","pendingKind","isLoading","error","onKindChange","onSpecChange","fullWidth","sx","mb","minWidth","margin","label","disabled","kind","InputProps","readOnly","helperText","message","pluginKind","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,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,UAAU,EAAEC,eAAe,EAAEC,UAAUC,CAAC,EAAEC,UAAU,EAAE,GAAGC,QAAQ,GAAGP;IACnF,MAAM,EAAEQ,WAAW,EAAEC,SAAS,EAAEC,KAAK,EAAEC,YAAY,EAAEC,YAAY,EAAE,GAAGd,gBAAgBE;IACtF,qBACE,MAACL;QAAK,GAAGY,MAAM;;0BACb,KAACX;gBACCiB,WAAW;gBACXC,IAAI;oBAAEC,IAAI;oBAAGC,UAAU;gBAAI;gBAC3BC,QAAO;gBACPC,OAAOf;gBACPD,YAAYA;gBACZiB,UAAUV;gBACVR,OAAOO,gBAAgB,KAAKA,cAAcP,MAAMmB,IAAI;gBACpDC,YAAY;oBAAEC,UAAUhB;gBAAW;gBACnCI,OAAO,CAAC,CAACA;gBACTa,UAAU,EAAEb,kBAAAA,4BAAAA,MAAOc,OAAO;gBAC1BpB,UAAUO;;0BAEZ,KAACd;gBACCK,YAAYA;gBACZuB,YAAYxB,MAAMmB,IAAI;gBACtBnB,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.d.ts

@@ -1,19 +1,26 @@
-/// <reference types="react" />
 import { BoxProps } from '@mui/material';
-import { Definition, UnknownSpec } from '@perses-dev/core';
+import { UnknownSpec } from '@perses-dev/core';
 import { PluginType } from '../../model';
+export interface PluginEditorSelection {
+    type: PluginType;
+    kind: string;
+}
+export interface PluginEditorValue {
+    selection: PluginEditorSelection;
+    spec: UnknownSpec;
+}
 type OmittedMuiProps = 'children' | 'value' | 'onChange';
 export interface PluginEditorProps extends Omit<BoxProps, OmittedMuiProps> {
-    pluginType: PluginType;
+    pluginTypes: PluginType[];
     pluginKindLabel: string;
-    value: Definition<UnknownSpec>;
+    value: PluginEditorValue;
     isReadonly?: boolean;
-    onChange: (next: Definition<UnknownSpec>) => void;
+    onChange: (next: PluginEditorValue) => void;
 }
 /**
  * Props needed by the usePluginEditor hook.
  */
-export type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginType' | 'value' | 'onChange'> & {
+export type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginTypes' | 'value' | 'onChange'> & {
     onHideQueryEditorChange?: (isHidden: boolean) => void;
 };
 /**
@@ -23,10 +30,10 @@ export type UsePluginEditorProps = Pick<PluginEditorProps, 'pluginType' | 'value
  * kind back.
  */
 export declare function usePluginEditor(props: UsePluginEditorProps): {
-    pendingKind: string;
+    pendingSelection?: PluginEditorSelection;
     isLoading: boolean;
     error: Error | null;
-    onKindChange: import("react").ChangeEventHandler<HTMLTextAreaElement | HTMLInputElement>;
+    onSelectionChange: (s: PluginEditorSelection) => void;
     onSpecChange: (next: UnknownSpec) => void;
     rememberCurrentSpecState: () => void;
 };

package/dist/components/PluginEditor/plugin-editor-api.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,UAAU,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGrE,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAOtD,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;CACnD;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,YAAY,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IAChG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB;;;;;;;EAqG1D"}
+{"version":3,"file":"plugin-editor-api.d.ts","sourceRoot":"","sources":["../../../src/components/PluginEditor/plugin-editor-api.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACzC,OAAO,EAAE,WAAW,EAAY,MAAM,kBAAkB,CAAC;AAGzD,OAAO,EAAe,UAAU,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,WAAW,qBAAqB;IACpC,IAAI,EAAE,UAAU,CAAC;IACjB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,iBAAiB;IAChC,SAAS,EAAE,qBAAqB,CAAC;IACjC,IAAI,EAAE,WAAW,CAAC;CACnB;AAID,KAAK,eAAe,GAAG,UAAU,GAAG,OAAO,GAAG,UAAU,CAAC;AAEzD,MAAM,WAAW,iBAAkB,SAAQ,IAAI,CAAC,QAAQ,EAAE,eAAe,CAAC;IACxE,WAAW,EAAE,UAAU,EAAE,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,KAAK,EAAE,iBAAiB,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAC7C;AAKD;;GAEG;AACH,MAAM,MAAM,oBAAoB,GAAG,IAAI,CAAC,iBAAiB,EAAE,aAAa,GAAG,OAAO,GAAG,UAAU,CAAC,GAAG;IACjG,uBAAuB,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC;CACvD,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG;IAC5D,gBAAgB,CAAC,EAAE,qBAAqB,CAAC;IACzC,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IACpB,iBAAiB,EAAE,CAAC,CAAC,EAAE,qBAAqB,KAAK,IAAI,CAAC;IACtD,YAAY,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAC1C,wBAAwB,EAAE,MAAM,IAAI,CAAC;CACtC,CAyHA"}

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

@@ -21,84 +21,95 @@ import { usePlugin, usePluginRegistry } from '../../runtime';
  * kind back.
  */ export function usePluginEditor(props) {
     // eslint-disable-next-line @typescript-eslint/no-empty-function
-    const { pluginType, value, onHideQueryEditorChange = ()=>{} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function
-    // Keep a stable reference so we don't run the effect below when we don't need to
+    const { pluginTypes, value, onHideQueryEditorChange = ()=>{} } = props; // setting onHideQueryEditorChange to empty function here because useEvent requires a function
+    // Keep a stable reference, so we don't run the effect below when we don't need to
     const onChange = useEvent(props.onChange);
     const onHideQuery = useEvent(onHideQueryEditorChange);
     // The previous spec state for PluginType and kind and a helper function for remembering current values
     const prevSpecState = useRef({
-        [pluginType]: {
-            [value.kind]: value.spec
+        [value.selection.type]: {
+            [value.selection.kind]: value.spec
         }
     });
     const rememberCurrentSpecState = useEvent(()=>{
-        let byPluginType = prevSpecState.current[pluginType];
+        let byPluginType = prevSpecState.current[value.selection.type];
         if (byPluginType === undefined) {
             byPluginType = {};
-            prevSpecState.current[pluginType] = byPluginType;
+            prevSpecState.current[value.selection.type] = byPluginType;
         }
-        byPluginType[value.kind] = value.spec;
+        byPluginType[value.selection.kind] = value.spec;
     });
     // The previous hide query state for each panel kind
     const hideQueryState = useRef({
-        [value.kind]: false
+        [value.selection.kind]: false
     });
     const { defaultPluginKinds } = usePluginRegistry();
-    const defaultPluginKind = defaultPluginKinds === null || defaultPluginKinds === void 0 ? void 0 : defaultPluginKinds[pluginType];
-    const initPendingKind = !value.kind && defaultPluginKind ? defaultPluginKind : '';
+    const defaultPluginType = pluginTypes[0];
+    const defaultPluginKind = defaultPluginType ? defaultPluginKinds?.[defaultPluginType] : undefined;
+    const defaultPluginSelection = defaultPluginType && defaultPluginKind ? {
+        type: defaultPluginType,
+        kind: defaultPluginKind
+    } : undefined;
+    const initPendingSelection = !value.selection && defaultPluginSelection ? defaultPluginSelection : undefined;
     // When kind changes and we haven't loaded that plugin before, we will need to enter a "pending" state so that we
     // can generate proper initial spec values that match the new plugin kind
-    const [pendingKind, setPendingKind] = useState(initPendingKind);
-    const { data: plugin, isFetching, error } = usePlugin(pluginType, pendingKind);
+    const [pendingSelection, setPendingSelection] = useState(initPendingSelection);
+    // Take a default kind in case user write explicitly an empty kind in the initial value
+    useEffect(()=>{
+        if (value.selection.kind === '') {
+            value.selection.kind = defaultPluginKind || '';
+        }
+    }, [
+        value.selection,
+        defaultPluginKind
+    ]);
+    const { data: plugin, isFetching, error } = usePlugin(pendingSelection?.type, pendingSelection?.kind || '');
     useEffect(()=>{
         // Nothing to do if no new plugin kind is pending
-        if (pendingKind === '') return;
+        if (!pendingSelection) return;
         // Can't get spec value until we have a plugin
         if (plugin === undefined) return;
         // Fire an onChange to change to the pending kind with initial values from the plugin
         rememberCurrentSpecState();
         onChange({
-            kind: pendingKind,
-            spec: plugin.createInitialOptions()
+            selection: pendingSelection,
+            spec: plugin.createInitialOptions ? plugin.createInitialOptions() : {}
         });
-        if (pluginType === 'Panel') {
+        if (pendingSelection.type === 'Panel') {
             const panelPlugin = plugin;
-            hideQueryState.current[pendingKind] = !!panelPlugin.hideQueryEditor;
-            if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.kind]) {
+            hideQueryState.current[pendingSelection.kind] = !!panelPlugin.hideQueryEditor;
+            if (!!panelPlugin.hideQueryEditor !== hideQueryState.current[value.selection.kind]) {
                 onHideQuery(!!panelPlugin.hideQueryEditor);
             }
         }
-        setPendingKind('');
+        setPendingSelection(undefined);
     }, [
-        pendingKind,
+        pendingSelection,
         plugin,
         rememberCurrentSpecState,
         onChange,
         onHideQuery,
         hideQueryState,
-        pluginType,
-        value.kind
+        value.selection
     ]);
     /**
    * 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 onKindChange = (e)=>{
-        var _prevSpecState_current_pluginType;
-        const nextKind = e.target.value;
+   */ const onSelectionChange = (nextSelection)=>{
         // If we already have state for this plugin type/kind from a previous selection, just use it
-        const previousState = (_prevSpecState_current_pluginType = prevSpecState.current[pluginType]) === null || _prevSpecState_current_pluginType === void 0 ? void 0 : _prevSpecState_current_pluginType[nextKind];
+        const previousState = prevSpecState.current[nextSelection.type]?.[nextSelection.kind];
         if (previousState !== undefined) {
             rememberCurrentSpecState();
             onChange({
-                kind: nextKind,
+                selection: nextSelection,
                 spec: previousState
             });
         } else {
             // Otherwise, kick off the async loading process
-            setPendingKind(nextKind);
+            setPendingSelection(nextSelection);
         }
-        if (pluginType === 'Panel' && hideQueryState.current[nextKind] !== undefined && hideQueryState.current[value.kind] !== hideQueryState.current[nextKind]) {
-            onHideQuery(!!hideQueryState.current[nextKind]);
+        if (nextSelection.type === 'Panel' && hideQueryState.current[nextSelection.kind] !== undefined && hideQueryState.current[value.selection.kind] !== hideQueryState.current[nextSelection.kind]) {
+            onHideQuery(!!hideQueryState.current[nextSelection.kind]);
         }
     };
     /**
@@ -109,10 +120,10 @@ import { usePlugin, usePluginRegistry } from '../../runtime';
         }));
     };
     return {
-        pendingKind,
+        pendingSelection,
         isLoading: isFetching,
         error,
-        onKindChange,
+        onSelectionChange,
         onSpecChange,
         rememberCurrentSpecState
     };