@perses-dev/dashboards 0.0.0-snapshot-color-palette-gen-test-bc1b508 → 0.0.0-snapshot-tooltip-highlight-c995fc8

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

@@ -40,20 +40,15 @@ function createPanelEditorSlice() {
                 if (panelToEdit === undefined) {
                     throw new Error(`Cannot find Panel with key '${panelKey}'`);
                 }
-                var _description;
                 const editorState = {
                     mode: 'Edit',
                     initialValues: {
-                        name: panelToEdit.spec.display.name,
-                        description: (_description = panelToEdit.spec.display.description) !== null && _description !== void 0 ? _description : '',
                         groupId: panelGroupItemId.panelGroupId,
-                        kind: panelToEdit.spec.plugin.kind,
-                        spec: panelToEdit.spec.plugin.spec
+                        panelDefinition: panelToEdit
                     },
                     applyChanges: (next)=>{
-                        const panelDefinititon = createPanelDefinitionFromEditorValues(next);
                         set((state)=>{
-                            state.panels[panelKey] = panelDefinititon;
+                            state.panels[panelKey] = next.panelDefinition;
                             // If the panel didn't change groups, nothing else to do
                             if (next.groupId === panelGroupId) {
                                 return;
@@ -99,7 +94,7 @@ function createPanelEditorSlice() {
                 });
             },
             openAddPanel (panelGroupId) {
-                var ref, ref1;
+                var ref;
                 // 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];
@@ -108,22 +103,19 @@ function createPanelEditorSlice() {
                     newGroup.title = 'Panel Group';
                     panelGroupId = newGroup.id;
                 }
-                var ref2, ref3;
+                var ref1;
                 const editorState = {
                     mode: 'Add',
                     initialValues: {
-                        name: '',
-                        description: '',
                         groupId: panelGroupId,
-                        kind: (ref2 = (ref = get().initialValues) === null || ref === void 0 ? void 0 : ref.kind) !== null && ref2 !== void 0 ? ref2 : '',
-                        spec: (ref3 = (ref1 = get().initialValues) === null || ref1 === void 0 ? void 0 : ref1.spec) !== null && ref3 !== void 0 ? ref3 : {}
+                        panelDefinition: (ref1 = (ref = get().initialValues) === null || ref === void 0 ? void 0 : ref.panelDefinition) !== null && ref1 !== void 0 ? ref1 : (0, _common.createPanelDefinition)()
                     },
                     applyChanges: (next)=>{
-                        const panelDef = createPanelDefinitionFromEditorValues(next);
-                        const panelKey = (0, _panelUtils.getValidPanelKey)(next.name, get().panels);
+                        const name = next.panelDefinition.spec.display.name;
+                        const panelKey = (0, _panelUtils.getValidPanelKey)(name, get().panels);
                         set((state)=>{
                             // Add a panel
-                            state.panels[panelKey] = panelDef;
+                            state.panels[panelKey] = next.panelDefinition;
                             // Also add a panel group item referencing the panel
                             const group = state.panelGroups[next.groupId];
                             if (group === undefined) {
@@ -158,19 +150,3 @@ function createPanelEditorSlice() {
         };
     };
 }
-// Helper to create PanelDefinitions when saving
-function createPanelDefinitionFromEditorValues(editorValues) {
-    return {
-        kind: 'Panel',
-        spec: {
-            display: {
-                name: editorValues.name,
-                description: editorValues.description !== '' ? editorValues.description : undefined
-            },
-            plugin: {
-                kind: editorValues.kind,
-                spec: editorValues.spec
-            }
-        }
-    };
-}

package/dist/cjs/context/useDashboard.js

@@ -22,14 +22,14 @@ const _core = require("@perses-dev/core");
 const _dashboardProvider = require("./DashboardProvider");
 const _templateVariableProvider = require("./TemplateVariableProvider");
 function useDashboard() {
-    const { panels , panelGroups , panelGroupOrder , defaultTimeRange , setDashboard: setDashboardResource , metadata , display ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , defaultTimeRange , setDashboard , metadata , display  })=>({
+    const { panels , panelGroups , panelGroupOrder , setDashboard: setDashboardResource , metadata , display , duration ,  } = (0, _dashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , setDashboard , metadata , display , duration  })=>({
             panels,
             panelGroups,
             panelGroupOrder,
-            defaultTimeRange,
             setDashboard,
             metadata,
-            display
+            display,
+            duration
         }));
     const { setVariableDefinitions  } = (0, _templateVariableProvider.useTemplateVariableActions)();
     const variables = (0, _templateVariableProvider.useTemplateVariableDefinitions)();
@@ -42,7 +42,7 @@ function useDashboard() {
             panels,
             layouts,
             variables,
-            duration: defaultTimeRange.pastDuration
+            duration
         }
     };
     const setDashboard = (dashboardResource)=>{

package/dist/cjs/stories/decorators/WithDatasourceStore.js

@@ -20,62 +20,17 @@ Object.defineProperty(exports, "WithDatasourceStore", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _dashboards = require("@perses-dev/dashboards");
-const _constants = require("./constants");
+const _test = require("../../test");
 // Type guard because storybook types parameters as `any`
 function isWithDatasourceStoreParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
 }
-const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
-const prometheusDemo = {
-    kind: 'GlobalDatasource',
-    metadata: {
-        name: 'PrometheusDemo',
-        created_at: '0001-01-01T00:00:00Z',
-        updated_at: '0001-01-01T00:00:00Z',
-        version: 0
-    },
-    spec: {
-        default: true,
-        plugin: {
-            kind: 'PrometheusDatasource',
-            spec: {
-                direct_url: prometheusDemoUrl
-            }
-        }
-    }
-};
 const WithDatasourceStore = (Story, context)=>{
     const initParameter = context.parameters.withDatasourceStore;
     const parameter = isWithDatasourceStoreParameter(initParameter) ? initParameter : undefined;
     const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    // This default currently defines the bare minimum to get a story working in
-    // the `Dashboard` storybook with the Prometheus demo api. We'll likely want
-    // to expand it to do more in the future.
-    const defaultDatasourceProps = {
-        dashboardResource: _constants.EMPTY_DASHBOARD_RESOURCE,
-        datasourceApi: {
-            getDatasource: ()=>{
-                return Promise.resolve(undefined);
-            },
-            getGlobalDatasource: (selector)=>{
-                if (selector.kind === 'PrometheusDatasource') {
-                    return Promise.resolve({
-                        resource: prometheusDemo,
-                        proxyUrl: prometheusDemoUrl
-                    });
-                }
-                return Promise.resolve(undefined);
-            },
-            listDatasources: ()=>{
-                return Promise.resolve([]);
-            },
-            listGlobalDatasources: ()=>{
-                return Promise.resolve([]);
-            }
-        }
-    };
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_dashboards.DatasourceStoreProvider, {
-        ...defaultDatasourceProps,
+        ..._test.defaultDatasourceProps,
         ...props,
         children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
     });

package/dist/cjs/stories/decorators/index.js

@@ -17,11 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _exportStar(require("./constants"), exports);
 _exportStar(require("./WithDashboard"), exports);
 _exportStar(require("./WithDatasourceStore"), exports);
-_exportStar(require("./WithPluginRegistry"), exports);
-_exportStar(require("./WithQueryClient"), exports);
-_exportStar(require("./WithQueryParams"), exports);
 _exportStar(require("./WithTemplateVariables"), exports);
-_exportStar(require("./WithTimeRange"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/test/datasource-provider.js

@@ -0,0 +1,70 @@
+// 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
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    prometheusDemoUrl: ()=>prometheusDemoUrl,
+    prometheusDemo: ()=>prometheusDemo,
+    defaultDatasourceProps: ()=>defaultDatasourceProps
+});
+const _dashboardProvider = require("./dashboard-provider");
+const prometheusDemoUrl = 'https://prometheus.demo.do.prometheus.io';
+const prometheusDemo = {
+    kind: 'GlobalDatasource',
+    metadata: {
+        name: 'PrometheusDemo',
+        created_at: '0001-01-01T00:00:00Z',
+        updated_at: '0001-01-01T00:00:00Z',
+        version: 0
+    },
+    spec: {
+        default: true,
+        plugin: {
+            kind: 'PrometheusDatasource',
+            spec: {
+                direct_url: prometheusDemoUrl
+            }
+        }
+    }
+};
+const defaultDatasourceProps = {
+    dashboardResource: (0, _dashboardProvider.getTestDashboard)(),
+    datasourceApi: {
+        getDatasource: ()=>{
+            return Promise.resolve(undefined);
+        },
+        getGlobalDatasource: (selector)=>{
+            if (selector.kind === 'PrometheusDatasource') {
+                return Promise.resolve({
+                    resource: prometheusDemo,
+                    proxyUrl: prometheusDemoUrl
+                });
+            }
+            return Promise.resolve(undefined);
+        },
+        listDatasources: ()=>{
+            return Promise.resolve([]);
+        },
+        listGlobalDatasources: ()=>{
+            return Promise.resolve([]);
+        }
+    }
+};

package/dist/cjs/test/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./dashboard-provider"), exports);
+_exportStar(require("./datasource-provider"), exports);
 _exportStar(require("./plugin-registry"), exports);
 _exportStar(require("./render"), exports);
 function _exportStar(from, to) {

package/dist/cjs/test/plugin-registry.js

@@ -19,17 +19,23 @@ Object.defineProperty(exports, "MOCK_PLUGINS", {
     get: ()=>MOCK_PLUGINS
 });
 const _jsxRuntime = require("react/jsx-runtime");
+const FakeTimeSeriesChartOptionEditor = ()=>{
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
+        children: "TimeSeriesChart options"
+    });
+};
 const FakeTimeSeriesPlugin = {
     PanelComponent: ()=>{
         return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
             children: "TimeSeriesChart panel"
         });
     },
-    OptionsEditorComponent: ()=>{
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            children: "TimeSeriesChart options"
-        });
-    },
+    panelOptionsEditorComponents: [
+        {
+            label: 'Settings',
+            content: FakeTimeSeriesChartOptionEditor
+        }
+    ],
     createInitialOptions: ()=>({})
 };
 const MOCK_TIME_SERIES_PANEL = {

package/dist/cjs/test/testDashboard.js

@@ -62,24 +62,24 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            queries: [
-                                {
-                                    kind: 'TimeSeriesQuery',
+                            unit: {
+                                kind: '%'
+                            }
+                        }
+                    },
+                    queries: [
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'avg without (cpu)(rate(node_cpu_seconds_total{job="node",instance="$instance",mode!="idle"}[$interval]))'
-                                            }
-                                        }
+                                        query: 'avg without (cpu)(rate(node_cpu_seconds_total{job="node",instance="$instance",mode!="idle"}[$interval]))'
                                     }
                                 }
-                            ],
-                            unit: {
-                                kind: '%'
                             }
                         }
-                    }
+                    ]
                 }
             },
             memory: {
@@ -91,57 +91,57 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            queries: [
-                                {
-                                    kind: 'TimeSeriesQuery',
+                            unit: {
+                                kind: 'Bytes'
+                            }
+                        }
+                    },
+                    queries: [
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                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"}'
-                                            }
-                                        }
+                                        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: 'TimeSeriesQuery',
+                                }
+                            }
+                        },
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'node_memory_Buffers_bytes{job="node",instance="$instance"}'
-                                            }
-                                        }
+                                        query: 'node_memory_Buffers_bytes{job="node",instance="$instance"}'
                                     }
-                                },
-                                {
-                                    kind: 'TimeSeriesQuery',
+                                }
+                            }
+                        },
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'node_memory_Cached_bytes{job="node",instance="$instance"}'
-                                            }
-                                        }
+                                        query: 'node_memory_Cached_bytes{job="node",instance="$instance"}'
                                     }
-                                },
-                                {
-                                    kind: 'TimeSeriesQuery',
+                                }
+                            }
+                        },
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'node_memory_MemFree_bytes{job="node",instance="$instance"}'
-                                            }
-                                        }
+                                        query: 'node_memory_MemFree_bytes{job="node",instance="$instance"}'
                                     }
                                 }
-                            ],
-                            unit: {
-                                kind: 'Bytes'
                             }
                         }
-                    }
+                    ]
                 }
             },
             // This panel is referenced in more than one layout below
@@ -154,24 +154,24 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            queries: [
-                                {
-                                    kind: 'TimeSeriesQuery',
+                            unit: {
+                                kind: 'Percent'
+                            }
+                        }
+                    },
+                    queries: [
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: 'rate(node_disk_io_time_seconds_total{job="node",instance="$instance",device!~"^(md\\\\d+$|dm-)"}[$interval])'
-                                            }
-                                        }
+                                        query: 'rate(node_disk_io_time_seconds_total{job="node",instance="$instance",device!~"^(md\\\\d+$|dm-)"}[$interval])'
                                     }
                                 }
-                            ],
-                            unit: {
-                                kind: 'Percent'
                             }
                         }
-                    }
+                    ]
                 }
             },
             filesystemFullness: {
@@ -183,24 +183,24 @@ const testDashboard = {
                     plugin: {
                         kind: 'TimeSeriesChart',
                         spec: {
-                            queries: [
-                                {
-                                    kind: 'TimeSeriesQuery',
+                            unit: {
+                                kind: 'Percent'
+                            }
+                        }
+                    },
+                    queries: [
+                        {
+                            kind: 'TimeSeriesQuery',
+                            spec: {
+                                plugin: {
+                                    kind: 'PrometheusTimeSeriesQuery',
                                     spec: {
-                                        plugin: {
-                                            kind: 'PrometheusTimeSeriesQuery',
-                                            spec: {
-                                                query: '1 - node_filesystem_free_bytes{job="node",instance="$instance",fstype!="rootfs",mountpoint!~"/(run|var).*",mountpoint!=""} / node_filesystem_size_bytes{job="node",instance="$instance"}'
-                                            }
-                                        }
+                                        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'
                             }
                         }
-                    }
+                    ]
                 }
             }
         },

package/dist/cjs/utils/index.js

@@ -15,6 +15,7 @@ Object.defineProperty(exports, "__esModule", {
     value: true
 });
 _exportStar(require("./panelUtils"), exports);
+_exportStar(require("./time"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/{stories/decorators/WithQueryClient.js → utils/time.js}

@@ -14,16 +14,14 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "WithQueryClient", {
+Object.defineProperty(exports, "useSuggestedStepMs", {
     enumerable: true,
-    get: ()=>WithQueryClient
+    get: ()=>useSuggestedStepMs
 });
-const _jsxRuntime = require("react/jsx-runtime");
-const _reactQuery = require("@tanstack/react-query");
-const WithQueryClient = (Story)=>{
-    const queryClient = new _reactQuery.QueryClient({});
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactQuery.QueryClientProvider, {
-        client: queryClient,
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(Story, {})
-    });
-};
+const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
+function useSuggestedStepMs(width) {
+    const { absoluteTimeRange  } = (0, _pluginSystem.useTimeRange)();
+    if (width === undefined) return 0;
+    return (0, _core.getSuggestedStepMs)(absoluteTimeRange, width);
+}

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

@@ -1 +1 @@
-{"version":3,"file":"EditJsonDialog.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"names":[],"mappings":";AAmBA,eAAO,MAAM,cAAc,mBAS1B,CAAC"}
+{"version":3,"file":"EditJsonDialog.d.ts","sourceRoot":"","sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"names":[],"mappings":";AAoBA,eAAO,MAAM,cAAc,mBAS1B,CAAC"}

package/dist/components/EditJsonDialog/EditJsonDialog.js

@@ -14,6 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState } from 'react';
 import { Alert, FormControl } from '@mui/material';
 import { Dialog, JSONEditor } from '@perses-dev/components';
+import { useTimeRange } from '@perses-dev/plugin-system';
 import { useEditJsonDialog } from '../../context/DashboardProvider';
 import { useDashboard } from '../../context/useDashboard';
 export const EditJsonDialog = ()=>{
@@ -34,11 +35,15 @@ export const EditJsonDialog = ()=>{
 };
 const EditJsonDialogForm = ()=>{
     const { closeEditJsonDialog  } = useEditJsonDialog();
+    const { setTimeRange  } = useTimeRange();
     const { dashboard , setDashboard  } = useDashboard();
     const [draftDashboard, setDraftDashboard] = useState(dashboard);
     const handleApply = (e)=>{
         e.preventDefault();
         setDashboard(draftDashboard);
+        setTimeRange({
+            pastDuration: draftDashboard.spec.duration
+        });
         closeEditJsonDialog();
     };
     return /*#__PURE__*/ _jsxs(Dialog.Form, {

package/dist/components/EditJsonDialog/EditJsonDialog.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport const EditJsonDialog = () => {\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = () => {\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    closeEditJsonDialog();\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n          Metadata cannot be modified or saved.\n        </Alert>\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"700px\"\n            value={draftDashboard}\n            onChange={(value) => setDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useEditJsonDialog","useDashboard","EditJsonDialog","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAAoBA,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,eAAe,CAAC;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AAC5D,SAASC,iBAAiB,QAAQ,iCAAiC,CAAC;AACpE,SAASC,YAAY,QAAQ,4BAA4B,CAAC;AAE1D,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,cAAc,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGJ,iBAAiB,EAAE,AAAC;IAEpE,qBACE,MAACF,MAAM;QAACO,IAAI,EAAE,CAAC,CAACF,CAAAA,cAAc,aAAdA,cAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,cAAc,CAAEG,MAAM,CAAA;QAAEC,MAAM,EAAC,OAAO;QAACC,SAAS;QAACC,QAAQ,EAAC,IAAI;;0BAC5E,KAACX,MAAM,CAACY,MAAM;gBAACC,OAAO,EAAE,IAAMP,mBAAmB,EAAE;0BAAE,gBAAc;cAAgB;YAClFD,CAAAA,cAAc,aAAdA,cAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,cAAc,CAAEG,MAAM,CAAA,kBAAI,KAACM,kBAAkB,KAAG;;MAC1C,CACT;AACJ,CAAC,CAAC;AAEF,MAAMA,kBAAkB,GAAG,IAAM;IAC/B,MAAM,EAAER,mBAAmB,CAAA,EAAE,GAAGJ,iBAAiB,EAAE,AAAC;IACpD,MAAM,EAAEa,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGb,YAAY,EAAE,AAAC;IACnD,MAAM,CAACc,cAAc,EAAEC,iBAAiB,CAAC,GAAGrB,QAAQ,CAACkB,SAAS,CAAC,AAAC;IAEhE,MAAMI,WAAW,GAAG,CAACC,CAAY,GAAK;QACpCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnBL,YAAY,CAACC,cAAc,CAAC,CAAC;QAC7BX,mBAAmB,EAAE,CAAC;IACxB,CAAC,AAAC;IAEF,qBACE,MAACN,MAAM,CAACsB,IAAI;QAACC,QAAQ,EAAEJ,WAAW;;0BAChC,MAACnB,MAAM,CAACwB,OAAO;gBAACC,EAAE,EAAE;oBAAEC,KAAK,EAAE,MAAM;iBAAE;;kCACnC,KAAC5B,KAAK;wBAAC2B,EAAE,EAAE;4BAAEE,YAAY,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;yBAAE;wBAAEC,QAAQ,EAAC,SAAS;kCAAC,uCAE7E;sBAAQ;kCACR,KAAC/B,WAAW;wBAACW,SAAS;kCACpB,cAAA,KAACT,UAAU;4BACT8B,SAAS,EAAC,OAAO;4BACjBC,SAAS,EAAC,OAAO;4BACjBC,KAAK,EAAEhB,cAAc;4BACrBiB,QAAQ,EAAE,CAACD,KAAK,GAAKf,iBAAiB,CAACe,KAAK,CAAC;0BAC7C;sBACU;;cACC;0BACjB,KAACjC,MAAM,CAACmC,OAAO;0BACb,cAAA,KAACnC,MAAM,CAACoC,aAAa;oBAACC,OAAO,EAAElB,WAAW;8BAAE,OAAK;kBAAuB;cACzD;;MACL,CACd;AACJ,CAAC,AAAC"}
+{"version":3,"sources":["../../../src/components/EditJsonDialog/EditJsonDialog.tsx"],"sourcesContent":["// Copyright 2023 The Perses Authors\n// Licensed under the Apache License, Version 2.0 (the \"License\");\n// you may not use this file except in compliance with the License.\n// You may obtain a copy of the License at\n//\n// http://www.apache.org/licenses/LICENSE-2.0\n//\n// Unless required by applicable law or agreed to in writing, software\n// distributed under the License is distributed on an \"AS IS\" BASIS,\n// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n// See the License for the specific language governing permissions and\n// limitations under the License.\n\nimport { FormEvent, useState } from 'react';\nimport { Alert, FormControl } from '@mui/material';\nimport { Dialog, JSONEditor } from '@perses-dev/components';\nimport { useTimeRange } from '@perses-dev/plugin-system';\nimport { useEditJsonDialog } from '../../context/DashboardProvider';\nimport { useDashboard } from '../../context/useDashboard';\n\nexport const EditJsonDialog = () => {\n  const { editJsonDialog, closeEditJsonDialog } = useEditJsonDialog();\n\n  return (\n    <Dialog open={!!editJsonDialog?.isOpen} scroll=\"paper\" fullWidth maxWidth=\"lg\">\n      <Dialog.Header onClose={() => closeEditJsonDialog()}>Edit Dashboard</Dialog.Header>\n      {editJsonDialog?.isOpen && <EditJsonDialogForm />}\n    </Dialog>\n  );\n};\n\nconst EditJsonDialogForm = () => {\n  const { closeEditJsonDialog } = useEditJsonDialog();\n  const { setTimeRange } = useTimeRange();\n  const { dashboard, setDashboard } = useDashboard();\n  const [draftDashboard, setDraftDashboard] = useState(dashboard);\n\n  const handleApply = (e: FormEvent) => {\n    e.preventDefault();\n    setDashboard(draftDashboard);\n    setTimeRange({ pastDuration: draftDashboard.spec.duration });\n    closeEditJsonDialog();\n  };\n\n  return (\n    <Dialog.Form onSubmit={handleApply}>\n      <Dialog.Content sx={{ width: '100%' }}>\n        <Alert sx={{ marginBottom: (theme) => theme.spacing(1) }} severity=\"warning\">\n          Metadata cannot be modified or saved.\n        </Alert>\n        <FormControl fullWidth>\n          <JSONEditor\n            minHeight=\"300px\"\n            maxHeight=\"700px\"\n            value={draftDashboard}\n            onChange={(value) => setDraftDashboard(value)}\n          />\n        </FormControl>\n      </Dialog.Content>\n      <Dialog.Actions>\n        <Dialog.PrimaryButton onClick={handleApply}>Apply</Dialog.PrimaryButton>\n      </Dialog.Actions>\n    </Dialog.Form>\n  );\n};\n"],"names":["useState","Alert","FormControl","Dialog","JSONEditor","useTimeRange","useEditJsonDialog","useDashboard","EditJsonDialog","editJsonDialog","closeEditJsonDialog","open","isOpen","scroll","fullWidth","maxWidth","Header","onClose","EditJsonDialogForm","setTimeRange","dashboard","setDashboard","draftDashboard","setDraftDashboard","handleApply","e","preventDefault","pastDuration","spec","duration","Form","onSubmit","Content","sx","width","marginBottom","theme","spacing","severity","minHeight","maxHeight","value","onChange","Actions","PrimaryButton","onClick"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAAoBA,QAAQ,QAAQ,OAAO,CAAC;AAC5C,SAASC,KAAK,EAAEC,WAAW,QAAQ,eAAe,CAAC;AACnD,SAASC,MAAM,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AAC5D,SAASC,YAAY,QAAQ,2BAA2B,CAAC;AACzD,SAASC,iBAAiB,QAAQ,iCAAiC,CAAC;AACpE,SAASC,YAAY,QAAQ,4BAA4B,CAAC;AAE1D,OAAO,MAAMC,cAAc,GAAG,IAAM;IAClC,MAAM,EAAEC,cAAc,CAAA,EAAEC,mBAAmB,CAAA,EAAE,GAAGJ,iBAAiB,EAAE,AAAC;IAEpE,qBACE,MAACH,MAAM;QAACQ,IAAI,EAAE,CAAC,CAACF,CAAAA,cAAc,aAAdA,cAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,cAAc,CAAEG,MAAM,CAAA;QAAEC,MAAM,EAAC,OAAO;QAACC,SAAS;QAACC,QAAQ,EAAC,IAAI;;0BAC5E,KAACZ,MAAM,CAACa,MAAM;gBAACC,OAAO,EAAE,IAAMP,mBAAmB,EAAE;0BAAE,gBAAc;cAAgB;YAClFD,CAAAA,cAAc,aAAdA,cAAc,WAAQ,GAAtBA,KAAAA,CAAsB,GAAtBA,cAAc,CAAEG,MAAM,CAAA,kBAAI,KAACM,kBAAkB,KAAG;;MAC1C,CACT;AACJ,CAAC,CAAC;AAEF,MAAMA,kBAAkB,GAAG,IAAM;IAC/B,MAAM,EAAER,mBAAmB,CAAA,EAAE,GAAGJ,iBAAiB,EAAE,AAAC;IACpD,MAAM,EAAEa,YAAY,CAAA,EAAE,GAAGd,YAAY,EAAE,AAAC;IACxC,MAAM,EAAEe,SAAS,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGd,YAAY,EAAE,AAAC;IACnD,MAAM,CAACe,cAAc,EAAEC,iBAAiB,CAAC,GAAGvB,QAAQ,CAACoB,SAAS,CAAC,AAAC;IAEhE,MAAMI,WAAW,GAAG,CAACC,CAAY,GAAK;QACpCA,CAAC,CAACC,cAAc,EAAE,CAAC;QACnBL,YAAY,CAACC,cAAc,CAAC,CAAC;QAC7BH,YAAY,CAAC;YAAEQ,YAAY,EAAEL,cAAc,CAACM,IAAI,CAACC,QAAQ;SAAE,CAAC,CAAC;QAC7DnB,mBAAmB,EAAE,CAAC;IACxB,CAAC,AAAC;IAEF,qBACE,MAACP,MAAM,CAAC2B,IAAI;QAACC,QAAQ,EAAEP,WAAW;;0BAChC,MAACrB,MAAM,CAAC6B,OAAO;gBAACC,EAAE,EAAE;oBAAEC,KAAK,EAAE,MAAM;iBAAE;;kCACnC,KAACjC,KAAK;wBAACgC,EAAE,EAAE;4BAAEE,YAAY,EAAE,CAACC,KAAK,GAAKA,KAAK,CAACC,OAAO,CAAC,CAAC,CAAC;yBAAE;wBAAEC,QAAQ,EAAC,SAAS;kCAAC,uCAE7E;sBAAQ;kCACR,KAACpC,WAAW;wBAACY,SAAS;kCACpB,cAAA,KAACV,UAAU;4BACTmC,SAAS,EAAC,OAAO;4BACjBC,SAAS,EAAC,OAAO;4BACjBC,KAAK,EAAEnB,cAAc;4BACrBoB,QAAQ,EAAE,CAACD,KAAK,GAAKlB,iBAAiB,CAACkB,KAAK,CAAC;0BAC7C;sBACU;;cACC;0BACjB,KAACtC,MAAM,CAACwC,OAAO;0BACb,cAAA,KAACxC,MAAM,CAACyC,aAAa;oBAACC,OAAO,EAAErB,WAAW;8BAAE,OAAK;kBAAuB;cACzD;;MACL,CACd;AACJ,CAAC,AAAC"}

package/dist/components/GridLayout/GridItemContent.d.ts

@@ -2,6 +2,7 @@
 import { PanelGroupItemId } from '../../context';
 export interface GridItemContentProps {
     panelGroupItemId: PanelGroupItemId;
+    width: number;
 }
 /**
  * Resolves the reference to panel content in a GridItemDefinition and renders the panel.

package/dist/components/GridLayout/GridItemContent.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAGzF,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;CACpC;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAiB1D"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAIzF,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAkC1D"}