@perses-dev/dashboards 0.14.0 → 0.16.0

package/dist/cjs/components/Variables/VariableList.js

@@ -19,10 +19,12 @@ Object.defineProperty(exports, "TemplateVariableList", {
     get: ()=>TemplateVariableList
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = require("react");
+const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _material = require("@mui/material");
 const _eye = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Eye"));
 const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
+const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
+const _pinOffOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOffOutline"));
 const _context = require("../../context");
 const _variable = require("./Variable");
 const _variableEditor = require("./VariableEditor");
@@ -31,18 +33,67 @@ function _interopRequireDefault(obj) {
         default: obj
     };
 }
-function TemplateVariableList() {
+function _getRequireWildcardCache(nodeInterop) {
+    if (typeof WeakMap !== "function") return null;
+    var cacheBabelInterop = new WeakMap();
+    var cacheNodeInterop = new WeakMap();
+    return (_getRequireWildcardCache = function(nodeInterop) {
+        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
+    })(nodeInterop);
+}
+function _interopRequireWildcard(obj, nodeInterop) {
+    if (!nodeInterop && obj && obj.__esModule) {
+        return obj;
+    }
+    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
+        return {
+            default: obj
+        };
+    }
+    var cache = _getRequireWildcardCache(nodeInterop);
+    if (cache && cache.has(obj)) {
+        return cache.get(obj);
+    }
+    var newObj = {};
+    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
+    for(var key in obj){
+        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
+            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
+            if (desc && (desc.get || desc.set)) {
+                Object.defineProperty(newObj, key, desc);
+            } else {
+                newObj[key] = obj[key];
+            }
+        }
+    }
+    newObj.default = obj;
+    if (cache) {
+        cache.set(obj, newObj);
+    }
+    return newObj;
+}
+function TemplateVariableList(props) {
     const [isEditing, setIsEditing] = (0, _react.useState)(false);
+    const [isPin, setIsPin] = (0, _react.useState)(props.initialVariableIsSticky);
     const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
     const { isEditMode  } = (0, _context.useEditMode)();
     const [showVariablesInEditMode, setShowVariablesInEditMode] = (0, _react.useState)(true);
     const showVariables = isEditMode ? showVariablesInEditMode : true;
     const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
+    const scrollTrigger = (0, _material.useScrollTrigger)({
+        disableHysteresis: true
+    });
+    const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
                 anchor: 'right',
                 open: isEditing,
+                PaperProps: {
+                    sx: {
+                        width: '50%'
+                    }
+                },
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
                     onCancel: ()=>{
                         setIsEditing(false);
@@ -72,21 +123,34 @@ function TemplateVariableList() {
                     })
                 ]
             }),
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                display: 'flex',
-                justifyContent: "space-between",
-                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
-                    direction: 'row',
-                    spacing: 2,
-                    children: showVariables && variableDefinitions.map((v)=>{
-                        var ref;
-                        /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
-                            display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variable.TemplateVariable, {
-                                name: v.spec.name
-                            }, v.spec.name)
-                        }, v.spec.name);
-                    })
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.AppBar, {
+                color: 'inherit',
+                position: isSticky ? 'fixed' : 'static',
+                elevation: isSticky ? 4 : 0,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                    display: 'flex',
+                    justifyContent: "space-between",
+                    my: isSticky ? 2 : 0,
+                    ml: isSticky ? 2 : 0,
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+                            direction: 'row',
+                            spacing: 2,
+                            children: showVariables && variableDefinitions.map((v)=>{
+                                var ref;
+                                /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
+                                    display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
+                                    children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variable.TemplateVariable, {
+                                        name: v.spec.name
+                                    }, v.spec.name)
+                                }, v.spec.name);
+                            })
+                        }),
+                        props.initialVariableIsSticky && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.IconButton, {
+                            onClick: ()=>setIsPin(!isPin),
+                            children: isPin ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {}) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOffOutline.default, {})
+                        })
+                    ]
                 })
             })
         ]

package/dist/cjs/components/index.js

@@ -18,6 +18,7 @@ _exportStar(require("./Dashboard"), exports);
 _exportStar(require("./DashboardToolbar"), exports);
 _exportStar(require("./DeletePanelDialog"), exports);
 _exportStar(require("./DeletePanelGroupDialog"), exports);
+_exportStar(require("./DownloadButton"), exports);
 _exportStar(require("./GridLayout"), exports);
 _exportStar(require("./Panel"), exports);
 _exportStar(require("./PanelDrawer"), exports);

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

@@ -80,8 +80,9 @@ function initStore(props) {
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            setDashboard: ({ spec: { panels , layouts  }  })=>{
+            setDashboard: ({ metadata , spec: { panels , layouts  }  })=>{
                 set((state)=>{
+                    state.metadata = metadata;
                     const { panelGroups , panelGroupOrder  } = (0, _panelGroupSlice.convertLayoutsToPanelGroups)(layouts);
                     state.panels = panels;
                     state.panelGroups = panelGroups;

package/dist/cjs/context/DashboardProvider/dashboard-provider-api.js

@@ -37,28 +37,34 @@ _export(exports, {
 });
 const _react = require("react");
 const _dashboardProvider = require("./DashboardProvider");
+const selectEditMode = ({ isEditMode , setEditMode  })=>({
+        isEditMode,
+        setEditMode
+    });
 function useEditMode() {
-    return (0, _dashboardProvider.useDashboardStore)(({ isEditMode , setEditMode  })=>({
-            isEditMode,
-            setEditMode
-        }));
+    return (0, _dashboardProvider.useDashboardStore)(selectEditMode);
 }
+const selectDashboardActions = ({ setDashboard , openAddPanelGroup , openAddPanel  })=>({
+        setDashboard,
+        openAddPanelGroup,
+        openAddPanel
+    });
 function useDashboardActions() {
-    const setDashboard = (0, _dashboardProvider.useDashboardStore)((store)=>store.setDashboard);
-    const openAddPanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanelGroup);
-    const openAddPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanel);
+    const { setDashboard , openAddPanelGroup , openAddPanel  } = (0, _dashboardProvider.useDashboardStore)(selectDashboardActions);
     return {
         setDashboard,
-        openAddPanelGroup,
-        openAddPanel: ()=>openAddPanel(undefined)
+        openAddPanelGroup: ()=>openAddPanelGroup(),
+        openAddPanel: ()=>openAddPanel()
     };
 }
+const selectPanelGroupOrder = (state)=>state.panelGroupOrder;
 function usePanelGroupIds() {
-    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder);
+    return (0, _dashboardProvider.useDashboardStore)(selectPanelGroupOrder);
 }
+const selectPanelGroups = (state)=>state.panelGroups;
 function useListPanelGroups() {
     const panelGroupIds = usePanelGroupIds();
-    const panelGroups = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroups);
+    const panelGroups = (0, _dashboardProvider.useDashboardStore)(selectPanelGroups);
     return (0, _react.useMemo)(()=>{
         return panelGroupIds.map((id)=>{
             const group = panelGroups[id];
@@ -73,18 +79,23 @@ function useListPanelGroups() {
     ]);
 }
 function usePanelGroup(panelGroupId) {
-    const panelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroups[panelGroupId]);
+    const panelGroup = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((state)=>state.panelGroups[panelGroupId], [
+        panelGroupId
+    ]));
     if (panelGroup === undefined) {
         throw new Error(`Panel group with Id ${panelGroupId} was not found`);
     }
     return panelGroup;
 }
+const selectPanelGroupActions = ({ openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  })=>({
+        openEditPanelGroup,
+        deletePanelGroup,
+        openAddPanel,
+        updatePanelGroupLayouts
+    });
 function usePanelGroupActions(panelGroupId) {
     const { moveUp , moveDown  } = useMovePanelGroup(panelGroupId);
-    const openEditPanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openEditPanelGroup);
-    const deletePanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openDeletePanelGroupDialog);
-    const openAddPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanel);
-    const updatePanelGroupLayouts = (0, _dashboardProvider.useDashboardStore)((store)=>store.updatePanelGroupLayouts);
+    const { openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  } = (0, _dashboardProvider.useDashboardStore)(selectPanelGroupActions);
     return {
         openEditPanelGroup: ()=>openEditPanelGroup(panelGroupId),
         deletePanelGroup: ()=>deletePanelGroup(panelGroupId),
@@ -94,13 +105,17 @@ function usePanelGroupActions(panelGroupId) {
         updatePanelGroupLayouts: (itemLayouts)=>updatePanelGroupLayouts(panelGroupId, itemLayouts)
     };
 }
+const selectSwapPanelGroups = (state)=>state.swapPanelGroups;
+const selectPanelGroupsLength = (state)=>state.panelGroupOrder.length;
 /**
  * Returns functions for moving a panel group up or down. A function will be undefined if the panel group can't be
  * moved in that direction.
  */ function useMovePanelGroup(panelGroupId) {
-    const currentIndex = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder.findIndex((id)=>id === panelGroupId));
-    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupOrder.length);
-    const swapPanelGroups = (0, _dashboardProvider.useDashboardStore)((store)=>store.swapPanelGroups);
+    const currentIndex = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>store.panelGroupOrder.findIndex((id)=>id === panelGroupId), [
+        panelGroupId
+    ]));
+    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)(selectPanelGroupsLength);
+    const swapPanelGroups = (0, _dashboardProvider.useDashboardStore)(selectSwapPanelGroups);
     if (currentIndex < 0) {
         throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);
     }
@@ -111,52 +126,66 @@ function usePanelGroupActions(panelGroupId) {
         moveDown: currentIndex < panelGroupsLength - 1 ? moveDown : undefined
     };
 }
+const selectPanelGroupEditor = (state)=>state.panelGroupEditor;
 function usePanelGroupEditor() {
-    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupEditor);
+    return (0, _dashboardProvider.useDashboardStore)(selectPanelGroupEditor);
 }
+const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  })=>({
+        deletePanelGroupDialog,
+        openDeletePanelGroupDialog,
+        closeDeletePanelGroupDialog,
+        deletePanelGroup
+    });
 function useDeletePanelGroupDialog() {
-    return (0, _dashboardProvider.useDashboardStore)(({ deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  })=>({
-            deletePanelGroupDialog,
-            openDeletePanelGroupDialog,
-            closeDeletePanelGroupDialog,
-            deletePanelGroup
-        }));
+    const { deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = (0, _dashboardProvider.useDashboardStore)(selectDeletePanelGroupDialog);
+    return {
+        deletePanelGroupDialog,
+        deletePanelGroup,
+        openDeletePanelGroupDialog,
+        closeDeletePanelGroupDialog: ()=>closeDeletePanelGroupDialog()
+    };
 }
 function usePanel(panelGroupItemId) {
     const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
-    const panel = (0, _dashboardProvider.useDashboardStore)((store)=>{
+    const panel = (0, _dashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>{
         var ref;
         const panelKey = (ref = store.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.itemPanelKeys[panelGroupLayoutId];
         if (panelKey === undefined) return;
         return store.panels[panelKey];
-    });
+    }, [
+        panelGroupId,
+        panelGroupLayoutId
+    ]));
     if (panel === undefined) {
         throw new Error(`Could not find panel for Id ${panelGroupItemId}`);
     }
     return panel;
 }
+const selectPanelActions = ({ openEditPanel , openDeletePanelDialog  })=>({
+        openEditPanel,
+        openDeletePanelDialog
+    });
 function usePanelActions(panelGroupItemId) {
-    const openEditPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openEditPanel);
-    const openDeletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.openDeletePanelDialog);
+    const { openEditPanel , openDeletePanelDialog  } = (0, _dashboardProvider.useDashboardStore)(selectPanelActions);
     return {
         openEditPanel: ()=>openEditPanel(panelGroupItemId),
         openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId)
     };
 }
+const selectPanelEditor = (state)=>state.panelEditor;
 function usePanelEditor() {
-    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelEditor);
+    return (0, _dashboardProvider.useDashboardStore)(selectPanelEditor);
 }
-function useDeletePanelDialog() {
-    const deletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanelDialog);
-    // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself
-    const deletePanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanel);
-    const closeDeletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.closeDeletePanelDialog);
-    return {
+const selectDeletePanelDialog = ({ deletePanelDialog , deletePanel , closeDeletePanelDialog  })=>({
         deletePanelDialog,
         deletePanel,
         closeDeletePanelDialog
-    };
+    });
+function useDeletePanelDialog() {
+    // TODO: Refactor similar to other dialogs/editors so these are on the editor state itself
+    return (0, _dashboardProvider.useDashboardStore)(selectDeletePanelDialog);
 }
+const selectDefaultTimeRange = (state)=>state.defaultTimeRange;
 function useDefaultTimeRange() {
-    return (0, _dashboardProvider.useDashboardStore)((state)=>state.defaultTimeRange);
+    return (0, _dashboardProvider.useDashboardStore)(selectDefaultTimeRange);
 }

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

@@ -20,6 +20,7 @@ Object.defineProperty(exports, "createPanelEditorSlice", {
 });
 const _functions = require("../../utils/functions");
 const _common = require("./common");
+const _panelGroupSlice = require("./panel-group-slice");
 function createPanelEditorSlice() {
     // Return the state creator function for Zustand that uses the panels provided as intitial state
     return (set, get)=>{
@@ -51,14 +52,14 @@ function createPanelEditorSlice() {
                     },
                     applyChanges: (next)=>{
                         const panelDefinititon = createPanelDefinitionFromEditorValues(next);
-                        set((draft)=>{
-                            draft.panels[panelKey] = panelDefinititon;
+                        set((state)=>{
+                            state.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];
+                            const existingGroup = state.panelGroups[panelGroupId];
                             if (existingGroup === undefined) {
                                 throw new Error(`Missing panel group ${panelGroupId}`);
                             }
@@ -72,7 +73,7 @@ function createPanelEditorSlice() {
                             existingGroup.itemLayouts.splice(existingLayoutIdx, 1);
                             delete existingGroup.itemPanelKeys[panelGroupLayoutId];
                             // Add item to the end of the new group
-                            const newGroup = draft.panelGroups[next.groupId];
+                            const newGroup = state.panelGroups[next.groupId];
                             if (newGroup === undefined) {
                                 throw new Error(`Could not find new group ${next.groupId}`);
                             }
@@ -98,13 +99,13 @@ function createPanelEditorSlice() {
                 });
             },
             openAddPanel (panelGroupId) {
-                // If a panel group isn't supplied, add to the first group
+                // If a panel group isn't supplied, add to the first group or create a group if there aren't any
+                let newGroup = undefined;
+                panelGroupId !== null && panelGroupId !== void 0 ? panelGroupId : panelGroupId = get().panelGroupOrder[0];
                 if (panelGroupId === undefined) {
-                    const firstGroupId = get().panelGroupOrder[0];
-                    if (firstGroupId === undefined) {
-                        throw new Error('No panel groups to add a panel to');
-                    }
-                    panelGroupId = firstGroupId;
+                    newGroup = (0, _panelGroupSlice.createEmptyPanelGroup)();
+                    newGroup.title = 'Panel Group';
+                    panelGroupId = newGroup.id;
                 }
                 const editorState = {
                     mode: 'Add',
@@ -119,12 +120,17 @@ function createPanelEditorSlice() {
                     },
                     applyChanges: (next)=>{
                         const panelDef = createPanelDefinitionFromEditorValues(next);
-                        const panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
-                        set((draft)=>{
+                        const uniquePanelKeys = getUniquePanelKeys(get().panels);
+                        let panelKey = (0, _functions.removeWhiteSpacesAndSpecialCharacters)(next.name);
+                        // append count if panel key already exists
+                        if (uniquePanelKeys[panelKey]) {
+                            panelKey += `-${uniquePanelKeys[panelKey]}`;
+                        }
+                        set((state)=>{
                             // Add a panel
-                            draft.panels[panelKey] = panelDef;
+                            state.panels[panelKey] = panelDef;
                             // Also add a panel group item referencing the panel
-                            const group = draft.panelGroups[next.groupId];
+                            const group = state.panelGroups[next.groupId];
                             if (group === undefined) {
                                 throw new Error(`Missing panel group ${next.groupId}`);
                             }
@@ -145,8 +151,12 @@ function createPanelEditorSlice() {
                         });
                     }
                 };
-                // Open the editor with the new state
                 set((state)=>{
+                    // Add the new panel group if one was created for the panel
+                    if (newGroup !== undefined) {
+                        (0, _panelGroupSlice.addPanelGroup)(state, newGroup);
+                    }
+                    // Open the editor with the new state
                     state.panelEditor = editorState;
                 });
             }
@@ -180,3 +190,18 @@ function getYForNewRow(group) {
     }
     return newRowY;
 }
+// Find all the unique panel keys
+// ex: cpu, cpu-1, cpu-2 count as the same panel key since these panels have the same name
+function getUniquePanelKeys(panels) {
+    const uniquePanelKeys = {};
+    Object.keys(panels).forEach((panelKey)=>{
+        const key = panelKey.replace(/-([0-9]+)/, '');
+        const count = uniquePanelKeys[key];
+        if (count) {
+            uniquePanelKeys[key] = count + 1;
+        } else {
+            uniquePanelKeys[key] = 1;
+        }
+    });
+    return uniquePanelKeys;
+}

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

@@ -18,7 +18,7 @@ Object.defineProperty(exports, "createPanelGroupEditorSlice", {
     enumerable: true,
     get: ()=>createPanelGroupEditorSlice
 });
-const _common = require("./common");
+const _panelGroupSlice = require("./panel-group-slice");
 const createPanelGroupEditorSlice = (set, get)=>({
         panelGroupEditor: undefined,
         openAddPanelGroup: ()=>{
@@ -30,15 +30,11 @@ const createPanelGroupEditorSlice = (set, get)=>({
                     isCollapsed: false
                 },
                 applyChanges (next) {
-                    const newGroup = {
-                        id: (0, _common.generateId)(),
-                        itemLayouts: [],
-                        itemPanelKeys: {},
-                        ...next
-                    };
+                    const newGroup = (0, _panelGroupSlice.createEmptyPanelGroup)();
+                    newGroup.title = next.title;
+                    newGroup.isCollapsed = next.isCollapsed;
                     set((draft)=>{
-                        draft.panelGroups[newGroup.id] = newGroup;
-                        draft.panelGroupOrder.unshift(newGroup.id);
+                        (0, _panelGroupSlice.addPanelGroup)(draft, newGroup);
                     });
                 },
                 close () {

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

@@ -22,7 +22,9 @@ function _export(target, all) {
 }
 _export(exports, {
     createPanelGroupSlice: ()=>createPanelGroupSlice,
-    convertLayoutsToPanelGroups: ()=>convertLayoutsToPanelGroups
+    convertLayoutsToPanelGroups: ()=>convertLayoutsToPanelGroups,
+    createEmptyPanelGroup: ()=>createEmptyPanelGroup,
+    addPanelGroup: ()=>addPanelGroup
 });
 const _core = require("@perses-dev/core");
 const _common = require("./common");
@@ -96,3 +98,16 @@ function convertLayoutsToPanelGroups(layouts) {
         panelGroupOrder: panelGroupIdOrder
     };
 }
+function createEmptyPanelGroup() {
+    return {
+        id: (0, _common.generateId)(),
+        title: undefined,
+        isCollapsed: false,
+        itemLayouts: [],
+        itemPanelKeys: {}
+    };
+}
+function addPanelGroup(draft, newGroup) {
+    draft.panelGroups[newGroup.id] = newGroup;
+    draft.panelGroupOrder.unshift(newGroup.id);
+}

package/dist/cjs/context/{TimeRangeProvider.js → TimeRangeProvider/TimeRangeProvider.js}

@@ -27,6 +27,7 @@ _export(exports, {
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _pluginSystem = require("@perses-dev/plugin-system");
+const _queryParams = require("./query-params");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
     var cacheBabelInterop = new WeakMap();
@@ -67,12 +68,11 @@ function _interopRequireWildcard(obj, nodeInterop) {
     return newObj;
 }
 function TimeRangeProvider(props) {
-    const { timeRange , children , setTimeRange  } = props;
-    // TODO: fix no-op, pass paramsEnabled as false in useSetTimeRangeParams as workaround
+    const { initialTimeRange , enabledURLParams , children  } = props;
+    const { timeRange , setTimeRange  } = (0, _queryParams.useSetTimeRangeParams)(initialTimeRange, enabledURLParams);
     const ctx = (0, _react.useMemo)(()=>({
             timeRange,
-            setTimeRange: setTimeRange !== null && setTimeRange !== void 0 ? setTimeRange : ()=>{
-            /* no-op */ }
+            setTimeRange
         }), [
         timeRange,
         setTimeRange

package/dist/cjs/{utils/component-ids.js → context/TimeRangeProvider/index.js}

@@ -14,18 +14,16 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "useId", {
-    enumerable: true,
-    get: ()=>useId
-});
-const _react = require("react");
-function useId(prefix) {
-    if (globalThis.useIdValue === undefined) {
-        globalThis.useIdValue = 0;
-    }
-    const id = (0, _react.useRef)(undefined);
-    if (id.current === undefined) {
-        id.current = `${prefix}-${globalThis.useIdValue++}`;
-    }
-    return id.current;
+_exportStar(require("./TimeRangeProvider"), exports);
+_exportStar(require("./query-params"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
 }

package/dist/cjs/{utils/time-range-params.js → context/TimeRangeProvider/query-params.js}

@@ -106,23 +106,29 @@ function useInitialTimeRange(dashboardDuration) {
         dashboardDuration
     ]);
 }
-function useSetTimeRangeParams(initialTimeRange, paramsEnabled = true) {
+function useSetTimeRangeParams(initialTimeRange, enabledURLParams = true) {
     const [query, setQuery] = (0, _useQueryParams.useQueryParams)(timeRangeQueryConfig);
-    // fallback when app does not want query string as source of truth
+    // determine whether initial param had previously been populated to fix back btn
+    const [paramsLoaded, setParamsLoaded] = (0, _react.useState)(false);
+    // optional fallback when app does not want query string as source of truth
+    // this occurs when enabledURLParams is set to false on TimeRangeProvider
     const [timeRangeState, setTimeRangeState] = (0, _react.useState)(initialTimeRange);
     const { start  } = query;
     (0, _react.useEffect)(()=>{
-        if (paramsEnabled && !start) {
+        // when dashboard loaded with no params, default to dashboard duration
+        if (enabledURLParams && !paramsLoaded && !start) {
             if ((0, _core.isRelativeTimeRange)(initialTimeRange)) {
                 setQuery({
                     start: initialTimeRange.pastDuration,
                     end: undefined
                 });
+                setParamsLoaded(true);
             }
         }
     }, [
         initialTimeRange,
-        paramsEnabled,
+        enabledURLParams,
+        paramsLoaded,
         start,
         setQuery
     ]);
@@ -138,7 +144,7 @@ function useSetTimeRangeParams(initialTimeRange, paramsEnabled = true) {
     }, [
         setQuery
     ]);
-    if (!paramsEnabled) {
+    if (!enabledURLParams) {
         return {
             timeRange: timeRangeState,
             setTimeRange: setTimeRangeState

package/dist/cjs/index.js

@@ -16,7 +16,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./components"), exports);
 _exportStar(require("./context"), exports);
-_exportStar(require("./utils"), exports);
 _exportStar(require("./views"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/test/testDashboard.js

@@ -28,7 +28,7 @@ const testDashboard = {
         version: 0
     },
     spec: {
-        duration: '5m',
+        duration: '30m',
         variables: [
             {
                 kind: 'TextVariable',

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

@@ -25,7 +25,7 @@ const _components = require("@perses-dev/components");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
-    const { dashboardResource , dashboardTitleComponent  } = props;
+    const { dashboardResource , dashboardTitleComponent , initialVariableIsSticky  } = props;
     const { setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
@@ -66,6 +66,7 @@ const DashboardApp = (props)=>{
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
                 dashboardTitleComponent: dashboardTitleComponent,
+                initialVariableIsSticky: initialVariableIsSticky,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),