@perses-dev/dashboards 0.8.1 → 0.10.0

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

@@ -0,0 +1,236 @@
+// 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, "VariableEditForm", {
+    enumerable: true,
+    get: ()=>VariableEditForm
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = /*#__PURE__*/ _interopRequireDefault(require("react"));
+const _material = require("@mui/material");
+const _useImmer = require("use-immer");
+const _pluginSystem = require("@perses-dev/plugin-system");
+const _variableEditorFormModel = require("./variable-editor-form-model");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const VARIABLE_TYPES = [
+    'ListVariable',
+    'TextVariable'
+];
+const SectionHeader = ({ children  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+        pb: 2,
+        variant: "subtitle1",
+        children: children
+    });
+function VariableEditForm({ initialVariableDefinition , onChange , onCancel  }) {
+    const [state, setState] = (0, _useImmer.useImmer)((0, _variableEditorFormModel.getInitialState)(initialVariableDefinition));
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                children: "General"
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                container: true,
+                spacing: 2,
+                mb: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        item: true,
+                        xs: 6,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            label: "Name",
+                            value: state.name,
+                            onChange: (v)=>{
+                                setState((draft)=>{
+                                    draft.name = v.target.value;
+                                });
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        item: true,
+                        xs: 6,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.FormControl, {
+                            fullWidth: true,
+                            children: [
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.InputLabel, {
+                                    id: "variable-type-select-label",
+                                    children: "Type"
+                                }),
+                                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
+                                    labelId: "variable-type-select-label",
+                                    id: "variable-type-select",
+                                    label: "Type",
+                                    value: state.kind,
+                                    onChange: (v)=>{
+                                        setState((draft)=>{
+                                            draft.kind = v.target.value;
+                                        });
+                                    },
+                                    children: VARIABLE_TYPES.map((v)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                                            value: v,
+                                            children: v
+                                        }, v))
+                                })
+                            ]
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        item: true,
+                        xs: 6,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            label: "Label",
+                            value: state.label,
+                            onChange: (v)=>{
+                                setState((draft)=>{
+                                    draft.label = v.target.value;
+                                });
+                            }
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        item: true,
+                        xs: 12,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            label: "Description",
+                            value: state.description,
+                            onChange: (v)=>{
+                                setState((draft)=>{
+                                    draft.description = v.target.value;
+                                });
+                            }
+                        })
+                    })
+                ]
+            }),
+            state.kind === 'TextVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                        children: "Text Options"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                            item: true,
+                            xs: 12,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                                label: "Value",
+                                value: state.textVariableFields.value,
+                                onChange: (v)=>{
+                                    setState((draft)=>{
+                                        draft.textVariableFields.value = v.target.value;
+                                    });
+                                }
+                            })
+                        })
+                    })
+                ]
+            }),
+            state.kind === 'ListVariable' && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                        children: "List Options"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                        container: true,
+                        spacing: 2,
+                        mb: 2,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Grid, {
+                            item: true,
+                            xs: 6,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginEditor, {
+                                width: 500,
+                                pluginType: "Variable",
+                                pluginKindLabel: "Source",
+                                value: state.listVariableFields.plugin,
+                                onChange: (val)=>{
+                                    setState((draft)=>{
+                                        draft.listVariableFields.plugin = val;
+                                    });
+                                }
+                            })
+                        })
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(SectionHeader, {
+                        children: "Dropdown Options"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                        container: true,
+                        spacing: 1,
+                        mb: 1,
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                                item: true,
+                                xs: 12,
+                                children: [
+                                    "Allow Multiple",
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                        checked: state.listVariableFields.allowMultiple,
+                                        onChange: (e)=>{
+                                            setState((draft)=>{
+                                                draft.listVariableFields.allowMultiple = e.target.checked;
+                                            });
+                                        }
+                                    })
+                                ]
+                            }),
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Grid, {
+                                item: true,
+                                xs: 12,
+                                children: [
+                                    "Allow All",
+                                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                                        checked: state.listVariableFields.allowAll,
+                                        onChange: (e)=>{
+                                            setState((draft)=>{
+                                                draft.listVariableFields.allowAll = e.target.checked;
+                                            });
+                                        }
+                                    })
+                                ]
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                direction: 'row',
+                spacing: 2,
+                justifyContent: "end",
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        onClick: ()=>{
+                            onCancel();
+                        },
+                        children: "Cancel"
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        variant: "contained",
+                        onClick: ()=>{
+                            onChange((0, _variableEditorFormModel.getVariableDefinitionFromState)(state));
+                        },
+                        children: "Update Variable"
+                    })
+                ]
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,28 @@
+// 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
+});
+_exportStar(require("./VariableEditorForm"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

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

@@ -0,0 +1,88 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getInitialState: ()=>getInitialState,
+    getVariableDefinitionFromState: ()=>getVariableDefinitionFromState
+});
+function getInitialState(initialVariableDefinition) {
+    var ref;
+    var _value;
+    const textVariableFields = {
+        value: (_value = initialVariableDefinition.spec.value) !== null && _value !== void 0 ? _value : ''
+    };
+    const listVariableFields = {
+        allowMultiple: false,
+        allowAll: false,
+        plugin: {
+            kind: '',
+            spec: {}
+        }
+    };
+    if (initialVariableDefinition.kind === 'ListVariable') {
+        var _allow_all_value;
+        listVariableFields.allowMultiple = (_allow_all_value = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value !== void 0 ? _allow_all_value : false;
+        var _allow_all_value1;
+        listVariableFields.allowAll = (_allow_all_value1 = initialVariableDefinition.spec.allow_all_value) !== null && _allow_all_value1 !== void 0 ? _allow_all_value1 : false;
+        listVariableFields.plugin = initialVariableDefinition.spec.plugin;
+    }
+    return {
+        name: initialVariableDefinition.spec.name,
+        label: (ref = initialVariableDefinition.spec.display) === null || ref === void 0 ? void 0 : ref.label,
+        kind: initialVariableDefinition.kind,
+        description: '',
+        listVariableFields,
+        textVariableFields
+    };
+}
+function getVariableDefinitionFromState(state) {
+    const { name , label , kind  } = state;
+    const commonSpec = {
+        name,
+        display: {
+            label
+        }
+    };
+    if (kind === 'TextVariable') {
+        const textVariableDefinition = {
+            kind,
+            spec: {
+                ...commonSpec,
+                ...state.textVariableFields
+            }
+        };
+        return textVariableDefinition;
+    }
+    if (kind === 'ListVariable') {
+        const listVariableDefinition = {
+            kind,
+            spec: {
+                ...commonSpec,
+                allow_multiple: state.listVariableFields.allowMultiple,
+                allow_all_value: state.listVariableFields.allowAll,
+                plugin: state.listVariableFields.plugin
+            }
+        };
+        return listVariableDefinition;
+    }
+    throw new Error(`Unknown variable kind: ${kind}`);
+}

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

@@ -1,7 +1,3 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TemplateVariableList = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
@@ -14,14 +10,86 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 // 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.
-const react_1 = require("react");
-const material_1 = require("@mui/material");
-const context_1 = require("../../context");
-const Variable_1 = require("./Variable");
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "TemplateVariableList", {
+    enumerable: true,
+    get: ()=>TemplateVariableList
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _material = require("@mui/material");
+const _eye = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Eye"));
+const _pencil = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pencil"));
+const _context = require("../../context");
+const _variable = require("./Variable");
+const _variableEditor = require("./VariableEditor");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function TemplateVariableList() {
-    const [isEditing, setIsEditing] = (0, react_1.useState)(false);
-    const variableDefinitions = (0, context_1.useTemplateVariableDefinitions)();
-    const { isEditMode } = (0, context_1.useEditMode)();
-    return ((0, jsx_runtime_1.jsxs)(material_1.Box, { m: 2, children: [(0, jsx_runtime_1.jsx)(material_1.Drawer, { anchor: 'right', open: isEditing, onClose: () => setIsEditing(false), children: (0, jsx_runtime_1.jsxs)(material_1.Box, { width: 900, p: 4, children: [(0, jsx_runtime_1.jsx)(material_1.TableContainer, { component: material_1.Paper, children: (0, jsx_runtime_1.jsxs)(material_1.Table, { sx: { minWidth: 650 }, "aria-label": "simple table", children: [(0, jsx_runtime_1.jsx)(material_1.TableHead, { children: (0, jsx_runtime_1.jsxs)(material_1.TableRow, { children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { children: "Variable Name" }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "right", children: "Type" })] }) }), (0, jsx_runtime_1.jsx)(material_1.TableBody, { children: variableDefinitions.map((v) => ((0, jsx_runtime_1.jsxs)(material_1.TableRow, { sx: { '&:last-child td, &:last-child th': { border: 0 } }, children: [(0, jsx_runtime_1.jsx)(material_1.TableCell, { component: "th", scope: "row", sx: { fontWeight: 'bold' }, children: v.name }), (0, jsx_runtime_1.jsx)(material_1.TableCell, { align: "right", children: v.kind })] }, v.name))) })] }) }), (0, jsx_runtime_1.jsx)("pre", { children: JSON.stringify(variableDefinitions, null, 2) })] }) }), (0, jsx_runtime_1.jsx)(material_1.Box, { display: 'flex', justifyContent: "space-between", children: (0, jsx_runtime_1.jsxs)(material_1.Stack, { direction: 'row', spacing: 2, children: [variableDefinitions.map((v) => ((0, jsx_runtime_1.jsx)(material_1.Box, { children: (0, jsx_runtime_1.jsx)(Variable_1.TemplateVariable, { name: v.name }, v.name) }, v.name))), isEditMode && (0, jsx_runtime_1.jsx)(material_1.Button, { onClick: () => setIsEditing(true), children: "Modify Variables" })] }) })] }));
+    const [isEditing, setIsEditing] = (0, _react.useState)(false);
+    const variableDefinitions = (0, _context.useTemplateVariableDefinitions)();
+    const { isEditMode  } = (0, _context.useEditMode)();
+    const [showVariablesInEditMode, setShowVariablesInEditMode] = (0, _react.useState)(true);
+    const showVariables = isEditMode ? showVariablesInEditMode : true;
+    const { setVariableDefinitions  } = (0, _context.useTemplateVariableActions)();
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+        m: 2,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Drawer, {
+                anchor: 'right',
+                open: isEditing,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variableEditor.VariableEditor, {
+                    onCancel: ()=>{
+                        setIsEditing(false);
+                    },
+                    variableDefinitions: variableDefinitions,
+                    onChange: (v)=>{
+                        setVariableDefinitions(v);
+                        setIsEditing(false);
+                    }
+                })
+            }),
+            isEditMode && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                pb: 2,
+                children: [
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Button, {
+                        onClick: ()=>setShowVariablesInEditMode(!showVariablesInEditMode),
+                        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_eye.default, {}),
+                        children: [
+                            showVariablesInEditMode ? 'Hide' : 'Show',
+                            " Variables"
+                        ]
+                    }),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Button, {
+                        onClick: ()=>setIsEditing(true),
+                        startIcon: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pencil.default, {}),
+                        children: "Edit Variables"
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                display: 'flex',
+                justifyContent: "space-between",
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Stack, {
+                    direction: 'row',
+                    spacing: 2,
+                    children: showVariables && variableDefinitions.map((v)=>{
+                        var ref;
+                        /*#__PURE__*/ return (0, _jsxRuntime.jsx)(_material.Box, {
+                            display: ((ref = v.spec.display) === null || ref === void 0 ? void 0 : ref.hidden) ? 'none' : undefined,
+                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_variable.TemplateVariable, {
+                                name: v.spec.name
+                            }, v.spec.name)
+                        }, v.spec.name);
+                    })
+                })
+            })
+        ]
+    });
 }
-exports.TemplateVariableList = TemplateVariableList;

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

@@ -1,4 +1,3 @@
-"use strict";
 // 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.
@@ -11,20 +10,21 @@
 // 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.
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Variable"), exports);
-__exportStar(require("./VariableList"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./Variable"), exports);
+_exportStar(require("./VariableList"), exports);
+_exportStar(require("./VariableEditorForm"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/index.js

@@ -1,4 +1,3 @@
-"use strict";
 // 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.
@@ -11,23 +10,24 @@
 // 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.
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __exportStar = (this && this.__exportStar) || function(m, exports) {
-    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-__exportStar(require("./Dashboard"), exports);
-__exportStar(require("./GridLayout"), exports);
-__exportStar(require("./Panel"), exports);
-__exportStar(require("./TimeRangeControls"), exports);
-__exportStar(require("./Variables"), exports);
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./Dashboard"), exports);
+_exportStar(require("./GridLayout"), exports);
+_exportStar(require("./Panel"), exports);
+_exportStar(require("./PanelDrawer"), exports);
+_exportStar(require("./TimeRangeControls"), exports);
+_exportStar(require("./Variables"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/context/DashboardProvider/DashboardProvider.js

@@ -0,0 +1,70 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    DashboardContext: ()=>DashboardContext,
+    useDashboardStore: ()=>useDashboardStore,
+    DashboardProvider: ()=>DashboardProvider
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _zustand = require("zustand");
+const _middleware = require("zustand/middleware");
+const _immer = require("zustand/middleware/immer");
+const _shallow = /*#__PURE__*/ _interopRequireDefault(require("zustand/shallow"));
+const _react = require("react");
+const _panelGroupSlice = require("./panel-group-slice");
+const _layoutSlice = require("./layout-slice");
+const _panelEditingSlice = require("./panel-editing-slice");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+const DashboardContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function useDashboardStore(selector) {
+    const store = (0, _react.useContext)(DashboardContext);
+    if (store === undefined) {
+        throw new Error('No DashboardContext found. Did you forget a Provider?');
+    }
+    return (0, _zustand.useStore)(store, selector, _shallow.default);
+}
+function DashboardProvider(props) {
+    const { children , initialState: { dashboardSpec , isEditMode  } ,  } = props;
+    const { layouts , panels  } = dashboardSpec;
+    const dashboardStore = (0, _zustand.createStore)()((0, _immer.immer)((0, _middleware.devtools)((...args)=>{
+        const [set] = args;
+        return {
+            ...(0, _panelGroupSlice.createPanelGroupSlice)(...args),
+            ...(0, _layoutSlice.createLayoutSlice)(layouts)(...args),
+            ...(0, _panelEditingSlice.createPanelEditorSlice)(panels)(...args),
+            defaultTimeRange: dashboardSpec.duration,
+            isEditMode: !!isEditMode,
+            setEditMode: (isEditMode)=>set({
+                    isEditMode
+                })
+        };
+    })));
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(DashboardContext.Provider, {
+        value: dashboardStore,
+        children: children
+    });
+}

package/dist/cjs/context/DashboardProvider/common.js

@@ -0,0 +1,18 @@
+// 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.
+/**
+ * The middleware applied to the DashboardStore (can be used as generic argument in StateCreator).
+ */ "use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});