@perses-dev/dashboards 0.14.0 → 0.16.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/context/DashboardProvider/panel-group-slice.ts"],"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 { getPanelKeyFromRef, LayoutDefinition } from '@perses-dev/core';\nimport { Layout } from 'react-grid-layout';\nimport { StateCreator } from 'zustand';\nimport { generateId, Middleware } from './common';\n\n/**\n * Slice with the state of Panel Groups, as well as any actions that modify only Panel Group state.\n */\nexport interface PanelGroupSlice {\n  /**\n   * Panel groups indexed by their ID.\n   */\n  panelGroups: Record<PanelGroupId, PanelGroupDefinition>;\n\n  /**\n   * An array of panel group IDs, representing their order in the dashboard.\n   */\n  panelGroupOrder: PanelGroupId[];\n\n  /**\n   * Rearrange the order of panel groups by swapping the positions\n   */\n  swapPanelGroups: (xIndex: number, yIndex: number) => void;\n\n  /**\n   * Update the item layouts for a panel group when, for example, a panel is moved or resized.\n   */\n  updatePanelGroupLayouts: (panelGroupId: PanelGroupId, itemLayouts: PanelGroupDefinition['itemLayouts']) => void;\n}\n\nexport type PanelGroupId = number;\n\nexport interface PanelGroupDefinition {\n  id: PanelGroupId;\n  isCollapsed: boolean;\n  title?: string;\n  itemLayouts: PanelGroupItemLayout[];\n  itemPanelKeys: Record<PanelGroupItemLayoutId, string>;\n}\n\nexport interface PanelGroupItemLayout extends Layout {\n  i: PanelGroupItemLayoutId;\n}\n\nexport type PanelGroupItemLayoutId = string;\n\n/**\n * Uniquely identifies an item in a PanelGroup.\n */\nexport interface PanelGroupItemId {\n  panelGroupId: PanelGroupId;\n  panelGroupItemLayoutId: PanelGroupItemLayoutId;\n}\n\n/**\n * Curried function for creating a PanelGroupSlice.\n */\nexport function createPanelGroupSlice(\n  layouts: LayoutDefinition[]\n): StateCreator<PanelGroupSlice, Middleware, [], PanelGroupSlice> {\n  const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n\n  // Return the state creator function for Zustand\n  return (set) => ({\n    panelGroups,\n    panelGroupOrder,\n\n    swapPanelGroups(x, y) {\n      set((state) => {\n        if (x < 0 || x >= state.panelGroupOrder.length || y < 0 || y >= state.panelGroupOrder.length) {\n          throw new Error('index out of bound');\n        }\n        const xPanelGroup = state.panelGroupOrder[x];\n        const yPanelGroup = state.panelGroupOrder[y];\n\n        if (xPanelGroup === undefined || yPanelGroup === undefined) {\n          throw new Error('panel group is undefined');\n        }\n        // assign yPanelGroup to layouts[x] and assign xGroup to layouts[y], swapping two panel groups\n        [state.panelGroupOrder[x], state.panelGroupOrder[y]] = [yPanelGroup, xPanelGroup];\n      });\n    },\n\n    updatePanelGroupLayouts(panelGroupId, itemLayouts) {\n      set((state) => {\n        const group = state.panelGroups[panelGroupId];\n        if (group === undefined) {\n          throw new Error(`Cannot find panel group ${panelGroupId}`);\n        }\n        group.itemLayouts = itemLayouts;\n      });\n    },\n  });\n}\n\nexport function convertLayoutsToPanelGroups(\n  layouts: LayoutDefinition[]\n): Pick<PanelGroupSlice, 'panelGroups' | 'panelGroupOrder'> {\n  // Convert the initial layouts from the JSON\n  const panelGroups: PanelGroupSlice['panelGroups'] = {};\n  const panelGroupIdOrder: PanelGroupSlice['panelGroupOrder'] = [];\n  for (const layout of layouts) {\n    const itemLayouts: PanelGroupDefinition['itemLayouts'] = [];\n    const itemPanelKeys: PanelGroupDefinition['itemPanelKeys'] = {};\n\n    // Split layout information from panel keys to make it easier to update just layouts on move/resize of panels\n    for (const item of layout.spec.items) {\n      const panelGroupLayoutId = generateId().toString();\n      itemLayouts.push({\n        i: panelGroupLayoutId,\n        w: item.width,\n        h: item.height,\n        x: item.x,\n        y: item.y,\n      });\n      itemPanelKeys[panelGroupLayoutId] = getPanelKeyFromRef(item.content);\n    }\n\n    // Create the panel group and keep track of the ID order\n    const panelGroupId = generateId();\n    panelGroups[panelGroupId] = {\n      id: panelGroupId,\n      isCollapsed: layout.spec.display?.collapse?.open === false,\n      title: layout.spec.display?.title,\n      itemLayouts,\n      itemPanelKeys,\n    };\n    panelGroupIdOrder.push(panelGroupId);\n  }\n  return {\n    panelGroups,\n    panelGroupOrder: panelGroupIdOrder,\n  };\n}\n"],"names":["getPanelKeyFromRef","generateId","createPanelGroupSlice","layouts","panelGroups","panelGroupOrder","convertLayoutsToPanelGroups","set","swapPanelGroups","x","y","state","length","Error","xPanelGroup","yPanelGroup","undefined","updatePanelGroupLayouts","panelGroupId","itemLayouts","group","panelGroupIdOrder","layout","itemPanelKeys","item","spec","items","panelGroupLayoutId","toString","push","i","w","width","h","height","content","id","isCollapsed","display","collapse","open","title"],"mappings":"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"}
+{"version":3,"sources":["../../../src/context/DashboardProvider/panel-group-slice.ts"],"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 { getPanelKeyFromRef, LayoutDefinition } from '@perses-dev/core';\nimport { WritableDraft } from 'immer/dist/internal';\nimport { Layout } from 'react-grid-layout';\nimport { StateCreator } from 'zustand';\nimport { generateId, Middleware } from './common';\n\n/**\n * Slice with the state of Panel Groups, as well as any actions that modify only Panel Group state.\n */\nexport interface PanelGroupSlice {\n  /**\n   * Panel groups indexed by their ID.\n   */\n  panelGroups: Record<PanelGroupId, PanelGroupDefinition>;\n\n  /**\n   * An array of panel group IDs, representing their order in the dashboard.\n   */\n  panelGroupOrder: PanelGroupId[];\n\n  /**\n   * Rearrange the order of panel groups by swapping the positions\n   */\n  swapPanelGroups: (xIndex: number, yIndex: number) => void;\n\n  /**\n   * Update the item layouts for a panel group when, for example, a panel is moved or resized.\n   */\n  updatePanelGroupLayouts: (panelGroupId: PanelGroupId, itemLayouts: PanelGroupDefinition['itemLayouts']) => void;\n}\n\nexport type PanelGroupId = number;\n\nexport interface PanelGroupDefinition {\n  id: PanelGroupId;\n  isCollapsed: boolean;\n  title?: string;\n  itemLayouts: PanelGroupItemLayout[];\n  itemPanelKeys: Record<PanelGroupItemLayoutId, string>;\n}\n\nexport interface PanelGroupItemLayout extends Layout {\n  i: PanelGroupItemLayoutId;\n}\n\nexport type PanelGroupItemLayoutId = string;\n\n/**\n * Uniquely identifies an item in a PanelGroup.\n */\nexport interface PanelGroupItemId {\n  panelGroupId: PanelGroupId;\n  panelGroupItemLayoutId: PanelGroupItemLayoutId;\n}\n\n/**\n * Curried function for creating a PanelGroupSlice.\n */\nexport function createPanelGroupSlice(\n  layouts: LayoutDefinition[]\n): StateCreator<PanelGroupSlice, Middleware, [], PanelGroupSlice> {\n  const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);\n\n  // Return the state creator function for Zustand\n  return (set) => ({\n    panelGroups,\n    panelGroupOrder,\n\n    swapPanelGroups(x, y) {\n      set((state) => {\n        if (x < 0 || x >= state.panelGroupOrder.length || y < 0 || y >= state.panelGroupOrder.length) {\n          throw new Error('index out of bound');\n        }\n        const xPanelGroup = state.panelGroupOrder[x];\n        const yPanelGroup = state.panelGroupOrder[y];\n\n        if (xPanelGroup === undefined || yPanelGroup === undefined) {\n          throw new Error('panel group is undefined');\n        }\n        // assign yPanelGroup to layouts[x] and assign xGroup to layouts[y], swapping two panel groups\n        [state.panelGroupOrder[x], state.panelGroupOrder[y]] = [yPanelGroup, xPanelGroup];\n      });\n    },\n\n    updatePanelGroupLayouts(panelGroupId, itemLayouts) {\n      set((state) => {\n        const group = state.panelGroups[panelGroupId];\n        if (group === undefined) {\n          throw new Error(`Cannot find panel group ${panelGroupId}`);\n        }\n        group.itemLayouts = itemLayouts;\n      });\n    },\n  });\n}\n\nexport function convertLayoutsToPanelGroups(\n  layouts: LayoutDefinition[]\n): Pick<PanelGroupSlice, 'panelGroups' | 'panelGroupOrder'> {\n  // Convert the initial layouts from the JSON\n  const panelGroups: PanelGroupSlice['panelGroups'] = {};\n  const panelGroupIdOrder: PanelGroupSlice['panelGroupOrder'] = [];\n  for (const layout of layouts) {\n    const itemLayouts: PanelGroupDefinition['itemLayouts'] = [];\n    const itemPanelKeys: PanelGroupDefinition['itemPanelKeys'] = {};\n\n    // Split layout information from panel keys to make it easier to update just layouts on move/resize of panels\n    for (const item of layout.spec.items) {\n      const panelGroupLayoutId = generateId().toString();\n      itemLayouts.push({\n        i: panelGroupLayoutId,\n        w: item.width,\n        h: item.height,\n        x: item.x,\n        y: item.y,\n      });\n      itemPanelKeys[panelGroupLayoutId] = getPanelKeyFromRef(item.content);\n    }\n\n    // Create the panel group and keep track of the ID order\n    const panelGroupId = generateId();\n    panelGroups[panelGroupId] = {\n      id: panelGroupId,\n      isCollapsed: layout.spec.display?.collapse?.open === false,\n      title: layout.spec.display?.title,\n      itemLayouts,\n      itemPanelKeys,\n    };\n    panelGroupIdOrder.push(panelGroupId);\n  }\n  return {\n    panelGroups,\n    panelGroupOrder: panelGroupIdOrder,\n  };\n}\n\n/**\n * Private helper function for creating an empty panel group.\n */\nexport function createEmptyPanelGroup(): PanelGroupDefinition {\n  return {\n    id: generateId(),\n    title: undefined,\n    isCollapsed: false,\n    itemLayouts: [],\n    itemPanelKeys: {},\n  };\n}\n\n/**\n * Private helper function that modifies panel group state to add a new panel\n */\nexport function addPanelGroup(draft: WritableDraft<PanelGroupSlice>, newGroup: PanelGroupDefinition) {\n  draft.panelGroups[newGroup.id] = newGroup;\n  draft.panelGroupOrder.unshift(newGroup.id);\n}\n"],"names":["getPanelKeyFromRef","generateId","createPanelGroupSlice","layouts","panelGroups","panelGroupOrder","convertLayoutsToPanelGroups","set","swapPanelGroups","x","y","state","length","Error","xPanelGroup","yPanelGroup","undefined","updatePanelGroupLayouts","panelGroupId","itemLayouts","group","panelGroupIdOrder","layout","itemPanelKeys","item","spec","items","panelGroupLayoutId","toString","push","i","w","width","h","height","content","id","isCollapsed","display","collapse","open","title","createEmptyPanelGroup","addPanelGroup","draft","newGroup","unshift"],"mappings":"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"}

package/dist/context/{TimeRangeProvider.d.ts → TimeRangeProvider/TimeRangeProvider.d.ts}

@@ -1,8 +1,8 @@
 import React from 'react';
 import { TimeRangeValue } from '@perses-dev/core';
 export interface TimeRangeProviderProps {
-    timeRange: TimeRangeValue;
-    setTimeRange?: (value: TimeRangeValue) => void;
+    initialTimeRange: TimeRangeValue;
+    enabledURLParams?: boolean;
     children?: React.ReactNode;
 }
 /**

package/dist/context/TimeRangeProvider/TimeRangeProvider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRangeProvider.d.ts","sourceRoot":"","sources":["../../../src/context/TimeRangeProvider/TimeRangeProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAkB,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAIlD,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,cAAc,CAAC;IACjC,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAc9D;AAED;;GAEG;AACH,wBAAgB,qBAAqB;;;EAGpC"}

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

@@ -13,15 +13,15 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useMemo } from 'react';
 import { TimeRangeContext, useTimeRangeContext } from '@perses-dev/plugin-system';
+import { useSetTimeRangeParams } from './query-params';
 /**
  * Provider implementation that supplies the time range state at runtime.
  */ export 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  } = useSetTimeRangeParams(initialTimeRange, enabledURLParams);
     const ctx = useMemo(()=>({
             timeRange,
-            setTimeRange: setTimeRange !== null && setTimeRange !== void 0 ? setTimeRange : ()=>{
-            /* no-op */ }
+            setTimeRange
         }), [
         timeRange,
         setTimeRange

package/dist/context/TimeRangeProvider/TimeRangeProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/TimeRangeProvider/TimeRangeProvider.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 React, { useMemo } from 'react';\nimport { TimeRangeValue } from '@perses-dev/core';\nimport { TimeRangeContext, useTimeRangeContext } from '@perses-dev/plugin-system';\nimport { useSetTimeRangeParams } from './query-params';\n\nexport interface TimeRangeProviderProps {\n  initialTimeRange: TimeRangeValue;\n  enabledURLParams?: boolean;\n  children?: React.ReactNode;\n}\n\n/**\n * Provider implementation that supplies the time range state at runtime.\n */\nexport function TimeRangeProvider(props: TimeRangeProviderProps) {\n  const { initialTimeRange, enabledURLParams, children } = props;\n\n  const { timeRange, setTimeRange } = useSetTimeRangeParams(initialTimeRange, enabledURLParams);\n\n  const ctx = useMemo(\n    () => ({\n      timeRange,\n      setTimeRange,\n    }),\n    [timeRange, setTimeRange]\n  );\n\n  return <TimeRangeContext.Provider value={ctx}>{children}</TimeRangeContext.Provider>;\n}\n\n/**\n * Internal version of time range hook to get all supported values\n */\nexport function useDashboardTimeRange() {\n  const { timeRange, setTimeRange } = useTimeRangeContext();\n  return { timeRange, setTimeRange };\n}\n"],"names":["React","useMemo","TimeRangeContext","useTimeRangeContext","useSetTimeRangeParams","TimeRangeProvider","props","initialTimeRange","enabledURLParams","children","timeRange","setTimeRange","ctx","Provider","value","useDashboardTimeRange"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,OAAOA,KAAK,IAAIC,OAAO,QAAQ,OAAO,CAAC;AAEvC,SAASC,gBAAgB,EAAEC,mBAAmB,QAAQ,2BAA2B,CAAC;AAClF,SAASC,qBAAqB,QAAQ,gBAAgB,CAAC;AAQvD;;CAEC,GACD,OAAO,SAASC,iBAAiB,CAACC,KAA6B,EAAE;IAC/D,MAAM,EAAEC,gBAAgB,CAAA,EAAEC,gBAAgB,CAAA,EAAEC,QAAQ,CAAA,EAAE,GAAGH,KAAK,AAAC;IAE/D,MAAM,EAAEI,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGP,qBAAqB,CAACG,gBAAgB,EAAEC,gBAAgB,CAAC,AAAC;IAE9F,MAAMI,GAAG,GAAGX,OAAO,CACjB,IAAO,CAAA;YACLS,SAAS;YACTC,YAAY;SACb,CAAA,AAAC,EACF;QAACD,SAAS;QAAEC,YAAY;KAAC,CAC1B,AAAC;IAEF,qBAAO,KAACT,gBAAgB,CAACW,QAAQ;QAACC,KAAK,EAAEF,GAAG;kBAAGH,QAAQ;MAA6B,CAAC;AACvF,CAAC;AAED;;CAEC,GACD,OAAO,SAASM,qBAAqB,GAAG;IACtC,MAAM,EAAEL,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGR,mBAAmB,EAAE,AAAC;IAC1D,OAAO;QAAEO,SAAS;QAAEC,YAAY;KAAE,CAAC;AACrC,CAAC"}

package/dist/context/TimeRangeProvider/index.d.ts

@@ -0,0 +1,3 @@
+export * from './TimeRangeProvider';
+export * from './query-params';
+//# sourceMappingURL=index.d.ts.map

package/dist/context/TimeRangeProvider/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/context/TimeRangeProvider/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}

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

@@ -10,18 +10,7 @@
 // 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.
-import { useRef } from 'react';
-/**
- * Generates a unique (stable) ID for a component. Should be replaced with React.useId once we support only React 18.
- */ export function useId(prefix) {
-    if (globalThis.useIdValue === undefined) {
-        globalThis.useIdValue = 0;
-    }
-    const id = useRef(undefined);
-    if (id.current === undefined) {
-        id.current = `${prefix}-${globalThis.useIdValue++}`;
-    }
-    return id.current;
-}
+export * from './TimeRangeProvider';
+export * from './query-params';
 
-//# sourceMappingURL=component-ids.js.map
+//# sourceMappingURL=index.js.map

package/dist/context/TimeRangeProvider/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/TimeRangeProvider/index.ts"],"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\nexport * from './TimeRangeProvider';\nexport * from './query-params';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC"}

package/dist/{utils/time-range-params.d.ts → context/TimeRangeProvider/query-params.d.ts}

@@ -19,7 +19,7 @@ export declare const timeRangeQueryConfig: {
  */
 export declare function useInitialTimeRange(dashboardDuration: DurationString): TimeRangeValue;
 /**
- * Returns time range getter and setter, set paramsEnabled to false to disable query string serialization
+ * Returns time range getter and setter, set enabledURLParams to false to disable query string serialization
  */
-export declare function useSetTimeRangeParams(initialTimeRange: TimeRangeValue, paramsEnabled?: boolean): TimeRange;
-//# sourceMappingURL=time-range-params.d.ts.map
+export declare function useSetTimeRangeParams(initialTimeRange: TimeRangeValue, enabledURLParams?: boolean): TimeRange;
+//# sourceMappingURL=query-params.d.ts.map

package/dist/context/TimeRangeProvider/query-params.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"query-params.d.ts","sourceRoot":"","sources":["../../../src/context/TimeRangeProvider/query-params.ts"],"names":[],"mappings":"AAcA,OAAO,EAAkB,gBAAgB,EAAE,MAAM,kBAAkB,CAAC;AAEpE,OAAO,EACL,cAAc,EAGd,cAAc,EAEf,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAEtD,oBAAY,eAAe,GAAG,IAAI,GAAG,cAAc,GAAG,IAAI,GAAG,SAAS,CAAC;AA2BvE,wBAAgB,oBAAoB,CAAC,eAAe,EAAE,eAAe,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAWhG;AAGD,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,MAAM,GAAG,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,SAAS,GACtD,IAAI,GAAG,cAAc,GAAG,IAAI,GAAG,SAAS,CAI1C;AAED;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,gBAAgB,CAAC,eAAe,EAAE,eAAe,CAQ7E,CAAC;AAEF,eAAO,MAAM,oBAAoB;;;CAGhC,CAAC;AAEF;;;GAGG;AACH,wBAAgB,mBAAmB,CAAC,iBAAiB,EAAE,cAAc,GAAG,cAAc,CAgBrF;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,gBAAgB,EAAE,cAAc,EAAE,gBAAgB,UAAO,GAAG,SAAS,CAqC1G"}

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

@@ -95,24 +95,30 @@ export const timeRangeQueryConfig = {
     ]);
 }
 /**
- * Returns time range getter and setter, set paramsEnabled to false to disable query string serialization
- */ export function useSetTimeRangeParams(initialTimeRange, paramsEnabled = true) {
+ * Returns time range getter and setter, set enabledURLParams to false to disable query string serialization
+ */ export function useSetTimeRangeParams(initialTimeRange, enabledURLParams = true) {
     const [query, setQuery] = 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] = 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] = useState(initialTimeRange);
     const { start  } = query;
     useEffect(()=>{
-        if (paramsEnabled && !start) {
+        // when dashboard loaded with no params, default to dashboard duration
+        if (enabledURLParams && !paramsLoaded && !start) {
             if (isRelativeTimeRange(initialTimeRange)) {
                 setQuery({
                     start: initialTimeRange.pastDuration,
                     end: undefined
                 });
+                setParamsLoaded(true);
             }
         }
     }, [
         initialTimeRange,
-        paramsEnabled,
+        enabledURLParams,
+        paramsLoaded,
         start,
         setQuery
     ]);
@@ -128,7 +134,7 @@ export const timeRangeQueryConfig = {
     }, [
         setQuery
     ]);
-    if (!paramsEnabled) {
+    if (!enabledURLParams) {
         return {
             timeRange: timeRangeState,
             setTimeRange: setTimeRangeState
@@ -140,4 +146,4 @@ export const timeRangeQueryConfig = {
     };
 }
 
-//# sourceMappingURL=time-range-params.js.map
+//# sourceMappingURL=query-params.js.map

package/dist/context/TimeRangeProvider/query-params.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/context/TimeRangeProvider/query-params.ts"],"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 { useMemo, useCallback, useEffect, useState } from 'react';\nimport { useQueryParams, QueryParamConfig } from 'use-query-params';\nimport { getUnixTime, isDate } from 'date-fns';\nimport {\n  TimeRangeValue,\n  isRelativeTimeRange,\n  isDurationString,\n  DurationString,\n  AbsoluteTimeRange,\n} from '@perses-dev/core';\nimport { TimeRange } from '@perses-dev/plugin-system';\n\nexport type TimeOptionValue = Date | DurationString | null | undefined;\n\n/* Interprets an encoded string and returns either the string or null/undefined if not available */\nfunction getEncodedValue(\n  input: string | Array<string | null> | null | undefined,\n  allowEmptyString?: boolean\n): string | null | undefined {\n  if (input == null) {\n    return input;\n  }\n  // '' or []\n  if (input.length === 0 && (!allowEmptyString || (allowEmptyString && input !== ''))) {\n    return null;\n  }\n\n  const str = input instanceof Array ? input[0] : input;\n  if (str == null) {\n    return str;\n  }\n  if (!allowEmptyString && str === '') {\n    return null;\n  }\n\n  return str;\n}\n\n/* Encodes individual TimeRangeValue as a string, depends on whether start is relative or absolute */\nexport function encodeTimeRangeValue(timeOptionValue: TimeOptionValue): string | null | undefined {\n  if (!timeOptionValue) {\n    return timeOptionValue;\n  }\n\n  if (typeof timeOptionValue === 'string') {\n    if (isDurationString(timeOptionValue)) {\n      return timeOptionValue;\n    }\n  }\n  return (getUnixTime(timeOptionValue) * 1000).toString();\n}\n\n/* Converts param input to supported relative or absolute time range format */\nexport function decodeTimeRangeValue(\n  input: string | Array<string | null> | null | undefined\n): Date | DurationString | null | undefined {\n  const paramString = getEncodedValue(input);\n  if (paramString == null) return paramString;\n  return isDurationString(paramString) ? paramString : new Date(Number(paramString));\n}\n\n/**\n * Custom TimeRangeValue param type\n * See: https://github.com/pbeshai/use-query-params/tree/master/packages/serialize-query-params#param-types\n */\nexport const TimeRangeParam: QueryParamConfig<TimeOptionValue, TimeOptionValue> = {\n  encode: encodeTimeRangeValue,\n  decode: decodeTimeRangeValue,\n  equals: (valueA: TimeOptionValue, valueB: TimeOptionValue) => {\n    if (valueA === valueB) return true;\n    if (valueA == null || valueB == null) return valueA === valueB;\n    return valueA.valueOf() === valueB.valueOf();\n  },\n};\n\nexport const timeRangeQueryConfig = {\n  start: TimeRangeParam,\n  end: TimeRangeParam,\n};\n\n/**\n * Gets the initial time range taking into account URL params and dashboard JSON duration\n * Sets start query param if it is empty on page load\n */\nexport function useInitialTimeRange(dashboardDuration: DurationString): TimeRangeValue {\n  const [query] = useQueryParams(timeRangeQueryConfig);\n  const { start, end } = query;\n  return useMemo(() => {\n    let initialTimeRange: TimeRangeValue = { pastDuration: dashboardDuration };\n    if (!start) {\n      return initialTimeRange;\n    }\n    const startStr = start.toString();\n    if (isDurationString(startStr)) {\n      initialTimeRange = { pastDuration: startStr };\n    } else if (isDate(start) && isDate(end)) {\n      initialTimeRange = { start: start, end: end } as AbsoluteTimeRange;\n    }\n    return initialTimeRange;\n  }, [start, end, dashboardDuration]);\n}\n\n/**\n * Returns time range getter and setter, set enabledURLParams to false to disable query string serialization\n */\nexport function useSetTimeRangeParams(initialTimeRange: TimeRangeValue, enabledURLParams = true): TimeRange {\n  const [query, setQuery] = useQueryParams(timeRangeQueryConfig);\n\n  // determine whether initial param had previously been populated to fix back btn\n  const [paramsLoaded, setParamsLoaded] = useState<boolean>(false);\n\n  // optional fallback when app does not want query string as source of truth\n  // this occurs when enabledURLParams is set to false on TimeRangeProvider\n  const [timeRangeState, setTimeRangeState] = useState<TimeRangeValue>(initialTimeRange);\n\n  const { start } = query;\n\n  useEffect(() => {\n    // when dashboard loaded with no params, default to dashboard duration\n    if (enabledURLParams && !paramsLoaded && !start) {\n      if (isRelativeTimeRange(initialTimeRange)) {\n        setQuery({ start: initialTimeRange.pastDuration, end: undefined });\n        setParamsLoaded(true);\n      }\n    }\n  }, [initialTimeRange, enabledURLParams, paramsLoaded, start, setQuery]);\n\n  const setTimeRange: TimeRange['setTimeRange'] = useCallback(\n    (value: TimeRangeValue) => {\n      if (isRelativeTimeRange(value)) {\n        setQuery({ start: value.pastDuration, end: undefined });\n      } else {\n        setQuery(value);\n      }\n    },\n    [setQuery]\n  );\n\n  if (!enabledURLParams) {\n    return { timeRange: timeRangeState, setTimeRange: setTimeRangeState };\n  }\n  return { timeRange: initialTimeRange, setTimeRange: setTimeRange };\n}\n"],"names":["useMemo","useCallback","useEffect","useState","useQueryParams","getUnixTime","isDate","isRelativeTimeRange","isDurationString","getEncodedValue","input","allowEmptyString","length","str","Array","encodeTimeRangeValue","timeOptionValue","toString","decodeTimeRangeValue","paramString","Date","Number","TimeRangeParam","encode","decode","equals","valueA","valueB","valueOf","timeRangeQueryConfig","start","end","useInitialTimeRange","dashboardDuration","query","initialTimeRange","pastDuration","startStr","useSetTimeRangeParams","enabledURLParams","setQuery","paramsLoaded","setParamsLoaded","timeRangeState","setTimeRangeState","undefined","setTimeRange","value","timeRange"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,SAASA,OAAO,EAAEC,WAAW,EAAEC,SAAS,EAAEC,QAAQ,QAAQ,OAAO,CAAC;AAClE,SAASC,cAAc,QAA0B,kBAAkB,CAAC;AACpE,SAASC,WAAW,EAAEC,MAAM,QAAQ,UAAU,CAAC;AAC/C,SAEEC,mBAAmB,EACnBC,gBAAgB,QAGX,kBAAkB,CAAC;AAK1B,iGAAiG,GACjG,SAASC,eAAe,CACtBC,KAAuD,EACvDC,gBAA0B,EACC;IAC3B,IAAID,KAAK,IAAI,IAAI,EAAE;QACjB,OAAOA,KAAK,CAAC;IACf,CAAC;IACD,WAAW;IACX,IAAIA,KAAK,CAACE,MAAM,KAAK,CAAC,IAAK,CAAA,CAACD,gBAAgB,IAAKA,gBAAgB,IAAID,KAAK,KAAK,EAAE,AAAC,CAAA,AAAC,EAAE;QACnF,OAAO,IAAI,CAAC;IACd,CAAC;IAED,MAAMG,GAAG,GAAGH,KAAK,YAAYI,KAAK,GAAGJ,KAAK,CAAC,CAAC,CAAC,GAAGA,KAAK,AAAC;IACtD,IAAIG,GAAG,IAAI,IAAI,EAAE;QACf,OAAOA,GAAG,CAAC;IACb,CAAC;IACD,IAAI,CAACF,gBAAgB,IAAIE,GAAG,KAAK,EAAE,EAAE;QACnC,OAAO,IAAI,CAAC;IACd,CAAC;IAED,OAAOA,GAAG,CAAC;AACb,CAAC;AAED,mGAAmG,GACnG,OAAO,SAASE,oBAAoB,CAACC,eAAgC,EAA6B;IAChG,IAAI,CAACA,eAAe,EAAE;QACpB,OAAOA,eAAe,CAAC;IACzB,CAAC;IAED,IAAI,OAAOA,eAAe,KAAK,QAAQ,EAAE;QACvC,IAAIR,gBAAgB,CAACQ,eAAe,CAAC,EAAE;YACrC,OAAOA,eAAe,CAAC;QACzB,CAAC;IACH,CAAC;IACD,OAAO,AAACX,CAAAA,WAAW,CAACW,eAAe,CAAC,GAAG,IAAI,CAAA,CAAEC,QAAQ,EAAE,CAAC;AAC1D,CAAC;AAED,4EAA4E,GAC5E,OAAO,SAASC,oBAAoB,CAClCR,KAAuD,EACb;IAC1C,MAAMS,WAAW,GAAGV,eAAe,CAACC,KAAK,CAAC,AAAC;IAC3C,IAAIS,WAAW,IAAI,IAAI,EAAE,OAAOA,WAAW,CAAC;IAC5C,OAAOX,gBAAgB,CAACW,WAAW,CAAC,GAAGA,WAAW,GAAG,IAAIC,IAAI,CAACC,MAAM,CAACF,WAAW,CAAC,CAAC,CAAC;AACrF,CAAC;AAED;;;CAGC,GACD,OAAO,MAAMG,cAAc,GAAuD;IAChFC,MAAM,EAAER,oBAAoB;IAC5BS,MAAM,EAAEN,oBAAoB;IAC5BO,MAAM,EAAE,CAACC,MAAuB,EAAEC,MAAuB,GAAK;QAC5D,IAAID,MAAM,KAAKC,MAAM,EAAE,OAAO,IAAI,CAAC;QACnC,IAAID,MAAM,IAAI,IAAI,IAAIC,MAAM,IAAI,IAAI,EAAE,OAAOD,MAAM,KAAKC,MAAM,CAAC;QAC/D,OAAOD,MAAM,CAACE,OAAO,EAAE,KAAKD,MAAM,CAACC,OAAO,EAAE,CAAC;IAC/C,CAAC;CACF,CAAC;AAEF,OAAO,MAAMC,oBAAoB,GAAG;IAClCC,KAAK,EAAER,cAAc;IACrBS,GAAG,EAAET,cAAc;CACpB,CAAC;AAEF;;;CAGC,GACD,OAAO,SAASU,mBAAmB,CAACC,iBAAiC,EAAkB;IACrF,MAAM,CAACC,KAAK,CAAC,GAAG9B,cAAc,CAACyB,oBAAoB,CAAC,AAAC;IACrD,MAAM,EAAEC,KAAK,CAAA,EAAEC,GAAG,CAAA,EAAE,GAAGG,KAAK,AAAC;IAC7B,OAAOlC,OAAO,CAAC,IAAM;QACnB,IAAImC,gBAAgB,GAAmB;YAAEC,YAAY,EAAEH,iBAAiB;SAAE,AAAC;QAC3E,IAAI,CAACH,KAAK,EAAE;YACV,OAAOK,gBAAgB,CAAC;QAC1B,CAAC;QACD,MAAME,QAAQ,GAAGP,KAAK,CAACb,QAAQ,EAAE,AAAC;QAClC,IAAIT,gBAAgB,CAAC6B,QAAQ,CAAC,EAAE;YAC9BF,gBAAgB,GAAG;gBAAEC,YAAY,EAAEC,QAAQ;aAAE,CAAC;QAChD,OAAO,IAAI/B,MAAM,CAACwB,KAAK,CAAC,IAAIxB,MAAM,CAACyB,GAAG,CAAC,EAAE;YACvCI,gBAAgB,GAAG;gBAAEL,KAAK,EAAEA,KAAK;gBAAEC,GAAG,EAAEA,GAAG;aAAE,AAAqB,CAAC;QACrE,CAAC;QACD,OAAOI,gBAAgB,CAAC;IAC1B,CAAC,EAAE;QAACL,KAAK;QAAEC,GAAG;QAAEE,iBAAiB;KAAC,CAAC,CAAC;AACtC,CAAC;AAED;;CAEC,GACD,OAAO,SAASK,qBAAqB,CAACH,gBAAgC,EAAEI,gBAAgB,GAAG,IAAI,EAAa;IAC1G,MAAM,CAACL,KAAK,EAAEM,QAAQ,CAAC,GAAGpC,cAAc,CAACyB,oBAAoB,CAAC,AAAC;IAE/D,gFAAgF;IAChF,MAAM,CAACY,YAAY,EAAEC,eAAe,CAAC,GAAGvC,QAAQ,CAAU,KAAK,CAAC,AAAC;IAEjE,2EAA2E;IAC3E,yEAAyE;IACzE,MAAM,CAACwC,cAAc,EAAEC,iBAAiB,CAAC,GAAGzC,QAAQ,CAAiBgC,gBAAgB,CAAC,AAAC;IAEvF,MAAM,EAAEL,KAAK,CAAA,EAAE,GAAGI,KAAK,AAAC;IAExBhC,SAAS,CAAC,IAAM;QACd,sEAAsE;QACtE,IAAIqC,gBAAgB,IAAI,CAACE,YAAY,IAAI,CAACX,KAAK,EAAE;YAC/C,IAAIvB,mBAAmB,CAAC4B,gBAAgB,CAAC,EAAE;gBACzCK,QAAQ,CAAC;oBAAEV,KAAK,EAAEK,gBAAgB,CAACC,YAAY;oBAAEL,GAAG,EAAEc,SAAS;iBAAE,CAAC,CAAC;gBACnEH,eAAe,CAAC,IAAI,CAAC,CAAC;YACxB,CAAC;QACH,CAAC;IACH,CAAC,EAAE;QAACP,gBAAgB;QAAEI,gBAAgB;QAAEE,YAAY;QAAEX,KAAK;QAAEU,QAAQ;KAAC,CAAC,CAAC;IAExE,MAAMM,YAAY,GAA8B7C,WAAW,CACzD,CAAC8C,KAAqB,GAAK;QACzB,IAAIxC,mBAAmB,CAACwC,KAAK,CAAC,EAAE;YAC9BP,QAAQ,CAAC;gBAAEV,KAAK,EAAEiB,KAAK,CAACX,YAAY;gBAAEL,GAAG,EAAEc,SAAS;aAAE,CAAC,CAAC;QAC1D,OAAO;YACLL,QAAQ,CAACO,KAAK,CAAC,CAAC;QAClB,CAAC;IACH,CAAC,EACD;QAACP,QAAQ;KAAC,CACX,AAAC;IAEF,IAAI,CAACD,gBAAgB,EAAE;QACrB,OAAO;YAAES,SAAS,EAAEL,cAAc;YAAEG,YAAY,EAAEF,iBAAiB;SAAE,CAAC;IACxE,CAAC;IACD,OAAO;QAAEI,SAAS,EAAEb,gBAAgB;QAAEW,YAAY,EAAEA,YAAY;KAAE,CAAC;AACrE,CAAC"}

package/dist/index.d.ts

@@ -1,5 +1,4 @@
 export * from './components';
 export * from './context';
-export * from './utils';
 export * from './views';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/index.js

@@ -12,7 +12,6 @@
 // limitations under the License.
 export * from './components';
 export * from './context';
-export * from './utils';
 export * from './views';
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"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\nexport * from './components';\nexport * from './context';\nexport * from './utils';\nexport * from './views';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"sources":["../src/index.ts"],"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\nexport * from './components';\nexport * from './context';\nexport * from './views';\n"],"names":[],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC"}

package/dist/test/testDashboard.js

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

package/dist/test/testDashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test/testDashboard.ts"],"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 { DashboardResource } from '@perses-dev/core';\n\nconst testDashboard: DashboardResource = {\n  kind: 'Dashboard',\n  metadata: {\n    name: 'Node Stats',\n    project: 'perses',\n    created_at: '2021-11-09',\n    updated_at: '2021-11-09',\n    version: 0,\n  },\n  spec: {\n    duration: '5m',\n    variables: [\n      {\n        kind: 'TextVariable',\n        spec: {\n          name: 'job',\n          value: 'node',\n        },\n      },\n      {\n        kind: 'TextVariable',\n        spec: {\n          name: 'instance',\n          value: 'demo.do.prometheus.io:9100',\n        },\n      },\n      {\n        kind: 'TextVariable',\n        spec: {\n          name: 'interval',\n          value: '1m',\n        },\n      },\n    ],\n    panels: {\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'CPU' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {\n              queries: [\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query:\n                          'avg without (cpu)(rate(node_cpu_seconds_total{job=\"node\",instance=\"$instance\",mode!=\"idle\"}[$interval]))',\n                      },\n                    },\n                  },\n                },\n              ],\n              unit: { kind: '%' },\n            },\n          },\n        },\n      },\n      memory: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'Memory' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {\n              queries: [\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query:\n                          'node_memory_MemTotal_bytes{job=\"node\",instance=\"$instance\"} - node_memory_MemFree_bytes{job=\"node\",instance=\"$instance\"} - node_memory_Buffers_bytes{job=\"node\",instance=\"$instance\"} - node_memory_Cached_bytes{job=\"node\",instance=\"$instance\"}',\n                      },\n                    },\n                  },\n                },\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query: 'node_memory_Buffers_bytes{job=\"node\",instance=\"$instance\"}',\n                      },\n                    },\n                  },\n                },\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query: 'node_memory_Cached_bytes{job=\"node\",instance=\"$instance\"}',\n                      },\n                    },\n                  },\n                },\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query: 'node_memory_MemFree_bytes{job=\"node\",instance=\"$instance\"}',\n                      },\n                    },\n                  },\n                },\n              ],\n              unit: { kind: 'Bytes' },\n            },\n          },\n        },\n      },\n      // This panel is referenced in more than one layout below\n      diskIO: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'Disk I/O Utilization' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {\n              queries: [\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query:\n                          'rate(node_disk_io_time_seconds_total{job=\"node\",instance=\"$instance\",device!~\"^(md\\\\\\\\d+$|dm-)\"}[$interval])',\n                      },\n                    },\n                  },\n                },\n              ],\n              unit: { kind: 'Percent' },\n            },\n          },\n        },\n      },\n      filesystemFullness: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'Filesystem Fullness' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {\n              queries: [\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query:\n                          '1 - node_filesystem_free_bytes{job=\"node\",instance=\"$instance\",fstype!=\"rootfs\",mountpoint!~\"/(run|var).*\",mountpoint!=\"\"} / node_filesystem_size_bytes{job=\"node\",instance=\"$instance\"}',\n                      },\n                    },\n                  },\n                },\n              ],\n              unit: { kind: 'Percent' },\n            },\n          },\n        },\n      },\n    },\n    layouts: [\n      // Regular Title, no collapse enabled\n      {\n        kind: 'Grid',\n        spec: {\n          display: {\n            title: 'CPU Stats',\n            collapse: {\n              open: true,\n            },\n          },\n          items: [\n            // First Row\n            {\n              x: 0,\n              y: 0,\n              width: 12,\n              height: 4,\n              content: { $ref: '#/spec/panels/cpu' },\n            },\n            {\n              x: 0,\n              y: 5,\n              width: 6,\n              height: 2,\n              content: { $ref: '#/spec/panels/diskIO' },\n            },\n          ],\n        },\n      },\n      // No title,\n      {\n        kind: 'Grid',\n        spec: {\n          items: [\n            {\n              x: 0,\n              y: 0,\n              width: 6,\n              height: 2,\n              content: { $ref: '#/spec/panels/diskIO' },\n            },\n            {\n              x: 8,\n              y: 0,\n              width: 8,\n              height: 3,\n              content: { $ref: '#/spec/panels/memory' },\n            },\n          ],\n        },\n      },\n      // Collapsed\n      {\n        kind: 'Grid',\n        spec: {\n          display: {\n            title: 'Disk Stats',\n            collapse: {\n              open: false,\n            },\n          },\n          items: [\n            {\n              x: 18,\n              y: 0,\n              width: 6,\n              height: 2,\n              content: { $ref: '#/spec/panels/filesystemFullness' },\n            },\n          ],\n        },\n      },\n    ],\n  },\n};\n\nexport default testDashboard;\n"],"names":["testDashboard","kind","metadata","name","project","created_at","updated_at","version","spec","duration","variables","value","panels","cpu","display","plugin","queries","query","unit","memory","diskIO","filesystemFullness","layouts","title","collapse","open","items","x","y","width","height","content","$ref"],"mappings":"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"}
+{"version":3,"sources":["../../src/test/testDashboard.ts"],"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 { DashboardResource } from '@perses-dev/core';\n\nconst testDashboard: DashboardResource = {\n  kind: 'Dashboard',\n  metadata: {\n    name: 'Node Stats',\n    project: 'perses',\n    created_at: '2021-11-09',\n    updated_at: '2021-11-09',\n    version: 0,\n  },\n  spec: {\n    duration: '30m',\n    variables: [\n      {\n        kind: 'TextVariable',\n        spec: {\n          name: 'job',\n          value: 'node',\n        },\n      },\n      {\n        kind: 'TextVariable',\n        spec: {\n          name: 'instance',\n          value: 'demo.do.prometheus.io:9100',\n        },\n      },\n      {\n        kind: 'TextVariable',\n        spec: {\n          name: 'interval',\n          value: '1m',\n        },\n      },\n    ],\n    panels: {\n      cpu: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'CPU' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {\n              queries: [\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query:\n                          'avg without (cpu)(rate(node_cpu_seconds_total{job=\"node\",instance=\"$instance\",mode!=\"idle\"}[$interval]))',\n                      },\n                    },\n                  },\n                },\n              ],\n              unit: { kind: '%' },\n            },\n          },\n        },\n      },\n      memory: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'Memory' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {\n              queries: [\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query:\n                          'node_memory_MemTotal_bytes{job=\"node\",instance=\"$instance\"} - node_memory_MemFree_bytes{job=\"node\",instance=\"$instance\"} - node_memory_Buffers_bytes{job=\"node\",instance=\"$instance\"} - node_memory_Cached_bytes{job=\"node\",instance=\"$instance\"}',\n                      },\n                    },\n                  },\n                },\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query: 'node_memory_Buffers_bytes{job=\"node\",instance=\"$instance\"}',\n                      },\n                    },\n                  },\n                },\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query: 'node_memory_Cached_bytes{job=\"node\",instance=\"$instance\"}',\n                      },\n                    },\n                  },\n                },\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query: 'node_memory_MemFree_bytes{job=\"node\",instance=\"$instance\"}',\n                      },\n                    },\n                  },\n                },\n              ],\n              unit: { kind: 'Bytes' },\n            },\n          },\n        },\n      },\n      // This panel is referenced in more than one layout below\n      diskIO: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'Disk I/O Utilization' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {\n              queries: [\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query:\n                          'rate(node_disk_io_time_seconds_total{job=\"node\",instance=\"$instance\",device!~\"^(md\\\\\\\\d+$|dm-)\"}[$interval])',\n                      },\n                    },\n                  },\n                },\n              ],\n              unit: { kind: 'Percent' },\n            },\n          },\n        },\n      },\n      filesystemFullness: {\n        kind: 'Panel',\n        spec: {\n          display: { name: 'Filesystem Fullness' },\n          plugin: {\n            kind: 'TimeSeriesChart',\n            spec: {\n              queries: [\n                {\n                  kind: 'TimeSeriesQuery',\n                  spec: {\n                    plugin: {\n                      kind: 'PrometheusTimeSeriesQuery',\n                      spec: {\n                        query:\n                          '1 - node_filesystem_free_bytes{job=\"node\",instance=\"$instance\",fstype!=\"rootfs\",mountpoint!~\"/(run|var).*\",mountpoint!=\"\"} / node_filesystem_size_bytes{job=\"node\",instance=\"$instance\"}',\n                      },\n                    },\n                  },\n                },\n              ],\n              unit: { kind: 'Percent' },\n            },\n          },\n        },\n      },\n    },\n    layouts: [\n      // Regular Title, no collapse enabled\n      {\n        kind: 'Grid',\n        spec: {\n          display: {\n            title: 'CPU Stats',\n            collapse: {\n              open: true,\n            },\n          },\n          items: [\n            // First Row\n            {\n              x: 0,\n              y: 0,\n              width: 12,\n              height: 4,\n              content: { $ref: '#/spec/panels/cpu' },\n            },\n            {\n              x: 0,\n              y: 5,\n              width: 6,\n              height: 2,\n              content: { $ref: '#/spec/panels/diskIO' },\n            },\n          ],\n        },\n      },\n      // No title,\n      {\n        kind: 'Grid',\n        spec: {\n          items: [\n            {\n              x: 0,\n              y: 0,\n              width: 6,\n              height: 2,\n              content: { $ref: '#/spec/panels/diskIO' },\n            },\n            {\n              x: 8,\n              y: 0,\n              width: 8,\n              height: 3,\n              content: { $ref: '#/spec/panels/memory' },\n            },\n          ],\n        },\n      },\n      // Collapsed\n      {\n        kind: 'Grid',\n        spec: {\n          display: {\n            title: 'Disk Stats',\n            collapse: {\n              open: false,\n            },\n          },\n          items: [\n            {\n              x: 18,\n              y: 0,\n              width: 6,\n              height: 2,\n              content: { $ref: '#/spec/panels/filesystemFullness' },\n            },\n          ],\n        },\n      },\n    ],\n  },\n};\n\nexport default testDashboard;\n"],"names":["testDashboard","kind","metadata","name","project","created_at","updated_at","version","spec","duration","variables","value","panels","cpu","display","plugin","queries","query","unit","memory","diskIO","filesystemFullness","layouts","title","collapse","open","items","x","y","width","height","content","$ref"],"mappings":"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"}

package/dist/views/ViewDashboard/DashboardApp.d.ts

@@ -3,6 +3,7 @@ import { DashboardResource } from '@perses-dev/core';
 export interface DashboardAppProps {
     dashboardResource: DashboardResource;
     dashboardTitleComponent?: JSX.Element;
+    initialVariableIsSticky?: boolean;
 }
 export declare const DashboardApp: (props: DashboardAppProps) => JSX.Element;
 //# sourceMappingURL=DashboardApp.d.ts.map

package/dist/views/ViewDashboard/DashboardApp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAYrD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACvC;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAmEpD,CAAC"}
+{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAYrD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBAoEpD,CAAC"}

package/dist/views/ViewDashboard/DashboardApp.js

@@ -17,7 +17,7 @@ import { ErrorAlert, ErrorBoundary } from '@perses-dev/components';
 import { PanelDrawer, Dashboard, PanelGroupDialog, DeletePanelGroupDialog, UnsavedChangesConfirmationDialog, DashboardToolbar, DeletePanelDialog } from '../../components';
 import { useDashboard, useEditMode } from '../../context';
 export const DashboardApp = (props)=>{
-    const { dashboardResource , dashboardTitleComponent  } = props;
+    const { dashboardResource , dashboardTitleComponent , initialVariableIsSticky  } = props;
     const { setEditMode  } = useEditMode();
     const { dashboard , setDashboard  } = useDashboard();
     const [originalDashboard, setOriginalDashboard] = useState(undefined);
@@ -58,6 +58,7 @@ export const DashboardApp = (props)=>{
             /*#__PURE__*/ _jsx(DashboardToolbar, {
                 dashboardName: dashboardResource.metadata.name,
                 dashboardTitleComponent: dashboardTitleComponent,
+                initialVariableIsSticky: initialVariableIsSticky,
                 onEditButtonClick: onEditButtonClick,
                 onCancelButtonClick: onCancelButtonClick
             }),

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.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 { useState } from 'react';\nimport { Box } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport {\n  PanelDrawer,\n  Dashboard,\n  PanelGroupDialog,\n  DeletePanelGroupDialog,\n  UnsavedChangesConfirmationDialog,\n  DashboardToolbar,\n  DeletePanelDialog,\n} from '../../components';\nimport { useDashboard, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n  dashboardResource: DashboardResource;\n  dashboardTitleComponent?: JSX.Element;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n  const { dashboardResource, dashboardTitleComponent } = props;\n  const { setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<DashboardResource | undefined>(undefined);\n  const [isUnsavedDashboardDialogOpen, setUnsavedDashboardDialogIsOpen] = useState(false);\n\n  const saveDashboard = async () => {\n    setEditMode(false);\n    setUnsavedDashboardDialogIsOpen(false);\n  };\n\n  const cancelDashboard = () => {\n    // Reset to the original spec and exit edit mode\n    if (originalDashboard) {\n      setDashboard(originalDashboard);\n    }\n    setUnsavedDashboardDialogIsOpen(false);\n    setEditMode(false);\n  };\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n    setOriginalDashboard(dashboard);\n  };\n\n  const onCancelButtonClick = () => {\n    // check if dashboard has been modified\n    if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {\n      setEditMode(false);\n    } else {\n      setUnsavedDashboardDialogIsOpen(true);\n    }\n  };\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar\n        dashboardName={dashboardResource.metadata.name}\n        dashboardTitleComponent={dashboardTitleComponent}\n        onEditButtonClick={onEditButtonClick}\n        onCancelButtonClick={onCancelButtonClick}\n      />\n      <Box sx={{ padding: (theme) => theme.spacing(2) }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard />\n        </ErrorBoundary>\n        <PanelDrawer />\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <UnsavedChangesConfirmationDialog\n          isOpen={isUnsavedDashboardDialogOpen}\n          onSave={saveDashboard}\n          onClose={cancelDashboard}\n        />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ErrorAlert","ErrorBoundary","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","UnsavedChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","useDashboard","useEditMode","DashboardApp","props","dashboardResource","dashboardTitleComponent","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","isUnsavedDashboardDialogOpen","setUnsavedDashboardDialogIsOpen","saveDashboard","cancelDashboard","onEditButtonClick","onCancelButtonClick","JSON","stringify","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","FallbackComponent","isOpen","onSave","onClose"],"mappings":"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"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/DashboardApp.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 { useState } from 'react';\nimport { Box } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { DashboardResource } from '@perses-dev/core';\nimport {\n  PanelDrawer,\n  Dashboard,\n  PanelGroupDialog,\n  DeletePanelGroupDialog,\n  UnsavedChangesConfirmationDialog,\n  DashboardToolbar,\n  DeletePanelDialog,\n} from '../../components';\nimport { useDashboard, useEditMode } from '../../context';\n\nexport interface DashboardAppProps {\n  dashboardResource: DashboardResource;\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n}\n\nexport const DashboardApp = (props: DashboardAppProps) => {\n  const { dashboardResource, dashboardTitleComponent, initialVariableIsSticky } = props;\n  const { setEditMode } = useEditMode();\n  const { dashboard, setDashboard } = useDashboard();\n  const [originalDashboard, setOriginalDashboard] = useState<DashboardResource | undefined>(undefined);\n  const [isUnsavedDashboardDialogOpen, setUnsavedDashboardDialogIsOpen] = useState(false);\n\n  const saveDashboard = async () => {\n    setEditMode(false);\n    setUnsavedDashboardDialogIsOpen(false);\n  };\n\n  const cancelDashboard = () => {\n    // Reset to the original spec and exit edit mode\n    if (originalDashboard) {\n      setDashboard(originalDashboard);\n    }\n    setUnsavedDashboardDialogIsOpen(false);\n    setEditMode(false);\n  };\n\n  const onEditButtonClick = () => {\n    setEditMode(true);\n    setOriginalDashboard(dashboard);\n  };\n\n  const onCancelButtonClick = () => {\n    // check if dashboard has been modified\n    if (JSON.stringify(dashboard) === JSON.stringify(originalDashboard)) {\n      setEditMode(false);\n    } else {\n      setUnsavedDashboardDialogIsOpen(true);\n    }\n  };\n\n  return (\n    <Box\n      sx={{\n        flexGrow: 1,\n        overflowX: 'hidden',\n        overflowY: 'auto',\n        display: 'flex',\n        flexDirection: 'column',\n      }}\n    >\n      <DashboardToolbar\n        dashboardName={dashboardResource.metadata.name}\n        dashboardTitleComponent={dashboardTitleComponent}\n        initialVariableIsSticky={initialVariableIsSticky}\n        onEditButtonClick={onEditButtonClick}\n        onCancelButtonClick={onCancelButtonClick}\n      />\n      <Box sx={{ padding: (theme) => theme.spacing(2) }}>\n        <ErrorBoundary FallbackComponent={ErrorAlert}>\n          <Dashboard />\n        </ErrorBoundary>\n        <PanelDrawer />\n        <PanelGroupDialog />\n        <DeletePanelGroupDialog />\n        <DeletePanelDialog />\n        <UnsavedChangesConfirmationDialog\n          isOpen={isUnsavedDashboardDialogOpen}\n          onSave={saveDashboard}\n          onClose={cancelDashboard}\n        />\n      </Box>\n    </Box>\n  );\n};\n"],"names":["useState","Box","ErrorAlert","ErrorBoundary","PanelDrawer","Dashboard","PanelGroupDialog","DeletePanelGroupDialog","UnsavedChangesConfirmationDialog","DashboardToolbar","DeletePanelDialog","useDashboard","useEditMode","DashboardApp","props","dashboardResource","dashboardTitleComponent","initialVariableIsSticky","setEditMode","dashboard","setDashboard","originalDashboard","setOriginalDashboard","undefined","isUnsavedDashboardDialogOpen","setUnsavedDashboardDialogIsOpen","saveDashboard","cancelDashboard","onEditButtonClick","onCancelButtonClick","JSON","stringify","sx","flexGrow","overflowX","overflowY","display","flexDirection","dashboardName","metadata","name","padding","theme","spacing","FallbackComponent","isOpen","onSave","onClose"],"mappings":"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"}

package/dist/views/ViewDashboard/ViewDashboard.d.ts

@@ -6,6 +6,7 @@ export interface ViewDashboardProps extends Omit<BoxProps, 'children'> {
     dashboardResource: DashboardResource;
     datasourceApi: DatasourceStoreProviderProps['datasourceApi'];
     dashboardTitleComponent?: JSX.Element;
+    initialVariableIsSticky?: boolean;
 }
 /**
  * The View for displaying a Dashboard, along with the UI for selecting variable values.

package/dist/views/ViewDashboard/ViewDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAIL,4BAA4B,EAE7B,MAAM,eAAe,CAAC;AAIvB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACpE,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;IAC7D,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;CACvC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAkCtD"}
+{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,OAAO,EAIL,4BAA4B,EAG7B,MAAM,eAAe,CAAC;AAGvB,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACpE,iBAAiB,EAAE,iBAAiB,CAAC;IACrC,aAAa,EAAE,4BAA4B,CAAC,eAAe,CAAC,CAAC;IAC7D,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;CACnC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eAoCtD"}

package/dist/views/ViewDashboard/ViewDashboard.js

@@ -13,18 +13,16 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Box } from '@mui/material';
 import { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';
-import { TimeRangeProvider, TemplateVariableProvider, DashboardProvider, DatasourceStoreProvider } from '../../context';
-import { useInitialTimeRange, useSetTimeRangeParams } from '../../utils';
+import { TimeRangeProvider, TemplateVariableProvider, DashboardProvider, DatasourceStoreProvider, useInitialTimeRange } from '../../context';
 import { DashboardApp } from './DashboardApp';
 /**
  * The View for displaying a Dashboard, along with the UI for selecting variable values.
  */ export 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 = useInitialTimeRange(dashboardDuration);
-    const { timeRange , setTimeRange  } = useSetTimeRangeParams(initialTimeRange, true);
     return /*#__PURE__*/ _jsx(DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -33,8 +31,8 @@ import { DashboardApp } from './DashboardApp';
                 dashboardResource
             },
             children: /*#__PURE__*/ _jsx(TimeRangeProvider, {
-                timeRange: timeRange,
-                setTimeRange: setTimeRange,
+                initialTimeRange: initialTimeRange,
+                enabledURLParams: true,
                 children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
                     children: /*#__PURE__*/ _jsx(Box, {
@@ -50,7 +48,8 @@ import { DashboardApp } from './DashboardApp';
                             FallbackComponent: ErrorAlert,
                             children: /*#__PURE__*/ _jsx(DashboardApp, {
                                 dashboardResource: dashboardResource,
-                                dashboardTitleComponent: dashboardTitleComponent
+                                dashboardTitleComponent: dashboardTitleComponent,
+                                initialVariableIsSticky: initialVariableIsSticky
                             })
                         })
                     })

package/dist/views/ViewDashboard/ViewDashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/views/ViewDashboard/ViewDashboard.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 { Box, BoxProps } from '@mui/material';\nimport { DashboardResource } from '@perses-dev/core';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport {\n  TimeRangeProvider,\n  TemplateVariableProvider,\n  DashboardProvider,\n  DatasourceStoreProviderProps,\n  DatasourceStoreProvider,\n} from '../../context';\nimport { useInitialTimeRange, useSetTimeRangeParams } from '../../utils';\nimport { DashboardApp } from './DashboardApp';\n\nexport interface ViewDashboardProps extends Omit<BoxProps, 'children'> {\n  dashboardResource: DashboardResource;\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n  dashboardTitleComponent?: JSX.Element;\n}\n\n/**\n * The View for displaying a Dashboard, along with the UI for selecting variable values.\n */\nexport function ViewDashboard(props: ViewDashboardProps) {\n  const { dashboardResource, datasourceApi, dashboardTitleComponent, sx, ...others } = props;\n  const { spec } = dashboardResource;\n  const dashboardDuration = spec.duration ?? '1h';\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\n  const { timeRange, setTimeRange } = useSetTimeRangeParams(initialTimeRange, true);\n\n  return (\n    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>\n      <DashboardProvider initialState={{ dashboardResource }}>\n        <TimeRangeProvider timeRange={timeRange} setTimeRange={setTimeRange}>\n          <TemplateVariableProvider initialVariableDefinitions={spec.variables}>\n            <Box\n              sx={combineSx(\n                {\n                  display: 'flex',\n                  width: '100%',\n                  height: '100%',\n                  position: 'relative',\n                  overflow: 'hidden',\n                },\n                sx\n              )}\n              {...others}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <DashboardApp dashboardResource={dashboardResource} dashboardTitleComponent={dashboardTitleComponent} />\n              </ErrorBoundary>\n            </Box>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </DashboardProvider>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","combineSx","TimeRangeProvider","TemplateVariableProvider","DashboardProvider","DatasourceStoreProvider","useInitialTimeRange","useSetTimeRangeParams","DashboardApp","ViewDashboard","props","dashboardResource","datasourceApi","dashboardTitleComponent","sx","others","spec","dashboardDuration","duration","initialTimeRange","timeRange","setTimeRange","initialState","initialVariableDefinitions","variables","display","width","height","position","overflow","FallbackComponent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAE9C,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAC9E,SACEC,iBAAiB,EACjBC,wBAAwB,EACxBC,iBAAiB,EAEjBC,uBAAuB,QAClB,eAAe,CAAC;AACvB,SAASC,mBAAmB,EAAEC,qBAAqB,QAAQ,aAAa,CAAC;AACzE,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAQ9C;;CAEC,GACD,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,aAAa,CAAA,EAAEC,uBAAuB,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGL,KAAK,AAAC;IAC3F,MAAM,EAAEM,IAAI,CAAA,EAAE,GAAGL,iBAAiB,AAAC;QACTK,SAAa;IAAvC,MAAMC,iBAAiB,GAAGD,CAAAA,SAAa,GAAbA,IAAI,CAACE,QAAQ,cAAbF,SAAa,cAAbA,SAAa,GAAI,IAAI,AAAC;IAChD,MAAMG,gBAAgB,GAAGb,mBAAmB,CAACW,iBAAiB,CAAC,AAAC;IAChE,MAAM,EAAEG,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGd,qBAAqB,CAACY,gBAAgB,EAAE,IAAI,CAAC,AAAC;IAElF,qBACE,KAACd,uBAAuB;QAACM,iBAAiB,EAAEA,iBAAiB;QAAEC,aAAa,EAAEA,aAAa;kBACzF,cAAA,KAACR,iBAAiB;YAACkB,YAAY,EAAE;gBAAEX,iBAAiB;aAAE;sBACpD,cAAA,KAACT,iBAAiB;gBAACkB,SAAS,EAAEA,SAAS;gBAAEC,YAAY,EAAEA,YAAY;0BACjE,cAAA,KAAClB,wBAAwB;oBAACoB,0BAA0B,EAAEP,IAAI,CAACQ,SAAS;8BAClE,cAAA,KAAC1B,GAAG;wBACFgB,EAAE,EAAEb,SAAS,CACX;4BACEwB,OAAO,EAAE,MAAM;4BACfC,KAAK,EAAE,MAAM;4BACbC,MAAM,EAAE,MAAM;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,QAAQ,EAAE,QAAQ;yBACnB,EACDf,EAAE,CACH;wBACA,GAAGC,MAAM;kCAEV,cAAA,KAAChB,aAAa;4BAAC+B,iBAAiB,EAAE9B,UAAU;sCAC1C,cAAA,KAACQ,YAAY;gCAACG,iBAAiB,EAAEA,iBAAiB;gCAAEE,uBAAuB,EAAEA,uBAAuB;8BAAI;0BAC1F;sBACZ;kBACmB;cACT;UACF;MACI,CAC1B;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/views/ViewDashboard/ViewDashboard.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 { Box, BoxProps } from '@mui/material';\nimport { DashboardResource } from '@perses-dev/core';\nimport { ErrorBoundary, ErrorAlert, combineSx } from '@perses-dev/components';\nimport {\n  TimeRangeProvider,\n  TemplateVariableProvider,\n  DashboardProvider,\n  DatasourceStoreProviderProps,\n  DatasourceStoreProvider,\n  useInitialTimeRange,\n} from '../../context';\nimport { DashboardApp } from './DashboardApp';\n\nexport interface ViewDashboardProps extends Omit<BoxProps, 'children'> {\n  dashboardResource: DashboardResource;\n  datasourceApi: DatasourceStoreProviderProps['datasourceApi'];\n  dashboardTitleComponent?: JSX.Element;\n  initialVariableIsSticky?: boolean;\n}\n\n/**\n * The View for displaying a Dashboard, along with the UI for selecting variable values.\n */\nexport function ViewDashboard(props: ViewDashboardProps) {\n  const { dashboardResource, datasourceApi, dashboardTitleComponent, initialVariableIsSticky, sx, ...others } = props;\n  const { spec } = dashboardResource;\n  const dashboardDuration = spec.duration ?? '1h';\n  const initialTimeRange = useInitialTimeRange(dashboardDuration);\n  return (\n    <DatasourceStoreProvider dashboardResource={dashboardResource} datasourceApi={datasourceApi}>\n      <DashboardProvider initialState={{ dashboardResource }}>\n        <TimeRangeProvider initialTimeRange={initialTimeRange} enabledURLParams={true}>\n          <TemplateVariableProvider initialVariableDefinitions={spec.variables}>\n            <Box\n              sx={combineSx(\n                {\n                  display: 'flex',\n                  width: '100%',\n                  height: '100%',\n                  position: 'relative',\n                  overflow: 'hidden',\n                },\n                sx\n              )}\n              {...others}\n            >\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <DashboardApp\n                  dashboardResource={dashboardResource}\n                  dashboardTitleComponent={dashboardTitleComponent}\n                  initialVariableIsSticky={initialVariableIsSticky}\n                />\n              </ErrorBoundary>\n            </Box>\n          </TemplateVariableProvider>\n        </TimeRangeProvider>\n      </DashboardProvider>\n    </DatasourceStoreProvider>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","combineSx","TimeRangeProvider","TemplateVariableProvider","DashboardProvider","DatasourceStoreProvider","useInitialTimeRange","DashboardApp","ViewDashboard","props","dashboardResource","datasourceApi","dashboardTitleComponent","initialVariableIsSticky","sx","others","spec","dashboardDuration","duration","initialTimeRange","initialState","enabledURLParams","initialVariableDefinitions","variables","display","width","height","position","overflow","FallbackComponent"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,GAAG,QAAkB,eAAe,CAAC;AAE9C,SAASC,aAAa,EAAEC,UAAU,EAAEC,SAAS,QAAQ,wBAAwB,CAAC;AAC9E,SACEC,iBAAiB,EACjBC,wBAAwB,EACxBC,iBAAiB,EAEjBC,uBAAuB,EACvBC,mBAAmB,QACd,eAAe,CAAC;AACvB,SAASC,YAAY,QAAQ,gBAAgB,CAAC;AAS9C;;CAEC,GACD,OAAO,SAASC,aAAa,CAACC,KAAyB,EAAE;IACvD,MAAM,EAAEC,iBAAiB,CAAA,EAAEC,aAAa,CAAA,EAAEC,uBAAuB,CAAA,EAAEC,uBAAuB,CAAA,EAAEC,EAAE,CAAA,EAAE,GAAGC,MAAM,EAAE,GAAGN,KAAK,AAAC;IACpH,MAAM,EAAEO,IAAI,CAAA,EAAE,GAAGN,iBAAiB,AAAC;QACTM,SAAa;IAAvC,MAAMC,iBAAiB,GAAGD,CAAAA,SAAa,GAAbA,IAAI,CAACE,QAAQ,cAAbF,SAAa,cAAbA,SAAa,GAAI,IAAI,AAAC;IAChD,MAAMG,gBAAgB,GAAGb,mBAAmB,CAACW,iBAAiB,CAAC,AAAC;IAChE,qBACE,KAACZ,uBAAuB;QAACK,iBAAiB,EAAEA,iBAAiB;QAAEC,aAAa,EAAEA,aAAa;kBACzF,cAAA,KAACP,iBAAiB;YAACgB,YAAY,EAAE;gBAAEV,iBAAiB;aAAE;sBACpD,cAAA,KAACR,iBAAiB;gBAACiB,gBAAgB,EAAEA,gBAAgB;gBAAEE,gBAAgB,EAAE,IAAI;0BAC3E,cAAA,KAAClB,wBAAwB;oBAACmB,0BAA0B,EAAEN,IAAI,CAACO,SAAS;8BAClE,cAAA,KAACzB,GAAG;wBACFgB,EAAE,EAAEb,SAAS,CACX;4BACEuB,OAAO,EAAE,MAAM;4BACfC,KAAK,EAAE,MAAM;4BACbC,MAAM,EAAE,MAAM;4BACdC,QAAQ,EAAE,UAAU;4BACpBC,QAAQ,EAAE,QAAQ;yBACnB,EACDd,EAAE,CACH;wBACA,GAAGC,MAAM;kCAEV,cAAA,KAAChB,aAAa;4BAAC8B,iBAAiB,EAAE7B,UAAU;sCAC1C,cAAA,KAACO,YAAY;gCACXG,iBAAiB,EAAEA,iBAAiB;gCACpCE,uBAAuB,EAAEA,uBAAuB;gCAChDC,uBAAuB,EAAEA,uBAAuB;8BAChD;0BACY;sBACZ;kBACmB;cACT;UACF;MACI,CAC1B;AACJ,CAAC"}

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

@@ -19,7 +19,7 @@ import { DashboardApp } from '../DashboardApp';
 describe('Panel Groups', ()=>{
     const renderDashboard = ()=>{
         renderWithContext(/*#__PURE__*/ _jsx(TimeRangeProvider, {
-            timeRange: {
+            initialTimeRange: {
                 pastDuration: '30m'
             },
             children: /*#__PURE__*/ _jsx(TemplateVariableProvider, {
@@ -37,45 +37,40 @@ describe('Panel Groups', ()=>{
     };
     it('should delete panel', ()=>{
         renderDashboard();
-        const panel = screen.getByText('CPU');
-        userEvent.hover(panel);
-        const deletePanelButton = screen.getByLabelText('delete panel');
+        const panelTitle = 'CPU';
+        const deletePanelButton = screen.getByLabelText(`delete panel ${panelTitle}`);
         userEvent.click(deletePanelButton);
         screen.getByText('Delete Panel');
         const deleteButton = screen.getByText('Delete');
         userEvent.click(deleteButton);
         // The panel should disappear
-        const deletedPanel = screen.queryByText('CPU');
+        const deletedPanel = screen.queryByText(panelTitle);
         expect(deletedPanel).not.toBeInTheDocument();
     });
     it('should only delete panel from panel group if panel is not referenced more than once', ()=>{
         renderDashboard();
-        const panels = screen.getAllByText('Disk I/O Utilization');
+        const panelTitle = 'Disk I/O Utilization';
+        const panels = screen.getAllByText(panelTitle);
         expect(panels).toHaveLength(2);
-        const panel = panels[0];
-        if (panel === undefined) throw new Error('Missing panel');
-        userEvent.hover(panel);
-        const deletePanelButton = screen.getByLabelText('delete panel');
+        const deletePanelButton = screen.getAllByLabelText(`delete panel ${panelTitle}`)[0];
+        if (deletePanelButton === undefined) throw new Error('Missing delete button');
         userEvent.click(deletePanelButton);
         screen.getByText('Delete Panel');
         const deleteButton = screen.getByText('Delete');
         userEvent.click(deleteButton);
         // The deleted panel should still be on screen in the other group
-        const deletedPanel = screen.queryByText('Disk I/O Utilization');
+        const deletedPanel = screen.queryByText(panelTitle);
         expect(deletedPanel).toBeInTheDocument();
     });
     it('should swap panels', ()=>{
         renderDashboard();
         // should move panel down
-        const group1 = screen.getByText('CPU Stats');
-        userEvent.hover(group1);
-        const moveGroupDownBtn = screen.getByLabelText('move group down');
+        const groupTitle1 = 'CPU Stats';
+        const moveGroupDownBtn = screen.getByLabelText(`move group ${groupTitle1} down`);
         userEvent.click(moveGroupDownBtn);
-        userEvent.unhover(moveGroupDownBtn);
         // should move panel up
-        const group2 = screen.getByText('Disk Stats');
-        userEvent.hover(group2);
-        const moveGroupUpBtn = screen.getByLabelText('move group up');
+        const groupTitle2 = 'Disk Stats';
+        const moveGroupUpBtn = screen.getByLabelText(`move group ${groupTitle2} up`);
         userEvent.click(moveGroupUpBtn);
     /* TODO: Figure out how to test this visually without coupling to the store
     const layouts = storeApi.getState().layouts;
@@ -85,15 +80,14 @@ describe('Panel Groups', ()=>{
     */ });
     it('should delete a panel group', ()=>{
         renderDashboard();
-        const group = screen.getByText('CPU Stats');
-        userEvent.hover(group);
-        const deleteGroupIcon = screen.getByLabelText('delete group');
+        const groupTitle = 'CPU Stats';
+        const deleteGroupIcon = screen.getByLabelText(`delete group ${groupTitle}`);
         userEvent.click(deleteGroupIcon);
         screen.getByText('Delete Panel Group');
         const deleteButton = screen.getByText('Delete');
         userEvent.click(deleteButton);
         // should remove group
-        const deletedGroup = screen.queryByText('CPU Stats');
+        const deletedGroup = screen.queryByText(groupTitle);
         expect(deletedGroup).not.toBeInTheDocument();
         // CPU panel should be completely gone since it wasn't in any other group
         let panel = screen.queryByText('CPU');