@perses-dev/plugin-system 0.34.0 → 0.36.0

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

@@ -19,7 +19,6 @@ Object.defineProperty(exports, "CalculationSelector", {
     get: ()=>CalculationSelector
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
 const _components = require("@perses-dev/components");
 const _core = require("@perses-dev/core");
 const CALC_OPTIONS = Object.entries(_core.CALCULATIONS_CONFIG).map(([id, config])=>{
@@ -35,16 +34,12 @@ function CalculationSelector({ value , onChange  }) {
     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

@@ -35,6 +35,18 @@ const MODE_OPTIONS = Object.entries(_model.LEGEND_MODE_CONFIG).map(([id, config]
         ...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
@@ -56,11 +68,40 @@ function LegendOptionsEditor({ value , onChange  }) {
             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, {
@@ -78,16 +119,12 @@ function LegendOptionsEditor({ value , onChange  }) {
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
                 label: "Position",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
                     value: {
                         ...legendPositionConfig,
                         id: currentPosition
                     },
                     options: POSITION_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
-                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            ...params
-                        }),
                     onChange: handleLegendPositionChange,
                     disabled: value === undefined,
                     disableClearable: true
@@ -95,20 +132,50 @@ function LegendOptionsEditor({ value , onChange  }) {
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.OptionsEditorControl, {
                 label: "Mode",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_components.SettingsAutocomplete, {
                     value: {
                         ...legendModeConfig,
                         id: currentMode
                     },
                     options: MODE_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
-                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            ...params
-                        }),
                     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/model/legend.js

@@ -21,11 +21,24 @@ function _export(target, all) {
     });
 }
 _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'
@@ -42,6 +55,18 @@ const LEGEND_MODE_CONFIG = {
         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
@@ -53,5 +78,8 @@ function validateLegendSpec(legend) {
     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,14 +21,12 @@ function _export(target, all) {
     });
 }
 _export(exports, {
-    DEFAULT_ALL_VALUE: ()=>DEFAULT_ALL_VALUE,
     TemplateVariableContext: ()=>TemplateVariableContext,
     useTemplateVariableValues: ()=>useTemplateVariableValues,
     useReplaceVariablesInString: ()=>useReplaceVariablesInString
 });
 const _react = require("react");
 const _utils = require("../utils");
-const DEFAULT_ALL_VALUE = '$__all';
 const TemplateVariableContext = (0, _react.createContext)(undefined);
 function useTemplateVariableContext() {
     const ctx = (0, _react.useContext)(TemplateVariableContext);

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/components/CalculationSelector/CalculationSelector.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CalculationSelector.d.ts","sourceRoot":"","sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"names":[],"mappings":";AAeA,OAAO,EAA0C,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAU3F,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eAyBhF"}
+{"version":3,"file":"CalculationSelector.d.ts","sourceRoot":"","sources":["../../../src/components/CalculationSelector/CalculationSelector.tsx"],"names":[],"mappings":";AAcA,OAAO,EAA0C,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAU3F,MAAM,WAAW,wBAAwB;IACvC,KAAK,EAAE,eAAe,CAAC;IACvB,QAAQ,EAAE,CAAC,IAAI,EAAE,eAAe,KAAK,IAAI,CAAC;CAC3C;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eAuBhF"}

package/dist/components/CalculationSelector/CalculationSelector.js

@@ -11,8 +11,7 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx } from "react/jsx-runtime";
-import { TextField, Autocomplete } from '@mui/material';
-import { OptionsEditorControl } from '@perses-dev/components';
+import { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';
 import { CALCULATIONS_CONFIG } from '@perses-dev/core';
 const CALC_OPTIONS = Object.entries(CALCULATIONS_CONFIG).map(([id, config])=>{
     return {
@@ -27,16 +26,12 @@ export function CalculationSelector({ value , onChange  }) {
     const calcConfig = CALCULATIONS_CONFIG[value];
     return /*#__PURE__*/ _jsx(OptionsEditorControl, {
         label: "Calculation",
-        control: /*#__PURE__*/ _jsx(Autocomplete, {
+        control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
             value: {
                 ...calcConfig,
                 id: value
             },
             options: CALC_OPTIONS,
-            isOptionEqualToValue: (option, value)=>option.id === value.id,
-            renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                    ...params
-                }),
             onChange: handleCalculationChange,
             disableClearable: true
         })

package/dist/components/CalculationSelector/CalculationSelector.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/components/CalculationSelector/CalculationSelector.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 { TextField, Autocomplete } from '@mui/material';\nimport { OptionsEditorControl } from '@perses-dev/components';\nimport { CALCULATIONS_CONFIG, CalculationConfig, CalculationType } from '@perses-dev/core';\n\ntype AutocompleteCalculationOption = CalculationConfig & { id: CalculationType };\nconst CALC_OPTIONS: AutocompleteCalculationOption[] = Object.entries(CALCULATIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as CalculationType,\n    ...config,\n  };\n});\n\nexport interface CalculationSelectorProps {\n  value: CalculationType;\n  onChange: (unit: CalculationType) => void;\n}\n\nexport function CalculationSelector({ value, onChange }: CalculationSelectorProps) {\n  const handleCalculationChange = (_: unknown, newValue: AutocompleteCalculationOption) => {\n    onChange(newValue.id);\n  };\n\n  const calcConfig = CALCULATIONS_CONFIG[value];\n\n  return (\n    <OptionsEditorControl\n      label=\"Calculation\"\n      control={\n        <Autocomplete\n          value={{\n            ...calcConfig,\n            id: value,\n          }}\n          options={CALC_OPTIONS}\n          isOptionEqualToValue={(option, value) => option.id === value.id}\n          renderInput={(params) => <TextField {...params} />}\n          onChange={handleCalculationChange}\n          disableClearable\n        ></Autocomplete>\n      }\n    />\n  );\n}\n"],"names":["TextField","Autocomplete","OptionsEditorControl","CALCULATIONS_CONFIG","CALC_OPTIONS","Object","entries","map","id","config","CalculationSelector","value","onChange","handleCalculationChange","_","newValue","calcConfig","label","control","options","isOptionEqualToValue","option","renderInput","params","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,SAAS,EAAEC,YAAY,QAAQ,eAAe,CAAC;AACxD,SAASC,oBAAoB,QAAQ,wBAAwB,CAAC;AAC9D,SAASC,mBAAmB,QAA4C,kBAAkB,CAAC;AAG3F,MAAMC,YAAY,GAAoCC,MAAM,CAACC,OAAO,CAACH,mBAAmB,CAAC,CAACI,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,MAAM,CAAC,GAAK;IAC9G,OAAO;QACLD,EAAE,EAAEA,EAAE;QACN,GAAGC,MAAM;KACV,CAAC;AACJ,CAAC,CAAC,AAAC;AAOH,OAAO,SAASC,mBAAmB,CAAC,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAA4B,EAAE;IACjF,MAAMC,uBAAuB,GAAG,CAACC,CAAU,EAAEC,QAAuC,GAAK;QACvFH,QAAQ,CAACG,QAAQ,CAACP,EAAE,CAAC,CAAC;IACxB,CAAC,AAAC;IAEF,MAAMQ,UAAU,GAAGb,mBAAmB,CAACQ,KAAK,CAAC,AAAC;IAE9C,qBACE,KAACT,oBAAoB;QACnBe,KAAK,EAAC,aAAa;QACnBC,OAAO,gBACL,KAACjB,YAAY;YACXU,KAAK,EAAE;gBACL,GAAGK,UAAU;gBACbR,EAAE,EAAEG,KAAK;aACV;YACDQ,OAAO,EAAEf,YAAY;YACrBgB,oBAAoB,EAAE,CAACC,MAAM,EAAEV,KAAK,GAAKU,MAAM,CAACb,EAAE,KAAKG,KAAK,CAACH,EAAE;YAC/Dc,WAAW,EAAE,CAACC,MAAM,iBAAK,KAACvB,SAAS;oBAAE,GAAGuB,MAAM;kBAAI;YAClDX,QAAQ,EAAEC,uBAAuB;YACjCW,gBAAgB;UACF;MAElB,CACF;AACJ,CAAC"}
+{"version":3,"sources":["../../../src/components/CalculationSelector/CalculationSelector.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 { OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';\nimport { CALCULATIONS_CONFIG, CalculationConfig, CalculationType } from '@perses-dev/core';\n\ntype AutocompleteCalculationOption = CalculationConfig & { id: CalculationType };\nconst CALC_OPTIONS: AutocompleteCalculationOption[] = Object.entries(CALCULATIONS_CONFIG).map(([id, config]) => {\n  return {\n    id: id as CalculationType,\n    ...config,\n  };\n});\n\nexport interface CalculationSelectorProps {\n  value: CalculationType;\n  onChange: (unit: CalculationType) => void;\n}\n\nexport function CalculationSelector({ value, onChange }: CalculationSelectorProps) {\n  const handleCalculationChange = (_: unknown, newValue: AutocompleteCalculationOption) => {\n    onChange(newValue.id);\n  };\n\n  const calcConfig = CALCULATIONS_CONFIG[value];\n\n  return (\n    <OptionsEditorControl\n      label=\"Calculation\"\n      control={\n        <SettingsAutocomplete\n          value={{\n            ...calcConfig,\n            id: value,\n          }}\n          options={CALC_OPTIONS}\n          onChange={handleCalculationChange}\n          disableClearable\n        ></SettingsAutocomplete>\n      }\n    />\n  );\n}\n"],"names":["OptionsEditorControl","SettingsAutocomplete","CALCULATIONS_CONFIG","CALC_OPTIONS","Object","entries","map","id","config","CalculationSelector","value","onChange","handleCalculationChange","_","newValue","calcConfig","label","control","options","disableClearable"],"mappings":"AAAA,oCAAoC;AACpC,kEAAkE;AAClE,mEAAmE;AACnE,0CAA0C;AAC1C,EAAE;AACF,6CAA6C;AAC7C,EAAE;AACF,sEAAsE;AACtE,oEAAoE;AACpE,2EAA2E;AAC3E,sEAAsE;AACtE,iCAAiC;AAEjC;AAAA,SAASA,oBAAoB,EAAEC,oBAAoB,QAAQ,wBAAwB,CAAC;AACpF,SAASC,mBAAmB,QAA4C,kBAAkB,CAAC;AAG3F,MAAMC,YAAY,GAAoCC,MAAM,CAACC,OAAO,CAACH,mBAAmB,CAAC,CAACI,GAAG,CAAC,CAAC,CAACC,EAAE,EAAEC,MAAM,CAAC,GAAK;IAC9G,OAAO;QACLD,EAAE,EAAEA,EAAE;QACN,GAAGC,MAAM;KACV,CAAC;AACJ,CAAC,CAAC,AAAC;AAOH,OAAO,SAASC,mBAAmB,CAAC,EAAEC,KAAK,CAAA,EAAEC,QAAQ,CAAA,EAA4B,EAAE;IACjF,MAAMC,uBAAuB,GAAG,CAACC,CAAU,EAAEC,QAAuC,GAAK;QACvFH,QAAQ,CAACG,QAAQ,CAACP,EAAE,CAAC,CAAC;IACxB,CAAC,AAAC;IAEF,MAAMQ,UAAU,GAAGb,mBAAmB,CAACQ,KAAK,CAAC,AAAC;IAE9C,qBACE,KAACV,oBAAoB;QACnBgB,KAAK,EAAC,aAAa;QACnBC,OAAO,gBACL,KAAChB,oBAAoB;YACnBS,KAAK,EAAE;gBACL,GAAGK,UAAU;gBACbR,EAAE,EAAEG,KAAK;aACV;YACDQ,OAAO,EAAEf,YAAY;YACrBQ,QAAQ,EAAEC,uBAAuB;YACjCO,gBAAgB;UACM;MAE1B,CACF;AACJ,CAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAGL,iBAAiB,EAGlB,MAAM,aAAa,CAAC;AAoBrB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eAwEhF"}
+{"version":3,"file":"LegendOptionsEditor.d.ts","sourceRoot":"","sources":["../../../src/components/LegendOptionsEditor/LegendOptionsEditor.tsx"],"names":[],"mappings":";AAgBA,OAAO,EAGL,iBAAiB,EAMlB,MAAM,aAAa,CAAC;AAqCrB,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,QAAQ,EAAE,CAAC,MAAM,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;CAChD;AAED,wBAAgB,mBAAmB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE,wBAAwB,eAwIhF"}

package/dist/components/LegendOptionsEditor/LegendOptionsEditor.js

@@ -11,10 +11,10 @@
 // See the License for the specific language governing permissions and
 // limitations under the License.
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Autocomplete, Switch, TextField } from '@mui/material';
-import { DEFAULT_LEGEND, getLegendMode, getLegendPosition } from '@perses-dev/core';
-import { ErrorAlert, OptionsEditorControl } from '@perses-dev/components';
-import { LEGEND_MODE_CONFIG, LEGEND_POSITIONS_CONFIG, validateLegendSpec } from '../../model';
+import { Switch } from '@mui/material';
+import { DEFAULT_LEGEND, getLegendMode, getLegendPosition, getLegendSize } from '@perses-dev/core';
+import { ErrorAlert, OptionsEditorControl, SettingsAutocomplete } from '@perses-dev/components';
+import { LEGEND_MODE_CONFIG, LEGEND_POSITIONS_CONFIG, validateLegendSpec, LEGEND_VALUE_CONFIG, LEGEND_SIZE_CONFIG } from '../../model';
 const POSITION_OPTIONS = Object.entries(LEGEND_POSITIONS_CONFIG).map(([id, config])=>{
     return {
         id: id,
@@ -27,6 +27,18 @@ const MODE_OPTIONS = Object.entries(LEGEND_MODE_CONFIG).map(([id, config])=>{
         ...config
     };
 });
+const SIZE_OPTIONS = Object.entries(LEGEND_SIZE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
+const VALUE_OPTIONS = Object.entries(LEGEND_VALUE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
 export function LegendOptionsEditor({ value , onChange  }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
@@ -48,11 +60,40 @@ export function LegendOptionsEditor({ value , onChange  }) {
             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 = validateLegendSpec(value);
     const currentPosition = getLegendPosition(value === null || value === void 0 ? void 0 : value.position);
     const legendPositionConfig = LEGEND_POSITIONS_CONFIG[currentPosition];
     const currentMode = getLegendMode(value === null || value === void 0 ? void 0 : value.mode);
     const legendModeConfig = LEGEND_MODE_CONFIG[currentMode];
+    const currentSize = getLegendSize(value === null || value === void 0 ? void 0 : value.size);
+    const legendSizeConfig = LEGEND_SIZE_CONFIG[currentSize];
+    const currentValues = (value === null || value === void 0 ? void 0 : value.values) || [];
+    const legendValuesConfig = currentValues.reduce((result, item)=>{
+        const config = LEGEND_VALUE_CONFIG[item];
+        if (config) {
+            result.push({
+                ...config,
+                id: item
+            });
+        }
+        return result;
+    }, []);
     return /*#__PURE__*/ _jsxs(_Fragment, {
         children: [
             !isValidLegend && /*#__PURE__*/ _jsx(ErrorAlert, {
@@ -70,16 +111,12 @@ export function LegendOptionsEditor({ value , onChange  }) {
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Position",
-                control: /*#__PURE__*/ _jsx(Autocomplete, {
+                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
                     value: {
                         ...legendPositionConfig,
                         id: currentPosition
                     },
                     options: POSITION_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
-                    renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                            ...params
-                        }),
                     onChange: handleLegendPositionChange,
                     disabled: value === undefined,
                     disableClearable: true
@@ -87,20 +124,50 @@ export function LegendOptionsEditor({ value , onChange  }) {
             }),
             /*#__PURE__*/ _jsx(OptionsEditorControl, {
                 label: "Mode",
-                control: /*#__PURE__*/ _jsx(Autocomplete, {
+                control: /*#__PURE__*/ _jsx(SettingsAutocomplete, {
                     value: {
                         ...legendModeConfig,
                         id: currentMode
                     },
                     options: MODE_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
-                    renderInput: (params)=>/*#__PURE__*/ _jsx(TextField, {
-                            ...params
-                        }),
                     onChange: handleLegendModeChange,
                     disabled: value === undefined,
                     disableClearable: true
                 })
+            }),
+            /*#__PURE__*/ _jsx(OptionsEditorControl, {
+                label: "Size",
+                control: /*#__PURE__*/ _jsx(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__*/ _jsx(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__*/ _jsx(SettingsAutocomplete, {
+                    multiple: true,
+                    disableCloseOnSelect: true,
+                    disableClearable: true,
+                    value: legendValuesConfig,
+                    options: VALUE_OPTIONS,
+                    onChange: handleLegendValueChange,
+                    disabled: value === undefined || currentMode !== 'Table',
+                    limitTags: 1,
+                    ChipProps: {
+                        size: 'small'
+                    }
+                })
             })
         ]
     });