@perses-dev/explore 0.44.0 → 0.45.0-rc0

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

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

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

@@ -0,0 +1,169 @@
+// 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/cjs/views/ViewExplore/ViewExplore.js

@@ -26,38 +26,37 @@ const _pluginsystem = require("@perses-dev/plugin-system");
 const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _dashboards = require("@perses-dev/dashboards");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
 const _ViewExploreApp = require("./ViewExploreApp");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function ViewExplore(props) {
-    const { dashboardResource, datasourceApi, externalVariableDefinitions, sx, exploreTitleComponent, ...others } = props;
+    const { datasourceApi, externalVariableDefinitions, sx, exploreTitleComponent, ...others } = props;
     const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(_core.DEFAULT_DASHBOARD_DURATION);
     const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(_core.DEFAULT_REFRESH_INTERVAL);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.DatasourceStoreProvider, {
-        dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.DashboardProvider, {
-            initialState: {
-                dashboardResource,
-                isEditMode: true
-            },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
-                initialTimeRange: initialTimeRange,
-                initialRefreshInterval: initialRefreshInterval,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.TemplateVariableProvider, {
-                    externalVariableDefinitions: externalVariableDefinitions,
-                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-                        sx: (0, _components.combineSx)({
-                            display: 'flex',
-                            width: '100%',
-                            height: '100%',
-                            position: 'relative',
-                            overflow: 'hidden'
-                        }, sx),
-                        ...others,
-                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
-                            FallbackComponent: _components.ErrorAlert,
-                            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ViewExploreApp.ViewExploreApp, {
-                                exploreTitleComponent: exploreTitleComponent
-                            })
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
+            initialTimeRange: initialTimeRange,
+            initialRefreshInterval: initialRefreshInterval,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.TemplateVariableProvider, {
+                externalVariableDefinitions: externalVariableDefinitions,
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
+                    sx: (0, _components.combineSx)({
+                        display: 'flex',
+                        width: '100%',
+                        height: '100%',
+                        position: 'relative',
+                        overflow: 'hidden'
+                    }, sx),
+                    ...others,
+                    children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ErrorBoundary, {
+                        FallbackComponent: _components.ErrorAlert,
+                        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_ViewExploreApp.ViewExploreApp, {
+                            exploreTitleComponent: exploreTitleComponent
                         })
                     })
                 })

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

@@ -23,26 +23,16 @@ Object.defineProperty(exports, "ViewExploreApp", {
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _PanelEditorForm = require("../../components/PanelEditor/PanelEditorForm");
+const _react = /*#__PURE__*/ _interop_require_default(require("react"));
+const _TimeSeriesExplorer = require("../../components/TimeSeriesExplorer/TimeSeriesExplorer");
+function _interop_require_default(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function ViewExploreApp(props) {
     const { exploreTitleComponent } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
-    const data = {
-        groupId: 0,
-        panelDefinition: {
-            kind: 'Panel',
-            spec: {
-                display: {
-                    name: ''
-                },
-                plugin: {
-                    kind: 'TimeSeriesChart',
-                    spec: {}
-                },
-                queries: []
-            }
-        }
-    };
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
         sx: {
             flexGrow: 1,
@@ -54,9 +44,7 @@ function ViewExploreApp(props) {
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
             chartsTheme: chartsTheme,
             enablePinning: false,
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_PanelEditorForm.PanelEditorForm, {
-                initialAction: "update",
-                initialValues: data,
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TimeSeriesExplorer.TimeSeriesExplorer, {
                 exploreTitleComponent: exploreTitleComponent
             })
         })

package/dist/components/ExploreToolbar/ExploreToolbar.d.ts

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 export interface ExploreToolbarProps {
-    exploreTitleComponent?: JSX.Element;
+    exploreTitleComponent?: React.ReactNode;
 }
 export declare const ExploreToolbar: (props: ExploreToolbarProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ExploreToolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"ExploreToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreToolbar/ExploreToolbar.tsx"],"names":[],"mappings":";AAgBA,MAAM,WAAW,mBAAmB;IAClC,qBAAqB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACrC;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,4CAuBxD,CAAC"}
+{"version":3,"file":"ExploreToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/ExploreToolbar/ExploreToolbar.tsx"],"names":[],"mappings":"AAeA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,MAAM,WAAW,mBAAmB;IAClC,qBAAqB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CACzC;AAED,eAAO,MAAM,cAAc,UAAW,mBAAmB,4CAuBxD,CAAC"}

package/dist/components/ExploreToolbar/ExploreToolbar.js

@@ -12,7 +12,8 @@
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Stack, Box, useTheme, useMediaQuery } from '@mui/material';
-import { TimeRangeControls } from '@perses-dev/dashboards';
+import { TimeRangeControls } from '@perses-dev/plugin-system';
+import React from 'react';
 export const ExploreToolbar = (props)=>{
     const { exploreTitleComponent } = props;
     const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));

package/dist/components/ExploreToolbar/ExploreToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/ExploreToolbar/ExploreToolbar.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 { Stack, Box, useTheme, useMediaQuery } from '@mui/material';\nimport { TimeRangeControls } from '@perses-dev/dashboards';\n\nexport interface ExploreToolbarProps {\n  exploreTitleComponent?: JSX.Element;\n}\n\nexport const ExploreToolbar = (props: ExploreToolbarProps) => {\n  const { exploreTitleComponent } = props;\n\n  const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));\n\n  const testId = 'explore-toolbar';\n\n  return (\n    <Stack data-testid={testId}>\n      <Box sx={{ display: 'flex', width: '100%' }}>\n        {exploreTitleComponent}\n        <Stack\n          direction=\"row\"\n          spacing={1}\n          ml=\"auto\"\n          flexWrap={isBiggerThanLg ? 'nowrap' : 'wrap-reverse'}\n          justifyContent=\"end\"\n        >\n          <TimeRangeControls />\n        </Stack>\n      </Box>\n    </Stack>\n  );\n};\n"],"names":["Stack","Box","useTheme","useMediaQuery","TimeRangeControls","ExploreToolbar","props","exploreTitleComponent","isBiggerThanLg","breakpoints","up","testId","data-testid","sx","display","width","direction","spacing","ml","flexWrap","justifyContent"],"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,KAAK,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,gBAAgB;AACpE,SAASC,iBAAiB,QAAQ,yBAAyB;AAM3D,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;IAElC,MAAME,iBAAiBL,cAAcD,WAAWO,WAAW,CAACC,EAAE,CAAC;IAE/D,MAAMC,SAAS;IAEf,qBACE,KAACX;QAAMY,eAAaD;kBAClB,cAAA,MAACV;YAAIY,IAAI;gBAAEC,SAAS;gBAAQC,OAAO;YAAO;;gBACvCR;8BACD,KAACP;oBACCgB,WAAU;oBACVC,SAAS;oBACTC,IAAG;oBACHC,UAAUX,iBAAiB,WAAW;oBACtCY,gBAAe;8BAEf,cAAA,KAAChB;;;;;AAKX,EAAE"}
+{"version":3,"sources":["../../../src/components/ExploreToolbar/ExploreToolbar.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 { Stack, Box, useTheme, useMediaQuery } from '@mui/material';\nimport { TimeRangeControls } from '@perses-dev/plugin-system';\nimport React from 'react';\n\nexport interface ExploreToolbarProps {\n  exploreTitleComponent?: React.ReactNode;\n}\n\nexport const ExploreToolbar = (props: ExploreToolbarProps) => {\n  const { exploreTitleComponent } = props;\n\n  const isBiggerThanLg = useMediaQuery(useTheme().breakpoints.up('lg'));\n\n  const testId = 'explore-toolbar';\n\n  return (\n    <Stack data-testid={testId}>\n      <Box sx={{ display: 'flex', width: '100%' }}>\n        {exploreTitleComponent}\n        <Stack\n          direction=\"row\"\n          spacing={1}\n          ml=\"auto\"\n          flexWrap={isBiggerThanLg ? 'nowrap' : 'wrap-reverse'}\n          justifyContent=\"end\"\n        >\n          <TimeRangeControls />\n        </Stack>\n      </Box>\n    </Stack>\n  );\n};\n"],"names":["Stack","Box","useTheme","useMediaQuery","TimeRangeControls","React","ExploreToolbar","props","exploreTitleComponent","isBiggerThanLg","breakpoints","up","testId","data-testid","sx","display","width","direction","spacing","ml","flexWrap","justifyContent"],"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,KAAK,EAAEC,GAAG,EAAEC,QAAQ,EAAEC,aAAa,QAAQ,gBAAgB;AACpE,SAASC,iBAAiB,QAAQ,4BAA4B;AAC9D,OAAOC,WAAW,QAAQ;AAM1B,OAAO,MAAMC,iBAAiB,CAACC;IAC7B,MAAM,EAAEC,qBAAqB,EAAE,GAAGD;IAElC,MAAME,iBAAiBN,cAAcD,WAAWQ,WAAW,CAACC,EAAE,CAAC;IAE/D,MAAMC,SAAS;IAEf,qBACE,KAACZ;QAAMa,eAAaD;kBAClB,cAAA,MAACX;YAAIa,IAAI;gBAAEC,SAAS;gBAAQC,OAAO;YAAO;;gBACvCR;8BACD,KAACR;oBACCiB,WAAU;oBACVC,SAAS;oBACTC,IAAG;oBACHC,UAAUX,iBAAiB,WAAW;oBACtCY,gBAAe;8BAEf,cAAA,KAACjB;;;;;AAKX,EAAE"}

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

@@ -0,0 +1,11 @@
+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

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

@@ -0,0 +1,112 @@
+// 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

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

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

@@ -1,12 +1,10 @@
-/// <reference types="react" />
 import { BoxProps } from '@mui/material';
-import { DashboardResource } from '@perses-dev/core';
 import { DatasourceStoreProviderProps, TemplateVariableProviderProps } from '@perses-dev/dashboards';
+import React from 'react';
 export interface ViewExploreProps extends Omit<BoxProps, 'children'> {
-    dashboardResource: DashboardResource;
     datasourceApi: DatasourceStoreProviderProps['datasourceApi'];
     externalVariableDefinitions?: TemplateVariableProviderProps['externalVariableDefinitions'];
-    exploreTitleComponent?: JSX.Element;
+    exploreTitleComponent?: React.ReactNode;
 }
 export declare function ViewExplore(props: ViewExploreProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=ViewExplore.d.ts.map

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

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

package/dist/views/ViewExplore/ViewExplore.js

@@ -15,39 +15,33 @@ import { Box } from '@mui/material';
 import { TimeRangeProviderWithQueryParams, useInitialRefreshInterval, useInitialTimeRange } from '@perses-dev/plugin-system';
 import { DEFAULT_DASHBOARD_DURATION, DEFAULT_REFRESH_INTERVAL } from '@perses-dev/core';
 import { ErrorAlert, ErrorBoundary, combineSx } from '@perses-dev/components';
-import { DatasourceStoreProvider, DashboardProvider, TemplateVariableProvider } from '@perses-dev/dashboards';
+import { DatasourceStoreProvider, TemplateVariableProvider } from '@perses-dev/dashboards';
+import React from 'react';
 import { ViewExploreApp } from './ViewExploreApp';
 export function ViewExplore(props) {
-    const { dashboardResource, datasourceApi, externalVariableDefinitions, sx, exploreTitleComponent, ...others } = props;
+    const { datasourceApi, externalVariableDefinitions, sx, exploreTitleComponent, ...others } = props;
     const initialTimeRange = useInitialTimeRange(DEFAULT_DASHBOARD_DURATION);
     const initialRefreshInterval = useInitialRefreshInterval(DEFAULT_REFRESH_INTERVAL);
     return /*#__PURE__*/ _jsx(DatasourceStoreProvider, {
-        dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
-        children: /*#__PURE__*/ _jsx(DashboardProvider, {
-            initialState: {
-                dashboardResource,
-                isEditMode: true
-            },
-            children: /*#__PURE__*/ _jsx(TimeRangeProviderWithQueryParams, {
-                initialTimeRange: initialTimeRange,
-                initialRefreshInterval: initialRefreshInterval,
-                children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
-                    externalVariableDefinitions: externalVariableDefinitions,
-                    children: /*#__PURE__*/ _jsx(Box, {
-                        sx: combineSx({
-                            display: 'flex',
-                            width: '100%',
-                            height: '100%',
-                            position: 'relative',
-                            overflow: 'hidden'
-                        }, sx),
-                        ...others,
-                        children: /*#__PURE__*/ _jsx(ErrorBoundary, {
-                            FallbackComponent: ErrorAlert,
-                            children: /*#__PURE__*/ _jsx(ViewExploreApp, {
-                                exploreTitleComponent: exploreTitleComponent
-                            })
+        children: /*#__PURE__*/ _jsx(TimeRangeProviderWithQueryParams, {
+            initialTimeRange: initialTimeRange,
+            initialRefreshInterval: initialRefreshInterval,
+            children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
+                externalVariableDefinitions: externalVariableDefinitions,
+                children: /*#__PURE__*/ _jsx(Box, {
+                    sx: combineSx({
+                        display: 'flex',
+                        width: '100%',
+                        height: '100%',
+                        position: 'relative',
+                        overflow: 'hidden'
+                    }, sx),
+                    ...others,
+                    children: /*#__PURE__*/ _jsx(ErrorBoundary, {
+                        FallbackComponent: ErrorAlert,
+                        children: /*#__PURE__*/ _jsx(ViewExploreApp, {
+                            exploreTitleComponent: exploreTitleComponent
                         })
                     })
                 })

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

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

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
+import React from 'react';
 export interface ViewAppProps {
-    exploreTitleComponent?: JSX.Element;
+    exploreTitleComponent?: React.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":";AAkBA,MAAM,WAAW,YAAY;IAC3B,qBAAqB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACrC;AAED,wBAAgB,cAAc,CAAC,KAAK,EAAE,YAAY,2CAoCjD"}
+{"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"}