@perses-dev/dashboards 0.0.0-snapshot-scatter-chart-embed-8efdfab → 0.0.0-snapshot-explorer-plugin-c4a7621

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

@@ -21,29 +21,29 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    useEditMode: function() {
-        return useEditMode;
-    },
     useDashboardActions: function() {
         return useDashboardActions;
     },
-    usePanelGroupIds: function() {
-        return usePanelGroupIds;
+    useDashboardDuration: function() {
+        return useDashboardDuration;
     },
-    useListPanelGroups: function() {
-        return useListPanelGroups;
+    useDeletePanelDialog: function() {
+        return useDeletePanelDialog;
     },
-    usePanelGroup: function() {
-        return usePanelGroup;
+    useDeletePanelGroupDialog: function() {
+        return useDeletePanelGroupDialog;
     },
-    usePanelGroupActions: function() {
-        return usePanelGroupActions;
+    useDiscardChangesConfirmationDialog: function() {
+        return useDiscardChangesConfirmationDialog;
     },
-    usePanelGroupEditor: function() {
-        return usePanelGroupEditor;
+    useEditJsonDialog: function() {
+        return useEditJsonDialog;
     },
-    useDeletePanelGroupDialog: function() {
-        return useDeletePanelGroupDialog;
+    useEditMode: function() {
+        return useEditMode;
+    },
+    useListPanelGroups: function() {
+        return useListPanelGroups;
     },
     usePanel: function() {
         return usePanel;
@@ -54,38 +54,41 @@ _export(exports, {
     usePanelEditor: function() {
         return usePanelEditor;
     },
-    useDeletePanelDialog: function() {
-        return useDeletePanelDialog;
+    usePanelGroup: function() {
+        return usePanelGroup;
     },
-    useDashboardDuration: function() {
-        return useDashboardDuration;
+    usePanelGroupActions: function() {
+        return usePanelGroupActions;
+    },
+    usePanelGroupEditor: function() {
+        return usePanelGroupEditor;
+    },
+    usePanelGroupIds: function() {
+        return usePanelGroupIds;
     },
     useSaveChangesConfirmationDialog: function() {
         return useSaveChangesConfirmationDialog;
     },
-    useDiscardChangesConfirmationDialog: function() {
-        return useDiscardChangesConfirmationDialog;
-    },
-    useEditJsonDialog: function() {
-        return useEditJsonDialog;
+    useViewPanel: function() {
+        return useViewPanel;
     }
 });
 const _react = require("react");
 const _DashboardProvider = require("./DashboardProvider");
-const selectEditMode = ({ isEditMode , setEditMode  })=>({
+const selectEditMode = ({ isEditMode, setEditMode })=>({
         isEditMode,
         setEditMode
     });
 function useEditMode() {
     return (0, _DashboardProvider.useDashboardStore)(selectEditMode);
 }
-const selectDashboardActions = ({ setDashboard , openAddPanelGroup , openAddPanel  })=>({
+const selectDashboardActions = ({ setDashboard, openAddPanelGroup, openAddPanel })=>({
         setDashboard,
         openAddPanelGroup,
         openAddPanel
     });
 function useDashboardActions() {
-    const { setDashboard , openAddPanelGroup , openAddPanel  } = (0, _DashboardProvider.useDashboardStore)(selectDashboardActions);
+    const { setDashboard, openAddPanelGroup, openAddPanel } = (0, _DashboardProvider.useDashboardStore)(selectDashboardActions);
     return {
         setDashboard,
         openAddPanelGroup: ()=>openAddPanelGroup(),
@@ -122,15 +125,15 @@ function usePanelGroup(panelGroupId) {
     }
     return panelGroup;
 }
-const selectPanelGroupActions = ({ openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  })=>({
+const selectPanelGroupActions = ({ openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts })=>({
         openEditPanelGroup,
         deletePanelGroup,
         openAddPanel,
         updatePanelGroupLayouts
     });
 function usePanelGroupActions(panelGroupId) {
-    const { moveUp , moveDown  } = useMovePanelGroup(panelGroupId);
-    const { openEditPanelGroup , deletePanelGroup , openAddPanel , updatePanelGroupLayouts  } = (0, _DashboardProvider.useDashboardStore)(selectPanelGroupActions);
+    const { moveUp, moveDown } = useMovePanelGroup(panelGroupId);
+    const { openEditPanelGroup, deletePanelGroup, openAddPanel, updatePanelGroupLayouts } = (0, _DashboardProvider.useDashboardStore)(selectPanelGroupActions);
     return {
         openEditPanelGroup: ()=>openEditPanelGroup(panelGroupId),
         deletePanelGroup: ()=>deletePanelGroup(panelGroupId),
@@ -165,14 +168,14 @@ const selectPanelGroupEditor = (state)=>state.panelGroupEditor;
 function usePanelGroupEditor() {
     return (0, _DashboardProvider.useDashboardStore)(selectPanelGroupEditor);
 }
-const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  })=>({
+const selectDeletePanelGroupDialog = ({ deletePanelGroupDialog, openDeletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup })=>({
         deletePanelGroupDialog,
         openDeletePanelGroupDialog,
         closeDeletePanelGroupDialog,
         deletePanelGroup
     });
 function useDeletePanelGroupDialog() {
-    const { deletePanelGroupDialog , openDeletePanelGroupDialog , closeDeletePanelGroupDialog , deletePanelGroup  } = (0, _DashboardProvider.useDashboardStore)(selectDeletePanelGroupDialog);
+    const { deletePanelGroupDialog, openDeletePanelGroupDialog, closeDeletePanelGroupDialog, deletePanelGroup } = (0, _DashboardProvider.useDashboardStore)(selectDeletePanelGroupDialog);
     return {
         deletePanelGroupDialog,
         deletePanelGroup,
@@ -181,10 +184,9 @@ function useDeletePanelGroupDialog() {
     };
 }
 function usePanel(panelGroupItemId) {
-    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+    const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;
     const panel = (0, _DashboardProvider.useDashboardStore)((0, _react.useCallback)((store)=>{
-        var _store_panelGroups_panelGroupId;
-        const panelKey = (_store_panelGroups_panelGroupId = store.panelGroups[panelGroupId]) === null || _store_panelGroups_panelGroupId === void 0 ? void 0 : _store_panelGroups_panelGroupId.itemPanelKeys[panelGroupLayoutId];
+        const panelKey = store.panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];
         if (panelKey === undefined) return;
         return store.panels[panelKey];
     }, [
@@ -196,24 +198,26 @@ function usePanel(panelGroupItemId) {
     }
     return panel;
 }
-const selectPanelActions = ({ openEditPanel , openDeletePanelDialog , duplicatePanel  })=>({
+const selectPanelActions = ({ openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel })=>({
         openEditPanel,
         openDeletePanelDialog,
-        duplicatePanel
+        duplicatePanel,
+        setViewPanel
     });
 function usePanelActions(panelGroupItemId) {
-    const { openEditPanel , openDeletePanelDialog , duplicatePanel  } = (0, _DashboardProvider.useDashboardStore)(selectPanelActions);
+    const { openEditPanel, openDeletePanelDialog, duplicatePanel, setViewPanel } = (0, _DashboardProvider.useDashboardStore)(selectPanelActions);
     return {
         openEditPanel: ()=>openEditPanel(panelGroupItemId),
         openDeletePanelDialog: ()=>openDeletePanelDialog(panelGroupItemId),
-        duplicatePanel: ()=>duplicatePanel(panelGroupItemId)
+        duplicatePanel: ()=>duplicatePanel(panelGroupItemId),
+        viewPanel: (panelGroupItemId)=>setViewPanel(panelGroupItemId)
     };
 }
 const selectPanelEditor = (state)=>state.panelEditor;
 function usePanelEditor() {
     return (0, _DashboardProvider.useDashboardStore)(selectPanelEditor);
 }
-const selectDeletePanelDialog = ({ deletePanelDialog , deletePanel , closeDeletePanelDialog  })=>({
+const selectDeletePanelDialog = ({ deletePanelDialog, deletePanel, closeDeletePanelDialog })=>({
         deletePanelDialog,
         deletePanel,
         closeDeletePanelDialog
@@ -226,7 +230,11 @@ const selectDashboardDuration = (state)=>state.duration;
 function useDashboardDuration() {
     return (0, _DashboardProvider.useDashboardStore)(selectDashboardDuration);
 }
-const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog , openSaveChangesConfirmationDialog , closeSaveChangesConfirmationDialog  })=>({
+const selectViewPanel = (state)=>state.getViewPanel();
+function useViewPanel() {
+    return (0, _DashboardProvider.useDashboardStore)(selectViewPanel);
+}
+const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog, openSaveChangesConfirmationDialog, closeSaveChangesConfirmationDialog })=>({
         saveChangesConfirmationDialog,
         openSaveChangesConfirmationDialog,
         closeSaveChangesConfirmationDialog
@@ -234,7 +242,7 @@ const selectSaveChangesConfirmationDialog = ({ saveChangesConfirmationDialog , o
 function useSaveChangesConfirmationDialog() {
     return (0, _DashboardProvider.useDashboardStore)(selectSaveChangesConfirmationDialog);
 }
-const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDialog , openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  })=>({
+const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDialog, openDiscardChangesConfirmationDialog, closeDiscardChangesConfirmationDialog })=>({
         discardChangesConfirmationDialog,
         openDiscardChangesConfirmationDialog,
         closeDiscardChangesConfirmationDialog
@@ -242,7 +250,7 @@ const selectDiscardChangesConfirmationDialog = ({ discardChangesConfirmationDial
 function useDiscardChangesConfirmationDialog() {
     return (0, _DashboardProvider.useDashboardStore)(selectDiscardChangesConfirmationDialog);
 }
-const selectEditJsonDialog = ({ editJsonDialog , openEditJsonDialog , closeEditJsonDialog  })=>({
+const selectEditJsonDialog = ({ editJsonDialog, openEditJsonDialog, closeEditJsonDialog })=>({
         editJsonDialog,
         openEditJsonDialog,
         closeEditJsonDialog

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

@@ -22,7 +22,7 @@ Object.defineProperty(exports, "createDeletePanelGroupSlice", {
 });
 const createDeletePanelGroupSlice = (set, get)=>({
         deletePanelGroup (panelGroupId) {
-            const { panelGroups , panelGroupOrder  } = get();
+            const { panelGroups, panelGroupOrder } = get();
             const group = panelGroups[panelGroupId];
             const idIndex = panelGroupOrder.findIndex((id)=>id === panelGroupId);
             if (group === undefined || idIndex === -1) {

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

@@ -25,7 +25,7 @@ function createDeletePanelSlice() {
     return (set, get)=>({
             deletePanel (panelGroupItemId) {
                 set((draft)=>{
-                    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                    const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;
                     const existingGroup = draft.panelGroups[panelGroupId];
                     if (existingGroup === undefined) {
                         throw new Error(`Missing panel group ${panelGroupId}`);
@@ -45,8 +45,8 @@ function createDeletePanelSlice() {
                 });
             },
             openDeletePanelDialog (panelGroupItemId) {
-                const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
-                const { panels , panelGroups  } = get();
+                const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;
+                const { panels, panelGroups } = get();
                 const panelGroup = panelGroups[panelGroupId];
                 if (panelGroup === undefined) {
                     throw new Error(`Panel group not found ${panelGroupId}`);
@@ -60,11 +60,10 @@ function createDeletePanelSlice() {
                     throw new Error(`Could not find panel ${panelKey}`);
                 }
                 set((state)=>{
-                    var _panelGroup_title;
                     state.deletePanelDialog = {
                         panelGroupItemId: panelGroupItemId,
                         panelName: panel.spec.display.name,
-                        panelGroupName: (_panelGroup_title = panelGroup.title) !== null && _panelGroup_title !== void 0 ? _panelGroup_title : ''
+                        panelGroupName: panelGroup.title ?? ''
                     };
                 });
             },

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

@@ -28,7 +28,7 @@ function createDuplicatePanelSlice() {
                 set((state)=>{
                     const panels = state.panels;
                     // Figure out the panel key at that location
-                    const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
+                    const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;
                     const group = state.panelGroups[panelGroupId];
                     if (group === undefined) {
                         throw new Error(`Missing panel group ${panelGroupId}`);

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

@@ -20,20 +20,18 @@ Object.defineProperty(exports, "createPanelEditorSlice", {
         return createPanelEditorSlice;
     }
 });
-const _panelUtils = require("../../utils/panelUtils");
+const _utils = require("../../utils");
 const _common = require("./common");
 const _panelgroupslice = require("./panel-group-slice");
 function createPanelEditorSlice() {
     // Return the state creator function for Zustand that uses the panels provided as intitial state
-    return (set, get)=>{
-        return {
+    return (set, get)=>({
             panelEditor: undefined,
             openEditPanel (panelGroupItemId) {
-                var _panelGroups_panelGroupId;
-                const { panels , panelGroups  } = get();
+                const { panels, panelGroups } = get();
                 // Figure out the panel key at that location
-                const { panelGroupId , panelGroupItemLayoutId: panelGroupLayoutId  } = panelGroupItemId;
-                const panelKey = (_panelGroups_panelGroupId = panelGroups[panelGroupId]) === null || _panelGroups_panelGroupId === void 0 ? void 0 : _panelGroups_panelGroupId.itemPanelKeys[panelGroupLayoutId];
+                const { panelGroupId, panelGroupItemLayoutId: panelGroupLayoutId } = panelGroupItemId;
+                const panelKey = panelGroups[panelGroupId]?.itemPanelKeys[panelGroupLayoutId];
                 if (panelKey === undefined) {
                     throw new Error(`Could not find Panel Group item ${panelGroupItemId}`);
                 }
@@ -77,7 +75,7 @@ function createPanelEditorSlice() {
                             newGroup.itemLayouts.push({
                                 i: existingLayout.i,
                                 x: 0,
-                                y: (0, _panelUtils.getYForNewRow)(newGroup),
+                                y: (0, _utils.getYForNewRow)(newGroup),
                                 w: existingLayout.w,
                                 h: existingLayout.h
                             });
@@ -96,25 +94,23 @@ function createPanelEditorSlice() {
                 });
             },
             openAddPanel (panelGroupId) {
-                var _get_initialValues;
                 // If a panel group isn't supplied, add to the first group or create a group if there aren't any
                 let newGroup = undefined;
-                panelGroupId !== null && panelGroupId !== void 0 ? panelGroupId : panelGroupId = get().panelGroupOrder[0];
+                panelGroupId ??= get().panelGroupOrder[0];
                 if (panelGroupId === undefined) {
                     newGroup = (0, _panelgroupslice.createEmptyPanelGroup)();
                     newGroup.title = 'Panel Group';
                     panelGroupId = newGroup.id;
                 }
-                var _get_initialValues_panelDefinition;
                 const editorState = {
                     mode: 'create',
                     initialValues: {
                         groupId: panelGroupId,
-                        panelDefinition: (_get_initialValues_panelDefinition = (_get_initialValues = get().initialValues) === null || _get_initialValues === void 0 ? void 0 : _get_initialValues.panelDefinition) !== null && _get_initialValues_panelDefinition !== void 0 ? _get_initialValues_panelDefinition : (0, _common.createPanelDefinition)()
+                        panelDefinition: get().initialValues?.panelDefinition ?? (0, _common.createPanelDefinition)()
                     },
                     applyChanges: (next)=>{
                         const name = next.panelDefinition.spec.display.name;
-                        const panelKey = (0, _panelUtils.getValidPanelKey)(name, get().panels);
+                        const panelKey = (0, _utils.getValidPanelKey)(name, get().panels);
                         set((state)=>{
                             // Add a panel
                             state.panels[panelKey] = next.panelDefinition;
@@ -126,7 +122,7 @@ function createPanelEditorSlice() {
                             const layout = {
                                 i: (0, _common.generateId)().toString(),
                                 x: 0,
-                                y: (0, _panelUtils.getYForNewRow)(group),
+                                y: (0, _utils.getYForNewRow)(group),
                                 w: 12,
                                 h: 6
                             };
@@ -149,6 +145,5 @@ function createPanelEditorSlice() {
                     state.panelEditor = editorState;
                 });
             }
-        };
-    };
+        });
 }

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

@@ -55,12 +55,11 @@ const createPanelGroupEditorSlice = (set, get)=>({
             if (existingGroup === undefined) {
                 throw new Error(`Panel group with Id ${panelGroupId} does not exist`);
             }
-            var _existingGroup_title;
             // Create the editor state
             const editor = {
                 mode: 'Edit',
                 initialValues: {
-                    title: (_existingGroup_title = existingGroup.title) !== null && _existingGroup_title !== void 0 ? _existingGroup_title : '',
+                    title: existingGroup.title ?? '',
                     isCollapsed: existingGroup.isCollapsed
                 },
                 applyChanges (next) {

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

@@ -21,8 +21,8 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    createPanelGroupSlice: function() {
-        return createPanelGroupSlice;
+    addPanelGroup: function() {
+        return addPanelGroup;
     },
     convertLayoutsToPanelGroups: function() {
         return convertLayoutsToPanelGroups;
@@ -30,14 +30,20 @@ _export(exports, {
     createEmptyPanelGroup: function() {
         return createEmptyPanelGroup;
     },
-    addPanelGroup: function() {
-        return addPanelGroup;
+    createPanelGroupSlice: function() {
+        return createPanelGroupSlice;
+    },
+    isPanelGroupItemIdEqual: function() {
+        return isPanelGroupItemIdEqual;
     }
 });
 const _core = require("@perses-dev/core");
 const _common = require("./common");
+function isPanelGroupItemIdEqual(a, b) {
+    return a?.panelGroupId === b?.panelGroupId && a?.panelGroupItemLayoutId === b?.panelGroupItemLayoutId;
+}
 function createPanelGroupSlice(layouts) {
-    const { panelGroups , panelGroupOrder  } = convertLayoutsToPanelGroups(layouts);
+    const { panelGroups, panelGroupOrder } = convertLayoutsToPanelGroups(layouts);
     // Return the state creator function for Zustand
     return (set)=>({
             panelGroups,
@@ -75,7 +81,6 @@ function convertLayoutsToPanelGroups(layouts) {
     const panelGroups = {};
     const panelGroupIdOrder = [];
     for (const layout of layouts){
-        var _layout_spec_display, _layout_spec_display_collapse, _layout_spec_display1;
         const itemLayouts = [];
         const itemPanelKeys = {};
         // Split layout information from panel keys to make it easier to update just layouts on move/resize of panels
@@ -94,8 +99,8 @@ function convertLayoutsToPanelGroups(layouts) {
         const panelGroupId = (0, _common.generateId)();
         panelGroups[panelGroupId] = {
             id: panelGroupId,
-            isCollapsed: ((_layout_spec_display = layout.spec.display) === null || _layout_spec_display === void 0 ? void 0 : (_layout_spec_display_collapse = _layout_spec_display.collapse) === null || _layout_spec_display_collapse === void 0 ? void 0 : _layout_spec_display_collapse.open) === false,
-            title: (_layout_spec_display1 = layout.spec.display) === null || _layout_spec_display1 === void 0 ? void 0 : _layout_spec_display1.title,
+            isCollapsed: layout.spec.display?.collapse?.open === false,
+            title: layout.spec.display?.title,
             itemLayouts,
             itemPanelKeys
         };

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

@@ -0,0 +1,79 @@
+// Copyright 2023 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, "createViewPanelSlice", {
+    enumerable: true,
+    get: function() {
+        return createViewPanelSlice;
+    }
+});
+function createViewPanelSlice(viewPanelRef, setViewPanelRef) {
+    return (set, get)=>({
+            viewPanel: {
+                panelGroupItemId: undefined,
+                panelRef: viewPanelRef
+            },
+            getViewPanel () {
+                return getViewPanelGroupId(get().panelGroups, get().viewPanel.panelGroupItemId, get().viewPanel.panelRef);
+            },
+            setViewPanel (panelGroupItemId) {
+                set((state)=>{
+                    state.viewPanel = {
+                        panelRef: undefined,
+                        panelGroupItemId: panelGroupItemId
+                    };
+                    const panelRef = findPanelRefOfPanelGroupItemId(get().panelGroups, panelGroupItemId);
+                    if (setViewPanelRef) {
+                        setViewPanelRef(panelRef);
+                    }
+                });
+            }
+        });
+}
+function getViewPanelGroupId(panelGroups, panelGroupItemId, panelRef) {
+    if (panelGroupItemId) {
+        return panelGroupItemId;
+    }
+    if (panelRef) {
+        return findPanelGroupItemIdOfPanelRef(panelGroups, panelRef);
+    }
+    return undefined;
+}
+// Find the PanelGroupItemId of a Panel from a PanelRef
+function findPanelGroupItemIdOfPanelRef(panelGroups, panelRef) {
+    for (const panelGroup of Object.values(panelGroups)){
+        const itemPanel = Object.entries(panelGroup.itemPanelKeys ?? []).find(([_, value])=>value === panelRef);
+        if (itemPanel) {
+            const [key] = itemPanel;
+            return {
+                panelGroupId: panelGroup.id,
+                panelGroupItemLayoutId: key
+            };
+        }
+    }
+    return undefined;
+}
+// Find the PanelRef from a PanelGroupItemId
+function findPanelRefOfPanelGroupItemId(panelGroups, panelGroupItemId) {
+    if (!panelGroupItemId) {
+        return undefined;
+    }
+    const panelGroup = panelGroups[panelGroupItemId.panelGroupId];
+    if (panelGroup) {
+        return panelGroup.itemPanelKeys[panelGroupItemId.panelGroupItemLayoutId];
+    }
+    return undefined;
+}

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -25,16 +25,15 @@ const _react = require("react");
 const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
-    const { projectName , datasourceApi , onCreate , children  } = props;
+    const { projectName, datasourceApi, onCreate, children } = props;
     const [dashboardResource, setDashboardResource] = (0, _react.useState)(props.dashboardResource);
-    var _props_savedDatasources;
-    const [savedDatasources, setSavedDatasources] = (0, _react.useState)((_props_savedDatasources = props.savedDatasources) !== null && _props_savedDatasources !== void 0 ? _props_savedDatasources : {});
-    const project = projectName !== null && projectName !== void 0 ? projectName : dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.metadata.project;
-    const { getPlugin , listPluginMetadata  } = (0, _pluginsystem.usePluginRegistry)();
+    const [savedDatasources, setSavedDatasources] = (0, _react.useState)(props.savedDatasources ?? {});
+    const project = projectName ?? dashboardResource?.metadata.project;
+    const { getPlugin, listPluginMetadata } = (0, _pluginsystem.usePluginRegistry)();
     const findDatasource = (0, _core.useEvent)(async (selector)=>{
         // Try to find it in dashboard spec
         if (dashboardResource) {
-            const { datasources  } = dashboardResource.spec;
+            const { datasources } = dashboardResource.spec;
             const dashboardDatasource = findDashboardDatasource(datasources, selector);
             if (dashboardDatasource !== undefined) {
                 return {
@@ -74,15 +73,15 @@ function DatasourceStoreProvider(props) {
     });
     // Gets a datasource spec for a given selector
     const getDatasource = (0, _react.useCallback)(async (selector)=>{
-        const { spec  } = await findDatasource(selector);
+        const { spec } = await findDatasource(selector);
         return spec;
     }, [
         findDatasource
     ]);
     // Given a Datasource selector, finds the spec for it and then uses its corresponding plugin the create a client
     const getDatasourceClient = (0, _react.useCallback)(async function getClient(selector) {
-        const { kind  } = selector;
-        const [{ spec , proxyUrl  }, plugin] = await Promise.all([
+        const { kind } = selector;
+        const [{ spec, proxyUrl }, plugin] = await Promise.all([
             findDatasource(selector),
             getPlugin('Datasource', kind)
         ]);
@@ -99,24 +98,26 @@ function DatasourceStoreProvider(props) {
         getPlugin,
         onCreate
     ]);
-    const listDatasourceSelectItems = (0, _core.useEvent)(async (datasourcePluginKind)=>{
+    const listDatasourceSelectItems = (0, _core.useEvent)(async (datasourcePluginName)=>{
         const [pluginMetadata, datasources, globalDatasources] = await Promise.all([
-            listPluginMetadata('Datasource'),
-            project ? datasourceApi.listDatasources(project, datasourcePluginKind) : [],
-            datasourceApi.listGlobalDatasources(datasourcePluginKind)
+            listPluginMetadata([
+                'Datasource'
+            ]),
+            project ? datasourceApi.listDatasources(project, datasourcePluginName) : [],
+            datasourceApi.listGlobalDatasources(datasourcePluginName)
         ]);
         // Find the metadata for the plugin type they asked for, so we can use it for the name of the default datasource
-        const datasourcePluginMetadata = pluginMetadata.find((metadata)=>metadata.kind === datasourcePluginKind);
+        const datasourcePluginMetadata = pluginMetadata.find((metadata)=>metadata.spec.name === datasourcePluginName);
         if (datasourcePluginMetadata === undefined) {
-            throw new Error(`Could not find a Datasource plugin with kind '${datasourcePluginKind}'`);
+            throw new Error(`Could not find a Datasource plugin with kind '${datasourcePluginName}'`);
         }
         // Get helper for computing results properly
-        const { results , addItem  } = buildDatasourceSelectItemGroups(datasourcePluginMetadata.display.name);
+        const { results, addItem } = buildDatasourceSelectItemGroups(datasourcePluginMetadata.spec.display.name);
         // Start with dashboard datasources with the highest precedence
-        if (dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.spec.datasources) {
+        if (dashboardResource?.spec.datasources) {
             for(const selectorName in dashboardResource.spec.datasources){
                 const spec = dashboardResource.spec.datasources[selectorName];
-                if (spec === undefined || spec.plugin.kind !== datasourcePluginKind) continue;
+                if (spec === undefined || spec.plugin.kind !== datasourcePluginName) continue;
                 const saved = selectorName in savedDatasources;
                 addItem({
                     spec,
@@ -149,8 +150,7 @@ function DatasourceStoreProvider(props) {
         return results;
     });
     const getLocalDatasources = (0, _react.useCallback)(()=>{
-        var _dashboardResource_spec_datasources;
-        return (_dashboardResource_spec_datasources = dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.spec.datasources) !== null && _dashboardResource_spec_datasources !== void 0 ? _dashboardResource_spec_datasources : {};
+        return dashboardResource?.spec.datasources ?? {};
     }, [
         dashboardResource
     ]);
@@ -161,7 +161,13 @@ function DatasourceStoreProvider(props) {
     ]);
     const setLocalDatasources = (0, _react.useCallback)((datasources)=>{
         if (dashboardResource) {
-            setDashboardResource({
+            setDashboardResource(dashboardResource.kind === 'Dashboard' ? {
+                ...dashboardResource,
+                spec: {
+                    ...dashboardResource.spec,
+                    datasources: datasources
+                }
+            } : {
                 ...dashboardResource,
                 spec: {
                     ...dashboardResource.spec,
@@ -229,9 +235,8 @@ function findDashboardDatasource(dashboardDatasources, selector) {
     let explicitDefaultAdded = false;
     const groupIndices = {};
     let currentGroupIndex = 1; // 0 is the default group, always there as it contains at least the first item.
-    const addItem = ({ spec , selectorName , selectorGroup: group , editLink , saved  })=>{
-        var _spec_display;
-        group = group !== null && group !== void 0 ? group : '';
+    const addItem = ({ spec, selectorName, selectorGroup: group, editLink, saved })=>{
+        group = group ?? '';
         // Ensure the default group is always present as soon as an item is added.
         if (isFirst) {
             results.push({
@@ -239,9 +244,8 @@ function findDashboardDatasource(dashboardDatasources, selector) {
                 items: []
             });
         }
-        var _groupIndices_group;
         // Create the group if necessary
-        let selectItemGroup = results[(_groupIndices_group = groupIndices[group]) !== null && _groupIndices_group !== void 0 ? _groupIndices_group : -1];
+        let selectItemGroup = results[groupIndices[group] ?? -1];
         if (!selectItemGroup) {
             groupIndices[group] = currentGroupIndex;
             selectItemGroup = {
@@ -254,9 +258,8 @@ function findDashboardDatasource(dashboardDatasources, selector) {
         }
         // Add item to the group
         const isOverridden = usedNames.has(selectorName);
-        var _spec_display_name;
         selectItemGroup.items.push({
-            name: (_spec_display_name = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.name) !== null && _spec_display_name !== void 0 ? _spec_display_name : selectorName,
+            name: spec.display?.name ?? selectorName,
             overridden: isOverridden,
             saved,
             selector: {
@@ -285,9 +288,7 @@ function findDashboardDatasource(dashboardDatasources, selector) {
         // At the end, we make sure the overriding item(s) is well flagged so
         if (isOverridden) {
             for(let i = explicitDefaultAdded ? 1 : 0; i < currentGroupIndex; i++){
-                var _results_i;
-                var _results_i_items;
-                ((_results_i_items = (_results_i = results[i]) === null || _results_i === void 0 ? void 0 : _results_i.items) !== null && _results_i_items !== void 0 ? _results_i_items : []).filter((item)=>item.selector.name === selectorName).forEach((item)=>{
+                (results[i]?.items ?? []).filter((item)=>item.selector.name === selectorName).forEach((item)=>{
                     item.overriding = true;
                 });
             }