@perses-dev/plugin-system 0.0.0-snapshot-saving-defaults-refinements-1b25cec → 0.0.0-snapshot-core-types-move-units-c7c5d31

package/dist/cjs/components/CalculationSelector/CalculationSelector.js

@@ -19,10 +19,9 @@ Object.defineProperty(exports, "CalculationSelector", {
     get: ()=>CalculationSelector
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
-const _calculations = require("../../model/calculations");
-const CALC_OPTIONS = Object.entries(_calculations.CALCULATIONS_CONFIG).map(([id, config])=>{
+const _core = require("@perses-dev/core");
+const CALC_OPTIONS = Object.entries(_core.CALCULATIONS_CONFIG).map(([id, config])=>{
     return {
         id: id,
         ...config
@@ -32,19 +31,15 @@ function CalculationSelector({ value , onChange  }) {
     const handleCalculationChange = (_, newValue)=>{
         onChange(newValue.id);
     };
-    const calcConfig = _calculations.CALCULATIONS_CONFIG[value];
+    const calcConfig = _core.CALCULATIONS_CONFIG[value];
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
         label: "Calculation",
-        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+        control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
             value: {
                 ...calcConfig,
                 id: value
             },
             options: CALC_OPTIONS,
-            isOptionEqualToValue: (option, value)=>option.id === value.id,
-            renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                    ...params
-                }),
             onChange: handleCalculationChange,
             disableClearable: true
         })

package/dist/cjs/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -0,0 +1,182 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+Object.defineProperty(exports, "LegendOptionsEditor", {
+    enumerable: true,
+    get: ()=>LegendOptionsEditor
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _core = require("@perses-dev/core");
+const _components = require("@perses-dev/components");
+const _model = require("../../model");
+const POSITION_OPTIONS = Object.entries(_model.LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
+const MODE_OPTIONS = Object.entries(_model.LEGEND_MODE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
+const SIZE_OPTIONS = Object.entries(_model.LEGEND_SIZE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
+const VALUE_OPTIONS = Object.entries(_model.LEGEND_VALUE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
+function LegendOptionsEditor({ value , onChange  }) {
+    const handleLegendShowChange = (_, checked)=>{
+        // legend is hidden when legend obj is undefined
+        const legendValue = checked === true ? {
+            position: _core.DEFAULT_LEGEND.position
+        } : undefined;
+        onChange(legendValue);
+    };
+    const handleLegendPositionChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: newValue.id
+        });
+    };
+    const handleLegendModeChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            mode: newValue.id
+        });
+    };
+    const handleLegendSizeChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            size: newValue.id
+        });
+    };
+    const handleLegendValueChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            values: newValue.map((value)=>{
+                return value.id;
+            })
+        });
+    };
+    const isValidLegend = (0, _model.validateLegendSpec)(value);
+    const currentPosition = (0, _core.getLegendPosition)(value === null || value === void 0 ? void 0 : value.position);
+    const legendPositionConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
+    const currentMode = (0, _core.getLegendMode)(value === null || value === void 0 ? void 0 : value.mode);
+    const legendModeConfig = _model.LEGEND_MODE_CONFIG[currentMode];
+    const currentSize = (0, _core.getLegendSize)(value === null || value === void 0 ? void 0 : value.size);
+    const legendSizeConfig = _model.LEGEND_SIZE_CONFIG[currentSize];
+    const currentValues = (value === null || value === void 0 ? void 0 : value.values) || [];
+    const legendValuesConfig = currentValues.reduce((result, item)=>{
+        const config = _model.LEGEND_VALUE_CONFIG[item];
+        if (config) {
+            result.push({
+                ...config,
+                id: item
+            });
+        }
+        return result;
+    }, []);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        children: [
+            !isValidLegend && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.ErrorAlert, {
+                error: {
+                    name: 'invalid-legend',
+                    message: 'Invalid legend spec'
+                }
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+                label: "Show",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                    checked: value !== undefined,
+                    onChange: handleLegendShowChange
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+                label: "Position",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
+                    value: {
+                        ...legendPositionConfig,
+                        id: currentPosition
+                    },
+                    options: POSITION_OPTIONS,
+                    onChange: handleLegendPositionChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+                label: "Mode",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
+                    value: {
+                        ...legendModeConfig,
+                        id: currentMode
+                    },
+                    options: MODE_OPTIONS,
+                    onChange: handleLegendModeChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+                label: "Size",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
+                    value: {
+                        ...legendSizeConfig,
+                        id: currentSize
+                    },
+                    options: SIZE_OPTIONS,
+                    onChange: handleLegendSizeChange,
+                    // TODO: enable sizes for list mode when we normalize the layout of
+                    // lists to more closely match tables.
+                    disabled: value === undefined || currentMode !== 'Table',
+                    disableClearable: true
+                })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
+                label: "Values",
+                control: // For some reason, the inferred option type doesn't always seem to work
+                // quite right when `multiple` is true. Explicitly setting the generics
+                // to work around this.
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
+                    multiple: true,
+                    disableCloseOnSelect: true,
+                    disableClearable: true,
+                    value: legendValuesConfig,
+                    options: VALUE_OPTIONS,
+                    onChange: handleLegendValueChange,
+                    disabled: value === undefined || currentMode !== 'Table',
+                    limitTags: 1,
+                    ChipProps: {
+                        size: 'small'
+                    }
+                })
+            })
+        ]
+    });
+}

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

@@ -0,0 +1,28 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./LegendOptionsEditor"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/components/index.js

@@ -16,6 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./CalculationSelector"), exports);
 _exportStar(require("./DatasourceSelect"), exports);
+_exportStar(require("./LegendOptionsEditor"), exports);
 _exportStar(require("./OptionsEditorTabs"), exports);
 _exportStar(require("./PanelSpecEditor"), exports);
 _exportStar(require("./PluginEditor"), exports);

package/dist/cjs/index.js

@@ -18,6 +18,7 @@ _exportStar(require("./components"), exports);
 _exportStar(require("./model"), exports);
 _exportStar(require("./runtime"), exports);
 _exportStar(require("./test-utils"), exports);
+_exportStar(require("./utils"), exports);
 function _exportStar(from, to) {
     Object.keys(from).forEach(function(k) {
         if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {

package/dist/cjs/model/index.js

@@ -14,8 +14,8 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./calculations"), exports);
 _exportStar(require("./datasource"), exports);
+_exportStar(require("./legend"), exports);
 _exportStar(require("./panels"), exports);
 _exportStar(require("./plugins"), exports);
 _exportStar(require("./plugin-base"), exports);

package/dist/cjs/model/legend.js

@@ -0,0 +1,85 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    legendValues: ()=>legendValues,
+    LEGEND_POSITIONS_CONFIG: ()=>LEGEND_POSITIONS_CONFIG,
+    LEGEND_MODE_CONFIG: ()=>LEGEND_MODE_CONFIG,
+    LEGEND_SIZE_CONFIG: ()=>LEGEND_SIZE_CONFIG,
+    LEGEND_VALUE_CONFIG: ()=>LEGEND_VALUE_CONFIG,
+    validateLegendSpec: ()=>validateLegendSpec
+});
+const _core = require("@perses-dev/core");
+const legendValues = [
+    'Mean',
+    'First',
+    'FirstNumber',
+    'Last',
+    'LastNumber',
+    'Min',
+    'Max',
+    'Sum'
+];
+const LEGEND_POSITIONS_CONFIG = {
+    Bottom: {
+        label: 'Bottom'
+    },
+    Right: {
+        label: 'Right'
+    }
+};
+const LEGEND_MODE_CONFIG = {
+    List: {
+        label: 'List'
+    },
+    Table: {
+        label: 'Table'
+    }
+};
+const LEGEND_SIZE_CONFIG = {
+    Small: {
+        label: 'Small'
+    },
+    Medium: {
+        label: 'Medium'
+    }
+};
+const LEGEND_VALUE_CONFIG = legendValues.reduce((config, value)=>{
+    config[value] = _core.CALCULATIONS_CONFIG[value];
+    return config;
+}, {});
+function validateLegendSpec(legend) {
+    if (legend === undefined) {
+        // undefined is valid since this is how legend is hidden by default
+        return true;
+    }
+    if (!(0, _core.isValidLegendPosition)(legend.position)) {
+        return false;
+    }
+    if (legend.mode && !(0, _core.isValidLegendMode)(legend.mode)) {
+        return false;
+    }
+    if (legend.size && !(0, _core.isValidLegendSize)(legend.size)) {
+        return false;
+    }
+    return true;
+}

package/dist/cjs/runtime/TimeRangeProvider/TimeRangeProvider.js

@@ -78,18 +78,12 @@ function useTimeRangeContext() {
     return ctx;
 }
 function useTimeRange() {
-    const { timeRange , absoluteTimeRange , setTimeRange , refresh , refreshKey  } = useTimeRangeContext();
-    return {
-        timeRange,
-        absoluteTimeRange,
-        setTimeRange,
-        refresh,
-        refreshKey
-    };
+    return useTimeRangeContext();
 }
 function TimeRangeProvider(props) {
-    const { initialTimeRange , enabledURLParams , children  } = props;
+    const { initialTimeRange , initialRefreshInterval , enabledURLParams , children  } = props;
     const { timeRange , setTimeRange  } = (0, _queryParams.useSetTimeRangeParams)(initialTimeRange, enabledURLParams);
+    const { refreshInterval , setRefreshInterval , refreshIntervalInMs  } = (0, _queryParams.useSetRefreshIntervalParams)(initialRefreshInterval, enabledURLParams);
     const [refreshKey, setRefreshKey] = (0, _react.useState)(0);
     const refresh = (0, _react.useCallback)(()=>{
         setRefreshKey(refreshKey + 1);
@@ -103,13 +97,19 @@ function TimeRangeProvider(props) {
             setTimeRange,
             absoluteTimeRange,
             refresh,
-            refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${refreshKey}`
+            refreshKey: `${absoluteTimeRange.start}:${absoluteTimeRange.end}:${refreshInterval}:${refreshKey}`,
+            refreshInterval,
+            refreshIntervalInMs,
+            setRefreshInterval
         };
     }, [
         timeRange,
         setTimeRange,
         refresh,
-        refreshKey
+        refreshKey,
+        refreshInterval,
+        refreshIntervalInMs,
+        setRefreshInterval
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(TimeRangeContext.Provider, {
         value: ctx,

package/dist/cjs/runtime/TimeRangeProvider/query-params.js

@@ -25,8 +25,11 @@ _export(exports, {
     decodeTimeRangeValue: ()=>decodeTimeRangeValue,
     TimeRangeParam: ()=>TimeRangeParam,
     timeRangeQueryConfig: ()=>timeRangeQueryConfig,
+    refreshIntervalQueryConfig: ()=>refreshIntervalQueryConfig,
     useInitialTimeRange: ()=>useInitialTimeRange,
-    useSetTimeRangeParams: ()=>useSetTimeRangeParams
+    useSetTimeRangeParams: ()=>useSetTimeRangeParams,
+    useInitialRefreshInterval: ()=>useInitialRefreshInterval,
+    useSetRefreshIntervalParams: ()=>useSetRefreshIntervalParams
 });
 const _react = require("react");
 const _useQueryParams = require("use-query-params");
@@ -78,6 +81,9 @@ const timeRangeQueryConfig = {
     start: TimeRangeParam,
     end: TimeRangeParam
 };
+const refreshIntervalQueryConfig = {
+    refresh: TimeRangeParam
+};
 function useInitialTimeRange(dashboardDuration) {
     const [query] = (0, _useQueryParams.useQueryParams)(timeRangeQueryConfig, {
         updateType: 'replaceIn'
@@ -159,3 +165,76 @@ function useSetTimeRangeParams(initialTimeRange, enabledURLParams = true) {
         setTimeRange: setTimeRange
     };
 }
+function useInitialRefreshInterval(dashboardDuration) {
+    const [query] = (0, _useQueryParams.useQueryParams)(refreshIntervalQueryConfig, {
+        updateType: 'replaceIn'
+    });
+    const { refresh  } = query;
+    return (0, _react.useMemo)(()=>{
+        let initialTimeRange = dashboardDuration;
+        if (!refresh) {
+            return initialTimeRange;
+        }
+        const startStr = refresh.toString();
+        if ((0, _core.isDurationString)(startStr)) {
+            initialTimeRange = startStr;
+        }
+        return initialTimeRange;
+    }, [
+        dashboardDuration,
+        refresh
+    ]);
+}
+function getRefreshIntervalInMs(refreshInterval) {
+    let refreshIntervalInMs = 0;
+    if (refreshInterval) {
+        const refreshIntervalDuration = (0, _core.parseDurationString)(refreshInterval);
+        if (refreshIntervalDuration && refreshIntervalDuration.seconds) {
+            refreshIntervalInMs = (refreshIntervalDuration === null || refreshIntervalDuration === void 0 ? void 0 : refreshIntervalDuration.seconds) * 1000;
+        }
+    }
+    return refreshIntervalInMs;
+}
+function useSetRefreshIntervalParams(initialRefreshInterval, enabledURLParams = true) {
+    const [query, setQuery] = (0, _useQueryParams.useQueryParams)(refreshIntervalQueryConfig, {
+        updateType: 'replaceIn'
+    });
+    // determine whether initial param had previously been populated to fix back btn
+    const [paramsLoaded, setParamsLoaded] = (0, _react.useState)(false);
+    // optional fallback when app does not want query string as source of truth
+    // this occurs when enabledURLParams is set to false on TimeRangeProvider
+    const [refreshIntervalState, setRefreshIntervalState] = (0, _react.useState)(initialRefreshInterval);
+    const { refresh  } = query;
+    (0, _react.useEffect)(()=>{
+        // when dashboard loaded with no params, default to dashboard duration
+        if (enabledURLParams && !paramsLoaded && !refresh) {
+            setQuery({
+                refresh: initialRefreshInterval
+            });
+            setParamsLoaded(true);
+        }
+    }, [
+        initialRefreshInterval,
+        enabledURLParams,
+        paramsLoaded,
+        refresh,
+        setQuery
+    ]);
+    const setRefreshInterval = (0, _react.useCallback)((refresh)=>setQuery({
+            refresh
+        }), [
+        setQuery
+    ]);
+    if (!enabledURLParams) {
+        return {
+            refreshInterval: refreshIntervalState,
+            setRefreshInterval: setRefreshIntervalState,
+            refreshIntervalInMs: getRefreshIntervalInMs(refreshIntervalState)
+        };
+    }
+    return {
+        refreshInterval: initialRefreshInterval,
+        setRefreshInterval: setRefreshInterval,
+        refreshIntervalInMs: getRefreshIntervalInMs(initialRefreshInterval)
+    };
+}

package/dist/cjs/runtime/template-variables.js

@@ -21,12 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DEFAULT_ALL_VALUE: ()=>DEFAULT_ALL_VALUE,
     TemplateVariableContext: ()=>TemplateVariableContext,
-    useTemplateVariableValues: ()=>useTemplateVariableValues
+    useTemplateVariableValues: ()=>useTemplateVariableValues,
+    useReplaceVariablesInString: ()=>useReplaceVariablesInString
 });
 const _react = require("react");
-const DEFAULT_ALL_VALUE = '$__all';
+const _utils = require("../utils");
 const TemplateVariableContext = (0, _react.createContext)(undefined);
 function useTemplateVariableContext() {
     const ctx = (0, _react.useContext)(TemplateVariableContext);
@@ -55,3 +55,9 @@ function useTemplateVariableValues(names) {
     }
     return values;
 }
+function useReplaceVariablesInString(str) {
+    const variablesInString = str ? (0, _utils.parseTemplateVariables)(str) : [];
+    const variableValues = useTemplateVariableValues(variablesInString);
+    if (!str) return undefined;
+    return (0, _utils.replaceTemplateVariables)(str, variableValues);
+}

package/dist/cjs/runtime/time-series-queries.js

@@ -84,6 +84,7 @@ const useTimeSeriesQuery = (definition, options)=>{
     return (0, _reactQuery.useQuery)({
         enabled: queryEnabled,
         queryKey: queryKey,
+        refetchInterval: context.refreshIntervalInMs > 0 ? context.refreshIntervalInMs : false,
         queryFn: ()=>{
             // The 'enabled' option should prevent this from happening, but make TypeScript happy by checking
             if (plugin === undefined) {
@@ -116,6 +117,7 @@ function useTimeSeriesQueries(definitions, options) {
             return {
                 enabled: queryEnabled,
                 queryKey: queryKey,
+                refetchInterval: context.refreshIntervalInMs > 0 ? context.refreshIntervalInMs : false,
                 queryFn: async ()=>{
                     // Keep options out of query key so we don't re-run queries because suggested step changes
                     const ctx = {
@@ -133,14 +135,15 @@ function useTimeSeriesQueries(definitions, options) {
 /**
  * Build the time series query context object from data available at runtime
  */ function useTimeSeriesQueryContext() {
-    const { absoluteTimeRange , refreshKey  } = (0, _timeRangeProvider.useTimeRange)();
+    const { absoluteTimeRange , refreshKey , refreshIntervalInMs  } = (0, _timeRangeProvider.useTimeRange)();
     const variableState = (0, _templateVariables.useTemplateVariableValues)();
     const datasourceStore = (0, _datasources.useDatasourceStore)();
     return {
         timeRange: absoluteTimeRange,
         variableState,
         datasourceStore,
-        refreshKey
+        refreshKey,
+        refreshIntervalInMs: refreshIntervalInMs
     };
 }
 function useActiveTimeSeriesQueries() {

package/dist/cjs/stories/shared-utils/decorators/WithTimeRange.js

@@ -29,6 +29,7 @@ const WithTimeRange = (Story, context)=>{
     const parameter = isWithTimeRangeParameter(initParameter) ? initParameter : undefined;
     const props = parameter === null || parameter === void 0 ? void 0 : parameter.props;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pluginSystem.TimeRangeProvider, {
+        initialRefreshInterval: "0s",
         initialTimeRange: {
             pastDuration: '1h'
         },

package/dist/cjs/utils/index.js

@@ -0,0 +1,28 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+_exportStar(require("./variables"), exports);
+function _exportStar(from, to) {
+    Object.keys(from).forEach(function(k) {
+        if (k !== "default" && !Object.prototype.hasOwnProperty.call(to, k)) Object.defineProperty(to, k, {
+            enumerable: true,
+            get: function() {
+                return from[k];
+            }
+        });
+    });
+    return from;
+}

package/dist/cjs/utils/variables.js

@@ -0,0 +1,68 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    replaceTemplateVariables: ()=>replaceTemplateVariables,
+    replaceTemplateVariable: ()=>replaceTemplateVariable,
+    parseTemplateVariables: ()=>parseTemplateVariables
+});
+function replaceTemplateVariables(text, variableState) {
+    const variables = parseTemplateVariables(text);
+    let finalText = text;
+    variables.forEach((v)=>{
+        const variable = variableState[v];
+        if (variable && (variable === null || variable === void 0 ? void 0 : variable.value)) {
+            finalText = replaceTemplateVariable(finalText, v, variable === null || variable === void 0 ? void 0 : variable.value);
+        }
+    });
+    return finalText;
+}
+function replaceTemplateVariable(text, varName, templateVariableValue) {
+    const variableTemplate = '$' + varName;
+    let replaceString = '';
+    if (Array.isArray(templateVariableValue)) {
+        replaceString = `(${templateVariableValue.join('|')})`; // regex style
+    }
+    if (typeof templateVariableValue === 'string') {
+        replaceString = templateVariableValue;
+    }
+    return text.replaceAll(variableTemplate, replaceString);
+}
+// This regular expression is designed to identify variable references in a template string.
+// It supports two formats for referencing variables:
+// 1. $variableName - This is a simpler format, and the regular expression captures the variable name (\w+ matches one or more word characters).
+// 2. [COMING SOON] ${variableName:value} - This is a more complex format that allows specifying a format function as well.
+// TODO: Fix this lint error
+// eslint-disable-next-line no-useless-escape
+const TEMPLATE_VARIABLE_REGEX = /\$(\w+)|\${(\w+)(?:\.([^:^\}]+))?(?::([^\}]+))?}/gm;
+const parseTemplateVariables = (text)=>{
+    const regex = TEMPLATE_VARIABLE_REGEX;
+    const matches = new Set();
+    let match;
+    while((match = regex.exec(text)) !== null){
+        if (match && match.length > 1 && match[1]) {
+            matches.add(match[1]);
+        }
+    }
+    // return unique matches
+    return Array.from(matches.values());
+};