@perses-dev/dashboards 0.54.0-beta.7 → 0.54.0-beta.9

package/dist/cjs/components/DashboardToolbar/DashboardToolbar.js

@@ -38,9 +38,9 @@ const _EditAnnotationsButton = require("../Annotations/EditAnnotationsButton");
 const _DashboardLinks = require("../DashboardLinks");
 const _LinksDisplay = require("../LinksDisplay");
 const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, isLinksEnabled = true, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, isLinksEnabled = true, timezone: toolbarTimezone, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = (0, _context.useEditMode)();
-    const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZoneParams)('local');
+    const { timeZone, setTimeZone } = (0, _pluginsystem.useTimeZoneParams)(toolbarTimezone);
     const dashboardLinks = (0, _context.useDashboardLinks)();
     const isBiggerThanSm = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('sm'));
     const isBiggerThanMd = (0, _material.useMediaQuery)((0, _material.useTheme)().breakpoints.up('md'));

package/dist/cjs/components/GridLayout/GridItemContent.js

@@ -124,13 +124,6 @@ function GridItemContent(props) {
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const suggestedStepMs = (0, _pluginsystem.useSuggestedStepMs)(width);
     const { data: plugin } = (0, _pluginsystem.usePlugin)('Panel', panelDefinition.spec.plugin.kind);
-    const queryDefinitions = queries ?? [];
-    const definitions = queryDefinitions.map((query)=>{
-        return {
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec
-        };
-    });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         ref: mergedRef,
@@ -144,7 +137,7 @@ function GridItemContent(props) {
         },
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DataQueriesProvider, {
-                definitions: definitions,
+                definitions: queries ?? [],
                 options: {
                     suggestedStepMs,
                     ...pluginQueryOptions
@@ -163,7 +156,7 @@ function GridItemContent(props) {
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_QueryViewerDialog.QueryViewerDialog, {
                 open: openQueryViewer,
-                queryDefinitions: queryDefinitions,
+                queryDefinitions: queries ?? [],
                 onClose: ()=>setOpenQueryViewer(false)
             })
         ]

package/dist/cjs/components/PanelDrawer/PanelQueriesSharedControls.js

@@ -34,22 +34,12 @@ function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQuerie
         panelDefinition.spec.plugin.spec,
         pluginPreview
     ]);
-    const [previewDefinition, setPreviewDefinition] = (0, _react.useState)(()=>panelDefinition.spec.queries?.map((query)=>{
-            return {
-                kind: query.spec.plugin.kind,
-                spec: query.spec.plugin.spec
-            };
-        }) ?? []);
+    const [previewDefinition, setPreviewDefinition] = (0, _react.useState)(panelDefinition.spec.queries ?? []);
     const handleOnQueriesChange = (0, _react.useCallback)((queries)=>{
         onQueriesChange(queries);
         // If the number of queries has changed, force preview definition update to remove results of deleted queries.
         if (queries.length !== previewDefinition.length) {
-            setPreviewDefinition(queries.map((query)=>{
-                return {
-                    kind: query.spec.plugin.kind,
-                    spec: query.spec.plugin.spec
-                };
-            }));
+            setPreviewDefinition(queries);
         }
     }, [
         onQueriesChange,
@@ -60,10 +50,7 @@ function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQuerie
             const newDefinitions = [
                 ...prev
             ];
-            newDefinitions[index] = {
-                kind: newDef.spec.plugin.kind,
-                spec: newDef.spec.plugin.spec
-            };
+            newDefinitions[index] = newDef;
             return newDefinitions;
         });
     }, []);

package/dist/cjs/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.js

@@ -33,16 +33,20 @@ const SaveChangesConfirmationDialog = ()=>{
     const isSavedDurationModified = dialog?.isSavedDurationModified ?? true;
     const isSavedVariableModified = dialog?.isSavedVariableModified ?? true;
     const isSavedRefreshIntervalModified = dialog?.isSavedRefreshIntervalModified ?? true;
+    const isSavedTimeZoneModified = dialog?.isTimeZoneModified ?? true;
     const [saveDefaultTimeRange, setSaveDefaultTimeRange] = (0, _react.useState)(isSavedDurationModified);
     const [saveDefaultVariables, setSaveDefaultVariables] = (0, _react.useState)(isSavedVariableModified);
     const [saveDefaultRefreshInterval, setDefaultRefreshInterval] = (0, _react.useState)(isSavedRefreshIntervalModified);
+    const [saveDefaultTimeZone, setSaveDefaultTimeZone] = (0, _react.useState)(isSavedTimeZoneModified);
     const { getSavedVariablesStatus } = (0, _context.useVariableDefinitionActions)();
     const { modifiedVariableNames } = getSavedVariablesStatus();
     const isOpen = dialog !== undefined;
     const { timeRange, refreshInterval } = (0, _pluginsystem.useTimeRange)();
+    const { timeZone } = (0, _pluginsystem.useTimeZoneParams)();
     const currentTimeRangeText = (0, _spec.isRelativeTimeRange)(timeRange) ? `(Last ${timeRange.pastDuration})` : '(Absolute time ranges can not be saved)';
-    const saveTimeRangeMessage = `Save current time range as new default ${currentTimeRangeText}`;
-    const saveVariableMessage = `Save current variable values as new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
+    const saveTimeRangeMessage = `Save current time range as the new default ${currentTimeRangeText}`;
+    const saveTimeZoneMessage = `Save the current timezone as the new default (${timeZone})`;
+    const saveVariableMessage = `Save current variable values as the new default (${modifiedVariableNames.length > 0 ? modifiedVariableNames.join(', ') : 'No modified variables'})`;
     const refreshIntervalDisplay = _pluginsystem.DEFAULT_REFRESH_INTERVAL_OPTIONS.some((i)=>i.display === refreshInterval) ? refreshInterval : _pluginsystem.DEFAULT_REFRESH_INTERVAL_OPTIONS.find((i)=>i.value.pastDuration === refreshInterval)?.display;
     const saveRefreshIntervalMessage = `Save current refresh interval as new default ${refreshIntervalDisplay ? `(${refreshIntervalDisplay})` : 'refresh interval not modified'}`;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog, {
@@ -84,6 +88,14 @@ const SaveChangesConfirmationDialog = ()=>{
                                         onChange: (e)=>setSaveDefaultVariables(e.target.checked)
                                     }),
                                     label: saveVariableMessage
+                                }),
+                                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.FormControlLabel, {
+                                    control: /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Checkbox, {
+                                        disabled: !isSavedTimeZoneModified,
+                                        checked: saveDefaultTimeZone && isSavedTimeZoneModified,
+                                        onChange: (e)=>setSaveDefaultTimeZone(e.target.checked)
+                                    }),
+                                    label: saveTimeZoneMessage
                                 })
                             ]
                         })
@@ -93,7 +105,12 @@ const SaveChangesConfirmationDialog = ()=>{
                     children: [
                         /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.Dialog.PrimaryButton, {
                             onClick: ()=>{
-                                return dialog.onSaveChanges(saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables);
+                                return dialog.onSaveChanges({
+                                    saveDefaultTimeRange,
+                                    saveDefaultRefreshInterval,
+                                    saveDefaultVariables,
+                                    saveDefaultTimeZone
+                                });
                             },
                             children: "Save Changes"
                         }),

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -92,7 +92,7 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef } } = props;
-    const { kind, metadata, spec: { display, duration, refreshInterval = _constants.DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} } } = dashboardResource;
+    const { kind, metadata, spec: { display, timezone, duration, refreshInterval = _constants.DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} } } = dashboardResource;
     const links = dashboardResource.spec.links ?? [];
     const ttl = 'ttl' in dashboardResource.spec ? dashboardResource.spec.ttl : undefined;
     const store = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
@@ -113,6 +113,7 @@ function initStore(props) {
             kind,
             metadata,
             display,
+            timezone,
             duration,
             refreshInterval,
             datasources,
@@ -123,11 +124,12 @@ function initStore(props) {
                     isEditMode
                 });
             },
-            setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {}, links = [] } })=>{
+            setDashboard: ({ kind, metadata, spec: { display, panels = {}, layouts = [], duration, refreshInterval, datasources = {}, links = [], timezone } })=>{
                 set((state)=>{
                     state.kind = kind;
                     state.metadata = metadata;
                     state.display = display;
+                    state.timezone = timezone;
                     state.panels = panels;
                     const { panelGroups, panelGroupOrder } = (0, _panelgroupslice.convertLayoutsToPanelGroups)(layouts);
                     state.panelGroups = panelGroups;
@@ -138,6 +140,11 @@ function initStore(props) {
                     state.links = links;
                 // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring
                 });
+            },
+            setMetadata: (metadata)=>{
+                set((state)=>{
+                    state.metadata = typeof metadata === 'function' ? metadata(state.metadata) : metadata;
+                });
             }
         };
     })));

package/dist/cjs/context/DashboardProvider/use-save-dashboard.js

@@ -31,6 +31,7 @@ function useSaveDashboard(onSave) {
     const { dashboard, setDashboard } = (0, _useDashboard.useDashboard)();
     const { setEditMode } = (0, _dashboardproviderapi.useEditMode)();
     const { timeRange, refreshInterval } = (0, _pluginsystem.useTimeRange)();
+    const { timeZone } = (0, _pluginsystem.useTimeZoneParams)();
     const { getSavedVariablesStatus, setVariableDefaultValues } = (0, _VariableProvider.useVariableDefinitionActions)();
     const { openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog } = (0, _dashboardproviderapi.useSaveChangesConfirmationDialog)();
     const performSave = (0, _react.useCallback)(async ()=>{
@@ -59,12 +60,17 @@ function useSaveDashboard(onSave) {
         const { isSavedVariableModified } = getSavedVariablesStatus();
         const isSavedDurationModified = (0, _spec.isRelativeTimeRange)(timeRange) && dashboard.spec.duration !== timeRange.pastDuration;
         const isSavedRefreshIntervalModified = dashboard.spec.refreshInterval !== refreshInterval;
-        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified) {
+        const isTimeZoneModified = timeZone === 'local' && !dashboard.spec.timezone ? false : dashboard.spec.timezone !== timeZone;
+        if (isSavedDurationModified || isSavedVariableModified || isSavedRefreshIntervalModified || isTimeZoneModified) {
             openSaveChangesConfirmationDialog({
-                onSaveChanges: (saveDefaultTimeRange, saveDefaultRefreshInterval, saveDefaultVariables)=>{
+                onSaveChanges: (options)=>{
+                    const { saveDefaultRefreshInterval, saveDefaultTimeRange, saveDefaultTimeZone, saveDefaultVariables } = options;
                     if ((0, _spec.isRelativeTimeRange)(timeRange) && saveDefaultTimeRange) {
                         dashboard.spec.duration = timeRange.pastDuration;
                     }
+                    if (saveDefaultTimeZone) {
+                        dashboard.spec.timezone = timeZone;
+                    }
                     if (saveDefaultVariables) {
                         const variables = setVariableDefaultValues();
                         dashboard.spec.variables = variables;
@@ -80,17 +86,19 @@ function useSaveDashboard(onSave) {
                 },
                 isSavedDurationModified,
                 isSavedVariableModified,
-                isSavedRefreshIntervalModified
+                isSavedRefreshIntervalModified,
+                isTimeZoneModified
             });
         } else {
             performSave();
         }
     }, [
         isSaving,
-        getSavedVariablesStatus,
         timeRange,
         dashboard,
         refreshInterval,
+        timeZone,
+        getSavedVariablesStatus,
         openSaveChangesConfirmationDialog,
         setVariableDefaultValues,
         setDashboard,

package/dist/cjs/context/useDashboard.js

@@ -25,13 +25,14 @@ const _DashboardProvider = require("./DashboardProvider");
 const _VariableProvider = require("./VariableProvider");
 const _AnnotationProvider = require("./AnnotationProvider");
 function useDashboard() {
-    const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, links, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, links, ttl })=>({
+    const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, timezone, duration, refreshInterval, datasources, links, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, timezone, display, duration, refreshInterval, datasources, links, ttl })=>({
             panels,
             panelGroups,
             panelGroupOrder,
             setDashboard,
             kind,
             metadata,
+            timezone,
             display,
             duration,
             refreshInterval,
@@ -54,6 +55,7 @@ function useDashboard() {
             variables,
             annotations,
             duration,
+            timezone,
             refreshInterval,
             datasources,
             links

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -36,7 +36,7 @@ const DashboardApp = (props)=>{
     });
 };
 const DashboardAppContent = (props)=>{
-    const { dashboardResource, emptyDashboardProps, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, disableShortcuts, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard } = props;
+    const { dashboardResource, emptyDashboardProps, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, disableShortcuts, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, userPreferenceTimezone, onSave, onDiscard } = props;
     const chartsTheme = (0, _components.useChartsTheme)();
     const { isEditMode, setEditMode } = (0, _context.useEditMode)();
     const { dashboard, setDashboard } = (0, _context.useDashboard)();
@@ -81,6 +81,12 @@ const DashboardAppContent = (props)=>{
         onCancelButtonClick,
         disabled: disableShortcuts
     });
+    const toolBarTimezone = (0, _react.useMemo)(()=>{
+        return dashboardResource.spec.timezone || userPreferenceTimezone || 'local';
+    }, [
+        dashboardResource.spec,
+        userPreferenceTimezone
+    ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
         sx: {
             flexGrow: 1,
@@ -92,6 +98,7 @@ const DashboardAppContent = (props)=>{
         children: [
             /*#__PURE__*/ (0, _jsxruntime.jsx)(_components1.DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
+                timezone: toolBarTimezone,
                 dashboardTitleComponent: dashboardTitleComponent,
                 initialVariableIsSticky: isInitialVariableSticky,
                 onSave: onSave,

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -30,7 +30,7 @@ const _context = require("../../context");
 const _DashboardProviderWithQueryParams = require("../../context/DashboardProvider/DashboardProviderWithQueryParams");
 const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource, datasourceApi, externalVariableDefinitions, emptyDashboardProps, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, disableShortcuts, isEditing, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard, sx, ...others } = props;
+    const { dashboardResource, datasourceApi, externalVariableDefinitions, emptyDashboardProps, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, disableShortcuts, isEditing, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard, sx, userPreferenceTimezone, ...others } = props;
     const { spec } = dashboardResource;
     const dashboardDuration = spec.duration ?? _constants.DEFAULT_DASHBOARD_DURATION;
     const dashboardRefreshInterval = spec.refreshInterval ?? _constants.DEFAULT_REFRESH_INTERVAL;
@@ -116,7 +116,8 @@ function ViewDashboard(props) {
                                     isLeavingConfirmDialogEnabled: isLeavingConfirmDialogEnabled,
                                     dashboardTitleComponent: dashboardTitleComponent,
                                     onSave: onSave,
-                                    onDiscard: onDiscard
+                                    onDiscard: onDiscard,
+                                    userPreferenceTimezone: userPreferenceTimezone
                                 })
                             })
                         })

package/dist/components/DashboardToolbar/DashboardToolbar.d.ts

@@ -9,6 +9,7 @@ export interface DashboardToolbarProps {
     isAnnotationEnabled: boolean;
     isDatasourceEnabled: boolean;
     isLinksEnabled?: boolean;
+    timezone: string;
     onEditButtonClick: () => void;
     onCancelButtonClick: () => void;
     onSave?: OnSaveDashboard;

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,eAAe,EAAkC,MAAM,eAAe,CAAC;AAchF,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YA2G/D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":"AAgBA,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,EAAE,eAAe,EAAkC,MAAM,eAAe,CAAC;AAchF,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,SAAS,CAAC;IACpC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,mBAAmB,EAAE,OAAO,CAAC;IAC7B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,EAAE,MAAM,CAAC;IACjB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,KAAG,YA4G/D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -28,9 +28,9 @@ import { EditAnnotationsButton } from '../Annotations/EditAnnotationsButton';
 import { EditDashboardLinksButton } from '../DashboardLinks';
 import { LinksDisplay } from '../LinksDisplay';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, isLinksEnabled = true, onEditButtonClick, onCancelButtonClick, onSave } = props;
+    const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, isReadonly, isVariableEnabled, isAnnotationEnabled, isDatasourceEnabled, isLinksEnabled = true, timezone: toolbarTimezone, onEditButtonClick, onCancelButtonClick, onSave } = props;
     const { isEditMode } = useEditMode();
-    const { timeZone, setTimeZone } = useTimeZoneParams('local');
+    const { timeZone, setTimeZone } = useTimeZoneParams(toolbarTimezone);
     const dashboardLinks = useDashboardLinks();
     const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));
     const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));

package/dist/components/DashboardToolbar/DashboardToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls, useTimeZoneParams } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { OnSaveDashboard, useEditMode, useDashboardLinks } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\nimport { EditAnnotationsButton } from '../Annotations/EditAnnotationsButton';\nimport { EditDashboardLinksButton } from '../DashboardLinks';\nimport { LinksDisplay } from '../LinksDisplay';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: ReactNode;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isAnnotationEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  isLinksEnabled?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isAnnotationEnabled,\n    isDatasourceEnabled,\n    isLinksEnabled = true,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n  const { timeZone, setTimeZone } = useTimeZoneParams('local');\n  const dashboardLinks = useDashboardLinks();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ gap: 2, backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isLinksEnabled && (\n            <Stack display=\"flex\" justifyItems=\"center\" alignItems=\"center\" justifyContent=\"center\">\n              <LinksDisplay links={dashboardLinks} variant=\"dashboard\" />\n            </Stack>\n          )}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"auto\">\n              {isReadonly && (\n                <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                {isAnnotationEnabled && <EditAnnotationsButton />}\n                {isVariableEnabled && <EditVariablesButton />}\n                {isDatasourceEnabled && <EditDatasourcesButton />}\n                {isLinksEnabled && <EditDashboardLinksButton />}\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n          <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls timeZone={timeZone} onTimeZoneChange={(tz) => setTimeZone(tz.value)} />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useTimeZoneParams","useEditMode","useDashboardLinks","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","EditAnnotationsButton","EditDashboardLinksButton","LinksDisplay","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isAnnotationEnabled","isDatasourceEnabled","isLinksEnabled","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","timeZone","setTimeZone","dashboardLinks","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","gap","backgroundColor","theme","palette","primary","main","justifyItems","alignItems","justifyContent","links","direction","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","flexDirection","flexWrap","FallbackComponent","background","default","mt","onTimeZoneChange","tz","value"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 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 { Typography, Stack, Button, Box, useTheme, useMediaQuery, Alert } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { TimeRangeControls, useTimeZoneParams } from '@perses-dev/plugin-system';\nimport { ReactElement, ReactNode } from 'react';\nimport { OnSaveDashboard, useEditMode, useDashboardLinks } from '../../context';\nimport { AddPanelButton } from '../AddPanelButton';\nimport { AddGroupButton } from '../AddGroupButton';\nimport { DownloadButton } from '../DownloadButton';\nimport { EditVariablesButton } from '../Variables';\nimport { EditDatasourcesButton } from '../Datasources';\nimport { EditButton } from '../EditButton';\nimport { EditJsonButton } from '../EditJsonButton';\nimport { SaveDashboardButton } from '../SaveDashboardButton';\nimport { DashboardStickyToolbar } from '../DashboardStickyToolbar';\nimport { EditAnnotationsButton } from '../Annotations/EditAnnotationsButton';\nimport { EditDashboardLinksButton } from '../DashboardLinks';\nimport { LinksDisplay } from '../LinksDisplay';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: ReactNode;\n  initialVariableIsSticky?: boolean;\n  isReadonly: boolean;\n  isVariableEnabled: boolean;\n  isAnnotationEnabled: boolean;\n  isDatasourceEnabled: boolean;\n  isLinksEnabled?: boolean;\n  timezone: string;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n  onSave?: OnSaveDashboard;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps): ReactElement => {\n  const {\n    dashboardName,\n    dashboardTitleComponent,\n    initialVariableIsSticky,\n    isReadonly,\n    isVariableEnabled,\n    isAnnotationEnabled,\n    isDatasourceEnabled,\n    isLinksEnabled = true,\n    timezone: toolbarTimezone,\n    onEditButtonClick,\n    onCancelButtonClick,\n    onSave,\n  } = props;\n\n  const { isEditMode } = useEditMode();\n  const { timeZone, setTimeZone } = useTimeZoneParams(toolbarTimezone);\n  const dashboardLinks = useDashboardLinks();\n\n  const isBiggerThanSm = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const isBiggerThanMd = useMediaQuery(useTheme().breakpoints.up('md'));\n\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const testId = 'dashboard-toolbar';\n\n  return (\n    <>\n      <Stack data-testid={testId}>\n        <Box\n          px={2}\n          py={1.5}\n          display=\"flex\"\n          sx={{ gap: 2, backgroundColor: (theme) => theme.palette.primary.main + (isEditMode ? '30' : '0') }}\n        >\n          {dashboardTitle}\n          {isLinksEnabled && (\n            <Stack display=\"flex\" justifyItems=\"center\" alignItems=\"center\" justifyContent=\"center\">\n              <LinksDisplay links={dashboardLinks} variant=\"dashboard\" />\n            </Stack>\n          )}\n          {isEditMode ? (\n            <Stack direction=\"row\" gap={1} ml=\"auto\">\n              {isReadonly && (\n                <Alert severity=\"warning\" sx={{ backgroundColor: 'transparent', padding: 0 }}>\n                  Dashboard managed via code only. Download JSON and commit changes to save.\n                </Alert>\n              )}\n              <Stack direction=\"row\" spacing={0.5} ml={1} whiteSpace=\"nowrap\">\n                {isAnnotationEnabled && <EditAnnotationsButton />}\n                {isVariableEnabled && <EditVariablesButton />}\n                {isDatasourceEnabled && <EditDatasourcesButton />}\n                {isLinksEnabled && <EditDashboardLinksButton />}\n                <AddPanelButton />\n                <AddGroupButton />\n              </Stack>\n              <SaveDashboardButton onSave={onSave} isDisabled={isReadonly} />\n              <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                Cancel\n              </Button>\n            </Stack>\n          ) : (\n            <>\n              {isBiggerThanSm && (\n                <Stack direction=\"row\" gap={1} ml=\"auto\">\n                  <EditButton onClick={onEditButtonClick} />\n                </Stack>\n              )}\n            </>\n          )}\n        </Box>\n        <Box\n          sx={{\n            display: 'flex',\n            width: '100%',\n            alignItems: 'start',\n            padding: (theme) => theme.spacing(1, 2, 0, 2),\n            flexDirection: isBiggerThanMd ? 'row' : 'column',\n            flexWrap: 'nowrap',\n            gap: 1,\n          }}\n        >\n          <Box width=\"100%\">\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <DashboardStickyToolbar\n                initialVariableIsSticky={initialVariableIsSticky}\n                sx={{\n                  backgroundColor: ({ palette }) => palette.background.default,\n                }}\n              />\n            </ErrorBoundary>\n          </Box>\n          <Stack direction=\"row\" ml=\"auto\" flexWrap=\"wrap\" justifyContent=\"end\">\n            <Stack direction=\"row\" spacing={1} mt={1} ml={1}>\n              <TimeRangeControls timeZone={timeZone} onTimeZoneChange={(tz) => setTimeZone(tz.value)} />\n              <DownloadButton />\n              <EditJsonButton isReadonly={!isEditMode} />\n            </Stack>\n          </Stack>\n        </Box>\n      </Stack>\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","Alert","ErrorBoundary","ErrorAlert","TimeRangeControls","useTimeZoneParams","useEditMode","useDashboardLinks","AddPanelButton","AddGroupButton","DownloadButton","EditVariablesButton","EditDatasourcesButton","EditButton","EditJsonButton","SaveDashboardButton","DashboardStickyToolbar","EditAnnotationsButton","EditDashboardLinksButton","LinksDisplay","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","isReadonly","isVariableEnabled","isAnnotationEnabled","isDatasourceEnabled","isLinksEnabled","timezone","toolbarTimezone","onEditButtonClick","onCancelButtonClick","onSave","isEditMode","timeZone","setTimeZone","dashboardLinks","isBiggerThanSm","breakpoints","up","isBiggerThanMd","dashboardTitle","variant","testId","data-testid","px","py","display","sx","gap","backgroundColor","theme","palette","primary","main","justifyItems","alignItems","justifyContent","links","direction","ml","severity","padding","spacing","whiteSpace","isDisabled","onClick","width","flexDirection","flexWrap","FallbackComponent","background","default","mt","onTimeZoneChange","tz","value"],"mappings":"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"}

package/dist/components/GridLayout/GridItemContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAA2B,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGxE,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CAqHzE"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":"AAgBA,OAAc,EAAE,YAAY,EAAqB,MAAM,OAAO,CAAC;AAC/D,OAAO,EAA2B,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAGxE,OAAO,EAAqB,YAAY,EAAE,MAAM,UAAU,CAAC;AAG3D,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,GAAG,YAAY,CA6GzE"}

package/dist/components/GridLayout/GridItemContent.js

@@ -75,13 +75,6 @@ import { QueryViewerDialog } from '../QueryViewerDialog';
     // map TimeSeriesQueryDefinition to Definition<UnknownSpec>
     const suggestedStepMs = useSuggestedStepMs(width);
     const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);
-    const queryDefinitions = queries ?? [];
-    const definitions = queryDefinitions.map((query)=>{
-        return {
-            kind: query.spec.plugin.kind,
-            spec: query.spec.plugin.spec
-        };
-    });
     const pluginQueryOptions = typeof plugin?.queryOptions === 'function' ? plugin?.queryOptions(panelDefinition.spec.plugin.spec) : plugin?.queryOptions;
     return /*#__PURE__*/ _jsxs(Box, {
         ref: mergedRef,
@@ -95,7 +88,7 @@ import { QueryViewerDialog } from '../QueryViewerDialog';
         },
         children: [
             /*#__PURE__*/ _jsx(DataQueriesProvider, {
-                definitions: definitions,
+                definitions: queries ?? [],
                 options: {
                     suggestedStepMs,
                     ...pluginQueryOptions
@@ -114,7 +107,7 @@ import { QueryViewerDialog } from '../QueryViewerDialog';
             }),
             /*#__PURE__*/ _jsx(QueryViewerDialog, {
                 open: openQueryViewer,
-                queryDefinitions: queryDefinitions,
+                queryDefinitions: queries ?? [],
                 onClose: ()=>setOpenQueryViewer(false)
             })
         ]

package/dist/components/GridLayout/GridItemContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 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, useForkRef } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport React, { ReactElement, useMemo, useState } from 'react';\nimport { isPanelGroupItemIdEqual, PanelGroupItemId } from '../../model'; // TODO\nimport { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { usePanelFocusHandlers } from '../../keyboard-shortcuts';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { QueryViewerDialog } from '../QueryViewerDialog';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n\n  const {\n    spec: { queries },\n  } = panelDefinition;\n\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);\n  const viewPanelGroupItemId = useViewPanelGroup();\n\n  // Panel focus tracking for keyboard shortcuts\n  const { onMouseEnter, onMouseLeave } = usePanelFocusHandlers(\n    `${panelGroupItemId.panelGroupId}-${panelGroupItemId.panelGroupItemLayoutId}`\n  );\n\n  const { ref: queryRef, inView: shouldQuery } = useInView({\n    threshold: 0,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const { ref: renderRef, inView: shouldRender } = useInView({\n    threshold: 0.2,\n    initialInView: false,\n    triggerOnce: false,\n  });\n\n  const mergedRef = useForkRef(renderRef, queryRef);\n\n  const [openQueryViewer, setOpenQueryViewer] = useState(false);\n\n  const viewQueriesHandler = useMemo(() => {\n    return isEditMode || !queries?.length\n      ? undefined\n      : {\n          onClick: (): void => {\n            setOpenQueryViewer(true);\n          },\n        };\n  }, [isEditMode, queries]);\n\n  const readHandlers = {\n    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),\n    onViewPanelClick: function (): void {\n      if (viewPanelGroupItemId === undefined) {\n        viewPanel(panelGroupItemId);\n      } else {\n        viewPanel(undefined);\n      }\n    },\n  };\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  const pluginQueryOptions =\n    typeof plugin?.queryOptions === 'function'\n      ? plugin?.queryOptions(panelDefinition.spec.plugin.spec)\n      : plugin?.queryOptions;\n\n  return (\n    <Box\n      ref={mergedRef}\n      tabIndex={-1}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      sx={{\n        width: '100%',\n        height: '100%',\n        outline: 'none',\n      }}\n    >\n      <DataQueriesProvider\n        definitions={definitions}\n        options={{ suggestedStepMs, ...pluginQueryOptions }}\n        queryOptions={{ enabled: shouldQuery }}\n      >\n        {shouldRender && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n      <QueryViewerDialog\n        open={openQueryViewer}\n        queryDefinitions={queryDefinitions}\n        onClose={() => setOpenQueryViewer(false)}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","useForkRef","useInView","DataQueriesProvider","usePlugin","useSuggestedStepMs","React","useMemo","useState","isPanelGroupItemIdEqual","useEditMode","usePanel","usePanelActions","useViewPanelGroup","usePanelFocusHandlers","Panel","QueryViewerDialog","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","onMouseEnter","onMouseLeave","panelGroupId","panelGroupItemLayoutId","ref","queryRef","inView","shouldQuery","threshold","initialInView","triggerOnce","renderRef","shouldRender","mergedRef","openQueryViewer","setOpenQueryViewer","viewQueriesHandler","length","undefined","onClick","readHandlers","isPanelViewed","onViewPanelClick","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","queryDefinitions","definitions","map","query","pluginQueryOptions","queryOptions","tabIndex","sx","height","outline","options","enabled","definition","panelOptions","open","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"sourcesContent":["// Copyright 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, useForkRef } from '@mui/material';\nimport { useInView } from 'react-intersection-observer';\nimport { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport React, { ReactElement, useMemo, useState } from 'react';\nimport { isPanelGroupItemIdEqual, PanelGroupItemId } from '../../model'; // TODO\nimport { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';\nimport { usePanelFocusHandlers } from '../../keyboard-shortcuts';\nimport { Panel, PanelProps, PanelOptions } from '../Panel';\nimport { QueryViewerDialog } from '../QueryViewerDialog';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps): ReactElement {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n\n  const {\n    spec: { queries },\n  } = panelDefinition;\n\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel, viewPanel } = usePanelActions(panelGroupItemId);\n  const viewPanelGroupItemId = useViewPanelGroup();\n\n  // Panel focus tracking for keyboard shortcuts\n  const { onMouseEnter, onMouseLeave } = usePanelFocusHandlers(\n    `${panelGroupItemId.panelGroupId}-${panelGroupItemId.panelGroupItemLayoutId}`\n  );\n\n  const { ref: queryRef, inView: shouldQuery } = useInView({\n    threshold: 0,\n    initialInView: false,\n    triggerOnce: true,\n  });\n\n  const { ref: renderRef, inView: shouldRender } = useInView({\n    threshold: 0.2,\n    initialInView: false,\n    triggerOnce: false,\n  });\n\n  const mergedRef = useForkRef(renderRef, queryRef);\n\n  const [openQueryViewer, setOpenQueryViewer] = useState(false);\n\n  const viewQueriesHandler = useMemo(() => {\n    return isEditMode || !queries?.length\n      ? undefined\n      : {\n          onClick: (): void => {\n            setOpenQueryViewer(true);\n          },\n        };\n  }, [isEditMode, queries]);\n\n  const readHandlers = {\n    isPanelViewed: isPanelGroupItemIdEqual(viewPanelGroupItemId, panelGroupItemId),\n    onViewPanelClick: function (): void {\n      if (viewPanelGroupItemId === undefined) {\n        viewPanel(panelGroupItemId);\n      } else {\n        viewPanel(undefined);\n      }\n    },\n  };\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n\n  const { data: plugin } = usePlugin('Panel', panelDefinition.spec.plugin.kind);\n\n  const pluginQueryOptions =\n    typeof plugin?.queryOptions === 'function'\n      ? plugin?.queryOptions(panelDefinition.spec.plugin.spec)\n      : plugin?.queryOptions;\n\n  return (\n    <Box\n      ref={mergedRef}\n      tabIndex={-1}\n      onMouseEnter={onMouseEnter}\n      onMouseLeave={onMouseLeave}\n      sx={{\n        width: '100%',\n        height: '100%',\n        outline: 'none',\n      }}\n    >\n      <DataQueriesProvider\n        definitions={queries ?? []}\n        options={{ suggestedStepMs, ...pluginQueryOptions }}\n        queryOptions={{ enabled: shouldQuery }}\n      >\n        {shouldRender && (\n          <Panel\n            definition={panelDefinition}\n            readHandlers={readHandlers}\n            editHandlers={editHandlers}\n            viewQueriesHandler={viewQueriesHandler}\n            panelOptions={props.panelOptions}\n            panelGroupItemId={panelGroupItemId}\n          />\n        )}\n      </DataQueriesProvider>\n      <QueryViewerDialog\n        open={openQueryViewer}\n        queryDefinitions={queries ?? []}\n        onClose={() => setOpenQueryViewer(false)}\n      />\n    </Box>\n  );\n}\n"],"names":["Box","useForkRef","useInView","DataQueriesProvider","usePlugin","useSuggestedStepMs","React","useMemo","useState","isPanelGroupItemIdEqual","useEditMode","usePanel","usePanelActions","useViewPanelGroup","usePanelFocusHandlers","Panel","QueryViewerDialog","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","viewPanel","viewPanelGroupItemId","onMouseEnter","onMouseLeave","panelGroupId","panelGroupItemLayoutId","ref","queryRef","inView","shouldQuery","threshold","initialInView","triggerOnce","renderRef","shouldRender","mergedRef","openQueryViewer","setOpenQueryViewer","viewQueriesHandler","length","undefined","onClick","readHandlers","isPanelViewed","onViewPanelClick","editHandlers","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","data","plugin","kind","pluginQueryOptions","queryOptions","tabIndex","sx","height","outline","definitions","options","enabled","definition","panelOptions","open","queryDefinitions","onClose"],"mappings":"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"}

package/dist/components/PanelDrawer/PanelQueriesSharedControls.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PanelQueriesSharedControls.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChH,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAA8C,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,+BAA+B;IAC9C,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAID,wBAAgB,0BAA0B,CAAC,EACzC,MAAM,EACN,OAAO,EACP,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,EAAE,+BAA+B,GAAG,YAAY,CA8EhD"}
+{"version":3,"file":"PanelQueriesSharedControls.d.ts","sourceRoot":"","sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"names":[],"mappings":"AAiBA,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,iBAAiB,EAAE,eAAe,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAChH,OAAO,EAAE,OAAO,EAAE,MAAM,iBAAiB,CAAC;AAC1C,OAAO,EAAE,YAAY,EAA8C,MAAM,OAAO,CAAC;AAEjF,MAAM,WAAW,+BAA+B;IAC9C,OAAO,EAAE,OAAO,CAAC,iBAAiB,CAAC,CAAC;IACpC,MAAM,EAAE,UAAU,CAAC,WAAW,CAAC,CAAC;IAChC,eAAe,EAAE,eAAe,CAAC;IACjC,eAAe,EAAE,CAAC,OAAO,EAAE,eAAe,EAAE,KAAK,IAAI,CAAC;IACtD,kBAAkB,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IAChD,YAAY,EAAE,CAAC,kBAAkB,EAAE,MAAM,KAAK,IAAI,CAAC;CACpD;AAID,wBAAgB,0BAA0B,CAAC,EACzC,MAAM,EACN,OAAO,EACP,eAAe,EACf,eAAe,EACf,kBAAkB,EAClB,YAAY,GACb,EAAE,+BAA+B,GAAG,YAAY,CA4DhD"}

package/dist/components/PanelDrawer/PanelQueriesSharedControls.js

@@ -17,7 +17,7 @@ import { PanelEditorContext, PanelPreview } from '@perses-dev/dashboards';
 import { DataQueriesProvider, PanelSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import { useCallback, useContext, useMemo, useState } from 'react';
 // Component of PanelEditor, it will share queries results to its children with DataQueriesProvider.
-// TODO: consider merging PanelEditorProvider, QueryCountProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.
+// TODO: consider merging PanelEditorProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.
 export function PanelQueriesSharedControls({ plugin, control, panelDefinition, onQueriesChange, onPluginSpecChange, onJSONChange }) {
     const { data: pluginPreview } = usePlugin('Panel', plugin.kind);
     const panelEditorContext = useContext(PanelEditorContext);
@@ -26,22 +26,12 @@ export function PanelQueriesSharedControls({ plugin, control, panelDefinition, o
         panelDefinition.spec.plugin.spec,
         pluginPreview
     ]);
-    const [previewDefinition, setPreviewDefinition] = useState(()=>panelDefinition.spec.queries?.map((query)=>{
-            return {
-                kind: query.spec.plugin.kind,
-                spec: query.spec.plugin.spec
-            };
-        }) ?? []);
+    const [previewDefinition, setPreviewDefinition] = useState(panelDefinition.spec.queries ?? []);
     const handleOnQueriesChange = useCallback((queries)=>{
         onQueriesChange(queries);
         // If the number of queries has changed, force preview definition update to remove results of deleted queries.
         if (queries.length !== previewDefinition.length) {
-            setPreviewDefinition(queries.map((query)=>{
-                return {
-                    kind: query.spec.plugin.kind,
-                    spec: query.spec.plugin.spec
-                };
-            }));
+            setPreviewDefinition(queries);
         }
     }, [
         onQueriesChange,
@@ -52,10 +42,7 @@ export function PanelQueriesSharedControls({ plugin, control, panelDefinition, o
             const newDefinitions = [
                 ...prev
             ];
-            newDefinitions[index] = {
-                kind: newDef.spec.plugin.kind,
-                spec: newDef.spec.plugin.spec
-            };
+            newDefinitions[index] = newDef;
             return newDefinitions;
         });
     }, []);

package/dist/components/PanelDrawer/PanelQueriesSharedControls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"sourcesContent":["// Copyright 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 { Grid, Typography } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorContext, PanelPreview } from '@perses-dev/dashboards';\nimport { DataQueriesProvider, PanelSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport { Control } from 'react-hook-form';\nimport { ReactElement, useCallback, useContext, useMemo, useState } from 'react';\n\nexport interface PanelQueriesSharedControlsProps {\n  control: Control<PanelEditorValues>;\n  plugin: Definition<UnknownSpec>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\n// Component of PanelEditor, it will share queries results to its children with DataQueriesProvider.\n// TODO: consider merging PanelEditorProvider, QueryCountProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.\nexport function PanelQueriesSharedControls({\n  plugin,\n  control,\n  panelDefinition,\n  onQueriesChange,\n  onPluginSpecChange,\n  onJSONChange,\n}: PanelQueriesSharedControlsProps): ReactElement {\n  const { data: pluginPreview } = usePlugin('Panel', plugin.kind);\n  const panelEditorContext = useContext(PanelEditorContext);\n\n  const suggestedStepMs = useSuggestedStepMs(panelEditorContext?.preview.previewPanelWidth);\n\n  const pluginQueryOptions = useMemo(\n    () =>\n      typeof pluginPreview?.queryOptions === 'function'\n        ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec)\n        : pluginPreview?.queryOptions,\n    [panelDefinition.spec.plugin.spec, pluginPreview]\n  );\n\n  const [previewDefinition, setPreviewDefinition] = useState(\n    () =>\n      panelDefinition.spec.queries?.map((query) => {\n        return {\n          kind: query.spec.plugin.kind,\n          spec: query.spec.plugin.spec,\n        };\n      }) ?? []\n  );\n\n  const handleOnQueriesChange = useCallback(\n    (queries: QueryDefinition[]) => {\n      onQueriesChange(queries);\n\n      // If the number of queries has changed, force preview definition update to remove results of deleted queries.\n      if (queries.length !== previewDefinition.length) {\n        setPreviewDefinition(\n          queries.map((query) => {\n            return {\n              kind: query.spec.plugin.kind,\n              spec: query.spec.plugin.spec,\n            };\n          })\n        );\n      }\n    },\n    [onQueriesChange, previewDefinition.length]\n  );\n\n  const handleRunQuery = useCallback((index: number, newDef: QueryDefinition) => {\n    setPreviewDefinition((prev) => {\n      const newDefinitions = [...prev];\n      newDefinitions[index] = {\n        kind: newDef.spec.plugin.kind,\n        spec: newDef.spec.plugin.spec,\n      };\n      return newDefinitions;\n    });\n  }, []);\n\n  return (\n    <DataQueriesProvider definitions={previewDefinition} options={{ suggestedStepMs, ...pluginQueryOptions }}>\n      <Grid item xs={12}>\n        <Typography variant=\"h4\" marginBottom={1}>\n          Preview\n        </Typography>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelPreview panelDefinition={panelDefinition} />\n        </ErrorBoundary>\n      </Grid>\n      <Grid item xs={12}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelSpecEditor\n            control={control}\n            panelDefinition={panelDefinition}\n            onJSONChange={onJSONChange}\n            onQueriesChange={handleOnQueriesChange}\n            onQueryRun={handleRunQuery}\n            onPluginSpecChange={onPluginSpecChange}\n          />\n        </ErrorBoundary>\n      </Grid>\n    </DataQueriesProvider>\n  );\n}\n"],"names":["Grid","Typography","ErrorAlert","ErrorBoundary","PanelEditorContext","PanelPreview","DataQueriesProvider","PanelSpecEditor","usePlugin","useSuggestedStepMs","useCallback","useContext","useMemo","useState","PanelQueriesSharedControls","plugin","control","panelDefinition","onQueriesChange","onPluginSpecChange","onJSONChange","data","pluginPreview","kind","panelEditorContext","suggestedStepMs","preview","previewPanelWidth","pluginQueryOptions","queryOptions","spec","previewDefinition","setPreviewDefinition","queries","map","query","handleOnQueriesChange","length","handleRunQuery","index","newDef","prev","newDefinitions","definitions","options","item","xs","variant","marginBottom","FallbackComponent","onQueryRun"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AACjD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,yBAAyB;AAC1E,SAASC,mBAAmB,EAAEC,eAAe,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAGhH,SAAuBC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAWjF,oGAAoG;AACpG,oJAAoJ;AACpJ,OAAO,SAASC,2BAA2B,EACzCC,MAAM,EACNC,OAAO,EACPC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,YAAY,EACoB;IAChC,MAAM,EAAEC,MAAMC,aAAa,EAAE,GAAGd,UAAU,SAASO,OAAOQ,IAAI;IAC9D,MAAMC,qBAAqBb,WAAWP;IAEtC,MAAMqB,kBAAkBhB,mBAAmBe,oBAAoBE,QAAQC;IAEvE,MAAMC,qBAAqBhB,QACzB,IACE,OAAOU,eAAeO,iBAAiB,aACnCP,eAAeO,aAAaZ,gBAAgBa,IAAI,CAACf,MAAM,CAACe,IAAI,IAC5DR,eAAeO,cACrB;QAACZ,gBAAgBa,IAAI,CAACf,MAAM,CAACe,IAAI;QAAER;KAAc;IAGnD,MAAM,CAACS,mBAAmBC,qBAAqB,GAAGnB,SAChD,IACEI,gBAAgBa,IAAI,CAACG,OAAO,EAAEC,IAAI,CAACC;YACjC,OAAO;gBACLZ,MAAMY,MAAML,IAAI,CAACf,MAAM,CAACQ,IAAI;gBAC5BO,MAAMK,MAAML,IAAI,CAACf,MAAM,CAACe,IAAI;YAC9B;QACF,MAAM,EAAE;IAGZ,MAAMM,wBAAwB1B,YAC5B,CAACuB;QACCf,gBAAgBe;QAEhB,8GAA8G;QAC9G,IAAIA,QAAQI,MAAM,KAAKN,kBAAkBM,MAAM,EAAE;YAC/CL,qBACEC,QAAQC,GAAG,CAAC,CAACC;gBACX,OAAO;oBACLZ,MAAMY,MAAML,IAAI,CAACf,MAAM,CAACQ,IAAI;oBAC5BO,MAAMK,MAAML,IAAI,CAACf,MAAM,CAACe,IAAI;gBAC9B;YACF;QAEJ;IACF,GACA;QAACZ;QAAiBa,kBAAkBM,MAAM;KAAC;IAG7C,MAAMC,iBAAiB5B,YAAY,CAAC6B,OAAeC;QACjDR,qBAAqB,CAACS;YACpB,MAAMC,iBAAiB;mBAAID;aAAK;YAChCC,cAAc,CAACH,MAAM,GAAG;gBACtBhB,MAAMiB,OAAOV,IAAI,CAACf,MAAM,CAACQ,IAAI;gBAC7BO,MAAMU,OAAOV,IAAI,CAACf,MAAM,CAACe,IAAI;YAC/B;YACA,OAAOY;QACT;IACF,GAAG,EAAE;IAEL,qBACE,MAACpC;QAAoBqC,aAAaZ;QAAmBa,SAAS;YAAEnB;YAAiB,GAAGG,kBAAkB;QAAC;;0BACrG,MAAC5B;gBAAK6C,IAAI;gBAACC,IAAI;;kCACb,KAAC7C;wBAAW8C,SAAQ;wBAAKC,cAAc;kCAAG;;kCAG1C,KAAC7C;wBAAc8C,mBAAmB/C;kCAChC,cAAA,KAACG;4BAAaY,iBAAiBA;;;;;0BAGnC,KAACjB;gBAAK6C,IAAI;gBAACC,IAAI;0BACb,cAAA,KAAC3C;oBAAc8C,mBAAmB/C;8BAChC,cAAA,KAACK;wBACCS,SAASA;wBACTC,iBAAiBA;wBACjBG,cAAcA;wBACdF,iBAAiBkB;wBACjBc,YAAYZ;wBACZnB,oBAAoBA;;;;;;AAMhC"}
+{"version":3,"sources":["../../../src/components/PanelDrawer/PanelQueriesSharedControls.tsx"],"sourcesContent":["// Copyright 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 { Grid, Typography } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { PanelEditorContext, PanelPreview } from '@perses-dev/dashboards';\nimport { DataQueriesProvider, PanelSpecEditor, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';\nimport { Definition, PanelDefinition, PanelEditorValues, QueryDefinition, UnknownSpec } from '@perses-dev/spec';\nimport { Control } from 'react-hook-form';\nimport { ReactElement, useCallback, useContext, useMemo, useState } from 'react';\n\nexport interface PanelQueriesSharedControlsProps {\n  control: Control<PanelEditorValues>;\n  plugin: Definition<UnknownSpec>;\n  panelDefinition: PanelDefinition;\n  onQueriesChange: (queries: QueryDefinition[]) => void;\n  onPluginSpecChange: (spec: UnknownSpec) => void;\n  onJSONChange: (panelDefinitionStr: string) => void;\n}\n\n// Component of PanelEditor, it will share queries results to its children with DataQueriesProvider.\n// TODO: consider merging PanelEditorProvider and DataQueriesProvider into a single provider to avoid multiple nested providers.\nexport function PanelQueriesSharedControls({\n  plugin,\n  control,\n  panelDefinition,\n  onQueriesChange,\n  onPluginSpecChange,\n  onJSONChange,\n}: PanelQueriesSharedControlsProps): ReactElement {\n  const { data: pluginPreview } = usePlugin('Panel', plugin.kind);\n  const panelEditorContext = useContext(PanelEditorContext);\n\n  const suggestedStepMs = useSuggestedStepMs(panelEditorContext?.preview.previewPanelWidth);\n\n  const pluginQueryOptions = useMemo(\n    () =>\n      typeof pluginPreview?.queryOptions === 'function'\n        ? pluginPreview?.queryOptions(panelDefinition.spec.plugin.spec)\n        : pluginPreview?.queryOptions,\n    [panelDefinition.spec.plugin.spec, pluginPreview]\n  );\n\n  const [previewDefinition, setPreviewDefinition] = useState<QueryDefinition[]>(panelDefinition.spec.queries ?? []);\n\n  const handleOnQueriesChange = useCallback(\n    (queries: QueryDefinition[]) => {\n      onQueriesChange(queries);\n\n      // If the number of queries has changed, force preview definition update to remove results of deleted queries.\n      if (queries.length !== previewDefinition.length) {\n        setPreviewDefinition(queries);\n      }\n    },\n    [onQueriesChange, previewDefinition.length]\n  );\n\n  const handleRunQuery = useCallback((index: number, newDef: QueryDefinition) => {\n    setPreviewDefinition((prev) => {\n      const newDefinitions = [...prev];\n      newDefinitions[index] = newDef;\n      return newDefinitions;\n    });\n  }, []);\n\n  return (\n    <DataQueriesProvider definitions={previewDefinition} options={{ suggestedStepMs, ...pluginQueryOptions }}>\n      <Grid item xs={12}>\n        <Typography variant=\"h4\" marginBottom={1}>\n          Preview\n        </Typography>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelPreview panelDefinition={panelDefinition} />\n        </ErrorBoundary>\n      </Grid>\n      <Grid item xs={12}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <PanelSpecEditor\n            control={control}\n            panelDefinition={panelDefinition}\n            onJSONChange={onJSONChange}\n            onQueriesChange={handleOnQueriesChange}\n            onQueryRun={handleRunQuery}\n            onPluginSpecChange={onPluginSpecChange}\n          />\n        </ErrorBoundary>\n      </Grid>\n    </DataQueriesProvider>\n  );\n}\n"],"names":["Grid","Typography","ErrorAlert","ErrorBoundary","PanelEditorContext","PanelPreview","DataQueriesProvider","PanelSpecEditor","usePlugin","useSuggestedStepMs","useCallback","useContext","useMemo","useState","PanelQueriesSharedControls","plugin","control","panelDefinition","onQueriesChange","onPluginSpecChange","onJSONChange","data","pluginPreview","kind","panelEditorContext","suggestedStepMs","preview","previewPanelWidth","pluginQueryOptions","queryOptions","spec","previewDefinition","setPreviewDefinition","queries","handleOnQueriesChange","length","handleRunQuery","index","newDef","prev","newDefinitions","definitions","options","item","xs","variant","marginBottom","FallbackComponent","onQueryRun"],"mappings":";AAAA,+BAA+B;AAC/B,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,IAAI,EAAEC,UAAU,QAAQ,gBAAgB;AACjD,SAASC,UAAU,EAAEC,aAAa,QAAQ,yBAAyB;AACnE,SAASC,kBAAkB,EAAEC,YAAY,QAAQ,yBAAyB;AAC1E,SAASC,mBAAmB,EAAEC,eAAe,EAAEC,SAAS,EAAEC,kBAAkB,QAAQ,4BAA4B;AAGhH,SAAuBC,WAAW,EAAEC,UAAU,EAAEC,OAAO,EAAEC,QAAQ,QAAQ,QAAQ;AAWjF,oGAAoG;AACpG,gIAAgI;AAChI,OAAO,SAASC,2BAA2B,EACzCC,MAAM,EACNC,OAAO,EACPC,eAAe,EACfC,eAAe,EACfC,kBAAkB,EAClBC,YAAY,EACoB;IAChC,MAAM,EAAEC,MAAMC,aAAa,EAAE,GAAGd,UAAU,SAASO,OAAOQ,IAAI;IAC9D,MAAMC,qBAAqBb,WAAWP;IAEtC,MAAMqB,kBAAkBhB,mBAAmBe,oBAAoBE,QAAQC;IAEvE,MAAMC,qBAAqBhB,QACzB,IACE,OAAOU,eAAeO,iBAAiB,aACnCP,eAAeO,aAAaZ,gBAAgBa,IAAI,CAACf,MAAM,CAACe,IAAI,IAC5DR,eAAeO,cACrB;QAACZ,gBAAgBa,IAAI,CAACf,MAAM,CAACe,IAAI;QAAER;KAAc;IAGnD,MAAM,CAACS,mBAAmBC,qBAAqB,GAAGnB,SAA4BI,gBAAgBa,IAAI,CAACG,OAAO,IAAI,EAAE;IAEhH,MAAMC,wBAAwBxB,YAC5B,CAACuB;QACCf,gBAAgBe;QAEhB,8GAA8G;QAC9G,IAAIA,QAAQE,MAAM,KAAKJ,kBAAkBI,MAAM,EAAE;YAC/CH,qBAAqBC;QACvB;IACF,GACA;QAACf;QAAiBa,kBAAkBI,MAAM;KAAC;IAG7C,MAAMC,iBAAiB1B,YAAY,CAAC2B,OAAeC;QACjDN,qBAAqB,CAACO;YACpB,MAAMC,iBAAiB;mBAAID;aAAK;YAChCC,cAAc,CAACH,MAAM,GAAGC;YACxB,OAAOE;QACT;IACF,GAAG,EAAE;IAEL,qBACE,MAAClC;QAAoBmC,aAAaV;QAAmBW,SAAS;YAAEjB;YAAiB,GAAGG,kBAAkB;QAAC;;0BACrG,MAAC5B;gBAAK2C,IAAI;gBAACC,IAAI;;kCACb,KAAC3C;wBAAW4C,SAAQ;wBAAKC,cAAc;kCAAG;;kCAG1C,KAAC3C;wBAAc4C,mBAAmB7C;kCAChC,cAAA,KAACG;4BAAaY,iBAAiBA;;;;;0BAGnC,KAACjB;gBAAK2C,IAAI;gBAACC,IAAI;0BACb,cAAA,KAACzC;oBAAc4C,mBAAmB7C;8BAChC,cAAA,KAACK;wBACCS,SAASA;wBACTC,iBAAiBA;wBACjBG,cAAcA;wBACdF,iBAAiBgB;wBACjBc,YAAYZ;wBACZjB,oBAAoBA;;;;;;AAMhC"}

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

@@ -1 +1 @@
-{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAU/C,eAAO,MAAM,6BAA6B,QAAO,YAyFhD,CAAC"}
+{"version":3,"file":"SaveChangesConfirmationDialog.d.ts","sourceRoot":"","sources":["../../../src/components/SaveChangesConfirmationDialog/SaveChangesConfirmationDialog.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAU/C,eAAO,MAAM,6BAA6B,QAAO,YA6GhD,CAAC"}