@perses-dev/dashboards 0.0.0-snapshot-scatterplot-fix-imports-95e1b59 → 0.0.0-snapshot-explorer-plugin-c4a7621

package/dist/cjs/context/{TemplateVariableProvider/TemplateVariableProvider.js → VariableProvider/VariableProvider.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -21,37 +21,35 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    TemplateVariableProvider: function() {
-        return TemplateVariableProvider;
+    VariableProvider: function() {
+        return VariableProvider;
     },
-    TemplateVariableProviderWithQueryParams: function() {
-        return TemplateVariableProviderWithQueryParams;
+    VariableProviderWithQueryParams: function() {
+        return VariableProviderWithQueryParams;
     },
-    useTemplateExternalVariableDefinitions: function() {
-        return useTemplateExternalVariableDefinitions;
+    useExternalVariableDefinitions: function() {
+        return useExternalVariableDefinitions;
     },
-    useTemplateVariable: function() {
-        return useTemplateVariable;
+    useVariableDefinitionActions: function() {
+        return useVariableDefinitionActions;
     },
-    useTemplateVariableActions: function() {
-        return useTemplateVariableActions;
+    useVariableDefinitionAndState: function() {
+        return useVariableDefinitionAndState;
     },
-    useTemplateVariableDefinitions: function() {
-        return useTemplateVariableDefinitions;
+    useVariableDefinitionStates: function() {
+        return useVariableDefinitionStates;
     },
-    useTemplateVariableStore: function() {
-        return useTemplateVariableStore;
+    useVariableDefinitionStoreCtx: function() {
+        return useVariableDefinitionStoreCtx;
     },
-    useTemplateVariableStoreCtx: function() {
-        return useTemplateVariableStoreCtx;
-    },
-    useTemplateVariableValues: function() {
-        return useTemplateVariableValues;
+    useVariableDefinitions: function() {
+        return useVariableDefinitions;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _zustand = require("zustand");
+const _traditional = require("zustand/traditional");
 const _immer = require("zustand/middleware/immer");
 const _middleware = require("zustand/middleware");
 const _immer1 = /*#__PURE__*/ _interop_require_default(require("immer"));
@@ -65,20 +63,22 @@ function _interop_require_default(obj) {
         default: obj
     };
 }
-const TemplateVariableStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
-function useTemplateVariableStoreCtx() {
-    const context = (0, _react.useContext)(TemplateVariableStoreContext);
+/**
+ * Context object for {@link VariableDefinitionStore}.
+ */ const VariableDefinitionStoreContext = /*#__PURE__*/ (0, _react.createContext)(undefined);
+function useVariableDefinitionStoreCtx() {
+    const context = (0, _react.useContext)(VariableDefinitionStoreContext);
     if (!context) {
-        throw new Error('TemplateVariableStoreContext not initialized');
+        throw new Error('VariableStoreContext not initialized');
     }
     return context;
 }
-function useTemplateVariableValues(variableNames) {
-    const store = useTemplateVariableStoreCtx();
-    return (0, _zustand.useStore)(store, (s)=>{
-        const vars = {};
+function useVariableDefinitionStates(variableNames) {
+    const store = useVariableDefinitionStoreCtx();
+    return (0, _traditional.useStoreWithEqualityFn)(store, (s)=>{
+        const varStates = {};
         // Collect values of local variables, from the variable state
-        const names = variableNames !== null && variableNames !== void 0 ? variableNames : s.variableDefinitions.map((value)=>value.spec.name);
+        const names = variableNames ?? s.variableDefinitions.map((value)=>value.spec.name);
         names.forEach((name)=>{
             const varState = s.variableState.get({
                 name
@@ -86,7 +86,7 @@ function useTemplateVariableValues(variableNames) {
             if (!varState || varState.overridden) {
                 return;
             }
-            vars[name] = varState;
+            varStates[name] = varState;
         });
         // Collect values of external variables, from the variable state
         s.externalVariableDefinitions.forEach((d)=>{
@@ -100,23 +100,22 @@ function useTemplateVariableValues(variableNames) {
                 if (!varState || varState.overridden) {
                     return;
                 }
-                vars[name] = varState;
+                varStates[name] = varState;
             });
         });
-        return vars;
+        return varStates;
     }, (left, right)=>{
         return JSON.stringify(left) === JSON.stringify(right);
     });
 }
-function useTemplateVariable(name, source) {
-    const store = useTemplateVariableStoreCtx();
+function useVariableDefinitionAndState(name, source) {
+    const store = useVariableDefinitionStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>{
-        var _s_externalVariableDefinitions_find;
         const state = s.variableState.get({
             name,
             source
         });
-        const definitions = source ? (_s_externalVariableDefinitions_find = s.externalVariableDefinitions.find((v)=>v.source === source)) === null || _s_externalVariableDefinitions_find === void 0 ? void 0 : _s_externalVariableDefinitions_find.definitions : s.variableDefinitions;
+        const definitions = source ? s.externalVariableDefinitions.find((v)=>v.source === source)?.definitions : s.variableDefinitions;
         const definition = (definitions || []).find((v)=>v.spec.name === name);
         return {
             state,
@@ -124,8 +123,8 @@ function useTemplateVariable(name, source) {
         };
     });
 }
-function useTemplateVariableActions() {
-    const store = useTemplateVariableStoreCtx();
+function useVariableDefinitionActions() {
+    const store = useVariableDefinitionStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>{
         return {
             setVariableValue: s.setVariableValue,
@@ -137,22 +136,18 @@ function useTemplateVariableActions() {
         };
     });
 }
-function useTemplateVariableDefinitions() {
-    const store = useTemplateVariableStoreCtx();
+function useVariableDefinitions() {
+    const store = useVariableDefinitionStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>s.variableDefinitions);
 }
-function useTemplateExternalVariableDefinitions() {
-    const store = useTemplateVariableStoreCtx();
+function useExternalVariableDefinitions() {
+    const store = useVariableDefinitionStoreCtx();
     return (0, _zustand.useStore)(store, (s)=>s.externalVariableDefinitions);
 }
-function useTemplateVariableStore() {
-    const store = useTemplateVariableStoreCtx();
-    return (0, _zustand.useStore)(store);
-}
 function PluginProvider({ children, builtinVariables }) {
-    const originalValues = useTemplateVariableValues();
-    const definitions = useTemplateVariableDefinitions();
-    const externalDefinitions = useTemplateExternalVariableDefinitions();
+    const originalValues = useVariableDefinitionStates();
+    const definitions = useVariableDefinitions();
+    const externalDefinitions = useExternalVariableDefinitions();
     const { absoluteTimeRange } = (0, _pluginsystem.useTimeRange)();
     const values = (0, _react.useMemo)(()=>{
         const contextValues = {};
@@ -166,12 +161,10 @@ function PluginProvider({ children, builtinVariables }) {
             if (v.value === _core.DEFAULT_ALL_VALUE) {
                 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.customAllValue) {
+                if (definition?.kind === 'ListVariable' && definition.spec.customAllValue) {
                     v.value = definition.spec.customAllValue;
                 } else {
-                    var _v_options;
-                    var _v_options_map;
-                    v.value = (_v_options_map = (_v_options = v.options) === null || _v_options === void 0 ? void 0 : _v_options.map((o)=>o.value)) !== null && _v_options_map !== void 0 ? _v_options_map : null;
+                    v.value = v.options?.map((o)=>o.value) ?? null;
                 }
             }
             contextValues[name] = v;
@@ -250,7 +243,7 @@ function PluginProvider({ children, builtinVariables }) {
                 }
             }
         ];
-        builtinVariables === null || builtinVariables === void 0 ? void 0 : builtinVariables.forEach((def)=>result.push(def));
+        builtinVariables?.forEach((def)=>result.push(def));
         return result;
     }, [
         absoluteTimeRange,
@@ -260,7 +253,7 @@ function PluginProvider({ children, builtinVariables }) {
         value: {
             variables: allBuiltinVariables
         },
-        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TemplateVariableContext.Provider, {
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.VariableContext.Provider, {
             value: {
                 state: values
             },
@@ -268,16 +261,16 @@ function PluginProvider({ children, builtinVariables }) {
         })
     });
 }
-function createTemplateVariableSrvStore({ initialVariableDefinitions = [], externalVariableDefinitions = [], queryParams }) {
+function createVariableDefinitionStore({ initialVariableDefinitions = [], externalVariableDefinitions = [], queryParams }) {
     const initialParams = (0, _queryparams.getInitalValuesFromQueryParameters)(queryParams ? queryParams[0] : {});
     const store = (0, _zustand.createStore)()((0, _middleware.devtools)((0, _immer.immer)((set, get)=>({
-            variableState: (0, _hydrationUtils.hydrateTemplateVariableStates)(initialVariableDefinitions, initialParams, externalVariableDefinitions),
+            variableState: (0, _hydrationUtils.hydrateVariableDefinitionStates)(initialVariableDefinitions, initialParams, externalVariableDefinitions),
             variableDefinitions: initialVariableDefinitions,
             externalVariableDefinitions: externalVariableDefinitions,
             setVariableDefinitions (definitions) {
                 set((state)=>{
                     state.variableDefinitions = definitions;
-                    state.variableState = (0, _hydrationUtils.hydrateTemplateVariableStates)(definitions, initialParams, externalVariableDefinitions);
+                    state.variableState = (0, _hydrationUtils.hydrateVariableDefinitionStates)(definitions, initialParams, externalVariableDefinitions);
                 }, false, '[Variables] setVariableDefinitions' // Used for action name in Redux devtools
                 );
             },
@@ -340,7 +333,7 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions = [], exter
                             const currentVariable = variableState.get({
                                 name
                             });
-                            if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== undefined) {
+                            if (currentVariable?.value !== undefined) {
                                 draft[index] = {
                                     kind: 'ListVariable',
                                     spec: (0, _immer1.default)(variable.spec, (specDraft)=>{
@@ -352,8 +345,8 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions = [], exter
                             const currentVariable = variableState.get({
                                 name
                             });
-                            const currentVariableValue = typeof (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) === 'string' ? currentVariable.value : '';
-                            if ((currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) !== undefined) {
+                            const currentVariableValue = typeof currentVariable?.value === 'string' ? currentVariable.value : '';
+                            if (currentVariable?.value !== undefined) {
                                 draft[index] = {
                                     kind: 'TextVariable',
                                     spec: (0, _immer1.default)(variable.spec, (specDraft)=>{
@@ -373,30 +366,30 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions = [], exter
                 return (0, _utils.checkSavedDefaultVariableStatus)(get().variableDefinitions, get().variableState);
             }
         }))));
-    return store;
+    return store; // TODO: @Gladorme check if we can avoid this cast
 }
-function TemplateVariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariables = [] }) {
-    const [store] = (0, _react.useState)(createTemplateVariableSrvStore({
+function VariableProvider({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions = [] }) {
+    const [store] = (0, _react.useState)(createVariableDefinitionStore({
         initialVariableDefinitions,
         externalVariableDefinitions
     }));
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableStoreContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableDefinitionStoreContext.Provider, {
         value: store,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {
-            builtinVariables: builtinVariables,
+            builtinVariables: builtinVariableDefinitions,
             children: children
         })
     });
 }
-function TemplateVariableProviderWithQueryParams({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariables = [] }) {
+function VariableProviderWithQueryParams({ children, initialVariableDefinitions = [], externalVariableDefinitions = [], builtinVariableDefinitions: builtinVariables = [] }) {
     const allVariableDefs = (0, _utils.mergeVariableDefinitions)(initialVariableDefinitions, externalVariableDefinitions);
     const queryParams = (0, _queryparams.useVariableQueryParams)(allVariableDefs);
-    const [store] = (0, _react.useState)(createTemplateVariableSrvStore({
+    const [store] = (0, _react.useState)(createVariableDefinitionStore({
         initialVariableDefinitions,
         externalVariableDefinitions,
         queryParams
     }));
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableStoreContext.Provider, {
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(VariableDefinitionStoreContext.Provider, {
         value: store,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {
             builtinVariables: builtinVariables,

package/dist/cjs/context/{TemplateVariableProvider → VariableProvider}/hydrationUtils.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -14,16 +14,16 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "hydrateTemplateVariableStates", {
+Object.defineProperty(exports, "hydrateVariableDefinitionStates", {
     enumerable: true,
     get: function() {
-        return hydrateTemplateVariableStates;
+        return hydrateVariableDefinitionStates;
     }
 });
 const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
-// TODO: move to TemplateVariableProvider/utils.ts
-function hydrateTemplateVariableState(variable, initialValue) {
+// TODO: move to VariableProvider/utils.ts
+function hydrateVariableState(variable, initialValue) {
     const varState = {
         value: null,
         loading: false,
@@ -32,17 +32,14 @@ function hydrateTemplateVariableState(variable, initialValue) {
     };
     switch(variable.kind){
         case 'TextVariable':
-            varState.value = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.value;
+            varState.value = initialValue ?? variable.spec.value;
             break;
         case 'ListVariable':
             varState.options = [];
-            var _ref;
-            varState.value = (_ref = initialValue !== null && initialValue !== void 0 ? initialValue : variable.spec.defaultValue) !== null && _ref !== void 0 ? _ref : null;
+            varState.value = initialValue ?? variable.spec.defaultValue ?? null;
             // TODO: smarter fallbacks for defaultValue when allowAllValue is true
             if (varState.options.length > 0 && !varState.value) {
-                var _varState_options_;
-                var _varState_options__value;
-                const firstOptionValue = (_varState_options__value = (_varState_options_ = varState.options[0]) === null || _varState_options_ === void 0 ? void 0 : _varState_options_.value) !== null && _varState_options__value !== void 0 ? _varState_options__value : null;
+                const firstOptionValue = varState.options[0]?.value ?? null;
                 if (firstOptionValue !== null) {
                     varState.value = variable.spec.allowMultiple ? [
                         firstOptionValue
@@ -63,7 +60,7 @@ function hydrateTemplateVariableState(variable, initialValue) {
     }
     return varState;
 }
-function hydrateTemplateVariableStates(localDefinitions, initialValues, externalDefinitions = []) {
+function hydrateVariableDefinitionStates(localDefinitions, initialValues, externalDefinitions = []) {
     const state = new _pluginsystem.VariableStoreStateMap();
     // Collect the names used by local definitions
     let overridingNames = {};
@@ -83,7 +80,7 @@ function hydrateTemplateVariableStates(localDefinitions, initialValues, external
                 source,
                 name
             }, {
-                ...hydrateTemplateVariableState(v, initialValue),
+                ...hydrateVariableState(v, initialValue),
                 overridden: !!overridingNames[name]
             });
             overridingNames[name] = true;
@@ -99,7 +96,7 @@ function hydrateTemplateVariableStates(localDefinitions, initialValues, external
         state.set({
             name
         }, {
-            ...hydrateTemplateVariableState(v, initialValue),
+            ...hydrateVariableState(v, initialValue),
             overriding: !!overriddenNames[name]
         });
     });

package/dist/cjs/{validation → context/VariableProvider}/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -14,7 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_export_star(require("./panel"), exports);
+_export_star(require("./VariableProvider"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

package/dist/cjs/context/{TemplateVariableProvider → VariableProvider}/query-params.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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

package/dist/cjs/context/{TemplateVariableProvider → VariableProvider}/utils.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -43,7 +43,7 @@ function checkSavedDefaultVariableStatus(definitions, varState) {
             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.defaultValue) {
+            if (currentVariable?.value !== null && currentVariable?.value !== savedVariable.spec.defaultValue) {
                 modifiedVariableNames.push(name);
                 isSavedVariableModified = true;
             }
@@ -51,7 +51,7 @@ function checkSavedDefaultVariableStatus(definitions, varState) {
             const currentVariable = varState.get({
                 name
             });
-            const currentVariableValue = typeof (currentVariable === null || currentVariable === void 0 ? void 0 : currentVariable.value) === 'string' ? currentVariable.value : '';
+            const currentVariableValue = typeof currentVariable?.value === 'string' ? currentVariable.value : '';
             if (savedVariable.spec.value !== currentVariableValue) {
                 modifiedVariableNames.push(name);
                 isSavedVariableModified = true;

package/dist/cjs/context/index.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -16,7 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _export_star(require("./DashboardProvider"), exports);
 _export_star(require("./DatasourceStoreProvider"), exports);
-_export_star(require("./TemplateVariableProvider"), exports);
+_export_star(require("./VariableProvider"), exports);
 _export_star(require("./useDashboard"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {

package/dist/cjs/context/useDashboard.js

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -22,7 +22,7 @@ Object.defineProperty(exports, "useDashboard", {
 });
 const _core = require("@perses-dev/core");
 const _DashboardProvider = require("./DashboardProvider");
-const _TemplateVariableProvider = require("./TemplateVariableProvider");
+const _VariableProvider = require("./VariableProvider");
 function useDashboard() {
     const { panels, panelGroups, panelGroupOrder, setDashboard: setDashboardResource, kind, metadata, display, duration, refreshInterval, datasources, ttl } = (0, _DashboardProvider.useDashboardStore)(({ panels, panelGroups, panelGroupOrder, setDashboard, kind, metadata, display, duration, refreshInterval, datasources, ttl })=>({
             panels,
@@ -37,8 +37,8 @@ function useDashboard() {
             datasources,
             ttl
         }));
-    const { setVariableDefinitions } = (0, _TemplateVariableProvider.useTemplateVariableActions)();
-    const variables = (0, _TemplateVariableProvider.useTemplateVariableDefinitions)();
+    const { setVariableDefinitions } = (0, _VariableProvider.useVariableDefinitionActions)();
+    const variables = (0, _VariableProvider.useVariableDefinitions)();
     const layouts = convertPanelGroupsToLayouts(panelGroups, panelGroupOrder);
     const dashboard = kind === 'Dashboard' ? {
         kind,

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

@@ -30,7 +30,7 @@ function isWithDashboardParameter(parameter) {
 const WithDashboard = (Story, context)=>{
     const initParameter = context.parameters.withDashboard;
     const parameter = isWithDashboardParameter(initParameter) ? initParameter : undefined;
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.DashboardProvider, {
         initialState: {
             dashboardResource: _constants.EMPTY_DASHBOARD_RESOURCE

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

@@ -30,7 +30,7 @@ function isWithDatasourceStoreParameter(parameter) {
 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;
+    const props = parameter?.props;
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.DatasourceStoreProvider, {
         ..._test.defaultDatasourceProps,
         ...props,

package/dist/cjs/stories/decorators/{WithTemplateVariables.js → WithVariables.js}

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -14,23 +14,23 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "WithTemplateVariables", {
+Object.defineProperty(exports, "WithVariables", {
     enumerable: true,
     get: function() {
-        return WithTemplateVariables;
+        return WithVariables;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
 const _dashboards = require("@perses-dev/dashboards");
 // Type guard because storybook types parameters as `any`
-function isWithTemplateVariableParameter(parameter) {
+function isWithVariableParameter(parameter) {
     return !!parameter && typeof parameter === 'object' && 'props' in parameter;
 }
-const WithTemplateVariables = (Story, context)=>{
-    const initParameter = context.parameters.withTemplateVariables;
-    const parameter = isWithTemplateVariableParameter(initParameter) ? initParameter : undefined;
-    const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.TemplateVariableProvider, {
+const WithVariables = (Story, context)=>{
+    const initParameter = context.parameters.withVariables;
+    const parameter = isWithVariableParameter(initParameter) ? initParameter : undefined;
+    const props = parameter?.props;
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_dashboards.VariableProvider, {
         ...props,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(Story, {})
     });

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

@@ -1,4 +1,4 @@
-// Copyright 2023 The Perses Authors
+// Copyright 2024 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
@@ -17,7 +17,7 @@ Object.defineProperty(exports, "__esModule", {
 _export_star(require("./constants"), exports);
 _export_star(require("./WithDashboard"), exports);
 _export_star(require("./WithDatasourceStore"), exports);
-_export_star(require("./WithTemplateVariables"), exports);
+_export_star(require("./WithVariables"), exports);
 function _export_star(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) {

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

@@ -41,8 +41,10 @@ const FakeTimeSeriesPlugin = {
     createInitialOptions: ()=>({})
 };
 const MOCK_TIME_SERIES_PANEL = {
-    pluginType: 'Panel',
-    kind: 'TimeSeriesChart',
+    kind: 'Panel',
+    spec: {
+        name: 'TimeSeriesChart'
+    },
     plugin: FakeTimeSeriesPlugin
 };
 const MOCK_PLUGINS = [

package/dist/cjs/test/render.js

@@ -21,15 +21,15 @@ Object.defineProperty(exports, "renderWithContext", {
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
-const _react = require("react");
-const _react1 = require("@testing-library/react");
-const _reactrouterdom = require("react-router-dom");
+const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
+const _reactquery = require("@tanstack/react-query");
+const _react = require("@testing-library/react");
 const _history = require("history");
+const _react1 = require("react");
+const _reactrouterdom = require("react-router-dom");
 const _usequeryparams = require("use-query-params");
 const _reactrouter6 = require("use-query-params/adapters/react-router-6");
-const _reactquery = require("@tanstack/react-query");
-const _components = require("@perses-dev/components");
-const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../context");
 const _test = require("../test");
 const _pluginregistry = require("./plugin-registry");
@@ -37,11 +37,11 @@ const _pluginregistry = require("./plugin-registry");
  * Workaround for React router upgrade type errors.
  * More details: https://stackoverflow.com/a/69948457/17575201
  */ const CustomRouter = ({ history, children })=>{
-    const [state, setState] = (0, _react.useState)({
+    const [state, setState] = (0, _react1.useState)({
         action: history.action,
         location: history.location
     });
-    (0, _react.useLayoutEffect)(()=>history.listen(setState), [
+    (0, _react1.useLayoutEffect)(()=>history.listen(setState), [
         history
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactrouterdom.Router, {
@@ -61,7 +61,8 @@ function renderWithContext(ui, options, history) {
             }
         }
     });
-    const customHistory = history !== null && history !== void 0 ? history : (0, _history.createMemoryHistory)();
+    const customHistory = history ?? (0, _history.createMemoryHistory)();
+    const mockRegistry = (0, _pluginsystem.mockPluginRegistry)(..._pluginregistry.MOCK_PLUGINS);
     const BaseRender = ()=>/*#__PURE__*/ (0, _jsxruntime.jsx)(CustomRouter, {
             history: customHistory,
             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_reactquery.QueryClientProvider, {
@@ -76,7 +77,8 @@ function renderWithContext(ui, options, history) {
                         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_components.ChartsProvider, {
                             chartsTheme: _components.testChartsTheme,
                             children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.PluginRegistry, {
-                                ...(0, _pluginsystem.mockPluginRegistry)(..._pluginregistry.MOCK_PLUGINS),
+                                pluginLoader: mockRegistry.pluginLoader,
+                                defaultPluginKinds: mockRegistry.defaultPluginKinds,
                                 children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.DatasourceStoreProvider, {
                                     ..._test.defaultDatasourceProps,
                                     children: ui
@@ -87,5 +89,5 @@ function renderWithContext(ui, options, history) {
                 })
             })
         });
-    return (0, _react1.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(BaseRender, {}), options);
+    return (0, _react.render)(/*#__PURE__*/ (0, _jsxruntime.jsx)(BaseRender, {}), options);
 }

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

@@ -49,8 +49,7 @@ const DashboardApp = (props)=>{
     const onEditButtonClick = ()=>{
         setEditMode(true);
         setOriginalDashboard(dashboard);
-        var _dashboard_spec_datasources;
-        setSavedDatasources((_dashboard_spec_datasources = dashboard.spec.datasources) !== null && _dashboard_spec_datasources !== void 0 ? _dashboard_spec_datasources : {});
+        setSavedDatasources(dashboard.spec.datasources ?? {});
     };
     const onCancelButtonClick = ()=>{
         // check if dashboard has been modified
@@ -87,7 +86,8 @@ const DashboardApp = (props)=>{
             }),
             /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Box, {
                 sx: {
-                    padding: (theme)=>theme.spacing(2),
+                    paddingTop: 2,
+                    paddingX: 2,
                     height: '100%'
                 },
                 children: [