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

package/dist/components/ExploreManager/index.js

@@ -0,0 +1,15 @@
+// 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 * from './ExploreManager';
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ExploreManager/index.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 * from './ExploreManager';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,mBAAmB"}

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

@@ -1,6 +1,6 @@
-import React from 'react';
+import { ReactNode } from 'react';
 export interface ViewAppProps {
-    exploreTitleComponent?: React.ReactNode;
+    exploreTitleComponent?: ReactNode;
 }
 export declare function ViewExploreApp(props: ViewAppProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ViewExploreApp.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ViewExploreApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewExplore/ViewExploreApp.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,MAAM,WAAW,YAAY;IAC3B,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,YAAY,2CAoBjD"}
+{"version":3,"file":"ViewExploreApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewExplore/ViewExploreApp.tsx"],"names":[],"mappings":"AAeA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIlC,MAAM,WAAW,YAAY;IAC3B,qBAAqB,CAAC,EAAE,SAAS,CAAC;CACnC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,YAAY,2CAsBjD"}

package/dist/views/ViewExplore/ViewExploreApp.js

@@ -13,8 +13,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ChartsProvider, useChartsTheme } from '@perses-dev/components';
-import React from 'react';
-import { TimeSeriesExplorer } from '../../components/TimeSeriesExplorer/TimeSeriesExplorer';
+import { ExploreManager } from '../../components/ExploreManager';
+import { ExplorerManagerProviderWithQueryParams } from '../../components/ExploreManager/ExplorerManagerProviderWithQueryParams';
 export function ViewExploreApp(props) {
     const { exploreTitleComponent } = props;
     const chartsTheme = useChartsTheme();
@@ -29,8 +29,10 @@ export function ViewExploreApp(props) {
         children: /*#__PURE__*/ _jsx(ChartsProvider, {
             chartsTheme: chartsTheme,
             enablePinning: false,
-            children: /*#__PURE__*/ _jsx(TimeSeriesExplorer, {
-                exploreTitleComponent: exploreTitleComponent
+            children: /*#__PURE__*/ _jsx(ExplorerManagerProviderWithQueryParams, {
+                children: /*#__PURE__*/ _jsx(ExploreManager, {
+                    exploreTitleComponent: exploreTitleComponent
+                })
             })
         })
     });

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewExplore/ViewExploreApp.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { ChartsProvider, useChartsTheme } from '@perses-dev/components';\nimport React from 'react';\nimport { TimeSeriesExplorer } from '../../components/TimeSeriesExplorer/TimeSeriesExplorer';\n\nexport interface ViewAppProps {\n  exploreTitleComponent?: React.ReactNode;\n}\n\nexport function ViewExploreApp(props: ViewAppProps) {\n  const { exploreTitleComponent } = props;\n\n  const chartsTheme = useChartsTheme();\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <ChartsProvider chartsTheme={chartsTheme} enablePinning={false}>\n        <TimeSeriesExplorer exploreTitleComponent={exploreTitleComponent} />\n      </ChartsProvider>\n    </Box>\n  );\n}\n"],"names":["Box","ChartsProvider","useChartsTheme","React","TimeSeriesExplorer","ViewExploreApp","props","exploreTitleComponent","chartsTheme","sx","flexGrow","overflowX","overflowY","display","flexDirection","enablePinning"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,cAAc,EAAEC,cAAc,QAAQ,yBAAyB;AACxE,OAAOC,WAAW,QAAQ;AAC1B,SAASC,kBAAkB,QAAQ,yDAAyD;AAM5F,OAAO,SAASC,eAAeC,KAAmB;IAChD,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;IAElC,MAAME,cAAcN;IAEpB,qBACE,KAACF;QACCS,IAAI;YACFC,UAAU;YACVC,WAAW;YACXC,WAAW;YACXC,SAAS;YACTC,eAAe;QACjB;kBAEA,cAAA,KAACb;YAAeO,aAAaA;YAAaO,eAAe;sBACvD,cAAA,KAACX;gBAAmBG,uBAAuBA;;;;AAInD"}
+{"version":3,"sources":["../../../src/views/ViewExplore/ViewExploreApp.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Box } from '@mui/material';\nimport { ChartsProvider, useChartsTheme } from '@perses-dev/components';\nimport { ReactNode } from 'react';\nimport { ExploreManager } from '../../components/ExploreManager';\nimport { ExplorerManagerProviderWithQueryParams } from '../../components/ExploreManager/ExplorerManagerProviderWithQueryParams';\n\nexport interface ViewAppProps {\n  exploreTitleComponent?: ReactNode;\n}\n\nexport function ViewExploreApp(props: ViewAppProps) {\n  const { exploreTitleComponent } = props;\n\n  const chartsTheme = useChartsTheme();\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <ChartsProvider chartsTheme={chartsTheme} enablePinning={false}>\n        <ExplorerManagerProviderWithQueryParams>\n          <ExploreManager exploreTitleComponent={exploreTitleComponent} />\n        </ExplorerManagerProviderWithQueryParams>\n      </ChartsProvider>\n    </Box>\n  );\n}\n"],"names":["Box","ChartsProvider","useChartsTheme","ExploreManager","ExplorerManagerProviderWithQueryParams","ViewExploreApp","props","exploreTitleComponent","chartsTheme","sx","flexGrow","overflowX","overflowY","display","flexDirection","enablePinning"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;;AAEjC,SAASA,GAAG,QAAQ,gBAAgB;AACpC,SAASC,cAAc,EAAEC,cAAc,QAAQ,yBAAyB;AAExE,SAASC,cAAc,QAAQ,kCAAkC;AACjE,SAASC,sCAAsC,QAAQ,yEAAyE;AAMhI,OAAO,SAASC,eAAeC,KAAmB;IAChD,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;IAElC,MAAME,cAAcN;IAEpB,qBACE,KAACF;QACCS,IAAI;YACFC,UAAU;YACVC,WAAW;YACXC,WAAW;YACXC,SAAS;YACTC,eAAe;QACjB;kBAEA,cAAA,KAACb;YAAeO,aAAaA;YAAaO,eAAe;sBACvD,cAAA,KAACX;0BACC,cAAA,KAACD;oBAAeI,uBAAuBA;;;;;AAKjD"}

package/package.json

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

package/dist/cjs/components/TimeSeriesExplorer/TimeSeriesExplorer.js

@@ -1,169 +0,0 @@
-// Copyright 2023 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, {
-    TimeSeriesExplorer: function() {
-        return TimeSeriesExplorer;
-    },
-    TimeSeriesPanel: function() {
-        return TimeSeriesPanel;
-    }
-});
-const _jsxruntime = require("react/jsx-runtime");
-const _pluginsystem = require("@perses-dev/plugin-system");
-const _material = require("@mui/material");
-const _components = require("@perses-dev/components");
-const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _panelsplugin = require("@perses-dev/panels-plugin");
-const _ExploreToolbar = require("../ExploreToolbar");
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interop_require_wildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {
-        __proto__: null
-    };
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
-const PANEL_PREVIEW_HEIGHT = 300;
-const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
-function TimeSeriesPanel({ queries }) {
-    const boxRef = (0, _react.useRef)(null);
-    let width = PANEL_PREVIEW_DEFAULT_WIDTH;
-    if (boxRef.current !== null) {
-        width = boxRef.current.getBoundingClientRect().width;
-    }
-    const suggestedStepMs = (0, _pluginsystem.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__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        ref: boxRef,
-        height: PANEL_PREVIEW_HEIGHT,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-            definitions: definitions,
-            options: {
-                suggestedStepMs
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_panelsplugin.TimeSeriesChart.PanelComponent, {
-                contentDimensions: {
-                    width,
-                    height: PANEL_PREVIEW_HEIGHT
-                },
-                spec: {}
-            })
-        })
-    });
-}
-function TimeSeriesExplorer(props) {
-    const { exploreTitleComponent } = props;
-    const [queries, setQueries] = (0, _react.useState)();
-    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-        sx: {
-            width: '100%'
-        },
-        px: 2,
-        pb: 2,
-        pt: 1.5,
-        gap: 2,
-        children: [
-            /*#__PURE__*/ (0, _jsxruntime.jsx)(_ExploreToolbar.ExploreToolbar, {
-                exploreTitleComponent: exploreTitleComponent
-            }),
-            /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Grid, {
-                container: true,
-                spacing: 2,
-                children: [
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                        item: true,
-                        xs: 12,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Stack, {
-                            gap: 1,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.MultiQueryEditor, {
-                                queryTypes: [
-                                    'TimeSeriesQuery'
-                                ],
-                                onChange: setQueries,
-                                queries: queries
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Grid, {
-                        item: true,
-                        xs: 12,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Stack, {
-                            gap: 1,
-                            children: [
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Typography, {
-                                    variant: "h4",
-                                    children: "Preview"
-                                }),
-                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                                    FallbackComponent: _components.ErrorAlert,
-                                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(TimeSeriesPanel, {
-                                        queries: queries !== null && queries !== void 0 ? queries : []
-                                    })
-                                })
-                            ]
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-}

package/dist/components/TimeSeriesExplorer/TimeSeriesExplorer.d.ts

@@ -1,11 +0,0 @@
-import { QueryDefinition } from '@perses-dev/core';
-import React from 'react';
-export interface TimeseriesExplorerProps {
-    exploreTitleComponent?: React.ReactNode;
-}
-export interface PanelPreviewValues {
-    queries: QueryDefinition[];
-}
-export declare function TimeSeriesPanel({ queries }: PanelPreviewValues): import("react/jsx-runtime").JSX.Element;
-export declare function TimeSeriesExplorer(props: TimeseriesExplorerProps): import("react/jsx-runtime").JSX.Element;
-//# sourceMappingURL=TimeSeriesExplorer.d.ts.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"TimeSeriesExplorer.d.ts","sourceRoot":"","sources":["../../../src/components/TimeSeriesExplorer/TimeSeriesExplorer.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAA2B,MAAM,OAAO,CAAC;AAIhD,MAAM,WAAW,uBAAuB;IACtC,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzC;AAKD,MAAM,WAAW,kBAAkB;IACjC,OAAO,EAAE,eAAe,EAAE,CAAC;CAC5B;AAED,wBAAgB,eAAe,CAAC,EAAE,OAAO,EAAE,EAAE,kBAAkB,2CA+B9D;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,uBAAuB,2CAyBhE"}

package/dist/components/TimeSeriesExplorer/TimeSeriesExplorer.js

@@ -1,112 +0,0 @@
-// Copyright 2023 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, Grid, Stack, Typography } from '@mui/material';
-import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
-import React, { useRef, useState } from 'react';
-import { TimeSeriesChart } from '@perses-dev/panels-plugin';
-import { ExploreToolbar } from '../ExploreToolbar';
-const PANEL_PREVIEW_HEIGHT = 300;
-const PANEL_PREVIEW_DEFAULT_WIDTH = 840;
-export function TimeSeriesPanel({ queries }) {
-    const boxRef = useRef(null);
-    let width = PANEL_PREVIEW_DEFAULT_WIDTH;
-    if (boxRef.current !== null) {
-        width = boxRef.current.getBoundingClientRect().width;
-    }
-    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: PANEL_PREVIEW_HEIGHT,
-        children: /*#__PURE__*/ _jsx(DataQueriesProvider, {
-            definitions: definitions,
-            options: {
-                suggestedStepMs
-            },
-            children: /*#__PURE__*/ _jsx(TimeSeriesChart.PanelComponent, {
-                contentDimensions: {
-                    width,
-                    height: PANEL_PREVIEW_HEIGHT
-                },
-                spec: {}
-            })
-        })
-    });
-}
-export function TimeSeriesExplorer(props) {
-    const { exploreTitleComponent } = props;
-    const [queries, setQueries] = useState();
-    return /*#__PURE__*/ _jsxs(Stack, {
-        sx: {
-            width: '100%'
-        },
-        px: 2,
-        pb: 2,
-        pt: 1.5,
-        gap: 2,
-        children: [
-            /*#__PURE__*/ _jsx(ExploreToolbar, {
-                exploreTitleComponent: exploreTitleComponent
-            }),
-            /*#__PURE__*/ _jsxs(Grid, {
-                container: true,
-                spacing: 2,
-                children: [
-                    /*#__PURE__*/ _jsx(Grid, {
-                        item: true,
-                        xs: 12,
-                        children: /*#__PURE__*/ _jsx(Stack, {
-                            gap: 1,
-                            children: /*#__PURE__*/ _jsx(MultiQueryEditor, {
-                                queryTypes: [
-                                    'TimeSeriesQuery'
-                                ],
-                                onChange: setQueries,
-                                queries: queries
-                            })
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(Grid, {
-                        item: true,
-                        xs: 12,
-                        children: /*#__PURE__*/ _jsxs(Stack, {
-                            gap: 1,
-                            children: [
-                                /*#__PURE__*/ _jsx(Typography, {
-                                    variant: "h4",
-                                    children: "Preview"
-                                }),
-                                /*#__PURE__*/ _jsx(ErrorBoundary, {
-                                    FallbackComponent: ErrorAlert,
-                                    children: /*#__PURE__*/ _jsx(TimeSeriesPanel, {
-                                        queries: queries !== null && queries !== void 0 ? queries : []
-                                    })
-                                })
-                            ]
-                        })
-                    })
-                ]
-            })
-        ]
-    });
-}
-
-//# sourceMappingURL=TimeSeriesExplorer.js.map

package/dist/components/TimeSeriesExplorer/TimeSeriesExplorer.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/TimeSeriesExplorer/TimeSeriesExplorer.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { DataQueriesProvider, MultiQueryEditor, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { Box, Grid, Stack, Typography } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { QueryDefinition } from '@perses-dev/core';\nimport React, { useRef, useState } from 'react';\nimport { TimeSeriesChart } from '@perses-dev/panels-plugin';\nimport { ExploreToolbar } from '../ExploreToolbar';\n\nexport interface TimeseriesExplorerProps {\n  exploreTitleComponent?: React.ReactNode;\n}\n\nconst PANEL_PREVIEW_HEIGHT = 300;\nconst PANEL_PREVIEW_DEFAULT_WIDTH = 840;\n\nexport interface PanelPreviewValues {\n  queries: QueryDefinition[];\n}\n\nexport function TimeSeriesPanel({ queries }: PanelPreviewValues) {\n  const boxRef = useRef<HTMLDivElement>(null);\n  let width = PANEL_PREVIEW_DEFAULT_WIDTH;\n  if (boxRef.current !== null) {\n    width = boxRef.current.getBoundingClientRect().width;\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={PANEL_PREVIEW_HEIGHT}>\n      <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n        <TimeSeriesChart.PanelComponent\n          contentDimensions={{\n            width,\n            height: PANEL_PREVIEW_HEIGHT,\n          }}\n          spec={{}}\n        />\n      </DataQueriesProvider>\n    </Box>\n  );\n}\n\nexport function TimeSeriesExplorer(props: TimeseriesExplorerProps) {\n  const { exploreTitleComponent } = props;\n\n  const [queries, setQueries] = useState<QueryDefinition[]>();\n\n  return (\n    <Stack sx={{ width: '100%' }} px={2} pb={2} pt={1.5} gap={2}>\n      <ExploreToolbar exploreTitleComponent={exploreTitleComponent} />\n      <Grid container spacing={2}>\n        <Grid item xs={12}>\n          <Stack gap={1}>\n            <MultiQueryEditor queryTypes={['TimeSeriesQuery']} onChange={setQueries} queries={queries} />\n          </Stack>\n        </Grid>\n        <Grid item xs={12}>\n          <Stack gap={1}>\n            <Typography variant=\"h4\">Preview</Typography>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TimeSeriesPanel queries={queries ?? []} />\n            </ErrorBoundary>\n          </Stack>\n        </Grid>\n      </Grid>\n    </Stack>\n  );\n}\n"],"names":["DataQueriesProvider","MultiQueryEditor","useSuggestedStepMs","Box","Grid","Stack","Typography","ErrorAlert","ErrorBoundary","React","useRef","useState","TimeSeriesChart","ExploreToolbar","PANEL_PREVIEW_HEIGHT","PANEL_PREVIEW_DEFAULT_WIDTH","TimeSeriesPanel","queries","boxRef","width","current","getBoundingClientRect","suggestedStepMs","definitions","length","map","query","kind","spec","plugin","ref","height","options","PanelComponent","contentDimensions","TimeSeriesExplorer","props","exploreTitleComponent","setQueries","sx","px","pb","pt","gap","container","spacing","item","xs","queryTypes","onChange","variant","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,IAAI,EAAEC,KAAK,EAAEC,UAAU,QAAQ,gBAAgB;AAC7D,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AAEnE,OAAOC,SAASC,MAAM,EAAEC,QAAQ,QAAQ,QAAQ;AAChD,SAASC,eAAe,QAAQ,4BAA4B;AAC5D,SAASC,cAAc,QAAQ,oBAAoB;AAMnD,MAAMC,uBAAuB;AAC7B,MAAMC,8BAA8B;AAMpC,OAAO,SAASC,gBAAgB,EAAEC,OAAO,EAAsB;IAC7D,MAAMC,SAASR,OAAuB;IACtC,IAAIS,QAAQJ;IACZ,IAAIG,OAAOE,OAAO,KAAK,MAAM;QAC3BD,QAAQD,OAAOE,OAAO,CAACC,qBAAqB,GAAGF,KAAK;IACtD;IACA,MAAMG,kBAAkBpB,mBAAmBiB;IAE3C,2DAA2D;IAC3D,MAAMI,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,KAACzB;QAAI2B,KAAKZ;QAAQa,QAAQjB;kBACxB,cAAA,KAACd;YAAoBuB,aAAaA;YAAaS,SAAS;gBAAEV;YAAgB;sBACxE,cAAA,KAACV,gBAAgBqB,cAAc;gBAC7BC,mBAAmB;oBACjBf;oBACAY,QAAQjB;gBACV;gBACAc,MAAM,CAAC;;;;AAKjB;AAEA,OAAO,SAASO,mBAAmBC,KAA8B;IAC/D,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;IAElC,MAAM,CAACnB,SAASqB,WAAW,GAAG3B;IAE9B,qBACE,MAACN;QAAMkC,IAAI;YAAEpB,OAAO;QAAO;QAAGqB,IAAI;QAAGC,IAAI;QAAGC,IAAI;QAAKC,KAAK;;0BACxD,KAAC9B;gBAAewB,uBAAuBA;;0BACvC,MAACjC;gBAAKwC,SAAS;gBAACC,SAAS;;kCACvB,KAACzC;wBAAK0C,IAAI;wBAACC,IAAI;kCACb,cAAA,KAAC1C;4BAAMsC,KAAK;sCACV,cAAA,KAAC1C;gCAAiB+C,YAAY;oCAAC;iCAAkB;gCAAEC,UAAUX;gCAAYrB,SAASA;;;;kCAGtF,KAACb;wBAAK0C,IAAI;wBAACC,IAAI;kCACb,cAAA,MAAC1C;4BAAMsC,KAAK;;8CACV,KAACrC;oCAAW4C,SAAQ;8CAAK;;8CACzB,KAAC1C;oCAAc2C,mBAAmB5C;8CAChC,cAAA,KAACS;wCAAgBC,SAASA,oBAAAA,qBAAAA,UAAW,EAAE;;;;;;;;;;AAOrD"}