@perses-dev/dashboards 0.54.0-beta.0 → 0.54.0-beta.1

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

@@ -25,7 +25,7 @@ const _material = require("@mui/material");
 const _reactintersectionobserver = require("react-intersection-observer");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = /*#__PURE__*/ _interop_require_wildcard(require("react"));
-const _core = require("@perses-dev/core");
+const _model = require("../../model");
 const _context = require("../../context");
 const _keyboardshortcuts = require("../../keyboard-shortcuts");
 const _Panel = require("../Panel");
@@ -103,7 +103,7 @@ function GridItemContent(props) {
         queries
     ]);
     const readHandlers = {
-        isPanelViewed: (0, _core.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
+        isPanelViewed: (0, _model.isPanelGroupItemIdEqual)(viewPanelGroupItemId, panelGroupItemId),
         onViewPanelClick: function() {
             if (viewPanelGroupItemId === undefined) {
                 viewPanel(panelGroupItemId);

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

@@ -77,8 +77,8 @@ function PanelEditorForm(props) {
             setQueries(undefined, isHidden);
         }
     });
-    const titleAction = (0, _pluginsystem.getTitleAction)(initialAction, true);
-    const submitText = (0, _pluginsystem.getSubmitText)(initialAction, true);
+    const titleAction = (0, _components.getTitleAction)(initialAction, true);
+    const submitText = (0, _components.getSubmitText)(initialAction, true);
     const links = (0, _reacthookform.useWatch)({
         control: form.control,
         name: 'panelDefinition.spec.links'

package/dist/cjs/constants/defaults.js

@@ -0,0 +1,32 @@
+// Copyright 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: Object.getOwnPropertyDescriptor(all, name).get
+    });
+}
+_export(exports, {
+    get DEFAULT_DASHBOARD_DURATION () {
+        return DEFAULT_DASHBOARD_DURATION;
+    },
+    get DEFAULT_REFRESH_INTERVAL () {
+        return DEFAULT_REFRESH_INTERVAL;
+    }
+});
+const DEFAULT_DASHBOARD_DURATION = '1h';
+const DEFAULT_REFRESH_INTERVAL = '0s';

package/dist/cjs/constants/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./grid-layout-config"), exports);
 _export_star(require("./styles"), exports);
 _export_star(require("./user-interface-text"), exports);
+_export_star(require("./defaults"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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

@@ -38,8 +38,8 @@ const _middleware = require("zustand/middleware");
 const _immer = require("zustand/middleware/immer");
 const _shallow = require("zustand/shallow");
 const _react = require("react");
-const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
+const _constants = require("../../constants");
 const _panelgroupeditorslice = require("./panel-group-editor-slice");
 const _panelgroupslice = require("./panel-group-slice");
 const _paneleditorslice = require("./panel-editor-slice");
@@ -92,7 +92,7 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource, isEditMode, viewPanelRef, setViewPanelRef } } = props;
-    const { kind, metadata, spec: { display, duration, refreshInterval = _core.DEFAULT_REFRESH_INTERVAL, datasources, layouts = [], panels = {} } } = dashboardResource;
+    const { kind, metadata, spec: { display, 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)=>{
@@ -133,7 +133,7 @@ function initStore(props) {
                     state.panelGroups = panelGroups;
                     state.panelGroupOrder = panelGroupOrder;
                     state.duration = duration;
-                    state.refreshInterval = refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
+                    state.refreshInterval = refreshInterval ?? _constants.DEFAULT_REFRESH_INTERVAL;
                     state.datasources = datasources;
                     state.links = links;
                 // TODO: add ttl here to e.g allow edition from JSON view, but probably requires quite some refactoring

package/dist/cjs/index.js

@@ -19,6 +19,7 @@ _export_star(require("./context"), exports);
 _export_star(require("./keyboard-shortcuts"), exports);
 _export_star(require("./views"), exports);
 _export_star(require("./model"), exports);
+_export_star(require("./constants"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/keyboard-shortcuts/index.js

@@ -30,6 +30,9 @@ _export(exports, {
     get buildShortcutOptions () {
         return _utils.buildShortcutOptions;
     },
+    get createModEnterHandler () {
+        return _utils.createModEnterHandler;
+    },
     get dispatchShortcutEvent () {
         return _utils.dispatchShortcutEvent;
     },

package/dist/cjs/keyboard-shortcuts/utils.js

@@ -24,6 +24,9 @@ _export(exports, {
     get buildShortcutOptions () {
         return buildShortcutOptions;
     },
+    get createModEnterHandler () {
+        return createModEnterHandler;
+    },
     get dispatchShortcutEvent () {
         return dispatchShortcutEvent;
     },
@@ -74,3 +77,11 @@ function requireShortcutEvent(def) {
 function dispatchShortcutEvent(eventName) {
     window.dispatchEvent(new CustomEvent(eventName));
 }
+function createModEnterHandler(execute) {
+    return (event)=>{
+        if (event.key === 'Enter' && (event.ctrlKey || event.metaKey) && !event.shiftKey && !event.altKey) {
+            event.preventDefault();
+            execute();
+        }
+    };
+}

package/dist/cjs/model/PanelGroupDefinition.js

@@ -0,0 +1,25 @@
+// Copyright 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
+});
+Object.defineProperty(exports, "isPanelGroupItemIdEqual", {
+    enumerable: true,
+    get: function() {
+        return isPanelGroupItemIdEqual;
+    }
+});
+function isPanelGroupItemIdEqual(a, b) {
+    return a?.panelGroupId === b?.panelGroupId && a?.panelGroupItemLayoutId === b?.panelGroupItemLayoutId;
+}

package/dist/cjs/model/VariableDefinition.js

@@ -0,0 +1,16 @@
+// Copyright 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
+});

package/dist/cjs/model/index.js

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

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

@@ -22,18 +22,18 @@ Object.defineProperty(exports, "ViewDashboard", {
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _core = require("@perses-dev/core");
 const _components = require("@perses-dev/components");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _react = require("react");
+const _constants = require("../../constants");
 const _context = require("../../context");
 const _DashboardProviderWithQueryParams = require("../../context/DashboardProvider/DashboardProviderWithQueryParams");
 const _DashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
     const { dashboardResource, datasourceApi, externalVariableDefinitions, emptyDashboardProps, isReadonly, isVariableEnabled, isDatasourceEnabled, disableShortcuts, isEditing, isCreating, isInitialVariableSticky, isLeavingConfirmDialogEnabled, dashboardTitleComponent, onSave, onDiscard, sx, ...others } = props;
     const { spec } = dashboardResource;
-    const dashboardDuration = spec.duration ?? _core.DEFAULT_DASHBOARD_DURATION;
-    const dashboardRefreshInterval = spec.refreshInterval ?? _core.DEFAULT_REFRESH_INTERVAL;
+    const dashboardDuration = spec.duration ?? _constants.DEFAULT_DASHBOARD_DURATION;
+    const dashboardRefreshInterval = spec.refreshInterval ?? _constants.DEFAULT_REFRESH_INTERVAL;
     const initialTimeRange = (0, _pluginsystem.useInitialTimeRange)(dashboardDuration);
     const initialRefreshInterval = (0, _pluginsystem.useInitialRefreshInterval)(dashboardRefreshInterval);
     const { data } = (0, _pluginsystem.usePluginBuiltinVariableDefinitions)();

package/dist/components/DashboardShortcuts/useDashboardShortcuts.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardShortcuts/useDashboardShortcuts.ts"],"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 { useCallback } from 'react';\nimport { AbsoluteTimeRange, TimeRangeValue, isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';\nimport { PanelGroupItemId } from '@perses-dev/core';\nimport { useSnackbar } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useHotkeys, useHotkeySequences } from '@tanstack/react-hotkeys';\nimport {\n  useFocusedPanel,\n  buildShortcutOptions,\n  requireShortcutHotkey,\n  requireShortcutSequence,\n  SAVE_DASHBOARD_SHORTCUT,\n  REFRESH_DASHBOARD_SHORTCUT,\n  TOGGLE_EDIT_MODE_SHORTCUT,\n  TIME_ZOOM_OUT_SHORTCUT,\n  TIME_ZOOM_IN_SHORTCUT,\n  TIME_SHIFT_BACK_SHORTCUT,\n  TIME_SHIFT_FORWARD_SHORTCUT,\n  TIME_MAKE_ABSOLUTE_SHORTCUT,\n  TIME_COPY_SHORTCUT,\n  TIME_PASTE_SHORTCUT,\n  PANEL_EDIT_SHORTCUT,\n  PANEL_FULLSCREEN_SHORTCUT,\n  PANEL_DUPLICATE_SHORTCUT,\n  PANEL_DELETE_SHORTCUT,\n} from '../../keyboard-shortcuts';\nimport {\n  OnSaveDashboard,\n  useEditMode,\n  useDashboardStore,\n  DashboardStoreState,\n  useViewPanelGroup,\n  useSaveDashboard,\n} from '../../context/DashboardProvider';\n\nconst SAVE_SHORTCUT_EDIT_MODE_MESSAGE = 'Enter edit mode to save this dashboard.';\nconst SAVE_SHORTCUT_READONLY_MESSAGE = 'This dashboard is read-only. Keyboard save is disabled.';\nconst SAVE_SHORTCUT_UNAVAILABLE_MESSAGE = 'Save action is unavailable for this dashboard.';\n\nfunction parsePanelKey(panelKey: string): PanelGroupItemId | null {\n  const dashIndex = panelKey.indexOf('-');\n  if (dashIndex === -1) return null;\n\n  const panelGroupId = parseInt(panelKey.substring(0, dashIndex), 10);\n  const panelGroupItemLayoutId = panelKey.substring(dashIndex + 1);\n\n  if (isNaN(panelGroupId)) return null;\n\n  return { panelGroupId, panelGroupItemLayoutId };\n}\n\n// Zoom limits: 1 second minimum, 10 years maximum\nconst MIN_ZOOM_DURATION_MS = 1_000;\nconst MAX_ZOOM_DURATION_MS = 10 * 365.25 * 24 * 60 * 60 * 1_000;\n\nfunction resolveAbsoluteRange(timeRange: TimeRangeValue): {\n  absoluteRange: AbsoluteTimeRange;\n  durationMs: number;\n  midpointMs: number;\n} {\n  const absoluteRange = isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;\n  const startMs = absoluteRange.start.getTime();\n  const endMs = absoluteRange.end.getTime();\n  const durationMs = endMs - startMs;\n  const midpointMs = Math.round(startMs + durationMs / 2);\n  return { absoluteRange, durationMs, midpointMs };\n}\n\nconst selectPanelStoreActions = (\n  state: DashboardStoreState\n): {\n  openEditPanel: DashboardStoreState['openEditPanel'];\n  duplicatePanel: DashboardStoreState['duplicatePanel'];\n  openDeletePanelDialog: DashboardStoreState['openDeletePanelDialog'];\n  setViewPanel: DashboardStoreState['setViewPanel'];\n  panelEditor: DashboardStoreState['panelEditor'];\n} => ({\n  openEditPanel: state.openEditPanel,\n  duplicatePanel: state.duplicatePanel,\n  openDeletePanelDialog: state.openDeletePanelDialog,\n  setViewPanel: state.setViewPanel,\n  panelEditor: state.panelEditor,\n});\n\nexport interface UseDashboardShortcutsOptions {\n  onSave?: OnSaveDashboard;\n  onRefresh?: () => void;\n  isReadonly: boolean;\n  onEditButtonClick?: () => void;\n  onCancelButtonClick?: () => void;\n  disabled?: boolean;\n}\n\n/** Registers dashboard, time-range, and panel keyboard shortcuts. Requires DashboardProvider context. */\nexport function useDashboardShortcuts({\n  onSave,\n  onRefresh,\n  isReadonly,\n  onEditButtonClick,\n  onCancelButtonClick,\n  disabled = false,\n}: UseDashboardShortcutsOptions): void {\n  const focusedPanelKey = useFocusedPanel();\n  const { isEditMode, setEditMode } = useEditMode();\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  const { infoSnackbar, warningSnackbar } = useSnackbar();\n  const viewPanel = useViewPanelGroup();\n  const { openEditPanel, duplicatePanel, openDeletePanelDialog, setViewPanel, panelEditor } =\n    useDashboardStore(selectPanelStoreActions);\n  const { saveDashboard } = useSaveDashboard(onSave);\n\n  const panelFocused = focusedPanelKey !== null;\n\n  // --- Handlers ---\n\n  const handleSave = useCallback(() => {\n    if (isReadonly) {\n      warningSnackbar(SAVE_SHORTCUT_READONLY_MESSAGE);\n      return;\n    }\n\n    if (!isEditMode) {\n      infoSnackbar(SAVE_SHORTCUT_EDIT_MODE_MESSAGE);\n      return;\n    }\n\n    if (!onSave) {\n      warningSnackbar(SAVE_SHORTCUT_UNAVAILABLE_MESSAGE);\n      return;\n    }\n\n    saveDashboard();\n  }, [infoSnackbar, isEditMode, isReadonly, onSave, saveDashboard, warningSnackbar]);\n\n  const handleRefresh = useCallback(() => {\n    refresh();\n    infoSnackbar('Dashboard refreshed.');\n    if (onRefresh) {\n      onRefresh();\n    }\n  }, [refresh, infoSnackbar, onRefresh]);\n\n  const handleToggleEditMode = useCallback(() => {\n    if (isEditMode) {\n      // Switching from edit to view: delegate to cancel flow (shows discard dialog if needed)\n      if (onCancelButtonClick) {\n        onCancelButtonClick();\n      } else {\n        setEditMode(false);\n      }\n    } else {\n      // Switching from view to edit: delegate to edit flow (saves original state)\n      if (onEditButtonClick) {\n        onEditButtonClick();\n      } else {\n        setEditMode(true);\n      }\n    }\n  }, [isEditMode, setEditMode, onCancelButtonClick, onEditButtonClick]);\n\n  // Time range handlers\n\n  const handleTimeZoomOut = useCallback(() => {\n    const { durationMs, midpointMs } = resolveAbsoluteRange(timeRange);\n    const newDuration = Math.min(durationMs * 2, MAX_ZOOM_DURATION_MS);\n    const halfNew = Math.round(newDuration / 2);\n    setTimeRange({\n      start: new Date(midpointMs - halfNew),\n      end: new Date(midpointMs + halfNew),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeZoomIn = useCallback(() => {\n    const { durationMs, midpointMs } = resolveAbsoluteRange(timeRange);\n    const newDuration = Math.max(Math.round(durationMs / 2), MIN_ZOOM_DURATION_MS);\n    const halfNew = Math.round(newDuration / 2);\n    setTimeRange({\n      start: new Date(midpointMs - halfNew),\n      end: new Date(midpointMs + halfNew),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeShiftBack = useCallback(() => {\n    const { absoluteRange, durationMs } = resolveAbsoluteRange(timeRange);\n    const shift = Math.round(durationMs / 2);\n    setTimeRange({\n      start: new Date(absoluteRange.start.getTime() - shift),\n      end: new Date(absoluteRange.end.getTime() - shift),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeShiftForward = useCallback(() => {\n    const { absoluteRange, durationMs } = resolveAbsoluteRange(timeRange);\n    const shift = Math.round(durationMs / 2);\n    setTimeRange({\n      start: new Date(absoluteRange.start.getTime() + shift),\n      end: new Date(absoluteRange.end.getTime() + shift),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeMakeAbsolute = useCallback(() => {\n    if (isRelativeTimeRange(timeRange)) {\n      setTimeRange(toAbsoluteTimeRange(timeRange));\n    }\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeCopy = useCallback(() => {\n    const absoluteRange = isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;\n    const text = `${absoluteRange.start.toISOString()} - ${absoluteRange.end.toISOString()}`;\n    navigator.clipboard\n      .writeText(text)\n      .then(() => {\n        infoSnackbar('Time range copied to clipboard.');\n      })\n      .catch(() => {\n        warningSnackbar('Failed to copy time range to clipboard.');\n      });\n  }, [timeRange, infoSnackbar, warningSnackbar]);\n\n  const handleTimePaste = useCallback(() => {\n    const FORMAT_HINT = 'Expected format: \"<ISO date format> - <ISO date format>\".';\n    navigator.clipboard\n      .readText()\n      .then((text) => {\n        const parts = text.split(' - ');\n        if (parts.length !== 2) {\n          warningSnackbar(`Clipboard does not contain a valid time range. ${FORMAT_HINT}`);\n          return;\n        }\n        const [startStr, endStr] = parts as [string, string];\n        const start = new Date(startStr.trim());\n        const end = new Date(endStr.trim());\n        if (isNaN(start.getTime()) || isNaN(end.getTime())) {\n          warningSnackbar(`Clipboard does not contain a valid time range. ${FORMAT_HINT}`);\n          return;\n        }\n        if (start >= end) {\n          warningSnackbar('Invalid time range: start must be before end.');\n          return;\n        }\n        const newRange: AbsoluteTimeRange = { start, end };\n        setTimeRange(newRange);\n        infoSnackbar('Time range pasted from clipboard.');\n      })\n      .catch(() => {\n        warningSnackbar('Unable to read from clipboard. Check browser permissions.');\n      });\n  }, [setTimeRange, infoSnackbar, warningSnackbar]);\n\n  // Panel handlers\n  const handlePanelEditToggle = useCallback(() => {\n    if (panelEditor !== undefined) {\n      panelEditor.close();\n      return;\n    }\n\n    if (focusedPanelKey && isEditMode) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        openEditPanel(panelId);\n      }\n    }\n  }, [focusedPanelKey, isEditMode, openEditPanel, panelEditor]);\n\n  const handlePanelFullscreenToggle = useCallback(() => {\n    if (viewPanel !== undefined) {\n      setViewPanel(undefined);\n      return;\n    }\n\n    if (focusedPanelKey) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        setViewPanel(panelId);\n      }\n    }\n  }, [focusedPanelKey, setViewPanel, viewPanel]);\n\n  const handlePanelDuplicate = useCallback(() => {\n    if (focusedPanelKey && isEditMode) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        duplicatePanel(panelId);\n      }\n    }\n  }, [focusedPanelKey, isEditMode, duplicatePanel]);\n\n  const handlePanelDelete = useCallback(() => {\n    if (focusedPanelKey && isEditMode) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        openDeletePanelDialog(panelId);\n      }\n    }\n  }, [focusedPanelKey, isEditMode, openDeletePanelDialog]);\n\n  // Register shortcuts\n\n  useHotkeys(\n    [\n      { def: SAVE_DASHBOARD_SHORTCUT, enabled: !disabled, callback: handleSave },\n      {\n        def: PANEL_EDIT_SHORTCUT,\n        enabled: !disabled && (panelFocused || panelEditor !== undefined),\n        callback: handlePanelEditToggle,\n      },\n      {\n        def: PANEL_FULLSCREEN_SHORTCUT,\n        enabled: !disabled && (panelFocused || viewPanel !== undefined),\n        callback: handlePanelFullscreenToggle,\n      },\n    ].map(({ def, enabled, callback }) => ({\n      hotkey: requireShortcutHotkey(def),\n      callback,\n      options: buildShortcutOptions(def, enabled),\n    }))\n  );\n\n  useHotkeySequences(\n    [\n      { def: REFRESH_DASHBOARD_SHORTCUT, enabled: !disabled, callback: handleRefresh },\n      { def: TOGGLE_EDIT_MODE_SHORTCUT, enabled: !disabled, callback: handleToggleEditMode },\n      { def: TIME_ZOOM_OUT_SHORTCUT, enabled: !disabled, callback: handleTimeZoomOut },\n      { def: TIME_ZOOM_IN_SHORTCUT, enabled: !disabled, callback: handleTimeZoomIn },\n      { def: TIME_SHIFT_BACK_SHORTCUT, enabled: !disabled, callback: handleTimeShiftBack },\n      { def: TIME_SHIFT_FORWARD_SHORTCUT, enabled: !disabled, callback: handleTimeShiftForward },\n      { def: TIME_MAKE_ABSOLUTE_SHORTCUT, enabled: !disabled, callback: handleTimeMakeAbsolute },\n      { def: TIME_COPY_SHORTCUT, enabled: !disabled, callback: handleTimeCopy },\n      { def: TIME_PASTE_SHORTCUT, enabled: !disabled, callback: handleTimePaste },\n      { def: PANEL_DUPLICATE_SHORTCUT, enabled: !disabled && panelFocused, callback: handlePanelDuplicate },\n      { def: PANEL_DELETE_SHORTCUT, enabled: !disabled && panelFocused, callback: handlePanelDelete },\n    ].map(({ def, enabled, callback }) => ({\n      sequence: requireShortcutSequence(def),\n      callback,\n      options: buildShortcutOptions(def, enabled),\n    }))\n  );\n}\n"],"names":["useCallback","isRelativeTimeRange","toAbsoluteTimeRange","useSnackbar","useTimeRange","useHotkeys","useHotkeySequences","useFocusedPanel","buildShortcutOptions","requireShortcutHotkey","requireShortcutSequence","SAVE_DASHBOARD_SHORTCUT","REFRESH_DASHBOARD_SHORTCUT","TOGGLE_EDIT_MODE_SHORTCUT","TIME_ZOOM_OUT_SHORTCUT","TIME_ZOOM_IN_SHORTCUT","TIME_SHIFT_BACK_SHORTCUT","TIME_SHIFT_FORWARD_SHORTCUT","TIME_MAKE_ABSOLUTE_SHORTCUT","TIME_COPY_SHORTCUT","TIME_PASTE_SHORTCUT","PANEL_EDIT_SHORTCUT","PANEL_FULLSCREEN_SHORTCUT","PANEL_DUPLICATE_SHORTCUT","PANEL_DELETE_SHORTCUT","useEditMode","useDashboardStore","useViewPanelGroup","useSaveDashboard","SAVE_SHORTCUT_EDIT_MODE_MESSAGE","SAVE_SHORTCUT_READONLY_MESSAGE","SAVE_SHORTCUT_UNAVAILABLE_MESSAGE","parsePanelKey","panelKey","dashIndex","indexOf","panelGroupId","parseInt","substring","panelGroupItemLayoutId","isNaN","MIN_ZOOM_DURATION_MS","MAX_ZOOM_DURATION_MS","resolveAbsoluteRange","timeRange","absoluteRange","startMs","start","getTime","endMs","end","durationMs","midpointMs","Math","round","selectPanelStoreActions","state","openEditPanel","duplicatePanel","openDeletePanelDialog","setViewPanel","panelEditor","useDashboardShortcuts","onSave","onRefresh","isReadonly","onEditButtonClick","onCancelButtonClick","disabled","focusedPanelKey","isEditMode","setEditMode","setTimeRange","refresh","infoSnackbar","warningSnackbar","viewPanel","saveDashboard","panelFocused","handleSave","handleRefresh","handleToggleEditMode","handleTimeZoomOut","newDuration","min","halfNew","Date","handleTimeZoomIn","max","handleTimeShiftBack","shift","handleTimeShiftForward","handleTimeMakeAbsolute","handleTimeCopy","text","toISOString","navigator","clipboard","writeText","then","catch","handleTimePaste","FORMAT_HINT","readText","parts","split","length","startStr","endStr","trim","newRange","handlePanelEditToggle","undefined","close","panelId","handlePanelFullscreenToggle","handlePanelDuplicate","handlePanelDelete","def","enabled","callback","map","hotkey","options","sequence"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardShortcuts/useDashboardShortcuts.ts"],"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 { useCallback } from 'react';\nimport { AbsoluteTimeRange, TimeRangeValue, isRelativeTimeRange, toAbsoluteTimeRange } from '@perses-dev/spec';\nimport { useSnackbar } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useHotkeys, useHotkeySequences } from '@tanstack/react-hotkeys';\nimport { PanelGroupItemId } from '../../model';\nimport {\n  useFocusedPanel,\n  buildShortcutOptions,\n  requireShortcutHotkey,\n  requireShortcutSequence,\n  SAVE_DASHBOARD_SHORTCUT,\n  REFRESH_DASHBOARD_SHORTCUT,\n  TOGGLE_EDIT_MODE_SHORTCUT,\n  TIME_ZOOM_OUT_SHORTCUT,\n  TIME_ZOOM_IN_SHORTCUT,\n  TIME_SHIFT_BACK_SHORTCUT,\n  TIME_SHIFT_FORWARD_SHORTCUT,\n  TIME_MAKE_ABSOLUTE_SHORTCUT,\n  TIME_COPY_SHORTCUT,\n  TIME_PASTE_SHORTCUT,\n  PANEL_EDIT_SHORTCUT,\n  PANEL_FULLSCREEN_SHORTCUT,\n  PANEL_DUPLICATE_SHORTCUT,\n  PANEL_DELETE_SHORTCUT,\n} from '../../keyboard-shortcuts';\nimport {\n  OnSaveDashboard,\n  useEditMode,\n  useDashboardStore,\n  DashboardStoreState,\n  useViewPanelGroup,\n  useSaveDashboard,\n} from '../../context/DashboardProvider';\n\nconst SAVE_SHORTCUT_EDIT_MODE_MESSAGE = 'Enter edit mode to save this dashboard.';\nconst SAVE_SHORTCUT_READONLY_MESSAGE = 'This dashboard is read-only. Keyboard save is disabled.';\nconst SAVE_SHORTCUT_UNAVAILABLE_MESSAGE = 'Save action is unavailable for this dashboard.';\n\nfunction parsePanelKey(panelKey: string): PanelGroupItemId | null {\n  const dashIndex = panelKey.indexOf('-');\n  if (dashIndex === -1) return null;\n\n  const panelGroupId = parseInt(panelKey.substring(0, dashIndex), 10);\n  const panelGroupItemLayoutId = panelKey.substring(dashIndex + 1);\n\n  if (isNaN(panelGroupId)) return null;\n\n  return { panelGroupId, panelGroupItemLayoutId };\n}\n\n// Zoom limits: 1 second minimum, 10 years maximum\nconst MIN_ZOOM_DURATION_MS = 1_000;\nconst MAX_ZOOM_DURATION_MS = 10 * 365.25 * 24 * 60 * 60 * 1_000;\n\nfunction resolveAbsoluteRange(timeRange: TimeRangeValue): {\n  absoluteRange: AbsoluteTimeRange;\n  durationMs: number;\n  midpointMs: number;\n} {\n  const absoluteRange = isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;\n  const startMs = absoluteRange.start.getTime();\n  const endMs = absoluteRange.end.getTime();\n  const durationMs = endMs - startMs;\n  const midpointMs = Math.round(startMs + durationMs / 2);\n  return { absoluteRange, durationMs, midpointMs };\n}\n\nconst selectPanelStoreActions = (\n  state: DashboardStoreState\n): {\n  openEditPanel: DashboardStoreState['openEditPanel'];\n  duplicatePanel: DashboardStoreState['duplicatePanel'];\n  openDeletePanelDialog: DashboardStoreState['openDeletePanelDialog'];\n  setViewPanel: DashboardStoreState['setViewPanel'];\n  panelEditor: DashboardStoreState['panelEditor'];\n} => ({\n  openEditPanel: state.openEditPanel,\n  duplicatePanel: state.duplicatePanel,\n  openDeletePanelDialog: state.openDeletePanelDialog,\n  setViewPanel: state.setViewPanel,\n  panelEditor: state.panelEditor,\n});\n\nexport interface UseDashboardShortcutsOptions {\n  onSave?: OnSaveDashboard;\n  onRefresh?: () => void;\n  isReadonly: boolean;\n  onEditButtonClick?: () => void;\n  onCancelButtonClick?: () => void;\n  disabled?: boolean;\n}\n\n/** Registers dashboard, time-range, and panel keyboard shortcuts. Requires DashboardProvider context. */\nexport function useDashboardShortcuts({\n  onSave,\n  onRefresh,\n  isReadonly,\n  onEditButtonClick,\n  onCancelButtonClick,\n  disabled = false,\n}: UseDashboardShortcutsOptions): void {\n  const focusedPanelKey = useFocusedPanel();\n  const { isEditMode, setEditMode } = useEditMode();\n  const { timeRange, setTimeRange, refresh } = useTimeRange();\n  const { infoSnackbar, warningSnackbar } = useSnackbar();\n  const viewPanel = useViewPanelGroup();\n  const { openEditPanel, duplicatePanel, openDeletePanelDialog, setViewPanel, panelEditor } =\n    useDashboardStore(selectPanelStoreActions);\n  const { saveDashboard } = useSaveDashboard(onSave);\n\n  const panelFocused = focusedPanelKey !== null;\n\n  // --- Handlers ---\n\n  const handleSave = useCallback(() => {\n    if (isReadonly) {\n      warningSnackbar(SAVE_SHORTCUT_READONLY_MESSAGE);\n      return;\n    }\n\n    if (!isEditMode) {\n      infoSnackbar(SAVE_SHORTCUT_EDIT_MODE_MESSAGE);\n      return;\n    }\n\n    if (!onSave) {\n      warningSnackbar(SAVE_SHORTCUT_UNAVAILABLE_MESSAGE);\n      return;\n    }\n\n    saveDashboard();\n  }, [infoSnackbar, isEditMode, isReadonly, onSave, saveDashboard, warningSnackbar]);\n\n  const handleRefresh = useCallback(() => {\n    refresh();\n    infoSnackbar('Dashboard refreshed.');\n    if (onRefresh) {\n      onRefresh();\n    }\n  }, [refresh, infoSnackbar, onRefresh]);\n\n  const handleToggleEditMode = useCallback(() => {\n    if (isEditMode) {\n      // Switching from edit to view: delegate to cancel flow (shows discard dialog if needed)\n      if (onCancelButtonClick) {\n        onCancelButtonClick();\n      } else {\n        setEditMode(false);\n      }\n    } else {\n      // Switching from view to edit: delegate to edit flow (saves original state)\n      if (onEditButtonClick) {\n        onEditButtonClick();\n      } else {\n        setEditMode(true);\n      }\n    }\n  }, [isEditMode, setEditMode, onCancelButtonClick, onEditButtonClick]);\n\n  // Time range handlers\n\n  const handleTimeZoomOut = useCallback(() => {\n    const { durationMs, midpointMs } = resolveAbsoluteRange(timeRange);\n    const newDuration = Math.min(durationMs * 2, MAX_ZOOM_DURATION_MS);\n    const halfNew = Math.round(newDuration / 2);\n    setTimeRange({\n      start: new Date(midpointMs - halfNew),\n      end: new Date(midpointMs + halfNew),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeZoomIn = useCallback(() => {\n    const { durationMs, midpointMs } = resolveAbsoluteRange(timeRange);\n    const newDuration = Math.max(Math.round(durationMs / 2), MIN_ZOOM_DURATION_MS);\n    const halfNew = Math.round(newDuration / 2);\n    setTimeRange({\n      start: new Date(midpointMs - halfNew),\n      end: new Date(midpointMs + halfNew),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeShiftBack = useCallback(() => {\n    const { absoluteRange, durationMs } = resolveAbsoluteRange(timeRange);\n    const shift = Math.round(durationMs / 2);\n    setTimeRange({\n      start: new Date(absoluteRange.start.getTime() - shift),\n      end: new Date(absoluteRange.end.getTime() - shift),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeShiftForward = useCallback(() => {\n    const { absoluteRange, durationMs } = resolveAbsoluteRange(timeRange);\n    const shift = Math.round(durationMs / 2);\n    setTimeRange({\n      start: new Date(absoluteRange.start.getTime() + shift),\n      end: new Date(absoluteRange.end.getTime() + shift),\n    });\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeMakeAbsolute = useCallback(() => {\n    if (isRelativeTimeRange(timeRange)) {\n      setTimeRange(toAbsoluteTimeRange(timeRange));\n    }\n  }, [timeRange, setTimeRange]);\n\n  const handleTimeCopy = useCallback(() => {\n    const absoluteRange = isRelativeTimeRange(timeRange) ? toAbsoluteTimeRange(timeRange) : timeRange;\n    const text = `${absoluteRange.start.toISOString()} - ${absoluteRange.end.toISOString()}`;\n    navigator.clipboard\n      .writeText(text)\n      .then(() => {\n        infoSnackbar('Time range copied to clipboard.');\n      })\n      .catch(() => {\n        warningSnackbar('Failed to copy time range to clipboard.');\n      });\n  }, [timeRange, infoSnackbar, warningSnackbar]);\n\n  const handleTimePaste = useCallback(() => {\n    const FORMAT_HINT = 'Expected format: \"<ISO date format> - <ISO date format>\".';\n    navigator.clipboard\n      .readText()\n      .then((text) => {\n        const parts = text.split(' - ');\n        if (parts.length !== 2) {\n          warningSnackbar(`Clipboard does not contain a valid time range. ${FORMAT_HINT}`);\n          return;\n        }\n        const [startStr, endStr] = parts as [string, string];\n        const start = new Date(startStr.trim());\n        const end = new Date(endStr.trim());\n        if (isNaN(start.getTime()) || isNaN(end.getTime())) {\n          warningSnackbar(`Clipboard does not contain a valid time range. ${FORMAT_HINT}`);\n          return;\n        }\n        if (start >= end) {\n          warningSnackbar('Invalid time range: start must be before end.');\n          return;\n        }\n        const newRange: AbsoluteTimeRange = { start, end };\n        setTimeRange(newRange);\n        infoSnackbar('Time range pasted from clipboard.');\n      })\n      .catch(() => {\n        warningSnackbar('Unable to read from clipboard. Check browser permissions.');\n      });\n  }, [setTimeRange, infoSnackbar, warningSnackbar]);\n\n  // Panel handlers\n  const handlePanelEditToggle = useCallback(() => {\n    if (panelEditor !== undefined) {\n      panelEditor.close();\n      return;\n    }\n\n    if (focusedPanelKey && isEditMode) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        openEditPanel(panelId);\n      }\n    }\n  }, [focusedPanelKey, isEditMode, openEditPanel, panelEditor]);\n\n  const handlePanelFullscreenToggle = useCallback(() => {\n    if (viewPanel !== undefined) {\n      setViewPanel(undefined);\n      return;\n    }\n\n    if (focusedPanelKey) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        setViewPanel(panelId);\n      }\n    }\n  }, [focusedPanelKey, setViewPanel, viewPanel]);\n\n  const handlePanelDuplicate = useCallback(() => {\n    if (focusedPanelKey && isEditMode) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        duplicatePanel(panelId);\n      }\n    }\n  }, [focusedPanelKey, isEditMode, duplicatePanel]);\n\n  const handlePanelDelete = useCallback(() => {\n    if (focusedPanelKey && isEditMode) {\n      const panelId = parsePanelKey(focusedPanelKey);\n      if (panelId) {\n        openDeletePanelDialog(panelId);\n      }\n    }\n  }, [focusedPanelKey, isEditMode, openDeletePanelDialog]);\n\n  // Register shortcuts\n\n  useHotkeys(\n    [\n      { def: SAVE_DASHBOARD_SHORTCUT, enabled: !disabled, callback: handleSave },\n      {\n        def: PANEL_EDIT_SHORTCUT,\n        enabled: !disabled && (panelFocused || panelEditor !== undefined),\n        callback: handlePanelEditToggle,\n      },\n      {\n        def: PANEL_FULLSCREEN_SHORTCUT,\n        enabled: !disabled && (panelFocused || viewPanel !== undefined),\n        callback: handlePanelFullscreenToggle,\n      },\n    ].map(({ def, enabled, callback }) => ({\n      hotkey: requireShortcutHotkey(def),\n      callback,\n      options: buildShortcutOptions(def, enabled),\n    }))\n  );\n\n  useHotkeySequences(\n    [\n      { def: REFRESH_DASHBOARD_SHORTCUT, enabled: !disabled, callback: handleRefresh },\n      { def: TOGGLE_EDIT_MODE_SHORTCUT, enabled: !disabled, callback: handleToggleEditMode },\n      { def: TIME_ZOOM_OUT_SHORTCUT, enabled: !disabled, callback: handleTimeZoomOut },\n      { def: TIME_ZOOM_IN_SHORTCUT, enabled: !disabled, callback: handleTimeZoomIn },\n      { def: TIME_SHIFT_BACK_SHORTCUT, enabled: !disabled, callback: handleTimeShiftBack },\n      { def: TIME_SHIFT_FORWARD_SHORTCUT, enabled: !disabled, callback: handleTimeShiftForward },\n      { def: TIME_MAKE_ABSOLUTE_SHORTCUT, enabled: !disabled, callback: handleTimeMakeAbsolute },\n      { def: TIME_COPY_SHORTCUT, enabled: !disabled, callback: handleTimeCopy },\n      { def: TIME_PASTE_SHORTCUT, enabled: !disabled, callback: handleTimePaste },\n      { def: PANEL_DUPLICATE_SHORTCUT, enabled: !disabled && panelFocused, callback: handlePanelDuplicate },\n      { def: PANEL_DELETE_SHORTCUT, enabled: !disabled && panelFocused, callback: handlePanelDelete },\n    ].map(({ def, enabled, callback }) => ({\n      sequence: requireShortcutSequence(def),\n      callback,\n      options: buildShortcutOptions(def, enabled),\n    }))\n  );\n}\n"],"names":["useCallback","isRelativeTimeRange","toAbsoluteTimeRange","useSnackbar","useTimeRange","useHotkeys","useHotkeySequences","useFocusedPanel","buildShortcutOptions","requireShortcutHotkey","requireShortcutSequence","SAVE_DASHBOARD_SHORTCUT","REFRESH_DASHBOARD_SHORTCUT","TOGGLE_EDIT_MODE_SHORTCUT","TIME_ZOOM_OUT_SHORTCUT","TIME_ZOOM_IN_SHORTCUT","TIME_SHIFT_BACK_SHORTCUT","TIME_SHIFT_FORWARD_SHORTCUT","TIME_MAKE_ABSOLUTE_SHORTCUT","TIME_COPY_SHORTCUT","TIME_PASTE_SHORTCUT","PANEL_EDIT_SHORTCUT","PANEL_FULLSCREEN_SHORTCUT","PANEL_DUPLICATE_SHORTCUT","PANEL_DELETE_SHORTCUT","useEditMode","useDashboardStore","useViewPanelGroup","useSaveDashboard","SAVE_SHORTCUT_EDIT_MODE_MESSAGE","SAVE_SHORTCUT_READONLY_MESSAGE","SAVE_SHORTCUT_UNAVAILABLE_MESSAGE","parsePanelKey","panelKey","dashIndex","indexOf","panelGroupId","parseInt","substring","panelGroupItemLayoutId","isNaN","MIN_ZOOM_DURATION_MS","MAX_ZOOM_DURATION_MS","resolveAbsoluteRange","timeRange","absoluteRange","startMs","start","getTime","endMs","end","durationMs","midpointMs","Math","round","selectPanelStoreActions","state","openEditPanel","duplicatePanel","openDeletePanelDialog","setViewPanel","panelEditor","useDashboardShortcuts","onSave","onRefresh","isReadonly","onEditButtonClick","onCancelButtonClick","disabled","focusedPanelKey","isEditMode","setEditMode","setTimeRange","refresh","infoSnackbar","warningSnackbar","viewPanel","saveDashboard","panelFocused","handleSave","handleRefresh","handleToggleEditMode","handleTimeZoomOut","newDuration","min","halfNew","Date","handleTimeZoomIn","max","handleTimeShiftBack","shift","handleTimeShiftForward","handleTimeMakeAbsolute","handleTimeCopy","text","toISOString","navigator","clipboard","writeText","then","catch","handleTimePaste","FORMAT_HINT","readText","parts","split","length","startStr","endStr","trim","newRange","handlePanelEditToggle","undefined","close","panelId","handlePanelFullscreenToggle","handlePanelDuplicate","handlePanelDelete","def","enabled","callback","map","hotkey","options","sequence"],"mappings":"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"}

package/dist/components/Datasources/DatasourceEditor.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.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 {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action, DatasourceDefinition } from '@perses-dev/core'; // TODO\nimport { DatasourceSpec } from '@perses-dev/spec';\nimport { DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';\nimport { ReactElement, useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string): void => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = (): void => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string): void => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <ValidationProvider>\n          <DatasourceEditorForm\n            initialDatasourceDefinition={datasourceEdit}\n            action={datasourceFormAction}\n            isDraft={true}\n            onActionChange={setDatasourceFormAction}\n            onSave={(def: DatasourceDefinition) => {\n              setDatasources((draft) => {\n                delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n                draft[def.name] = def.spec;\n                setDatasourceEdit(null);\n              });\n            }}\n            onClose={() => {\n              setDatasourceEdit(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","ValidationProvider","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","action","isDraft","onActionChange","onSave","def","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"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,SACEA,GAAG,EACHC,MAAM,EACNC,UAAU,EACVC,KAAK,EACLC,KAAK,EACLC,SAAS,EACTC,SAAS,EACTC,cAAc,EACdC,SAAS,EACTC,QAAQ,EACRC,UAAU,QACL,gBAAgB;AACvB,OAAOC,aAAa,uBAAuB;AAC3C,OAAOC,gBAAgB,yBAAyB;AAChD,OAAOC,eAAe,2BAA2B;AAGjD,SAASC,oBAAoB,EAAEC,kBAAkB,QAAQ,4BAA4B;AACrF,SAAuBC,QAAQ,QAAQ,QAAQ;AAC/C,SAASC,QAAQ,QAAQ,YAAY;AACrC,SAASC,mCAAmC,QAAQ,gBAAgB;AAEpE,OAAO,SAASC,iBAAiBC,KAIhC;IACC,MAAM,CAACC,aAAaC,eAAe,GAAGL,SAASG,MAAMC,WAAW;IAChE,MAAM,CAACE,sBAAsBC,wBAAwB,GAAGR,SAAiB;IACzE,MAAM,CAACS,gBAAgBC,kBAAkB,GAAGV,SAAsC;IAClF,MAAMW,cAA8B;QAClCC,SAAS;QACTC,QAAQ;YACN,uFAAuF;YACvFC,MAAM;YACNC,MAAM,CAAC;QACT;IACF;IAEA,MAAM,EAAEC,oCAAoC,EAAEC,qCAAqC,EAAE,GACnFf;IAEF,MAAMgB,eAAe;QACnB,IAAIC,KAAKC,SAAS,CAAChB,MAAMC,WAAW,MAAMc,KAAKC,SAAS,CAACf,cAAc;YACrEW,qCAAqC;gBACnCK,kBAAkB;oBAChBJ;oBACAb,MAAMkB,QAAQ;gBAChB;gBACAA,UAAU;oBACRL;gBACF;gBACAM,aACE;YACJ;QACF,OAAO;YACLnB,MAAMkB,QAAQ;QAChB;IACF;IAEA,MAAME,mBAAmB,CAACC;QACxBnB,eAAe,CAACoB;YACd,OAAOA,KAAK,CAACD,KAAK;QACpB;IACF;IAEA,MAAME,gBAAgB;QACpBnB,wBAAwB;QACxBE,kBAAkB;YAChBe,MAAM;YACNV,MAAMJ;QACR;IACF;IAEA,MAAMiB,iBAAiB,CAACH;QACtBjB,wBAAwB;QACxBE,kBAAkB;YAChBe,MAAMA;YACNV,MAAMV,WAAW,CAACoB,KAAK,IAAId;QAC7B;IACF;IAEA,qBACE;kBACGF,+BACC,KAACV;sBACC,cAAA,KAACD;gBACC+B,6BAA6BpB;gBAC7BqB,QAAQvB;gBACRwB,SAAS;gBACTC,gBAAgBxB;gBAChByB,QAAQ,CAACC;oBACP5B,eAAe,CAACoB;wBACd,OAAOA,KAAK,CAACjB,eAAegB,IAAI,CAAC,EAAE,4DAA4D;wBAC/FC,KAAK,CAACQ,IAAIT,IAAI,CAAC,GAAGS,IAAInB,IAAI;wBAC1BL,kBAAkB;oBACpB;gBACF;gBACAyB,SAAS;oBACPzB,kBAAkB;gBACpB;;2BAIJ;;8BACE,MAAC1B;oBACCoD,IAAI;wBACFC,SAAS;wBACTC,YAAY;wBACZC,SAAS,CAACC,QAAUA,MAAMC,OAAO,CAAC,GAAG;wBACrCC,cAAc,CAACF,QAAU,CAAC,UAAU,EAAEA,MAAMG,OAAO,CAACC,OAAO,EAAE;oBAC/D;;sCAEA,KAAClD;4BAAWmD,SAAQ;sCAAK;;sCACzB,MAAC1D;4BAAM2D,WAAU;4BAAML,SAAS;4BAAGM,YAAW;;8CAC5C,KAAC9D;oCACC+D,UAAU5C,MAAMC,WAAW,KAAKA;oCAChCwC,SAAQ;oCACRI,SAAS;wCACP7C,MAAM8C,QAAQ,CAAC7C;oCACjB;8CACD;;8CAGD,KAACpB;oCAAOkE,OAAM;oCAAYN,SAAQ;oCAAWI,SAAS/B;8CAAc;;;;;;8BAKxE,KAAClC;oBAAIuD,SAAS;oBAAGH,IAAI;wBAAEgB,WAAW;oBAAS;8BACzC,cAAA,KAACjE;wBAAMsD,SAAS;kCACd,cAAA,MAACtD;4BAAMsD,SAAS;;8CACd,KAAClD;8CACC,cAAA,MAACH;wCAAMgD,IAAI;4CAAEiB,UAAU;wCAAI;wCAAGC,cAAW;;0DACvC,KAAC9D;0DACC,cAAA,MAACC;;sEACC,KAACH;sEAAU;;sEACX,KAACA;sEAAU;;sEACX,KAACA;sEAAU;;sEACX,KAACA;4DAAUiE,OAAM;sEAAQ;;;;;0DAG7B,KAAClE;0DACEmE,OAAOC,OAAO,CAACpD,aAAaqD,GAAG,CAAC,CAAC,CAACjC,MAAMV,KAAK;oDAC5C,qBACE,MAACtB;;0EACC,KAACH;gEAAUqE,WAAU;gEAAKC,OAAM;gEAAMxB,IAAI;oEAAEyB,YAAY;gEAAO;0EAC5DpC;;0EAEH,KAACnC;0EAAWyB,KAAKF,MAAM,CAACC,IAAI;;0EAC5B,KAACxB;0EAAWyB,KAAKsB,OAAO,EAAEd,eAAe;;0EACzC,MAACjC;gEAAUiE,OAAM;gEAAQnB,IAAI;oEAAE0B,YAAY;gEAAS;;kFAClD,KAAC5E;wEAAW+D,SAAS,IAAMrB,eAAeH;kFACxC,cAAA,KAAC7B;;kFAEH,KAACV;wEAAW+D,SAAS,IAAMzB,iBAAiBC;kFAC1C,cAAA,KAAC5B;;;;;uDAXQ4B;gDAgBnB;;;;;8CAIN,KAACzC;oCAAIqD,SAAQ;8CACX,cAAA,KAACpD;wCACC4D,SAAQ;wCACRkB,yBAAW,KAACpE;wCACZyC,IAAI;4CAAEW,YAAY;wCAAO;wCACzBE,SAAStB;kDACV;;;;;;;;;;AAWnB"}
+{"version":3,"sources":["../../../src/components/Datasources/DatasourceEditor.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 {\n  Box,\n  Button,\n  IconButton,\n  Stack,\n  Table,\n  TableBody,\n  TableCell,\n  TableContainer,\n  TableHead,\n  TableRow,\n  Typography,\n} from '@mui/material';\nimport AddIcon from 'mdi-material-ui/Plus';\nimport PencilIcon from 'mdi-material-ui/Pencil';\nimport TrashIcon from 'mdi-material-ui/TrashCan';\nimport { Action } from '@perses-dev/components';\nimport { DatasourceSpec } from '@perses-dev/spec';\nimport { DatasourceDefinition, DatasourceEditorForm, ValidationProvider } from '@perses-dev/plugin-system';\nimport { ReactElement, useState } from 'react';\nimport { useImmer } from 'use-immer';\nimport { useDiscardChangesConfirmationDialog } from '../../context';\n\nexport function DatasourceEditor(props: {\n  datasources: Record<string, DatasourceSpec>;\n  onChange: (datasources: Record<string, DatasourceSpec>) => void;\n  onCancel: () => void;\n}): ReactElement {\n  const [datasources, setDatasources] = useImmer(props.datasources);\n  const [datasourceFormAction, setDatasourceFormAction] = useState<Action>('update');\n  const [datasourceEdit, setDatasourceEdit] = useState<DatasourceDefinition | null>(null);\n  const defaultSpec: DatasourceSpec = {\n    default: false,\n    plugin: {\n      // TODO: find a way to avoid assuming that the PrometheusDatasource plugin is installed\n      kind: 'PrometheusDatasource',\n      spec: {},\n    },\n  };\n\n  const { openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog } =\n    useDiscardChangesConfirmationDialog();\n\n  const handleCancel = (): void => {\n    if (JSON.stringify(props.datasources) !== JSON.stringify(datasources)) {\n      openDiscardChangesConfirmationDialog({\n        onDiscardChanges: () => {\n          closeDiscardChangesConfirmationDialog();\n          props.onCancel();\n        },\n        onCancel: () => {\n          closeDiscardChangesConfirmationDialog();\n        },\n        description:\n          'You have unapplied changes. Are you sure you want to discard these changes? Changes cannot be recovered.',\n      });\n    } else {\n      props.onCancel();\n    }\n  };\n\n  const removeDatasource = (name: string): void => {\n    setDatasources((draft) => {\n      delete draft[name];\n    });\n  };\n\n  const addDatasource = (): void => {\n    setDatasourceFormAction('create');\n    setDatasourceEdit({\n      name: 'NewDatasource',\n      spec: defaultSpec,\n    });\n  };\n\n  const editDatasource = (name: string): void => {\n    setDatasourceFormAction('update');\n    setDatasourceEdit({\n      name: name,\n      spec: datasources[name] ?? defaultSpec,\n    });\n  };\n\n  return (\n    <>\n      {datasourceEdit ? (\n        <ValidationProvider>\n          <DatasourceEditorForm\n            initialDatasourceDefinition={datasourceEdit}\n            action={datasourceFormAction}\n            isDraft={true}\n            onActionChange={setDatasourceFormAction}\n            onSave={(def: DatasourceDefinition) => {\n              setDatasources((draft) => {\n                delete draft[datasourceEdit.name]; // to tackle the case where datasource name has been changed\n                draft[def.name] = def.spec;\n                setDatasourceEdit(null);\n              });\n            }}\n            onClose={() => {\n              setDatasourceEdit(null);\n            }}\n          />\n        </ValidationProvider>\n      ) : (\n        <>\n          <Box\n            sx={{\n              display: 'flex',\n              alignItems: 'center',\n              padding: (theme) => theme.spacing(1, 2),\n              borderBottom: (theme) => `1px solid ${theme.palette.divider}`,\n            }}\n          >\n            <Typography variant=\"h2\">Edit Dashboard Datasources</Typography>\n            <Stack direction=\"row\" spacing={1} marginLeft=\"auto\">\n              <Button\n                disabled={props.datasources === datasources}\n                variant=\"contained\"\n                onClick={() => {\n                  props.onChange(datasources);\n                }}\n              >\n                Apply\n              </Button>\n              <Button color=\"secondary\" variant=\"outlined\" onClick={handleCancel}>\n                Cancel\n              </Button>\n            </Stack>\n          </Box>\n          <Box padding={2} sx={{ overflowY: 'scroll' }}>\n            <Stack spacing={2}>\n              <Stack spacing={2}>\n                <TableContainer>\n                  <Table sx={{ minWidth: 650 }} aria-label=\"table of datasources\">\n                    <TableHead>\n                      <TableRow>\n                        <TableCell>Name</TableCell>\n                        <TableCell>Type</TableCell>\n                        <TableCell>Description</TableCell>\n                        <TableCell align=\"right\">Actions</TableCell>\n                      </TableRow>\n                    </TableHead>\n                    <TableBody>\n                      {Object.entries(datasources).map(([name, spec]) => {\n                        return (\n                          <TableRow key={name}>\n                            <TableCell component=\"th\" scope=\"row\" sx={{ fontWeight: 'bold' }}>\n                              {name}\n                            </TableCell>\n                            <TableCell>{spec.plugin.kind}</TableCell>\n                            <TableCell>{spec.display?.description ?? ''}</TableCell>\n                            <TableCell align=\"right\" sx={{ whiteSpace: 'nowrap' }}>\n                              <IconButton onClick={() => editDatasource(name)}>\n                                <PencilIcon />\n                              </IconButton>\n                              <IconButton onClick={() => removeDatasource(name)}>\n                                <TrashIcon />\n                              </IconButton>\n                            </TableCell>\n                          </TableRow>\n                        );\n                      })}\n                    </TableBody>\n                  </Table>\n                </TableContainer>\n                <Box display=\"flex\">\n                  <Button\n                    variant=\"contained\"\n                    startIcon={<AddIcon />}\n                    sx={{ marginLeft: 'auto' }}\n                    onClick={addDatasource}\n                  >\n                    Add Datasource\n                  </Button>\n                </Box>\n              </Stack>\n            </Stack>\n          </Box>\n        </>\n      )}\n    </>\n  );\n}\n"],"names":["Box","Button","IconButton","Stack","Table","TableBody","TableCell","TableContainer","TableHead","TableRow","Typography","AddIcon","PencilIcon","TrashIcon","DatasourceEditorForm","ValidationProvider","useState","useImmer","useDiscardChangesConfirmationDialog","DatasourceEditor","props","datasources","setDatasources","datasourceFormAction","setDatasourceFormAction","datasourceEdit","setDatasourceEdit","defaultSpec","default","plugin","kind","spec","openDiscardChangesConfirmationDialog","closeDiscardChangesConfirmationDialog","handleCancel","JSON","stringify","onDiscardChanges","onCancel","description","removeDatasource","name","draft","addDatasource","editDatasource","initialDatasourceDefinition","action","isDraft","onActionChange","onSave","def","onClose","sx","display","alignItems","padding","theme","spacing","borderBottom","palette","divider","variant","direction","marginLeft","disabled","onClick","onChange","color","overflowY","minWidth","aria-label","align","Object","entries","map","component","scope","fontWeight","whiteSpace","startIcon"],"mappings":"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"}

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

@@ -1,5 +1,5 @@
 import { ReactElement } from 'react';
-import { PanelGroupItemId } from '@perses-dev/core';
+import { PanelGroupItemId } from '../../model';
 import { PanelOptions } from '../Panel';
 export interface GridItemContentProps {
     panelGroupItemId: PanelGroupItemId;

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,kBAAkB,CAAC;AAG7E,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,CAqHzE"}

package/dist/components/GridLayout/GridItemContent.js

@@ -15,7 +15,7 @@ import { Box, useForkRef } from '@mui/material';
 import { useInView } from 'react-intersection-observer';
 import { DataQueriesProvider, usePlugin, useSuggestedStepMs } from '@perses-dev/plugin-system';
 import React, { useMemo, useState } from 'react';
-import { isPanelGroupItemIdEqual } from '@perses-dev/core'; // TODO
+import { isPanelGroupItemIdEqual } from '../../model'; // TODO
 import { useEditMode, usePanel, usePanelActions, useViewPanelGroup } from '../../context';
 import { usePanelFocusHandlers } from '../../keyboard-shortcuts';
 import { Panel } from '../Panel';

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 '@perses-dev/core'; // 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 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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"}

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIhD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,OAAO,EAAO,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAmE/D;AAED,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,GACd,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CA0C7C"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,YAAY,EAAY,MAAM,OAAO,CAAC;AAG/C,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAIhD,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,OAAO,EAAO,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtC,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,GAAG,YAAY,CAmE/D;AAED,MAAM,WAAW,qBAAsB,SAAQ,QAAQ;IACrD,kBAAkB,EAAE,MAAM,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,kBAAkB,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,GACd,EAAE,qBAAqB,GAAG,YAAY,GAAG,IAAI,CA0C7C"}

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.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.\nimport { ReactElement, useState } from 'react';\nimport { Layouts, Layout } from 'react-grid-layout';\nimport { PanelGroupDefinition } from '@perses-dev/core'; // TODO what should we do about the PanelGroupDefinition ?\nimport { PanelGroupId } from '@perses-dev/spec';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanelGroup } from '../../context';\nimport { GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { Row, RowProps } from './Row';\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n  panelFullHeight?: number;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps): ReactElement {\n  const { panelGroupId, panelOptions, panelFullHeight } = props;\n  const groupDefinition: PanelGroupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n  const viewPanelItemId = useViewPanelGroup();\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts): void => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout && !hasViewPanel) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ): void => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <>\n      {!groupDefinition.repeatVariable ? (\n        <Row\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      ) : (\n        <RepeatGridLayout\n          repeatVariableName={groupDefinition.repeatVariable}\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      )}\n    </>\n  );\n}\n\nexport interface RepeatGridLayoutProps extends RowProps {\n  repeatVariableName: string;\n}\n\n/**\n * Renders a grid layout for a repeated variable, where each value of the variable will create a new row.\n */\nexport function RepeatGridLayout({\n  repeatVariableName,\n  panelGroupId,\n  groupDefinition,\n  gridColWidth,\n  panelFullHeight,\n  panelOptions,\n  isEditMode = false,\n  onLayoutChange,\n  onWidthChange,\n}: RepeatGridLayoutProps): ReactElement | null {\n  const variables = useVariableValues();\n  const variable = variables[repeatVariableName];\n\n  // If the variable is not defined, or if it is defined but has no values, render a standard row without repeating\n  if (variable === undefined || !Array.isArray(variable.value) || variable.value.length === 0) {\n    return (\n      <Row\n        panelGroupId={panelGroupId}\n        groupDefinition={groupDefinition}\n        gridColWidth={gridColWidth}\n        panelFullHeight={panelFullHeight}\n        panelOptions={panelOptions}\n        isEditMode={isEditMode}\n        onLayoutChange={onLayoutChange}\n        onWidthChange={onWidthChange}\n      />\n    );\n  }\n\n  return (\n    <>\n      {variable.value.map((value) => (\n        <VariableContext.Provider\n          key={`${repeatVariableName}-${value}`}\n          value={{ state: { ...variables, [repeatVariableName]: { value, loading: false } } }}\n        >\n          <Row\n            panelGroupId={panelGroupId}\n            groupDefinition={groupDefinition}\n            gridColWidth={gridColWidth}\n            panelFullHeight={panelFullHeight}\n            panelOptions={panelOptions}\n            isEditMode={isEditMode}\n            onLayoutChange={onLayoutChange}\n            onWidthChange={onWidthChange}\n            repeatVariable={[repeatVariableName, value]}\n          />\n        </VariableContext.Provider>\n      ))}\n    </>\n  );\n}\n"],"names":["useState","useVariableValues","VariableContext","useEditMode","usePanelGroup","usePanelGroupActions","useViewPanelGroup","GRID_LAYOUT_SMALL_BREAKPOINT","Row","GridLayout","props","panelGroupId","panelOptions","panelFullHeight","groupDefinition","updatePanelGroupLayouts","viewPanelItemId","isEditMode","gridColWidth","setGridColWidth","hasViewPanel","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","repeatVariable","onLayoutChange","onWidthChange","RepeatGridLayout","repeatVariableName","variables","variable","undefined","Array","isArray","value","length","map","Provider","state","loading"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.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.\nimport { ReactElement, useState } from 'react';\nimport { Layouts, Layout } from 'react-grid-layout';\n\nimport { PanelGroupId } from '@perses-dev/spec';\nimport { useVariableValues, VariableContext } from '@perses-dev/plugin-system';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, useViewPanelGroup } from '../../context';\nimport { GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { PanelGroupDefinition } from '../../model';\nimport { Row, RowProps } from './Row';\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n  panelFullHeight?: number;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps): ReactElement {\n  const { panelGroupId, panelOptions, panelFullHeight } = props;\n  const groupDefinition: PanelGroupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n  const viewPanelItemId = useViewPanelGroup();\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const hasViewPanel = viewPanelItemId?.panelGroupId === panelGroupId; // current panelGroup contains the panel extended?\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts): void => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout && !hasViewPanel) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ): void => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <>\n      {!groupDefinition.repeatVariable ? (\n        <Row\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      ) : (\n        <RepeatGridLayout\n          repeatVariableName={groupDefinition.repeatVariable}\n          panelGroupId={panelGroupId}\n          groupDefinition={groupDefinition}\n          gridColWidth={gridColWidth}\n          panelFullHeight={panelFullHeight}\n          panelOptions={panelOptions}\n          isEditMode={isEditMode}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        />\n      )}\n    </>\n  );\n}\n\nexport interface RepeatGridLayoutProps extends RowProps {\n  repeatVariableName: string;\n}\n\n/**\n * Renders a grid layout for a repeated variable, where each value of the variable will create a new row.\n */\nexport function RepeatGridLayout({\n  repeatVariableName,\n  panelGroupId,\n  groupDefinition,\n  gridColWidth,\n  panelFullHeight,\n  panelOptions,\n  isEditMode = false,\n  onLayoutChange,\n  onWidthChange,\n}: RepeatGridLayoutProps): ReactElement | null {\n  const variables = useVariableValues();\n  const variable = variables[repeatVariableName];\n\n  // If the variable is not defined, or if it is defined but has no values, render a standard row without repeating\n  if (variable === undefined || !Array.isArray(variable.value) || variable.value.length === 0) {\n    return (\n      <Row\n        panelGroupId={panelGroupId}\n        groupDefinition={groupDefinition}\n        gridColWidth={gridColWidth}\n        panelFullHeight={panelFullHeight}\n        panelOptions={panelOptions}\n        isEditMode={isEditMode}\n        onLayoutChange={onLayoutChange}\n        onWidthChange={onWidthChange}\n      />\n    );\n  }\n\n  return (\n    <>\n      {variable.value.map((value) => (\n        <VariableContext.Provider\n          key={`${repeatVariableName}-${value}`}\n          value={{ state: { ...variables, [repeatVariableName]: { value, loading: false } } }}\n        >\n          <Row\n            panelGroupId={panelGroupId}\n            groupDefinition={groupDefinition}\n            gridColWidth={gridColWidth}\n            panelFullHeight={panelFullHeight}\n            panelOptions={panelOptions}\n            isEditMode={isEditMode}\n            onLayoutChange={onLayoutChange}\n            onWidthChange={onWidthChange}\n            repeatVariable={[repeatVariableName, value]}\n          />\n        </VariableContext.Provider>\n      ))}\n    </>\n  );\n}\n"],"names":["useState","useVariableValues","VariableContext","useEditMode","usePanelGroup","usePanelGroupActions","useViewPanelGroup","GRID_LAYOUT_SMALL_BREAKPOINT","Row","GridLayout","props","panelGroupId","panelOptions","panelFullHeight","groupDefinition","updatePanelGroupLayouts","viewPanelItemId","isEditMode","gridColWidth","setGridColWidth","hasViewPanel","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","repeatVariable","onLayoutChange","onWidthChange","RepeatGridLayout","repeatVariableName","variables","variable","undefined","Array","isArray","value","length","map","Provider","state","loading"],"mappings":"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"}

package/dist/components/GridLayout/Row.d.ts

@@ -1,8 +1,8 @@
-import { PanelGroupDefinition } from '@perses-dev/core';
 import { PanelGroupId } from '@perses-dev/spec';
 import { PanelOptions } from '@perses-dev/dashboards';
 import { ReactElement } from 'react';
 import { Layout, Layouts } from 'react-grid-layout';
+import { PanelGroupDefinition } from '../../model';
 export interface RowProps {
     panelGroupId: PanelGroupId;
     groupDefinition: PanelGroupDefinition;

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

@@ -1 +1 @@
-{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/Row.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,oBAAoB,EAAwB,MAAM,kBAAkB,CAAC;AAC9E,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAqB,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,OAAO,EAA6B,MAAM,mBAAmB,CAAC;AAU/E,MAAM,WAAW,QAAQ;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,oBAAoB,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,CACd,cAAc,EAAE,MAAM,EACtB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACxB,IAAI,EAAE,MAAM,EACZ,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAC/B,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED,wBAAgB,GAAG,CAAC,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,EACb,cAAc,GACf,EAAE,QAAQ,GAAG,YAAY,CAoGzB"}
+{"version":3,"file":"Row.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/Row.tsx"],"names":[],"mappings":"AAcA,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAqB,MAAM,wBAAwB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAgC,MAAM,OAAO,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,OAAO,EAA6B,MAAM,mBAAmB,CAAC;AAG/E,OAAO,EAAE,oBAAoB,EAAwB,MAAM,aAAa,CAAC;AAQzE,MAAM,WAAW,QAAQ;IACvB,YAAY,EAAE,YAAY,CAAC;IAC3B,eAAe,EAAE,oBAAoB,CAAC;IACtC,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,cAAc,CAAC,EAAE,CAAC,aAAa,EAAE,MAAM,EAAE,EAAE,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IACxE,aAAa,CAAC,EAAE,CACd,cAAc,EAAE,MAAM,EACtB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,EACxB,IAAI,EAAE,MAAM,EACZ,gBAAgB,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,KAC/B,IAAI,CAAC;IACV,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CACnC;AAED,wBAAgB,GAAG,CAAC,EAClB,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,eAAe,EACf,YAAY,EACZ,UAAkB,EAClB,cAAc,EACd,aAAa,EACb,cAAc,GACf,EAAE,QAAQ,GAAG,YAAY,CAoGzB"}