@perses-dev/dashboards 0.11.0 → 0.12.0

package/dist/cjs/context/DashboardProvider/panel-editor-slice.js

@@ -19,27 +19,21 @@ Object.defineProperty(exports, "createPanelEditorSlice", {
     get: ()=>createPanelEditorSlice
 });
 const _functions = require("../../utils/functions");
-function createPanelEditorSlice(panels) {
+const _common = require("./common");
+function createPanelEditorSlice() {
     // Return the state creator function for Zustand that uses the panels provided as intitial state
     return (set, get)=>{
         return {
-            previousPanels: panels,
-            panels,
             panelEditor: undefined,
-            savePanels () {
-                set((state)=>{
-                    state.previousPanels = state.panels;
-                });
-            },
-            resetPanels () {
-                set((state)=>{
-                    state.panels = state.previousPanels;
-                });
-            },
-            openEditPanel (item) {
-                const { panels , getPanelKey  } = get();
-                // Ask the layout store for the panel key at that location
-                const panelKey = getPanelKey(item);
+            openEditPanel (panelGroupItemId) {
+                var ref;
+                const { panels , panelGroups  } = get();
+                // Figure out the panel key at that location
+                const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                const panelKey = (ref = panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.itemPanelKeys[panelGroupLayoutId];
+                if (panelKey === undefined) {
+                    throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);
+                }
                 // Find the panel to edit
                 const panelToEdit = panels[panelKey];
                 if (panelToEdit === undefined) {
@@ -51,19 +45,46 @@ function createPanelEditorSlice(panels) {
                     initialValues: {
                         name: panelToEdit.spec.display.name,
                         description: (_description = panelToEdit.spec.display.description) !== null && _description !== void 0 ? _description : '',
-                        groupId: item.panelGroupId,
+                        groupId: panelGroupItemId.panelGroupId,
                         kind: panelToEdit.spec.plugin.kind,
                         spec: panelToEdit.spec.plugin.spec
                     },
                     applyChanges: (next)=>{
                         const panelDefinititon = createPanelDefinitionFromEditorValues(next);
-                        set((state)=>{
-                            state.panels[panelKey] = panelDefinititon;
+                        set((draft)=>{
+                            draft.panels[panelKey] = panelDefinititon;
+                            // If the panel didn't change groups, nothing else to do
+                            if (next.groupId === panelGroupId) {
+                                return;
+                            }
+                            // Move panel to the new group
+                            const existingGroup = draft.panelGroups[panelGroupId];
+                            if (existingGroup === undefined) {
+                                throw new Error(`Missing panel group ${panelGroupId}`);
+                            }
+                            const existingLayoutIdx = existingGroup.itemLayouts.findIndex((layout)=>layout.i === panelGroupLayoutId);
+                            const existingLayout = existingGroup.itemLayouts[existingLayoutIdx];
+                            const existingPanelKey = existingGroup.itemPanelKeys[panelGroupLayoutId];
+                            if (existingLayoutIdx === -1 || existingLayout === undefined || existingPanelKey === undefined) {
+                                throw new Error(`Missing panel group item ${panelGroupLayoutId}`);
+                            }
+                            // Remove item from the old group
+                            existingGroup.itemLayouts.splice(existingLayoutIdx, 1);
+                            delete existingGroup.itemPanelKeys[panelGroupLayoutId];
+                            // Add item to the end of the new group
+                            const newGroup = draft.panelGroups[next.groupId];
+                            if (newGroup === undefined) {
+                                throw new Error(`Could not find new group ${next.groupId}`);
+                            }
+                            newGroup.itemLayouts.push({
+                                i: existingLayout.i,
+                                x: 0,
+                                y: getYForNewRow(newGroup),
+                                w: existingLayout.w,
+                                h: existingLayout.h
+                            });
+                            newGroup.itemPanelKeys[existingLayout.i] = existingPanelKey;
                         });
-                        // Move the panel to another group if it changed
-                        if (next.groupId !== item.panelGroupId) {
-                            get().movePanelToGroup(item, next.groupId);
-                        }
                     },
                     close: ()=>{
                         set((state)=>{
@@ -79,7 +100,7 @@ function createPanelEditorSlice(panels) {
             openAddPanel (panelGroupId) {
                 // If a panel group isn't supplied, add to the first group
                 if (panelGroupId === undefined) {
-                    const firstGroupId = get().panelGroupIdOrder[0];
+                    const firstGroupId = get().panelGroupOrder[0];
                     if (firstGroupId === undefined) {
                         throw new Error('No panel groups to add a panel to');
                     }
@@ -99,10 +120,24 @@ function createPanelEditorSlice(panels) {
                     applyChanges: (next)=>{
                         const panelDef = createPanelDefinitionFromEditorValues(next);
                         const panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
-                        set((state)=>{
-                            state.panels[panelKey] = panelDef;
+                        set((draft)=>{
+                            // Add a panel
+                            draft.panels[panelKey] = panelDef;
+                            // Also add a panel group item referencing the panel
+                            const group = draft.panelGroups[next.groupId];
+                            if (group === undefined) {
+                                throw new Error(`Missing panel group ${next.groupId}`);
+                            }
+                            const layout = {
+                                i: (0, _common.generateId)().toString(),
+                                x: 0,
+                                y: getYForNewRow(group),
+                                w: 12,
+                                h: 6
+                            };
+                            group.itemLayouts.push(layout);
+                            group.itemPanelKeys[layout.i] = panelKey;
                         });
-                        get().addPanelToGroup(panelKey, next.groupId);
                     },
                     close: ()=>{
                         set((state)=>{
@@ -114,45 +149,6 @@ function createPanelEditorSlice(panels) {
                 set((state)=>{
                     state.panelEditor = editorState;
                 });
-            },
-            deletePanels (items) {
-                const { mapPanelToPanelGroups , deletePanelInPanelGroup , getPanelKey  } = get();
-                const map = mapPanelToPanelGroups();
-                // get panel key first before deleting panel from panel group since getPanelKey relies on index
-                const panels = items.map((panel)=>{
-                    return {
-                        ...panel,
-                        panelKey: getPanelKey(panel)
-                    };
-                });
-                panels.forEach(({ panelKey , ...panel })=>{
-                    var ref;
-                    deletePanelInPanelGroup(panel);
-                    // make sure panel is only referenced in one panel group before deleting it from state.panels
-                    if (map[panelKey] && ((ref = map[panelKey]) === null || ref === void 0 ? void 0 : ref.length) === 1) {
-                        set((state)=>{
-                            delete state.panels[panelKey];
-                        });
-                    }
-                });
-            },
-            openDeletePanelDialog (item) {
-                const { panels , getPanelKey , panelGroups  } = get();
-                const panelKey = getPanelKey(item);
-                set((state)=>{
-                    var ref, ref1;
-                    var _name, ref2;
-                    state.deletePanelDialog = {
-                        panelGroupItemId: item,
-                        panelName: (_name = (ref = panels[panelKey]) === null || ref === void 0 ? void 0 : ref.spec.display.name) !== null && _name !== void 0 ? _name : '',
-                        panelGroupName: (ref2 = (ref1 = panelGroups[item.panelGroupId]) === null || ref1 === void 0 ? void 0 : ref1.title) !== null && ref2 !== void 0 ? ref2 : ''
-                    };
-                });
-            },
-            closeDeletePanelDialog () {
-                set((state)=>{
-                    state.deletePanelDialog = undefined;
-                });
             }
         };
     };
@@ -173,3 +169,14 @@ function createPanelDefinitionFromEditorValues(editorValues) {
         }
     };
 }
+// Given a PanelGroup, will find the Y coordinate for adding a new row to the grid, taking into account the items present
+function getYForNewRow(group) {
+    let newRowY = 0;
+    for (const layout of group.itemLayouts){
+        const itemMaxY = layout.y + layout.h;
+        if (itemMaxY > newRowY) {
+            newRowY = itemMaxY;
+        }
+    }
+    return newRowY;
+}

package/dist/cjs/context/DashboardProvider/panel-group-editor-slice.js

@@ -18,6 +18,7 @@ Object.defineProperty(exports, "createPanelGroupEditorSlice", {
     enumerable: true,
     get: ()=>createPanelGroupEditorSlice
 });
+const _common = require("./common");
 const createPanelGroupEditorSlice = (set, get)=>({
         panelGroupEditor: undefined,
         openAddPanelGroup: ()=>{
@@ -30,13 +31,14 @@ const createPanelGroupEditorSlice = (set, get)=>({
                 },
                 applyChanges (next) {
                     const newGroup = {
-                        id: get().createPanelGroupId(),
-                        items: [],
+                        id: (0, _common.generateId)(),
+                        itemLayouts: [],
+                        itemPanelKeys: {},
                         ...next
                     };
                     set((draft)=>{
                         draft.panelGroups[newGroup.id] = newGroup;
-                        draft.panelGroupIdOrder.unshift(newGroup.id);
+                        draft.panelGroupOrder.unshift(newGroup.id);
                     });
                 },
                 close () {
@@ -83,20 +85,5 @@ const createPanelGroupEditorSlice = (set, get)=>({
             set((draft)=>{
                 draft.panelGroupEditor = editor;
             });
-        },
-        openDeletePanelGroupDialog: (panelGroupId)=>{
-            const panelGroup = get().panelGroups[panelGroupId];
-            if (panelGroup === undefined) {
-                throw new Error(`Panel group with Id ${panelGroupId} not found`);
-            }
-            set((state)=>{
-                state.deletePanelGroupDialog = {
-                    panelGroupId,
-                    panelGroupName: panelGroup.title
-                };
-            });
-        },
-        closeDeletePanelGroupDialog: ()=>set((state)=>{
-                state.deletePanelGroupDialog = undefined;
-            })
+        }
     });

package/dist/cjs/context/DashboardProvider/panel-group-slice.js

@@ -19,190 +19,85 @@ Object.defineProperty(exports, "createPanelGroupSlice", {
     get: ()=>createPanelGroupSlice
 });
 const _core = require("@perses-dev/core");
+const _common = require("./common");
 function createPanelGroupSlice(layouts) {
-    // Helper function for generating unique IDs for a PanelGroup
-    let id = -1;
-    function createPanelGroupId() {
-        id++;
-        return id;
-    }
-    // Convert the initial layouts from the JSON to panel groups and keep track of the order
+    // Convert the initial layouts from the JSON
     const panelGroups = {};
     const panelGroupIdOrder = [];
     for (const layout of layouts){
         var ref, ref1, ref2;
-        const id1 = createPanelGroupId();
-        panelGroups[id1] = {
-            id: id1,
-            items: layout.spec.items,
+        const itemLayouts = [];
+        const itemPanelKeys = {};
+        // Split layout information from panel keys to make it easier to update just layouts on move/resize of panels
+        for (const item of layout.spec.items){
+            const panelGroupLayoutId = (0, _common.generateId)().toString();
+            itemLayouts.push({
+                i: panelGroupLayoutId,
+                w: item.width,
+                h: item.height,
+                x: item.x,
+                y: item.y
+            });
+            itemPanelKeys[panelGroupLayoutId] = (0, _core.getPanelKeyFromRef)(item.content);
+        }
+        // Create the panel group and keep track of the ID order
+        const panelGroupId = (0, _common.generateId)();
+        panelGroups[panelGroupId] = {
+            id: panelGroupId,
             isCollapsed: ((ref = layout.spec.display) === null || ref === void 0 ? void 0 : (ref1 = ref.collapse) === null || ref1 === void 0 ? void 0 : ref1.open) === false,
-            title: (ref2 = layout.spec.display) === null || ref2 === void 0 ? void 0 : ref2.title
+            title: (ref2 = layout.spec.display) === null || ref2 === void 0 ? void 0 : ref2.title,
+            itemLayouts,
+            itemPanelKeys
         };
-        panelGroupIdOrder.push(id1);
+        panelGroupIdOrder.push(panelGroupId);
     }
     // Return the state creator function for Zustand
-    return (set, get)=>{
-        return {
+    return (set)=>({
             panelGroups,
-            panelGroupIdOrder,
-            previousPanelGroupStates: {
+            panelGroupOrder: panelGroupIdOrder,
+            previousPanelGroupState: {
                 panelGroups,
                 panelGroupIdOrder
             },
-            // TODO: Reorder init logic so this isn't exposed
-            createPanelGroupId,
             savePanelGroups () {
                 set((state)=>{
-                    state.previousPanelGroupStates = {
+                    state.previousPanelGroupState = {
                         panelGroups: state.panelGroups,
-                        panelGroupIdOrder: state.panelGroupIdOrder
+                        panelGroupIdOrder: state.panelGroupOrder
                     };
                 });
             },
             resetPanelGroups () {
                 set((state)=>{
-                    state.panelGroups = state.previousPanelGroupStates.panelGroups;
-                    state.panelGroupIdOrder = state.previousPanelGroupStates.panelGroupIdOrder;
-                });
-            },
-            getPanelKey ({ panelGroupId , itemIndex  }) {
-                const { panelGroups  } = get();
-                const group = findGroup(panelGroups, panelGroupId);
-                const item = findItem(group, itemIndex);
-                return (0, _core.getPanelKeyFromRef)(item.content);
-            },
-            addPanelToGroup (panelKey, panelGroupId) {
-                const { panelGroups  } = get();
-                const group = findGroup(panelGroups, panelGroupId);
-                const gridItem = {
-                    x: 0,
-                    y: getYForNewRow(group),
-                    width: 12,
-                    height: 6,
-                    content: (0, _core.createPanelRef)(panelKey)
-                };
-                set((state)=>{
-                    var ref;
-                    (ref = state.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.items.push(gridItem);
-                });
-            },
-            movePanelToGroup ({ panelGroupId , itemIndex  }, newPanelGroupId) {
-                const { panelGroups  } = get();
-                // Find the existing item to make sure it exists
-                const group = findGroup(panelGroups, panelGroupId);
-                const item = findItem(group, itemIndex);
-                // Find the new group and figure out where a new row should go
-                const newGroup = findGroup(panelGroups, newPanelGroupId);
-                const newGroupY = getYForNewRow(newGroup);
-                set((state)=>{
-                    var // Remove the item from its current group
-                    ref, // Add a new item to the new group
-                    ref1;
-                    (ref = state.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.items.splice(itemIndex, 1);
-                    (ref1 = state.panelGroups[newPanelGroupId]) === null || ref1 === void 0 ? void 0 : ref1.items.push({
-                        x: 0,
-                        y: newGroupY,
-                        width: item.width,
-                        height: item.height,
-                        content: item.content
-                    });
+                    state.panelGroups = state.previousPanelGroupState.panelGroups;
+                    state.panelGroupOrder = state.previousPanelGroupState.panelGroupIdOrder;
                 });
             },
             swapPanelGroups (x, y) {
                 set((state)=>{
-                    if (x < 0 || x >= state.panelGroupIdOrder.length || y < 0 || y >= state.panelGroupIdOrder.length) {
+                    if (x < 0 || x >= state.panelGroupOrder.length || y < 0 || y >= state.panelGroupOrder.length) {
                         throw new Error('index out of bound');
                     }
-                    const xPanelGroup = state.panelGroupIdOrder[x];
-                    const yPanelGroup = state.panelGroupIdOrder[y];
+                    const xPanelGroup = state.panelGroupOrder[x];
+                    const yPanelGroup = state.panelGroupOrder[y];
                     if (xPanelGroup === undefined || yPanelGroup === undefined) {
                         throw new Error('panel group is undefined');
                     }
                     // assign yPanelGroup to layouts[x] and assign xGroup to layouts[y], swapping two panel groups
-                    [state.panelGroupIdOrder[x], state.panelGroupIdOrder[y]] = [
+                    [state.panelGroupOrder[x], state.panelGroupOrder[y]] = [
                         yPanelGroup,
                         xPanelGroup
                     ];
                 });
             },
-            deletePanelInPanelGroup ({ panelGroupId , itemIndex  }) {
+            updatePanelGroupLayouts (panelGroupId, itemLayouts) {
                 set((state)=>{
                     const group = state.panelGroups[panelGroupId];
                     if (group === undefined) {
-                        throw new Error(`No panel group found: ${panelGroupId}`);
+                        throw new Error(`Cannot find panel group ${panelGroupId}`);
                     }
-                    // remove panel from panel group
-                    group.items.splice(itemIndex, 1);
-                });
-            },
-            deletePanelGroup (panelGroupId) {
-                const { panelGroups , panelGroupIdOrder: panelGroupOrder , deletePanels  } = get();
-                const group = findGroup(panelGroups, panelGroupId);
-                const orderIdx = panelGroupOrder.findIndex((id)=>id === panelGroupId);
-                if (orderIdx === -1) {
-                    throw new Error(`Could not find panel group Id ${panelGroupId} in order array`);
-                }
-                // remove panels from group first
-                const panelsToBeDeleted = [];
-                for(let i = 0; i < group.items.length; i++){
-                    panelsToBeDeleted.push({
-                        panelGroupId,
-                        itemIndex: i
-                    });
-                }
-                deletePanels(panelsToBeDeleted);
-                // remove group from both panelGroups and panelGroupOrder
-                set((state)=>{
-                    state.panelGroupIdOrder.splice(orderIdx, 1);
-                    delete state.panelGroups[panelGroupId];
-                });
-            },
-            // Return an object that maps each panel to the groups it belongs
-            mapPanelToPanelGroups () {
-                const map = {}; // { panel key: [group ids] }
-                Object.values(get().panelGroups).forEach((group)=>{
-                    // for each panel in a group, add the group id to map[panelKey]
-                    group.items.forEach((panel)=>{
-                        const panelKey = (0, _core.getPanelKeyFromRef)(panel.content);
-                        if (map[panelKey]) {
-                            var ref;
-                            (ref = map[panelKey]) === null || ref === void 0 ? void 0 : ref.push(group.id);
-                        } else {
-                            map[panelKey] = [
-                                group.id
-                            ];
-                        }
-                    });
+                    group.itemLayouts = itemLayouts;
                 });
-                return map;
             }
-        };
-    };
-}
-// Helper to find a group and throw if not found
-function findGroup(panelGroups, groupId) {
-    const group = panelGroups[groupId];
-    if (group === undefined) {
-        throw new Error(`No panel group found for Id ${groupId}`);
-    }
-    return group;
-}
-// Helper to get an item in a group and throw if not found
-function findItem(group, itemIndex) {
-    const item = group.items[itemIndex];
-    if (item === undefined) {
-        throw new Error(`No grid item found at position ${itemIndex}`);
-    }
-    return item;
-}
-// Given a Grid, will find the Y coordinate for adding a new row to the grid, taking into account the items present
-function getYForNewRow(group) {
-    let newRowY = 0;
-    for (const item of group.items){
-        const itemMaxY = item.y + item.height;
-        if (itemMaxY > newRowY) {
-            newRowY = itemMaxY;
-        }
-    }
-    return newRowY;
+        });
 }

package/dist/cjs/context/DashboardProvider/panel-slice.js

@@ -0,0 +1,36 @@
+// Copyright 2022 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, "createPanelSlice", {
+    enumerable: true,
+    get: ()=>createPanelSlice
+});
+function createPanelSlice(panels) {
+    return (set)=>({
+            panels,
+            previousPanels: panels,
+            resetPanels () {
+                set((state)=>{
+                    state.panels = state.previousPanels;
+                });
+            },
+            savePanels () {
+                set((state)=>{
+                    state.previousPanels = state.panels;
+                });
+            }
+        });
+}

package/dist/cjs/context/useDashboardSpec.js

@@ -18,27 +18,44 @@ Object.defineProperty(exports, "useDashboardSpec", {
     enumerable: true,
     get: ()=>useDashboardSpec
 });
+const _core = require("@perses-dev/core");
 const _dashboardProvider = require("./DashboardProvider");
 const _templateVariableProvider = require("./TemplateVariableProvider");
 function useDashboardSpec() {
-    const { panels , panelGroups , defaultTimeRange  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , defaultTimeRange  })=>({
+    const { panels , panelGroups , panelGroupOrder , defaultTimeRange , reset: resetDashboardStore ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , defaultTimeRange , reset  })=>({
             panels,
             panelGroups,
-            defaultTimeRange
+            panelGroupOrder,
+            defaultTimeRange,
+            reset
         }));
+    const { setVariableDefinitions  } = (0, _templateVariableProvider.useTemplateVariableActions)();
     const variables = (0, _templateVariableProvider.useTemplateVariableDefinitions)();
-    const layouts = convertPanelGroupsToLayouts(panelGroups);
-    return {
+    const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
+    const spec = {
         panels,
         layouts,
         variables,
         duration: defaultTimeRange.pastDuration
     };
+    const resetSpec = (spec)=>{
+        setVariableDefinitions(spec.variables);
+        // TODO: Should we call reset on the dashboard store with the spec?
+        resetDashboardStore();
+    };
+    return {
+        spec,
+        resetSpec
+    };
 }
-function convertPanelGroupsToLayouts(panelGroups) {
+function convertPanelGroupsToLayouts(panelGroups, panelGroupOrder) {
     const layouts = [];
-    Object.values(panelGroups).forEach((group)=>{
-        const { title , isCollapsed , items  } = group;
+    panelGroupOrder.map((groupOrderId)=>{
+        const group = panelGroups[groupOrderId];
+        if (group === undefined) {
+            throw new Error('panel group not found');
+        }
+        const { title , isCollapsed , itemLayouts , itemPanelKeys  } = group;
         let display = undefined;
         if (title) {
             display = {
@@ -52,7 +69,19 @@ function convertPanelGroupsToLayouts(panelGroups) {
             kind: 'Grid',
             spec: {
                 display,
-                items
+                items: itemLayouts.map((layout)=>{
+                    const panelKey = itemPanelKeys[layout.i];
+                    if (panelKey === undefined) {
+                        throw new Error(`Missing panel key of layout ${layout.i}`);
+                    }
+                    return {
+                        x: layout.x,
+                        y: layout.y,
+                        width: layout.w,
+                        height: layout.h,
+                        content: (0, _core.createPanelRef)(panelKey)
+                    };
+                })
             }
         };
         layouts.push(layout);

package/dist/cjs/utils/time-range-params.js

@@ -111,15 +111,21 @@ function useSetTimeRangeParams(initialTimeRange, paramsEnabled = true) {
     // fallback when app does not want query string as source of truth
     const [timeRangeState, setTimeRangeState] = (0, _react.useState)(initialTimeRange);
     const { start  } = query;
-    // set start param on page load if empty
-    if (paramsEnabled && !start) {
-        if ((0, _core.isRelativeTimeRange)(initialTimeRange)) {
-            setQuery({
-                start: initialTimeRange.pastDuration,
-                end: undefined
-            });
+    (0, _react.useEffect)(()=>{
+        if (paramsEnabled && !start) {
+            if ((0, _core.isRelativeTimeRange)(initialTimeRange)) {
+                setQuery({
+                    start: initialTimeRange.pastDuration,
+                    end: undefined
+                });
+            }
         }
-    }
+    }, [
+        initialTimeRange,
+        paramsEnabled,
+        start,
+        setQuery
+    ]);
     const setTimeRange = (0, _react.useCallback)((value)=>{
         if ((0, _core.isRelativeTimeRange)(value)) {
             setQuery({

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

@@ -33,7 +33,6 @@ const DashboardApp = (props)=>{
     const { dashboardResource  } = props;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
-            padding: (theme)=>theme.spacing(1, 0),
             flexGrow: 1,
             overflowX: 'hidden',
             overflowY: 'auto',

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAqBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAuF5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../src/components/DashboardToolbar.tsx"],"names":[],"mappings":";AAuBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBA6F5D,CAAC"}

package/dist/components/DashboardToolbar.js

@@ -11,23 +11,30 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
 import { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';
 import PencilIcon from 'mdi-material-ui/PencilOutline';
 import AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';
 import AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';
 import { ErrorBoundary, ErrorAlert } from '@perses-dev/components';
-import { useDashboardActions, useEditMode } from '../context';
+import { useDashboardActions, useDashboardSpec, useEditMode } from '../context';
 import { TemplateVariableList, TimeRangeControls } from '../components';
 export const DashboardToolbar = (props)=>{
     const { dashboardName  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
-    const { openAddPanelGroup , openAddPanel , reset , save  } = useDashboardActions();
+    const { openAddPanelGroup , openAddPanel , save  } = useDashboardActions();
     const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));
+    const [originalSpec, setOriginalSpec] = useState(undefined);
+    const { spec , resetSpec  } = useDashboardSpec();
     const onEditButtonClick = ()=>{
+        setOriginalSpec(spec);
         setEditMode(true);
     };
     const onCancelButtonClick = ()=>{
-        reset();
+        // Reset to the original spec and exit edit mode
+        if (originalSpec) {
+            resetSpec(originalSpec);
+        }
         setEditMode(false);
     };
     const onSave = ()=>{