@perses-dev/explore 0.47.1 → 0.48.0-rc0

package/dist/cjs/components/PrometheusMetricsFinder/utils.js

@@ -0,0 +1,202 @@
+// Copyright 2024 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    useLabelValues: function() {
+        return useLabelValues;
+    },
+    useLabels: function() {
+        return useLabels;
+    },
+    useMetricMetadata: function() {
+        return useMetricMetadata;
+    },
+    useSeriesStates: function() {
+        return useSeriesStates;
+    }
+});
+const _react = require("react");
+const _reactquery = require("@tanstack/react-query");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _types = require("./types");
+function useMetricMetadata(metricName, datasource, enabled) {
+    const { data: client } = (0, _pluginsystem.useDatasourceClient)(datasource);
+    // histograms and summaries timeseries desc are not always added to prefixed timeseries
+    const name = metricName.replace(/(_count|_sum|_bucket)$/, '');
+    const { data, isLoading } = (0, _reactquery.useQuery)({
+        enabled: !!client && enabled,
+        queryKey: [
+            'metricMetadata',
+            name
+        ],
+        queryFn: async ()=>{
+            const params = {
+                metric: name
+            };
+            return await client.metricMetadata(params);
+        }
+    });
+    // Find the first result with help text
+    const metadata = (0, _react.useMemo)(()=>{
+        var _data_data;
+        var _data_data_name;
+        for (const metric of (_data_data_name = data === null || data === void 0 ? void 0 : (_data_data = data.data) === null || _data_data === void 0 ? void 0 : _data_data[name]) !== null && _data_data_name !== void 0 ? _data_data_name : []){
+            if (metric.help.length > 0) {
+                return metric;
+            }
+        }
+        return undefined;
+    }, [
+        data,
+        name
+    ]);
+    return {
+        metadata,
+        isLoading
+    };
+}
+function useLabels(filters, datasource) {
+    const { absoluteTimeRange: { start, end } } = (0, _pluginsystem.useTimeRange)();
+    const { data: client } = (0, _pluginsystem.useDatasourceClient)(datasource);
+    return (0, _reactquery.useQuery)({
+        enabled: !!client,
+        queryKey: [
+            'labels',
+            'datasource',
+            datasource.name,
+            'start',
+            start,
+            'end',
+            end,
+            'filters',
+            ...filters
+        ],
+        queryFn: async ()=>{
+            const params = {
+                start: start.valueOf() / 1000,
+                end: end.valueOf() / 1000
+            };
+            if (filters.length) {
+                params['match[]'] = [
+                    `{${(0, _types.computeFilterExpr)(filters)}}`
+                ];
+            }
+            return await client.labelNames(params);
+        }
+    });
+}
+function useLabelValues(labelName, filters, datasource) {
+    const { absoluteTimeRange: { start, end } } = (0, _pluginsystem.useTimeRange)();
+    const { data: client } = (0, _pluginsystem.useDatasourceClient)(datasource);
+    return (0, _reactquery.useQuery)({
+        enabled: !!client,
+        queryKey: [
+            'labelValues',
+            labelName,
+            'datasource',
+            datasource.name,
+            'start',
+            start,
+            'end',
+            'filters',
+            ...filters
+        ],
+        queryFn: async ()=>{
+            const params = {
+                labelName: labelName,
+                start: start.valueOf() / 1000,
+                end: end.valueOf() / 1000
+            };
+            if (filters.length) {
+                params['match[]'] = [
+                    `{${(0, _types.computeFilterExpr)(filters)}}`
+                ];
+            }
+            return await client.labelValues(params);
+        }
+    });
+}
+function useSeriesStates(metricName, filters, datasource) {
+    const { absoluteTimeRange: { start, end } } = (0, _pluginsystem.useTimeRange)();
+    const { data: client } = (0, _pluginsystem.useDatasourceClient)(datasource);
+    const { data: seriesData, isLoading } = (0, _reactquery.useQuery)({
+        enabled: !!client,
+        queryKey: [
+            'series',
+            metricName,
+            'datasource',
+            datasource,
+            'start',
+            start,
+            'end',
+            'filters',
+            ...filters
+        ],
+        queryFn: async ()=>{
+            const params = {
+                'match[]': [
+                    `{${(0, _types.computeFilterExpr)(filters)}}`
+                ],
+                start: start.valueOf() / 1000,
+                end: end.valueOf() / 1000
+            };
+            return await client.series(params);
+        }
+    });
+    const labelValueCounters = (0, _react.useMemo)(()=>{
+        const result = new Map();
+        if ((seriesData === null || seriesData === void 0 ? void 0 : seriesData.data) === undefined) {
+            return result;
+        }
+        for (const series of seriesData.data){
+            for (const [label, value] of Object.entries(series)){
+                const labelCounters = result.get(label);
+                if (labelCounters === undefined) {
+                    result.set(label, [
+                        {
+                            labelValue: value,
+                            counter: 1
+                        }
+                    ]);
+                    continue;
+                }
+                const labelValueCounter = labelCounters.find((counter)=>counter.labelValue === value);
+                if (labelValueCounter === undefined) {
+                    labelCounters.push({
+                        labelValue: value,
+                        counter: 1
+                    });
+                } else {
+                    labelValueCounter.counter += 1;
+                }
+            }
+        }
+        return result;
+    }, [
+        seriesData
+    ]);
+    return {
+        series: seriesData === null || seriesData === void 0 ? void 0 : seriesData.data,
+        labelValueCounters,
+        isLoading
+    };
+}

package/dist/cjs/components/index.js

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

package/dist/cjs/index.js

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

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

@@ -1,24 +1,20 @@
 import { ReactNode } from 'react';
-import { QueryDefinition } from '@perses-dev/core';
-interface ExplorerState {
+interface ExplorerState<T> {
     explorer: string;
-    tab: number;
-    queries: QueryDefinition[];
+    data: T;
 }
-interface ExplorerManagerContextType {
+interface ExplorerManagerContextType<T> {
     /** observability signal, for example metrics or traces */
     explorer: string;
-    tab: number;
-    queries: QueryDefinition[];
+    data: T;
     setExplorer: (explorer: string) => void;
-    setTab: (tab: number) => void;
-    setQueries: (queries: QueryDefinition[]) => void;
+    setData: (data: T) => void;
 }
 interface ExplorerManagerProviderProps {
     children: ReactNode;
-    store?: [ExplorerState, (state: ExplorerState) => void];
+    store?: [ExplorerState<unknown>, (state: ExplorerState<unknown>) => void];
 }
 export declare function ExplorerManagerProvider({ children, store: externalStore }: ExplorerManagerProviderProps): import("react/jsx-runtime").JSX.Element;
-export declare function useExplorerManagerContext(): ExplorerManagerContextType;
+export declare function useExplorerManagerContext<T>(): ExplorerManagerContextType<T>;
 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,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"}
+{"version":3,"file":"ExplorerManagerProvider.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProvider.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAiB,SAAS,EAAwB,MAAM,OAAO,CAAC;AAE9E,UAAU,aAAa,CAAC,CAAC;IACvB,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,CAAC,CAAC;CAGT;AAED,UAAU,0BAA0B,CAAC,CAAC;IACpC,0DAA0D;IAC1D,QAAQ,EAAE,MAAM,CAAC;IACjB,IAAI,EAAE,CAAC,CAAC;IACR,WAAW,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;IACxC,OAAO,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;CAC5B;AAID,UAAU,4BAA4B;IACpC,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,KAAK,IAAI,CAAC,CAAC;CAC3E;AAED,wBAAgB,uBAAuB,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,4BAA4B,2CA8BvG;AAED,wBAAgB,yBAAyB,CAAC,CAAC,KAAK,0BAA0B,CAAC,CAAC,CAAC,CAM5E"}

package/dist/components/ExploreManager/ExplorerManagerProvider.js

@@ -19,53 +19,39 @@ export function ExplorerManagerProvider({ children, store: externalStore }) {
     // local store in case external store is not provided by prop
     const localStore = useState({
         explorer: 'metrics',
-        tab: 0,
-        queries: []
+        data: {}
     });
     // use store provided by 'store' prop if available, otherwise use local store
     const [explorerState, setExplorerState] = externalStore ? externalStore : localStore;
-    const { explorer, tab, queries } = explorerState;
+    const { explorer, data } = explorerState;
     function setExplorer(newExplorer) {
         // store current explorer state
         explorerStateCache[explorer] = {
-            tab,
-            queries
+            data
         };
         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: []
+            data: {}
         };
         setExplorerState({
             explorer: newExplorer,
-            tab: state.tab,
-            queries: state.queries
+            data: state.data
         });
     }
-    function setTab(newTab) {
+    function setData(newData) {
         setExplorerState({
             explorer,
-            tab: newTab,
-            queries
-        });
-    }
-    function setQueries(newQueries) {
-        setExplorerState({
-            explorer,
-            tab,
-            queries: newQueries
+            data: newData
         });
     }
     return /*#__PURE__*/ _jsx(ExplorerManagerContext.Provider, {
         value: {
             explorer,
-            tab,
-            queries,
+            data,
             setExplorer,
-            setTab,
-            setQueries
+            setData
         },
         children: children
     });

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, 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"}
+{"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';\n\ninterface ExplorerState<T> {\n  explorer: string;\n  data: T;\n  // tab: number;\n  // queries: QueryDefinition[];\n}\n\ninterface ExplorerManagerContextType<T> {\n  /** observability signal, for example metrics or traces */\n  explorer: string;\n  data: T;\n  setExplorer: (explorer: string) => void;\n  setData: (data: T) => void;\n}\n\nconst ExplorerManagerContext = createContext<ExplorerManagerContextType<unknown> | undefined>(undefined);\n\ninterface ExplorerManagerProviderProps {\n  children: ReactNode;\n  store?: [ExplorerState<unknown>, (state: ExplorerState<unknown>) => 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<\n    Record<string, Omit<ExplorerState<unknown>, 'explorer'>>\n  >({});\n  // local store in case external store is not provided by prop\n  const localStore = useState<ExplorerState<unknown>>({ explorer: 'metrics', data: {} });\n  // use store provided by 'store' prop if available, otherwise use local store\n  const [explorerState, setExplorerState] = externalStore ? externalStore : localStore;\n  const { explorer, data } = explorerState;\n\n  function setExplorer(newExplorer: string) {\n    // store current explorer state\n    explorerStateCache[explorer] = { data };\n    setExplorerStateCache(explorerStateCache);\n\n    // restore previous explorer state (if any)\n    const state = explorerStateCache[newExplorer] ?? { data: {} };\n    setExplorerState({ explorer: newExplorer, data: state.data });\n  }\n\n  function setData(newData: unknown) {\n    setExplorerState({ explorer, data: newData });\n  }\n\n  return (\n    <ExplorerManagerContext.Provider value={{ explorer, data, setExplorer, setData }}>\n      {children}\n    </ExplorerManagerContext.Provider>\n  );\n}\n\nexport function useExplorerManagerContext<T>(): ExplorerManagerContextType<T> {\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 as ExplorerManagerContextType<T>;\n}\n"],"names":["React","createContext","useContext","useState","ExplorerManagerContext","undefined","ExplorerManagerProvider","children","store","externalStore","explorerStateCache","setExplorerStateCache","localStore","explorer","data","explorerState","setExplorerState","setExplorer","newExplorer","state","setData","newData","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;AAiB9E,MAAMC,uCAAyBH,cAA+DI;AAO9F,OAAO,SAASC,wBAAwB,EAAEC,QAAQ,EAAEC,OAAOC,aAAa,EAAgC;IACtG,wDAAwD;IACxD,MAAM,CAACC,oBAAoBC,sBAAsB,GAAGR,SAElD,CAAC;IACH,6DAA6D;IAC7D,MAAMS,aAAaT,SAAiC;QAAEU,UAAU;QAAWC,MAAM,CAAC;IAAE;IACpF,6EAA6E;IAC7E,MAAM,CAACC,eAAeC,iBAAiB,GAAGP,gBAAgBA,gBAAgBG;IAC1E,MAAM,EAAEC,QAAQ,EAAEC,IAAI,EAAE,GAAGC;IAE3B,SAASE,YAAYC,WAAmB;QACtC,+BAA+B;QAC/BR,kBAAkB,CAACG,SAAS,GAAG;YAAEC;QAAK;QACtCH,sBAAsBD;YAGRA;QADd,2CAA2C;QAC3C,MAAMS,QAAQT,CAAAA,kCAAAA,kBAAkB,CAACQ,YAAY,cAA/BR,6CAAAA,kCAAmC;YAAEI,MAAM,CAAC;QAAE;QAC5DE,iBAAiB;YAAEH,UAAUK;YAAaJ,MAAMK,MAAML,IAAI;QAAC;IAC7D;IAEA,SAASM,QAAQC,OAAgB;QAC/BL,iBAAiB;YAAEH;YAAUC,MAAMO;QAAQ;IAC7C;IAEA,qBACE,KAACjB,uBAAuBkB,QAAQ;QAACC,OAAO;YAAEV;YAAUC;YAAMG;YAAaG;QAAQ;kBAC5Eb;;AAGP;AAEA,OAAO,SAASiB;IACd,MAAMC,MAAMvB,WAAWE;IACvB,IAAIqB,QAAQpB,WAAW;QACrB,MAAM,IAAIqB,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;AAWzC,UAAU,2CAA2C;IACnD,QAAQ,EAAE,SAAS,CAAC;CACrB;AAED,wBAAgB,sCAAsC,CAAC,EAAE,QAAQ,EAAE,EAAE,2CAA2C,2CAI/G"}
+{"version":3,"file":"ExplorerManagerProviderWithQueryParams.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/ExplorerManagerProviderWithQueryParams.tsx"],"names":[],"mappings":"AAaA,OAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUzC,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,15 +12,14 @@
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
-import { createEnumParam, JsonParam, NumberParam, useQueryParams, withDefault } from 'use-query-params';
+import { createEnumParam, JsonParam, useQueryParams, withDefault } from 'use-query-params';
 import { ExplorerManagerProvider } from './ExplorerManagerProvider';
 const exploreQueryConfig = {
     explorer: withDefault(createEnumParam([
         'metrics',
         'traces'
     ]), 'metrics'),
-    tab: withDefault(NumberParam, 0),
-    queries: withDefault(JsonParam, [])
+    data: withDefault(JsonParam, {})
 };
 export function ExplorerManagerProviderWithQueryParams({ children }) {
     const [queryParams, setQueryParams] = useQueryParams(exploreQueryConfig);

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 { 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"}
+{"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, useQueryParams, withDefault } from 'use-query-params';\nimport { ExplorerManagerProvider } from './ExplorerManagerProvider';\n\nconst exploreQueryConfig = {\n  explorer: withDefault(createEnumParam(['metrics', 'traces']), 'metrics'),\n  data: 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","useQueryParams","withDefault","ExplorerManagerProvider","exploreQueryConfig","explorer","data","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,cAAc,EAAEC,WAAW,QAAQ,mBAAmB;AAC3F,SAASC,uBAAuB,QAAQ,4BAA4B;AAEpE,MAAMC,qBAAqB;IACzBC,UAAUH,YAAYH,gBAAgB;QAAC;QAAW;KAAS,GAAG;IAC9DO,MAAMJ,YAAYF,WAAW,CAAC;AAChC;AAMA,OAAO,SAASO,uCAAuC,EAAEC,QAAQ,EAA+C;IAC9G,MAAM,CAACC,aAAaC,eAAe,GAAGT,eAAeG;IAErD,qBAAO,KAACD;QAAwBQ,OAAO;YAACF;YAAaC;SAAe;kBAAGF;;AACzE"}

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

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

package/dist/components/ExploreManager/MetricsExplorer.js

@@ -15,6 +15,8 @@ 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 { DEFAULT_PROM } from '@perses-dev/prometheus-plugin';
+import { PrometheusMetricsFinder } from '../PrometheusMetricsFinder';
 import { PANEL_PREVIEW_HEIGHT } from './constants';
 import { useExplorerManagerContext } from './ExplorerManagerProvider';
 function TimeSeriesPanel({ queries }) {
@@ -61,7 +63,7 @@ function TimeSeriesPanel({ queries }) {
 function MetricDataTable({ queries }) {
     const height = PANEL_PREVIEW_HEIGHT;
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
-    const definitions = (queries !== null && queries !== void 0 ? queries : []).map((query)=>{
+    const definitions = queries.map((query)=>{
         return {
             kind: query.spec.plugin.kind,
             spec: query.spec.plugin.spec
@@ -96,23 +98,19 @@ function MetricDataTable({ queries }) {
     });
 }
 export function MetricsExplorer() {
-    const { tab, queries, setTab, setQueries } = useExplorerManagerContext();
+    const { data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined }, setData } = 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),
+                onChange: (_, state)=>setData({
+                        tab: state,
+                        queries
+                    }),
                 variant: "scrollable",
                 sx: {
                     borderBottom: 1,
@@ -120,21 +118,68 @@ export function MetricsExplorer() {
                 },
                 children: [
                     /*#__PURE__*/ _jsx(Tab, {
+                        value: "table",
                         label: "Table"
                     }),
                     /*#__PURE__*/ _jsx(Tab, {
+                        value: "graph",
                         label: "Graph"
+                    }),
+                    /*#__PURE__*/ _jsx(Tab, {
+                        value: "finder",
+                        label: "Finder"
                     })
                 ]
             }),
             /*#__PURE__*/ _jsxs(Stack, {
                 gap: 1,
                 children: [
-                    tab === 0 && /*#__PURE__*/ _jsx(MetricDataTable, {
-                        queries: queries
+                    tab === 'table' && /*#__PURE__*/ _jsxs(Stack, {
+                        children: [
+                            /*#__PURE__*/ _jsx(MultiQueryEditor, {
+                                queryTypes: [
+                                    'TimeSeriesQuery'
+                                ],
+                                onChange: (state)=>setData({
+                                        tab,
+                                        queries: state
+                                    }),
+                                queries: queries
+                            }),
+                            /*#__PURE__*/ _jsx(MetricDataTable, {
+                                queries: queries
+                            })
+                        ]
+                    }),
+                    tab === 'graph' && /*#__PURE__*/ _jsxs(Stack, {
+                        children: [
+                            /*#__PURE__*/ _jsx(MultiQueryEditor, {
+                                queryTypes: [
+                                    'TimeSeriesQuery'
+                                ],
+                                onChange: (state)=>setData({
+                                        tab,
+                                        queries: state
+                                    }),
+                                queries: queries
+                            }),
+                            /*#__PURE__*/ _jsx(TimeSeriesPanel, {
+                                queries: queries
+                            })
+                        ]
                     }),
-                    tab === 1 && /*#__PURE__*/ _jsx(TimeSeriesPanel, {
-                        queries: queries
+                    tab === 'finder' && /*#__PURE__*/ _jsx(Stack, {
+                        children: /*#__PURE__*/ _jsx(PrometheusMetricsFinder, {
+                            onChange: (state)=>setData({
+                                    tab,
+                                    ...state
+                                }),
+                            value: {
+                                datasource,
+                                filters,
+                                exploredMetric
+                            }
+                        })
                     })
                 ]
             })

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

@@ -1 +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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"}
+{"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 { DEFAULT_PROM } from '@perses-dev/prometheus-plugin';\nimport { PrometheusMetricsFinder } from '../PrometheusMetricsFinder';\nimport { FinderQueryParams } from '../PrometheusMetricsFinder/types';\nimport { PANEL_PREVIEW_HEIGHT } from './constants';\nimport { useExplorerManagerContext } from './ExplorerManagerProvider';\n\ninterface MetricsExplorerQueryParams extends FinderQueryParams {\n  tab?: string;\n  queries?: QueryDefinition[];\n}\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 {\n    data: { tab = 'table', queries = [], datasource = DEFAULT_PROM, filters = [], exploredMetric = undefined },\n    setData,\n  } = useExplorerManagerContext<MetricsExplorerQueryParams>();\n\n  return (\n    <Stack gap={2} sx={{ width: '100%' }}>\n      <Tabs\n        value={tab}\n        onChange={(_, state) => setData({ tab: state, queries })}\n        variant=\"scrollable\"\n        sx={{ borderBottom: 1, borderColor: 'divider' }}\n      >\n        <Tab value=\"table\" label=\"Table\" />\n        <Tab value=\"graph\" label=\"Graph\" />\n        <Tab value=\"finder\" label=\"Finder\" />\n      </Tabs>\n      <Stack gap={1}>\n        {tab === 'table' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setData({ tab, queries: state })}\n              queries={queries}\n            />\n            <MetricDataTable queries={queries} />\n          </Stack>\n        )}\n        {tab === 'graph' && (\n          <Stack>\n            <MultiQueryEditor\n              queryTypes={['TimeSeriesQuery']}\n              onChange={(state) => setData({ tab, queries: state })}\n              queries={queries}\n            />\n            <TimeSeriesPanel queries={queries} />\n          </Stack>\n        )}\n        {tab === 'finder' && (\n          <Stack>\n            <PrometheusMetricsFinder\n              onChange={(state) => setData({ tab, ...state })}\n              value={{ datasource, filters, exploredMetric }}\n            />\n          </Stack>\n        )}\n      </Stack>\n    </Stack>\n  );\n}\n"],"names":["Box","Stack","Tab","Tabs","DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","useResizeObserver","Panel","DEFAULT_PROM","PrometheusMetricsFinder","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","data","tab","datasource","filters","exploredMetric","undefined","setData","gap","sx","value","onChange","_","state","variant","borderBottom","borderColor","label","queryTypes"],"mappings":"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"}

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":"AAwFA,wBAAgB,cAAc,4CAiC7B"}
+{"version":3,"file":"TracesExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreManager/TracesExplorer.tsx"],"names":[],"mappings":"AA4FA,wBAAgB,cAAc,4CAwC7B"}

package/dist/components/ExploreManager/TracesExplorer.js

@@ -117,7 +117,7 @@ function TracingGanttChartPanel({ queries }) {
 }
 export function TracesExplorer() {
     var _queries_, _queries_1, _queries_2;
-    const { queries, setQueries } = useExplorerManagerContext();
+    const { data: { queries = [] }, setData } = useExplorerManagerContext();
     // map TraceQueryDefinition to Definition<UnknownSpec>
     const definitions = queries.length ? queries.map((query)=>{
         return {
@@ -138,7 +138,9 @@ export function TracesExplorer() {
                 queryTypes: [
                     'TraceQuery'
                 ],
-                onChange: setQueries,
+                onChange: (newQueries)=>setData({
+                        queries: newQueries
+                    }),
                 queries: queries
             }),
             /*#__PURE__*/ _jsx(ErrorBoundary, {