@perses-dev/dashboards 0.10.0 → 0.11.0

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

@@ -22,11 +22,21 @@ function _export(target, all) {
 }
 _export(exports, {
     useEditMode: ()=>useEditMode,
-    useLayouts: ()=>useLayouts,
-    usePanelGroupDialog: ()=>usePanelGroupDialog,
-    usePanels: ()=>usePanels,
+    useDashboardActions: ()=>useDashboardActions,
+    usePanelGroupIds: ()=>usePanelGroupIds,
+    useListPanelGroups: ()=>useListPanelGroups,
+    usePanelGroup: ()=>usePanelGroup,
+    usePanelGroupActions: ()=>usePanelGroupActions,
+    usePanelGroupEditor: ()=>usePanelGroupEditor,
+    useDeletePanelGroupDialog: ()=>useDeletePanelGroupDialog,
+    usePanel: ()=>usePanel,
+    usePanelActions: ()=>usePanelActions,
+    usePanelEditor: ()=>usePanelEditor,
+    useDeletePanelDialog: ()=>useDeletePanelDialog,
     useDefaultTimeRange: ()=>useDefaultTimeRange
 });
+const _core = require("@perses-dev/core");
+const _react = require("react");
 const _dashboardProvider = require("./DashboardProvider");
 function useEditMode() {
     return (0, _dashboardProvider.useDashboardStore)(({ isEditMode , setEditMode  })=>({
@@ -34,37 +44,120 @@ function useEditMode() {
             setEditMode
         }));
 }
-function useLayouts() {
-    return (0, _dashboardProvider.useDashboardStore)(({ layouts , addPanelToGroup , movePanelToGroup , updatePanelGroup , swapPanelGroups , deletePanelGroup  })=>({
-            layouts,
-            addPanelToGroup,
-            movePanelToGroup,
-            updatePanelGroup,
-            swapPanelGroups,
-            deletePanelGroup
-        }));
+function useDashboardActions() {
+    const save = (0, _dashboardProvider.useDashboardStore)((store)=>store.save);
+    const reset = (0, _dashboardProvider.useDashboardStore)((store)=>store.reset);
+    const openAddPanelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanelGroup);
+    const openAddPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openAddPanel);
+    return {
+        save,
+        reset,
+        openAddPanelGroup,
+        openAddPanel: ()=>openAddPanel(undefined)
+    };
+}
+function usePanelGroupIds() {
+    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupIdOrder);
+}
+function useListPanelGroups() {
+    const panelGroupIds = usePanelGroupIds();
+    const panelGroups = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroups);
+    return (0, _react.useMemo)(()=>{
+        return panelGroupIds.map((id)=>{
+            const group = panelGroups[id];
+            if (group === undefined) {
+                throw new Error(`Invalid panel group Id found ${id}`);
+            }
+            return group;
+        });
+    }, [
+        panelGroupIds,
+        panelGroups
+    ]);
+}
+function usePanelGroup(panelGroupId) {
+    const panelGroup = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroups[panelGroupId]);
+    if (panelGroup === undefined) {
+        throw new Error(`Panel group with Id ${panelGroupId} was not found`);
+    }
+    return panelGroup;
+}
+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);
+    return {
+        openEditPanelGroup: ()=>openEditPanelGroup(panelGroupId),
+        deletePanelGroup: ()=>deletePanelGroup(panelGroupId),
+        openAddPanel: ()=>openAddPanel(panelGroupId),
+        moveUp,
+        moveDown
+    };
+}
+/**
+ * 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.panelGroupIdOrder.findIndex((id)=>id === panelGroupId));
+    const panelGroupsLength = (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupIdOrder.length);
+    const swapPanelGroups = (0, _dashboardProvider.useDashboardStore)((store)=>store.swapPanelGroups);
+    if (currentIndex < 0) {
+        throw new Error(`Could not find panel group with Id ${panelGroupId} in order array`);
+    }
+    const moveUp = ()=>swapPanelGroups(currentIndex, currentIndex - 1);
+    const moveDown = ()=>swapPanelGroups(currentIndex, currentIndex + 1);
+    return {
+        moveUp: currentIndex > 0 ? moveUp : undefined,
+        moveDown: currentIndex < panelGroupsLength - 1 ? moveDown : undefined
+    };
 }
-function usePanelGroupDialog() {
-    return (0, _dashboardProvider.useDashboardStore)(({ panelGroupDialog , openPanelGroupDialog , closePanelGroupDialog , deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog ,  })=>({
-            panelGroupDialog,
-            openPanelGroupDialog,
-            closePanelGroupDialog,
+function usePanelGroupEditor() {
+    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelGroupEditor);
+}
+function useDeletePanelGroupDialog() {
+    return (0, _dashboardProvider.useDashboardStore)(({ deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  })=>({
             deletePanelGroupDialog,
             openDeletePanelGroupDialog,
-            closeDeletePanelGroupDialog
+            closeDeletePanelGroupDialog,
+            deletePanelGroup
         }));
 }
-function usePanels() {
-    return (0, _dashboardProvider.useDashboardStore)(({ panels , panelEditor , addPanel , editPanel , deletePanelDialog , deletePanels , openDeletePanelDialog , closeDeletePanelDialog ,  })=>({
-            panels,
-            panelEditor,
-            addPanel,
-            editPanel,
-            deletePanels,
-            deletePanelDialog,
-            openDeletePanelDialog,
-            closeDeletePanelDialog
-        }));
+function usePanel(panelGroupItemId) {
+    const { panelGroupId , itemIndex  } = panelGroupItemId;
+    const panel = (0, _dashboardProvider.useDashboardStore)((store)=>{
+        var ref, ref1;
+        const panelRef = (ref1 = (ref = store.panelGroups[panelGroupId]) === null || ref === void 0 ? void 0 : ref.items[itemIndex]) === null || ref1 === void 0 ? void 0 : ref1.content;
+        if (panelRef === undefined) return;
+        const panelKey = (0, _core.getPanelKeyFromRef)(panelRef);
+        return store.panels[panelKey];
+    });
+    if (panel === undefined) {
+        throw new Error(`Could not find panel for Id ${panelGroupItemId}`);
+    }
+    return panel;
+}
+function usePanelActions(panelGroupItemId) {
+    const openEditPanel = (0, _dashboardProvider.useDashboardStore)((store)=>store.openEditPanel);
+    const openDeletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.openDeletePanelDialog);
+    return {
+        openEditPanel: ()=>openEditPanel(panelGroupItemId),
+        openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId)
+    };
+}
+function usePanelEditor() {
+    return (0, _dashboardProvider.useDashboardStore)((store)=>store.panelEditor);
+}
+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 deletePanels = (0, _dashboardProvider.useDashboardStore)((store)=>store.deletePanels);
+    const closeDeletePanelDialog = (0, _dashboardProvider.useDashboardStore)((store)=>store.closeDeletePanelDialog);
+    return {
+        deletePanelDialog,
+        deletePanels,
+        closeDeletePanelDialog
+    };
 }
 function useDefaultTimeRange() {
     return (0, _dashboardProvider.useDashboardStore)((state)=>state.defaultTimeRange);

package/dist/cjs/context/DashboardProvider/{panel-editing-slice.js → panel-editor-slice.js}

@@ -23,9 +23,20 @@ function createPanelEditorSlice(panels) {
     // Return the state creator function for Zustand that uses the panels provided as intitial state
     return (set, get)=>{
         return {
+            previousPanels: panels,
             panels,
             panelEditor: undefined,
-            editPanel (item) {
+            savePanels () {
+                set((state)=>{
+                    state.previousPanels = state.panels;
+                });
+            },
+            resetPanels () {
+                set((state)=>{
+                    state.panels = state.previousPanels;
+                });
+            },
+            openEditPanel (item) {
                 const { panels , getPanelKey  } = get();
                 // Ask the layout store for the panel key at that location
                 const panelKey = getPanelKey(item);
@@ -40,7 +51,7 @@ function createPanelEditorSlice(panels) {
                     initialValues: {
                         name: panelToEdit.spec.display.name,
                         description: (_description = panelToEdit.spec.display.description) !== null && _description !== void 0 ? _description : '',
-                        groupIndex: item.groupIndex,
+                        groupId: item.panelGroupId,
                         kind: panelToEdit.spec.plugin.kind,
                         spec: panelToEdit.spec.plugin.spec
                     },
@@ -50,8 +61,8 @@ function createPanelEditorSlice(panels) {
                             state.panels[panelKey] = panelDefinititon;
                         });
                         // Move the panel to another group if it changed
-                        if (next.groupIndex !== item.groupIndex) {
-                            get().movePanelToGroup(item, next.groupIndex);
+                        if (next.groupId !== item.panelGroupId) {
+                            get().movePanelToGroup(item, next.groupId);
                         }
                     },
                     close: ()=>{
@@ -65,13 +76,21 @@ function createPanelEditorSlice(panels) {
                     state.panelEditor = editorState;
                 });
             },
-            addPanel (initialGroup) {
+            openAddPanel (panelGroupId) {
+                // If a panel group isn't supplied, add to the first group
+                if (panelGroupId === undefined) {
+                    const firstGroupId = get().panelGroupIdOrder[0];
+                    if (firstGroupId === undefined) {
+                        throw new Error('No panel groups to add a panel to');
+                    }
+                    panelGroupId = firstGroupId;
+                }
                 const editorState = {
                     mode: 'Add',
                     initialValues: {
                         name: '',
                         description: '',
-                        groupIndex: initialGroup,
+                        groupId: panelGroupId,
                         // TODO: If we knew what plugins were available (and how to create the initial spec), we might be able to
                         // set a smarter default here?
                         kind: '',
@@ -83,7 +102,7 @@ function createPanelEditorSlice(panels) {
                         set((state)=>{
                             state.panels[panelKey] = panelDef;
                         });
-                        get().addPanelToGroup(panelKey, next.groupIndex);
+                        get().addPanelToGroup(panelKey, next.groupId);
                     },
                     close: ()=>{
                         set((state)=>{
@@ -118,15 +137,15 @@ function createPanelEditorSlice(panels) {
                 });
             },
             openDeletePanelDialog (item) {
+                const { panels , getPanelKey , panelGroups  } = get();
+                const panelKey = getPanelKey(item);
                 set((state)=>{
-                    var ref;
-                    const { panels , getPanelKey  } = get();
-                    const panelKey = getPanelKey(item);
-                    var _name;
+                    var ref, ref1;
+                    var _name, ref2;
                     state.deletePanelDialog = {
-                        panelKey,
+                        panelGroupItemId: item,
                         panelName: (_name = (ref = panels[panelKey]) === null || ref === void 0 ? void 0 : ref.spec.display.name) !== null && _name !== void 0 ? _name : '',
-                        layoutItem: item
+                        panelGroupName: (ref2 = (ref1 = panelGroups[item.panelGroupId]) === null || ref1 === void 0 ? void 0 : ref1.title) !== null && ref2 !== void 0 ? ref2 : ''
                     };
                 });
             },

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

@@ -0,0 +1,102 @@
+// Copyright 2022 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "createPanelGroupEditorSlice", {
+    enumerable: true,
+    get: ()=>createPanelGroupEditorSlice
+});
+const createPanelGroupEditorSlice = (set, get)=>({
+        panelGroupEditor: undefined,
+        openAddPanelGroup: ()=>{
+            // Create the editor state
+            const editor = {
+                mode: 'Add',
+                initialValues: {
+                    title: '',
+                    isCollapsed: false
+                },
+                applyChanges (next) {
+                    const newGroup = {
+                        id: get().createPanelGroupId(),
+                        items: [],
+                        ...next
+                    };
+                    set((draft)=>{
+                        draft.panelGroups[newGroup.id] = newGroup;
+                        draft.panelGroupIdOrder.unshift(newGroup.id);
+                    });
+                },
+                close () {
+                    set((draft)=>{
+                        draft.panelGroupEditor = undefined;
+                    });
+                }
+            };
+            // Open the editor
+            set((draft)=>{
+                draft.panelGroupEditor = editor;
+            });
+        },
+        openEditPanelGroup: (panelGroupId)=>{
+            const existingGroup = get().panelGroups[panelGroupId];
+            if (existingGroup === undefined) {
+                throw new Error(`Panel group with Id ${panelGroupId} does not exist`);
+            }
+            var _title;
+            // Create the editor state
+            const editor = {
+                mode: 'Edit',
+                initialValues: {
+                    title: (_title = existingGroup.title) !== null && _title !== void 0 ? _title : '',
+                    isCollapsed: existingGroup.isCollapsed
+                },
+                applyChanges (next) {
+                    set((draft)=>{
+                        const group = draft.panelGroups[panelGroupId];
+                        if (group === undefined) {
+                            throw new Error(`Panel group with Id ${panelGroupId} does not exist`);
+                        }
+                        group.title = next.title;
+                        group.isCollapsed = next.isCollapsed;
+                    });
+                },
+                close () {
+                    set((draft)=>{
+                        draft.panelGroupEditor = undefined;
+                    });
+                }
+            };
+            // Open the editor
+            set((draft)=>{
+                draft.panelGroupEditor = editor;
+            });
+        },
+        openDeletePanelGroupDialog: (panelGroupId)=>{
+            const panelGroup = get().panelGroups[panelGroupId];
+            if (panelGroup === undefined) {
+                throw new Error(`Panel group with Id ${panelGroupId} not found`);
+            }
+            set((state)=>{
+                state.deletePanelGroupDialog = {
+                    panelGroupId,
+                    panelGroupName: panelGroup.title
+                };
+            });
+        },
+        closeDeletePanelGroupDialog: ()=>set((state)=>{
+                state.deletePanelGroupDialog = undefined;
+            })
+    });

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

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

package/dist/cjs/context/TimeRangeProvider.js

@@ -14,14 +14,18 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "TimeRangeProvider", {
-    enumerable: true,
-    get: ()=>TimeRangeProvider
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    TimeRangeProvider: ()=>TimeRangeProvider,
+    useDashboardTimeRange: ()=>useDashboardTimeRange
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
-const _dateFns = require("date-fns");
-const _core = require("@perses-dev/core");
 const _pluginSystem = require("@perses-dev/plugin-system");
 function _getRequireWildcardCache(nodeInterop) {
     if (typeof WeakMap !== "function") return null;
@@ -63,47 +67,12 @@ function _interopRequireWildcard(obj, nodeInterop) {
     return newObj;
 }
 function TimeRangeProvider(props) {
-    const { initialTimeRange , children , onTimeRangeChange  } = props;
-    const { queryString , setQueryString  } = (0, _pluginSystem.useQueryString)();
-    const defaultTimeRange = (0, _core.isRelativeTimeRange)(initialTimeRange) ? (0, _core.toAbsoluteTimeRange)(initialTimeRange) : initialTimeRange;
-    const [timeRange, setActiveTimeRange] = (0, _react.useState)(defaultTimeRange);
-    const setTimeRange = (0, _react.useCallback)((value)=>{
-        if (onTimeRangeChange !== undefined) {
-            // optional callback to override default behavior
-            onTimeRangeChange(value);
-            return;
-        }
-        if ((0, _core.isRelativeTimeRange)(value)) {
-            if (setQueryString) {
-                queryString.set('start', value.pastDuration);
-                // end not required for relative time but may have been set by AbsoluteTimePicker or zoom
-                queryString.delete('end');
-                setQueryString(queryString);
-            } else {
-                setActiveTimeRange((0, _core.toAbsoluteTimeRange)(value));
-            }
-            return;
-        }
-        // allows app to specify whether query params should be source of truth for active time range
-        if (setQueryString) {
-            // Absolute URL example) ?start=1663707045000&end=1663713330000
-            // currently set from ViewDashboard initial queryString, AbsoluteTimePicker, or LineChart panel onDataZoom
-            const startUnixMs = (0, _dateFns.getUnixTime)(value.start) * 1000;
-            const endUnixMs = (0, _dateFns.getUnixTime)(value.end) * 1000;
-            queryString.set('start', startUnixMs.toString());
-            queryString.set('end', endUnixMs.toString());
-            setQueryString(queryString);
-        } else {
-            setActiveTimeRange(value);
-        }
-    }, [
-        queryString,
-        setQueryString,
-        onTimeRangeChange
-    ]);
+    const { timeRange , children , setTimeRange  } = props;
+    // TODO: fix no-op, pass paramsEnabled as false in useSetTimeRangeParams as workaround
     const ctx = (0, _react.useMemo)(()=>({
             timeRange,
-            setTimeRange
+            setTimeRange: setTimeRange !== null && setTimeRange !== void 0 ? setTimeRange : ()=>{
+            /* no-op */ }
         }), [
         timeRange,
         setTimeRange
@@ -113,3 +82,10 @@ function TimeRangeProvider(props) {
         children: children
     });
 }
+function useDashboardTimeRange() {
+    const { timeRange , setTimeRange  } = (0, _pluginSystem.useTimeRangeContext)();
+    return {
+        timeRange,
+        setTimeRange
+    };
+}