@perses-dev/components 0.34.0 → 0.36.0

package/dist/cjs/Table/Table.js

@@ -28,12 +28,49 @@ const _tableModel = require("./model/table-model");
 const DEFAULT_GET_ROW_ID = (data, index)=>{
     return `${index}`;
 };
-function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection ={} , ...otherProps }) {
+// Setting these defaults one enables them to be consistent across renders instead
+// of being recreated every time, which can be important for perf because react
+// does not do deep equality checking for objects and arrays.
+const DEFAULT_ROW_SELECTION = {};
+const DEFAULT_SORTING = [];
+function Table({ data , columns , density ='standard' , checkboxSelection , onRowSelectionChange , onSortingChange , getCheckboxColor , getRowId =DEFAULT_GET_ROW_ID , rowSelection =DEFAULT_ROW_SELECTION , sorting =DEFAULT_SORTING , rowSelectionVariant ='standard' , ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const handleRowSelectionChange = (rowSelectionUpdater)=>{
         const newRowSelection = typeof rowSelectionUpdater === 'function' ? rowSelectionUpdater(rowSelection) : rowSelectionUpdater;
         onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange(newRowSelection);
     };
+    const handleRowSelectionEvent = (0, _react.useCallback)((table, row, isModified)=>{
+        if (rowSelectionVariant === 'standard' || isModified) {
+            row.toggleSelected();
+        } else {
+            // Legend variant (when action not modified with shift/meta key).
+            // Note that this behavior needs to be kept in sync with behavior in
+            // the Legend component for list-based legends.
+            if (row.getIsSelected() && !table.getIsAllRowsSelected()) {
+                // Row was already selected. Revert to select all.
+                table.toggleAllRowsSelected();
+            } else {
+                // Focus the selected row.
+                onRowSelectionChange === null || onRowSelectionChange === void 0 ? void 0 : onRowSelectionChange({
+                    [row.id]: true
+                });
+            }
+        }
+    }, [
+        onRowSelectionChange,
+        rowSelectionVariant
+    ]);
+    const handleCheckboxChange = (0, _react.useCallback)((e, table, row)=>{
+        const nativePointerEvent = e.nativeEvent && (e.nativeEvent instanceof MouseEvent || e.nativeEvent instanceof KeyboardEvent) ? e.nativeEvent : undefined;
+        const isModifed = !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.metaKey) || !!(nativePointerEvent === null || nativePointerEvent === void 0 ? void 0 : nativePointerEvent.shiftKey);
+        handleRowSelectionEvent(table, row, isModifed);
+    }, [
+        handleRowSelectionEvent
+    ]);
+    const handleSortingChange = (sortingUpdater)=>{
+        const newSorting = typeof sortingUpdater === 'function' ? sortingUpdater(sorting) : sortingUpdater;
+        onSortingChange === null || onSortingChange === void 0 ? void 0 : onSortingChange(newSorting);
+    };
     const checkboxColumn = (0, _react.useMemo)(()=>{
         return {
             id: 'checkboxRowSelect',
@@ -47,22 +84,24 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
                     density: density
                 });
             },
-            cell: ({ row  })=>{
+            cell: ({ row , table  })=>{
                 return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCheckbox.TableCheckbox, {
                     checked: row.getIsSelected(),
                     indeterminate: row.getIsSomeSelected(),
                     onChange: (e)=>{
-                        row.getToggleSelectedHandler()(e);
+                        handleCheckboxChange(e, table, row);
                     },
                     color: getCheckboxColor === null || getCheckboxColor === void 0 ? void 0 : getCheckboxColor(row.original),
                     density: density
                 });
-            }
+            },
+            enableSorting: false
         };
     }, [
+        theme.palette.text.primary,
         density,
         getCheckboxColor,
-        theme.palette.text.primary
+        handleCheckboxChange
     ]);
     const tableColumns = (0, _react.useMemo)(()=>{
         const initTableColumns = (0, _tableModel.persesColumnsToTanstackColumns)(columns);
@@ -80,15 +119,24 @@ function Table({ data , columns , density ='standard' , checkboxSelection , onRo
         columns: tableColumns,
         getRowId,
         getCoreRowModel: (0, _reactTable.getCoreRowModel)(),
+        getSortedRowModel: (0, _reactTable.getSortedRowModel)(),
         enableRowSelection: !!checkboxSelection,
         onRowSelectionChange: handleRowSelectionChange,
+        onSortingChange: handleSortingChange,
+        // For now, defaulting to sort by descending first. We can expose the ability
+        // to customize it if/when we have use cases for it.
+        sortDescFirst: true,
         state: {
-            rowSelection
+            rowSelection,
+            sorting
         }
     });
-    const handleRowClick = (0, _react.useCallback)((rowId)=>{
-        table.getRow(rowId).toggleSelected();
+    const handleRowClick = (0, _react.useCallback)((e, rowId)=>{
+        const row = table.getRow(rowId);
+        const isModifiedClick = e.metaKey || e.shiftKey;
+        handleRowSelectionEvent(table, row, isModifiedClick);
     }, [
+        handleRowSelectionEvent,
         table
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_virtualizedTable.VirtualizedTable, {

package/dist/cjs/Table/TableCell.js

@@ -37,7 +37,7 @@ const StyledMuiTableCell = (0, _material.styled)(_material.TableCell)(({ theme
             borderRadius: 0
         }
     }));
-function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , ...otherProps }) {
+function TableCell({ children , density , variant , width , focusState ='none' , onFocusTrigger , isFirstColumn , isLastColumn , description , ...otherProps }) {
     const theme = (0, _material.useTheme)();
     const elRef = (0, _react.useRef)();
     const isHeader = variant === 'head';
@@ -51,7 +51,7 @@ function TableCell({ children , density , variant , width , focusState ='none' ,
     const handleFocus = (e)=>{
         var ref;
         // From https://zellwk.com/blog/keyboard-focusable-elements/
-        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details');
+        const nestedFocusTarget = (ref = e.currentTarget) === null || ref === void 0 ? void 0 : ref.querySelector('a[href], button, input, textarea, select, details,[role="button"]');
         if (nestedFocusTarget) {
             // If the cell has a focusable child, focus it instead. Mostly used for
             // checkbox cells, but could have other uses.
@@ -92,8 +92,13 @@ function TableCell({ children , density , variant , width , focusState ='none' ,
                 // this with a prop on column config in the future.
                 whiteSpace: 'nowrap',
                 overflow: 'hidden',
-                textOverflow: 'ellipsis'
+                textOverflow: 'ellipsis',
+                // Need to inherit from the MUI cell because this manages some ordering
+                // that the `TableSortLabel` uses to determine the location of the icon
+                // in headers.
+                flexDirection: 'inherit'
             },
+            title: description,
             children: children
         })
     });

package/dist/cjs/Table/TableCheckbox.js

@@ -48,7 +48,7 @@ function TableCheckbox({ color , density , ...otherProps }) {
                 background: color ? (0, _material.alpha)(color, 0.5) : undefined
             },
             '& .MuiSvgIcon-root': {
-                fontSize: isCompact ? 14 : 16
+                fontSize: isCompact ? 16 : 18
             }
         }
     });

package/dist/cjs/Table/TableHeaderCell.js

@@ -0,0 +1,59 @@
+// 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, "TableHeaderCell", {
+    enumerable: true,
+    get: ()=>TableHeaderCell
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _tableCell = require("./TableCell");
+function TableHeaderCell({ onSort , sortDirection , nextSortDirection , children , ...cellProps }) {
+    const showSortLabel = !!onSort;
+    const headerText = /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+        noWrap: true,
+        variant: "inherit",
+        component: "div",
+        color: "inherit",
+        children: children
+    });
+    const isActive = !!sortDirection;
+    const direction = isActive ? sortDirection : nextSortDirection;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCell.TableCell, {
+        ...cellProps,
+        children: showSortLabel ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TableSortLabel, {
+            onClick: onSort,
+            direction: direction,
+            active: isActive,
+            sx: {
+                // Overrides a default vertical alignment in the CSS that changes
+                // the header vertical rhythm in a way that's inconsistent with
+                // non-sorting headers.
+                verticalAlign: 'unset',
+                // Makes it possible to ellipsize the text if it's too long.
+                maxWidth: '100%',
+                // Make the arrow visible when focused using the keyboard to assist
+                // with a11y.
+                '&:focus-visible': {
+                    [`& .${_material.tableSortLabelClasses.icon}`]: {
+                        opacity: isActive ? 1 : 0.5
+                    }
+                }
+            },
+            children: headerText
+        }) : headerText
+    });
+}

package/dist/cjs/Table/VirtualizedTable.js

@@ -27,10 +27,11 @@ const _tableRow = require("./TableRow");
 const _tableBody = require("./TableBody");
 const _innerTable = require("./InnerTable");
 const _tableHead = require("./TableHead");
+const _tableHeaderCell = require("./TableHeaderCell");
 const _tableCell = require("./TableCell");
 const _virtualizedTableContainer = require("./VirtualizedTableContainer");
 const _useVirtualizedTableKeyboardNav = require("./hooks/useVirtualizedTableKeyboardNav");
-function VirtualizedTable({ width , height , density , onRowClick , rows , columns , headers  }) {
+function VirtualizedTable({ width , height , density , onRowClick , onRowMouseOver , onRowMouseOut , rows , columns , headers  }) {
     const virtuosoRef = (0, _react.useRef)(null);
     // Use a ref for these values because they are only needed for keyboard
     // focus interactions and setting them on state will lead to a significant
@@ -74,10 +75,20 @@ function VirtualizedTable({ width , height , density , onRowClick , rows , colum
                 if (!row) {
                     return null;
                 }
+                const rowEventOpts = {
+                    id: row.id,
+                    index: row.index
+                };
                 return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableRow.TableRow, {
                     ...props,
-                    onClick: ()=>onRowClick(row.id),
-                    density: density
+                    onClick: (e)=>onRowClick(e, row.id),
+                    density: density,
+                    onMouseOver: (e)=>{
+                        onRowMouseOver === null || onRowMouseOver === void 0 ? void 0 : onRowMouseOver(e, rowEventOpts);
+                    },
+                    onMouseOut: (e)=>{
+                        onRowMouseOut === null || onRowMouseOut === void 0 ? void 0 : onRowMouseOut(e, rowEventOpts);
+                    }
                 });
             },
             TableBody: _tableBody.TableBody
@@ -86,6 +97,8 @@ function VirtualizedTable({ width , height , density , onRowClick , rows , colum
         density,
         keyboardNav.onTableKeyDown,
         onRowClick,
+        onRowMouseOut,
+        onRowMouseOver,
         rows,
         width
     ]);
@@ -108,17 +121,23 @@ function VirtualizedTable({ width , height , density , onRowClick , rows , colum
                         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableRow.TableRow, {
                             density: density,
                             children: headerGroup.headers.map((header, i, headers)=>{
-                                var ref;
+                                var ref, ref1;
                                 const column = header.column;
                                 const position = {
                                     row: 0,
                                     column: i
                                 };
-                                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCell.TableCell, {
+                                const isSorted = column.getIsSorted();
+                                const nextSorting = column.getNextSortingOrder();
+                                return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableHeaderCell.TableHeaderCell, {
+                                    onSort: column.getCanSort() ? column.getToggleSortingHandler() : undefined,
+                                    sortDirection: typeof isSorted === 'string' ? isSorted : undefined,
+                                    nextSortDirection: typeof nextSorting === 'string' ? nextSorting : undefined,
                                     width: column.getSize() || 'auto',
                                     align: (ref = column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
                                     variant: "head",
                                     density: density,
+                                    description: (ref1 = column.columnDef.meta) === null || ref1 === void 0 ? void 0 : ref1.headerDescription,
                                     focusState: getFocusState(position),
                                     onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                                     isFirstColumn: i === 0,
@@ -137,21 +156,37 @@ function VirtualizedTable({ width , height , density , onRowClick , rows , colum
                 }
                 return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {
                     children: row.getVisibleCells().map((cell, i, cells)=>{
-                        var ref;
+                        var ref, ref1;
                         const position = {
                             // Add 1 to the row index because the header is row 0
                             row: index + 1,
                             column: i
                         };
+                        const cellContext = cell.getContext();
+                        const cellRenderFn = cell.column.columnDef.cell;
+                        const cellContent = typeof cellRenderFn == 'function' ? cellRenderFn(cellContext) : null;
+                        const cellDescriptionDef = (ref = cell.column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.cellDescription;
+                        let description = undefined;
+                        if (typeof cellDescriptionDef === 'function') {
+                            // If the cell description is a function, set the value using
+                            // the function.
+                            description = cellDescriptionDef(cellContext);
+                        } else if (cellDescriptionDef && typeof cellContent === 'string') {
+                            // If the cell description is `true` AND the cell content is
+                            // a string (and thus viable as a `title` attribute), use the
+                            // cell content.
+                            description = cellContent;
+                        }
                         return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCell.TableCell, {
                             width: cell.column.getSize() || 'auto',
-                            align: (ref = cell.column.columnDef.meta) === null || ref === void 0 ? void 0 : ref.align,
+                            align: (ref1 = cell.column.columnDef.meta) === null || ref1 === void 0 ? void 0 : ref1.align,
                             density: density,
                             focusState: getFocusState(position),
                             onFocusTrigger: ()=>keyboardNav.onCellFocus(position),
                             isFirstColumn: i === 0,
                             isLastColumn: i === cells.length - 1,
-                            children: (0, _reactTable.flexRender)(cell.column.columnDef.cell, cell.getContext())
+                            description: description,
+                            children: cellContent
                         }, cell.id);
                     })
                 });

package/dist/cjs/Table/model/table-model.js

@@ -61,7 +61,7 @@ function getTableCellLayout(theme, density, { isLastColumn , isFirstColumn  } =
     };
 }
 function persesColumnsToTanstackColumns(columns) {
-    const tableCols = columns.map(({ width , align , ...otherProps })=>{
+    const tableCols = columns.map(({ width , align , headerDescription , cellDescription , enableSorting , ...otherProps })=>{
         // Tanstack Table does not support an "auto" value to naturally size to fit
         // the space in a table. We translate our custom "auto" setting to 0 size
         // for these columns, so it is easy to fall back to auto when rendering.
@@ -79,10 +79,14 @@ function persesColumnsToTanstackColumns(columns) {
         const result = {
             ...otherProps,
             ...sizeProps,
+            // Default sorting to false, so it is very explicitly set per column.
+            enableSorting: !!enableSorting,
             // Open-ended store for extra metadata in TanStack Table, so you can bake
             // in your own features.
             meta: {
-                align
+                align,
+                headerDescription,
+                cellDescription
             }
         };
         return result;

package/dist/cjs/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -78,7 +78,8 @@ const TimeSeriesTooltip = /*#__PURE__*/ (0, _react.memo)(function TimeSeriesTool
                     visibility: 'visible',
                     opacity: 1,
                     transition: 'all 0.1s ease-out',
-                    zIndex: theme.zIndex.tooltip,
+                    // Ensure pinned tooltip shows behind edit panel drawer and sticky header
+                    zIndex: pinnedPos !== null ? 'auto' : theme.zIndex.tooltip,
                     overflow: 'hidden',
                     '&:hover': {
                         overflowY: 'auto'

package/dist/cjs/TimeSeriesTooltip/nearby-series.js

@@ -29,6 +29,7 @@ _export(exports, {
     isWithinPercentageRange: ()=>isWithinPercentageRange,
     getYBuffer: ()=>getYBuffer
 });
+const _core = require("@perses-dev/core");
 const _model = require("../model");
 const INCREASE_NEARBY_SERIES_MULTIPLIER = 5.5; // adjusts how many series show in tooltip (higher == more series shown)
 const DYNAMIC_NEARBY_SERIES_MULTIPLIER = 30; // used for adjustment after series number divisor
@@ -84,7 +85,7 @@ function checkforNearbySeries(data, pointInGrid, yBuffer, chart, unit) {
                                 }
                                 // determine whether to convert timestamp to ms, see: https://stackoverflow.com/a/23982005/17575201
                                 const xValueMilliSeconds = xValue > 99999999999 ? xValue : xValue * 1000;
-                                const formattedY = (0, _model.formatValue)(yValue, unit);
+                                const formattedY = (0, _core.formatValue)(yValue, unit);
                                 currentNearbySeriesData.push({
                                     seriesIdx: seriesIdx,
                                     datumIdx: datumIdx,
@@ -174,16 +175,6 @@ function getNearbySeriesData({ mousePos , pinnedPos , chartData , chart , unit ,
             return checkforNearbySeries(chartData, pointInGrid, yBuffer, chart, unit);
         }
     }
-    // clear all highlighted series when cursor exits canvas
-    // https://echarts.apache.org/en/api.html#action.downplay
-    for(let i = 0; i < totalSeries; i++){
-        if ((chart === null || chart === void 0 ? void 0 : chart.dispatchAction) !== undefined) {
-            chart.dispatchAction({
-                type: 'downplay',
-                seriesIndex: i
-            });
-        }
-    }
     return [];
 }
 function isWithinPercentageRange({ valueToCheck , baseValue , percentage  }) {

package/dist/cjs/UnitSelector/UnitSelector.js

@@ -20,10 +20,10 @@ Object.defineProperty(exports, "UnitSelector", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _material = require("@mui/material");
-const _model = require("../model");
-const _utils = require("../model/units/utils");
+const _core = require("@perses-dev/core");
 const _optionsEditorLayout = require("../OptionsEditorLayout");
-const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
+const _settingsAutocomplete = require("../SettingsAutocomplete");
+const KIND_OPTIONS = Object.entries(_core.UNIT_CONFIG).map(([id, config])=>{
     return {
         id: id,
         ...config
@@ -31,26 +31,32 @@ const KIND_OPTIONS = Object.entries(_model.UNIT_CONFIG).map(([id, config])=>{
 }).filter((config)=>!config.disableSelectorOption);
 const DECIMAL_PLACES_OPTIONS = [
     {
+        id: 'default',
         label: 'Default',
         decimal_places: undefined
     },
     {
+        id: '0',
         label: '0',
         decimal_places: 0
     },
     {
+        id: '1',
         label: '1',
         decimal_places: 1
     },
     {
+        id: '2',
         label: '2',
         decimal_places: 2
     },
     {
+        id: '3',
         label: '3',
         decimal_places: 3
     },
     {
+        id: '4',
         label: '4',
         decimal_places: 4
     }
@@ -59,8 +65,8 @@ function getOptionByDecimalPlaces(decimal_places) {
     return DECIMAL_PLACES_OPTIONS.find((o)=>o.decimal_places === decimal_places);
 }
 function UnitSelector({ value , onChange  }) {
-    const hasDecimalPlaces = (0, _model.isUnitWithDecimalPlaces)(value);
-    const hasAbbreviate = (0, _model.isUnitWithAbbreviate)(value);
+    const hasDecimalPlaces = (0, _core.isUnitWithDecimalPlaces)(value);
+    const hasAbbreviate = (0, _core.isUnitWithAbbreviate)(value);
     const handleKindChange = (_, newValue)=>{
         onChange({
             kind: newValue.id
@@ -82,55 +88,36 @@ function UnitSelector({ value , onChange  }) {
             });
         }
     };
-    const kindConfig = _model.UNIT_CONFIG[value.kind];
+    const kindConfig = _core.UNIT_CONFIG[value.kind];
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Abbreviate",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
-                    checked: hasAbbreviate ? (0, _utils.shouldAbbreviate)(value.abbreviate) : false,
+                    checked: hasAbbreviate ? (0, _core.shouldAbbreviate)(value.abbreviate) : false,
                     onChange: handleAbbreviateChange,
                     disabled: !hasAbbreviate
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Unit",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
                     value: {
                         id: value.kind,
                         ...kindConfig
                     },
                     options: KIND_OPTIONS,
-                    isOptionEqualToValue: (option, value)=>option.id === value.id,
                     groupBy: (option)=>option.group,
-                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            ...params
-                        }),
-                    renderOption: (renderOptsProps, option)=>{
-                        // Custom option needed to get some increased left padding to make
-                        // the items more distinct from the group label.
-                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("li", {
-                            ...renderOptsProps,
-                            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                                paddingLeft: (theme)=>theme.spacing(1),
-                                children: option.label
-                            })
-                        });
-                    },
                     onChange: handleKindChange,
                     disableClearable: true
                 })
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
                 label: "Decimals",
-                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_settingsAutocomplete.SettingsAutocomplete, {
                     value: getOptionByDecimalPlaces(value.decimal_places),
                     options: DECIMAL_PLACES_OPTIONS,
                     getOptionLabel: (o)=>o.label,
-                    isOptionEqualToValue: (option, value)=>option.label === value.label,
-                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
-                            ...params
-                        }),
                     onChange: handleDecimalPlacesChange,
                     disabled: !hasDecimalPlaces,
                     disableClearable: true

package/dist/cjs/YAxisLabel.js

@@ -26,7 +26,7 @@ function YAxisLabel({ name , height  }) {
             display: 'inline-block',
             maxWidth: height,
             position: 'absolute',
-            top: '45%',
+            top: `calc(${height}px / 2)`,
             transform: 'translateX(-50%) rotate(-90deg)',
             transformOrigin: 'top',
             textAlign: 'center',

package/dist/cjs/index.js

@@ -28,6 +28,7 @@ _exportStar(require("./JSONEditor"), exports);
 _exportStar(require("./Legend"), exports);
 _exportStar(require("./LineChart"), exports);
 _exportStar(require("./OptionsEditorLayout"), exports);
+_exportStar(require("./SettingsAutocomplete"), exports);
 _exportStar(require("./StatChart"), exports);
 _exportStar(require("./Table"), exports);
 _exportStar(require("./ThresholdsEditor"), exports);
@@ -41,6 +42,7 @@ _exportStar(require("./utils"), exports);
 _exportStar(require("./model"), exports);
 _exportStar(require("./test-utils"), exports);
 _exportStar(require("./theme"), exports);
+_exportStar(require("./RefreshIntervalPicker"), 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

@@ -16,7 +16,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 _exportStar(require("./graph"), exports);
 _exportStar(require("./theme"), exports);
-_exportStar(require("./units"), exports);
+_exportStar(require("./timeOption"), 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/{units/constants.js → timeOption.js}

@@ -10,14 +10,7 @@
 // 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.
-// Common constants needed across individual unit groups and the overall
-// combined units.
 "use strict";
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-Object.defineProperty(exports, "MAX_SIGNIFICANT_DIGITS", {
-    enumerable: true,
-    get: ()=>MAX_SIGNIFICANT_DIGITS
-});
-const MAX_SIGNIFICANT_DIGITS = 3;

package/dist/index.d.ts

@@ -12,6 +12,7 @@ export * from './JSONEditor';
 export * from './Legend';
 export * from './LineChart';
 export * from './OptionsEditorLayout';
+export * from './SettingsAutocomplete';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';
@@ -25,4 +26,5 @@ export * from './utils';
 export * from './model';
 export * from './test-utils';
 export * from './theme';
+export * from './RefreshIntervalPicker';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAaA,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}

package/dist/index.js

@@ -24,6 +24,7 @@ export * from './JSONEditor';
 export * from './Legend';
 export * from './LineChart';
 export * from './OptionsEditorLayout';
+export * from './SettingsAutocomplete';
 export * from './StatChart';
 export * from './Table';
 export * from './ThresholdsEditor';
@@ -37,5 +38,6 @@ export * from './utils';
 export * from './model';
 export * from './test-utils';
 export * from './theme';
+export * from './RefreshIntervalPicker';
 
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.ts"],"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\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './context/SnackbarProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\n"],"names":[],"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,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC"}
+{"version":3,"sources":["../src/index.ts"],"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\nexport * from './ColorPicker';\nexport * from './ContentWithLegend';\nexport * from './DateTimeRangePicker';\nexport * from './Dialog';\nexport * from './Drawer';\nexport * from './EChart';\nexport * from './ErrorAlert';\nexport * from './ErrorBoundary';\nexport * from './GaugeChart';\nexport * from './InfoTooltip';\nexport * from './JSONEditor';\nexport * from './Legend';\nexport * from './LineChart';\nexport * from './OptionsEditorLayout';\nexport * from './SettingsAutocomplete';\nexport * from './StatChart';\nexport * from './Table';\nexport * from './ThresholdsEditor';\nexport * from './TimeSeriesTooltip';\nexport * from './UnitSelector';\nexport * from './YAxisLabel';\nexport * from './context/ChartsThemeProvider';\nexport * from './context/TimeZoneProvider';\nexport * from './context/SnackbarProvider';\nexport * from './utils';\nexport * from './model';\nexport * from './test-utils';\nexport * from './theme';\nexport * from './RefreshIntervalPicker';\n"],"names":[],"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,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,aAAa,CAAC;AAC5B,cAAc,uBAAuB,CAAC;AACtC,cAAc,wBAAwB,CAAC;AACvC,cAAc,aAAa,CAAC;AAC5B,cAAc,SAAS,CAAC;AACxB,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,+BAA+B,CAAC;AAC9C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,yBAAyB,CAAC"}

package/dist/model/index.d.ts

@@ -1,4 +1,4 @@
 export * from './graph';
 export * from './theme';
-export * from './units';
+export * from './timeOption';
 //# sourceMappingURL=index.d.ts.map

package/dist/model/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/model/index.ts"],"names":[],"mappings":"AAaA,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,cAAc,CAAC"}

package/dist/model/index.js

@@ -12,6 +12,6 @@
 // limitations under the License.
 export * from './graph';
 export * from './theme';
-export * from './units';
+export * from './timeOption';
 
 //# sourceMappingURL=index.js.map