@perses-dev/dashboards 0.38.0 → 0.39.0

package/dist/cjs/context/TemplateVariableProvider/TemplateVariableProvider.js

@@ -21,10 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
+    useTemplateVariableStoreCtx: ()=>useTemplateVariableStoreCtx,
     useTemplateVariableValues: ()=>useTemplateVariableValues,
     useTemplateVariable: ()=>useTemplateVariable,
     useTemplateVariableActions: ()=>useTemplateVariableActions,
     useTemplateVariableDefinitions: ()=>useTemplateVariableDefinitions,
+    useTemplateExternalVariableDefinitions: ()=>useTemplateExternalVariableDefinitions,
     useTemplateVariableStore: ()=>useTemplateVariableStore,
     TemplateVariableProvider: ()=>TemplateVariableProvider
 });
@@ -54,29 +56,51 @@ function useTemplateVariableStoreCtx() {
 }
 function useTemplateVariableValues(variableNames) {
     const store = useTemplateVariableStoreCtx();
-    const state = (0, _zustand.useStore)(store, (s)=>{
-        const names = variableNames !== null && variableNames !== void 0 ? variableNames : Object.keys(s.variableState);
+    return (0, _zustand.useStore)(store, (s)=>{
         const vars = {};
+        // Collect values of local variables, from the variable state
+        const names = variableNames !== null && variableNames !== void 0 ? variableNames : s.variableDefinitions.map((value)=>value.spec.name);
         names.forEach((name)=>{
-            const varState = s.variableState[name];
-            if (!varState) {
+            const varState = s.variableState.get({
+                name
+            });
+            if (!varState || varState.overridden) {
                 return;
             }
             vars[name] = varState;
         });
+        // Collect values of external variables, from the variable state
+        s.externalVariableDefinitions.forEach((d)=>{
+            const source = d.source;
+            d.definitions.forEach((value)=>{
+                const name = value.spec.name;
+                const varState = s.variableState.get({
+                    name,
+                    source
+                });
+                if (!varState || varState.overridden) {
+                    return;
+                }
+                vars[name] = varState;
+            });
+        });
         return vars;
     }, (left, right)=>{
         return JSON.stringify(left) === JSON.stringify(right);
     });
-    return state;
 }
-function useTemplateVariable(name) {
+function useTemplateVariable(name, source) {
     const store = useTemplateVariableStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>{
-        const variableState = s.variableState[name];
-        const definition = s.variableDefinitions.find((v)=>v.spec.name === name);
+        var ref;
+        const state = s.variableState.get({
+            name,
+            source
+        });
+        const definitions = source ? (ref = s.externalVariableDefinitions.find((v)=>v.source === source)) === null || ref === void 0 ? void 0 : ref.definitions : s.variableDefinitions;
+        const definition = (definitions || []).find((v)=>v.spec.name === name);
         return {
-            state: variableState,
+            state,
             definition
         };
     });
@@ -98,6 +122,10 @@ function useTemplateVariableDefinitions() {
     const store = useTemplateVariableStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>s.variableDefinitions);
 }
+function useTemplateExternalVariableDefinitions() {
+    const store = useTemplateVariableStoreCtx();
+    return (0, _zustand.useStore)(store, (s)=>s.externalVariableDefinitions);
+}
 function useTemplateVariableStore() {
     const store = useTemplateVariableStoreCtx();
     return (0, _zustand.useStore)(store);
@@ -105,6 +133,7 @@ function useTemplateVariableStore() {
 function PluginProvider({ children  }) {
     const originalValues = useTemplateVariableValues();
     const definitions = useTemplateVariableDefinitions();
+    const externalDefinitions = useTemplateExternalVariableDefinitions();
     const values = (0, _react.useMemo)(()=>{
         const contextValues = {};
         // This will loop through all the current variables values
@@ -115,7 +144,7 @@ function PluginProvider({ children  }) {
                 ...originalValues[name]
             };
             if (v.value === _core.DEFAULT_ALL_VALUE) {
-                const definition = definitions.find((d)=>d.spec.name === name);
+                const definition = (0, _utils.findVariableDefinitionByName)(name, definitions, externalDefinitions);
                 // If the variable is a list variable and has a custom all value, then use that value instead
                 if ((definition === null || definition === void 0 ? void 0 : definition.kind) === 'ListVariable' && definition.spec.custom_all_value) {
                     v.value = definition.spec.custom_all_value;
@@ -130,7 +159,8 @@ function PluginProvider({ children  }) {
         return contextValues;
     }, [
         originalValues,
-        definitions
+        definitions,
+        externalDefinitions
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TemplateVariableContext.Provider, {
         value: {
@@ -139,40 +169,50 @@ function PluginProvider({ children  }) {
         children: children
     });
 }
-function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , queryParams  }) {
+function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , externalVariableDefinitions =[] , queryParams  }) {
     const initialParams = (0, _queryParams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
     const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, get)=>{
         return {
-            variableState: (0, _hydrationUtils.hydrateTemplateVariableStates)(initialVariableDefinitions, initialParams),
+            variableState: (0, _hydrationUtils.hydrateTemplateVariableStates)(initialVariableDefinitions, initialParams, externalVariableDefinitions),
             variableDefinitions: initialVariableDefinitions,
+            externalVariableDefinitions: externalVariableDefinitions,
             setVariableDefinitions (definitions) {
                 set((state)=>{
                     state.variableDefinitions = definitions;
-                    state.variableState = (0, _hydrationUtils.hydrateTemplateVariableStates)(definitions, initialParams);
+                    state.variableState = (0, _hydrationUtils.hydrateTemplateVariableStates)(definitions, initialParams, externalVariableDefinitions);
                 }, false, '[Variables] setVariableDefinitions' // Used for action name in Redux devtools
                 );
             },
-            setVariableOptions (name, options) {
+            setVariableOptions (name, options, source) {
                 set((state)=>{
-                    const varState = state.variableState[name];
+                    const varState = state.variableState.get({
+                        name,
+                        source
+                    });
                     if (!varState) {
                         return;
                     }
                     varState.options = options;
                 }, false, '[Variables] setVariableOptions');
             },
-            setVariableLoading (name, loading) {
+            setVariableLoading (name, loading, source) {
                 set((state)=>{
-                    const varState = state.variableState[name];
+                    const varState = state.variableState.get({
+                        name,
+                        source
+                    });
                     if (!varState) {
                         return;
                     }
                     varState.loading = loading;
                 }, false, '[Variables] setVariableLoading');
             },
-            setVariableValue: (name, value)=>set((state)=>{
+            setVariableValue: (name, value, source)=>set((state)=>{
                     let val = value;
-                    const varState = state.variableState[name];
+                    const varState = state.variableState.get({
+                        name,
+                        source
+                    });
                     if (!varState) {
                         return;
                     }
@@ -197,8 +237,11 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
                 const variableState = get().variableState;
                 const updatedVariables = (0, _immer1.default)(variableDefinitions, (draft)=>{
                     draft.forEach((variable, index)=>{
+                        const name = variable.spec.name;
                         if (variable.kind === 'ListVariable') {
-                            const currentVariable = variableState[variable.spec.name];
+                            const currentVariable = variableState.get({
+                                name
+                            });
                             if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== undefined) {
                                 draft[index] = {
                                     kind: 'ListVariable',
@@ -208,7 +251,9 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
                                 };
                             }
                         } else if (variable.kind === 'TextVariable') {
-                            const currentVariable1 = variableState[variable.spec.name];
+                            const currentVariable1 = variableState.get({
+                                name
+                            });
                             const currentVariableValue = typeof (currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) === 'string' ? currentVariable1.value : '';
                             if ((currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) !== undefined) {
                                 draft[index] = {
@@ -233,10 +278,12 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , query
     })));
     return store;
 }
-function TemplateVariableProvider({ children , initialVariableDefinitions =[]  }) {
-    const queryParams = (0, _queryParams.useVariableQueryParams)(initialVariableDefinitions);
+function TemplateVariableProvider({ children , initialVariableDefinitions =[] , externalVariableDefinitions =[]  }) {
+    const allVariableDefs = (0, _utils.mergeVariableDefinitions)(initialVariableDefinitions, externalVariableDefinitions);
+    const queryParams = (0, _queryParams.useVariableQueryParams)(allVariableDefs);
     const [store] = (0, _react.useState)(createTemplateVariableSrvStore({
         initialVariableDefinitions,
+        externalVariableDefinitions,
         queryParams
     }));
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TemplateVariableStoreContext.Provider, {

package/dist/cjs/context/TemplateVariableProvider/hydrationUtils.js

@@ -19,11 +19,14 @@ Object.defineProperty(exports, "hydrateTemplateVariableStates", {
     get: ()=>hydrateTemplateVariableStates
 });
 const _core = require("@perses-dev/core");
+const _pluginSystem = require("@perses-dev/plugin-system");
 // TODO: move to TemplateVariableProvider/utils.ts
 function hydrateTemplateVariableState(variable, initialValue) {
     const varState = {
         value: null,
-        loading: false
+        loading: false,
+        overriding: false,
+        overridden: false
     };
     switch(variable.kind){
         case 'TextVariable':
@@ -58,13 +61,60 @@ function hydrateTemplateVariableState(variable, initialValue) {
     }
     return varState;
 }
-function hydrateTemplateVariableStates(definitions, initialValues) {
-    const state = {};
-    definitions.forEach((v)=>{
+function hydrateTemplateVariableStates(localDefinitions, initialValues, externalDefinitions = []) {
+    const state = new _pluginSystem.VariableStoreStateMap();
+    // Collect the names used by local definitions
+    let overridingNames = {};
+    localDefinitions.forEach((v)=>{
+        overridingNames[v.spec.name] = true;
+    }, {});
+    // Then populate the external variables state,
+    // taking care of well flagging each name as used, so the overridden state can be filled accordingly.
+    const overriddenNames = {};
+    externalDefinitions.forEach((externalDef)=>{
+        const source = externalDef.source;
+        externalDef.definitions.forEach((v)=>{
+            const name = v.spec.name;
+            const param = initialValues[name];
+            const initialValue = param ? param : null;
+            state.set({
+                source,
+                name
+            }, {
+                ...hydrateTemplateVariableState(v, initialValue),
+                overridden: !!overridingNames[name]
+            });
+            overridingNames[name] = true;
+            overriddenNames[v.spec.name] = true;
+        });
+    }, {});
+    // Then populate the local variables state,
+    // taking care the overriding state is filled according to the names used in external variables.
+    localDefinitions.forEach((v)=>{
         const name = v.spec.name;
         const param = initialValues[name];
         const initialValue = param ? param : null;
-        state[name] = hydrateTemplateVariableState(v, initialValue);
+        state.set({
+            name
+        }, {
+            ...hydrateTemplateVariableState(v, initialValue),
+            overriding: !!overriddenNames[name]
+        });
+    });
+    overridingNames = {};
+    externalDefinitions.slice().reverse().forEach((externalDef)=>{
+        const source = externalDef.source;
+        externalDef.definitions.forEach((v)=>{
+            const name = v.spec.name;
+            const value = state.get({
+                source,
+                name
+            });
+            if (value) {
+                value.overriding = !!overridingNames[name];
+            }
+            overridingNames[name] = true;
+        });
     });
     return state;
 }

package/dist/cjs/context/TemplateVariableProvider/utils.js

@@ -14,25 +14,38 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "checkSavedDefaultVariableStatus", {
-    enumerable: true,
-    get: ()=>checkSavedDefaultVariableStatus
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    checkSavedDefaultVariableStatus: ()=>checkSavedDefaultVariableStatus,
+    mergeVariableDefinitions: ()=>mergeVariableDefinitions,
+    findVariableDefinitionByName: ()=>findVariableDefinitionByName,
+    forEachVariableDefinition: ()=>forEachVariableDefinition
 });
 function checkSavedDefaultVariableStatus(definitions, varState) {
     let isSavedVariableModified = false;
     const modifiedVariableNames = [];
     for (const savedVariable of definitions){
+        const name = savedVariable.spec.name;
         if (savedVariable.kind === 'ListVariable') {
-            const currentVariable = varState[savedVariable.spec.name];
+            const currentVariable = varState.get({
+                name
+            });
             if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== null && (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== savedVariable.spec.default_value) {
-                modifiedVariableNames.push(savedVariable.spec.name);
+                modifiedVariableNames.push(name);
                 isSavedVariableModified = true;
             }
         } else if (savedVariable.kind === 'TextVariable') {
-            const currentVariable1 = varState[savedVariable.spec.name];
+            const currentVariable1 = varState.get({
+                name
+            });
             const currentVariableValue = typeof (currentVariable1 === null || currentVariable1 === void 0 ? void 0 : currentVariable1.value) === 'string' ? currentVariable1.value : '';
             if (savedVariable.spec.value !== currentVariableValue) {
-                modifiedVariableNames.push(savedVariable.spec.name);
+                modifiedVariableNames.push(name);
                 isSavedVariableModified = true;
             }
         }
@@ -42,3 +55,22 @@ function checkSavedDefaultVariableStatus(definitions, varState) {
         modifiedVariableNames
     };
 }
+function mergeVariableDefinitions(locals, externals) {
+    const pushed = {};
+    const result = [];
+    // Append the value only if it's not already appended
+    forEachVariableDefinition(locals, externals, (value, name)=>{
+        if (!pushed[name]) {
+            result.push(value);
+            pushed[name] = true;
+        }
+    });
+    return result;
+}
+function findVariableDefinitionByName(name, localDefinitions, externalDefinitions) {
+    return mergeVariableDefinitions(localDefinitions, externalDefinitions).find((d)=>d.spec.name === name);
+}
+function forEachVariableDefinition(locals, externals, callbackFn) {
+    locals.forEach((v)=>callbackFn(v, v.spec.name));
+    externals.forEach((ext)=>ext.definitions.forEach((v)=>callbackFn(v, v.spec.name, ext.source)));
+}

package/dist/cjs/test/render.js

@@ -69,7 +69,7 @@ function renderWithContext(ui, options, history) {
                             vertical: 'bottom',
                             horizontal: 'right'
                         },
-                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsThemeProvider, {
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsProvider, {
                             chartsTheme: _components.testChartsTheme,
                             children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.PluginRegistry, {
                                 ...(0, _pluginSystem.mockPluginRegistry)(..._pluginRegistry.MOCK_PLUGINS),

package/dist/cjs/views/ViewDashboard/DashboardApp.js

@@ -26,6 +26,7 @@ const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
     const { dashboardResource , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly ,  } = props;
+    const chartsTheme = (0, _components.useChartsTheme)();
     const { setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
@@ -93,7 +94,11 @@ const DashboardApp = (props)=>{
                             }
                         })
                     }),
-                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {}),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ChartsProvider, {
+                        chartsTheme: chartsTheme,
+                        enablePinning: false,
+                        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelDrawer, {})
+                    }),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.PanelGroupDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelGroupDialog, {}),
                     /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components1.DeletePanelDialog, {}),

package/dist/cjs/views/ViewDashboard/ViewDashboard.js

@@ -26,14 +26,14 @@ const _pluginSystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
 const _dashboardApp = require("./DashboardApp");
 function ViewDashboard(props) {
-    const { dashboardResource , datasourceApi , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
+    const { dashboardResource , datasourceApi , externalVariableDefinitions , dashboardTitleComponent , emptyDashboardProps , onSave , onDiscard , initialVariableIsSticky , isReadonly , isEditing , sx , ...others } = props;
     const { spec  } = dashboardResource;
     var _duration;
     const dashboardDuration = (_duration = spec.duration) !== null && _duration !== void 0 ? _duration : _core.DEFAULT_DASHBOARD_DURATION;
     var _refreshInterval;
-    const dashhboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
+    const dashboardRefreshInterval = (_refreshInterval = spec.refreshInterval) !== null && _refreshInterval !== void 0 ? _refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
     const initialTimeRange = (0, _pluginSystem.useInitialTimeRange)(dashboardDuration);
-    const initialRefreshInterval = (0, _pluginSystem.useInitialRefreshInterval)(dashhboardRefreshInterval);
+    const initialRefreshInterval = (0, _pluginSystem.useInitialRefreshInterval)(dashboardRefreshInterval);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.DatasourceStoreProvider, {
         dashboardResource: dashboardResource,
         datasourceApi: datasourceApi,
@@ -48,6 +48,7 @@ function ViewDashboard(props) {
                 enabledURLParams: true,
                 children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_context.TemplateVariableProvider, {
                     initialVariableDefinitions: spec.variables,
+                    externalVariableDefinitions: externalVariableDefinitions,
                     children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
                         sx: (0, _components.combineSx)({
                             display: 'flex',

package/dist/components/Dashboard/Dashboard.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material';
 import { EmptyDashboardProps } from '../EmptyDashboard';
+import { PanelOptions } from '../Panel';
 export declare type DashboardProps = BoxProps & {
     /**
      * Props for `EmptyDashboard` component that will be rendered when the dashboard
@@ -8,9 +9,10 @@ export declare type DashboardProps = BoxProps & {
      * be used.
      */
     emptyDashboardProps?: EmptyDashboardProps;
+    panelOptions?: PanelOptions;
 };
 /**
  * Renders a Dashboard for the provided Dashboard spec.
  */
-export declare function Dashboard({ emptyDashboardProps, ...boxProps }: DashboardProps): JSX.Element;
+export declare function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps): JSX.Element;
 //# sourceMappingURL=Dashboard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AAExE,oBAAY,cAAc,GAAG,QAAQ,GAAG;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;CAC3C,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,eAgB7E"}
+{"version":3,"file":"Dashboard.d.ts","sourceRoot":"","sources":["../../../src/components/Dashboard/Dashboard.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAO,QAAQ,EAAE,MAAM,eAAe,CAAC;AAI9C,OAAO,EAAkB,mBAAmB,EAAE,MAAM,mBAAmB,CAAC;AACxE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACxC,oBAAY,cAAc,GAAG,QAAQ,GAAG;IACtC;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,mBAAmB,CAAC;IAC1C,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B,CAAC;AAEF;;GAEG;AACH,wBAAgB,SAAS,CAAC,EAAE,mBAAmB,EAAE,YAAY,EAAE,GAAG,QAAQ,EAAE,EAAE,cAAc,eAmB3F"}

package/dist/components/Dashboard/Dashboard.js

@@ -18,7 +18,7 @@ import { GridLayout } from '../GridLayout';
 import { EmptyDashboard } from '../EmptyDashboard';
 /**
  * Renders a Dashboard for the provided Dashboard spec.
- */ export function Dashboard({ emptyDashboardProps , ...boxProps }) {
+ */ export function Dashboard({ emptyDashboardProps , panelOptions , ...boxProps }) {
     const panelGroupIds = usePanelGroupIds();
     const isEmpty = !panelGroupIds.length;
     return /*#__PURE__*/ _jsx(Box, {
@@ -40,7 +40,8 @@ import { EmptyDashboard } from '../EmptyDashboard';
                     })
                 }),
                 !isEmpty && panelGroupIds.map((panelGroupId)=>/*#__PURE__*/ _jsx(GridLayout, {
-                        panelGroupId: panelGroupId
+                        panelGroupId: panelGroupId,
+                        panelOptions: panelOptions
                     }, panelGroupId))
             ]
         })

package/dist/components/Dashboard/Dashboard.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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 { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\n\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n};\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, ...boxProps }: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  const isEmpty = !panelGroupIds.length;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty && panelGroupIds.map((panelGroupId) => <GridLayout key={panelGroupId} panelGroupId={panelGroupId} />)}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","EmptyDashboard","Dashboard","emptyDashboardProps","boxProps","panelGroupIds","isEmpty","length","sx","height","FallbackComponent","display","alignItems","map","panelGroupId"],"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,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,QAAQ,eAAe,CAAC;AACjD,SAASC,UAAU,QAAQ,eAAe,CAAC;AAC3C,SAASC,cAAc,QAA6B,mBAAmB,CAAC;AAWxE;;CAEC,GACD,OAAO,SAASC,SAAS,CAAC,EAAEC,mBAAmB,CAAA,EAAE,GAAGC,QAAQ,EAAkB,EAAE;IAC9E,MAAMC,aAAa,GAAGN,gBAAgB,EAAE,AAAC;IACzC,MAAMO,OAAO,GAAG,CAACD,aAAa,CAACE,MAAM,AAAC;IAEtC,qBACE,KAACX,GAAG;QAAE,GAAGQ,QAAQ;QAAEI,EAAE,EAAE;YAAEC,MAAM,EAAE,MAAM;SAAE;kBACvC,cAAA,MAACZ,aAAa;YAACa,iBAAiB,EAAEZ,UAAU;;gBACzCQ,OAAO,kBACN,KAACV,GAAG;oBAACY,EAAE,EAAE;wBAAEC,MAAM,EAAE,MAAM;wBAAEE,OAAO,EAAE,MAAM;wBAAEC,UAAU,EAAE,QAAQ;qBAAE;8BAChE,cAAA,KAACX,cAAc;wBAAE,GAAGE,mBAAmB;sBAAI;kBACvC,AACP;gBACA,CAACG,OAAO,IAAID,aAAa,CAACQ,GAAG,CAAC,CAACC,YAAY,iBAAK,KAACd,UAAU;wBAAoBc,YAAY,EAAEA,YAAY;uBAAxCA,YAAY,CAAgC,CAAC;;UACjG;MACZ,CACN;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/Dashboard/Dashboard.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 { Box, BoxProps } from '@mui/material';\nimport { ErrorBoundary, ErrorAlert } from '@perses-dev/components';\nimport { usePanelGroupIds } from '../../context';\nimport { GridLayout } from '../GridLayout';\nimport { EmptyDashboard, EmptyDashboardProps } from '../EmptyDashboard';\nimport { PanelOptions } from '../Panel';\nexport type DashboardProps = BoxProps & {\n  /**\n   * Props for `EmptyDashboard` component that will be rendered when the dashboard\n   * is empty (i.e. has no panel groups). If not specified, the defaults will\n   * be used.\n   */\n  emptyDashboardProps?: EmptyDashboardProps;\n  panelOptions?: PanelOptions;\n};\n\n/**\n * Renders a Dashboard for the provided Dashboard spec.\n */\nexport function Dashboard({ emptyDashboardProps, panelOptions, ...boxProps }: DashboardProps) {\n  const panelGroupIds = usePanelGroupIds();\n  const isEmpty = !panelGroupIds.length;\n\n  return (\n    <Box {...boxProps} sx={{ height: '100%' }}>\n      <ErrorBoundary FallbackComponent={ErrorAlert}>\n        {isEmpty && (\n          <Box sx={{ height: '100%', display: 'flex', alignItems: 'center' }}>\n            <EmptyDashboard {...emptyDashboardProps} />\n          </Box>\n        )}\n        {!isEmpty &&\n          panelGroupIds.map((panelGroupId) => (\n            <GridLayout key={panelGroupId} panelGroupId={panelGroupId} panelOptions={panelOptions} />\n          ))}\n      </ErrorBoundary>\n    </Box>\n  );\n}\n"],"names":["Box","ErrorBoundary","ErrorAlert","usePanelGroupIds","GridLayout","EmptyDashboard","Dashboard","emptyDashboardProps","panelOptions","boxProps","panelGroupIds","isEmpty","length","sx","height","FallbackComponent","display","alignItems","map","panelGroupId"],"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,SAASA,GAAG,QAAkB,eAAe,CAAC;AAC9C,SAASC,aAAa,EAAEC,UAAU,QAAQ,wBAAwB,CAAC;AACnE,SAASC,gBAAgB,QAAQ,eAAe,CAAC;AACjD,SAASC,UAAU,QAAQ,eAAe,CAAC;AAC3C,SAASC,cAAc,QAA6B,mBAAmB,CAAC;AAYxE;;CAEC,GACD,OAAO,SAASC,SAAS,CAAC,EAAEC,mBAAmB,CAAA,EAAEC,YAAY,CAAA,EAAE,GAAGC,QAAQ,EAAkB,EAAE;IAC5F,MAAMC,aAAa,GAAGP,gBAAgB,EAAE,AAAC;IACzC,MAAMQ,OAAO,GAAG,CAACD,aAAa,CAACE,MAAM,AAAC;IAEtC,qBACE,KAACZ,GAAG;QAAE,GAAGS,QAAQ;QAAEI,EAAE,EAAE;YAAEC,MAAM,EAAE,MAAM;SAAE;kBACvC,cAAA,MAACb,aAAa;YAACc,iBAAiB,EAAEb,UAAU;;gBACzCS,OAAO,kBACN,KAACX,GAAG;oBAACa,EAAE,EAAE;wBAAEC,MAAM,EAAE,MAAM;wBAAEE,OAAO,EAAE,MAAM;wBAAEC,UAAU,EAAE,QAAQ;qBAAE;8BAChE,cAAA,KAACZ,cAAc;wBAAE,GAAGE,mBAAmB;sBAAI;kBACvC,AACP;gBACA,CAACI,OAAO,IACPD,aAAa,CAACQ,GAAG,CAAC,CAACC,YAAY,iBAC7B,KAACf,UAAU;wBAAoBe,YAAY,EAAEA,YAAY;wBAAEX,YAAY,EAAEA,YAAY;uBAApEW,YAAY,CAA4D,AAC1F,CAAC;;UACU;MACZ,CACN;AACJ,CAAC"}

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

@@ -1,8 +1,10 @@
 /// <reference types="react" />
 import { PanelGroupItemId } from '../../context';
+import { PanelOptions } from '../Panel';
 export interface GridItemContentProps {
     panelGroupItemId: PanelGroupItemId;
     width: number;
+    panelOptions?: PanelOptions;
 }
 /**
  * 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":";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"}
+{"version":3,"file":"GridItemContent.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridItemContent.tsx"],"names":[],"mappings":";AAcA,OAAO,EAAE,gBAAgB,EAA0C,MAAM,eAAe,CAAC;AAGzF,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAExC,MAAM,WAAW,oBAAoB;IACnC,gBAAgB,EAAE,gBAAgB,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,oBAAoB,eAuC1D"}

package/dist/components/GridLayout/GridItemContent.js

@@ -48,7 +48,9 @@ import { Panel } from '../Panel/Panel';
         },
         children: /*#__PURE__*/ _jsx(Panel, {
             definition: panelDefinition,
-            editHandlers: editHandlers
+            editHandlers: editHandlers,
+            panelOptions: props.panelOptions,
+            panelGroupItemId: panelGroupItemId
         })
     });
 }

package/dist/components/GridLayout/GridItemContent.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.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 { QueryDefinition } from '@perses-dev/core';\nimport { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { useSuggestedStepMs } from '../../utils';\nimport { Panel, PanelProps } from '../Panel/Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const {\n    spec: { queries },\n  } = panelDefinition;\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query: QueryDefinition) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n      <Panel definition={panelDefinition} editHandlers={editHandlers} />\n    </DataQueriesProvider>\n  );\n}\n"],"names":["DataQueriesProvider","useEditMode","usePanel","usePanelActions","useSuggestedStepMs","Panel","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","editHandlers","undefined","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","queryDefinitions","definitions","map","query","kind","plugin","options","definition"],"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;AACA,SAASA,mBAAmB,QAAQ,2BAA2B,CAAC;AAChE,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AACjD,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AAOnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAC1C,MAAMG,eAAe,GAAGR,QAAQ,CAACM,gBAAgB,CAAC,AAAC;IACnD,MAAM,EACJG,IAAI,EAAE,EAAEC,OAAO,CAAA,EAAE,CAAA,IAClB,GAAGF,eAAe,AAAC;IACpB,MAAM,EAAEG,UAAU,CAAA,EAAE,GAAGZ,WAAW,EAAE,AAAC;IACrC,MAAM,EAAEa,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGb,eAAe,CAACK,gBAAgB,CAAC,AAAC;IAEnG,iDAAiD;IACjD,IAAIS,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIL,UAAU,EAAE;QACdI,YAAY,GAAG;YACbE,gBAAgB,EAAEL,aAAa;YAC/BM,qBAAqB,EAAEJ,cAAc;YACrCK,kBAAkB,EAAEN,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,2DAA2D;IAC3D,MAAMO,eAAe,GAAGlB,kBAAkB,CAACK,KAAK,CAAC,AAAC;IAClD,MAAMc,gBAAgB,GAAGX,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,EAAE,AAAC;IACvC,MAAMY,WAAW,GAAGD,gBAAgB,CAACE,GAAG,CAAC,CAACC,KAAsB,GAAK;QACnE,OAAO;YACLC,IAAI,EAAED,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACD,IAAI;YAC5BhB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACjB,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,AAAC;IAEH,qBACE,KAACX,mBAAmB;QAACwB,WAAW,EAAEA,WAAW;QAAEK,OAAO,EAAE;YAAEP,eAAe;SAAE;kBACzE,cAAA,KAACjB,KAAK;YAACyB,UAAU,EAAEpB,eAAe;YAAEO,YAAY,EAAEA,YAAY;UAAI;MAC9C,CACtB;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridItemContent.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 { DataQueriesProvider } from '@perses-dev/plugin-system';\nimport { PanelGroupItemId, useEditMode, usePanel, usePanelActions } from '../../context';\nimport { useSuggestedStepMs } from '../../utils';\nimport { Panel, PanelProps } from '../Panel/Panel';\nimport { PanelOptions } from '../Panel';\n\nexport interface GridItemContentProps {\n  panelGroupItemId: PanelGroupItemId;\n  width: number; // necessary for determining the suggested step ms\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Resolves the reference to panel content in a GridItemDefinition and renders the panel.\n */\nexport function GridItemContent(props: GridItemContentProps) {\n  const { panelGroupItemId, width } = props;\n  const panelDefinition = usePanel(panelGroupItemId);\n  const {\n    spec: { queries },\n  } = panelDefinition;\n  const { isEditMode } = useEditMode();\n  const { openEditPanel, openDeletePanelDialog, duplicatePanel } = usePanelActions(panelGroupItemId);\n\n  // Provide actions to the panel when in edit mode\n  let editHandlers: PanelProps['editHandlers'] = undefined;\n  if (isEditMode) {\n    editHandlers = {\n      onEditPanelClick: openEditPanel,\n      onDuplicatePanelClick: duplicatePanel,\n      onDeletePanelClick: openDeletePanelDialog,\n    };\n  }\n\n  // map TimeSeriesQueryDefinition to Definition<UnknownSpec>\n  const suggestedStepMs = useSuggestedStepMs(width);\n  const queryDefinitions = queries ?? [];\n  const definitions = queryDefinitions.map((query) => {\n    return {\n      kind: query.spec.plugin.kind,\n      spec: query.spec.plugin.spec,\n    };\n  });\n\n  return (\n    <DataQueriesProvider definitions={definitions} options={{ suggestedStepMs }}>\n      <Panel\n        definition={panelDefinition}\n        editHandlers={editHandlers}\n        panelOptions={props.panelOptions}\n        panelGroupItemId={panelGroupItemId}\n      />\n    </DataQueriesProvider>\n  );\n}\n"],"names":["DataQueriesProvider","useEditMode","usePanel","usePanelActions","useSuggestedStepMs","Panel","GridItemContent","props","panelGroupItemId","width","panelDefinition","spec","queries","isEditMode","openEditPanel","openDeletePanelDialog","duplicatePanel","editHandlers","undefined","onEditPanelClick","onDuplicatePanelClick","onDeletePanelClick","suggestedStepMs","queryDefinitions","definitions","map","query","kind","plugin","options","definition","panelOptions"],"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,SAASA,mBAAmB,QAAQ,2BAA2B,CAAC;AAChE,SAA2BC,WAAW,EAAEC,QAAQ,EAAEC,eAAe,QAAQ,eAAe,CAAC;AACzF,SAASC,kBAAkB,QAAQ,aAAa,CAAC;AACjD,SAASC,KAAK,QAAoB,gBAAgB,CAAC;AASnD;;CAEC,GACD,OAAO,SAASC,eAAe,CAACC,KAA2B,EAAE;IAC3D,MAAM,EAAEC,gBAAgB,CAAA,EAAEC,KAAK,CAAA,EAAE,GAAGF,KAAK,AAAC;IAC1C,MAAMG,eAAe,GAAGR,QAAQ,CAACM,gBAAgB,CAAC,AAAC;IACnD,MAAM,EACJG,IAAI,EAAE,EAAEC,OAAO,CAAA,EAAE,CAAA,IAClB,GAAGF,eAAe,AAAC;IACpB,MAAM,EAAEG,UAAU,CAAA,EAAE,GAAGZ,WAAW,EAAE,AAAC;IACrC,MAAM,EAAEa,aAAa,CAAA,EAAEC,qBAAqB,CAAA,EAAEC,cAAc,CAAA,EAAE,GAAGb,eAAe,CAACK,gBAAgB,CAAC,AAAC;IAEnG,iDAAiD;IACjD,IAAIS,YAAY,GAA+BC,SAAS,AAAC;IACzD,IAAIL,UAAU,EAAE;QACdI,YAAY,GAAG;YACbE,gBAAgB,EAAEL,aAAa;YAC/BM,qBAAqB,EAAEJ,cAAc;YACrCK,kBAAkB,EAAEN,qBAAqB;SAC1C,CAAC;IACJ,CAAC;IAED,2DAA2D;IAC3D,MAAMO,eAAe,GAAGlB,kBAAkB,CAACK,KAAK,CAAC,AAAC;IAClD,MAAMc,gBAAgB,GAAGX,OAAO,aAAPA,OAAO,cAAPA,OAAO,GAAI,EAAE,AAAC;IACvC,MAAMY,WAAW,GAAGD,gBAAgB,CAACE,GAAG,CAAC,CAACC,KAAK,GAAK;QAClD,OAAO;YACLC,IAAI,EAAED,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACD,IAAI;YAC5BhB,IAAI,EAAEe,KAAK,CAACf,IAAI,CAACiB,MAAM,CAACjB,IAAI;SAC7B,CAAC;IACJ,CAAC,CAAC,AAAC;IAEH,qBACE,KAACX,mBAAmB;QAACwB,WAAW,EAAEA,WAAW;QAAEK,OAAO,EAAE;YAAEP,eAAe;SAAE;kBACzE,cAAA,KAACjB,KAAK;YACJyB,UAAU,EAAEpB,eAAe;YAC3BO,YAAY,EAAEA,YAAY;YAC1Bc,YAAY,EAAExB,KAAK,CAACwB,YAAY;YAChCvB,gBAAgB,EAAEA,gBAAgB;UAClC;MACkB,CACtB;AACJ,CAAC"}

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

@@ -1,7 +1,9 @@
 /// <reference types="react" />
 import { PanelGroupId } from '../../context';
+import { PanelOptions } from '../Panel';
 export interface GridLayoutProps {
     panelGroupId: PanelGroupId;
+    panelOptions?: PanelOptions;
 }
 /**
  * Layout component that arranges children in a Grid based on the definition.

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

@@ -1 +1 @@
-{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAS/F,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;CAC5B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAkFhD"}
+{"version":3,"file":"GridLayout.d.ts","sourceRoot":"","sources":["../../../src/components/GridLayout/GridLayout.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAAoD,YAAY,EAAE,MAAM,eAAe,CAAC;AAE/F,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAOxC,MAAM,WAAW,eAAe;IAC9B,YAAY,EAAE,YAAY,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,CAAC;CAC7B;AAED;;GAEG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,eAmFhD"}

package/dist/components/GridLayout/GridLayout.js

@@ -99,6 +99,7 @@ const ResponsiveGridLayout = WidthProvider(Responsive);
                             children: /*#__PURE__*/ _jsx(ErrorBoundary, {
                                 FallbackComponent: ErrorAlert,
                                 children: /*#__PURE__*/ _jsx(GridItemContent, {
+                                    panelOptions: props.panelOptions,
                                     panelGroupItemId: {
                                         panelGroupId,
                                         panelGroupItemLayoutId: i

package/dist/components/GridLayout/GridLayout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.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.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\n\nconst DEFAULT_MARGIN = 10;\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i, w }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\n/**\n * Calculates grid item width\n * @param w number of columns the grid item spans\n * @param colWidth the width of each column in px\n * @returns grid item's width in px\n * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n */\nconst calculateGridItemWidth = (w: number, colWidth: number) => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","itemLayouts","onLayoutChange","onWidthChange","map","i","w","div","FallbackComponent","panelGroupItemId","panelGroupItemLayoutId","width","calculateGridItemWidth","colWidth","Number","isFinite","Math","round","max"],"mappings":"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"}
+{"version":3,"sources":["../../../src/components/GridLayout/GridLayout.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.\nimport { useState } from 'react';\nimport { Responsive, WidthProvider, Layouts, Layout } from 'react-grid-layout';\nimport { Collapse, useTheme } from '@mui/material';\nimport { ErrorAlert, ErrorBoundary } from '@perses-dev/components';\nimport { useEditMode, usePanelGroup, usePanelGroupActions, PanelGroupId } from '../../context';\nimport { GRID_LAYOUT_COLS, GRID_LAYOUT_SMALL_BREAKPOINT } from '../../constants';\nimport { PanelOptions } from '../Panel';\nimport { GridTitle } from './GridTitle';\nimport { GridItemContent } from './GridItemContent';\nimport { GridContainer } from './GridContainer';\nconst DEFAULT_MARGIN = 10;\nconst ResponsiveGridLayout = WidthProvider(Responsive);\n\nexport interface GridLayoutProps {\n  panelGroupId: PanelGroupId;\n  panelOptions?: PanelOptions;\n}\n\n/**\n * Layout component that arranges children in a Grid based on the definition.\n */\nexport function GridLayout(props: GridLayoutProps) {\n  const { panelGroupId /*...others */ } = props;\n  const theme = useTheme();\n  const groupDefinition = usePanelGroup(panelGroupId);\n  const { updatePanelGroupLayouts } = usePanelGroupActions(panelGroupId);\n\n  const [isOpen, setIsOpen] = useState(!groupDefinition.isCollapsed ?? true);\n  const { isEditMode } = useEditMode();\n\n  const [gridColWidth, setGridColWidth] = useState(0);\n\n  const handleLayoutChange = (currentLayout: Layout[], allLayouts: Layouts) => {\n    // Using the value from `allLayouts` instead of `currentLayout` because of\n    // a bug in react-layout-grid where `currentLayout` does not adjust properly\n    // when going to a smaller breakpoint and then back to a larger breakpoint.\n    // https://github.com/react-grid-layout/react-grid-layout/issues/1663\n    const smallLayout = allLayouts[GRID_LAYOUT_SMALL_BREAKPOINT];\n    if (smallLayout) {\n      updatePanelGroupLayouts(smallLayout);\n    }\n  };\n\n  /**\n   * Calculate the column width so we can determine the width of each panel for suggested step ms\n   * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n   */\n  const handleWidthChange = (\n    containerWidth: number,\n    margin: [number, number],\n    cols: number,\n    containerPadding: [number, number]\n  ) => {\n    const marginX = margin[0];\n    const marginWidth = marginX * (cols - 1);\n    const containerPaddingWidth = containerPadding[0] * 2;\n    // exclude margin and padding from total width\n    setGridColWidth((containerWidth - marginWidth - containerPaddingWidth) / cols);\n  };\n\n  return (\n    <GridContainer>\n      {groupDefinition.title !== undefined && (\n        <GridTitle\n          panelGroupId={panelGroupId}\n          title={groupDefinition.title}\n          collapse={\n            groupDefinition.isCollapsed === undefined\n              ? undefined\n              : { isOpen, onToggleOpen: () => setIsOpen((current) => !current) }\n          }\n        />\n      )}\n      <Collapse in={isOpen} unmountOnExit appear={false} data-testid=\"panel-group-content\">\n        <ResponsiveGridLayout\n          className=\"layout\"\n          breakpoints={{ sm: theme.breakpoints.values.sm, xxs: 0 }}\n          cols={GRID_LAYOUT_COLS}\n          rowHeight={30}\n          draggableHandle={'.drag-handle'}\n          resizeHandles={['se']}\n          isDraggable={isEditMode}\n          isResizable={isEditMode}\n          margin={[DEFAULT_MARGIN, DEFAULT_MARGIN]}\n          containerPadding={[0, 10]}\n          layouts={{ [GRID_LAYOUT_SMALL_BREAKPOINT]: groupDefinition.itemLayouts }}\n          onLayoutChange={handleLayoutChange}\n          onWidthChange={handleWidthChange}\n        >\n          {groupDefinition.itemLayouts.map(({ i, w }) => (\n            <div key={i}>\n              <ErrorBoundary FallbackComponent={ErrorAlert}>\n                <GridItemContent\n                  panelOptions={props.panelOptions}\n                  panelGroupItemId={{ panelGroupId, panelGroupItemLayoutId: i }}\n                  width={calculateGridItemWidth(w, gridColWidth)}\n                />\n              </ErrorBoundary>\n            </div>\n          ))}\n        </ResponsiveGridLayout>\n      </Collapse>\n    </GridContainer>\n  );\n}\n\n/**\n * Calculates grid item width\n * @param w number of columns the grid item spans\n * @param colWidth the width of each column in px\n * @returns grid item's width in px\n * https://github.com/react-grid-layout/react-grid-layout/blob/master/lib/calculateUtils.js#L14-L35\n */\nconst calculateGridItemWidth = (w: number, colWidth: number) => {\n  // 0 * Infinity === NaN, which causes problems with resize contraints\n  if (!Number.isFinite(w)) return w;\n  return Math.round(colWidth * w + Math.max(0, w - 1) * DEFAULT_MARGIN);\n};\n"],"names":["useState","Responsive","WidthProvider","Collapse","useTheme","ErrorAlert","ErrorBoundary","useEditMode","usePanelGroup","usePanelGroupActions","GRID_LAYOUT_COLS","GRID_LAYOUT_SMALL_BREAKPOINT","GridTitle","GridItemContent","GridContainer","DEFAULT_MARGIN","ResponsiveGridLayout","GridLayout","props","panelGroupId","theme","groupDefinition","updatePanelGroupLayouts","isOpen","setIsOpen","isCollapsed","isEditMode","gridColWidth","setGridColWidth","handleLayoutChange","currentLayout","allLayouts","smallLayout","handleWidthChange","containerWidth","margin","cols","containerPadding","marginX","marginWidth","containerPaddingWidth","title","undefined","collapse","onToggleOpen","current","in","unmountOnExit","appear","data-testid","className","breakpoints","sm","values","xxs","rowHeight","draggableHandle","resizeHandles","isDraggable","isResizable","layouts","itemLayouts","onLayoutChange","onWidthChange","map","i","w","div","FallbackComponent","panelOptions","panelGroupItemId","panelGroupItemLayoutId","width","calculateGridItemWidth","colWidth","Number","isFinite","Math","round","max"],"mappings":"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"}