@perses-dev/explore 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/components/ExploreManager/ExploreManager.js

@@ -0,0 +1,109 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ExploreManager", {
+    enumerable: true,
+    get: function() {
+        return ExploreManager;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = require("react");
+const _ExploreToolbar = require("../ExploreToolbar");
+const _ExplorerManagerProvider = require("./ExplorerManagerProvider");
+function ExploreManager(props) {
+    const { exploreTitleComponent } = props;
+    const { explorer, setExplorer } = (0, _ExplorerManagerProvider.useExplorerManagerContext)();
+    const plugins = (0, _pluginsystem.useListPluginMetadata)([
+        'Explore'
+    ]);
+    const smallScreen = (0, _material.useMediaQuery)('(max-width: 768px)');
+    const explorerPluginsMap = (0, _react.useMemo)(()=>Object.fromEntries(plugins.data?.map((plugin)=>[
+                `${plugin.module.name}-${plugin.spec.name}`,
+                plugin
+            ]) ?? []), [
+        plugins.data
+    ]);
+    (0, _react.useEffect)(()=>{
+        const plugins = Object.keys(explorerPluginsMap);
+        if (!explorer && plugins?.[0]) {
+            setExplorer(plugins[0]);
+        }
+    }, [
+        explorerPluginsMap,
+        explorer,
+        setExplorer
+    ]);
+    const currentPlugin = explorer ? explorerPluginsMap[explorer] : undefined;
+    if (!explorer) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
+            children: "No explorer plugin available"
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        sx: {
+            width: '100%'
+        },
+        px: 2,
+        pb: 2,
+        pt: 1.5,
+        gap: 3,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExploreToolbar.ExploreToolbar, {
+                exploreTitleComponent: exploreTitleComponent
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+                direction: smallScreen ? 'column' : 'row',
+                gap: 2,
+                sx: {
+                    width: '100%'
+                },
+                children: [
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tabs, {
+                        orientation: smallScreen ? 'horizontal' : 'vertical',
+                        value: explorer,
+                        onChange: (_, state)=>setExplorer(state),
+                        variant: smallScreen ? 'fullWidth' : 'scrollable',
+                        sx: {
+                            borderRight: smallScreen ? 0 : 1,
+                            borderBottom: smallScreen ? 1 : 0,
+                            borderColor: 'divider',
+                            minWidth: '100px'
+                        },
+                        children: plugins.data?.map((plugin)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                                value: `${plugin.module.name}-${plugin.spec.name}`,
+                                label: plugin.spec.display.name
+                            }, `${plugin.module.name}-${plugin.spec.name}`))
+                    }),
+                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Card, {
+                        sx: {
+                            padding: '10px',
+                            width: '100%'
+                        },
+                        children: currentPlugin && /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginLoaderComponent, {
+                            plugin: {
+                                name: currentPlugin.spec.name,
+                                moduleName: currentPlugin.module.name
+                            }
+                        }, `${currentPlugin.module.name}-${currentPlugin.spec.name}`)
+                    })
+                ]
+            })
+        ]
+    });
+}

package/dist/cjs/components/ExploreManager/ExplorerManagerProvider.js

@@ -0,0 +1,84 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    ExplorerManagerProvider: function() {
+        return ExplorerManagerProvider;
+    },
+    useExplorerManagerContext: function() {
+        return useExplorerManagerContext;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = require("react");
+const ExplorerManagerContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function ExplorerManagerProvider({ children, store: externalStore }) {
+    // cache the state of currently not rendered explore UIs
+    const [explorerStateCache, setExplorerStateCache] = (0, _react.useState)({});
+    // local store in case external store is not provided by prop
+    const localStore = (0, _react.useState)({
+        explorer: undefined,
+        data: {}
+    });
+    // use store provided by 'store' prop if available, otherwise use local store
+    const [explorerState, setExplorerState] = externalStore ? externalStore : localStore;
+    const { explorer, data } = explorerState;
+    function setExplorer(newExplorer) {
+        if (explorer) {
+            // store current explorer state
+            explorerStateCache[explorer] = {
+                data
+            };
+            setExplorerStateCache(explorerStateCache);
+        }
+        // restore previous explorer state (if any)
+        const state = explorerStateCache[newExplorer] ?? {
+            data: {}
+        };
+        setExplorerState({
+            explorer: newExplorer,
+            data: state.data
+        });
+    }
+    function setData(newData) {
+        setExplorerState({
+            explorer,
+            data: newData
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(ExplorerManagerContext.Provider, {
+        value: {
+            explorer,
+            data,
+            setExplorer,
+            setData
+        },
+        children: children
+    });
+}
+function useExplorerManagerContext() {
+    const ctx = (0, _react.useContext)(ExplorerManagerContext);
+    if (ctx === undefined) {
+        throw new Error('No ExplorerManagerContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}

package/dist/cjs/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js

@@ -0,0 +1,45 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "ExplorerManagerProviderWithQueryParams", {
+    enumerable: true,
+    get: function() {
+        return ExplorerManagerProviderWithQueryParams;
+    }
+});
+const _jsxruntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _usequeryparams = require("use-query-params");
+const _ExplorerManagerProvider = require("./ExplorerManagerProvider");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const exploreQueryConfig = {
+    explorer: (0, _usequeryparams.withDefault)(_usequeryparams.StringParam, undefined),
+    data: (0, _usequeryparams.withDefault)(_usequeryparams.JsonParam, {})
+};
+function ExplorerManagerProviderWithQueryParams({ children }) {
+    const [queryParams, setQueryParams] = (0, _usequeryparams.useQueryParams)(exploreQueryConfig);
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExplorerManagerProvider.ExplorerManagerProvider, {
+        store: [
+            queryParams,
+            setQueryParams
+        ],
+        children: children
+    });
+}

package/dist/cjs/components/ExploreManager/index.js

@@ -0,0 +1,32 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_export_star(require("./ExploreManager"), exports);
+_export_star(require("./ExplorerManagerProvider"), exports);
+_export_star(require("./query-params"), exports);
+function _export_star(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {
+            Object.defineProperty(to, k, {
+                enumerable: true,
+                get: function() {
+                    return from[k];
+                }
+            });
+        }
+    });
+    return from;
+}

package/dist/cjs/components/ExploreManager/query-params.js

@@ -0,0 +1,49 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    explorerQueryConfig: function() {
+        return explorerQueryConfig;
+    },
+    useExplorerQueryParams: function() {
+        return useExplorerQueryParams;
+    }
+});
+const _usequeryparams = require("use-query-params");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _qs = require("qs");
+const explorerQueryConfig = {
+    refresh: _pluginsystem.TimeRangeParam,
+    start: _pluginsystem.TimeRangeParam,
+    end: _pluginsystem.TimeRangeParam,
+    explorer: _usequeryparams.StringParam,
+    data: _usequeryparams.JsonParam
+};
+function useExplorerQueryParams(inputs) {
+    const [query] = (0, _usequeryparams.useQueryParams)(explorerQueryConfig, {
+        updateType: 'replaceIn'
+    });
+    return (0, _qs.stringify)((0, _usequeryparams.encodeQueryParams)(explorerQueryConfig, {
+        ...query,
+        ...inputs
+    }));
+}

package/dist/cjs/components/ExploreToolbar/ExploreToolbar.js

@@ -22,9 +22,15 @@ Object.defineProperty(exports, "ExploreToolbar", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _dashboards = require("@perses-dev/dashboards");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 const ExploreToolbar = (props)=>{
-    const { exploreTitleComponent  } = props;
+    const { exploreTitleComponent } = props;
     const isBiggerThanLg = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('lg'));
     const testId = 'explore-toolbar';
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
@@ -42,7 +48,7 @@ const ExploreToolbar = (props)=>{
                     ml: "auto",
                     flexWrap: isBiggerThanLg ? 'nowrap' : 'wrap-reverse',
                     justifyContent: "end",
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.TimeRangeControls, {})
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeControls, {})
                 })
             ]
         })

package/dist/cjs/components/{TimeSeriesQueryEditor/index.js → index.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -14,7 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./TimeSeriesQueryEditor"), exports);
+_export_star(require("./ExploreManager"), exports);
+_export_star(require("./ExploreToolbar"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _export_star(require("./views"), exports);
+_export_star(require("./components"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/views/ViewExplore/ViewExplore.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 The Perses Authors
 // Licensed under the Apache License, Version 2.0 (the "License");
 // you may not use this file except in compliance with the License.
 // You may obtain a copy of the License at
@@ -26,38 +26,37 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _dashboards = require("@perses-dev/dashboards");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _ViewExploreApp = require("./ViewExploreApp");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function ViewExplore(props) {
-    const { dashboardResource , datasourceApi , externalVariableDefinitions , sx , exploreTitleComponent , ...others } = props;
+    const { datasourceApi, externalVariableDefinitions, sx, exploreTitleComponent, ...others } = props;
     const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(_core.DEFAULT_DASHBOARD_DURATION);
     const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(_core.DEFAULT_REFRESH_INTERVAL);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.DatasourceStoreProvider, {
-        dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.DashboardProvider, {
-            initialState: {
-                dashboardResource,
-                isEditMode: true
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
-                initialTimeRange: initialTimeRange,
-                initialRefreshInterval: initialRefreshInterval,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.TemplateVariableProvider, {
-                    externalVariableDefinitions: externalVariableDefinitions,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        sx: (0, _components.combineSx)({
-                            display: 'flex',
-                            width: '100%',
-                            height: '100%',
-                            position: 'relative',
-                            overflow: 'hidden'
-                        }, sx),
-                        ...others,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ViewExploreApp.ViewExploreApp, {
-                                exploreTitleComponent: exploreTitleComponent
-                            })
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
+            initialTimeRange: initialTimeRange,
+            initialRefreshInterval: initialRefreshInterval,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.VariableProvider, {
+                externalVariableDefinitions: externalVariableDefinitions,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: (0, _components.combineSx)({
+                        display: 'flex',
+                        width: '100%',
+                        height: '100%',
+                        position: 'relative',
+                        overflow: 'hidden'
+                    }, sx),
+                    ...others,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: _components.ErrorAlert,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ViewExploreApp.ViewExploreApp, {
+                            exploreTitleComponent: exploreTitleComponent
                         })
                     })
                 })

package/dist/cjs/views/ViewExplore/ViewExploreApp.js

@@ -23,26 +23,11 @@ Object.defineProperty(exports, "ViewExploreApp", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _PanelEditorForm = require("../../components/PanelEditor/PanelEditorForm");
+const _components1 = require("../../components");
+const _ExplorerManagerProviderWithQueryParams = require("../../components/ExploreManager/ExplorerManagerProviderWithQueryParams");
 function ViewExploreApp(props) {
-    const { exploreTitleComponent  } = props;
+    const { exploreTitleComponent } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
-    const data = {
-        groupId: 0,
-        panelDefinition: {
-            kind: 'Panel',
-            spec: {
-                display: {
-                    name: ''
-                },
-                plugin: {
-                    kind: 'TimeSeriesChart',
-                    spec: {}
-                },
-                queries: []
-            }
-        }
-    };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
             flexGrow: 1,
@@ -54,10 +39,10 @@ function ViewExploreApp(props) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
             chartsTheme: chartsTheme,
             enablePinning: false,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
-                initialAction: "update",
-                initialValues: data,
-                exploreTitleComponent: exploreTitleComponent
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExplorerManagerProviderWithQueryParams.ExplorerManagerProviderWithQueryParams, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.ExploreManager, {
+                    exploreTitleComponent: exploreTitleComponent
+                })
             })
         })
     });

package/dist/components/ExploreManager/ExploreManager.d.ts

@@ -0,0 +1,6 @@
+import { ReactElement, ReactNode } from 'react';
+export interface ExploreManagerProps {
+    exploreTitleComponent?: ReactNode;
+}
+export declare function ExploreManager(props: ExploreManagerProps): ReactElement;
+//# sourceMappingURL=ExploreManager.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ExploreManager.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExploreManager.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAsB,MAAM,OAAO,CAAC;AAIpE,MAAM,WAAW,mBAAmB;IAClC,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,mBAAmB,GAAG,YAAY,CAkEvE"}

package/dist/components/ExploreManager/ExploreManager.js

@@ -0,0 +1,101 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, Stack, Tab, Tabs, useMediaQuery } from '@mui/material';
+import { PluginLoaderComponent, useListPluginMetadata } from '@perses-dev/plugin-system';
+import { useEffect, useMemo } from 'react';
+import { ExploreToolbar } from '../ExploreToolbar';
+import { useExplorerManagerContext } from './ExplorerManagerProvider';
+export function ExploreManager(props) {
+    const { exploreTitleComponent } = props;
+    const { explorer, setExplorer } = useExplorerManagerContext();
+    const plugins = useListPluginMetadata([
+        'Explore'
+    ]);
+    const smallScreen = useMediaQuery('(max-width: 768px)');
+    const explorerPluginsMap = useMemo(()=>Object.fromEntries(plugins.data?.map((plugin)=>[
+                `${plugin.module.name}-${plugin.spec.name}`,
+                plugin
+            ]) ?? []), [
+        plugins.data
+    ]);
+    useEffect(()=>{
+        const plugins = Object.keys(explorerPluginsMap);
+        if (!explorer && plugins?.[0]) {
+            setExplorer(plugins[0]);
+        }
+    }, [
+        explorerPluginsMap,
+        explorer,
+        setExplorer
+    ]);
+    const currentPlugin = explorer ? explorerPluginsMap[explorer] : undefined;
+    if (!explorer) {
+        return /*#__PURE__*/ _jsx("div", {
+            children: "No explorer plugin available"
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            width: '100%'
+        },
+        px: 2,
+        pb: 2,
+        pt: 1.5,
+        gap: 3,
+        children: [
+            /*#__PURE__*/ _jsx(ExploreToolbar, {
+                exploreTitleComponent: exploreTitleComponent
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                direction: smallScreen ? 'column' : 'row',
+                gap: 2,
+                sx: {
+                    width: '100%'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Tabs, {
+                        orientation: smallScreen ? 'horizontal' : 'vertical',
+                        value: explorer,
+                        onChange: (_, state)=>setExplorer(state),
+                        variant: smallScreen ? 'fullWidth' : 'scrollable',
+                        sx: {
+                            borderRight: smallScreen ? 0 : 1,
+                            borderBottom: smallScreen ? 1 : 0,
+                            borderColor: 'divider',
+                            minWidth: '100px'
+                        },
+                        children: plugins.data?.map((plugin)=>/*#__PURE__*/ _jsx(Tab, {
+                                value: `${plugin.module.name}-${plugin.spec.name}`,
+                                label: plugin.spec.display.name
+                            }, `${plugin.module.name}-${plugin.spec.name}`))
+                    }),
+                    /*#__PURE__*/ _jsx(Card, {
+                        sx: {
+                            padding: '10px',
+                            width: '100%'
+                        },
+                        children: currentPlugin && /*#__PURE__*/ _jsx(PluginLoaderComponent, {
+                            plugin: {
+                                name: currentPlugin.spec.name,
+                                moduleName: currentPlugin.module.name
+                            }
+                        }, `${currentPlugin.module.name}-${currentPlugin.spec.name}`)
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=ExploreManager.js.map

package/dist/components/ExploreManager/ExploreManager.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ExploreManager/ExploreManager.tsx"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Card, Stack, Tab, Tabs, useMediaQuery } from '@mui/material';\nimport { PluginLoaderComponent, useListPluginMetadata } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode, useEffect, useMemo } from 'react';\nimport { ExploreToolbar } from '../ExploreToolbar';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\nexport interface ExploreManagerProps {\n  exploreTitleComponent?: ReactNode;\n}\n\nexport function ExploreManager(props: ExploreManagerProps): ReactElement {\n  const { exploreTitleComponent } = props;\n  const { explorer, setExplorer } = useExplorerManagerContext();\n\n  const plugins = useListPluginMetadata(['Explore']);\n\n  const smallScreen = useMediaQuery('(max-width: 768px)');\n\n  const explorerPluginsMap = useMemo(\n    () =>\n      Object.fromEntries(plugins.data?.map((plugin) => [`${plugin.module.name}-${plugin.spec.name}`, plugin]) ?? []),\n    [plugins.data]\n  );\n\n  useEffect(() => {\n    const plugins = Object.keys(explorerPluginsMap);\n    if (!explorer && plugins?.[0]) {\n      setExplorer(plugins[0]);\n    }\n  }, [explorerPluginsMap, explorer, setExplorer]);\n\n  const currentPlugin = explorer ? explorerPluginsMap[explorer] : undefined;\n\n  if (!explorer) {\n    return <div>No explorer plugin available</div>;\n  }\n\n  return (\n    <Stack sx={{ width: '100%' }} px={2} pb={2} pt={1.5} gap={3}>\n      <ExploreToolbar exploreTitleComponent={exploreTitleComponent} />\n\n      <Stack direction={smallScreen ? 'column' : 'row'} gap={2} sx={{ width: '100%' }}>\n        <Tabs\n          orientation={smallScreen ? 'horizontal' : 'vertical'}\n          value={explorer}\n          onChange={(_, state) => setExplorer(state)}\n          variant={smallScreen ? 'fullWidth' : 'scrollable'}\n          sx={{\n            borderRight: smallScreen ? 0 : 1,\n            borderBottom: smallScreen ? 1 : 0,\n            borderColor: 'divider',\n            minWidth: '100px',\n          }}\n        >\n          {plugins.data?.map((plugin) => (\n            <Tab\n              key={`${plugin.module.name}-${plugin.spec.name}`}\n              value={`${plugin.module.name}-${plugin.spec.name}`}\n              label={plugin.spec.display.name}\n            />\n          ))}\n        </Tabs>\n        <Card sx={{ padding: '10px', width: '100%' }}>\n          {currentPlugin && (\n            <PluginLoaderComponent\n              key={`${currentPlugin.module.name}-${currentPlugin.spec.name}`}\n              plugin={{\n                name: currentPlugin.spec.name,\n                moduleName: currentPlugin.module.name,\n              }}\n            />\n          )}\n        </Card>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Card","Stack","Tab","Tabs","useMediaQuery","PluginLoaderComponent","useListPluginMetadata","useEffect","useMemo","ExploreToolbar","useExplorerManagerContext","ExploreManager","props","exploreTitleComponent","explorer","setExplorer","plugins","smallScreen","explorerPluginsMap","Object","fromEntries","data","map","plugin","module","name","spec","keys","currentPlugin","undefined","div","sx","width","px","pb","pt","gap","direction","orientation","value","onChange","_","state","variant","borderRight","borderBottom","borderColor","minWidth","label","display","padding","moduleName"],"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,IAAI,EAAEC,KAAK,EAAEC,GAAG,EAAEC,IAAI,EAAEC,aAAa,QAAQ,gBAAgB;AACtE,SAASC,qBAAqB,EAAEC,qBAAqB,QAAQ,4BAA4B;AACzF,SAAkCC,SAAS,EAAEC,OAAO,QAAQ,QAAQ;AACpE,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,yBAAyB,QAAQ,4BAA4B;AAMtE,OAAO,SAASC,eAAeC,KAA0B;IACvD,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;IAClC,MAAM,EAAEE,QAAQ,EAAEC,WAAW,EAAE,GAAGL;IAElC,MAAMM,UAAUV,sBAAsB;QAAC;KAAU;IAEjD,MAAMW,cAAcb,cAAc;IAElC,MAAMc,qBAAqBV,QACzB,IACEW,OAAOC,WAAW,CAACJ,QAAQK,IAAI,EAAEC,IAAI,CAACC,SAAW;gBAAC,CAAC,EAAEA,OAAOC,MAAM,CAACC,IAAI,CAAC,CAAC,EAAEF,OAAOG,IAAI,CAACD,IAAI,CAAC,CAAC;gBAAEF;aAAO,KAAK,EAAE,GAC/G;QAACP,QAAQK,IAAI;KAAC;IAGhBd,UAAU;QACR,MAAMS,UAAUG,OAAOQ,IAAI,CAACT;QAC5B,IAAI,CAACJ,YAAYE,SAAS,CAAC,EAAE,EAAE;YAC7BD,YAAYC,OAAO,CAAC,EAAE;QACxB;IACF,GAAG;QAACE;QAAoBJ;QAAUC;KAAY;IAE9C,MAAMa,gBAAgBd,WAAWI,kBAAkB,CAACJ,SAAS,GAAGe;IAEhE,IAAI,CAACf,UAAU;QACb,qBAAO,KAACgB;sBAAI;;IACd;IAEA,qBACE,MAAC7B;QAAM8B,IAAI;YAAEC,OAAO;QAAO;QAAGC,IAAI;QAAGC,IAAI;QAAGC,IAAI;QAAKC,KAAK;;0BACxD,KAAC3B;gBAAeI,uBAAuBA;;0BAEvC,MAACZ;gBAAMoC,WAAWpB,cAAc,WAAW;gBAAOmB,KAAK;gBAAGL,IAAI;oBAAEC,OAAO;gBAAO;;kCAC5E,KAAC7B;wBACCmC,aAAarB,cAAc,eAAe;wBAC1CsB,OAAOzB;wBACP0B,UAAU,CAACC,GAAGC,QAAU3B,YAAY2B;wBACpCC,SAAS1B,cAAc,cAAc;wBACrCc,IAAI;4BACFa,aAAa3B,cAAc,IAAI;4BAC/B4B,cAAc5B,cAAc,IAAI;4BAChC6B,aAAa;4BACbC,UAAU;wBACZ;kCAEC/B,QAAQK,IAAI,EAAEC,IAAI,CAACC,uBAClB,KAACrB;gCAECqC,OAAO,CAAC,EAAEhB,OAAOC,MAAM,CAACC,IAAI,CAAC,CAAC,EAAEF,OAAOG,IAAI,CAACD,IAAI,CAAC,CAAC;gCAClDuB,OAAOzB,OAAOG,IAAI,CAACuB,OAAO,CAACxB,IAAI;+BAF1B,CAAC,EAAEF,OAAOC,MAAM,CAACC,IAAI,CAAC,CAAC,EAAEF,OAAOG,IAAI,CAACD,IAAI,CAAC,CAAC;;kCAMtD,KAACzB;wBAAK+B,IAAI;4BAAEmB,SAAS;4BAAQlB,OAAO;wBAAO;kCACxCJ,+BACC,KAACvB;4BAECkB,QAAQ;gCACNE,MAAMG,cAAcF,IAAI,CAACD,IAAI;gCAC7B0B,YAAYvB,cAAcJ,MAAM,CAACC,IAAI;4BACvC;2BAJK,CAAC,EAAEG,cAAcJ,MAAM,CAACC,IAAI,CAAC,CAAC,EAAEG,cAAcF,IAAI,CAACD,IAAI,CAAC,CAAC;;;;;;AAW5E"}

package/dist/components/ExploreManager/ExplorerManagerProvider.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement, ReactNode } from 'react';
+interface ExplorerState<T> {
+    explorer?: string;
+    data: T;
+}
+interface ExplorerManagerContextType<T> {
+    /** observability signal, for example metrics or traces */
+    explorer?: string;
+    data: T;
+    setExplorer: (explorer: string) => void;
+    setData: (data: T) => void;
+}
+interface ExplorerManagerProviderProps {
+    children: ReactNode;
+    store?: [ExplorerState<unknown>, (state: ExplorerState<unknown>) => void];
+}
+export declare function ExplorerManagerProvider({ children, store: externalStore, }: ExplorerManagerProviderProps): ReactElement;
+export declare function useExplorerManagerContext<T>(): ExplorerManagerContextType<T>;
+export {};
+//# sourceMappingURL=ExplorerManagerProvider.d.ts.map

package/dist/components/ExploreManager/ExplorerManagerProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExplorerManagerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAiB,YAAY,EAAE,SAAS,EAAwB,MAAM,OAAO,CAAC;AAErF,UAAU,aAAa,CAAC,CAAC;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,CAAC,CAAC;CAGT;AAED,UAAU,0BAA0B,CAAC,CAAC;IACpC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,CAAC,CAAC;IACR,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC5B;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC;CAC3E;AAED,wBAAgB,uBAAuB,CAAC,EACtC,QAAQ,EACR,KAAK,EAAE,aAAa,GACrB,EAAE,4BAA4B,GAAG,YAAY,CAgC7C;AAED,wBAAgB,yBAAyB,CAAC,CAAC,KAAK,0BAA0B,CAAC,CAAC,CAAC,CAM5E"}