@perses-dev/plugin-system 0.22.0 → 0.23.1

package/dist/cjs/components/OptionsEditorTabs/OptionsEditorTabs.js

@@ -22,54 +22,11 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _react = require("react");
 const _tabPanel = require("./TabPanel");
-// Configuration of the order and labeling for tabs across plugins to enforce a
-// consistent UX.
-const TAB_CONFIG = [
-    {
-        id: 'query',
-        label: 'Query'
-    },
-    {
-        id: 'settings',
-        label: 'Settings'
-    },
-    // Custom tabs go between the visual common tabs and the raw JSON editor.
-    'other',
-    {
-        id: 'json',
-        label: 'JSON'
-    }
-];
 const OptionsEditorTabs = ({ tabs  })=>{
     const [activeTab, setActiveTab] = (0, _react.useState)(0);
     const handleChange = (_, newValue)=>{
         setActiveTab(newValue);
     };
-    // Normalize the common tabs that are managed via constants in this file
-    // and custom tabs that bring their own config into a consistent shape for
-    // rendering.
-    const normalizedTabs = TAB_CONFIG.reduce((combinedTabs, tabConfig)=>{
-        // Custom tabs
-        if (tabConfig === 'other') {
-            const otherTabs = (tabs === null || tabs === void 0 ? void 0 : tabs.other) || [];
-            return [
-                ...combinedTabs,
-                ...otherTabs
-            ];
-        }
-        // Common tabs
-        const commonTab = tabs[tabConfig.id];
-        if (commonTab) {
-            return [
-                ...combinedTabs,
-                {
-                    ...tabConfig,
-                    ...commonTab
-                }
-            ];
-        }
-        return combinedTabs;
-    }, []);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
@@ -81,21 +38,21 @@ const OptionsEditorTabs = ({ tabs  })=>{
                     value: activeTab,
                     onChange: handleChange,
                     "aria-label": "Panel configuration tabs",
-                    children: normalizedTabs.map(({ id , label  }, i)=>{
+                    children: tabs.map(({ label  }, i)=>{
                         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Tab, {
                             label: label,
                             id: `options-editor-tab-${i}`,
                             "aria-controls": `options-editor-tabpanel-${i}`
-                        }, id);
+                        }, label);
                     })
                 })
             }),
-            normalizedTabs.map(({ id , content  }, i)=>{
+            tabs.map(({ label , content  }, i)=>{
                 return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tabPanel.TabPanel, {
                     value: activeTab,
                     index: i,
                     children: content
-                }, id);
+                }, label);
             })
         ]
     });

package/dist/cjs/components/OptionsEditorTabs/OptionsEditorTabs.test.js

@@ -24,46 +24,32 @@ function _interopRequireDefault(obj) {
     };
 }
 describe('OptionsEditorTabs', ()=>{
+    const mockTabs = [
+        {
+            label: 'Query',
+            content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                children: "Edit query configuration"
+            })
+        },
+        {
+            label: 'Settings',
+            content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                children: "Edit settings configuration"
+            })
+        },
+        {
+            label: 'JSON',
+            content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                children: "JSON editor"
+            })
+        }
+    ];
     const renderTabs = (otherTabs)=>{
+        const tabs = otherTabs !== null && otherTabs !== void 0 ? otherTabs : mockTabs;
         (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorTabs.OptionsEditorTabs, {
-            tabs: {
-                query: {
-                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                        children: "Edit query configuration"
-                    })
-                },
-                settings: {
-                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                        children: "Edit settings configuration"
-                    })
-                },
-                json: {
-                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                        children: "JSON editor"
-                    })
-                },
-                other: otherTabs
-            }
+            tabs: tabs
         }));
     };
-    const renderCustomTabs = ()=>{
-        renderTabs([
-            {
-                id: 'tableCols',
-                label: 'Table columns',
-                content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                    children: "custom table column"
-                })
-            },
-            {
-                id: 'tableOpts',
-                label: 'Table options',
-                content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                    children: "custom table options"
-                })
-            }
-        ]);
-    };
     it('renders all specified tabs in a tab list', ()=>{
         renderTabs();
         const tabList = _react.screen.getByRole('tablist');
@@ -109,59 +95,13 @@ describe('OptionsEditorTabs', ()=>{
         const activeTabPanel = _react.screen.getByRole('tabpanel');
         expect(activeTabPanel).toHaveTextContent('settings configuration');
     });
-    it('renders custom tabs between visual tabs and json editor', ()=>{
-        renderCustomTabs();
+    it('renders tabs in correct order', ()=>{
+        renderTabs();
         const tabList = _react.screen.getByRole('tablist');
         const tabs = (0, _react.getAllByRole)(tabList, 'tab');
-        expect(tabs).toHaveLength(5);
+        expect(tabs).toHaveLength(3);
         expect(tabs[0]).toHaveTextContent('Query');
         expect(tabs[1]).toHaveTextContent('Settings');
-        expect(tabs[2]).toHaveTextContent('Table column');
-        expect(tabs[3]).toHaveTextContent('Table options');
-        expect(tabs[4]).toHaveTextContent('JSON');
-    });
-    it('shows the correct content when selecting a custom tab', ()=>{
-        renderCustomTabs();
-        const tableColTab = _react.screen.getByRole('tab', {
-            name: 'Table columns'
-        });
-        _userEvent.default.click(tableColTab);
-        const activeTab = _react.screen.getByRole('tab', {
-            selected: true
-        });
-        expect(activeTab).toBe(tableColTab);
-        const activeTabPanel = _react.screen.getByRole('tabpanel');
-        expect(activeTabPanel).toHaveTextContent('custom table column');
-    });
-    it('only renders common tabs that are specified', ()=>{
-        (0, _react.render)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorTabs.OptionsEditorTabs, {
-            tabs: {
-                settings: {
-                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                        children: "settings are alone"
-                    })
-                },
-                json: {
-                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                        children: "JSON is at the end"
-                    })
-                },
-                other: [
-                    {
-                        id: 'custom',
-                        label: 'Another tab',
-                        content: /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-                            children: "another tab content"
-                        })
-                    }
-                ]
-            }
-        }));
-        const tabList = _react.screen.getByRole('tablist');
-        const tabs = (0, _react.getAllByRole)(tabList, 'tab');
-        expect(tabs).toHaveLength(3);
-        expect(tabs[0]).toHaveTextContent('Settings');
-        expect(tabs[1]).toHaveTextContent('Another tab');
         expect(tabs[2]).toHaveTextContent('JSON');
     });
 });

package/dist/cjs/components/PluginSpecEditor.js

@@ -21,6 +21,7 @@ Object.defineProperty(exports, "PluginSpecEditor", {
 const _jsxRuntime = require("react/jsx-runtime");
 const _components = require("@perses-dev/components");
 const _runtime = require("../runtime");
+const _optionsEditorTabs = require("./OptionsEditorTabs");
 function PluginSpecEditor(props) {
     const { pluginType , pluginKind , ...others } = props;
     const { data: plugin , isLoading , error  } = (0, _runtime.usePlugin)(pluginType, pluginKind);
@@ -34,10 +35,43 @@ function PluginSpecEditor(props) {
         return null;
     }
     if (plugin === undefined) {
-        throw new Error(`Missing OptionsEditorComponent for ${pluginType} plugin with kind '${pluginKind}'`);
+        throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);
+    }
+    if (pluginType === 'Panel') {
+        const { PanelQueryEditorComponent , panelOptionsEditorComponents  } = plugin;
+        let tabs = [];
+        if (PanelQueryEditorComponent !== undefined) {
+            tabs.push({
+                label: 'Query',
+                content: /*#__PURE__*/ (0, _jsxRuntime.jsx)(PanelQueryEditorComponent, {
+                    ...others
+                })
+            });
+        }
+        if (panelOptionsEditorComponents !== undefined) {
+            tabs = tabs.concat(panelOptionsEditorComponents.map(({ label , content: OptionsEditorComponent  })=>({
+                    label,
+                    content: /*#__PURE__*/ (0, _jsxRuntime.jsx)(OptionsEditorComponent, {
+                        ...others
+                    })
+                })));
+        }
+        // always show json editor by default
+        tabs.push({
+            label: 'JSON',
+            content: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.JSONEditor, {
+                ...others
+            })
+        });
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorTabs.OptionsEditorTabs, {
+            tabs: tabs
+        });
     }
     const { OptionsEditorComponent  } = plugin;
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(OptionsEditorComponent, {
-        ...others
-    });
+    if (OptionsEditorComponent !== undefined) {
+        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(OptionsEditorComponent, {
+            ...others
+        });
+    }
+    return null;
 }

package/dist/cjs/components/PluginSpecEditor.test.js

@@ -30,15 +30,37 @@ describe('PluginSpecEditor', ()=>{
             ...props
         }));
     };
-    it('shows the options editor component for a plugin', async ()=>{
-        renderComponent({
-            pluginType: 'Panel',
-            pluginKind: 'BertPanel1',
-            value: {},
-            onChange: jest.fn()
+    describe('Panel plugin', ()=>{
+        it('should show query and json editors', async ()=>{
+            renderComponent({
+                pluginType: 'Panel',
+                pluginKind: 'BertPanel1',
+                value: {},
+                onChange: jest.fn()
+            });
+            const queryTab = await _react.screen.findByLabelText('Query');
+            expect(queryTab).toBeInTheDocument();
+            const editor = await _react.screen.findByLabelText('BertPanel1 editor');
+            expect(editor).toBeInTheDocument();
+            const jsonEditor = await _react.screen.findByLabelText('JSON');
+            expect(jsonEditor).toBeInTheDocument();
+        });
+        it('should display other options editor components', async ()=>{
+            renderComponent({
+                pluginType: 'Panel',
+                pluginKind: 'BertPanel2',
+                value: {},
+                onChange: jest.fn()
+            });
+            const settingsTab = await _react.screen.findByLabelText('Settings');
+            expect(settingsTab).toBeInTheDocument();
+            const editor = await _react.screen.findByLabelText('BertPanel2 editor');
+            expect(editor).toBeInTheDocument();
+            const customTab = await _react.screen.findByLabelText('Custom Tab');
+            expect(customTab).toBeInTheDocument();
+            const jsonEditor = await _react.screen.findByLabelText('JSON');
+            expect(jsonEditor).toBeInTheDocument();
         });
-        const editor = await _react.screen.findByLabelText('BertPanel1 editor');
-        expect(editor).toBeInTheDocument();
     });
     it('propagates value changes', async ()=>{
         const onChange = jest.fn();

package/dist/cjs/model/panels.js

@@ -14,3 +14,9 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}

package/dist/cjs/test/test-plugins/bert/index.js

@@ -27,7 +27,7 @@ _export(exports, {
 const _jsxRuntime = require("react/jsx-runtime");
 const BertPanel1 = {
     PanelComponent: ()=>null,
-    OptionsEditorComponent: function BertPanel1Editor({ value , onChange  }) {
+    PanelQueryEditorComponent: function BertPanel1Editor({ value , onChange  }) {
         return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)("label", {
@@ -52,25 +52,38 @@ const BertPanel1 = {
 };
 const BertPanel2 = {
     PanelComponent: ()=>null,
-    OptionsEditorComponent: function BertPanel2Editor({ value , onChange  }) {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)("label", {
-                    htmlFor: "editor-input",
-                    children: "BertPanel2 editor"
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)("input", {
-                    type: "text",
-                    id: "editor-input",
-                    value: value.option2,
-                    onChange: (e)=>onChange({
-                            ...value,
-                            option2: e.target.value
+    panelOptionsEditorComponents: [
+        {
+            label: 'Settings',
+            content: function BertPanel2Editor({ value , onChange  }) {
+                return /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)("label", {
+                            htmlFor: "editor-input",
+                            children: "BertPanel2 editor"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)("input", {
+                            type: "text",
+                            id: "editor-input",
+                            value: value.option2,
+                            onChange: (e)=>onChange({
+                                    ...value,
+                                    option2: e.target.value
+                                })
                         })
-                })
-            ]
-        });
-    },
+                    ]
+                });
+            }
+        },
+        {
+            label: 'Custom Tab',
+            content: function Editor() {
+                return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+                    children: "custom content"
+                });
+            }
+        }
+    ],
     createInitialOptions: ()=>({
             option2: ''
         })

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

@@ -1,34 +1,13 @@
 /// <reference types="react" />
-import { TabProps } from '@mui/material';
-interface BaseTabConfig {
+export declare type OptionsEditorTab = {
+    label: string;
     /**
      * Content rendered when the tab is active.
      */
     content: React.ReactNode;
-}
-interface OtherTabConfig extends BaseTabConfig {
-    id: string;
-    label: TabProps['label'];
-}
-declare type CommonTabId = 'query' | 'settings' | 'json';
-/**
- * Common tabs that are frequently used in the options editor across multiple
- * plugins. The label and display order of these tabs is not configurable to
- * avoid user experience inconsistencies across plugins.
- */
-declare type CommonTabs = {
-    [property in CommonTabId]?: BaseTabConfig;
-};
-/**
- * Custom tabs specified for a given plugin. They are displayed after common
- * tabs.
- */
-declare type OtherTabs = {
-    other?: OtherTabConfig[];
 };
 export declare type OptionsEditorTabsProps = {
-    tabs: CommonTabs & OtherTabs;
+    tabs: OptionsEditorTab[];
 };
 export declare const OptionsEditorTabs: ({ tabs }: OptionsEditorTabsProps) => JSX.Element;
-export {};
 //# 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":";AAaA,OAAO,EAAO,QAAQ,EAAwB,MAAM,eAAe,CAAC;AAIpE,UAAU,aAAa;IACrB;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B;AAED,UAAU,cAAe,SAAQ,aAAa;IAC5C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAC;CAC1B;AAED,aAAK,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,MAAM,CAAC;AAEjD;;;;GAIG;AACH,aAAK,UAAU,GAAG;KAAG,QAAQ,IAAI,WAAW,CAAC,CAAC,EAAE,aAAa;CAAE,CAAC;AAEhE;;;GAGG;AACH,aAAK,SAAS,GAAG;IACf,KAAK,CAAC,EAAE,cAAc,EAAE,CAAC;CAC1B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,IAAI,EAAE,UAAU,GAAG,SAAS,CAAC;CAC9B,CAAC;AAcF,eAAO,MAAM,iBAAiB,aAAc,sBAAsB,gBAyDjE,CAAC"}
+{"version":3,"file":"OptionsEditorTabs.d.ts","sourceRoot":"","sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.tsx"],"names":[],"mappings":";AAiBA,oBAAY,gBAAgB,GAAG;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,CAAC;AAEF,oBAAY,sBAAsB,GAAG;IACnC,IAAI,EAAE,gBAAgB,EAAE,CAAC;CAC1B,CAAC;AAEF,eAAO,MAAM,iBAAiB,aAAc,sBAAsB,gBAgCjE,CAAC"}

package/dist/components/OptionsEditorTabs/OptionsEditorTabs.js

@@ -14,54 +14,11 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { Tab, Tabs, Box } from '@mui/material';
 import { useState } from 'react';
 import { TabPanel } from './TabPanel';
-// Configuration of the order and labeling for tabs across plugins to enforce a
-// consistent UX.
-const TAB_CONFIG = [
-    {
-        id: 'query',
-        label: 'Query'
-    },
-    {
-        id: 'settings',
-        label: 'Settings'
-    },
-    // Custom tabs go between the visual common tabs and the raw JSON editor.
-    'other',
-    {
-        id: 'json',
-        label: 'JSON'
-    }
-];
 export const OptionsEditorTabs = ({ tabs  })=>{
     const [activeTab, setActiveTab] = useState(0);
     const handleChange = (_, newValue)=>{
         setActiveTab(newValue);
     };
-    // Normalize the common tabs that are managed via constants in this file
-    // and custom tabs that bring their own config into a consistent shape for
-    // rendering.
-    const normalizedTabs = TAB_CONFIG.reduce((combinedTabs, tabConfig)=>{
-        // Custom tabs
-        if (tabConfig === 'other') {
-            const otherTabs = (tabs === null || tabs === void 0 ? void 0 : tabs.other) || [];
-            return [
-                ...combinedTabs,
-                ...otherTabs
-            ];
-        }
-        // Common tabs
-        const commonTab = tabs[tabConfig.id];
-        if (commonTab) {
-            return [
-                ...combinedTabs,
-                {
-                    ...tabConfig,
-                    ...commonTab
-                }
-            ];
-        }
-        return combinedTabs;
-    }, []);
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             /*#__PURE__*/ _jsx(Box, {
@@ -73,21 +30,21 @@ export const OptionsEditorTabs = ({ tabs  })=>{
                     value: activeTab,
                     onChange: handleChange,
                     "aria-label": "Panel configuration tabs",
-                    children: normalizedTabs.map(({ id , label  }, i)=>{
+                    children: tabs.map(({ label  }, i)=>{
                         return /*#__PURE__*/ _jsx(Tab, {
                             label: label,
                             id: `options-editor-tab-${i}`,
                             "aria-controls": `options-editor-tabpanel-${i}`
-                        }, id);
+                        }, label);
                     })
                 })
             }),
-            normalizedTabs.map(({ id , content  }, i)=>{
+            tabs.map(({ label , content  }, i)=>{
                 return /*#__PURE__*/ _jsx(TabPanel, {
                     value: activeTab,
                     index: i,
                     children: content
-                }, id);
+                }, label);
             })
         ]
     });

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, TabProps, Tabs, TabsProps, Box } from '@mui/material';\nimport { useState } from 'react';\nimport { TabPanel } from './TabPanel';\n\ninterface BaseTabConfig {\n  /**\n   * Content rendered when the tab is active.\n   */\n  content: React.ReactNode;\n}\n\ninterface OtherTabConfig extends BaseTabConfig {\n  id: string;\n  label: TabProps['label'];\n}\n\ntype CommonTabId = 'query' | 'settings' | 'json';\n\n/**\n * Common tabs that are frequently used in the options editor across multiple\n * plugins. The label and display order of these tabs is not configurable to\n * avoid user experience inconsistencies across plugins.\n */\ntype CommonTabs = { [property in CommonTabId]?: BaseTabConfig };\n\n/**\n * Custom tabs specified for a given plugin. They are displayed after common\n * tabs.\n */\ntype OtherTabs = {\n  other?: OtherTabConfig[];\n};\n\nexport type OptionsEditorTabsProps = {\n  tabs: CommonTabs & OtherTabs;\n};\n\n// Configuration of the order and labeling for tabs across plugins to enforce a\n// consistent UX.\nconst TAB_CONFIG = [\n  { id: 'query', label: 'Query' },\n  { id: 'settings', label: 'Settings' },\n\n  // Custom tabs go between the visual common tabs and the raw JSON editor.\n  'other',\n\n  { id: 'json', label: 'JSON' },\n] as const;\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  // Normalize the common tabs that are managed via constants in this file\n  // and custom tabs that bring their own config into a consistent shape for\n  // rendering.\n  const normalizedTabs = TAB_CONFIG.reduce((combinedTabs, tabConfig) => {\n    // Custom tabs\n    if (tabConfig === 'other') {\n      const otherTabs = tabs?.other || [];\n      return [...combinedTabs, ...otherTabs];\n    }\n\n    // Common tabs\n    const commonTab = tabs[tabConfig.id];\n    if (commonTab) {\n      return [\n        ...combinedTabs,\n        {\n          ...tabConfig,\n          ...commonTab,\n        },\n      ];\n    }\n\n    return combinedTabs;\n  }, [] as OtherTabConfig[]);\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          {normalizedTabs.map(({ id, label }, i) => {\n            return (\n              <Tab\n                key={id}\n                label={label}\n                id={`options-editor-tab-${i}`}\n                aria-controls={`options-editor-tabpanel-${i}`}\n              />\n            );\n          })}\n        </Tabs>\n      </Box>\n      {normalizedTabs.map(({ id, content }, i) => {\n        return (\n          <TabPanel key={id} value={activeTab} index={i}>\n            {content}\n          </TabPanel>\n        );\n      })}\n    </>\n  );\n};\n"],"names":["Tab","Tabs","Box","useState","TabPanel","TAB_CONFIG","id","label","OptionsEditorTabs","tabs","activeTab","setActiveTab","handleChange","_","newValue","normalizedTabs","reduce","combinedTabs","tabConfig","otherTabs","other","commonTab","sx","borderBottom","borderColor","theme","palette","divider","value","onChange","aria-label","map","i","aria-controls","content","index"],"mappings":"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"}
+{"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 { TabPanel } from './TabPanel';\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          <TabPanel key={label} value={activeTab} index={i}>\n            {content}\n          </TabPanel>\n        );\n      })}\n    </>\n  );\n};\n"],"names":["Tab","Tabs","Box","useState","TabPanel","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;AAAA,SAASA,GAAG,EAAEC,IAAI,EAAaC,GAAG,QAAQ,eAAe,CAAC;AAC1D,SAASC,QAAQ,QAAQ,OAAO,CAAC;AACjC,SAASC,QAAQ,QAAQ,YAAY,CAAC;AActC,OAAO,MAAMC,iBAAiB,GAAG,CAAC,EAAEC,IAAI,CAAA,EAA0B,GAAK;IACrE,MAAM,CAACC,SAAS,EAAEC,YAAY,CAAC,GAAGL,QAAQ,CAAC,CAAC,CAAC,AAAC;IAE9C,MAAMM,YAAY,GAA0B,CAACC,CAAC,EAAEC,QAAQ,GAAK;QAC3DH,YAAY,CAACG,QAAQ,CAAC,CAAC;IACzB,CAAC,AAAC;IAEF,qBACE;;0BACE,KAACT,GAAG;gBAACU,EAAE,EAAE;oBAAEC,YAAY,EAAE,CAAC;oBAAEC,WAAW,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAACC,OAAO;iBAAE;0BACzE,cAAA,KAAChB,IAAI;oBAACiB,KAAK,EAAEX,SAAS;oBAAEY,QAAQ,EAAEV,YAAY;oBAAEW,YAAU,EAAC,0BAA0B;8BAClFd,IAAI,CAACe,GAAG,CAAC,CAAC,EAAEC,KAAK,CAAA,EAAE,EAAEC,CAAC,GAAK;wBAC1B,qBACE,KAACvB,GAAG;4BAEFsB,KAAK,EAAEA,KAAK;4BACZE,EAAE,EAAE,CAAC,mBAAmB,EAAED,CAAC,CAAC,CAAC;4BAC7BE,eAAa,EAAE,CAAC,wBAAwB,EAAEF,CAAC,CAAC,CAAC;2BAHxCD,KAAK,CAIV,CACF;oBACJ,CAAC,CAAC;kBACG;cACH;YACLhB,IAAI,CAACe,GAAG,CAAC,CAAC,EAAEC,KAAK,CAAA,EAAEI,OAAO,CAAA,EAAE,EAAEH,CAAC,GAAK;gBACnC,qBACE,KAACnB,QAAQ;oBAAac,KAAK,EAAEX,SAAS;oBAAEoB,KAAK,EAAEJ,CAAC;8BAC7CG,OAAO;mBADKJ,KAAK,CAET,CACX;YACJ,CAAC,CAAC;;MACD,CACH;AACJ,CAAC,CAAC"}

package/dist/components/OptionsEditorTabs/OptionsEditorTabs.test.js

@@ -15,46 +15,32 @@ import { screen, render, getAllByRole } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { OptionsEditorTabs } from './OptionsEditorTabs';
 describe('OptionsEditorTabs', ()=>{
+    const mockTabs = [
+        {
+            label: 'Query',
+            content: /*#__PURE__*/ _jsx("div", {
+                children: "Edit query configuration"
+            })
+        },
+        {
+            label: 'Settings',
+            content: /*#__PURE__*/ _jsx("div", {
+                children: "Edit settings configuration"
+            })
+        },
+        {
+            label: 'JSON',
+            content: /*#__PURE__*/ _jsx("div", {
+                children: "JSON editor"
+            })
+        }
+    ];
     const renderTabs = (otherTabs)=>{
+        const tabs = otherTabs !== null && otherTabs !== void 0 ? otherTabs : mockTabs;
         render(/*#__PURE__*/ _jsx(OptionsEditorTabs, {
-            tabs: {
-                query: {
-                    content: /*#__PURE__*/ _jsx("div", {
-                        children: "Edit query configuration"
-                    })
-                },
-                settings: {
-                    content: /*#__PURE__*/ _jsx("div", {
-                        children: "Edit settings configuration"
-                    })
-                },
-                json: {
-                    content: /*#__PURE__*/ _jsx("div", {
-                        children: "JSON editor"
-                    })
-                },
-                other: otherTabs
-            }
+            tabs: tabs
         }));
     };
-    const renderCustomTabs = ()=>{
-        renderTabs([
-            {
-                id: 'tableCols',
-                label: 'Table columns',
-                content: /*#__PURE__*/ _jsx("div", {
-                    children: "custom table column"
-                })
-            },
-            {
-                id: 'tableOpts',
-                label: 'Table options',
-                content: /*#__PURE__*/ _jsx("div", {
-                    children: "custom table options"
-                })
-            }
-        ]);
-    };
     it('renders all specified tabs in a tab list', ()=>{
         renderTabs();
         const tabList = screen.getByRole('tablist');
@@ -100,59 +86,13 @@ describe('OptionsEditorTabs', ()=>{
         const activeTabPanel = screen.getByRole('tabpanel');
         expect(activeTabPanel).toHaveTextContent('settings configuration');
     });
-    it('renders custom tabs between visual tabs and json editor', ()=>{
-        renderCustomTabs();
+    it('renders tabs in correct order', ()=>{
+        renderTabs();
         const tabList = screen.getByRole('tablist');
         const tabs = getAllByRole(tabList, 'tab');
-        expect(tabs).toHaveLength(5);
+        expect(tabs).toHaveLength(3);
         expect(tabs[0]).toHaveTextContent('Query');
         expect(tabs[1]).toHaveTextContent('Settings');
-        expect(tabs[2]).toHaveTextContent('Table column');
-        expect(tabs[3]).toHaveTextContent('Table options');
-        expect(tabs[4]).toHaveTextContent('JSON');
-    });
-    it('shows the correct content when selecting a custom tab', ()=>{
-        renderCustomTabs();
-        const tableColTab = screen.getByRole('tab', {
-            name: 'Table columns'
-        });
-        userEvent.click(tableColTab);
-        const activeTab = screen.getByRole('tab', {
-            selected: true
-        });
-        expect(activeTab).toBe(tableColTab);
-        const activeTabPanel = screen.getByRole('tabpanel');
-        expect(activeTabPanel).toHaveTextContent('custom table column');
-    });
-    it('only renders common tabs that are specified', ()=>{
-        render(/*#__PURE__*/ _jsx(OptionsEditorTabs, {
-            tabs: {
-                settings: {
-                    content: /*#__PURE__*/ _jsx("div", {
-                        children: "settings are alone"
-                    })
-                },
-                json: {
-                    content: /*#__PURE__*/ _jsx("div", {
-                        children: "JSON is at the end"
-                    })
-                },
-                other: [
-                    {
-                        id: 'custom',
-                        label: 'Another tab',
-                        content: /*#__PURE__*/ _jsx("div", {
-                            children: "another tab content"
-                        })
-                    }
-                ]
-            }
-        }));
-        const tabList = screen.getByRole('tablist');
-        const tabs = getAllByRole(tabList, 'tab');
-        expect(tabs).toHaveLength(3);
-        expect(tabs[0]).toHaveTextContent('Settings');
-        expect(tabs[1]).toHaveTextContent('Another tab');
         expect(tabs[2]).toHaveTextContent('JSON');
     });
 });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.test.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 { screen, render, getAllByRole } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\n\nimport { OptionsEditorTabs, OptionsEditorTabsProps } from './OptionsEditorTabs';\n\ndescribe('OptionsEditorTabs', () => {\n  const renderTabs = (otherTabs?: OptionsEditorTabsProps['tabs']['other']) => {\n    render(\n      <OptionsEditorTabs\n        tabs={{\n          query: {\n            content: <div>Edit query configuration</div>,\n          },\n          settings: {\n            content: <div>Edit settings configuration</div>,\n          },\n          json: {\n            content: <div>JSON editor</div>,\n          },\n          other: otherTabs,\n        }}\n      />\n    );\n  };\n\n  const renderCustomTabs = () => {\n    renderTabs([\n      {\n        id: 'tableCols',\n        label: 'Table columns',\n        content: <div>custom table column</div>,\n      },\n      {\n        id: 'tableOpts',\n        label: 'Table options',\n        content: <div>custom table options</div>,\n      },\n    ]);\n  };\n\n  it('renders all specified tabs in a tab list', () => {\n    renderTabs();\n\n    const tabList = screen.getByRole('tablist');\n    const tabs = getAllByRole(tabList, 'tab');\n    expect(tabs).toHaveLength(3);\n    expect(tabs[0]).toHaveTextContent('Query');\n    expect(tabs[1]).toHaveTextContent('Settings');\n    expect(tabs[2]).toHaveTextContent('JSON');\n  });\n\n  it('defaults to selecting the first tab', () => {\n    renderTabs();\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toHaveTextContent('Query');\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('query configuration');\n  });\n\n  it('switches selected tab on click', () => {\n    renderTabs();\n    const jsonTab = screen.getByRole('tab', { name: 'JSON' });\n    userEvent.click(jsonTab);\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toBe(jsonTab);\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('JSON editor');\n  });\n\n  it('switches selected tab on keyboard interactions', () => {\n    renderTabs();\n    const vizTab = screen.getByRole('tab', { name: 'Settings' });\n    userEvent.tab();\n    userEvent.keyboard('{arrowright}{space}');\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toBe(vizTab);\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('settings configuration');\n  });\n\n  it('renders custom tabs between visual tabs and json editor', () => {\n    renderCustomTabs();\n\n    const tabList = screen.getByRole('tablist');\n    const tabs = getAllByRole(tabList, 'tab');\n    expect(tabs).toHaveLength(5);\n    expect(tabs[0]).toHaveTextContent('Query');\n    expect(tabs[1]).toHaveTextContent('Settings');\n    expect(tabs[2]).toHaveTextContent('Table column');\n    expect(tabs[3]).toHaveTextContent('Table options');\n    expect(tabs[4]).toHaveTextContent('JSON');\n  });\n\n  it('shows the correct content when selecting a custom tab', () => {\n    renderCustomTabs();\n\n    const tableColTab = screen.getByRole('tab', { name: 'Table columns' });\n    userEvent.click(tableColTab);\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toBe(tableColTab);\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('custom table column');\n  });\n\n  it('only renders common tabs that are specified', () => {\n    render(\n      <OptionsEditorTabs\n        tabs={{\n          settings: {\n            content: <div>settings are alone</div>,\n          },\n          json: {\n            content: <div>JSON is at the end</div>,\n          },\n          other: [\n            {\n              id: 'custom',\n              label: 'Another tab',\n              content: <div>another tab content</div>,\n            },\n          ],\n        }}\n      />\n    );\n    const tabList = screen.getByRole('tablist');\n    const tabs = getAllByRole(tabList, 'tab');\n    expect(tabs).toHaveLength(3);\n    expect(tabs[0]).toHaveTextContent('Settings');\n    expect(tabs[1]).toHaveTextContent('Another tab');\n    expect(tabs[2]).toHaveTextContent('JSON');\n  });\n});\n"],"names":["screen","render","getAllByRole","userEvent","OptionsEditorTabs","describe","renderTabs","otherTabs","tabs","query","content","div","settings","json","other","renderCustomTabs","id","label","it","tabList","getByRole","expect","toHaveLength","toHaveTextContent","activeTab","selected","activeTabPanel","jsonTab","name","click","toBe","vizTab","tab","keyboard","tableColTab"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/OptionsEditorTabs/OptionsEditorTabs.test.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 { screen, render, getAllByRole } from '@testing-library/react';\nimport userEvent from '@testing-library/user-event';\n\nimport { OptionsEditorTabs, OptionsEditorTabsProps } from './OptionsEditorTabs';\n\ndescribe('OptionsEditorTabs', () => {\n  const mockTabs: OptionsEditorTabsProps['tabs'] = [\n    {\n      label: 'Query',\n      content: <div>Edit query configuration</div>,\n    },\n    {\n      label: 'Settings',\n      content: <div>Edit settings configuration</div>,\n    },\n    {\n      label: 'JSON',\n      content: <div>JSON editor</div>,\n    },\n  ];\n  const renderTabs = (otherTabs?: OptionsEditorTabsProps['tabs']) => {\n    const tabs = otherTabs ?? mockTabs;\n    render(<OptionsEditorTabs tabs={tabs} />);\n  };\n\n  it('renders all specified tabs in a tab list', () => {\n    renderTabs();\n\n    const tabList = screen.getByRole('tablist');\n    const tabs = getAllByRole(tabList, 'tab');\n    expect(tabs).toHaveLength(3);\n    expect(tabs[0]).toHaveTextContent('Query');\n    expect(tabs[1]).toHaveTextContent('Settings');\n    expect(tabs[2]).toHaveTextContent('JSON');\n  });\n\n  it('defaults to selecting the first tab', () => {\n    renderTabs();\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toHaveTextContent('Query');\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('query configuration');\n  });\n\n  it('switches selected tab on click', () => {\n    renderTabs();\n    const jsonTab = screen.getByRole('tab', { name: 'JSON' });\n    userEvent.click(jsonTab);\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toBe(jsonTab);\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('JSON editor');\n  });\n\n  it('switches selected tab on keyboard interactions', () => {\n    renderTabs();\n    const vizTab = screen.getByRole('tab', { name: 'Settings' });\n    userEvent.tab();\n    userEvent.keyboard('{arrowright}{space}');\n\n    const activeTab = screen.getByRole('tab', {\n      selected: true,\n    });\n    expect(activeTab).toBe(vizTab);\n\n    const activeTabPanel = screen.getByRole('tabpanel');\n    expect(activeTabPanel).toHaveTextContent('settings configuration');\n  });\n\n  it('renders tabs in correct order', () => {\n    renderTabs();\n\n    const tabList = screen.getByRole('tablist');\n    const tabs = getAllByRole(tabList, 'tab');\n    expect(tabs).toHaveLength(3);\n    expect(tabs[0]).toHaveTextContent('Query');\n    expect(tabs[1]).toHaveTextContent('Settings');\n    expect(tabs[2]).toHaveTextContent('JSON');\n  });\n});\n"],"names":["screen","render","getAllByRole","userEvent","OptionsEditorTabs","describe","mockTabs","label","content","div","renderTabs","otherTabs","tabs","it","tabList","getByRole","expect","toHaveLength","toHaveTextContent","activeTab","selected","activeTabPanel","jsonTab","name","click","toBe","vizTab","tab","keyboard"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"PluginSpecEditor.d.ts","sourceRoot":"","sources":["../../src/components/PluginSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAG1D,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,sBAmB5D"}
+{"version":3,"file":"PluginSpecEditor.d.ts","sourceRoot":"","sources":["../../src/components/PluginSpecEditor.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,kBAAkB,EAAe,UAAU,EAAE,MAAM,UAAU,CAAC;AAIvE,MAAM,WAAW,qBAAsB,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IAC5E,UAAU,EAAE,UAAU,CAAC;IACvB,UAAU,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,sBA8C5D"}

package/dist/components/PluginSpecEditor.js

@@ -11,8 +11,9 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { ErrorAlert } from '@perses-dev/components';
+import { ErrorAlert, JSONEditor } from '@perses-dev/components';
 import { usePlugin } from '../runtime';
+import { OptionsEditorTabs } from './OptionsEditorTabs';
 export function PluginSpecEditor(props) {
     const { pluginType , pluginKind , ...others } = props;
     const { data: plugin , isLoading , error  } = usePlugin(pluginType, pluginKind);
@@ -26,12 +27,45 @@ export function PluginSpecEditor(props) {
         return null;
     }
     if (plugin === undefined) {
-        throw new Error(`Missing OptionsEditorComponent for ${pluginType} plugin with kind '${pluginKind}'`);
+        throw new Error(`Missing implementation for ${pluginType} plugin with kind '${pluginKind}'`);
+    }
+    if (pluginType === 'Panel') {
+        const { PanelQueryEditorComponent , panelOptionsEditorComponents  } = plugin;
+        let tabs = [];
+        if (PanelQueryEditorComponent !== undefined) {
+            tabs.push({
+                label: 'Query',
+                content: /*#__PURE__*/ _jsx(PanelQueryEditorComponent, {
+                    ...others
+                })
+            });
+        }
+        if (panelOptionsEditorComponents !== undefined) {
+            tabs = tabs.concat(panelOptionsEditorComponents.map(({ label , content: OptionsEditorComponent  })=>({
+                    label,
+                    content: /*#__PURE__*/ _jsx(OptionsEditorComponent, {
+                        ...others
+                    })
+                })));
+        }
+        // always show json editor by default
+        tabs.push({
+            label: 'JSON',
+            content: /*#__PURE__*/ _jsx(JSONEditor, {
+                ...others
+            })
+        });
+        return /*#__PURE__*/ _jsx(OptionsEditorTabs, {
+            tabs: tabs
+        });
     }
     const { OptionsEditorComponent  } = plugin;
-    return /*#__PURE__*/ _jsx(OptionsEditorComponent, {
-        ...others
-    });
+    if (OptionsEditorComponent !== undefined) {
+        return /*#__PURE__*/ _jsx(OptionsEditorComponent, {
+            ...others
+        });
+    }
+    return null;
 }
 
 //# sourceMappingURL=PluginSpecEditor.js.map

package/dist/components/PluginSpecEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/PluginSpecEditor.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 } from '@perses-dev/components';\nimport { UnknownSpec } from '@perses-dev/core';\nimport { OptionsEditorProps, PluginType } from '../model';\nimport { usePlugin } from '../runtime';\n\nexport interface PluginSpecEditorProps extends OptionsEditorProps<UnknownSpec> {\n  pluginType: PluginType;\n  pluginKind: string;\n}\n\nexport function PluginSpecEditor(props: PluginSpecEditorProps) {\n  const { pluginType, pluginKind, ...others } = props;\n  const { data: plugin, isLoading, error } = usePlugin(pluginType, pluginKind);\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 OptionsEditorComponent for ${pluginType} plugin with kind '${pluginKind}'`);\n  }\n\n  const { OptionsEditorComponent } = plugin;\n  return <OptionsEditorComponent {...others} />;\n}\n"],"names":["ErrorAlert","usePlugin","PluginSpecEditor","props","pluginType","pluginKind","others","data","plugin","isLoading","error","undefined","Error","OptionsEditorComponent"],"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;AAAA,SAASA,UAAU,QAAQ,wBAAwB,CAAC;AAGpD,SAASC,SAAS,QAAQ,YAAY,CAAC;AAOvC,OAAO,SAASC,gBAAgB,CAACC,KAA4B,EAAE;IAC7D,MAAM,EAAEC,UAAU,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGH,KAAK,AAAC;IACpD,MAAM,EAAEI,IAAI,EAAEC,MAAM,CAAA,EAAEC,SAAS,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGT,SAAS,CAACG,UAAU,EAAEC,UAAU,CAAC,AAAC;IAE7E,IAAIK,KAAK,EAAE;QACT,qBAAO,KAACV,UAAU;YAACU,KAAK,EAAEA,KAAK;UAAI,CAAC;IACtC,CAAC;IAED,iCAAiC;IACjC,IAAID,SAAS,EAAE;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAID,MAAM,KAAKG,SAAS,EAAE;QACxB,MAAM,IAAIC,KAAK,CAAC,CAAC,mCAAmC,EAAER,UAAU,CAAC,mBAAmB,EAAEC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IACvG,CAAC;IAED,MAAM,EAAEQ,sBAAsB,CAAA,EAAE,GAAGL,MAAM,AAAC;IAC1C,qBAAO,KAACK,sBAAsB;QAAE,GAAGP,MAAM;MAAI,CAAC;AAChD,CAAC"}
+{"version":3,"sources":["../../src/components/PluginSpecEditor.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 { UnknownSpec } from '@perses-dev/core';\nimport { OptionsEditorProps, PanelPlugin, PluginType } from '../model';\nimport { usePlugin } from '../runtime';\nimport { OptionsEditorTabsProps, OptionsEditorTabs } from './OptionsEditorTabs';\n\nexport interface PluginSpecEditorProps extends OptionsEditorProps<UnknownSpec> {\n  pluginType: PluginType;\n  pluginKind: string;\n}\n\nexport function PluginSpecEditor(props: PluginSpecEditorProps) {\n  const { pluginType, pluginKind, ...others } = props;\n  const { data: plugin, isLoading, error } = usePlugin(pluginType, pluginKind);\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 ${pluginType} plugin with kind '${pluginKind}'`);\n  }\n\n  if (pluginType === 'Panel') {\n    const { PanelQueryEditorComponent, panelOptionsEditorComponents } = plugin as PanelPlugin;\n    let tabs: OptionsEditorTabsProps['tabs'] = [];\n    if (PanelQueryEditorComponent !== undefined) {\n      tabs.push({ label: 'Query', content: <PanelQueryEditorComponent {...others} /> });\n    }\n\n    if (panelOptionsEditorComponents !== undefined) {\n      tabs = tabs.concat(\n        panelOptionsEditorComponents.map(({ label, content: OptionsEditorComponent }) => ({\n          label,\n          content: <OptionsEditorComponent {...others} />,\n        }))\n      );\n    }\n\n    // always show json editor by default\n    tabs.push({ label: 'JSON', content: <JSONEditor {...others} /> });\n\n    return <OptionsEditorTabs tabs={tabs} />;\n  }\n\n  const { OptionsEditorComponent } = plugin;\n\n  if (OptionsEditorComponent !== undefined) {\n    return <OptionsEditorComponent {...others} />;\n  }\n\n  return null;\n}\n"],"names":["ErrorAlert","JSONEditor","usePlugin","OptionsEditorTabs","PluginSpecEditor","props","pluginType","pluginKind","others","data","plugin","isLoading","error","undefined","Error","PanelQueryEditorComponent","panelOptionsEditorComponents","tabs","push","label","content","concat","map","OptionsEditorComponent"],"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;AAAA,SAASA,UAAU,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AAGhE,SAASC,SAAS,QAAQ,YAAY,CAAC;AACvC,SAAiCC,iBAAiB,QAAQ,qBAAqB,CAAC;AAOhF,OAAO,SAASC,gBAAgB,CAACC,KAA4B,EAAE;IAC7D,MAAM,EAAEC,UAAU,CAAA,EAAEC,UAAU,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGH,KAAK,AAAC;IACpD,MAAM,EAAEI,IAAI,EAAEC,MAAM,CAAA,EAAEC,SAAS,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGV,SAAS,CAACI,UAAU,EAAEC,UAAU,CAAC,AAAC;IAE7E,IAAIK,KAAK,EAAE;QACT,qBAAO,KAACZ,UAAU;YAACY,KAAK,EAAEA,KAAK;UAAI,CAAC;IACtC,CAAC;IAED,iCAAiC;IACjC,IAAID,SAAS,EAAE;QACb,OAAO,IAAI,CAAC;IACd,CAAC;IAED,IAAID,MAAM,KAAKG,SAAS,EAAE;QACxB,MAAM,IAAIC,KAAK,CAAC,CAAC,2BAA2B,EAAER,UAAU,CAAC,mBAAmB,EAAEC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC;IAC/F,CAAC;IAED,IAAID,UAAU,KAAK,OAAO,EAAE;QAC1B,MAAM,EAAES,yBAAyB,CAAA,EAAEC,4BAA4B,CAAA,EAAE,GAAGN,MAAM,AAAe,AAAC;QAC1F,IAAIO,IAAI,GAAmC,EAAE,AAAC;QAC9C,IAAIF,yBAAyB,KAAKF,SAAS,EAAE;YAC3CI,IAAI,CAACC,IAAI,CAAC;gBAAEC,KAAK,EAAE,OAAO;gBAAEC,OAAO,gBAAE,KAACL,yBAAyB;oBAAE,GAAGP,MAAM;kBAAI;aAAE,CAAC,CAAC;QACpF,CAAC;QAED,IAAIQ,4BAA4B,KAAKH,SAAS,EAAE;YAC9CI,IAAI,GAAGA,IAAI,CAACI,MAAM,CAChBL,4BAA4B,CAACM,GAAG,CAAC,CAAC,EAAEH,KAAK,CAAA,EAAEC,OAAO,EAAEG,sBAAsB,CAAA,EAAE,GAAM,CAAA;oBAChFJ,KAAK;oBACLC,OAAO,gBAAE,KAACG,sBAAsB;wBAAE,GAAGf,MAAM;sBAAI;iBAChD,CAAA,AAAC,CAAC,CACJ,CAAC;QACJ,CAAC;QAED,qCAAqC;QACrCS,IAAI,CAACC,IAAI,CAAC;YAAEC,KAAK,EAAE,MAAM;YAAEC,OAAO,gBAAE,KAACnB,UAAU;gBAAE,GAAGO,MAAM;cAAI;SAAE,CAAC,CAAC;QAElE,qBAAO,KAACL,iBAAiB;YAACc,IAAI,EAAEA,IAAI;UAAI,CAAC;IAC3C,CAAC;IAED,MAAM,EAAEM,sBAAsB,CAAA,EAAE,GAAGb,MAAM,AAAC;IAE1C,IAAIa,sBAAsB,KAAKV,SAAS,EAAE;QACxC,qBAAO,KAACU,sBAAsB;YAAE,GAAGf,MAAM;UAAI,CAAC;IAChD,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC"}

package/dist/components/PluginSpecEditor.test.js

@@ -21,15 +21,37 @@ describe('PluginSpecEditor', ()=>{
             ...props
         }));
     };
-    it('shows the options editor component for a plugin', async ()=>{
-        renderComponent({
-            pluginType: 'Panel',
-            pluginKind: 'BertPanel1',
-            value: {},
-            onChange: jest.fn()
+    describe('Panel plugin', ()=>{
+        it('should show query and json editors', async ()=>{
+            renderComponent({
+                pluginType: 'Panel',
+                pluginKind: 'BertPanel1',
+                value: {},
+                onChange: jest.fn()
+            });
+            const queryTab = await screen.findByLabelText('Query');
+            expect(queryTab).toBeInTheDocument();
+            const editor = await screen.findByLabelText('BertPanel1 editor');
+            expect(editor).toBeInTheDocument();
+            const jsonEditor = await screen.findByLabelText('JSON');
+            expect(jsonEditor).toBeInTheDocument();
+        });
+        it('should display other options editor components', async ()=>{
+            renderComponent({
+                pluginType: 'Panel',
+                pluginKind: 'BertPanel2',
+                value: {},
+                onChange: jest.fn()
+            });
+            const settingsTab = await screen.findByLabelText('Settings');
+            expect(settingsTab).toBeInTheDocument();
+            const editor = await screen.findByLabelText('BertPanel2 editor');
+            expect(editor).toBeInTheDocument();
+            const customTab = await screen.findByLabelText('Custom Tab');
+            expect(customTab).toBeInTheDocument();
+            const jsonEditor = await screen.findByLabelText('JSON');
+            expect(jsonEditor).toBeInTheDocument();
         });
-        const editor = await screen.findByLabelText('BertPanel1 editor');
-        expect(editor).toBeInTheDocument();
     });
     it('propagates value changes', async ()=>{
         const onChange = jest.fn();

package/dist/components/PluginSpecEditor.test.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/PluginSpecEditor.test.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 userEvent from '@testing-library/user-event';\nimport { screen } from '@testing-library/react';\nimport { renderWithContext } from '../test';\nimport { PluginSpecEditor, PluginSpecEditorProps } from './PluginSpecEditor';\n\ndescribe('PluginSpecEditor', () => {\n  const renderComponent = (props: PluginSpecEditorProps) => {\n    renderWithContext(<PluginSpecEditor {...props} />);\n  };\n\n  it('shows the options editor component for a plugin', async () => {\n    renderComponent({ pluginType: 'Panel', pluginKind: 'BertPanel1', value: {}, onChange: jest.fn() });\n    const editor = await screen.findByLabelText('BertPanel1 editor');\n    expect(editor).toBeInTheDocument();\n  });\n\n  it('propagates value changes', async () => {\n    const onChange = jest.fn();\n    renderComponent({ pluginType: 'Panel', pluginKind: 'BertPanel1', value: { option1: 'Option1Value' }, onChange });\n\n    const editor = await screen.findByLabelText('BertPanel1 editor');\n    expect(editor).toHaveValue('Option1Value');\n    userEvent.clear(editor);\n    expect(onChange).toHaveBeenCalledWith({ option1: '' });\n  });\n\n  it('shows an error if plugin fails to load', async () => {\n    renderComponent({ pluginType: 'Variable', pluginKind: 'DoesNotExist', value: {}, onChange: jest.fn() });\n    const errorAlert = await screen.findByRole('alert');\n    expect(errorAlert).toHaveTextContent(/doesnotexist/i);\n  });\n});\n"],"names":["userEvent","screen","renderWithContext","PluginSpecEditor","describe","renderComponent","props","it","pluginType","pluginKind","value","onChange","jest","fn","editor","findByLabelText","expect","toBeInTheDocument","option1","toHaveValue","clear","toHaveBeenCalledWith","errorAlert","findByRole","toHaveTextContent"],"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;AAAA,OAAOA,SAAS,MAAM,6BAA6B,CAAC;AACpD,SAASC,MAAM,QAAQ,wBAAwB,CAAC;AAChD,SAASC,iBAAiB,QAAQ,SAAS,CAAC;AAC5C,SAASC,gBAAgB,QAA+B,oBAAoB,CAAC;AAE7EC,QAAQ,CAAC,kBAAkB,EAAE,IAAM;IACjC,MAAMC,eAAe,GAAG,CAACC,KAA4B,GAAK;QACxDJ,iBAAiB,eAAC,KAACC,gBAAgB;YAAE,GAAGG,KAAK;UAAI,CAAC,CAAC;IACrD,CAAC,AAAC;IAEFC,EAAE,CAAC,iDAAiD,EAAE,UAAY;QAChEF,eAAe,CAAC;YAAEG,UAAU,EAAE,OAAO;YAAEC,UAAU,EAAE,YAAY;YAAEC,KAAK,EAAE,EAAE;YAAEC,QAAQ,EAAEC,IAAI,CAACC,EAAE,EAAE;SAAE,CAAC,CAAC;QACnG,MAAMC,MAAM,GAAG,MAAMb,MAAM,CAACc,eAAe,CAAC,mBAAmB,CAAC,AAAC;QACjEC,MAAM,CAACF,MAAM,CAAC,CAACG,iBAAiB,EAAE,CAAC;IACrC,CAAC,CAAC,CAAC;IAEHV,EAAE,CAAC,0BAA0B,EAAE,UAAY;QACzC,MAAMI,QAAQ,GAAGC,IAAI,CAACC,EAAE,EAAE,AAAC;QAC3BR,eAAe,CAAC;YAAEG,UAAU,EAAE,OAAO;YAAEC,UAAU,EAAE,YAAY;YAAEC,KAAK,EAAE;gBAAEQ,OAAO,EAAE,cAAc;aAAE;YAAEP,QAAQ;SAAE,CAAC,CAAC;QAEjH,MAAMG,MAAM,GAAG,MAAMb,MAAM,CAACc,eAAe,CAAC,mBAAmB,CAAC,AAAC;QACjEC,MAAM,CAACF,MAAM,CAAC,CAACK,WAAW,CAAC,cAAc,CAAC,CAAC;QAC3CnB,SAAS,CAACoB,KAAK,CAACN,MAAM,CAAC,CAAC;QACxBE,MAAM,CAACL,QAAQ,CAAC,CAACU,oBAAoB,CAAC;YAAEH,OAAO,EAAE,EAAE;SAAE,CAAC,CAAC;IACzD,CAAC,CAAC,CAAC;IAEHX,EAAE,CAAC,wCAAwC,EAAE,UAAY;QACvDF,eAAe,CAAC;YAAEG,UAAU,EAAE,UAAU;YAAEC,UAAU,EAAE,cAAc;YAAEC,KAAK,EAAE,EAAE;YAAEC,QAAQ,EAAEC,IAAI,CAACC,EAAE,EAAE;SAAE,CAAC,CAAC;QACxG,MAAMS,UAAU,GAAG,MAAMrB,MAAM,CAACsB,UAAU,CAAC,OAAO,CAAC,AAAC;QACpDP,MAAM,CAACM,UAAU,CAAC,CAACE,iBAAiB,iBAAiB,CAAC;IACxD,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC"}
+{"version":3,"sources":["../../src/components/PluginSpecEditor.test.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 userEvent from '@testing-library/user-event';\nimport { screen } from '@testing-library/react';\nimport { renderWithContext } from '../test';\nimport { PluginSpecEditor, PluginSpecEditorProps } from './PluginSpecEditor';\n\ndescribe('PluginSpecEditor', () => {\n  const renderComponent = (props: PluginSpecEditorProps) => {\n    renderWithContext(<PluginSpecEditor {...props} />);\n  };\n\n  describe('Panel plugin', () => {\n    it('should show query and json editors', async () => {\n      renderComponent({ pluginType: 'Panel', pluginKind: 'BertPanel1', value: {}, onChange: jest.fn() });\n      const queryTab = await screen.findByLabelText('Query');\n      expect(queryTab).toBeInTheDocument();\n      const editor = await screen.findByLabelText('BertPanel1 editor');\n      expect(editor).toBeInTheDocument();\n      const jsonEditor = await screen.findByLabelText('JSON');\n      expect(jsonEditor).toBeInTheDocument();\n    });\n\n    it('should display other options editor components', async () => {\n      renderComponent({ pluginType: 'Panel', pluginKind: 'BertPanel2', value: {}, onChange: jest.fn() });\n      const settingsTab = await screen.findByLabelText('Settings');\n      expect(settingsTab).toBeInTheDocument();\n      const editor = await screen.findByLabelText('BertPanel2 editor');\n      expect(editor).toBeInTheDocument();\n      const customTab = await screen.findByLabelText('Custom Tab');\n      expect(customTab).toBeInTheDocument();\n      const jsonEditor = await screen.findByLabelText('JSON');\n      expect(jsonEditor).toBeInTheDocument();\n    });\n  });\n\n  it('propagates value changes', async () => {\n    const onChange = jest.fn();\n    renderComponent({ pluginType: 'Panel', pluginKind: 'BertPanel1', value: { option1: 'Option1Value' }, onChange });\n\n    const editor = await screen.findByLabelText('BertPanel1 editor');\n    expect(editor).toHaveValue('Option1Value');\n    userEvent.clear(editor);\n    expect(onChange).toHaveBeenCalledWith({ option1: '' });\n  });\n\n  it('shows an error if plugin fails to load', async () => {\n    renderComponent({ pluginType: 'Variable', pluginKind: 'DoesNotExist', value: {}, onChange: jest.fn() });\n    const errorAlert = await screen.findByRole('alert');\n    expect(errorAlert).toHaveTextContent(/doesnotexist/i);\n  });\n});\n"],"names":["userEvent","screen","renderWithContext","PluginSpecEditor","describe","renderComponent","props","it","pluginType","pluginKind","value","onChange","jest","fn","queryTab","findByLabelText","expect","toBeInTheDocument","editor","jsonEditor","settingsTab","customTab","option1","toHaveValue","clear","toHaveBeenCalledWith","errorAlert","findByRole","toHaveTextContent"],"mappings":"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"}

package/dist/model/panels.d.ts

@@ -1,11 +1,23 @@
-/// <reference types="react" />
 import { UnknownSpec } from '@perses-dev/core';
-import { Plugin } from './plugin-base';
+import React from 'react';
+import { OptionsEditorTab } from '../components';
+import { OptionsEditorProps, Plugin } from './plugin-base';
+export declare type PanelOptionsEditorComponent<T> = Pick<OptionsEditorTab, 'label'> & {
+    content: React.ComponentType<OptionsEditorProps<T>>;
+};
 /**
  * Plugin the provides custom visualizations inside of a Panel.
  */
 export interface PanelPlugin<Spec = UnknownSpec> extends Plugin<Spec> {
     PanelComponent: React.ComponentType<PanelProps<Spec>>;
+    /**
+     * React component for the content of "Query" tab
+     */
+    PanelQueryEditorComponent?: React.ComponentType<OptionsEditorProps<Spec>>;
+    /**
+     * React components for custom tabs
+     */
+    panelOptionsEditorComponents?: Array<PanelOptionsEditorComponent<Spec>>;
 }
 /**
  * The props provided by Perses to a panel plugin's PanelComponent.

package/dist/model/panels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../src/model/panels.ts"],"names":[],"mappings":";AAaA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,IAAI,GAAG,WAAW,CAAE,SAAQ,MAAM,CAAC,IAAI,CAAC;IACnE,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;CACvD;AAED;;GAEG;AACH,MAAM,WAAW,UAAU,CAAC,IAAI;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,iBAAiB,CAAC,EAAE;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH"}
+{"version":3,"file":"panels.d.ts","sourceRoot":"","sources":["../../src/model/panels.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAC/C,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACjD,OAAO,EAAE,kBAAkB,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AAE3D,oBAAY,2BAA2B,CAAC,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE,OAAO,CAAC,GAAG;IAC7E,OAAO,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC,CAAC,CAAC,CAAC;CACrD,CAAC;AACF;;GAEG;AACH,MAAM,WAAW,WAAW,CAAC,IAAI,GAAG,WAAW,CAAE,SAAQ,MAAM,CAAC,IAAI,CAAC;IACnE,cAAc,EAAE,KAAK,CAAC,aAAa,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC;IACtD;;OAEG;IACH,yBAAyB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;IAC1E;;OAEG;IACH,4BAA4B,CAAC,EAAE,KAAK,CAAC,2BAA2B,CAAC,IAAI,CAAC,CAAC,CAAC;CACzE;AAED;;GAEG;AACH,MAAM,WAAW,UAAU,CAAC,IAAI;IAC9B,IAAI,EAAE,IAAI,CAAC;IACX,iBAAiB,CAAC,EAAE;QAClB,KAAK,EAAE,MAAM,CAAC;QACd,MAAM,EAAE,MAAM,CAAC;KAChB,CAAC;CACH"}

package/dist/model/panels.js

@@ -10,6 +10,6 @@
 // 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 { };
+import React from 'react';
 
 //# sourceMappingURL=panels.js.map

package/dist/model/panels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/panels.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { UnknownSpec } from '@perses-dev/core';\nimport { Plugin } from './plugin-base';\n\n/**\n * Plugin the provides custom visualizations inside of a Panel.\n */\nexport interface PanelPlugin<Spec = UnknownSpec> extends Plugin<Spec> {\n  PanelComponent: React.ComponentType<PanelProps<Spec>>;\n}\n\n/**\n * The props provided by Perses to a panel plugin's PanelComponent.\n */\nexport interface PanelProps<Spec> {\n  spec: Spec;\n  contentDimensions?: {\n    width: number;\n    height: number;\n  };\n}\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,WAmBC"}
+{"version":3,"sources":["../../src/model/panels.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { UnknownSpec } from '@perses-dev/core';\nimport React from 'react';\nimport { OptionsEditorTab } from '../components';\nimport { OptionsEditorProps, Plugin } from './plugin-base';\n\nexport type PanelOptionsEditorComponent<T> = Pick<OptionsEditorTab, 'label'> & {\n  content: React.ComponentType<OptionsEditorProps<T>>;\n};\n/**\n * Plugin the provides custom visualizations inside of a Panel.\n */\nexport interface PanelPlugin<Spec = UnknownSpec> extends Plugin<Spec> {\n  PanelComponent: React.ComponentType<PanelProps<Spec>>;\n  /**\n   * React component for the content of \"Query\" tab\n   */\n  PanelQueryEditorComponent?: React.ComponentType<OptionsEditorProps<Spec>>;\n  /**\n   * React components for custom tabs\n   */\n  panelOptionsEditorComponents?: Array<PanelOptionsEditorComponent<Spec>>;\n}\n\n/**\n * The props provided by Perses to a panel plugin's PanelComponent.\n */\nexport interface PanelProps<Spec> {\n  spec: Spec;\n  contentDimensions?: {\n    width: number;\n    height: number;\n  };\n}\n"],"names":["React"],"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;AAGjC,OAAOA,KAAK,MAAM,OAAO,CAAC"}

package/dist/model/plugin-base.d.ts

@@ -6,7 +6,7 @@ export interface Plugin<Spec> {
     /**
      * React component for editing the plugin's options in the UI.
      */
-    OptionsEditorComponent: React.ComponentType<OptionsEditorProps<Spec>>;
+    OptionsEditorComponent?: React.ComponentType<OptionsEditorProps<Spec>>;
     /**
      * Callback for creating the initial options for the plugin.
      */

package/dist/model/plugin-base.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-base.d.ts","sourceRoot":"","sources":["../../src/model/plugin-base.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,MAAM,CAAC,IAAI;IAC1B;;OAEG;IACH,sBAAsB,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;IAEtE;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,IAAI;IAGtC,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC"}
+{"version":3,"file":"plugin-base.d.ts","sourceRoot":"","sources":["../../src/model/plugin-base.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B;;GAEG;AACH,MAAM,WAAW,MAAM,CAAC,IAAI;IAC1B;;OAEG;IACH,sBAAsB,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,kBAAkB,CAAC,IAAI,CAAC,CAAC,CAAC;IAEvE;;OAEG;IACH,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC;AAED;;GAEG;AACH,MAAM,WAAW,kBAAkB,CAAC,IAAI;IAGtC,KAAK,EAAE,IAAI,CAAC;IACZ,QAAQ,EAAE,CAAC,IAAI,EAAE,IAAI,KAAK,IAAI,CAAC;CAChC"}

package/dist/model/plugin-base.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/model/plugin-base.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\n\n/**\n * Base type of all plugin implementations.\n */\nexport interface Plugin<Spec> {\n  /**\n   * React component for editing the plugin's options in the UI.\n   */\n  OptionsEditorComponent: React.ComponentType<OptionsEditorProps<Spec>>;\n\n  /**\n   * Callback for creating the initial options for the plugin.\n   */\n  createInitialOptions: () => Spec;\n}\n\n/**\n * Common props passed to options editor components.\n */\nexport interface OptionsEditorProps<Spec> {\n  // TODO: These are temporary and may not actually make sense, so replace\n  // with whatever makes sense as visual editing evolves\n  value: Spec;\n  onChange: (next: Spec) => void;\n}\n"],"names":["React"],"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,OAAOA,KAAK,MAAM,OAAO,CAAC"}
+{"version":3,"sources":["../../src/model/plugin-base.ts"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport React from 'react';\n\n/**\n * Base type of all plugin implementations.\n */\nexport interface Plugin<Spec> {\n  /**\n   * React component for editing the plugin's options in the UI.\n   */\n  OptionsEditorComponent?: React.ComponentType<OptionsEditorProps<Spec>>;\n\n  /**\n   * Callback for creating the initial options for the plugin.\n   */\n  createInitialOptions: () => Spec;\n}\n\n/**\n * Common props passed to options editor components.\n */\nexport interface OptionsEditorProps<Spec> {\n  // TODO: These are temporary and may not actually make sense, so replace\n  // with whatever makes sense as visual editing evolves\n  value: Spec;\n  onChange: (next: Spec) => void;\n}\n"],"names":["React"],"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,OAAOA,KAAK,MAAM,OAAO,CAAC"}

package/dist/test/test-plugins/bert/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/test/test-plugins/bert/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAgBvD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAgBvD,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/test/test-plugins/bert/index.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAG7C,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CAgBvD,CAAC;AAEF,eAAO,MAAM,UAAU,EAAE,WAAW,CAAC;IAAE,OAAO,EAAE,MAAM,CAAA;CAAE,CA2BvD,CAAC"}

package/dist/test/test-plugins/bert/index.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // Dummy plugins to test loading
 export const BertPanel1 = {
     PanelComponent: ()=>null,
-    OptionsEditorComponent: function BertPanel1Editor({ value , onChange  }) {
+    PanelQueryEditorComponent: function BertPanel1Editor({ value , onChange  }) {
         return /*#__PURE__*/ _jsxs("div", {
             children: [
                 /*#__PURE__*/ _jsx("label", {
@@ -39,25 +39,38 @@ export const BertPanel1 = {
 };
 export const BertPanel2 = {
     PanelComponent: ()=>null,
-    OptionsEditorComponent: function BertPanel2Editor({ value , onChange  }) {
-        return /*#__PURE__*/ _jsxs("div", {
-            children: [
-                /*#__PURE__*/ _jsx("label", {
-                    htmlFor: "editor-input",
-                    children: "BertPanel2 editor"
-                }),
-                /*#__PURE__*/ _jsx("input", {
-                    type: "text",
-                    id: "editor-input",
-                    value: value.option2,
-                    onChange: (e)=>onChange({
-                            ...value,
-                            option2: e.target.value
+    panelOptionsEditorComponents: [
+        {
+            label: 'Settings',
+            content: function BertPanel2Editor({ value , onChange  }) {
+                return /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("label", {
+                            htmlFor: "editor-input",
+                            children: "BertPanel2 editor"
+                        }),
+                        /*#__PURE__*/ _jsx("input", {
+                            type: "text",
+                            id: "editor-input",
+                            value: value.option2,
+                            onChange: (e)=>onChange({
+                                    ...value,
+                                    option2: e.target.value
+                                })
                         })
-                })
-            ]
-        });
-    },
+                    ]
+                });
+            }
+        },
+        {
+            label: 'Custom Tab',
+            content: function Editor() {
+                return /*#__PURE__*/ _jsx("div", {
+                    children: "custom content"
+                });
+            }
+        }
+    ],
     createInitialOptions: ()=>({
             option2: ''
         })

package/dist/test/test-plugins/bert/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/test/test-plugins/bert/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\nimport { PanelPlugin } from '../../../model';\n\n// Dummy plugins to test loading\nexport const BertPanel1: PanelPlugin<{ option1: string }> = {\n  PanelComponent: () => null,\n  OptionsEditorComponent: function BertPanel1Editor({ value, onChange }) {\n    return (\n      <div>\n        <label htmlFor=\"editor-input\">BertPanel1 editor</label>\n        <input\n          type=\"text\"\n          id=\"editor-input\"\n          value={value.option1}\n          onChange={(e) => onChange({ ...value, option1: e.target.value })}\n        />\n      </div>\n    );\n  },\n  createInitialOptions: () => ({ option1: '' }),\n};\n\nexport const BertPanel2: PanelPlugin<{ option2: string }> = {\n  PanelComponent: () => null,\n  OptionsEditorComponent: function BertPanel2Editor({ value, onChange }) {\n    return (\n      <div>\n        <label htmlFor=\"editor-input\">BertPanel2 editor</label>\n        <input\n          type=\"text\"\n          id=\"editor-input\"\n          value={value.option2}\n          onChange={(e) => onChange({ ...value, option2: e.target.value })}\n        />\n      </div>\n    );\n  },\n  createInitialOptions: () => ({ option2: '' }),\n};\n"],"names":["BertPanel1","PanelComponent","OptionsEditorComponent","BertPanel1Editor","value","onChange","div","label","htmlFor","input","type","id","option1","e","target","createInitialOptions","BertPanel2","BertPanel2Editor","option2"],"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;AAEA,gCAAgC;AAChC,OAAO,MAAMA,UAAU,GAAqC;IAC1DC,cAAc,EAAE,IAAM,IAAI;IAC1BC,sBAAsB,EAAE,SAASC,gBAAgB,CAAC,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,EAAE;QACrE,qBACE,MAACC,KAAG;;8BACF,KAACC,OAAK;oBAACC,OAAO,EAAC,cAAc;8BAAC,mBAAiB;kBAAQ;8BACvD,KAACC,OAAK;oBACJC,IAAI,EAAC,MAAM;oBACXC,EAAE,EAAC,cAAc;oBACjBP,KAAK,EAAEA,KAAK,CAACQ,OAAO;oBACpBP,QAAQ,EAAE,CAACQ,CAAC,GAAKR,QAAQ,CAAC;4BAAE,GAAGD,KAAK;4BAAEQ,OAAO,EAAEC,CAAC,CAACC,MAAM,CAACV,KAAK;yBAAE,CAAC;kBAChE;;UACE,CACN;IACJ,CAAC;IACDW,oBAAoB,EAAE,IAAO,CAAA;YAAEH,OAAO,EAAE,EAAE;SAAE,CAAA,AAAC;CAC9C,CAAC;AAEF,OAAO,MAAMI,UAAU,GAAqC;IAC1Df,cAAc,EAAE,IAAM,IAAI;IAC1BC,sBAAsB,EAAE,SAASe,gBAAgB,CAAC,EAAEb,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,EAAE;QACrE,qBACE,MAACC,KAAG;;8BACF,KAACC,OAAK;oBAACC,OAAO,EAAC,cAAc;8BAAC,mBAAiB;kBAAQ;8BACvD,KAACC,OAAK;oBACJC,IAAI,EAAC,MAAM;oBACXC,EAAE,EAAC,cAAc;oBACjBP,KAAK,EAAEA,KAAK,CAACc,OAAO;oBACpBb,QAAQ,EAAE,CAACQ,CAAC,GAAKR,QAAQ,CAAC;4BAAE,GAAGD,KAAK;4BAAEc,OAAO,EAAEL,CAAC,CAACC,MAAM,CAACV,KAAK;yBAAE,CAAC;kBAChE;;UACE,CACN;IACJ,CAAC;IACDW,oBAAoB,EAAE,IAAO,CAAA;YAAEG,OAAO,EAAE,EAAE;SAAE,CAAA,AAAC;CAC9C,CAAC"}
+{"version":3,"sources":["../../../../src/test/test-plugins/bert/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\nimport { PanelPlugin } from '../../../model';\n\n// Dummy plugins to test loading\nexport const BertPanel1: PanelPlugin<{ option1: string }> = {\n  PanelComponent: () => null,\n  PanelQueryEditorComponent: function BertPanel1Editor({ value, onChange }) {\n    return (\n      <div>\n        <label htmlFor=\"editor-input\">BertPanel1 editor</label>\n        <input\n          type=\"text\"\n          id=\"editor-input\"\n          value={value.option1}\n          onChange={(e) => onChange({ ...value, option1: e.target.value })}\n        />\n      </div>\n    );\n  },\n  createInitialOptions: () => ({ option1: '' }),\n};\n\nexport const BertPanel2: PanelPlugin<{ option2: string }> = {\n  PanelComponent: () => null,\n  panelOptionsEditorComponents: [\n    {\n      label: 'Settings',\n      content: function BertPanel2Editor({ value, onChange }) {\n        return (\n          <div>\n            <label htmlFor=\"editor-input\">BertPanel2 editor</label>\n            <input\n              type=\"text\"\n              id=\"editor-input\"\n              value={value.option2}\n              onChange={(e) => onChange({ ...value, option2: e.target.value })}\n            />\n          </div>\n        );\n      },\n    },\n    {\n      label: 'Custom Tab',\n      content: function Editor() {\n        return <div>custom content</div>;\n      },\n    },\n  ],\n  createInitialOptions: () => ({ option2: '' }),\n};\n"],"names":["BertPanel1","PanelComponent","PanelQueryEditorComponent","BertPanel1Editor","value","onChange","div","label","htmlFor","input","type","id","option1","e","target","createInitialOptions","BertPanel2","panelOptionsEditorComponents","content","BertPanel2Editor","option2","Editor"],"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;AAEA,gCAAgC;AAChC,OAAO,MAAMA,UAAU,GAAqC;IAC1DC,cAAc,EAAE,IAAM,IAAI;IAC1BC,yBAAyB,EAAE,SAASC,gBAAgB,CAAC,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,EAAE;QACxE,qBACE,MAACC,KAAG;;8BACF,KAACC,OAAK;oBAACC,OAAO,EAAC,cAAc;8BAAC,mBAAiB;kBAAQ;8BACvD,KAACC,OAAK;oBACJC,IAAI,EAAC,MAAM;oBACXC,EAAE,EAAC,cAAc;oBACjBP,KAAK,EAAEA,KAAK,CAACQ,OAAO;oBACpBP,QAAQ,EAAE,CAACQ,CAAC,GAAKR,QAAQ,CAAC;4BAAE,GAAGD,KAAK;4BAAEQ,OAAO,EAAEC,CAAC,CAACC,MAAM,CAACV,KAAK;yBAAE,CAAC;kBAChE;;UACE,CACN;IACJ,CAAC;IACDW,oBAAoB,EAAE,IAAO,CAAA;YAAEH,OAAO,EAAE,EAAE;SAAE,CAAA,AAAC;CAC9C,CAAC;AAEF,OAAO,MAAMI,UAAU,GAAqC;IAC1Df,cAAc,EAAE,IAAM,IAAI;IAC1BgB,4BAA4B,EAAE;QAC5B;YACEV,KAAK,EAAE,UAAU;YACjBW,OAAO,EAAE,SAASC,gBAAgB,CAAC,EAAEf,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAAE,EAAE;gBACtD,qBACE,MAACC,KAAG;;sCACF,KAACC,OAAK;4BAACC,OAAO,EAAC,cAAc;sCAAC,mBAAiB;0BAAQ;sCACvD,KAACC,OAAK;4BACJC,IAAI,EAAC,MAAM;4BACXC,EAAE,EAAC,cAAc;4BACjBP,KAAK,EAAEA,KAAK,CAACgB,OAAO;4BACpBf,QAAQ,EAAE,CAACQ,CAAC,GAAKR,QAAQ,CAAC;oCAAE,GAAGD,KAAK;oCAAEgB,OAAO,EAAEP,CAAC,CAACC,MAAM,CAACV,KAAK;iCAAE,CAAC;0BAChE;;kBACE,CACN;YACJ,CAAC;SACF;QACD;YACEG,KAAK,EAAE,YAAY;YACnBW,OAAO,EAAE,SAASG,MAAM,GAAG;gBACzB,qBAAO,KAACf,KAAG;8BAAC,gBAAc;kBAAM,CAAC;YACnC,CAAC;SACF;KACF;IACDS,oBAAoB,EAAE,IAAO,CAAA;YAAEK,OAAO,EAAE,EAAE;SAAE,CAAA,AAAC;CAC9C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/plugin-system",
-  "version": "0.22.0",
+  "version": "0.23.1",
   "description": "The plugin feature in Pereses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -27,8 +27,8 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.22.0",
-    "@perses-dev/core": "0.22.0",
+    "@perses-dev/components": "0.23.1",
+    "@perses-dev/core": "0.23.1",
     "immer": "^9.0.15",
     "use-immer": "^0.7.0",
     "use-query-params": "^2.1.2"