@perses-dev/dashboards 0.41.0 → 0.42.0

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

@@ -34,6 +34,17 @@ const _material = require("@mui/material");
 const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 const _context = require("../../context");
+function variableOptionToVariableValue(options) {
+    if (options === null) {
+        return null;
+    }
+    if (Array.isArray(options)) {
+        return options.map((v)=>{
+            return v.value;
+        });
+    }
+    return options.value;
+}
 function TemplateVariable({ name , source  }) {
     var _ctx_definition;
     const ctx = (0, _context.useTemplateVariable)(name, source);
@@ -60,6 +71,7 @@ function TemplateVariable({ name , source  }) {
 function useListVariableState(spec, state, variablesOptionsQuery) {
     const allowMultiple = (spec === null || spec === void 0 ? void 0 : spec.allowMultiple) === true;
     const allowAllValue = (spec === null || spec === void 0 ? void 0 : spec.allowAllValue) === true;
+    const sort = spec === null || spec === void 0 ? void 0 : spec.sort;
     const loading = (0, _react.useMemo)(()=>variablesOptionsQuery.isFetching || false, [
         variablesOptionsQuery
     ]);
@@ -71,10 +83,34 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
             value
         ] : [];
     }
-    const viewOptions = (0, _react.useMemo)(()=>{
-        let computedOptions = options ? [
+    // Sort the provided list of options according to the method defined
+    const sortedOptions = (0, _react.useMemo)(()=>{
+        const opts = options ? [
             ...options
         ] : [];
+        if (!sort || sort === 'none') return opts;
+        switch(sort){
+            case 'alphabetical-asc':
+                return opts.sort((a, b)=>a.label > b.label ? 1 : -1);
+            case 'alphabetical-desc':
+                return opts.sort((a, b)=>a.label > b.label ? -1 : 1);
+            case 'numerical-asc':
+                return opts.sort((a, b)=>parseInt(a.label) > parseInt(b.label) ? 1 : -1);
+            case 'numerical-desc':
+                return opts.sort((a, b)=>parseInt(a.label) < parseInt(b.label) ? 1 : -1);
+            case 'alphabetical-ci-asc':
+                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? 1 : -1);
+            case 'alphabetical-ci-desc':
+                return opts.sort((a, b)=>a.label.toLowerCase() > b.label.toLowerCase() ? -1 : 1);
+            default:
+                return opts;
+        }
+    }, [
+        options,
+        sort
+    ]);
+    const viewOptions = (0, _react.useMemo)(()=>{
+        let computedOptions = sortedOptions;
         // Add the all value if it's allowed
         if (allowAllValue) {
             computedOptions = [
@@ -87,8 +123,8 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
         }
         return computedOptions;
     }, [
-        options,
-        allowAllValue
+        allowAllValue,
+        sortedOptions
     ]);
     const valueIsInOptions = (0, _react.useMemo)(()=>Boolean(viewOptions.find((v)=>{
             if (allowMultiple) {
@@ -119,23 +155,49 @@ function useListVariableState(spec, state, variablesOptionsQuery) {
         allowMultiple,
         allowAllValue
     ]);
-    // Once we computed value, we set it as the selected one, if it is available in the options
-    const selectedValue = value && valueIsInOptions ? value : allowMultiple ? [] : '';
+    const selectedOptions = (0, _react.useMemo)(()=>{
+        // In the case Autocomplete.multiple equals false, Autocomplete.value expects a single object, not
+        // an array, hence this conditional
+        if (Array.isArray(value)) {
+            return viewOptions.filter((o)=>{
+                return value === null || value === void 0 ? void 0 : value.includes(o.value);
+            });
+        } else {
+            var _viewOptions_find;
+            return (_viewOptions_find = viewOptions.find((o)=>{
+                return value === o.value;
+            })) !== null && _viewOptions_find !== void 0 ? _viewOptions_find : {
+                value: '',
+                label: ''
+            };
+        }
+    }, [
+        value,
+        viewOptions
+    ]);
     return {
         value,
         loading,
         options,
-        selectedValue,
+        selectedOptions,
         viewOptions
     };
 }
+const StyledPopper = (props)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Popper, {
+        ...props,
+        sx: {
+            minWidth: 'fit-content'
+        },
+        placement: "bottom-start"
+    });
 function ListVariable({ name , source  }) {
     var _definition_spec_display;
     const ctx = (0, _context.useTemplateVariable)(name, source);
     const definition = ctx.definition;
     const variablesOptionsQuery = (0, _pluginsystem.useListVariablePluginValues)(definition);
     const { setVariableValue , setVariableLoading , setVariableOptions  } = (0, _context.useTemplateVariableActions)();
-    const { selectedValue , value , loading , options , viewOptions  } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
+    const { selectedOptions , value , loading , options , viewOptions  } = useListVariableState(definition === null || definition === void 0 ? void 0 : definition.spec, ctx.state, variablesOptionsQuery);
+    const [inputValue, setInputValue] = (0, _react.useState)('');
     var _definition_spec_display_name;
     const title = (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name;
     const allowMultiple = (definition === null || definition === void 0 ? void 0 : definition.spec.allowMultiple) === true;
@@ -171,51 +233,72 @@ function ListVariable({ name , source  }) {
         options,
         source
     ]);
-    return /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Box, {
-        display: 'flex',
-        children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.FormControl, {
-            fullWidth: true,
-            children: [
-                /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.InputLabel, {
-                    id: name,
-                    children: title
-                }),
-                /*#__PURE__*/ (0, _jsxruntime.jsxs)(_material.Select, {
-                    id: name,
-                    title: selectedValue,
-                    label: title,
-                    value: selectedValue,
-                    onChange: (e)=>{
-                        // Must be selected
-                        if (e.target.value === null || e.target.value.length === 0) {
-                            if (allowAllValue) {
-                                setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
-                            }
-                            return;
+    const LETTER_HSIZE = 8; // approximation
+    const ARROW_OFFSET = 40;
+    const MIN_INPUT_WIDTH = 120;
+    const MAX_INPUT_WIDTH = 500;
+    const [inputWidth, setInputWidth] = (0, _react.useState)(MIN_INPUT_WIDTH);
+    const handleInputResize = (newInputValue)=>{
+        const newInputValueSize = (newInputValue.length + 1) * LETTER_HSIZE + ARROW_OFFSET;
+        if (newInputValueSize < MIN_INPUT_WIDTH) {
+            setInputWidth(MIN_INPUT_WIDTH);
+        } else if (newInputValueSize > MAX_INPUT_WIDTH) {
+            setInputWidth(MAX_INPUT_WIDTH);
+        } else {
+            setInputWidth(newInputValueSize);
+        }
+    };
+    return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
+        children: [
+            /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.Autocomplete, {
+                disablePortal: true,
+                disableCloseOnSelect: allowMultiple,
+                multiple: allowMultiple,
+                fullWidth: true,
+                limitTags: 3,
+                size: "small",
+                disableClearable: true,
+                PopperComponent: StyledPopper,
+                renderInput: (params)=>{
+                    return allowMultiple ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        ...params,
+                        label: title
+                    }) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.TextField, {
+                        ...params,
+                        label: title,
+                        style: {
+                            width: `${inputWidth}px`
                         }
-                        setVariableValue(name, e.target.value, source);
+                    });
+                },
+                sx: {
+                    '& .MuiInputBase-root': {
+                        minHeight: '38px'
                     },
-                    multiple: allowMultiple,
-                    children: [
-                        loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                            value: "loading",
-                            disabled: true,
-                            children: "Loading"
-                        }),
-                        viewOptions.length === 0 && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                            value: "empty",
-                            disabled: true,
-                            children: "No options"
-                        }),
-                        viewOptions.map((option)=>/*#__PURE__*/ (0, _jsxruntime.jsx)(_material.MenuItem, {
-                                value: option.value,
-                                children: option.label
-                            }, option.value))
-                    ]
-                }),
-                loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.LinearProgress, {})
-            ]
-        })
+                    '& .MuiInputBase-root.MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
+                        paddingY: '5px',
+                        paddingLeft: '5px'
+                    }
+                },
+                value: selectedOptions,
+                onChange: (_, value)=>{
+                    if ((value === null || Array.isArray(value) && value.length === 0) && allowAllValue) {
+                        setVariableValue(name, _core.DEFAULT_ALL_VALUE, source);
+                    } else {
+                        setVariableValue(name, variableOptionToVariableValue(value), source);
+                    }
+                },
+                inputValue: inputValue,
+                onInputChange: (_, newInputValue)=>{
+                    setInputValue(newInputValue);
+                    if (!allowMultiple) {
+                        handleInputResize(newInputValue);
+                    }
+                },
+                options: viewOptions
+            }),
+            loading && /*#__PURE__*/ (0, _jsxruntime.jsx)(_material.LinearProgress, {})
+        ]
     });
 }
 function TextVariable({ name , source  }) {
@@ -242,6 +325,11 @@ function TextVariable({ name , source  }) {
         label: (_definition_spec_display_name = (_definition_spec_display = definition === null || definition === void 0 ? void 0 : definition.spec.display) === null || _definition_spec_display === void 0 ? void 0 : _definition_spec_display.name) !== null && _definition_spec_display_name !== void 0 ? _definition_spec_display_name : name,
         InputProps: {
             readOnly: (_definition_spec_constant = definition === null || definition === void 0 ? void 0 : definition.spec.constant) !== null && _definition_spec_constant !== void 0 ? _definition_spec_constant : false
+        },
+        sx: {
+            '& .MuiInputBase-root': {
+                minHeight: '38px'
+            }
         }
     });
 }

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

@@ -60,7 +60,7 @@ function TemplateVariableListItem({ spec , source  }) {
         maxWidth: VARIABLE_INPUT_MAX_WIDTH,
         marginBottom: 1,
         marginRight: 1,
-        "data-testid": "template-variable",
+        "data-testid": 'template-variable-' + spec.name,
         children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_TemplateVariable.TemplateVariable, {
             name: spec.name,
             source: source

package/dist/cjs/components/index.js

@@ -19,6 +19,7 @@ _export_star(require("./AddPanelButton"), exports);
 _export_star(require("./Dashboard"), exports);
 _export_star(require("./DashboardToolbar"), exports);
 _export_star(require("./DashboardStickyToolbar"), exports);
+_export_star(require("./Datasources"), exports);
 _export_star(require("./DeletePanelDialog"), exports);
 _export_star(require("./DeletePanelGroupDialog"), exports);
 _export_star(require("./DiscardChangesConfirmationDialog"), exports);

package/dist/cjs/constants/user-interface-text.js

@@ -33,6 +33,7 @@ const TOOLTIP_TEXT = {
     addPanel: 'Add panel',
     addGroup: 'Add panel group',
     downloadDashboard: 'Download JSON',
+    editDatasources: 'Edit datasources',
     editJson: 'Edit JSON',
     editVariables: 'Edit variables',
     refreshDashboard: 'Refresh dashboard',

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

@@ -89,7 +89,7 @@ function DashboardProvider(props) {
 }
 function initStore(props) {
     const { initialState: { dashboardResource , isEditMode  }  } = props;
-    const { spec: { display , duration , refreshInterval =_core.DEFAULT_REFRESH_INTERVAL  } , metadata  } = dashboardResource;
+    const { spec: { display , duration , refreshInterval =_core.DEFAULT_REFRESH_INTERVAL , datasources  } , metadata  } = dashboardResource;
     let { spec: { layouts , panels  }  } = dashboardResource;
     // Set fallbacks in case the frontend is used with a non-Perses backend
     layouts = layouts !== null && layouts !== void 0 ? layouts : [];
@@ -111,11 +111,12 @@ function initStore(props) {
             display,
             duration,
             refreshInterval,
+            datasources,
             isEditMode: !!isEditMode,
             setEditMode: (isEditMode)=>set({
                     isEditMode
                 }),
-            setDashboard: ({ metadata , spec: { display , panels ={} , layouts =[] , duration , refreshInterval  }  })=>{
+            setDashboard: ({ metadata , spec: { display , panels ={} , layouts =[] , duration , refreshInterval , datasources ={}  }  })=>{
                 set((state)=>{
                     state.metadata = metadata;
                     state.display = display;
@@ -125,6 +126,7 @@ function initStore(props) {
                     state.panelGroupOrder = panelGroupOrder;
                     state.duration = duration;
                     state.refreshInterval = refreshInterval !== null && refreshInterval !== void 0 ? refreshInterval : _core.DEFAULT_REFRESH_INTERVAL;
+                    state.datasources = datasources;
                 });
             }
         };

package/dist/cjs/context/DatasourceStoreProvider.js

@@ -25,7 +25,10 @@ const _react = require("react");
 const _core = require("@perses-dev/core");
 const _pluginsystem = require("@perses-dev/plugin-system");
 function DatasourceStoreProvider(props) {
-    const { dashboardResource , projectName , datasourceApi , onCreate , children  } = props;
+    const { projectName , datasourceApi , onCreate , children  } = props;
+    const [dashboardResource, setDashboardResource] = (0, _react.useState)(props.dashboardResource);
+    var _props_savedDatasources;
+    const [savedDatasources, setSavedDatasources] = (0, _react.useState)((_props_savedDatasources = props.savedDatasources) !== null && _props_savedDatasources !== void 0 ? _props_savedDatasources : {});
     const project = projectName !== null && projectName !== void 0 ? projectName : dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.metadata.project;
     const { getPlugin , listPluginMetadata  } = (0, _pluginsystem.usePluginRegistry)();
     const findDatasource = (0, _core.useEvent)(async (selector)=>{
@@ -114,29 +117,77 @@ function DatasourceStoreProvider(props) {
             for(const selectorName in dashboardResource.spec.datasources){
                 const spec = dashboardResource.spec.datasources[selectorName];
                 if (spec === undefined || spec.plugin.kind !== datasourcePluginKind) continue;
-                addItem(spec, selectorName, 'dashboard');
+                const saved = selectorName in savedDatasources;
+                addItem({
+                    spec,
+                    selectorName,
+                    selectorGroup: 'dashboard',
+                    saved
+                });
             }
         }
         // Now look at project-level datasources
         for (const datasource of datasources){
             const selectorName = datasource.metadata.name;
-            addItem(datasource.spec, selectorName, 'project', `/projects/${project}/datasources`);
+            addItem({
+                spec: datasource.spec,
+                selectorName,
+                selectorGroup: 'project',
+                editLink: `/projects/${project}/datasources`
+            });
         }
         // And finally global datasources
         for (const globalDatasource of globalDatasources){
             const selectorName = globalDatasource.metadata.name;
-            addItem(globalDatasource.spec, selectorName, 'global', '/admin/datasources');
+            addItem({
+                spec: globalDatasource.spec,
+                selectorName,
+                selectorGroup: 'global',
+                editLink: '/admin/datasources'
+            });
         }
         return results;
     });
+    const getLocalDatasources = (0, _react.useCallback)(()=>{
+        var _dashboardResource_spec_datasources;
+        return (_dashboardResource_spec_datasources = dashboardResource === null || dashboardResource === void 0 ? void 0 : dashboardResource.spec.datasources) !== null && _dashboardResource_spec_datasources !== void 0 ? _dashboardResource_spec_datasources : {};
+    }, [
+        dashboardResource
+    ]);
+    const getSavedDatasources = (0, _react.useCallback)(()=>{
+        return savedDatasources;
+    }, [
+        savedDatasources
+    ]);
+    const setLocalDatasources = (0, _react.useCallback)((datasources)=>{
+        if (dashboardResource) {
+            setDashboardResource({
+                ...dashboardResource,
+                spec: {
+                    ...dashboardResource.spec,
+                    datasources: datasources
+                }
+            });
+        }
+    }, [
+        dashboardResource
+    ]);
     const ctxValue = (0, _react.useMemo)(()=>({
             getDatasource,
             getDatasourceClient,
+            getLocalDatasources,
+            setLocalDatasources,
+            setSavedDatasources,
+            getSavedDatasources,
             listDatasourceSelectItems
         }), [
         getDatasource,
         getDatasourceClient,
-        listDatasourceSelectItems
+        getLocalDatasources,
+        setLocalDatasources,
+        listDatasourceSelectItems,
+        setSavedDatasources,
+        getSavedDatasources
     ]);
     return /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.DatasourceStoreContext.Provider, {
         value: ctxValue,
@@ -178,7 +229,7 @@ function findDashboardDatasource(dashboardDatasources, selector) {
     let explicitDefaultAdded = false;
     const groupIndices = {};
     let currentGroupIndex = 1; // 0 is the default group, always there as it contains at least the first item.
-    const addItem = (spec, selectorName, group, editLink)=>{
+    const addItem = ({ spec , selectorName , selectorGroup: group , editLink , saved  })=>{
         var _spec_display;
         group = group !== null && group !== void 0 ? group : '';
         // Ensure the default group is always present as soon as an item is added.
@@ -207,6 +258,7 @@ function findDashboardDatasource(dashboardDatasources, selector) {
         selectItemGroup.items.push({
             name: (_spec_display_name = (_spec_display = spec.display) === null || _spec_display === void 0 ? void 0 : _spec_display.name) !== null && _spec_display_name !== void 0 ? _spec_display_name : selectorName,
             overridden: isOverridden,
+            saved,
             selector: {
                 kind: spec.plugin.kind,
                 name: selectorName,

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

@@ -44,6 +44,9 @@ _export(exports, {
     },
     TemplateVariableProvider: function() {
         return TemplateVariableProvider;
+    },
+    TemplateVariableProviderWithQueryParams: function() {
+        return TemplateVariableProviderWithQueryParams;
     }
 });
 const _jsxruntime = require("react/jsx-runtime");
@@ -369,6 +372,19 @@ function createTemplateVariableSrvStore({ initialVariableDefinitions =[] , exter
     return store;
 }
 function TemplateVariableProvider({ children , initialVariableDefinitions =[] , externalVariableDefinitions =[] , builtinVariables =[]  }) {
+    const [store] = (0, _react.useState)(createTemplateVariableSrvStore({
+        initialVariableDefinitions,
+        externalVariableDefinitions
+    }));
+    return /*#__PURE__*/ (0, _jsxruntime.jsx)(TemplateVariableStoreContext.Provider, {
+        value: store,
+        children: /*#__PURE__*/ (0, _jsxruntime.jsx)(PluginProvider, {
+            builtinVariables: builtinVariables,
+            children: children
+        })
+    });
+}
+function TemplateVariableProviderWithQueryParams({ children , initialVariableDefinitions =[] , externalVariableDefinitions =[] , builtinVariables =[]  }) {
     const allVariableDefs = (0, _utils.mergeVariableDefinitions)(initialVariableDefinitions, externalVariableDefinitions);
     const queryParams = (0, _queryparams.useVariableQueryParams)(allVariableDefs);
     const [store] = (0, _react.useState)(createTemplateVariableSrvStore({

package/dist/cjs/context/useDashboard.js

@@ -24,7 +24,7 @@ const _core = require("@perses-dev/core");
 const _DashboardProvider = require("./DashboardProvider");
 const _TemplateVariableProvider = require("./TemplateVariableProvider");
 function useDashboard() {
-    const { panels , panelGroups , panelGroupOrder , setDashboard: setDashboardResource , metadata , display , duration , refreshInterval  } = (0, _DashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , setDashboard , metadata , display , duration , refreshInterval  })=>({
+    const { panels , panelGroups , panelGroupOrder , setDashboard: setDashboardResource , metadata , display , duration , refreshInterval , datasources  } = (0, _DashboardProvider.useDashboardStore)(({ panels , panelGroups , panelGroupOrder , setDashboard , metadata , display , duration , refreshInterval , datasources  })=>({
             panels,
             panelGroups,
             panelGroupOrder,
@@ -32,7 +32,8 @@ function useDashboard() {
             metadata,
             display,
             duration,
-            refreshInterval
+            refreshInterval,
+            datasources
         }));
     const { setVariableDefinitions  } = (0, _TemplateVariableProvider.useTemplateVariableActions)();
     const variables = (0, _TemplateVariableProvider.useTemplateVariableDefinitions)();
@@ -46,7 +47,8 @@ function useDashboard() {
             layouts,
             variables,
             duration,
-            refreshInterval
+            refreshInterval,
+            datasources
         }
     };
     const setDashboard = (dashboardResource)=>{

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

@@ -24,6 +24,7 @@ const _jsxruntime = require("react/jsx-runtime");
 const _react = require("react");
 const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
+const _pluginsystem = require("@perses-dev/plugin-system");
 const _components1 = require("../../components");
 const _context = require("../../context");
 const DashboardApp = (props)=>{
@@ -32,6 +33,7 @@ const DashboardApp = (props)=>{
     const { setEditMode  } = (0, _context.useEditMode)();
     const { dashboard , setDashboard  } = (0, _context.useDashboard)();
     const [originalDashboard, setOriginalDashboard] = (0, _react.useState)(undefined);
+    const { setSavedDatasources  } = (0, _pluginsystem.useDatasourceStore)();
     const { openDiscardChangesConfirmationDialog , closeDiscardChangesConfirmationDialog  } = (0, _context.useDiscardChangesConfirmationDialog)();
     const handleDiscardChanges = ()=>{
         // Reset to the original spec and exit edit mode
@@ -47,6 +49,8 @@ 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 : {});
     };
     const onCancelButtonClick = ()=>{
         // check if dashboard has been modified

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

@@ -84,11 +84,10 @@ function ViewDashboard(props) {
                 dashboardResource,
                 isEditMode: !!isEditing
             },
-            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProvider, {
+            children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_pluginsystem.TimeRangeProviderWithQueryParams, {
                 initialTimeRange: initialTimeRange,
                 initialRefreshInterval: initialRefreshInterval,
-                enabledURLParams: true,
-                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.TemplateVariableProvider, {
+                children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_context.TemplateVariableProviderWithQueryParams, {
                     initialVariableDefinitions: spec.variables,
                     externalVariableDefinitions: externalVariableDefinitions,
                     builtinVariables: builtinVariables,

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js

@@ -44,7 +44,7 @@ export function DashboardStickyToolbar(props) {
                         display: "flex",
                         flexWrap: "wrap",
                         alignItems: "start",
-                        my: isSticky ? 2 : 0,
+                        mt: isSticky ? 1.5 : 0,
                         ml: isSticky ? 2 : 0,
                         children: [
                             /*#__PURE__*/ _jsx(TemplateVariableList, {}),
@@ -55,7 +55,7 @@ export function DashboardStickyToolbar(props) {
                         ]
                     }),
                     isSticky && /*#__PURE__*/ _jsx(Box, {
-                        my: 2,
+                        mt: 1.5,
                         mr: 2,
                         children: /*#__PURE__*/ _jsx(TimeRangeControls, {})
                     })

package/dist/components/DashboardStickyToolbar/DashboardStickyToolbar.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.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 { useState } from 'react';\nimport { AppBar, Box, IconButton, SxProps, Theme, useScrollTrigger } from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box display=\"flex\" justifyContent=\"space-between\">\n          <Box display=\"flex\" flexWrap=\"wrap\" alignItems=\"start\" my={isSticky ? 2 : 0} ml={isSticky ? 2 : 0}>\n            <TemplateVariableList></TemplateVariableList>\n            {props.initialVariableIsSticky && (\n              <IconButton onClick={() => setIsPin(!isPin)}>{isPin ? <PinOutline /> : <PinOffOutline />}</IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Box my={2} mr={2}>\n              <TimeRangeControls></TimeRangeControls>\n            </Box>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","useScrollTrigger","PinOutline","PinOffOutline","TemplateVariableList","TimeRangeControls","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexWrap","alignItems","my","ml","onClick","mr"],"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,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,MAAM,EAAEC,GAAG,EAAEC,UAAU,EAAkBC,gBAAgB,QAAQ,gBAAgB;AAC1F,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,uBAAuB;AAOzD,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGZ,SAASU,MAAMG;IAEzC,MAAMC,gBAAgBV,iBAAiB;QAAEW,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,2BAA2BF;IAEnE,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACT;QAAIe,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACjB;YACCkB,OAAM;YACNC,UAAUJ,WAAW,UAAU;YAC/BK,WAAWL,WAAW,IAAI;YAC1BM,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGb,MAAMY,EAAE;YAAC;sBAE9C,cAAA,MAACpB;gBAAIsB,SAAQ;gBAAOC,gBAAe;;kCACjC,MAACvB;wBAAIsB,SAAQ;wBAAOE,UAAS;wBAAOC,YAAW;wBAAQC,IAAIZ,WAAW,IAAI;wBAAGa,IAAIb,WAAW,IAAI;;0CAC9F,KAACT;4BACAG,MAAMG,yCACL,KAACV;gCAAW2B,SAAS,IAAMlB,SAAS,CAACD;0CAASA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAG3EU,0BACC,KAACd;wBAAI0B,IAAI;wBAAGG,IAAI;kCACd,cAAA,KAACvB;;;;;;AAOf"}
+{"version":3,"sources":["../../../src/components/DashboardStickyToolbar/DashboardStickyToolbar.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 { useState } from 'react';\nimport { AppBar, Box, IconButton, SxProps, Theme, useScrollTrigger } from '@mui/material';\nimport PinOutline from 'mdi-material-ui/PinOutline';\nimport PinOffOutline from 'mdi-material-ui/PinOffOutline';\nimport { TemplateVariableList } from '../Variables';\nimport { TimeRangeControls } from '../TimeRangeControls';\n\ninterface DashboardStickyToolbarProps {\n  initialVariableIsSticky?: boolean;\n  sx?: SxProps<Theme>;\n}\n\nexport function DashboardStickyToolbar(props: DashboardStickyToolbarProps) {\n  const [isPin, setIsPin] = useState(props.initialVariableIsSticky);\n\n  const scrollTrigger = useScrollTrigger({ disableHysteresis: true });\n  const isSticky = scrollTrigger && props.initialVariableIsSticky && isPin;\n\n  return (\n    // marginBottom={-1} counteracts the marginBottom={1} on every variable input.\n    // The margin on the inputs is for spacing between inputs, but is not meant to add space to bottom of the container.\n    <Box marginBottom={-1} data-testid=\"variable-list\">\n      <AppBar\n        color=\"inherit\"\n        position={isSticky ? 'fixed' : 'static'}\n        elevation={isSticky ? 4 : 0}\n        sx={{ backgroundColor: 'inherit', ...props.sx }}\n      >\n        <Box display=\"flex\" justifyContent=\"space-between\">\n          <Box display=\"flex\" flexWrap=\"wrap\" alignItems=\"start\" mt={isSticky ? 1.5 : 0} ml={isSticky ? 2 : 0}>\n            <TemplateVariableList></TemplateVariableList>\n            {props.initialVariableIsSticky && (\n              <IconButton onClick={() => setIsPin(!isPin)}>{isPin ? <PinOutline /> : <PinOffOutline />}</IconButton>\n            )}\n          </Box>\n          {isSticky && (\n            <Box mt={1.5} mr={2}>\n              <TimeRangeControls></TimeRangeControls>\n            </Box>\n          )}\n        </Box>\n      </AppBar>\n    </Box>\n  );\n}\n"],"names":["useState","AppBar","Box","IconButton","useScrollTrigger","PinOutline","PinOffOutline","TemplateVariableList","TimeRangeControls","DashboardStickyToolbar","props","isPin","setIsPin","initialVariableIsSticky","scrollTrigger","disableHysteresis","isSticky","marginBottom","data-testid","color","position","elevation","sx","backgroundColor","display","justifyContent","flexWrap","alignItems","mt","ml","onClick","mr"],"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,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,MAAM,EAAEC,GAAG,EAAEC,UAAU,EAAkBC,gBAAgB,QAAQ,gBAAgB;AAC1F,OAAOC,gBAAgB,6BAA6B;AACpD,OAAOC,mBAAmB,gCAAgC;AAC1D,SAASC,oBAAoB,QAAQ,eAAe;AACpD,SAASC,iBAAiB,QAAQ,uBAAuB;AAOzD,OAAO,SAASC,uBAAuBC,KAAkC;IACvE,MAAM,CAACC,OAAOC,SAAS,GAAGZ,SAASU,MAAMG;IAEzC,MAAMC,gBAAgBV,iBAAiB;QAAEW,mBAAmB;IAAK;IACjE,MAAMC,WAAWF,iBAAiBJ,MAAMG,2BAA2BF;IAEnE,OACE,8EAA8E;IAC9E,oHAAoH;kBACpH,KAACT;QAAIe,cAAc,CAAC;QAAGC,eAAY;kBACjC,cAAA,KAACjB;YACCkB,OAAM;YACNC,UAAUJ,WAAW,UAAU;YAC/BK,WAAWL,WAAW,IAAI;YAC1BM,IAAI;gBAAEC,iBAAiB;gBAAW,GAAGb,MAAMY,EAAE;YAAC;sBAE9C,cAAA,MAACpB;gBAAIsB,SAAQ;gBAAOC,gBAAe;;kCACjC,MAACvB;wBAAIsB,SAAQ;wBAAOE,UAAS;wBAAOC,YAAW;wBAAQC,IAAIZ,WAAW,MAAM;wBAAGa,IAAIb,WAAW,IAAI;;0CAChG,KAACT;4BACAG,MAAMG,yCACL,KAACV;gCAAW2B,SAAS,IAAMlB,SAAS,CAACD;0CAASA,sBAAQ,KAACN,gCAAgB,KAACC;;;;oBAG3EU,0BACC,KAACd;wBAAI0B,IAAI;wBAAKG,IAAI;kCAChB,cAAA,KAACvB;;;;;;AAOf"}

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

@@ -1 +1 @@
-{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAW7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAgG5D,CAAC"}
+{"version":3,"file":"DashboardToolbar.d.ts","sourceRoot":"","sources":["../../../src/components/DashboardToolbar/DashboardToolbar.tsx"],"names":[],"mappings":";AAeA,OAAO,EAAE,eAAe,EAAe,MAAM,eAAe,CAAC;AAY7D,MAAM,WAAW,qBAAqB;IACpC,aAAa,EAAE,MAAM,CAAC;IACtB,uBAAuB,CAAC,EAAE,GAAG,CAAC,OAAO,CAAC;IACtC,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,UAAU,EAAE,OAAO,CAAC;IACpB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,mBAAmB,EAAE,MAAM,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,eAAe,CAAC;CAC1B;AAED,eAAO,MAAM,gBAAgB,UAAW,qBAAqB,gBAiG5D,CAAC"}