@perses-dev/explore 0.45.0 → 0.46.0-rc0

package/dist/components/ExploreManager/ExploreManager.js

@@ -0,0 +1,78 @@
+// 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 { ExploreToolbar } from '../ExploreToolbar';
+import { TracesExplorer } from './TracesExplorer';
+import { MetricsExplorer } from './MetricsExplorer';
+import { useExplorerManagerContext } from './ExplorerManagerProvider';
+export function ExploreManager(props) {
+    const { exploreTitleComponent } = props;
+    const { explorer, setExplorer } = useExplorerManagerContext();
+    const smallScreen = useMediaQuery('(max-width: 768px)');
+    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__*/ _jsxs(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: [
+                            /*#__PURE__*/ _jsx(Tab, {
+                                label: "Metrics"
+                            }),
+                            /*#__PURE__*/ _jsx(Tab, {
+                                label: "Traces"
+                            })
+                        ]
+                    }),
+                    /*#__PURE__*/ _jsxs(Card, {
+                        sx: {
+                            padding: '10px',
+                            width: '100%'
+                        },
+                        children: [
+                            explorer === 0 && /*#__PURE__*/ _jsx(MetricsExplorer, {}),
+                            explorer === 1 && /*#__PURE__*/ _jsx(TracesExplorer, {})
+                        ]
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# 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 { 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"}

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

@@ -0,0 +1,26 @@
+import { ReactNode } from 'react';
+import { QueryDefinition } from '@perses-dev/core';
+interface ExplorerManagerContextType {
+    explorer: number;
+    tab: number;
+    queries: QueryDefinition[];
+    setExplorer: (explorer: number) => 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;
+}
+export declare function ExplorerManagerProvider({ children, initialState }: 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

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

package/dist/components/ExploreManager/ExplorerManagerProvider.js

@@ -0,0 +1,106 @@
+// 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 } from "react/jsx-runtime";
+import React, { createContext, useContext, useMemo, useState } from 'react';
+const ExplorerManagerContext = /*#__PURE__*/ createContext(undefined);
+function initExplorerStates(initialState) {
+    const result = [];
+    if ((initialState === null || initialState === void 0 ? void 0 : initialState.explorer) !== undefined) {
+        var _initialState_tab, _initialState_queries;
+        result[initialState.explorer] = {
+            tab: (_initialState_tab = initialState.tab) !== null && _initialState_tab !== void 0 ? _initialState_tab : 0,
+            queries: (_initialState_queries = initialState.queries) !== null && _initialState_queries !== void 0 ? _initialState_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(tab) {
+        var _state_explorer;
+        const state = [
+            ...explorerStates
+        ];
+        var _state_explorer_queries;
+        state[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);
+        }
+    }
+    return /*#__PURE__*/ _jsx(ExplorerManagerContext.Provider, {
+        value: {
+            explorer,
+            tab,
+            queries,
+            setExplorer,
+            setTab,
+            setQueries
+        },
+        children: children
+    });
+}
+export function useExplorerManagerContext() {
+    const ctx = useContext(ExplorerManagerContext);
+    if (ctx === undefined) {
+        throw new Error('No ExplorerManagerContext found. Did you forget a Provider?');
+    }
+    return ctx;
+}
+
+//# sourceMappingURL=ExplorerManagerProvider.js.map

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

@@ -0,0 +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 !== undefined) {\n    result[initialState.explorer] = {\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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"}

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

@@ -0,0 +1,7 @@
+import { ReactNode } from 'react';
+interface ExplorerManagerProviderWithQueryParamsProps {
+    children: ReactNode;
+}
+export declare function ExplorerManagerProviderWithQueryParams({ children }: ExplorerManagerProviderWithQueryParamsProps): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=ExplorerManagerProviderWithQueryParams.d.ts.map

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

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

package/dist/components/ExploreManager/ExplorerManagerProviderWithQueryParams.js

@@ -0,0 +1,51 @@
+// 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 } from "react/jsx-runtime";
+import React from 'react';
+import { JsonParam, NumberParam, useQueryParams } from 'use-query-params';
+import { ExplorerManagerProvider } from './ExplorerManagerProvider';
+const exploreQueryConfig = {
+    explorer: NumberParam,
+    tab: NumberParam,
+    queries: 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
+            })
+    };
+    return /*#__PURE__*/ _jsx(ExplorerManagerProvider, {
+        initialState: initialState,
+        children: children
+    });
+}
+
+//# sourceMappingURL=ExplorerManagerProviderWithQueryParams.js.map

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

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

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

@@ -0,0 +1,2 @@
+export declare function MetricsExplorer(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MetricsExplorer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MetricsExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/MetricsExplorer.tsx"],"names":[],"mappings":"AAkFA,wBAAgB,eAAe,4CAsB9B"}

package/dist/components/ExploreManager/MetricsExplorer.js

@@ -0,0 +1,145 @@
+// 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 { Box, Stack, Tab, Tabs } from '@mui/material';
+import { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';
+import useResizeObserver from 'use-resize-observer';
+import { Panel } from '@perses-dev/dashboards';
+import { PANEL_PREVIEW_HEIGHT } from './constants';
+import { useExplorerManagerContext } from './ExplorerManagerProvider';
+function TimeSeriesPanel({ queries }) {
+    const { width, ref: boxRef } = useResizeObserver();
+    const height = PANEL_PREVIEW_HEIGHT;
+    const suggestedStepMs = useSuggestedStepMs(width);
+    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
+    const definitions = queries.length ? queries.map((query)=>{
+        return {
+            kind: query.spec.plugin.kind,
+            spec: query.spec.plugin.spec
+        };
+    }) : [];
+    return /*#__PURE__*/ _jsx(Box, {
+        ref: boxRef,
+        height: height,
+        children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
+            definitions: definitions,
+            options: {
+                suggestedStepMs,
+                mode: 'range'
+            },
+            children: /*#__PURE__*/ _jsx(Panel, {
+                panelOptions: {
+                    hideHeader: true
+                },
+                definition: {
+                    kind: 'Panel',
+                    spec: {
+                        queries: queries,
+                        display: {
+                            name: ''
+                        },
+                        plugin: {
+                            kind: 'TimeSeriesChart',
+                            spec: {}
+                        }
+                    }
+                }
+            })
+        })
+    });
+}
+function MetricDataTable({ queries }) {
+    const height = PANEL_PREVIEW_HEIGHT;
+    // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
+    const definitions = (queries !== null && queries !== void 0 ? queries : []).map((query)=>{
+        return {
+            kind: query.spec.plugin.kind,
+            spec: query.spec.plugin.spec
+        };
+    });
+    return /*#__PURE__*/ _jsx(Box, {
+        height: height,
+        children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
+            definitions: definitions,
+            options: {
+                mode: 'instant'
+            },
+            children: /*#__PURE__*/ _jsx(Panel, {
+                panelOptions: {
+                    hideHeader: true
+                },
+                definition: {
+                    kind: 'Panel',
+                    spec: {
+                        queries: queries,
+                        display: {
+                            name: ''
+                        },
+                        plugin: {
+                            kind: 'TimeSeriesTable',
+                            spec: {}
+                        }
+                    }
+                }
+            })
+        })
+    });
+}
+export function MetricsExplorer() {
+    const { tab, queries, setTab, setQueries } = useExplorerManagerContext();
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: 2,
+        sx: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(MultiQueryEditor, {
+                queryTypes: [
+                    'TimeSeriesQuery'
+                ],
+                onChange: setQueries,
+                queries: queries
+            }),
+            /*#__PURE__*/ _jsxs(Tabs, {
+                value: tab,
+                onChange: (_, state)=>setTab(state),
+                variant: "scrollable",
+                sx: {
+                    borderBottom: 1,
+                    borderColor: 'divider'
+                },
+                children: [
+                    /*#__PURE__*/ _jsx(Tab, {
+                        label: "Table"
+                    }),
+                    /*#__PURE__*/ _jsx(Tab, {
+                        label: "Graph"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ _jsxs(Stack, {
+                gap: 1,
+                children: [
+                    tab === 0 && /*#__PURE__*/ _jsx(MetricDataTable, {
+                        queries: queries
+                    }),
+                    tab === 1 && /*#__PURE__*/ _jsx(TimeSeriesPanel, {
+                        queries: queries
+                    })
+                ]
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=MetricsExplorer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ExploreManager/MetricsExplorer.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 { QueryDefinition } from '@perses-dev/core';\nimport { Box, Stack, Tab, Tabs } from '@mui/material';\nimport { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport useResizeObserver from 'use-resize-observer';\nimport { Panel } from '@perses-dev/dashboards';\nimport { PANEL_PREVIEW_HEIGHT } from './constants';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\nfunction TimeSeriesPanel({ queries }: { queries: QueryDefinition[] }) {\n  const { width, ref: boxRef } = useResizeObserver();\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  // map TimeSeriesQueryDefinition 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, mode: 'range' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesChart', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nfunction MetricDataTable({ queries }: { queries: QueryDefinition[] }) {\n  const height = PANEL_PREVIEW_HEIGHT;\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const definitions = (queries ?? []).map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <Box height={height}>\n      <DataQueriesProvider definitions={definitions} options={{ mode: 'instant' }}>\n        <Panel\n          panelOptions={{\n            hideHeader: true,\n          }}\n          definition={{\n            kind: 'Panel',\n            spec: { queries: queries, display: { name: '' }, plugin: { kind: 'TimeSeriesTable', spec: {} } },\n          }}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nexport function MetricsExplorer() {\n  const { tab, queries, setTab, setQueries } = useExplorerManagerContext();\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <MultiQueryEditor queryTypes={['TimeSeriesQuery']} onChange={setQueries} queries={queries} />\n\n      <Tabs\n        value={tab}\n        onChange={(_, state) => setTab(state)}\n        variant=\"scrollable\"\n        sx={{ borderBottom: 1, borderColor: 'divider' }}\n      >\n        <Tab label=\"Table\" />\n        <Tab label=\"Graph\" />\n      </Tabs>\n      <Stack gap={1}>\n        {tab === 0 && <MetricDataTable queries={queries} />}\n        {tab === 1 && <TimeSeriesPanel queries={queries} />}\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","Tab","Tabs","DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","useResizeObserver","Panel","PANEL_PREVIEW_HEIGHT","useExplorerManagerContext","TimeSeriesPanel","queries","width","ref","boxRef","height","suggestedStepMs","definitions","length","map","query","kind","spec","plugin","options","mode","panelOptions","hideHeader","definition","display","name","MetricDataTable","MetricsExplorer","tab","setTab","setQueries","gap","sx","queryTypes","onChange","value","_","state","variant","borderBottom","borderColor","label"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export declare function TracesExplorer(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TracesExplorer.d.ts.map

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

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

package/dist/components/ExploreManager/TracesExplorer.js

@@ -0,0 +1,90 @@
+// 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 { 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 { useExplorerManagerContext } from './ExplorerManagerProvider';
+function TracePanel({ queries }) {
+    const { width, ref: boxRef } = useResizeObserver();
+    const height = PANEL_PREVIEW_HEIGHT;
+    const suggestedStepMs = useSuggestedStepMs(width);
+    // map TraceQueryDefinition to Definition<UnknownSpec>
+    const definitions = queries.length ? queries.map((query)=>{
+        return {
+            kind: query.spec.plugin.kind,
+            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();
+    return /*#__PURE__*/ _jsxs(Stack, {
+        gap: 2,
+        sx: {
+            width: '100%'
+        },
+        children: [
+            /*#__PURE__*/ _jsx(MultiQueryEditor, {
+                queryTypes: [
+                    'TraceQuery'
+                ],
+                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
+                    })
+                })
+            })
+        ]
+    });
+}
+
+//# sourceMappingURL=TracesExplorer.js.map

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

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

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

@@ -0,0 +1,3 @@
+export declare const PANEL_PREVIEW_HEIGHT = 300;
+export declare const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/constants.ts"],"names":[],"mappings":"AAaA,eAAO,MAAM,oBAAoB,MAAM,CAAC;AACxC,eAAO,MAAM,2BAA2B,MAAM,CAAC"}

package/dist/components/ExploreManager/constants.js

@@ -0,0 +1,16 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+export const PANEL_PREVIEW_HEIGHT = 300;
+export const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
+
+//# sourceMappingURL=constants.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ExploreManager/constants.ts"],"sourcesContent":["// Copyright 2024 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nexport const PANEL_PREVIEW_HEIGHT = 300;\nexport const PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n"],"names":["PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH"],"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,OAAO,MAAMA,uBAAuB,IAAI;AACxC,OAAO,MAAMC,8BAA8B,IAAI"}

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

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

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

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