@perses-dev/dashboards 0.7.1 → 0.8.1

package/dist/components/TimeRangeControls/TimeRangeControls.test.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import userEvent from"@testing-library/user-event";import{getDefaultTimeRange}from"@perses-dev/core";import{screen}from"@testing-library/react";import{renderWithContext}from"../../test";import testDashboard from"../../test/testDashboard";import{DashboardProvider,TimeRangeProvider,QueryStringProvider}from"../../context";import{TimeRangeControls}from"./TimeRangeControls";describe("TimeRangeControls",(()=>{let e;beforeEach((()=>{e={dashboardSpec:testDashboard.spec}}));const t=()=>{const t=new URLSearchParams,r=getDefaultTimeRange(e.dashboardSpec.duration,t);renderWithContext(_jsx(QueryStringProvider,{queryString:t,children:_jsx(DashboardProvider,{initialState:e,children:_jsx(TimeRangeProvider,{initialTimeRange:r,children:_jsx(TimeRangeControls,{})})})}))};it("should render correct initial relative time shortcut",(async()=>{t(),expect(screen.getByText("Last 1 day")).toBeInTheDocument()})),it("should be able to select the first option",(()=>{t();const e=screen.getByRole("button");userEvent.click(e);const r=screen.getByRole("option",{name:"Last 5 minutes"});userEvent.click(r),expect(e).toHaveTextContent(/5 minutes/i)}))}));

package/dist/components/TimeRangeControls/index.d.ts

@@ -0,0 +1,2 @@
+export * from './TimeRangeControls';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/TimeRangeControls/index.d.ts.map

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

package/dist/components/TimeRangeControls/index.js

@@ -0,0 +1 @@
+export*from"./TimeRangeControls";

package/dist/components/Variables/Variable.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { VariableName } from '@perses-dev/core';
+declare type TemplateVariableProps = {
+    name: VariableName;
+};
+export declare function TemplateVariable({ name }: TemplateVariableProps): JSX.Element;
+export {};
+//# sourceMappingURL=Variable.d.ts.map

package/dist/components/Variables/Variable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Variable.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/Variable.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAE,YAAY,EAA0B,MAAM,kBAAkB,CAAC;AAGxE,aAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,YAAY,CAAC;CACpB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAAE,IAAI,EAAE,EAAE,qBAAqB,eAW/D"}

package/dist/components/Variables/Variable.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useEffect,useRef}from"react";import{Select,FormControl,InputLabel,MenuItem,Box,LinearProgress,IconButton,TextField}from"@mui/material";import{Reload}from"mdi-material-ui";import{useTemplateVariable,useTemplateVariableActions,useTemplateVariableStore}from"../../context";export function TemplateVariable({name:e}){var a;const l=null===(a=useTemplateVariable(e).definition)||void 0===a?void 0:a.kind;switch(l){case"TextVariable":return _jsx(TextVariable,{name:e});case"ListVariable":return _jsx(ListVariable,{name:e})}return _jsxs("div",{children:["Unsupported Variable Kind: $",l]})}function ListVariable({name:e}){var a,l,t,i;const r=useTemplateVariable(e),n=r.definition,{setVariableValue:o,loadTemplateVariable:s}=useTemplateVariableActions(),u=!0===(null==n?void 0:n.options.allowMultiple);useEffect((()=>{s(e)}),[e,s]);let d=null===(a=r.state)||void 0===a?void 0:a.value;return u&&!Array.isArray(d)&&(d=[]),_jsxs(Box,{display:"flex",children:[_jsxs(FormControl,{children:[_jsx(InputLabel,{id:e,children:e}),_jsx(Select,{id:e,label:e,value:d,onChange:a=>{o(e,a.target.value)},multiple:u,children:null===(t=null===(l=r.state)||void 0===l?void 0:l.options)||void 0===t?void 0:t.map((e=>_jsx(MenuItem,{value:e.value,children:e.label},e.value)))}),(null===(i=r.state)||void 0===i?void 0:i.loading)&&_jsx(LinearProgress,{})]}),_jsx(IconButton,{onClick:()=>s(e),children:_jsx(Reload,{})})]})}function TextVariable({name:e}){const{state:a}=useTemplateVariable(e),l=useTemplateVariableStore().setVariableValue,t=useRef(null);return _jsx(TextField,{ref:t,defaultValue:null==a?void 0:a.value,onBlur:a=>l(e,a.target.value),placeholder:e,label:e})}

package/dist/components/Variables/VariableList.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function TemplateVariableList(): JSX.Element;
+//# sourceMappingURL=VariableList.d.ts.map

package/dist/components/Variables/VariableList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"VariableList.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/VariableList.tsx"],"names":[],"mappings":";AA8BA,wBAAgB,oBAAoB,gBA2CnC"}

package/dist/components/Variables/VariableList.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import{Button,Stack,Box,Drawer,TableContainer,TableBody,TableRow,TableCell,Table,Paper,TableHead}from"@mui/material";import{useTemplateVariableDefinitions,useEditMode}from"../../context";import{TemplateVariable}from"./Variable";export function TemplateVariableList(){const[e,a]=useState(!1),l=useTemplateVariableDefinitions(),{isEditMode:i}=useEditMode();return _jsxs(Box,{m:2,children:[_jsx(Drawer,{anchor:"right",open:e,onClose:()=>a(!1),children:_jsxs(Box,{width:900,p:4,children:[_jsx(TableContainer,{component:Paper,children:_jsxs(Table,{sx:{minWidth:650},"aria-label":"simple table",children:[_jsx(TableHead,{children:_jsxs(TableRow,{children:[_jsx(TableCell,{children:"Variable Name"}),_jsx(TableCell,{align:"right",children:"Type"})]})}),_jsx(TableBody,{children:l.map((e=>_jsxs(TableRow,{sx:{"&:last-child td, &:last-child th":{border:0}},children:[_jsx(TableCell,{component:"th",scope:"row",sx:{fontWeight:"bold"},children:e.name}),_jsx(TableCell,{align:"right",children:e.kind})]},e.name)))})]})}),_jsx("pre",{children:JSON.stringify(l,null,2)})]})}),_jsx(Box,{display:"flex",justifyContent:"space-between",children:_jsxs(Stack,{direction:"row",spacing:2,children:[l.map((e=>_jsx(Box,{children:_jsx(TemplateVariable,{name:e.name},e.name)},e.name))),i&&_jsx(Button,{onClick:()=>a(!0),children:"Modify Variables"})]})})]})}

package/dist/components/Variables/index.d.ts

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

package/dist/components/Variables/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Variables/index.tsx"],"names":[],"mappings":"AAaA,cAAc,YAAY,CAAC;AAC3B,cAAc,gBAAgB,CAAC"}

package/dist/components/Variables/index.js

@@ -0,0 +1 @@
+export*from"./Variable";export*from"./VariableList";

package/dist/components/index.d.ts

@@ -1,7 +1,6 @@
 export * from './Dashboard';
 export * from './GridLayout';
-export * from './Panel/Panel';
+export * from './Panel';
 export * from './TimeRangeControls';
-export * from './VariableAutocomplete';
-export * from './VariableList';
+export * from './Variables';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAaA,cAAc,aAAa,CAAC;AAC5B,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,qBAAqB,CAAC;AACpC,cAAc,aAAa,CAAC"}

package/dist/components/index.js

@@ -1 +1 @@
-export*from"./Dashboard";export*from"./GridLayout";export*from"./Panel/Panel";export*from"./TimeRangeControls";export*from"./VariableAutocomplete";export*from"./VariableList";
+export*from"./Dashboard";export*from"./GridLayout";export*from"./Panel";export*from"./TimeRangeControls";export*from"./Variables";

package/dist/context/DashboardAppSlice.d.ts

@@ -0,0 +1,26 @@
+interface PanelDrawer {
+    groupIndex?: number;
+    panelKey?: string;
+}
+interface PanelGroupDialog {
+    groupIndex?: number;
+}
+export interface DashboardAppSlice {
+    panelDrawer?: PanelDrawer;
+    openPanelDrawer: (panelDrawer: PanelDrawer) => void;
+    closePanelDrawer: () => void;
+    panelGroupDialog?: PanelGroupDialog;
+    openPanelGroupDialog: (groupIndex?: number) => void;
+    closePanelGroupDialog: () => void;
+}
+export declare const createDashboardAppSlice: import("zustand").StateCreator<DashboardAppSlice, [], [["zustand/immer", never]], DashboardAppSlice>;
+export declare function useDashboardApp(): {
+    panelDrawer: PanelDrawer | undefined;
+    openPanelDrawer: (panelDrawer: PanelDrawer) => void;
+    closePanelDrawer: () => void;
+    panelGroupDialog: PanelGroupDialog | undefined;
+    openPanelGroupDialog: (groupIndex?: number | undefined) => void;
+    closePanelGroupDialog: () => void;
+};
+export {};
+//# sourceMappingURL=DashboardAppSlice.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardAppSlice.d.ts","sourceRoot":"","sources":["../../src/context/DashboardAppSlice.tsx"],"names":[],"mappings":"AAgBA,UAAU,WAAW;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AACD,UAAU,gBAAgB;IACxB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,eAAe,EAAE,CAAC,WAAW,EAAE,WAAW,KAAK,IAAI,CAAC;IACpD,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IACpC,oBAAoB,EAAE,CAAC,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,qBAAqB,EAAE,MAAM,IAAI,CAAC;CACnC;AAED,eAAO,MAAM,uBAAuB,sGAoBjC,CAAC;AAEJ,wBAAgB,eAAe;;;;;;;EAkB9B"}

package/dist/context/DashboardAppSlice.js

@@ -0,0 +1 @@
+import{immer}from"zustand/middleware/immer";import{useDashboardStore}from"./DashboardProvider";export const createDashboardAppSlice=immer((e=>({openPanelDrawer:({groupIndex:a,panelKey:r})=>e((e=>{e.panelDrawer={groupIndex:a,panelKey:r}})),closePanelDrawer:()=>e((e=>{e.panelDrawer=void 0})),openPanelGroupDialog:a=>e((e=>{e.panelGroupDialog={groupIndex:a}})),closePanelGroupDialog:()=>e((e=>{e.panelGroupDialog=void 0}))})));export function useDashboardApp(){return useDashboardStore((({panelDrawer:e,openPanelDrawer:a,closePanelDrawer:r,panelGroupDialog:o,openPanelGroupDialog:l,closePanelGroupDialog:p})=>({panelDrawer:e,openPanelDrawer:a,closePanelDrawer:r,panelGroupDialog:o,openPanelGroupDialog:l,closePanelGroupDialog:p})))}

package/dist/context/DashboardProvider.d.ts

@@ -1,20 +1,15 @@
 /// <reference types="react" />
-import { DashboardSpec, GridItemDefinition, LayoutDefinition, PanelDefinition } from '@perses-dev/core';
-interface DashboardState {
+import { DashboardSpec, LayoutDefinition, PanelDefinition } from '@perses-dev/core';
+import { DashboardAppSlice } from './DashboardAppSlice';
+import { LayoutsSlice } from './LayoutsSlice';
+export interface DashboardStoreState extends DashboardAppSlice, LayoutsSlice {
     dashboard: DashboardSpec;
-    isEditMode: boolean;
     layouts: LayoutDefinition[];
     panels: Record<string, PanelDefinition>;
-}
-interface DashboardActions {
+    updatePanel: (name: string, panel: PanelDefinition, groupIndex?: number) => void;
+    isEditMode: boolean;
     setEditMode: (isEditMode: boolean) => void;
-    setLayouts: (layouts: LayoutDefinition[]) => void;
-    addLayout: (layout: LayoutDefinition) => void;
-    addItemToLayout: (index: number, item: GridItemDefinition) => void;
-    setPanels: (panels: Record<string, PanelDefinition>) => void;
-    addPanel: (name: string, panel: PanelDefinition) => void;
 }
-export declare type DashboardStoreState = DashboardState & DashboardActions;
 export interface DashboardStoreProps {
     dashboardSpec: DashboardSpec;
     isEditMode?: boolean;
@@ -25,13 +20,7 @@ export interface DashboardProviderProps {
 }
 export declare function usePanels(): {
     panels: Record<string, PanelDefinition<import("@perses-dev/core").JsonObject>>;
-    addPanel: (name: string, panel: PanelDefinition<import("@perses-dev/core").JsonObject>) => void;
-};
-export declare function useLayouts(): {
-    layouts: import("@perses-dev/core").GridDefinition[];
-    setLayouts: (layouts: import("@perses-dev/core").GridDefinition[]) => void;
-    addLayout: (layout: import("@perses-dev/core").GridDefinition) => void;
-    addItemToLayout: (index: number, item: GridItemDefinition) => void;
+    updatePanel: (name: string, panel: PanelDefinition<import("@perses-dev/core").JsonObject>, groupIndex?: number | undefined) => void;
 };
 export declare function useEditMode(): {
     isEditMode: boolean;
@@ -40,6 +29,6 @@ export declare function useEditMode(): {
 export declare function useDashboard(): {
     dashboard: DashboardSpec;
 };
+export declare function useDashboardStore<T>(selector: (state: DashboardStoreState) => T): T;
 export declare function DashboardProvider(props: DashboardProviderProps): JSX.Element;
-export {};
 //# sourceMappingURL=DashboardProvider.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../src/context/DashboardProvider.tsx"],"names":[],"mappings":";AAiBA,OAAO,EAAE,aAAa,EAAE,kBAAkB,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAExG,UAAU,cAAc;IACtB,SAAS,EAAE,aAAa,CAAC;IACzB,UAAU,EAAE,OAAO,CAAC;IACpB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;CACzC;AAED,UAAU,gBAAgB;IACxB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;IAC3C,UAAU,EAAE,CAAC,OAAO,EAAE,gBAAgB,EAAE,KAAK,IAAI,CAAC;IAClD,SAAS,EAAE,CAAC,MAAM,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC9C,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;IACnE,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,KAAK,IAAI,CAAC;IAC7D,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,KAAK,IAAI,CAAC;CAC1D;AAED,oBAAY,mBAAmB,GAAG,cAAc,GAAG,gBAAgB,CAAC;AAEpE,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAID,wBAAgB,SAAS;;;EAGxB;AAED,wBAAgB,UAAU;;;;;EAUzB;AAED,wBAAgB,WAAW;;;EAG1B;AAED,wBAAgB,YAAY;;EAU3B;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eA4C9D"}
+{"version":3,"file":"DashboardProvider.d.ts","sourceRoot":"","sources":["../../src/context/DashboardProvider.tsx"],"names":[],"mappings":";AAmBA,OAAO,EAAE,aAAa,EAAsB,gBAAgB,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AACxG,OAAO,EAAE,iBAAiB,EAA2B,MAAM,qBAAqB,CAAC;AACjF,OAAO,EAAE,YAAY,EAAsB,MAAM,gBAAgB,CAAC;AAElE,MAAM,WAAW,mBAAoB,SAAQ,iBAAiB,EAAE,YAAY;IAC1E,SAAS,EAAE,aAAa,CAAC;IACzB,OAAO,EAAE,gBAAgB,EAAE,CAAC;IAC5B,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;IACxC,WAAW,EAAE,CAAC,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,eAAe,EAAE,UAAU,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjF,UAAU,EAAE,OAAO,CAAC;IACpB,WAAW,EAAE,CAAC,UAAU,EAAE,OAAO,KAAK,IAAI,CAAC;CAC5C;AAED,MAAM,WAAW,mBAAmB;IAClC,aAAa,EAAE,aAAa,CAAC;IAC7B,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AACD,MAAM,WAAW,sBAAsB;IACrC,YAAY,EAAE,mBAAmB,CAAC;IAClC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,wBAAgB,SAAS;;;EAExB;AAED,wBAAgB,WAAW;;;EAE1B;AAED,wBAAgB,YAAY;;EAU3B;AAID,wBAAgB,iBAAiB,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,KAAK,EAAE,mBAAmB,KAAK,CAAC,KAM/E;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAqD9D"}

package/dist/context/DashboardProvider.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import create from"zustand";import createZustandContext from"zustand/context";import produce from"immer";const{Provider,useStore}=createZustandContext();export function usePanels(){const{panels:t,addPanel:e}=useStore((({panels:t,addPanel:e})=>({panels:t,addPanel:e})));return{panels:t,addPanel:e}}export function useLayouts(){const{layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a}=useStore((({layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a})=>({layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a})));return{layouts:t,setLayouts:e,addLayout:o,addItemToLayout:a}}export function useEditMode(){const{isEditMode:t,setEditMode:e}=useStore((({isEditMode:t,setEditMode:e})=>({isEditMode:t,setEditMode:e})));return{isEditMode:t,setEditMode:e}}export function useDashboard(){return{dashboard:useStore((t=>produce(t.dashboard,(e=>{e.panels=t.panels,e.layouts=t.layouts}))))}}export function DashboardProvider(t){const{children:e,initialState:{dashboardSpec:o,isEditMode:a}}=t,{layouts:d,panels:s}=o;return _jsx(Provider,{createStore:()=>create((t=>({layouts:d,panels:s,dashboard:o,isEditMode:!!a,setEditMode:e=>t({isEditMode:e}),setLayouts:e=>t({layouts:e}),addLayout:e=>t(produce((t=>{t.layouts.push(e)}))),addItemToLayout:(e,o)=>t(produce((t=>{t.layouts[e].spec.items.push(o)}))),setPanels:e=>t({panels:e}),addPanel:(e,o)=>{t(produce((t=>{t.panels[e]=o}),{}))}}))),children:e})}
+import{jsx as _jsx}from"react/jsx-runtime";import{createStore,useStore}from"zustand";import{immer}from"zustand/middleware/immer";import shallow from"zustand/shallow";import{createContext,useContext}from"react";import produce from"immer";import{createDashboardAppSlice}from"./DashboardAppSlice";import{createLayoutsSlice}from"./LayoutsSlice";export function usePanels(){return useDashboardStore((({panels:e,updatePanel:o})=>({panels:e,updatePanel:o})))}export function useEditMode(){return useDashboardStore((({isEditMode:e,setEditMode:o})=>({isEditMode:e,setEditMode:o})))}export function useDashboard(){return{dashboard:useDashboardStore((e=>produce(e.dashboard,(o=>{o.panels=e.panels,o.layouts=e.layouts}))))}}const DashboardContext=createContext(void 0);export function useDashboardStore(e){const o=useContext(DashboardContext);if(void 0===o)throw new Error("No DashboardContext found. Did you forget a Provider?");return useStore(o,e,shallow)}export function DashboardProvider(e){const{children:o,initialState:{dashboardSpec:t,isEditMode:r}}=e,{layouts:a,panels:s}=t,d=createStore()(immer(((e,o,d)=>({...createDashboardAppSlice(e,o,d,[]),...createLayoutsSlice(e,o,d,[]),layouts:a,panels:s,dashboard:t,updatePanel:(o,t,r=0)=>e((e=>{var a,s;if(void 0===e.panels[o]){let t=0;null===(a=e.layouts[r])||void 0===a||a.spec.items.forEach((e=>{e.y>t&&(t=e.y)}));const d={x:0,y:t+1,width:12,height:6,content:{$ref:`#/spec/panels/${o}`}},i=e.layouts;i&&i[r]&&(null===(s=i[r])||void 0===s||s.spec.items.push(d))}e.panels[o]=t})),isEditMode:!!r,setEditMode:o=>e({isEditMode:o})}))));return _jsx(DashboardContext.Provider,{value:d,children:o})}

package/dist/context/LayoutsSlice.d.ts

@@ -0,0 +1,12 @@
+import { LayoutDefinition, GridItemDefinition } from '@perses-dev/core';
+export interface LayoutsSlice {
+    updateLayout: (layout: LayoutDefinition, index?: number) => void;
+    addItemToLayout: (index: number, item: GridItemDefinition) => void;
+}
+export declare const createLayoutsSlice: import("zustand").StateCreator<LayoutsSlice, [], [["zustand/immer", never]], LayoutsSlice>;
+export declare function useLayouts(): {
+    layouts: import("@perses-dev/core").GridDefinition[];
+    updateLayout: (layout: import("@perses-dev/core").GridDefinition, index?: number | undefined) => void;
+    addItemToLayout: (index: number, item: GridItemDefinition) => void;
+};
+//# sourceMappingURL=LayoutsSlice.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutsSlice.d.ts","sourceRoot":"","sources":["../../src/context/LayoutsSlice.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,kBAAkB,CAAC;AAIxE,MAAM,WAAW,YAAY;IAC3B,YAAY,EAAE,CAAC,MAAM,EAAE,gBAAgB,EAAE,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACjE,eAAe,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACpE;AAED,eAAO,MAAM,kBAAkB,4FAgB5B,CAAC;AAEJ,wBAAgB,UAAU;;;;EAMzB"}

package/dist/context/LayoutsSlice.js

@@ -0,0 +1 @@
+import{immer}from"zustand/middleware/immer";import{useDashboardStore}from"./DashboardProvider";export const createLayoutsSlice=immer((o=>({updateLayout:(t,a)=>o((o=>{void 0===a?o.layouts.unshift(t):o.layouts[a]=t})),addItemToLayout:(t,a)=>o((o=>{var e;const u=o.layouts;u&&u[t]&&(null===(e=u[t])||void 0===e||e.spec.items.push(a))}))})));export function useLayouts(){return useDashboardStore((({layouts:o,updateLayout:t,addItemToLayout:a})=>({layouts:o,updateLayout:t,addItemToLayout:a})))}

package/dist/context/QueryStringProvider.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { QueryString } from '@perses-dev/plugin-system';
+export interface QueryStringProviderProps {
+    queryString: URLSearchParams;
+    setQueryString?: (queryString: URLSearchParams) => void;
+    children?: React.ReactNode;
+}
+/**
+ * Allows apps to provide their own query string implementations
+ */
+export declare function QueryStringProvider(props: QueryStringProviderProps): JSX.Element;
+export declare function useQueryString(): QueryString;
+//# sourceMappingURL=QueryStringProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"QueryStringProvider.d.ts","sourceRoot":"","sources":["../../src/context/QueryStringProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAA8B,MAAM,OAAO,CAAC;AACnD,OAAO,EAAE,WAAW,EAAsB,MAAM,2BAA2B,CAAC;AAE5E,MAAM,WAAW,wBAAwB;IACvC,WAAW,EAAE,eAAe,CAAC;IAC7B,cAAc,CAAC,EAAE,CAAC,WAAW,EAAE,eAAe,KAAK,IAAI,CAAC;IACxD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,wBAAwB,eAMlE;AAED,wBAAgB,cAAc,IAAI,WAAW,CAM5C"}

package/dist/context/QueryStringProvider.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useContext,useMemo}from"react";import{QueryStringContext}from"@perses-dev/plugin-system";export function QueryStringProvider(r){const{queryString:e,setQueryString:t,children:n}=r,o=useMemo((()=>({queryString:e,setQueryString:t})),[e,t]);return _jsx(QueryStringContext.Provider,{value:o,children:n})}export function useQueryString(){const r=useContext(QueryStringContext);if(void 0===r)throw new Error("No QueryStringContext found. Did you forget a Provider?");return r}

package/dist/context/TemplateVariableProvider.d.ts

@@ -0,0 +1,25 @@
+/// <reference types="react" />
+import { VariableStateMap, VariableState, VariableName, VariableValue, VariableDefinition } from '@perses-dev/core';
+declare type TemplateVariableStore = {
+    variableDefinitions: VariableDefinition[];
+    variableState: VariableStateMap;
+    setVariableValue: (variableName: VariableName, value: VariableValue) => void;
+    loadTemplateVariable: (name: VariableName) => Promise<void>;
+};
+export declare function useTemplateVariableValues(variableNames?: string[]): VariableStateMap;
+export declare function useTemplateVariable(name: string): {
+    state: VariableState | undefined;
+    definition: VariableDefinition | undefined;
+};
+export declare function useTemplateVariableActions(): {
+    setVariableValue: (variableName: string, value: VariableValue) => void;
+    loadTemplateVariable: (name: string) => Promise<void>;
+};
+export declare function useTemplateVariableDefinitions(): VariableDefinition[];
+export declare function useTemplateVariableStore(): TemplateVariableStore;
+export declare function TemplateVariableProvider({ children, initialVariableDefinitions, }: {
+    children: React.ReactNode;
+    initialVariableDefinitions?: VariableDefinition[];
+}): JSX.Element;
+export {};
+//# sourceMappingURL=TemplateVariableProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TemplateVariableProvider.d.ts","sourceRoot":"","sources":["../../src/context/TemplateVariableProvider.tsx"],"names":[],"mappings":";AAkBA,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,YAAY,EACZ,aAAa,EAEb,kBAAkB,EAEnB,MAAM,kBAAkB,CAAC;AAE1B,aAAK,qBAAqB,GAAG;IAC3B,mBAAmB,EAAE,kBAAkB,EAAE,CAAC;IAC1C,aAAa,EAAE,gBAAgB,CAAC;IAChC,gBAAgB,EAAE,CAAC,YAAY,EAAE,YAAY,EAAE,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;IAC7E,oBAAoB,EAAE,CAAC,IAAI,EAAE,YAAY,KAAK,OAAO,CAAC,IAAI,CAAC,CAAC;CAC7D,CAAC;AAaF,wBAAgB,yBAAyB,CAAC,aAAa,CAAC,EAAE,MAAM,EAAE,oBAqBjE;AAED,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,MAAM;;;EAU/C;AAED,wBAAgB,0BAA0B;;;EAQzC;AAED,wBAAgB,8BAA8B,yBAG7C;AAED,wBAAgB,wBAAwB,0BAGvC;AA0ED,wBAAgB,wBAAwB,CAAC,EACvC,QAAQ,EACR,0BAA+B,GAChC,EAAE;IACD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,0BAA0B,CAAC,EAAE,kBAAkB,EAAE,CAAC;CACnD,eAQA"}

package/dist/context/TemplateVariableProvider.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{createContext,useContext}from"react";import{createStore,useStore}from"zustand";import{immer}from"zustand/middleware/immer";import{devtools}from"zustand/middleware";import{TemplateVariableContext}from"@perses-dev/plugin-system";import{DEFAULT_ALL_VALUE as ALL_VALUE}from"@perses-dev/core";const TemplateVariableStoreContext=createContext(void 0);function useTemplateVariableStoreCtx(){const e=useContext(TemplateVariableStoreContext);if(!e)throw new Error("TemplateVariableStoreContext not initialized");return e}export function useTemplateVariableValues(e){const t=useTemplateVariableStoreCtx();return useStore(t,(t=>{const a=null!=e?e:Object.keys(t.variableState),r={};return a.forEach((e=>{const a=t.variableState[e];a&&(r[e]=a)})),r}),((e,t)=>JSON.stringify(e)===JSON.stringify(t)))}export function useTemplateVariable(e){const t=useTemplateVariableStoreCtx();return useStore(t,(t=>({state:t.variableState[e],definition:t.variableDefinitions.find((t=>t.name===e))})))}export function useTemplateVariableActions(){const e=useTemplateVariableStoreCtx();return useStore(e,(e=>({setVariableValue:e.setVariableValue,loadTemplateVariable:e.loadTemplateVariable})))}export function useTemplateVariableDefinitions(){const e=useTemplateVariableStoreCtx();return useStore(e,(e=>e.variableDefinitions))}export function useTemplateVariableStore(){const e=useTemplateVariableStoreCtx();return useStore(e)}function PluginProvider({children:e}){const t=useTemplateVariableValues();return _jsx(TemplateVariableContext.Provider,{value:{state:t},children:e})}function createTemplateVariableSrvStore({initialVariableDefinitions:e=[]}){return createStore()(devtools(immer(((t,a)=>({variableState:hydrateTemplateVariableStates(e),variableDefinitions:e,loadTemplateVariable:async e=>{const r=a().variableDefinitions.find((t=>t.name===e));if(!r)return;t((t=>{const a=t.variableState[e];a&&(a.loading=!0)}));const{data:i}=await loadTemplateVariables();r.options.allowAllValue&&i.unshift(getAllOption()),t((t=>{const a=t.variableState[e];a&&(a.options=i,a.loading=!1)}))},setVariableValue:(e,a)=>t((t=>{let r=a;const i=t.variableState[e];i&&(Array.isArray(r)&&r.includes(ALL_VALUE)&&(r=r.at(-1)===ALL_VALUE?[ALL_VALUE]:r.filter((e=>e!==ALL_VALUE))),i.value=r)}))})))))}export function TemplateVariableProvider({children:e,initialVariableDefinitions:t=[]}){const a=createTemplateVariableSrvStore({initialVariableDefinitions:t});return _jsx(TemplateVariableStoreContext.Provider,{value:a,children:_jsx(PluginProvider,{children:e})})}async function loadTemplateVariables(){const e=Math.floor(1e4*Math.random())+1e3;return await new Promise((t=>setTimeout(t,e))),{data:["a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z"].map((e=>({label:e,value:e})))}}function getAllOption(){return{label:"All",value:ALL_VALUE}}function hydrateTemplateVariableState(e){var t,a;const r=e,i={value:null,loading:!1};switch(r.kind){case"TextVariable":i.value=r.options.value;break;case"ListVariable":if(i.options=[],r.options.allowAllValue&&i.options.unshift({label:"All",value:ALL_VALUE}),i.options.length>0&&!i.value){const e=null!==(a=null===(t=i.options[0])||void 0===t?void 0:t.value)&&void 0!==a?a:null;null!==e&&(i.value=r.options.allowMultiple?[e]:e)}}return i}function hydrateTemplateVariableStates(e){const t={};return e.forEach((e=>{t[e.name]=hydrateTemplateVariableState(e)})),t}

package/dist/context/TimeRangeProvider.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TimeRangeValue } from '@perses-dev/core';
+export interface TimeRangeProviderProps {
+    initialTimeRange: TimeRangeValue;
+    children?: React.ReactNode;
+    onTimeRangeChange?: (e: TimeRangeValue) => void;
+}
+/**
+ * Provider implementation that supplies the time range state at runtime.
+ */
+export declare function TimeRangeProvider(props: TimeRangeProviderProps): JSX.Element;
+//# sourceMappingURL=TimeRangeProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TimeRangeProvider.d.ts","sourceRoot":"","sources":["../../src/context/TimeRangeProvider.tsx"],"names":[],"mappings":"AAaA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAE,cAAc,EAA+D,MAAM,kBAAkB,CAAC;AAG/G,MAAM,WAAW,sBAAsB;IACrC,gBAAgB,EAAE,cAAc,CAAC;IACjC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACjD;AAED;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAkD9D"}

package/dist/context/TimeRangeProvider.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useState,useMemo,useCallback}from"react";import{getUnixTime}from"date-fns";import{toAbsoluteTimeRange,isRelativeTimeRange}from"@perses-dev/core";import{TimeRangeContext,useQueryString}from"@perses-dev/plugin-system";export function TimeRangeProvider(e){const{initialTimeRange:t,children:i,onTimeRangeChange:n}=e,{queryString:s,setQueryString:r}=useQueryString(),a=isRelativeTimeRange(t)?toAbsoluteTimeRange(t):t,[o,m]=useState(a),g=useCallback((e=>{if(void 0===n)if(isRelativeTimeRange(e))r?(s.set("start",e.pastDuration),s.delete("end"),r(s)):m(toAbsoluteTimeRange(e));else if(r){const t=1e3*getUnixTime(e.start),i=1e3*getUnixTime(e.end);s.set("start",t.toString()),s.set("end",i.toString()),r(s)}else m(e);else n(e)}),[s,r,n]),u=useMemo((()=>({timeRange:o,setTimeRange:g})),[o,g]);return _jsx(TimeRangeContext.Provider,{value:u,children:i})}

package/dist/context/index.d.ts

@@ -1,4 +1,7 @@
-export * from './TemplateVariablesProvider';
-export * from './TimeRangeStateProvider';
+export * from './DashboardAppSlice';
+export * from './LayoutsSlice';
+export * from './TemplateVariableProvider';
 export * from './DashboardProvider';
+export * from './TimeRangeProvider';
+export * from './QueryStringProvider';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,6BAA6B,CAAC;AAC5C,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/context/index.ts"],"names":[],"mappings":"AAaA,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qBAAqB,CAAC;AACpC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC"}

package/dist/context/index.js

@@ -1 +1 @@
-export*from"./TemplateVariablesProvider";export*from"./TimeRangeStateProvider";export*from"./DashboardProvider";
+export*from"./DashboardAppSlice";export*from"./LayoutsSlice";export*from"./TemplateVariableProvider";export*from"./DashboardProvider";export*from"./TimeRangeProvider";export*from"./QueryStringProvider";

package/dist/css/styles.d.ts

@@ -1,4 +1,5 @@
-declare const _default: {
+import { Theme } from '@mui/material';
+export declare const styles: (theme: Theme) => {
     readonly '&.react-grid-layout': {
         readonly position: "relative";
         readonly transition: "height 200ms ease";
@@ -27,15 +28,15 @@ declare const _default: {
         readonly visibility: "hidden";
     };
     readonly '&.react-grid-item.react-grid-placeholder': {
-        readonly background: "red";
+        readonly background: string;
         readonly opacity: 0.2;
         readonly transitionDuration: "100ms";
         readonly zIndex: 2;
         readonly userSelect: "none";
-        readonly '-webkit-user-select': "none";
-        readonly '-moz-user-select': "none";
-        readonly '-ms-user-select': "none";
-        readonly '-o-user-select': "none";
+        readonly WebkitUserSelect: "none";
+        readonly MozUserSelect: "none";
+        readonly msUserSelect: "none";
+        readonly OUserSelect: "none";
     };
     readonly '&.react-grid-item > .react-resizable-handle': {
         readonly position: "absolute";
@@ -168,5 +169,4 @@ declare const _default: {
         readonly transform: "rotate(45deg)";
     };
 };
-export default _default;
 //# sourceMappingURL=styles.d.ts.map

package/dist/css/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/css/styles.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAaA,wBA8KW"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../src/css/styles.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtC,eAAO,MAAM,MAAM,UAAW,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgLlC,CAAC"}

package/dist/css/styles.js

@@ -1 +1 @@
-export default{"&.react-grid-layout":{position:"relative",transition:"height 200ms ease"},"&.react-grid-item":{transition:"all 200ms ease",transitionProperty:"left, top"},"&.react-grid-item img":{pointerEvents:"none",userSelect:"none"},"&.react-grid-item.cssTransforms":{transitionProperty:"transform"},"&.react-grid-item.resizing":{zIndex:1,willChange:"width, height"},"&.react-grid-item.react-draggable-dragging":{transition:"none",zIndex:3,willChange:"transform"},"&.react-grid-item.dropping":{visibility:"hidden"},"&.react-grid-item.react-grid-placeholder":{background:"red",opacity:.2,transitionDuration:"100ms",zIndex:2,userSelect:"none","-webkit-user-select":"none","-moz-user-select":"none","-ms-user-select":"none","-o-user-select":"none"},"&.react-grid-item > .react-resizable-handle":{position:"absolute",width:"20px",height:"20px"},"&.react-grid-item > .react-resizable-handle::after":{content:'""',position:"absolute",right:"3px",bottom:"3px",width:"5px",height:"5px",borderRight:"2px solid rgba(0, 0, 0, 0.4)",borderBottom:"2px solid rgba(0, 0, 0, 0.4)"},"&.react-resizable-hide > .react-resizable-handle":{display:"none"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw":{bottom:"0",left:"0",cursor:"sw-resize",transform:"rotate(90deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-se":{bottom:"0",right:"0",cursor:"se-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw":{top:"0",left:"0",cursor:"nw-resize",transform:"rotate(180deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne":{top:"0",right:"0",cursor:"ne-resize",transform:"rotate(270deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e":{top:"50%",marginTop:"-10px",cursor:"ew-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-w":{left:"0",transform:"rotate(135deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-e":{right:"0",transform:"rotate(315deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s":{left:"50%",marginLeft:"-10px",cursor:"ns-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-n":{top:"0",transform:"rotate(225deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-s":{bottom:"0",transform:"rotate(45deg)"},"&.react-resizable":{position:"relative"},"&.react-resizable-handle":{position:"absolute",width:"20px",height:"20px",backgroundRepeat:"no-repeat",backgroundOrigin:"content-box",boxSizing:"border-box",backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",backgroundPosition:"bottom right",padding:"0 3px 3px 0"},"&.react-resizable-handle-sw":{bottom:"0",left:"0",cursor:"sw-resize",transform:"rotate(90deg)"},"&.react-resizable-handle-se":{bottom:"0",right:"0",cursor:"se-resize"},"&.react-resizable-handle-nw":{top:"0",left:"0",cursor:"nw-resize",transform:"rotate(180deg)"},"&.react-resizable-handle-ne":{top:"0",right:"0",cursor:"ne-resize",transform:"rotate(270deg)"},"&.react-resizable-handle-w, .react-resizable-handle-e":{top:"50%",marginTop:"-10px",cursor:"ew-resize"},"&.react-resizable-handle-w":{left:"0",transform:"rotate(135deg)"},"&.react-resizable-handle-e":{right:"0",transform:"rotate(315deg)"},"&.react-resizable-handle-n, .react-resizable-handle-s":{left:"50%",marginLeft:"-10px",cursor:"ns-resize"},"&.react-resizable-handle-n":{top:"0",transform:"rotate(225deg)"},"&.react-resizable-handle-s":{bottom:"0",transform:"rotate(45deg)"}};
+export const styles=e=>({"&.react-grid-layout":{position:"relative",transition:"height 200ms ease"},"&.react-grid-item":{transition:"all 200ms ease",transitionProperty:"left, top"},"&.react-grid-item img":{pointerEvents:"none",userSelect:"none"},"&.react-grid-item.cssTransforms":{transitionProperty:"transform"},"&.react-grid-item.resizing":{zIndex:1,willChange:"width, height"},"&.react-grid-item.react-draggable-dragging":{transition:"none",zIndex:3,willChange:"transform"},"&.react-grid-item.dropping":{visibility:"hidden"},"&.react-grid-item.react-grid-placeholder":{background:e.palette.primary.main,opacity:.2,transitionDuration:"100ms",zIndex:2,userSelect:"none",WebkitUserSelect:"none",MozUserSelect:"none",msUserSelect:"none",OUserSelect:"none"},"&.react-grid-item > .react-resizable-handle":{position:"absolute",width:"20px",height:"20px"},"&.react-grid-item > .react-resizable-handle::after":{content:'""',position:"absolute",right:"3px",bottom:"3px",width:"5px",height:"5px",borderRight:"2px solid rgba(0, 0, 0, 0.4)",borderBottom:"2px solid rgba(0, 0, 0, 0.4)"},"&.react-resizable-hide > .react-resizable-handle":{display:"none"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-sw":{bottom:"0",left:"0",cursor:"sw-resize",transform:"rotate(90deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-se":{bottom:"0",right:"0",cursor:"se-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-nw":{top:"0",left:"0",cursor:"nw-resize",transform:"rotate(180deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-ne":{top:"0",right:"0",cursor:"ne-resize",transform:"rotate(270deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-w, &.react-grid-item > .react-resizable-handle.react-resizable-handle-e":{top:"50%",marginTop:"-10px",cursor:"ew-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-w":{left:"0",transform:"rotate(135deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-e":{right:"0",transform:"rotate(315deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-n, &.react-grid-item > .react-resizable-handle.react-resizable-handle-s":{left:"50%",marginLeft:"-10px",cursor:"ns-resize"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-n":{top:"0",transform:"rotate(225deg)"},"&.react-grid-item > .react-resizable-handle.react-resizable-handle-s":{bottom:"0",transform:"rotate(45deg)"},"&.react-resizable":{position:"relative"},"&.react-resizable-handle":{position:"absolute",width:"20px",height:"20px",backgroundRepeat:"no-repeat",backgroundOrigin:"content-box",boxSizing:"border-box",backgroundImage:"url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+')",backgroundPosition:"bottom right",padding:"0 3px 3px 0"},"&.react-resizable-handle-sw":{bottom:"0",left:"0",cursor:"sw-resize",transform:"rotate(90deg)"},"&.react-resizable-handle-se":{bottom:"0",right:"0",cursor:"se-resize"},"&.react-resizable-handle-nw":{top:"0",left:"0",cursor:"nw-resize",transform:"rotate(180deg)"},"&.react-resizable-handle-ne":{top:"0",right:"0",cursor:"ne-resize",transform:"rotate(270deg)"},"&.react-resizable-handle-w, .react-resizable-handle-e":{top:"50%",marginTop:"-10px",cursor:"ew-resize"},"&.react-resizable-handle-w":{left:"0",transform:"rotate(135deg)"},"&.react-resizable-handle-e":{right:"0",transform:"rotate(315deg)"},"&.react-resizable-handle-n, .react-resizable-handle-s":{left:"50%",marginLeft:"-10px",cursor:"ns-resize"},"&.react-resizable-handle-n":{top:"0",transform:"rotate(225deg)"},"&.react-resizable-handle-s":{bottom:"0",transform:"rotate(45deg)"}});

package/dist/test/plugin-registry.d.ts

@@ -1,4 +1,5 @@
-import { PluginRegistryProps, RegisterPlugin } from '@perses-dev/plugin-system';
+import { JsonObject } from '@perses-dev/core';
+import { PluginRegistryProps, PluginImplementation, PanelPlugin } from '@perses-dev/plugin-system';
 /**
  * Helper for mocking `PluginRegistry` data during tests. Returns props that can be spread on the `PluginRegistry`
  * component so that it will load the mock plugins you setup. You can use the `addMockPlugin` function that's returned
@@ -6,6 +7,7 @@ import { PluginRegistryProps, RegisterPlugin } from '@perses-dev/plugin-system';
  */
 export declare function mockPluginRegistryProps(): {
     pluginRegistryProps: Omit<PluginRegistryProps, "children">;
-    addMockPlugin: RegisterPlugin;
+    addMockPlugin: <T extends "Variable" | "Panel" | "GraphQuery">(pluginType: T, kind: string, plugin: PluginImplementation<T, JsonObject>) => void;
 };
+export declare const FAKE_PANEL_PLUGIN: PanelPlugin<JsonObject>;
 //# sourceMappingURL=plugin-registry.d.ts.map

package/dist/test/plugin-registry.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"plugin-registry.d.ts","sourceRoot":"","sources":["../../src/test/plugin-registry.ts"],"names":[],"mappings":"AAYA,OAAO,EAEL,mBAAmB,EAGnB,cAAc,EACf,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,uBAAuB;;;EA0CtC"}
+{"version":3,"file":"plugin-registry.d.ts","sourceRoot":"","sources":["../../src/test/plugin-registry.tsx"],"names":[],"mappings":"AAYA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,OAAO,EACL,mBAAmB,EAEnB,oBAAoB,EAGpB,WAAW,EACZ,MAAM,2BAA2B,CAAC;AAEnC;;;;GAIG;AACH,wBAAgB,uBAAuB;;wFAgB7B,MAAM;EA4Bf;AAED,eAAO,MAAM,iBAAiB,EAAE,WAAW,CAAC,UAAU,CAQrD,CAAC"}

package/dist/test/plugin-registry.js

@@ -1 +1 @@
-export function mockPluginRegistryProps(){const e={kind:"Plugin",metadata:{name:"Fake Plugin for Tests"},spec:{supported_kinds:{}}},s=[],n={setup(e){for(const n of s)n(e)}};return{pluginRegistryProps:{getInstalledPlugins:()=>Promise.resolve([e]),importPluginModule:()=>Promise.resolve(n)},addMockPlugin:n=>{e.spec.supported_kinds[n.kind]=n.pluginType,s.push((e=>{e(n)}))}}}
+import{jsx as _jsx}from"react/jsx-runtime";export function mockPluginRegistryProps(){const e={kind:"PluginModule",metadata:{name:"Fake Plugin Module for Tests"},spec:{plugins:[]}},i={};return{pluginRegistryProps:{getInstalledPlugins:()=>Promise.resolve([e]),importPluginModule:()=>Promise.resolve(i)},addMockPlugin:(n,o,s)=>{e.spec.plugins.push({pluginType:n,kind:o,display:{name:`Fake ${n} Plugin for ${o}`}}),i[o]=s}}}export const FAKE_PANEL_PLUGIN={PanelComponent:()=>_jsx("div",{role:"figure",children:"FakePanel chart"}),OptionsEditorComponent:()=>_jsx("div",{children:"Edit options here"}),createInitialOptions:()=>({})};

package/dist/test/render.d.ts

@@ -1,7 +1,8 @@
 /// <reference types="react" />
 import { RenderOptions } from '@testing-library/react';
+import { DashboardStoreProps } from '../context';
 /**
  * Test helper to render a React component with some common app-level providers wrapped around it.
  */
-export declare function renderWithContext(ui: React.ReactElement, options?: Omit<RenderOptions, 'queries'>): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
+export declare function renderWithContext(ui: React.ReactElement, initialState?: DashboardStoreProps, options?: Omit<RenderOptions, 'queries'>): import("@testing-library/react").RenderResult<typeof import("@testing-library/dom/types/queries"), HTMLElement, HTMLElement>;
 //# sourceMappingURL=render.d.ts.map

package/dist/test/render.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/test/render.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAK/D;;GAEG;AACH,wBAAgB,iBAAiB,CAAC,EAAE,EAAE,KAAK,CAAC,YAAY,EAAE,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,gIAEjG"}
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../src/test/render.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAU,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAE/D,OAAO,EAAqB,mBAAmB,EAAE,MAAM,YAAY,CAAC;AASpE;;GAEG;AACH,wBAAgB,iBAAiB,CAC/B,EAAE,EAAE,KAAK,CAAC,YAAY,EACtB,YAAY,GAAE,mBAAkC,EAChD,OAAO,CAAC,EAAE,IAAI,CAAC,aAAa,EAAE,SAAS,CAAC,gIAQzC"}

package/dist/test/render.js

@@ -1 +1 @@
-import{jsx as _jsx}from"react/jsx-runtime";import{render}from"@testing-library/react";import{QueryClient,QueryClientProvider}from"react-query";const queryClient=new QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1}}});export function renderWithContext(e,r){return render(_jsx(QueryClientProvider,{client:queryClient,children:e}),r)}
+import{jsx as _jsx}from"react/jsx-runtime";import{render}from"@testing-library/react";import{QueryClient,QueryClientProvider}from"react-query";import{DashboardProvider}from"../context";import testDashboard from"./testDashboard";const queryClient=new QueryClient({defaultOptions:{queries:{refetchOnWindowFocus:!1}}}),initialStore={isEditMode:!0,dashboardSpec:testDashboard.spec};export function renderWithContext(r,e=initialStore,t){return render(_jsx(DashboardProvider,{initialState:e,children:_jsx(QueryClientProvider,{client:queryClient,children:r})}),t)}

package/dist/test/testDashboard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testDashboard.d.ts","sourceRoot":"","sources":["../../src/test/testDashboard.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,QAAA,MAAM,aAAa,EAAE,iBA+MpB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"testDashboard.d.ts","sourceRoot":"","sources":["../../src/test/testDashboard.ts"],"names":[],"mappings":"AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAErD,QAAA,MAAM,aAAa,EAAE,iBAwLpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/test/testDashboard.js

@@ -1 +1 @@
-const testDashboard={kind:"Dashboard",metadata:{name:"Node Stats",project:"perses",created_at:"2021-11-09",updated_at:"2021-11-09",version:0},spec:{datasource:{kind:"Prometheus",global:!0,name:"Public Prometheus Demo Server"},duration:"24h",variables:{job:{kind:"PrometheusLabelValues",options:{label_name:"job",match:["node_uname_info"]},display:{label:"Job"},selection:{default_value:"node"}},instance:{kind:"PrometheusLabelValues",options:{label_name:"instance",match:['node_uname_info{job="node"}']},display:{label:"Node"},selection:{default_value:["demo.do.prometheus.io:9100"],all_value:"$__all"}},interval:{kind:"Interval",options:{values:["1m","5m","10m","1h"],auto:{step_count:50,min_interval:"1m"}},display:{label:"Interval"},selection:{default_value:"1m"}}},panels:{cpu:{kind:"LineChart",display:{name:"CPU"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'avg without (cpu)(rate(node_cpu_seconds_total{job="node",instance="$instance",mode!="idle"}[$interval]))'}}],unit:{kind:"%"}}},memory:{kind:"LineChart",display:{name:"Memory"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'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"}'}},{kind:"PrometheusGraphQuery",options:{query:'node_memory_Buffers_bytes{job="node",instance="$instance"}'}},{kind:"PrometheusGraphQuery",options:{query:'node_memory_Cached_bytes{job="node",instance="$instance"}'}},{kind:"PrometheusGraphQuery",options:{query:'node_memory_MemFree_bytes{job="node",instance="$instance"}'}}],unit:{kind:"Bytes"}}},diskIO:{kind:"LineChart",display:{name:"Disk I/O Utilization"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'rate(node_disk_io_time_seconds_total{job="node",instance="$instance",device!~"^(md\\\\d+$|dm-)"}[$interval])'}}],unit:{kind:"Percent"}}},filesystemFullness:{kind:"LineChart",display:{name:"Filesystem Fullness"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'1 - node_filesystem_free_bytes{job="node",instance="$instance",fstype!="rootfs",mountpoint!~"/(run|var).*",mountpoint!=""} / node_filesystem_size_bytes{job="node",instance="$instance"}'}}],unit:{kind:"Percent"}}}},layouts:[{kind:"Grid",spec:{display:{title:"CPU Stats"},items:[{x:0,y:0,width:12,height:4,content:{$ref:"#/spec/panels/cpu"}}]}},{kind:"Grid",spec:{items:[{x:8,y:0,width:8,height:3,content:{$ref:"#/spec/panels/memory"}}]}},{kind:"Grid",spec:{display:{title:"Disk Stats",collapse:{open:!1}},items:[{x:0,y:0,width:6,height:2,content:{$ref:"#/spec/panels/diskIO"}},{x:18,y:0,width:6,height:2,content:{$ref:"#/spec/panels/filesystemFullness"}}]}}]}};export default testDashboard;
+const testDashboard={kind:"Dashboard",metadata:{name:"Node Stats",project:"perses",created_at:"2021-11-09",updated_at:"2021-11-09",version:0},spec:{datasource:{kind:"Prometheus",global:!0,name:"Public Prometheus Demo Server"},duration:"24h",variables:[{name:"job",kind:"TextVariable",options:{value:"node"}},{name:"instance",kind:"TextVariable",options:{value:"demo.do.prometheus.io:9100"}},{name:"interval",kind:"TextVariable",options:{value:"1m"}}],panels:{cpu:{kind:"LineChart",display:{name:"CPU"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'avg without (cpu)(rate(node_cpu_seconds_total{job="node",instance="$instance",mode!="idle"}[$interval]))'}}],unit:{kind:"%"}}},memory:{kind:"LineChart",display:{name:"Memory"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'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"}'}},{kind:"PrometheusGraphQuery",options:{query:'node_memory_Buffers_bytes{job="node",instance="$instance"}'}},{kind:"PrometheusGraphQuery",options:{query:'node_memory_Cached_bytes{job="node",instance="$instance"}'}},{kind:"PrometheusGraphQuery",options:{query:'node_memory_MemFree_bytes{job="node",instance="$instance"}'}}],unit:{kind:"Bytes"}}},diskIO:{kind:"LineChart",display:{name:"Disk I/O Utilization"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'rate(node_disk_io_time_seconds_total{job="node",instance="$instance",device!~"^(md\\\\d+$|dm-)"}[$interval])'}}],unit:{kind:"Percent"}}},filesystemFullness:{kind:"LineChart",display:{name:"Filesystem Fullness"},options:{queries:[{kind:"PrometheusGraphQuery",options:{query:'1 - node_filesystem_free_bytes{job="node",instance="$instance",fstype!="rootfs",mountpoint!~"/(run|var).*",mountpoint!=""} / node_filesystem_size_bytes{job="node",instance="$instance"}'}}],unit:{kind:"Percent"}}}},layouts:[{kind:"Grid",spec:{display:{title:"CPU Stats"},items:[{x:0,y:0,width:12,height:4,content:{$ref:"#/spec/panels/cpu"}}]}},{kind:"Grid",spec:{items:[{x:8,y:0,width:8,height:3,content:{$ref:"#/spec/panels/memory"}}]}},{kind:"Grid",spec:{display:{title:"Disk Stats",collapse:{open:!1}},items:[{x:0,y:0,width:6,height:2,content:{$ref:"#/spec/panels/diskIO"}},{x:18,y:0,width:6,height:2,content:{$ref:"#/spec/panels/filesystemFullness"}}]}}]}};export default testDashboard;

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { DashboardResource } from '@perses-dev/core';
+export interface DashboardAppProps {
+    dashboardResource: DashboardResource;
+}
+export declare const DashboardApp: (props: DashboardAppProps) => JSX.Element;
+//# sourceMappingURL=DashboardApp.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DashboardApp.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/DashboardApp.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAOrD,MAAM,WAAW,iBAAiB;IAChC,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,UAAW,iBAAiB,gBA0BpD,CAAC"}

package/dist/views/ViewDashboard/DashboardApp.js

@@ -0,0 +1 @@
+import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{Box}from"@mui/material";import{ErrorAlert,ErrorBoundary}from"@perses-dev/components";import{TemplateVariableList,Dashboard}from"../../components";import PanelGroupDialog from"../../components/PanelGroupDialog/PanelGroupDialog";import PanelDrawer from"../../components/PanelDrawer/PanelDrawer";import{DashboardToolbar}from"../../components/DashboardToolbar";import{useDashboard,useDashboardApp}from"../../context";export const DashboardApp=r=>{const{dashboardResource:o}=r,{dashboard:a}=useDashboard(),{panelGroupDialog:e}=useDashboardApp();return _jsxs(Box,{sx:{padding:r=>r.spacing(1,2),flexGrow:1,overflowX:"hidden",overflowY:"auto",display:"flex",flexDirection:"column"},children:[_jsx(DashboardToolbar,{dashboardName:o.metadata.name}),_jsx(ErrorBoundary,{FallbackComponent:ErrorAlert,children:_jsx(TemplateVariableList,{})}),_jsx(ErrorBoundary,{FallbackComponent:ErrorAlert,children:_jsx(Dashboard,{spec:a})}),_jsx(PanelDrawer,{}),e&&_jsx(PanelGroupDialog,{})]})};

package/dist/views/{ViewDashboard.d.ts → ViewDashboard/ViewDashboard.d.ts}

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
 import { DashboardResource } from '@perses-dev/core';
-export interface ViewDashboardProps extends BoxProps {
+export interface ViewDashboardProps extends Omit<BoxProps, 'children'> {
     dashboardResource: DashboardResource;
 }
 /**

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

@@ -0,0 +1 @@
+{"version":3,"file":"ViewDashboard.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/ViewDashboard.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAC9C,OAAO,EAAE,iBAAiB,EAAuB,MAAM,kBAAkB,CAAC;AAM1E,MAAM,WAAW,kBAAmB,SAAQ,IAAI,CAAC,QAAQ,EAAE,UAAU,CAAC;IACpE,iBAAiB,EAAE,iBAAiB,CAAC;CACtC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,eA4CtD"}

package/dist/views/ViewDashboard/ViewDashboard.js

@@ -0,0 +1 @@
+import{jsx as _jsx}from"react/jsx-runtime";import{useEffect}from"react";import{Box}from"@mui/material";import{getDefaultTimeRange}from"@perses-dev/core";import{useQueryString}from"@perses-dev/plugin-system";import{ErrorBoundary,ErrorAlert,combineSx}from"@perses-dev/components";import{TimeRangeProvider,TemplateVariableProvider,DashboardProvider}from"../../context";import{DashboardApp}from"./DashboardApp";export function ViewDashboard(r){var e;const{dashboardResource:i,sx:o,...a}=r,{spec:t}=i,{queryString:s,setQueryString:n}=useQueryString(),d=null!==(e=t.duration)&&void 0!==e?e:"1h",m=getDefaultTimeRange(d,s);return useEffect((()=>{!Object.fromEntries([...s]).start&&n&&(s.set("start",d),n(s))}),[d,s,n]),_jsx(DashboardProvider,{initialState:{dashboardSpec:t},children:_jsx(TimeRangeProvider,{initialTimeRange:m,children:_jsx(TemplateVariableProvider,{initialVariableDefinitions:t.variables,children:_jsx(Box,{sx:combineSx({display:"flex",width:"100%",height:"100%",position:"relative",overflow:"hidden"},o),...a,children:_jsx(ErrorBoundary,{FallbackComponent:ErrorAlert,children:_jsx(DashboardApp,{dashboardResource:i})})})})})})}

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

@@ -0,0 +1,2 @@
+export * from './ViewDashboard';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/views/ViewDashboard/index.ts"],"names":[],"mappings":"AAaA,cAAc,iBAAiB,CAAC"}

package/dist/views/ViewDashboard/index.js

@@ -0,0 +1 @@
+export*from"./ViewDashboard";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@perses-dev/dashboards",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "The dashboards feature in Perses",
   "license": "Apache-2.0",
   "homepage": "https://github.com/perses/perses/blob/main/README.md",
@@ -24,26 +24,24 @@
     "lint:fix": "eslint --fix src --ext .ts,.tsx"
   },
   "dependencies": {
-    "@perses-dev/components": "^0.7.1",
-    "@perses-dev/core": "^0.7.1",
-    "@perses-dev/plugin-system": "^0.7.1",
+    "@perses-dev/components": "^0.8.1",
+    "@perses-dev/core": "^0.8.1",
+    "@perses-dev/plugin-system": "^0.8.1",
     "@types/react-grid-layout": "^1.3.2",
     "immer": "^9.0.15",
     "react-grid-layout": "^1.3.4",
     "react-intersection-observer": "^9.4.0",
     "use-immer": "^0.7.0",
-    "use-resize-observer": "^8.0.0",
+    "use-resize-observer": "^9.0.0",
     "zustand": "^4.1.1"
   },
   "devDependencies": {
-    "intersection-observer": "^0.12.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "intersection-observer": "^0.12.2"
   },
   "peerDependencies": {
-    "@mui/material": "^5.5.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "@mui/material": "^5.6.0",
+    "react": "^17.0.2 || ^18.0.0",
+    "react-dom": "^17.0.2 || ^18.0.0"
   },
   "files": [
     "dist"