@perses-dev/dashboards 0.14.0 → 0.15.0

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

@@ -98,10 +98,10 @@ function VariableEditForm({ initialVariableDefinition , onChange , onCancel  })
                         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
                             fullWidth: true,
                             label: "Label",
-                            value: state.label,
+                            value: state.title,
                             onChange: (v)=>{
                                 setState((draft)=>{
-                                    draft.label = v.target.value;
+                                    draft.title = v.target.value;
                                 });
                             }
                         })

package/dist/cjs/components/Variables/VariableEditorForm/variable-editor-form-model.js

@@ -47,7 +47,7 @@ function getInitialState(initialVariableDefinition) {
     }
     return {
         name: initialVariableDefinition.spec.name,
-        label: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.label,
+        title: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.name,
         kind: initialVariableDefinition.kind,
         description: '',
         listVariableFields,
@@ -55,11 +55,11 @@ function getInitialState(initialVariableDefinition) {
     };
 }
 function getVariableDefinitionFromState(state) {
-    const { name , label , kind  } = state;
+    const { name , title , kind  } = state;
     const commonSpec = {
         name,
         display: {
-            label
+            name: title
         }
     };
     if (kind === 'TextVariable') {

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,13 +33,57 @@ 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, {
@@ -72,21 +118,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/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/{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 → context/TimeRangeProvider}/index.js

@@ -14,7 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./time-range-params"), exports);
+_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, {

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
             }),

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

@@ -22,15 +22,13 @@ const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _context = require("../../context");
-const _utils = require("../../utils");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , dashboardTitleComponent , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , dashboardTitleComponent , initialVariableIsSticky , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : '1h';
-    const initialTimeRange = (0, _utils.useInitialTimeRange)(dashboardDuration);
-    const { timeRange , setTimeRange  } = (0, _utils.useSetTimeRangeParams)(initialTimeRange, true);
+    const initialTimeRange = (0, _context.useInitialTimeRange)(dashboardDuration);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -39,8 +37,8 @@ function ViewDashboard(props) {
                 dashboardResource
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-                timeRange: timeRange,
-                setTimeRange: setTimeRange,
+                initialTimeRange: initialTimeRange,
+                enabledURLParams: true,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
@@ -56,7 +54,8 @@ function ViewDashboard(props) {
                             FallbackComponent: _components.ErrorAlert,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboardApp.DashboardApp, {
                                 dashboardResource: dashboardResource,
-                                dashboardTitleComponent: dashboardTitleComponent
+                                dashboardTitleComponent: dashboardTitleComponent,
+                                initialVariableIsSticky: initialVariableIsSticky
                             })
                         })
                     })

package/dist/cjs/views/ViewDashboard/tests/panelGroups.test.js

@@ -28,7 +28,7 @@ function _interopRequireDefault(obj) {
 describe('Panel Groups', ()=>{
     const renderDashboard = ()=>{
         (0, _test.renderWithContext)(/*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TimeRangeProvider, {
-            timeRange: {
+            initialTimeRange: {
                 pastDuration: '30m'
             },
             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {

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

@@ -2,6 +2,7 @@
 export interface DashboardToolbarProps {
     dashboardName: string;
     dashboardTitleComponent?: JSX.Element;
+    initialVariableIsSticky?: boolean;
     onEditButtonClick: () => void;
     onCancelButtonClick: () => void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAsBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAkF5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAsBA,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;CACjC;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAmF5D,CAAC"}

package/dist/components/DashboardToolbar/DashboardToolbar.js

@@ -20,7 +20,7 @@ import { useDashboardActions, useEditMode } from '../../context';
 import { TemplateVariableList } from '../Variables';
 import { TimeRangeControls } from '../TimeRangeControls';
 export const DashboardToolbar = (props)=>{
-    const { dashboardName , dashboardTitleComponent , onEditButtonClick , onCancelButtonClick  } = props;
+    const { dashboardName , dashboardTitleComponent , initialVariableIsSticky , onEditButtonClick , onCancelButtonClick  } = props;
     const { isEditMode , setEditMode  } = useEditMode();
     const { openAddPanelGroup , openAddPanel  } = useDashboardActions();
     const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));
@@ -76,7 +76,9 @@ export const DashboardToolbar = (props)=>{
                     children: [
                         /*#__PURE__*/ _jsx(ErrorBoundary, {
                             FallbackComponent: ErrorAlert,
-                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {})
+                            children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                                initialVariableIsSticky: initialVariableIsSticky
+                            })
                         }),
                         /*#__PURE__*/ _jsxs(Stack, {
                             direction: 'row',
@@ -137,7 +139,9 @@ export const DashboardToolbar = (props)=>{
                     paddingY: 2,
                     children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                         FallbackComponent: ErrorAlert,
-                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {})
+                        children: /*#__PURE__*/ _jsx(TemplateVariableList, {
+                            initialVariableIsSticky: initialVariableIsSticky
+                        })
                     })
                 })
             ]

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../../context';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, dashboardTitleComponent, onEditButtonClick, onCancelButtonClick } = props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSave = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              {dashboardTitle}\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","dashboardTitleComponent","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"sourcesContent":["// Copyright 2022 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { Typography, Stack, Button, Box, useTheme, useMediaQuery } from '@mui/material';\nimport PencilIcon from 'mdi-material-ui/PencilOutline';\nimport AddPanelGroupIcon from 'mdi-material-ui/PlusBoxOutline';\nimport AddPanelIcon from 'mdi-material-ui/ChartBoxPlusOutline';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { useDashboardActions, useEditMode } from '../../context';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\nexport interface DashboardToolbarProps {\n  dashboardName: string;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n  onEditButtonClick: () => void;\n  onCancelButtonClick: () => void;\n}\n\nexport const DashboardToolbar = (props: DashboardToolbarProps) => {\n  const { dashboardName, dashboardTitleComponent, initialVariableIsSticky, onEditButtonClick, onCancelButtonClick } =\n    props;\n\n  const { isEditMode, setEditMode } = useEditMode();\n  const { openAddPanelGroup, openAddPanel } = useDashboardActions();\n  const isLaptopSize = useMediaQuery(useTheme().breakpoints.up('sm'));\n  const dashboardTitle = dashboardTitleComponent ? (\n    dashboardTitleComponent\n  ) : (\n    <Typography variant=\"h2\">{dashboardName}</Typography>\n  );\n\n  const onSave = () => {\n    setEditMode(false);\n  };\n\n  return (\n    <>\n      {isEditMode ? (\n        <Stack spacing={2}>\n          <Box sx={{ backgroundColor: (theme) => theme.palette.primary.light + '20' }}>\n            <Box padding={2} display=\"flex\">\n              {dashboardTitle}\n              <Stack direction=\"row\" spacing={1} sx={{ marginLeft: 'auto' }}>\n                <Button variant=\"contained\" onClick={onSave}>\n                  Save\n                </Button>\n                <Button variant=\"outlined\" onClick={onCancelButtonClick}>\n                  Cancel\n                </Button>\n              </Stack>\n            </Box>\n          </Box>\n          <Box\n            sx={{\n              display: 'flex',\n              width: '100%',\n              alignItems: 'flex-start',\n              padding: (theme) => theme.spacing(2),\n            }}\n          >\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList initialVariableIsSticky={initialVariableIsSticky} />\n            </ErrorBoundary>\n            <Stack direction={'row'} spacing={1} sx={{ marginLeft: 'auto' }}>\n              <Button startIcon={<AddPanelGroupIcon />} onClick={openAddPanelGroup}>\n                Add Panel Group\n              </Button>\n              <Button startIcon={<AddPanelIcon />} onClick={openAddPanel}>\n                Add Panel\n              </Button>\n              <TimeRangeControls />\n            </Stack>\n          </Box>\n        </Stack>\n      ) : (\n        <Stack spacing={2} padding={2}>\n          <Box sx={{ display: 'flex', width: '100%' }}>\n            {dashboardTitle}\n            <Stack direction=\"row\" spacing={2} sx={{ marginLeft: 'auto' }}>\n              <TimeRangeControls />\n              {isLaptopSize && (\n                <Button\n                  variant=\"outlined\"\n                  startIcon={<PencilIcon />}\n                  onClick={onEditButtonClick}\n                  sx={{ marginLeft: 'auto' }}\n                >\n                  Edit\n                </Button>\n              )}\n            </Stack>\n          </Box>\n          <Box paddingY={2}>\n            <ErrorBoundary FallbackComponent={ErrorAlert}>\n              <TemplateVariableList initialVariableIsSticky={initialVariableIsSticky} />\n            </ErrorBoundary>\n          </Box>\n        </Stack>\n      )}\n    </>\n  );\n};\n"],"names":["Typography","Stack","Button","Box","useTheme","useMediaQuery","PencilIcon","AddPanelGroupIcon","AddPanelIcon","ErrorBoundary","ErrorAlert","useDashboardActions","useEditMode","TemplateVariableList","TimeRangeControls","DashboardToolbar","props","dashboardName","dashboardTitleComponent","initialVariableIsSticky","onEditButtonClick","onCancelButtonClick","isEditMode","setEditMode","openAddPanelGroup","openAddPanel","isLaptopSize","breakpoints","up","dashboardTitle","variant","onSave","spacing","sx","backgroundColor","theme","palette","primary","light","padding","display","direction","marginLeft","onClick","width","alignItems","FallbackComponent","startIcon","paddingY"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export interface GridContainerProps {
+    children: React.ReactNode;
+}
+export declare function GridContainer(props: GridContainerProps): JSX.Element;
+//# sourceMappingURL=GridContainer.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"GridContainer.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridContainer.tsx"],"names":[],"mappings":";AAgBA,MAAM,WAAW,kBAAkB;IACjC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAqBtD"}