@perses-dev/explore 0.46.0-rc1 → 0.47.0-rc0

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

@@ -62,9 +62,11 @@ function ExploreManager(props) {
                         },
                         children: [
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                                value: "metrics",
                                 label: "Metrics"
                             }),
                             /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
+                                value: "traces",
                                 label: "Traces"
                             })
                         ]
@@ -75,8 +77,8 @@ function ExploreManager(props) {
                             width: '100%'
                         },
                         children: [
-                            explorer === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_MetricsExplorer.MetricsExplorer, {}),
-                            explorer === 1 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TracesExplorer.TracesExplorer, {})
+                            explorer === 'metrics' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_MetricsExplorer.MetricsExplorer, {}),
+                            explorer === 'traces' && /*#__PURE__*/ (0, _jsxruntime.jsx)(_TracesExplorer.TracesExplorer, {})
                         ]
                     })
                 ]

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

@@ -72,75 +72,50 @@ function _interop_require_wildcard(obj, nodeInterop) {
     return newObj;
 }
 const ExplorerManagerContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
-function initExplorerStates(initialState) {
-    const result = [];
-    if ((initialState === null || initialState === void 0 ? void 0 : initialState.explorer) || (initialState === null || initialState === void 0 ? void 0 : initialState.tab) || (initialState === null || initialState === void 0 ? void 0 : initialState.queries)) {
-        var _initialState_explorer, _initialState_tab, _initialState_queries;
-        result[(_initialState_explorer = initialState === null || initialState === void 0 ? void 0 : initialState.explorer) !== null && _initialState_explorer !== void 0 ? _initialState_explorer : 0] = {
-            tab: (_initialState_tab = initialState === null || initialState === void 0 ? void 0 : initialState.tab) !== null && _initialState_tab !== void 0 ? _initialState_tab : 0,
-            queries: (_initialState_queries = initialState === null || initialState === void 0 ? void 0 : initialState.queries) !== null && _initialState_queries !== void 0 ? _initialState_queries : []
+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: 'metrics',
+        tab: 0,
+        queries: []
+    });
+    // use store provided by 'store' prop if available, otherwise use local store
+    const [explorerState, setExplorerState] = externalStore ? externalStore : localStore;
+    const { explorer, tab, queries } = explorerState;
+    function setExplorer(newExplorer) {
+        // store current explorer state
+        explorerStateCache[explorer] = {
+            tab,
+            queries
+        };
+        setExplorerStateCache(explorerStateCache);
+        var _explorerStateCache_newExplorer;
+        // restore previous explorer state (if any)
+        const state = (_explorerStateCache_newExplorer = explorerStateCache[newExplorer]) !== null && _explorerStateCache_newExplorer !== void 0 ? _explorerStateCache_newExplorer : {
+            tab: 0,
+            queries: []
         };
+        setExplorerState({
+            explorer: newExplorer,
+            tab: state.tab,
+            queries: state.queries
+        });
     }
-    return result;
-}
-function ExplorerManagerProvider({ children, initialState }) {
-    const [explorerStates, setExplorerStates] = (0, _react.useState)(initExplorerStates(initialState));
-    var _initialState_explorer;
-    const [explorer, setInternalExplorer] = (0, _react.useState)((_initialState_explorer = initialState === null || initialState === void 0 ? void 0 : initialState.explorer) !== null && _initialState_explorer !== void 0 ? _initialState_explorer : 0);
-    const tab = (0, _react.useMemo)(()=>{
-        var _explorerStates_explorer;
-        var _explorerStates_explorer_tab;
-        return (_explorerStates_explorer_tab = (_explorerStates_explorer = explorerStates[explorer]) === null || _explorerStates_explorer === void 0 ? void 0 : _explorerStates_explorer.tab) !== null && _explorerStates_explorer_tab !== void 0 ? _explorerStates_explorer_tab : 0;
-    }, [
-        explorer,
-        explorerStates
-    ]);
-    const queries = (0, _react.useMemo)(()=>{
-        var _explorerStates_explorer;
-        var _explorerStates_explorer_queries;
-        return (_explorerStates_explorer_queries = (_explorerStates_explorer = explorerStates[explorer]) === null || _explorerStates_explorer === void 0 ? void 0 : _explorerStates_explorer.queries) !== null && _explorerStates_explorer_queries !== void 0 ? _explorerStates_explorer_queries : [];
-    }, [
-        explorer,
-        explorerStates
-    ]);
-    function setExplorer(explorer) {
-        setInternalExplorer(explorer);
-        if (initialState === null || initialState === void 0 ? void 0 : initialState.setExplorer) {
-            var _explorerStates_explorer, _explorerStates_explorer1;
-            initialState.setExplorer(explorer);
-            initialState.setTab((_explorerStates_explorer = explorerStates[explorer]) === null || _explorerStates_explorer === void 0 ? void 0 : _explorerStates_explorer.tab);
-            initialState.setQueries((_explorerStates_explorer1 = explorerStates[explorer]) === null || _explorerStates_explorer1 === void 0 ? void 0 : _explorerStates_explorer1.queries);
-        }
+    function setTab(newTab) {
+        setExplorerState({
+            explorer,
+            tab: newTab,
+            queries
+        });
     }
-    function setTab(tab) {
-        var _state_explorer;
-        const state = [
-            ...explorerStates
-        ];
-        var _state_explorer_queries;
-        state[explorer] = {
+    function setQueries(newQueries) {
+        setExplorerState({
+            explorer,
             tab,
-            queries: (_state_explorer_queries = (_state_explorer = state[explorer]) === null || _state_explorer === void 0 ? void 0 : _state_explorer.queries) !== null && _state_explorer_queries !== void 0 ? _state_explorer_queries : []
-        };
-        setExplorerStates(state);
-        if (initialState === null || initialState === void 0 ? void 0 : initialState.setTab) {
-            initialState.setTab(tab);
-        }
-    }
-    function setQueries(queries) {
-        var _state_explorer;
-        const state = [
-            ...explorerStates
-        ];
-        var _state_explorer_tab;
-        state[explorer] = {
-            tab: (_state_explorer_tab = (_state_explorer = state[explorer]) === null || _state_explorer === void 0 ? void 0 : _state_explorer.tab) !== null && _state_explorer_tab !== void 0 ? _state_explorer_tab : 0,
-            queries: queries
-        };
-        setExplorerStates(state);
-        if (initialState === null || initialState === void 0 ? void 0 : initialState.setQueries) {
-            initialState === null || initialState === void 0 ? void 0 : initialState.setQueries(queries);
-        }
+            queries: newQueries
+        });
     }
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(ExplorerManagerContext.Provider, {
         value: {

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

@@ -30,35 +30,20 @@ function _interop_require_default(obj) {
     };
 }
 const exploreQueryConfig = {
-    explorer: _usequeryparams.NumberParam,
-    tab: _usequeryparams.NumberParam,
-    queries: _usequeryparams.JsonParam
+    explorer: (0, _usequeryparams.withDefault)((0, _usequeryparams.createEnumParam)([
+        'metrics',
+        'traces'
+    ]), 'metrics'),
+    tab: (0, _usequeryparams.withDefault)(_usequeryparams.NumberParam, 0),
+    queries: (0, _usequeryparams.withDefault)(_usequeryparams.JsonParam, [])
 };
 function ExplorerManagerProviderWithQueryParams({ children }) {
-    const [queryParams, setQueryParams] = (0, _usequeryparams.useQueryParams)(exploreQueryConfig, {
-        updateType: 'replaceIn'
-    });
-    var _queryParams_explorer, _queryParams_tab;
-    const initialState = {
-        explorer: (_queryParams_explorer = queryParams.explorer) !== null && _queryParams_explorer !== void 0 ? _queryParams_explorer : undefined,
-        tab: (_queryParams_tab = queryParams.tab) !== null && _queryParams_tab !== void 0 ? _queryParams_tab : undefined,
-        queries: queryParams.queries ? queryParams.queries : undefined,
-        setExplorer: (explorer)=>{
-            setQueryParams({
-                explorer,
-                queries: undefined,
-                tab: undefined
-            });
-        },
-        setTab: (tab)=>setQueryParams({
-                tab
-            }),
-        setQueries: (queries)=>setQueryParams({
-                queries
-            })
-    };
+    const [queryParams, setQueryParams] = (0, _usequeryparams.useQueryParams)(exploreQueryConfig);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExplorerManagerProvider.ExplorerManagerProvider, {
-        initialState: initialState,
+        store: [
+            queryParams,
+            setQueryParams
+        ],
         children: children
     });
 }

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

@@ -23,20 +23,111 @@ Object.defineProperty(exports, "TracesExplorer", {
 const _jsxruntime = require("react/jsx-runtime");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _material = require("@mui/material");
-const _panelsplugin = require("@perses-dev/panels-plugin");
 const _components = require("@perses-dev/components");
-const _useresizeobserver = /*#__PURE__*/ _interop_require_default(require("use-resize-observer"));
+const _dashboards = require("@perses-dev/dashboards");
+const _core = require("@perses-dev/core");
 const _constants = require("./constants");
 const _ExplorerManagerProvider = require("./ExplorerManagerProvider");
-function _interop_require_default(obj) {
-    return obj && obj.__esModule ? obj : {
-        default: obj
-    };
+function SearchResultsPanel({ queries }) {
+    const { isFetching, isLoading, queryResults } = (0, _pluginsystem.useDataQueries)('TraceQuery');
+    // no query executed, show empty panel
+    if (queryResults.length === 0) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_jsxruntime.Fragment, {});
+    }
+    if (isLoading || isFetching) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.LoadingOverlay, {});
+    }
+    const queryError = queryResults.find((d)=>d.error);
+    if (queryError) {
+        throw queryError.error;
+    }
+    const tracesFound = queryResults.some((traceData)=>{
+        var _traceData_data;
+        var _traceData_data_searchResult;
+        return ((_traceData_data_searchResult = (_traceData_data = traceData.data) === null || _traceData_data === void 0 ? void 0 : _traceData_data.searchResult) !== null && _traceData_data_searchResult !== void 0 ? _traceData_data_searchResult : []).length > 0;
+    });
+    if (!tracesFound) {
+        return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.NoDataOverlay, {
+            resource: "traces"
+        });
+    }
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
+        sx: {
+            height: '100%'
+        },
+        gap: 2,
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                sx: {
+                    height: '35%',
+                    flexShrink: 0
+                },
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.Panel, {
+                    panelOptions: {
+                        hideHeader: true
+                    },
+                    definition: {
+                        kind: 'Panel',
+                        spec: {
+                            queries,
+                            display: {
+                                name: ''
+                            },
+                            plugin: {
+                                kind: 'ScatterChart',
+                                spec: {}
+                            }
+                        }
+                    }
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.Panel, {
+                sx: {
+                    flexGrow: 1
+                },
+                panelOptions: {
+                    hideHeader: true
+                },
+                definition: {
+                    kind: 'Panel',
+                    spec: {
+                        queries,
+                        display: {
+                            name: ''
+                        },
+                        plugin: {
+                            kind: 'TraceTable',
+                            spec: {}
+                        }
+                    }
+                }
+            })
+        ]
+    });
 }
-function TracePanel({ queries }) {
-    const { width, ref: boxRef } = (0, _useresizeobserver.default)();
-    const height = _constants.PANEL_PREVIEW_HEIGHT;
-    const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
+function TracingGanttChartPanel({ queries }) {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.Panel, {
+        panelOptions: {
+            hideHeader: true
+        },
+        definition: {
+            kind: 'Panel',
+            spec: {
+                queries,
+                display: {
+                    name: ''
+                },
+                plugin: {
+                    kind: 'TracingGanttChart',
+                    spec: {}
+                }
+            }
+        }
+    });
+}
+function TracesExplorer() {
+    var _queries_, _queries_1, _queries_2;
+    const { queries, setQueries } = (0, _ExplorerManagerProvider.useExplorerManagerContext)();
     // map TraceQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {
@@ -44,26 +135,9 @@ function TracePanel({ queries }) {
             spec: query.spec.plugin.spec
         };
     }) : [];
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        ref: boxRef,
-        height: height,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-            definitions: definitions,
-            options: {
-                suggestedStepMs
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_panelsplugin.ScatterChart.PanelComponent, {
-                contentDimensions: {
-                    width: width !== null && width !== void 0 ? width : _constants.PANEL_PREVIEW_DEFAULT_WIDTH,
-                    height
-                },
-                spec: {}
-            })
-        })
-    });
-}
-function TracesExplorer() {
-    const { tab, queries, setTab, setQueries } = (0, _ExplorerManagerProvider.useExplorerManagerContext)();
+    var _queries__spec_plugin_spec_query;
+    // Cannot cast to TempoTraceQuerySpec because 'tempo-plugin' types are not accessible in @perses-dev/explore
+    const isSingleTrace = queries.length === 1 && ((_queries_ = queries[0]) === null || _queries_ === void 0 ? void 0 : _queries_.kind) === 'TraceQuery' && ((_queries_1 = queries[0]) === null || _queries_1 === void 0 ? void 0 : _queries_1.spec.plugin.kind) === 'TempoTraceQuery' && (0, _core.isValidTraceId)((_queries__spec_plugin_spec_query = ((_queries_2 = queries[0]) === null || _queries_2 === void 0 ? void 0 : _queries_2.spec.plugin.spec).query) !== null && _queries__spec_plugin_spec_query !== void 0 ? _queries__spec_plugin_spec_query : ''); // eslint-disable-line @typescript-eslint/no-explicit-any
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
         gap: 2,
         sx: {
@@ -77,24 +151,20 @@ function TracesExplorer() {
                 onChange: setQueries,
                 queries: queries
             }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tabs, {
-                value: tab,
-                onChange: (_, state)=>setTab(state),
-                variant: "scrollable",
-                sx: {
-                    borderRight: 1,
-                    borderColor: 'divider'
-                },
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Tab, {
-                    label: "Graph"
-                })
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                gap: 1,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                    FallbackComponent: _components.ErrorAlert,
-                    children: tab === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(TracePanel, {
-                        queries: queries
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                FallbackComponent: _components.ErrorAlert,
+                resetKeys: [
+                    queries
+                ],
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
+                    definitions: definitions,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                        height: _constants.PANEL_PREVIEW_HEIGHT,
+                        children: isSingleTrace ? /*#__PURE__*/ (0, _jsxruntime.jsx)(TracingGanttChartPanel, {
+                            queries: queries
+                        }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(SearchResultsPanel, {
+                            queries: queries
+                        })
                     })
                 })
             })

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
@@ -42,7 +42,7 @@ function ViewExplore(props) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
             initialTimeRange: initialTimeRange,
             initialRefreshInterval: initialRefreshInterval,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.TemplateVariableProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.VariableProvider, {
                 externalVariableDefinitions: externalVariableDefinitions,
                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
                     sx: (0, _components.combineSx)({

package/dist/components/ExploreManager/ExploreManager.js

@@ -52,9 +52,11 @@ export function ExploreManager(props) {
                         },
                         children: [
                             /*#__PURE__*/ _jsx(Tab, {
+                                value: "metrics",
                                 label: "Metrics"
                             }),
                             /*#__PURE__*/ _jsx(Tab, {
+                                value: "traces",
                                 label: "Traces"
                             })
                         ]
@@ -65,8 +67,8 @@ export function ExploreManager(props) {
                             width: '100%'
                         },
                         children: [
-                            explorer === 0 && /*#__PURE__*/ _jsx(MetricsExplorer, {}),
-                            explorer === 1 && /*#__PURE__*/ _jsx(TracesExplorer, {})
+                            explorer === 'metrics' && /*#__PURE__*/ _jsx(MetricsExplorer, {}),
+                            explorer === 'traces' && /*#__PURE__*/ _jsx(TracesExplorer, {})
                         ]
                     })
                 ]

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

@@ -1 +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 { ReactNode } from 'react';\nimport { ExploreToolbar } from '../ExploreToolbar';\nimport { TracesExplorer } from './TracesExplorer';\nimport { MetricsExplorer } from './MetricsExplorer';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\nexport interface ExploreManagerProps {\n  exploreTitleComponent?: ReactNode;\n}\n\nexport function ExploreManager(props: ExploreManagerProps) {\n  const { exploreTitleComponent } = props;\n  const { explorer, setExplorer } = useExplorerManagerContext();\n\n  const smallScreen = useMediaQuery('(max-width: 768px)');\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          <Tab label=\"Metrics\" />\n          <Tab label=\"Traces\" />\n        </Tabs>\n        <Card sx={{ padding: '10px', width: '100%' }}>\n          {explorer === 0 && <MetricsExplorer />}\n          {explorer === 1 && <TracesExplorer />}\n        </Card>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Card","Stack","Tab","Tabs","useMediaQuery","ExploreToolbar","TracesExplorer","MetricsExplorer","useExplorerManagerContext","ExploreManager","props","exploreTitleComponent","explorer","setExplorer","smallScreen","sx","width","px","pb","pt","gap","direction","orientation","value","onChange","_","state","variant","borderRight","borderBottom","borderColor","minWidth","label","padding"],"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;AAEtE,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,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,cAAcV,cAAc;IAClC,qBACE,MAACH;QAAMc,IAAI;YAAEC,OAAO;QAAO;QAAGC,IAAI;QAAGC,IAAI;QAAGC,IAAI;QAAKC,KAAK;;0BACxD,KAACf;gBAAeM,uBAAuBA;;0BAEvC,MAACV;gBAAMoB,WAAWP,cAAc,WAAW;gBAAOM,KAAK;gBAAGL,IAAI;oBAAEC,OAAO;gBAAO;;kCAC5E,MAACb;wBACCmB,aAAaR,cAAc,eAAe;wBAC1CS,OAAOX;wBACPY,UAAU,CAACC,GAAGC,QAAUb,YAAYa;wBACpCC,SAASb,cAAc,cAAc;wBACrCC,IAAI;4BACFa,aAAad,cAAc,IAAI;4BAC/Be,cAAcf,cAAc,IAAI;4BAChCgB,aAAa;4BACbC,UAAU;wBACZ;;0CAEA,KAAC7B;gCAAI8B,OAAM;;0CACX,KAAC9B;gCAAI8B,OAAM;;;;kCAEb,MAAChC;wBAAKe,IAAI;4BAAEkB,SAAS;4BAAQjB,OAAO;wBAAO;;4BACxCJ,aAAa,mBAAK,KAACL;4BACnBK,aAAa,mBAAK,KAACN;;;;;;;AAK9B"}
+{"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 { ReactNode } from 'react';\nimport { ExploreToolbar } from '../ExploreToolbar';\nimport { TracesExplorer } from './TracesExplorer';\nimport { MetricsExplorer } from './MetricsExplorer';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\nexport interface ExploreManagerProps {\n  exploreTitleComponent?: ReactNode;\n}\n\nexport function ExploreManager(props: ExploreManagerProps) {\n  const { exploreTitleComponent } = props;\n  const { explorer, setExplorer } = useExplorerManagerContext();\n\n  const smallScreen = useMediaQuery('(max-width: 768px)');\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          <Tab value=\"metrics\" label=\"Metrics\" />\n          <Tab value=\"traces\" label=\"Traces\" />\n        </Tabs>\n        <Card sx={{ padding: '10px', width: '100%' }}>\n          {explorer === 'metrics' && <MetricsExplorer />}\n          {explorer === 'traces' && <TracesExplorer />}\n        </Card>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Card","Stack","Tab","Tabs","useMediaQuery","ExploreToolbar","TracesExplorer","MetricsExplorer","useExplorerManagerContext","ExploreManager","props","exploreTitleComponent","explorer","setExplorer","smallScreen","sx","width","px","pb","pt","gap","direction","orientation","value","onChange","_","state","variant","borderRight","borderBottom","borderColor","minWidth","label","padding"],"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;AAEtE,SAASC,cAAc,QAAQ,oBAAoB;AACnD,SAASC,cAAc,QAAQ,mBAAmB;AAClD,SAASC,eAAe,QAAQ,oBAAoB;AACpD,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,cAAcV,cAAc;IAClC,qBACE,MAACH;QAAMc,IAAI;YAAEC,OAAO;QAAO;QAAGC,IAAI;QAAGC,IAAI;QAAGC,IAAI;QAAKC,KAAK;;0BACxD,KAACf;gBAAeM,uBAAuBA;;0BAEvC,MAACV;gBAAMoB,WAAWP,cAAc,WAAW;gBAAOM,KAAK;gBAAGL,IAAI;oBAAEC,OAAO;gBAAO;;kCAC5E,MAACb;wBACCmB,aAAaR,cAAc,eAAe;wBAC1CS,OAAOX;wBACPY,UAAU,CAACC,GAAGC,QAAUb,YAAYa;wBACpCC,SAASb,cAAc,cAAc;wBACrCC,IAAI;4BACFa,aAAad,cAAc,IAAI;4BAC/Be,cAAcf,cAAc,IAAI;4BAChCgB,aAAa;4BACbC,UAAU;wBACZ;;0CAEA,KAAC7B;gCAAIqB,OAAM;gCAAUS,OAAM;;0CAC3B,KAAC9B;gCAAIqB,OAAM;gCAASS,OAAM;;;;kCAE5B,MAAChC;wBAAKe,IAAI;4BAAEkB,SAAS;4BAAQjB,OAAO;wBAAO;;4BACxCJ,aAAa,2BAAa,KAACL;4BAC3BK,aAAa,0BAAY,KAACN;;;;;;;AAKrC"}

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

@@ -1,26 +1,24 @@
 import { ReactNode } from 'react';
 import { QueryDefinition } from '@perses-dev/core';
+interface ExplorerState {
+    explorer: string;
+    tab: number;
+    queries: QueryDefinition[];
+}
 interface ExplorerManagerContextType {
-    explorer: number;
+    /** observability signal, for example metrics or traces */
+    explorer: string;
     tab: number;
     queries: QueryDefinition[];
-    setExplorer: (explorer: number) => void;
+    setExplorer: (explorer: string) => void;
     setTab: (tab: number) => void;
     setQueries: (queries: QueryDefinition[]) => void;
 }
-interface ExplorerManagerInitialState {
-    explorer?: number;
-    tab?: number;
-    queries?: QueryDefinition[];
-    setExplorer: (explorer: number | undefined) => void;
-    setTab: (tab: number | undefined) => void;
-    setQueries: (queries: QueryDefinition[] | undefined) => void;
-}
 interface ExplorerManagerProviderProps {
     children: ReactNode;
-    initialState?: ExplorerManagerInitialState;
+    store?: [ExplorerState, (state: ExplorerState) => void];
 }
-export declare function ExplorerManagerProvider({ children, initialState }: ExplorerManagerProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function ExplorerManagerProvider({ children, store: externalStore }: ExplorerManagerProviderProps): import("react/jsx-runtime").JSX.Element;
 export declare function useExplorerManagerContext(): ExplorerManagerContextType;
 export {};
 //# sourceMappingURL=ExplorerManagerProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExplorerManagerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProvider.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAiB,SAAS,EAAiC,MAAM,OAAO,CAAC;AACvF,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAOnD,UAAU,0BAA0B;IAClC,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,UAAU,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAClD;AAED,UAAU,2BAA2B;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,eAAe,EAAE,CAAC;IAC5B,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IACpD,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,GAAG,SAAS,KAAK,IAAI,CAAC;IAC1C,UAAU,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,GAAG,SAAS,KAAK,IAAI,CAAC;CAC9D;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,YAAY,CAAC,EAAE,2BAA2B,CAAC;CAC5C;AAaD,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,EAAE,4BAA4B,2CAsC/F;AAED,wBAAgB,yBAAyB,IAAI,0BAA0B,CAMtE"}
+{"version":3,"file":"ExplorerManagerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProvider.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAEnD,UAAU,aAAa;IACrB,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED,UAAU,0BAA0B;IAClC,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,eAAe,EAAE,CAAC;IAC3B,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,UAAU,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;CAClD;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,CAAC,aAAa,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC,CAAC;CACzD;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,4BAA4B,2CAgCvG;AAED,wBAAgB,yBAAyB,IAAI,0BAA0B,CAMtE"}

package/dist/components/ExploreManager/ExplorerManagerProvider.js

@@ -11,77 +11,52 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import React, { createContext, useContext, useMemo, useState } from 'react';
+import React, { createContext, useContext, useState } from 'react';
 const ExplorerManagerContext = /*#__PURE__*/ createContext(undefined);
-function initExplorerStates(initialState) {
-    const result = [];
-    if ((initialState === null || initialState === void 0 ? void 0 : initialState.explorer) || (initialState === null || initialState === void 0 ? void 0 : initialState.tab) || (initialState === null || initialState === void 0 ? void 0 : initialState.queries)) {
-        var _initialState_explorer, _initialState_tab, _initialState_queries;
-        result[(_initialState_explorer = initialState === null || initialState === void 0 ? void 0 : initialState.explorer) !== null && _initialState_explorer !== void 0 ? _initialState_explorer : 0] = {
-            tab: (_initialState_tab = initialState === null || initialState === void 0 ? void 0 : initialState.tab) !== null && _initialState_tab !== void 0 ? _initialState_tab : 0,
-            queries: (_initialState_queries = initialState === null || initialState === void 0 ? void 0 : initialState.queries) !== null && _initialState_queries !== void 0 ? _initialState_queries : []
+export function ExplorerManagerProvider({ children, store: externalStore }) {
+    // cache the state of currently not rendered explore UIs
+    const [explorerStateCache, setExplorerStateCache] = useState({});
+    // local store in case external store is not provided by prop
+    const localStore = useState({
+        explorer: 'metrics',
+        tab: 0,
+        queries: []
+    });
+    // use store provided by 'store' prop if available, otherwise use local store
+    const [explorerState, setExplorerState] = externalStore ? externalStore : localStore;
+    const { explorer, tab, queries } = explorerState;
+    function setExplorer(newExplorer) {
+        // store current explorer state
+        explorerStateCache[explorer] = {
+            tab,
+            queries
+        };
+        setExplorerStateCache(explorerStateCache);
+        var _explorerStateCache_newExplorer;
+        // restore previous explorer state (if any)
+        const state = (_explorerStateCache_newExplorer = explorerStateCache[newExplorer]) !== null && _explorerStateCache_newExplorer !== void 0 ? _explorerStateCache_newExplorer : {
+            tab: 0,
+            queries: []
         };
+        setExplorerState({
+            explorer: newExplorer,
+            tab: state.tab,
+            queries: state.queries
+        });
     }
-    return result;
-}
-export function ExplorerManagerProvider({ children, initialState }) {
-    const [explorerStates, setExplorerStates] = useState(initExplorerStates(initialState));
-    var _initialState_explorer;
-    const [explorer, setInternalExplorer] = useState((_initialState_explorer = initialState === null || initialState === void 0 ? void 0 : initialState.explorer) !== null && _initialState_explorer !== void 0 ? _initialState_explorer : 0);
-    const tab = useMemo(()=>{
-        var _explorerStates_explorer;
-        var _explorerStates_explorer_tab;
-        return (_explorerStates_explorer_tab = (_explorerStates_explorer = explorerStates[explorer]) === null || _explorerStates_explorer === void 0 ? void 0 : _explorerStates_explorer.tab) !== null && _explorerStates_explorer_tab !== void 0 ? _explorerStates_explorer_tab : 0;
-    }, [
-        explorer,
-        explorerStates
-    ]);
-    const queries = useMemo(()=>{
-        var _explorerStates_explorer;
-        var _explorerStates_explorer_queries;
-        return (_explorerStates_explorer_queries = (_explorerStates_explorer = explorerStates[explorer]) === null || _explorerStates_explorer === void 0 ? void 0 : _explorerStates_explorer.queries) !== null && _explorerStates_explorer_queries !== void 0 ? _explorerStates_explorer_queries : [];
-    }, [
-        explorer,
-        explorerStates
-    ]);
-    function setExplorer(explorer) {
-        setInternalExplorer(explorer);
-        if (initialState === null || initialState === void 0 ? void 0 : initialState.setExplorer) {
-            var _explorerStates_explorer, _explorerStates_explorer1;
-            initialState.setExplorer(explorer);
-            initialState.setTab((_explorerStates_explorer = explorerStates[explorer]) === null || _explorerStates_explorer === void 0 ? void 0 : _explorerStates_explorer.tab);
-            initialState.setQueries((_explorerStates_explorer1 = explorerStates[explorer]) === null || _explorerStates_explorer1 === void 0 ? void 0 : _explorerStates_explorer1.queries);
-        }
+    function setTab(newTab) {
+        setExplorerState({
+            explorer,
+            tab: newTab,
+            queries
+        });
     }
-    function setTab(tab) {
-        var _state_explorer;
-        const state = [
-            ...explorerStates
-        ];
-        var _state_explorer_queries;
-        state[explorer] = {
+    function setQueries(newQueries) {
+        setExplorerState({
+            explorer,
             tab,
-            queries: (_state_explorer_queries = (_state_explorer = state[explorer]) === null || _state_explorer === void 0 ? void 0 : _state_explorer.queries) !== null && _state_explorer_queries !== void 0 ? _state_explorer_queries : []
-        };
-        setExplorerStates(state);
-        if (initialState === null || initialState === void 0 ? void 0 : initialState.setTab) {
-            initialState.setTab(tab);
-        }
-    }
-    function setQueries(queries) {
-        var _state_explorer;
-        const state = [
-            ...explorerStates
-        ];
-        var _state_explorer_tab;
-        state[explorer] = {
-            tab: (_state_explorer_tab = (_state_explorer = state[explorer]) === null || _state_explorer === void 0 ? void 0 : _state_explorer.tab) !== null && _state_explorer_tab !== void 0 ? _state_explorer_tab : 0,
-            queries: queries
-        };
-        setExplorerStates(state);
-        if (initialState === null || initialState === void 0 ? void 0 : initialState.setQueries) {
-            initialState === null || initialState === void 0 ? void 0 : initialState.setQueries(queries);
-        }
+            queries: newQueries
+        });
     }
     return /*#__PURE__*/ _jsx(ExplorerManagerContext.Provider, {
         value: {

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ExploreManager/ExplorerManagerProvider.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 React, { createContext, ReactNode, useContext, useMemo, useState } from 'react';\nimport { QueryDefinition } from '@perses-dev/core';\n\ninterface ExplorerState {\n  tab: number;\n  queries: QueryDefinition[];\n}\n\ninterface ExplorerManagerContextType {\n  explorer: number;\n  tab: number;\n  queries: QueryDefinition[];\n  setExplorer: (explorer: number) => void;\n  setTab: (tab: number) => void;\n  setQueries: (queries: QueryDefinition[]) => void;\n}\n\ninterface ExplorerManagerInitialState {\n  explorer?: number;\n  tab?: number;\n  queries?: QueryDefinition[];\n  setExplorer: (explorer: number | undefined) => void;\n  setTab: (tab: number | undefined) => void;\n  setQueries: (queries: QueryDefinition[] | undefined) => void;\n}\n\nconst ExplorerManagerContext = createContext<ExplorerManagerContextType | undefined>(undefined);\n\ninterface ExplorerManagerProviderProps {\n  children: ReactNode;\n  initialState?: ExplorerManagerInitialState;\n}\n\nfunction initExplorerStates(initialState?: ExplorerManagerInitialState): ExplorerState[] {\n  const result: ExplorerState[] = [];\n  if (initialState?.explorer || initialState?.tab || initialState?.queries) {\n    result[initialState?.explorer ?? 0] = {\n      tab: initialState?.tab ?? 0,\n      queries: initialState?.queries ?? [],\n    };\n  }\n  return result;\n}\n\nexport function ExplorerManagerProvider({ children, initialState }: ExplorerManagerProviderProps) {\n  const [explorerStates, setExplorerStates] = useState<ExplorerState[]>(initExplorerStates(initialState));\n  const [explorer, setInternalExplorer] = useState<number>(initialState?.explorer ?? 0);\n  const tab: number = useMemo(() => explorerStates[explorer]?.tab ?? 0, [explorer, explorerStates]);\n  const queries: QueryDefinition[] = useMemo(() => explorerStates[explorer]?.queries ?? [], [explorer, explorerStates]);\n\n  function setExplorer(explorer: number) {\n    setInternalExplorer(explorer);\n    if (initialState?.setExplorer) {\n      initialState.setExplorer(explorer);\n      initialState.setTab(explorerStates[explorer]?.tab);\n      initialState.setQueries(explorerStates[explorer]?.queries);\n    }\n  }\n\n  function setTab(tab: number) {\n    const state = [...explorerStates];\n    state[explorer] = { tab, queries: state[explorer]?.queries ?? [] };\n    setExplorerStates(state);\n    if (initialState?.setTab) {\n      initialState.setTab(tab);\n    }\n  }\n\n  function setQueries(queries: QueryDefinition[]) {\n    const state = [...explorerStates];\n    state[explorer] = { tab: state[explorer]?.tab ?? 0, queries: queries };\n    setExplorerStates(state);\n    if (initialState?.setQueries) {\n      initialState?.setQueries(queries);\n    }\n  }\n\n  return (\n    <ExplorerManagerContext.Provider value={{ explorer, tab, queries, setExplorer, setTab, setQueries }}>\n      {children}\n    </ExplorerManagerContext.Provider>\n  );\n}\n\nexport function useExplorerManagerContext(): ExplorerManagerContextType {\n  const ctx = useContext(ExplorerManagerContext);\n  if (ctx === undefined) {\n    throw new Error('No ExplorerManagerContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n"],"names":["React","createContext","useContext","useMemo","useState","ExplorerManagerContext","undefined","initExplorerStates","initialState","result","explorer","tab","queries","ExplorerManagerProvider","children","explorerStates","setExplorerStates","setInternalExplorer","setExplorer","setTab","setQueries","state","Provider","value","useExplorerManagerContext","ctx","Error"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/ExploreManager/ExplorerManagerProvider.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 React, { createContext, ReactNode, useContext, useState } from 'react';\nimport { QueryDefinition } from '@perses-dev/core';\n\ninterface ExplorerState {\n  explorer: string;\n  tab: number;\n  queries: QueryDefinition[];\n}\n\ninterface ExplorerManagerContextType {\n  /** observability signal, for example metrics or traces */\n  explorer: string;\n  tab: number;\n  queries: QueryDefinition[];\n  setExplorer: (explorer: string) => void;\n  setTab: (tab: number) => void;\n  setQueries: (queries: QueryDefinition[]) => void;\n}\n\nconst ExplorerManagerContext = createContext<ExplorerManagerContextType | undefined>(undefined);\n\ninterface ExplorerManagerProviderProps {\n  children: ReactNode;\n  store?: [ExplorerState, (state: ExplorerState) => void];\n}\n\nexport function ExplorerManagerProvider({ children, store: externalStore }: ExplorerManagerProviderProps) {\n  // cache the state of currently not rendered explore UIs\n  const [explorerStateCache, setExplorerStateCache] = useState<Record<string, Omit<ExplorerState, 'explorer'>>>({});\n  // local store in case external store is not provided by prop\n  const localStore = useState<ExplorerState>({ explorer: 'metrics', tab: 0, queries: [] });\n  // use store provided by 'store' prop if available, otherwise use local store\n  const [explorerState, setExplorerState] = externalStore ? externalStore : localStore;\n  const { explorer, tab, queries } = explorerState;\n\n  function setExplorer(newExplorer: string) {\n    // store current explorer state\n    explorerStateCache[explorer] = { tab, queries };\n    setExplorerStateCache(explorerStateCache);\n\n    // restore previous explorer state (if any)\n    const state = explorerStateCache[newExplorer] ?? { tab: 0, queries: [] };\n    setExplorerState({ explorer: newExplorer, tab: state.tab, queries: state.queries });\n  }\n\n  function setTab(newTab: number) {\n    setExplorerState({ explorer, tab: newTab, queries });\n  }\n\n  function setQueries(newQueries: QueryDefinition[]) {\n    setExplorerState({ explorer, tab, queries: newQueries });\n  }\n\n  return (\n    <ExplorerManagerContext.Provider value={{ explorer, tab, queries, setExplorer, setTab, setQueries }}>\n      {children}\n    </ExplorerManagerContext.Provider>\n  );\n}\n\nexport function useExplorerManagerContext(): ExplorerManagerContextType {\n  const ctx = useContext(ExplorerManagerContext);\n  if (ctx === undefined) {\n    throw new Error('No ExplorerManagerContext found. Did you forget a Provider?');\n  }\n  return ctx;\n}\n"],"names":["React","createContext","useContext","useState","ExplorerManagerContext","undefined","ExplorerManagerProvider","children","store","externalStore","explorerStateCache","setExplorerStateCache","localStore","explorer","tab","queries","explorerState","setExplorerState","setExplorer","newExplorer","state","setTab","newTab","setQueries","newQueries","Provider","value","useExplorerManagerContext","ctx","Error"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,OAAOA,SAASC,aAAa,EAAaC,UAAU,EAAEC,QAAQ,QAAQ,QAAQ;AAmB9E,MAAMC,uCAAyBH,cAAsDI;AAOrF,OAAO,SAASC,wBAAwB,EAAEC,QAAQ,EAAEC,OAAOC,aAAa,EAAgC;IACtG,wDAAwD;IACxD,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGR,SAA0D,CAAC;IAC/G,6DAA6D;IAC7D,MAAMS,aAAaT,SAAwB;QAAEU,UAAU;QAAWC,KAAK;QAAGC,SAAS,EAAE;IAAC;IACtF,6EAA6E;IAC7E,MAAM,CAACC,eAAeC,iBAAiB,GAAGR,gBAAgBA,gBAAgBG;IAC1E,MAAM,EAAEC,QAAQ,EAAEC,GAAG,EAAEC,OAAO,EAAE,GAAGC;IAEnC,SAASE,YAAYC,WAAmB;QACtC,+BAA+B;QAC/BT,kBAAkB,CAACG,SAAS,GAAG;YAAEC;YAAKC;QAAQ;QAC9CJ,sBAAsBD;YAGRA;QADd,2CAA2C;QAC3C,MAAMU,QAAQV,CAAAA,kCAAAA,kBAAkB,CAACS,YAAY,cAA/BT,6CAAAA,kCAAmC;YAAEI,KAAK;YAAGC,SAAS,EAAE;QAAC;QACvEE,iBAAiB;YAAEJ,UAAUM;YAAaL,KAAKM,MAAMN,GAAG;YAAEC,SAASK,MAAML,OAAO;QAAC;IACnF;IAEA,SAASM,OAAOC,MAAc;QAC5BL,iBAAiB;YAAEJ;YAAUC,KAAKQ;YAAQP;QAAQ;IACpD;IAEA,SAASQ,WAAWC,UAA6B;QAC/CP,iBAAiB;YAAEJ;YAAUC;YAAKC,SAASS;QAAW;IACxD;IAEA,qBACE,KAACpB,uBAAuBqB,QAAQ;QAACC,OAAO;YAAEb;YAAUC;YAAKC;YAASG;YAAaG;YAAQE;QAAW;kBAC/FhB;;AAGP;AAEA,OAAO,SAASoB;IACd,MAAMC,MAAM1B,WAAWE;IACvB,IAAIwB,QAAQvB,WAAW;QACrB,MAAM,IAAIwB,MAAM;IAClB;IACA,OAAOD;AACT"}

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

@@ -1 +1 @@
-{"version":3,"file":"ExplorerManagerProviderWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProviderWithQueryParams.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAYzC,UAAU,2CAA2C;IACnD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,sCAAsC,CAAC,EAAE,QAAQ,EAAE,EAAE,2CAA2C,2CAe/G"}
+{"version":3,"file":"ExplorerManagerProviderWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProviderWithQueryParams.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAWzC,UAAU,2CAA2C;IACnD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,sCAAsC,CAAC,EAAE,QAAQ,EAAE,EAAE,2CAA2C,2CAI/G"}

package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js

@@ -12,38 +12,23 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { JsonParam, NumberParam, useQueryParams } from 'use-query-params';
+import { createEnumParam, JsonParam, NumberParam, useQueryParams, withDefault } from 'use-query-params';
 import { ExplorerManagerProvider } from './ExplorerManagerProvider';
 const exploreQueryConfig = {
-    explorer: NumberParam,
-    tab: NumberParam,
-    queries: JsonParam
+    explorer: withDefault(createEnumParam([
+        'metrics',
+        'traces'
+    ]), 'metrics'),
+    tab: withDefault(NumberParam, 0),
+    queries: withDefault(JsonParam, [])
 };
 export function ExplorerManagerProviderWithQueryParams({ children }) {
-    const [queryParams, setQueryParams] = useQueryParams(exploreQueryConfig, {
-        updateType: 'replaceIn'
-    });
-    var _queryParams_explorer, _queryParams_tab;
-    const initialState = {
-        explorer: (_queryParams_explorer = queryParams.explorer) !== null && _queryParams_explorer !== void 0 ? _queryParams_explorer : undefined,
-        tab: (_queryParams_tab = queryParams.tab) !== null && _queryParams_tab !== void 0 ? _queryParams_tab : undefined,
-        queries: queryParams.queries ? queryParams.queries : undefined,
-        setExplorer: (explorer)=>{
-            setQueryParams({
-                explorer,
-                queries: undefined,
-                tab: undefined
-            });
-        },
-        setTab: (tab)=>setQueryParams({
-                tab
-            }),
-        setQueries: (queries)=>setQueryParams({
-                queries
-            })
-    };
+    const [queryParams, setQueryParams] = useQueryParams(exploreQueryConfig);
     return /*#__PURE__*/ _jsx(ExplorerManagerProvider, {
-        initialState: initialState,
+        store: [
+            queryParams,
+            setQueryParams
+        ],
         children: children
     });
 }

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ExploreManager/ExplorerManagerProviderWithQueryParams.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 React, { ReactNode } from 'react';\n\nimport { JsonParam, NumberParam, useQueryParams } from 'use-query-params';\nimport { QueryDefinition } from '@perses-dev/core';\nimport { ExplorerManagerProvider } from './ExplorerManagerProvider';\n\nconst exploreQueryConfig = {\n  explorer: NumberParam,\n  tab: NumberParam,\n  queries: JsonParam,\n};\n\ninterface ExplorerManagerProviderWithQueryParamsProps {\n  children: ReactNode;\n}\n\nexport function ExplorerManagerProviderWithQueryParams({ children }: ExplorerManagerProviderWithQueryParamsProps) {\n  const [queryParams, setQueryParams] = useQueryParams(exploreQueryConfig, { updateType: 'replaceIn' });\n\n  const initialState = {\n    explorer: queryParams.explorer ?? undefined, // can be null, forcing to undefined\n    tab: queryParams.tab ?? undefined, // can be null, forcing to undefined\n    queries: queryParams.queries ? (queryParams.queries as QueryDefinition[]) : undefined,\n    setExplorer: (explorer: number | undefined) => {\n      setQueryParams({ explorer, queries: undefined, tab: undefined });\n    },\n    setTab: (tab: number | undefined) => setQueryParams({ tab }),\n    setQueries: (queries: QueryDefinition[] | undefined) => setQueryParams({ queries }),\n  };\n\n  return <ExplorerManagerProvider initialState={initialState}>{children}</ExplorerManagerProvider>;\n}\n"],"names":["React","JsonParam","NumberParam","useQueryParams","ExplorerManagerProvider","exploreQueryConfig","explorer","tab","queries","ExplorerManagerProviderWithQueryParams","children","queryParams","setQueryParams","updateType","initialState","undefined","setExplorer","setTab","setQueries"],"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,WAA0B,QAAQ;AAEzC,SAASC,SAAS,EAAEC,WAAW,EAAEC,cAAc,QAAQ,mBAAmB;AAE1E,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,MAAMC,qBAAqB;IACzBC,UAAUJ;IACVK,KAAKL;IACLM,SAASP;AACX;AAMA,OAAO,SAASQ,uCAAuC,EAAEC,QAAQ,EAA+C;IAC9G,MAAM,CAACC,aAAaC,eAAe,GAAGT,eAAeE,oBAAoB;QAAEQ,YAAY;IAAY;QAGvFF,uBACLA;IAFP,MAAMG,eAAe;QACnBR,UAAUK,CAAAA,wBAAAA,YAAYL,QAAQ,cAApBK,mCAAAA,wBAAwBI;QAClCR,KAAKI,CAAAA,mBAAAA,YAAYJ,GAAG,cAAfI,8BAAAA,mBAAmBI;QACxBP,SAASG,YAAYH,OAAO,GAAIG,YAAYH,OAAO,GAAyBO;QAC5EC,aAAa,CAACV;YACZM,eAAe;gBAAEN;gBAAUE,SAASO;gBAAWR,KAAKQ;YAAU;QAChE;QACAE,QAAQ,CAACV,MAA4BK,eAAe;gBAAEL;YAAI;QAC1DW,YAAY,CAACV,UAA2CI,eAAe;gBAAEJ;YAAQ;IACnF;IAEA,qBAAO,KAACJ;QAAwBU,cAAcA;kBAAeJ;;AAC/D"}
+{"version":3,"sources":["../../../src/components/ExploreManager/ExplorerManagerProviderWithQueryParams.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 React, { ReactNode } from 'react';\n\nimport { createEnumParam, JsonParam, NumberParam, useQueryParams, withDefault } from 'use-query-params';\nimport { ExplorerManagerProvider } from './ExplorerManagerProvider';\n\nconst exploreQueryConfig = {\n  explorer: withDefault(createEnumParam(['metrics', 'traces']), 'metrics'),\n  tab: withDefault(NumberParam, 0),\n  queries: withDefault(JsonParam, []),\n};\n\ninterface ExplorerManagerProviderWithQueryParamsProps {\n  children: ReactNode;\n}\n\nexport function ExplorerManagerProviderWithQueryParams({ children }: ExplorerManagerProviderWithQueryParamsProps) {\n  const [queryParams, setQueryParams] = useQueryParams(exploreQueryConfig);\n\n  return <ExplorerManagerProvider store={[queryParams, setQueryParams]}>{children}</ExplorerManagerProvider>;\n}\n"],"names":["React","createEnumParam","JsonParam","NumberParam","useQueryParams","withDefault","ExplorerManagerProvider","exploreQueryConfig","explorer","tab","queries","ExplorerManagerProviderWithQueryParams","children","queryParams","setQueryParams","store"],"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,WAA0B,QAAQ;AAEzC,SAASC,eAAe,EAAEC,SAAS,EAAEC,WAAW,EAAEC,cAAc,EAAEC,WAAW,QAAQ,mBAAmB;AACxG,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,MAAMC,qBAAqB;IACzBC,UAAUH,YAAYJ,gBAAgB;QAAC;QAAW;KAAS,GAAG;IAC9DQ,KAAKJ,YAAYF,aAAa;IAC9BO,SAASL,YAAYH,WAAW,EAAE;AACpC;AAMA,OAAO,SAASS,uCAAuC,EAAEC,QAAQ,EAA+C;IAC9G,MAAM,CAACC,aAAaC,eAAe,GAAGV,eAAeG;IAErD,qBAAO,KAACD;QAAwBS,OAAO;YAACF;YAAaC;SAAe;kBAAGF;;AACzE"}

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

@@ -1 +1 @@
-{"version":3,"file":"TracesExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/TracesExplorer.tsx"],"names":[],"mappings":"AAiDA,wBAAgB,cAAc,4CAoB7B"}
+{"version":3,"file":"TracesExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/TracesExplorer.tsx"],"names":[],"mappings":"AAwFA,wBAAgB,cAAc,4CAiC7B"}

package/dist/components/ExploreManager/TracesExplorer.js

@@ -10,18 +10,114 @@
 // 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 { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';
-import { Box, Stack, Tab, Tabs } from '@mui/material';
-import { ScatterChart } from '@perses-dev/panels-plugin';
-import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import useResizeObserver from 'use-resize-observer';
-import { PANEL_PREVIEW_DEFAULT_WIDTH, PANEL_PREVIEW_HEIGHT } from './constants';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';
+import { Box, Stack } from '@mui/material';
+import { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay } from '@perses-dev/components';
+import { Panel } from '@perses-dev/dashboards';
+import { isValidTraceId } from '@perses-dev/core';
+import { PANEL_PREVIEW_HEIGHT } from './constants';
 import { useExplorerManagerContext } from './ExplorerManagerProvider';
-function TracePanel({ queries }) {
-    const { width, ref: boxRef } = useResizeObserver();
-    const height = PANEL_PREVIEW_HEIGHT;
-    const suggestedStepMs = useSuggestedStepMs(width);
+function SearchResultsPanel({ queries }) {
+    const { isFetching, isLoading, queryResults } = useDataQueries('TraceQuery');
+    // no query executed, show empty panel
+    if (queryResults.length === 0) {
+        return /*#__PURE__*/ _jsx(_Fragment, {});
+    }
+    if (isLoading || isFetching) {
+        return /*#__PURE__*/ _jsx(LoadingOverlay, {});
+    }
+    const queryError = queryResults.find((d)=>d.error);
+    if (queryError) {
+        throw queryError.error;
+    }
+    const tracesFound = queryResults.some((traceData)=>{
+        var _traceData_data;
+        var _traceData_data_searchResult;
+        return ((_traceData_data_searchResult = (_traceData_data = traceData.data) === null || _traceData_data === void 0 ? void 0 : _traceData_data.searchResult) !== null && _traceData_data_searchResult !== void 0 ? _traceData_data_searchResult : []).length > 0;
+    });
+    if (!tracesFound) {
+        return /*#__PURE__*/ _jsx(NoDataOverlay, {
+            resource: "traces"
+        });
+    }
+    return /*#__PURE__*/ _jsxs(Stack, {
+        sx: {
+            height: '100%'
+        },
+        gap: 2,
+        children: [
+            /*#__PURE__*/ _jsx(Box, {
+                sx: {
+                    height: '35%',
+                    flexShrink: 0
+                },
+                children: /*#__PURE__*/ _jsx(Panel, {
+                    panelOptions: {
+                        hideHeader: true
+                    },
+                    definition: {
+                        kind: 'Panel',
+                        spec: {
+                            queries,
+                            display: {
+                                name: ''
+                            },
+                            plugin: {
+                                kind: 'ScatterChart',
+                                spec: {}
+                            }
+                        }
+                    }
+                })
+            }),
+            /*#__PURE__*/ _jsx(Panel, {
+                sx: {
+                    flexGrow: 1
+                },
+                panelOptions: {
+                    hideHeader: true
+                },
+                definition: {
+                    kind: 'Panel',
+                    spec: {
+                        queries,
+                        display: {
+                            name: ''
+                        },
+                        plugin: {
+                            kind: 'TraceTable',
+                            spec: {}
+                        }
+                    }
+                }
+            })
+        ]
+    });
+}
+function TracingGanttChartPanel({ queries }) {
+    return /*#__PURE__*/ _jsx(Panel, {
+        panelOptions: {
+            hideHeader: true
+        },
+        definition: {
+            kind: 'Panel',
+            spec: {
+                queries,
+                display: {
+                    name: ''
+                },
+                plugin: {
+                    kind: 'TracingGanttChart',
+                    spec: {}
+                }
+            }
+        }
+    });
+}
+export function TracesExplorer() {
+    var _queries_, _queries_1, _queries_2;
+    const { queries, setQueries } = useExplorerManagerContext();
     // map TraceQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {
@@ -29,26 +125,9 @@ function TracePanel({ queries }) {
             spec: query.spec.plugin.spec
         };
     }) : [];
-    return /*#__PURE__*/ _jsx(Box, {
-        ref: boxRef,
-        height: height,
-        children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
-            definitions: definitions,
-            options: {
-                suggestedStepMs
-            },
-            children: /*#__PURE__*/ _jsx(ScatterChart.PanelComponent, {
-                contentDimensions: {
-                    width: width !== null && width !== void 0 ? width : PANEL_PREVIEW_DEFAULT_WIDTH,
-                    height
-                },
-                spec: {}
-            })
-        })
-    });
-}
-export function TracesExplorer() {
-    const { tab, queries, setTab, setQueries } = useExplorerManagerContext();
+    var _queries__spec_plugin_spec_query;
+    // Cannot cast to TempoTraceQuerySpec because 'tempo-plugin' types are not accessible in @perses-dev/explore
+    const isSingleTrace = queries.length === 1 && ((_queries_ = queries[0]) === null || _queries_ === void 0 ? void 0 : _queries_.kind) === 'TraceQuery' && ((_queries_1 = queries[0]) === null || _queries_1 === void 0 ? void 0 : _queries_1.spec.plugin.kind) === 'TempoTraceQuery' && isValidTraceId((_queries__spec_plugin_spec_query = ((_queries_2 = queries[0]) === null || _queries_2 === void 0 ? void 0 : _queries_2.spec.plugin.spec).query) !== null && _queries__spec_plugin_spec_query !== void 0 ? _queries__spec_plugin_spec_query : ''); // eslint-disable-line @typescript-eslint/no-explicit-any
     return /*#__PURE__*/ _jsxs(Stack, {
         gap: 2,
         sx: {
@@ -62,24 +141,20 @@ export function TracesExplorer() {
                 onChange: setQueries,
                 queries: queries
             }),
-            /*#__PURE__*/ _jsx(Tabs, {
-                value: tab,
-                onChange: (_, state)=>setTab(state),
-                variant: "scrollable",
-                sx: {
-                    borderRight: 1,
-                    borderColor: 'divider'
-                },
-                children: /*#__PURE__*/ _jsx(Tab, {
-                    label: "Graph"
-                })
-            }),
-            /*#__PURE__*/ _jsx(Stack, {
-                gap: 1,
-                children: /*#__PURE__*/ _jsx(ErrorBoundary, {
-                    FallbackComponent: ErrorAlert,
-                    children: tab === 0 && /*#__PURE__*/ _jsx(TracePanel, {
-                        queries: queries
+            /*#__PURE__*/ _jsx(ErrorBoundary, {
+                FallbackComponent: ErrorAlert,
+                resetKeys: [
+                    queries
+                ],
+                children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
+                    definitions: definitions,
+                    children: /*#__PURE__*/ _jsx(Box, {
+                        height: PANEL_PREVIEW_HEIGHT,
+                        children: isSingleTrace ? /*#__PURE__*/ _jsx(TracingGanttChartPanel, {
+                            queries: queries
+                        }) : /*#__PURE__*/ _jsx(SearchResultsPanel, {
+                            queries: queries
+                        })
                     })
                 })
             })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ExploreManager/TracesExplorer.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 { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { Box, Stack, Tab, Tabs } from '@mui/material';\nimport { ScatterChart } from '@perses-dev/panels-plugin';\nimport { QueryDefinition } from '@perses-dev/core';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport useResizeObserver from 'use-resize-observer';\nimport { PANEL_PREVIEW_DEFAULT_WIDTH, PANEL_PREVIEW_HEIGHT } from './constants';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\nfunction TracePanel({ queries }: { queries: QueryDefinition[] }) {\n  const { width, ref: boxRef } = useResizeObserver();\n  const height = PANEL_PREVIEW_HEIGHT;\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  // map TraceQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  return (\n    <Box ref={boxRef} height={height}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n        <ScatterChart.PanelComponent\n          contentDimensions={{ width: width ?? PANEL_PREVIEW_DEFAULT_WIDTH, height }}\n          spec={{}}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nexport function TracesExplorer() {\n  const { tab, queries, setTab, setQueries } = useExplorerManagerContext();\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <MultiQueryEditor queryTypes={['TraceQuery']} onChange={setQueries} queries={queries} />\n\n      <Tabs\n        value={tab}\n        onChange={(_, state) => setTab(state)}\n        variant=\"scrollable\"\n        sx={{ borderRight: 1, borderColor: 'divider' }}\n      >\n        <Tab label=\"Graph\" />\n      </Tabs>\n      <Stack gap={1}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>{tab === 0 && <TracePanel queries={queries} />}</ErrorBoundary>\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","Box","Stack","Tab","Tabs","ScatterChart","ErrorAlert","ErrorBoundary","useResizeObserver","PANEL_PREVIEW_DEFAULT_WIDTH","PANEL_PREVIEW_HEIGHT","useExplorerManagerContext","TracePanel","queries","width","ref","boxRef","height","suggestedStepMs","definitions","length","map","query","kind","spec","plugin","options","PanelComponent","contentDimensions","TracesExplorer","tab","setTab","setQueries","gap","sx","queryTypes","onChange","value","_","state","variant","borderRight","borderColor","label","FallbackComponent"],"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,mBAAmB,EAAEC,gBAAgB,EAAEC,kBAAkB,QAAQ,4BAA4B;AACtG,SAASC,GAAG,EAAEC,KAAK,EAAEC,GAAG,EAAEC,IAAI,QAAQ,gBAAgB;AACtD,SAASC,YAAY,QAAQ,4BAA4B;AAEzD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,OAAOC,uBAAuB,sBAAsB;AACpD,SAASC,2BAA2B,EAAEC,oBAAoB,QAAQ,cAAc;AAChF,SAASC,yBAAyB,QAAQ,4BAA4B;AAEtE,SAASC,WAAW,EAAEC,OAAO,EAAkC;IAC7D,MAAM,EAAEC,KAAK,EAAEC,KAAKC,MAAM,EAAE,GAAGR;IAC/B,MAAMS,SAASP;IACf,MAAMQ,kBAAkBlB,mBAAmBc;IAE3C,sDAAsD;IACtD,MAAMK,cAAcN,QAAQO,MAAM,GAC9BP,QAAQQ,GAAG,CAAC,CAACC;QACX,OAAO;YACLC,MAAMD,MAAME,IAAI,CAACC,MAAM,CAACF,IAAI;YAC5BC,MAAMF,MAAME,IAAI,CAACC,MAAM,CAACD,IAAI;QAC9B;IACF,KACA,EAAE;IAEN,qBACE,KAACvB;QAAIc,KAAKC;QAAQC,QAAQA;kBACxB,cAAA,KAACnB;YAAoBqB,aAAaA;YAAaO,SAAS;gBAAER;YAAgB;sBACxE,cAAA,KAACb,aAAasB,cAAc;gBAC1BC,mBAAmB;oBAAEd,OAAOA,kBAAAA,mBAAAA,QAASL;oBAA6BQ;gBAAO;gBACzEO,MAAM,CAAC;;;;AAKjB;AAEA,OAAO,SAASK;IACd,MAAM,EAAEC,GAAG,EAAEjB,OAAO,EAAEkB,MAAM,EAAEC,UAAU,EAAE,GAAGrB;IAE7C,qBACE,MAACT;QAAM+B,KAAK;QAAGC,IAAI;YAAEpB,OAAO;QAAO;;0BACjC,KAACf;gBAAiBoC,YAAY;oBAAC;iBAAa;gBAAEC,UAAUJ;gBAAYnB,SAASA;;0BAE7E,KAACT;gBACCiC,OAAOP;gBACPM,UAAU,CAACE,GAAGC,QAAUR,OAAOQ;gBAC/BC,SAAQ;gBACRN,IAAI;oBAAEO,aAAa;oBAAGC,aAAa;gBAAU;0BAE7C,cAAA,KAACvC;oBAAIwC,OAAM;;;0BAEb,KAACzC;gBAAM+B,KAAK;0BACV,cAAA,KAAC1B;oBAAcqC,mBAAmBtC;8BAAawB,QAAQ,mBAAK,KAAClB;wBAAWC,SAASA;;;;;;AAIzF"}
+{"version":3,"sources":["../../../src/components/ExploreManager/TracesExplorer.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 { DataQueriesProvider, MultiQueryEditor, useDataQueries } from '@perses-dev/plugin-system';\nimport { Box, Stack } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary, LoadingOverlay, NoDataOverlay } from '@perses-dev/components';\nimport { Panel } from '@perses-dev/dashboards';\nimport { QueryDefinition, isValidTraceId } from '@perses-dev/core';\nimport { PANEL_PREVIEW_HEIGHT } from './constants';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\ninterface SearchResultsPanelProps {\n  queries: QueryDefinition[];\n}\n\nfunction SearchResultsPanel({ queries }: SearchResultsPanelProps) {\n  const { isFetching, isLoading, queryResults } = useDataQueries('TraceQuery');\n\n  // no query executed, show empty panel\n  if (queryResults.length === 0) {\n    return <></>;\n  }\n\n  if (isLoading || isFetching) {\n    return <LoadingOverlay />;\n  }\n\n  const queryError = queryResults.find((d) => d.error);\n  if (queryError) {\n    throw queryError.error;\n  }\n\n  const tracesFound = queryResults.some((traceData) => (traceData.data?.searchResult ?? []).length > 0);\n  if (!tracesFound) {\n    return <NoDataOverlay resource=\"traces\" />;\n  }\n\n  return (\n    <Stack sx={{ height: '100%' }} gap={2}>\n      <Box sx={{ height: '35%', flexShrink: 0 }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries, display: { name: '' }, plugin: { kind: 'ScatterChart', spec: {} } },\n          }}\n        />\n      </Box>\n      <Panel\n        sx={{ flexGrow: 1 }}\n        panelOptions={{\n          hideHeader: true,\n        }}\n        definition={{\n          kind: 'Panel',\n          spec: { queries, display: { name: '' }, plugin: { kind: 'TraceTable', spec: {} } },\n        }}\n      />\n    </Stack>\n  );\n}\n\nfunction TracingGanttChartPanel({ queries }: { queries: QueryDefinition[] }) {\n  return (\n    <Panel\n      panelOptions={{\n        hideHeader: true,\n      }}\n      definition={{\n        kind: 'Panel',\n        spec: { queries, display: { name: '' }, plugin: { kind: 'TracingGanttChart', spec: {} } },\n      }}\n    />\n  );\n}\n\nexport function TracesExplorer() {\n  const { queries, setQueries } = useExplorerManagerContext();\n\n  // map TraceQueryDefinition to Definition<UnknownSpec>\n  const definitions = queries.length\n    ? queries.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      })\n    : [];\n\n  // Cannot cast to TempoTraceQuerySpec because 'tempo-plugin' types are not accessible in @perses-dev/explore\n  const isSingleTrace =\n    queries.length === 1 &&\n    queries[0]?.kind === 'TraceQuery' &&\n    queries[0]?.spec.plugin.kind === 'TempoTraceQuery' &&\n    isValidTraceId((queries[0]?.spec.plugin.spec as any).query ?? ''); // eslint-disable-line @typescript-eslint/no-explicit-any\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <MultiQueryEditor queryTypes={['TraceQuery']} onChange={setQueries} queries={queries} />\n\n      <ErrorBoundary FallbackComponent={ErrorAlert} resetKeys={[queries]}>\n        <DataQueriesProvider definitions={definitions}>\n          <Box height={PANEL_PREVIEW_HEIGHT}>\n            {isSingleTrace ? <TracingGanttChartPanel queries={queries} /> : <SearchResultsPanel queries={queries} />}\n          </Box>\n        </DataQueriesProvider>\n      </ErrorBoundary>\n    </Stack>\n  );\n}\n"],"names":["DataQueriesProvider","MultiQueryEditor","useDataQueries","Box","Stack","ErrorAlert","ErrorBoundary","LoadingOverlay","NoDataOverlay","Panel","isValidTraceId","PANEL_PREVIEW_HEIGHT","useExplorerManagerContext","SearchResultsPanel","queries","isFetching","isLoading","queryResults","length","queryError","find","d","error","tracesFound","some","traceData","data","searchResult","resource","sx","height","gap","flexShrink","panelOptions","hideHeader","definition","kind","spec","display","name","plugin","flexGrow","TracingGanttChartPanel","TracesExplorer","setQueries","definitions","map","query","isSingleTrace","width","queryTypes","onChange","FallbackComponent","resetKeys"],"mappings":"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"}

package/dist/views/ViewExplore/ViewExplore.d.ts

@@ -1,9 +1,9 @@
 import { BoxProps } from '@mui/material';
-import { DatasourceStoreProviderProps, TemplateVariableProviderProps } from '@perses-dev/dashboards';
+import { DatasourceStoreProviderProps, VariableProviderProps } from '@perses-dev/dashboards';
 import React from 'react';
 export interface ViewExploreProps extends Omit<BoxProps, 'children'> {
     datasourceApi: DatasourceStoreProviderProps['datasourceApi'];
-    externalVariableDefinitions?: TemplateVariableProviderProps['externalVariableDefinitions'];
+    externalVariableDefinitions?: VariableProviderProps['externalVariableDefinitions'];
     exploreTitleComponent?: React.ReactNode;
 }
 export declare function ViewExplore(props: ViewExploreProps): import("react/jsx-runtime").JSX.Element;

package/dist/views/ViewExplore/ViewExplore.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewExplore.d.ts","sourceRoot":"","sources":["../../../src/views/ViewExplore/ViewExplore.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQ9C,OAAO,EACL,4BAA4B,EAC5B,6BAA6B,EAG9B,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAClE,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;IAC7D,2BAA2B,CAAC,EAAE,6BAA6B,CAAC,6BAA6B,CAAC,CAAC;IAC3F,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAkClD"}
+{"version":3,"file":"ViewExplore.d.ts","sourceRoot":"","sources":["../../../src/views/ViewExplore/ViewExplore.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQ9C,OAAO,EACL,4BAA4B,EAC5B,qBAAqB,EAGtB,MAAM,wBAAwB,CAAC;AAChC,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,gBAAiB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IAClE,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;IAC7D,2BAA2B,CAAC,EAAE,qBAAqB,CAAC,6BAA6B,CAAC,CAAC;IACnF,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzC;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,gBAAgB,2CAkClD"}

package/dist/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
@@ -15,7 +15,7 @@ import { Box } from '@mui/material';
 import { TimeRangeProviderWithQueryParams, useInitialRefreshInterval, useInitialTimeRange } from '@perses-dev/plugin-system';
 import { DEFAULT_DASHBOARD_DURATION, DEFAULT_REFRESH_INTERVAL } from '@perses-dev/core';
 import { ErrorAlert, ErrorBoundary, combineSx } from '@perses-dev/components';
-import { DatasourceStoreProvider, TemplateVariableProvider } from '@perses-dev/dashboards';
+import { DatasourceStoreProvider, VariableProvider } from '@perses-dev/dashboards';
 import React from 'react';
 import { ViewExploreApp } from './ViewExploreApp';
 export function ViewExplore(props) {
@@ -27,7 +27,7 @@ export function ViewExplore(props) {
         children: /*#__PURE__*/ _jsx(TimeRangeProviderWithQueryParams, {
             initialTimeRange: initialTimeRange,
             initialRefreshInterval: initialRefreshInterval,
-            children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
+            children: /*#__PURE__*/ _jsx(VariableProvider, {
                 externalVariableDefinitions: externalVariableDefinitions,
                 children: /*#__PURE__*/ _jsx(Box, {
                     sx: combineSx({

package/dist/views/ViewExplore/ViewExplore.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewExplore/ViewExplore.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box, BoxProps } from '@mui/material';\nimport {\n  TimeRangeProviderWithQueryParams,\n  useInitialRefreshInterval,\n  useInitialTimeRange,\n} from '@perses-dev/plugin-system';\nimport { DEFAULT_DASHBOARD_DURATION, DEFAULT_REFRESH_INTERVAL } from '@perses-dev/core';\nimport { ErrorAlert, ErrorBoundary, combineSx } from '@perses-dev/components';\nimport {\n  DatasourceStoreProviderProps,\n  TemplateVariableProviderProps,\n  DatasourceStoreProvider,\n  TemplateVariableProvider,\n} from '@perses-dev/dashboards';\nimport React from 'react';\nimport { ViewExploreApp } from './ViewExploreApp';\n\nexport interface ViewExploreProps extends Omit<BoxProps, 'children'> {\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n  externalVariableDefinitions?: TemplateVariableProviderProps['externalVariableDefinitions'];\n  exploreTitleComponent?: React.ReactNode;\n}\n\nexport function ViewExplore(props: ViewExploreProps) {\n  const { datasourceApi, externalVariableDefinitions, sx, exploreTitleComponent, ...others } = props;\n\n  const initialTimeRange = useInitialTimeRange(DEFAULT_DASHBOARD_DURATION);\n  const initialRefreshInterval = useInitialRefreshInterval(DEFAULT_REFRESH_INTERVAL);\n\n  return (\n    <DatasourceStoreProvider datasourceApi={datasourceApi}>\n      <TimeRangeProviderWithQueryParams\n        initialTimeRange={initialTimeRange}\n        initialRefreshInterval={initialRefreshInterval}\n      >\n        <TemplateVariableProvider externalVariableDefinitions={externalVariableDefinitions}>\n          <Box\n            sx={combineSx(\n              {\n                display: 'flex',\n                width: '100%',\n                height: '100%',\n                position: 'relative',\n                overflow: 'hidden',\n              },\n              sx\n            )}\n            {...others}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <ViewExploreApp exploreTitleComponent={exploreTitleComponent} />\n            </ErrorBoundary>\n          </Box>\n        </TemplateVariableProvider>\n      </TimeRangeProviderWithQueryParams>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["Box","TimeRangeProviderWithQueryParams","useInitialRefreshInterval","useInitialTimeRange","DEFAULT_DASHBOARD_DURATION","DEFAULT_REFRESH_INTERVAL","ErrorAlert","ErrorBoundary","combineSx","DatasourceStoreProvider","TemplateVariableProvider","React","ViewExploreApp","ViewExplore","props","datasourceApi","externalVariableDefinitions","sx","exploreTitleComponent","others","initialTimeRange","initialRefreshInterval","display","width","height","position","overflow","FallbackComponent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAkB,gBAAgB;AAC9C,SACEC,gCAAgC,EAChCC,yBAAyB,EACzBC,mBAAmB,QACd,4BAA4B;AACnC,SAASC,0BAA0B,EAAEC,wBAAwB,QAAQ,mBAAmB;AACxF,SAASC,UAAU,EAAEC,aAAa,EAAEC,SAAS,QAAQ,yBAAyB;AAC9E,SAGEC,uBAAuB,EACvBC,wBAAwB,QACnB,yBAAyB;AAChC,OAAOC,WAAW,QAAQ;AAC1B,SAASC,cAAc,QAAQ,mBAAmB;AAQlD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,aAAa,EAAEC,2BAA2B,EAAEC,EAAE,EAAEC,qBAAqB,EAAE,GAAGC,QAAQ,GAAGL;IAE7F,MAAMM,mBAAmBjB,oBAAoBC;IAC7C,MAAMiB,yBAAyBnB,0BAA0BG;IAEzD,qBACE,KAACI;QAAwBM,eAAeA;kBACtC,cAAA,KAACd;YACCmB,kBAAkBA;YAClBC,wBAAwBA;sBAExB,cAAA,KAACX;gBAAyBM,6BAA6BA;0BACrD,cAAA,KAAChB;oBACCiB,IAAIT,UACF;wBACEc,SAAS;wBACTC,OAAO;wBACPC,QAAQ;wBACRC,UAAU;wBACVC,UAAU;oBACZ,GACAT;oBAED,GAAGE,MAAM;8BAEV,cAAA,KAACZ;wBAAcoB,mBAAmBrB;kCAChC,cAAA,KAACM;4BAAeM,uBAAuBA;;;;;;;AAOrD"}
+{"version":3,"sources":["../../../src/views/ViewExplore/ViewExplore.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 { Box, BoxProps } from '@mui/material';\nimport {\n  TimeRangeProviderWithQueryParams,\n  useInitialRefreshInterval,\n  useInitialTimeRange,\n} from '@perses-dev/plugin-system';\nimport { DEFAULT_DASHBOARD_DURATION, DEFAULT_REFRESH_INTERVAL } from '@perses-dev/core';\nimport { ErrorAlert, ErrorBoundary, combineSx } from '@perses-dev/components';\nimport {\n  DatasourceStoreProviderProps,\n  VariableProviderProps,\n  DatasourceStoreProvider,\n  VariableProvider,\n} from '@perses-dev/dashboards';\nimport React from 'react';\nimport { ViewExploreApp } from './ViewExploreApp';\n\nexport interface ViewExploreProps extends Omit<BoxProps, 'children'> {\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n  externalVariableDefinitions?: VariableProviderProps['externalVariableDefinitions'];\n  exploreTitleComponent?: React.ReactNode;\n}\n\nexport function ViewExplore(props: ViewExploreProps) {\n  const { datasourceApi, externalVariableDefinitions, sx, exploreTitleComponent, ...others } = props;\n\n  const initialTimeRange = useInitialTimeRange(DEFAULT_DASHBOARD_DURATION);\n  const initialRefreshInterval = useInitialRefreshInterval(DEFAULT_REFRESH_INTERVAL);\n\n  return (\n    <DatasourceStoreProvider datasourceApi={datasourceApi}>\n      <TimeRangeProviderWithQueryParams\n        initialTimeRange={initialTimeRange}\n        initialRefreshInterval={initialRefreshInterval}\n      >\n        <VariableProvider externalVariableDefinitions={externalVariableDefinitions}>\n          <Box\n            sx={combineSx(\n              {\n                display: 'flex',\n                width: '100%',\n                height: '100%',\n                position: 'relative',\n                overflow: 'hidden',\n              },\n              sx\n            )}\n            {...others}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <ViewExploreApp exploreTitleComponent={exploreTitleComponent} />\n            </ErrorBoundary>\n          </Box>\n        </VariableProvider>\n      </TimeRangeProviderWithQueryParams>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["Box","TimeRangeProviderWithQueryParams","useInitialRefreshInterval","useInitialTimeRange","DEFAULT_DASHBOARD_DURATION","DEFAULT_REFRESH_INTERVAL","ErrorAlert","ErrorBoundary","combineSx","DatasourceStoreProvider","VariableProvider","React","ViewExploreApp","ViewExplore","props","datasourceApi","externalVariableDefinitions","sx","exploreTitleComponent","others","initialTimeRange","initialRefreshInterval","display","width","height","position","overflow","FallbackComponent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAkB,gBAAgB;AAC9C,SACEC,gCAAgC,EAChCC,yBAAyB,EACzBC,mBAAmB,QACd,4BAA4B;AACnC,SAASC,0BAA0B,EAAEC,wBAAwB,QAAQ,mBAAmB;AACxF,SAASC,UAAU,EAAEC,aAAa,EAAEC,SAAS,QAAQ,yBAAyB;AAC9E,SAGEC,uBAAuB,EACvBC,gBAAgB,QACX,yBAAyB;AAChC,OAAOC,WAAW,QAAQ;AAC1B,SAASC,cAAc,QAAQ,mBAAmB;AAQlD,OAAO,SAASC,YAAYC,KAAuB;IACjD,MAAM,EAAEC,aAAa,EAAEC,2BAA2B,EAAEC,EAAE,EAAEC,qBAAqB,EAAE,GAAGC,QAAQ,GAAGL;IAE7F,MAAMM,mBAAmBjB,oBAAoBC;IAC7C,MAAMiB,yBAAyBnB,0BAA0BG;IAEzD,qBACE,KAACI;QAAwBM,eAAeA;kBACtC,cAAA,KAACd;YACCmB,kBAAkBA;YAClBC,wBAAwBA;sBAExB,cAAA,KAACX;gBAAiBM,6BAA6BA;0BAC7C,cAAA,KAAChB;oBACCiB,IAAIT,UACF;wBACEc,SAAS;wBACTC,OAAO;wBACPC,QAAQ;wBACRC,UAAU;wBACVC,UAAU;oBACZ,GACAT;oBAED,GAAGE,MAAM;8BAEV,cAAA,KAACZ;wBAAcoB,mBAAmBrB;kCAChC,cAAA,KAACM;4BAAeM,uBAAuBA;;;;;;;AAOrD"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/explore",
-  "version": "0.46.0-rc1",
+  "version": "0.47.0-rc0",
   "description": "The explore feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -27,11 +27,11 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "0.46.0-rc1",
-    "@perses-dev/core": "0.46.0-rc1",
-    "@perses-dev/panels-plugin": "0.46.0-rc1",
-    "@perses-dev/plugin-system": "0.46.0-rc1",
-    "@perses-dev/dashboards": "0.46.0-rc1",
+    "@perses-dev/components": "0.47.0-rc0",
+    "@perses-dev/core": "0.47.0-rc0",
+    "@perses-dev/panels-plugin": "0.47.0-rc0",
+    "@perses-dev/plugin-system": "0.47.0-rc0",
+    "@perses-dev/dashboards": "0.47.0-rc0",
     "@types/react-grid-layout": "^1.3.2",
     "date-fns": "^2.28.0",
     "immer": "^9.0.15",
@@ -45,13 +45,13 @@
     "zustand": "^4.3.3"
   },
   "devDependencies": {
-    "@perses-dev/internal-utils": "0.46.0-rc1",
-    "@perses-dev/storybook": "0.46.0-rc1",
+    "@perses-dev/internal-utils": "0.47.0-rc0",
+    "@perses-dev/storybook": "0.47.0-rc0",
     "history": "^5.3.0",
     "intersection-observer": "^0.12.2"
   },
   "peerDependencies": {
-    "@mui/material": "^5.10.0",
+    "@mui/material": "^5.15.20",
     "@tanstack/react-query": "^4.7.1",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0"