@perses-dev/components 0.0.0-snapshot-saving-defaults-refinements-1b25cec → 0.0.0-snapshot-time-chart-rewrite-4667058

package/dist/cjs/LineChart/LineChart.js

@@ -19,7 +19,7 @@ Object.defineProperty(exports, "LineChart", {
     get: ()=>LineChart
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
+const _react = require("react");
 const _material = require("@mui/material");
 const _core = require("echarts/core");
 const _charts = require("echarts/charts");
@@ -29,46 +29,7 @@ const _echart = require("../EChart");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
-const _utils = require("./utils");
-function _getRequireWildcardCache(nodeInterop) {
-    if (typeof WeakMap !== "function") return null;
-    var cacheBabelInterop = new WeakMap();
-    var cacheNodeInterop = new WeakMap();
-    return (_getRequireWildcardCache = function(nodeInterop) {
-        return nodeInterop ? cacheNodeInterop : cacheBabelInterop;
-    })(nodeInterop);
-}
-function _interopRequireWildcard(obj, nodeInterop) {
-    if (!nodeInterop && obj && obj.__esModule) {
-        return obj;
-    }
-    if (obj === null || typeof obj !== "object" && typeof obj !== "function") {
-        return {
-            default: obj
-        };
-    }
-    var cache = _getRequireWildcardCache(nodeInterop);
-    if (cache && cache.has(obj)) {
-        return cache.get(obj);
-    }
-    var newObj = {};
-    var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor;
-    for(var key in obj){
-        if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) {
-            var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null;
-            if (desc && (desc.get || desc.set)) {
-                Object.defineProperty(newObj, key, desc);
-            } else {
-                newObj[key] = obj[key];
-            }
-        }
-    }
-    newObj.default = obj;
-    if (cache) {
-        cache.set(obj, newObj);
-    }
-    return newObj;
-}
+const _utils = require("../utils");
 (0, _core.use)([
     _charts.LineChart,
     _components.GridComponent,
@@ -82,10 +43,10 @@ function _interopRequireWildcard(obj, nodeInterop) {
     _components.LegendComponent,
     _renderers.CanvasRenderer
 ]);
-function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
+const LineChart = /*#__PURE__*/ (0, _react.forwardRef)(function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , noDataVariant ='message' , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
-    var ref;
+} , noDataVariant ='message' , syncGroup , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride ,  }, ref) {
+    var ref1;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
@@ -93,6 +54,29 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
     const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
     const [isDragging, setIsDragging] = (0, _react.useState)(false);
     const [startX, setStartX] = (0, _react.useState)(0);
+    (0, _react.useImperativeHandle)(ref, ()=>{
+        return {
+            highlightSeries ({ id  }) {
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                chartRef.current.dispatchAction({
+                    type: 'highlight',
+                    seriesId: id
+                });
+            },
+            clearHighlightedSeries: ()=>{
+                if (!chartRef.current) {
+                    // No chart. Do nothing.
+                    return;
+                }
+                (0, _utils.clearHighlightedSeries)(chartRef.current, data.timeSeries.length);
+            }
+        };
+    }, [
+        data.timeSeries.length
+    ]);
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
             datazoom: (params)=>{
@@ -247,6 +231,9 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             if (tooltipPinnedCoords === null) {
                 setShowTooltip(false);
             }
+            if (chartRef.current !== undefined) {
+                (0, _utils.clearHighlightedSeries)(chartRef.current, data.timeSeries.length);
+            }
         },
         onMouseEnter: ()=>{
             setShowTooltip(true);
@@ -266,7 +253,7 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             }
         },
         children: [
-            showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
+            showTooltip === true && ((ref1 = option.tooltip) === null || ref1 === void 0 ? void 0 : ref1.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.LineChartTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
@@ -284,8 +271,9 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 onEvents: handleEvents,
-                _instance: chartRef
+                _instance: chartRef,
+                syncGroup: syncGroup
             })
         ]
     });
-}
+});

package/dist/cjs/OptionsEditorLayout/OptionsEditorControl.js

@@ -76,7 +76,7 @@ const OptionsEditorControl = ({ label , control , description  })=>{
                 }),
                 /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
                     sx: {
-                        width: '150px',
+                        width: '180px',
                         textAlign: 'right'
                     },
                     children: [

package/dist/cjs/RefreshIntervalPicker/RefreshIntervalPicker.js

@@ -0,0 +1,51 @@
+// 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, "RefreshIntervalPicker", {
+    enumerable: true,
+    get: ()=>RefreshIntervalPicker
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function RefreshIntervalPicker(props) {
+    const { value , onChange , timeOptions , height  } = props;
+    const formattedValue = value;
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.FormControl, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Select, {
+                id: "refreshInterval",
+                value: formattedValue,
+                onChange: (event)=>{
+                    const duration = event.target.value;
+                    onChange(duration);
+                },
+                inputProps: {
+                    'aria-label': `Select refresh interval. Currently set to ${formattedValue}`
+                },
+                sx: {
+                    '.MuiSelect-select': height ? {
+                        lineHeight: height,
+                        paddingY: 0
+                    } : {}
+                },
+                children: timeOptions.map((item, idx)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.MenuItem, {
+                        value: item.value.pastDuration,
+                        children: item.display
+                    }, idx))
+            })
+        })
+    });
+}

package/dist/cjs/{model/units → RefreshIntervalPicker}/index.js

@@ -14,9 +14,7 @@
 Object.defineProperty(exports, "__esModule", {
     value: true
 });
-_exportStar(require("./units"), exports);
-_exportStar(require("./constants"), exports);
-_exportStar(require("./types"), 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/SettingsAutocomplete/SettingsAutocomplete.js

@@ -0,0 +1,66 @@
+// 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, "SettingsAutocomplete", {
+    enumerable: true,
+    get: ()=>SettingsAutocomplete
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+function SettingsAutocomplete({ options , renderInput =(params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+        ...params
+    }) , ...otherProps }) {
+    const getOptionLabel = (option)=>{
+        var _label;
+        return (_label = option.label) !== null && _label !== void 0 ? _label : option.id;
+    };
+    // Note: this component currently is not virtualized because it is specific
+    // to being used for settings, which generally have a pretty small list of
+    // options. If this changes to include values with many options, virtualization
+    // should be added using react-virtuoso.
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+        isOptionEqualToValue: (option, value)=>option.id === value.id,
+        getOptionDisabled: (option)=>!!option.disabled,
+        getOptionLabel: getOptionLabel,
+        options: options,
+        renderInput: renderInput,
+        renderOption: (props, option)=>{
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)("li", {
+                ...props,
+                children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)("div", {
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "body1",
+                            component: "div",
+                            children: getOptionLabel(option)
+                        }),
+                        option.description && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            variant: "body2",
+                            component: "div",
+                            color: (theme)=>theme.palette.text.secondary,
+                            children: option.description
+                        })
+                    ]
+                })
+            });
+        },
+        filterOptions: (0, _material.createFilterOptions)({
+            // Include the label and the description in search.
+            stringify: (option)=>`${getOptionLabel(option)} ${option.description || ''}`
+        }),
+        ...otherProps
+    });
+}

package/dist/cjs/SettingsAutocomplete/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("./SettingsAutocomplete"), 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/StatChart/StatChart.js

@@ -20,16 +20,22 @@ Object.defineProperty(exports, "StatChart", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
+const _core = require("@perses-dev/core");
 const _material = require("@mui/material");
-const _lodashEs = require("lodash-es");
-const _core = require("echarts/core");
+const _merge = /*#__PURE__*/ _interopRequireDefault(require("lodash/merge"));
+const _core1 = require("echarts/core");
 const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
-const _units = require("../model/units");
 const _echart = require("../EChart");
-(0, _core.use)([
+const _calculateFontSize = require("./calculateFontSize");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
+(0, _core1.use)([
     _charts.LineChart,
     _components.GridComponent,
     _components.DatasetComponent,
@@ -37,12 +43,48 @@ const _echart = require("../EChart");
     _components.TooltipComponent,
     _renderers.CanvasRenderer
 ]);
-const MIN_VALUE_SIZE = 12;
-const MAX_VALUE_SIZE = 36;
+const LINE_HEIGHT = 1.2;
+const SERIES_NAME_MAX_FONT_SIZE = 30;
+const SERIES_NAME_FONT_WEIGHT = 400;
+const VALUE_FONT_WEIGHT = 700;
 function StatChart(props) {
-    const { width , height , data , unit , color , sparkline  } = props;
+    var ref, ref1;
+    const { width , height , data , unit , color , sparkline , showSeriesName  } = props;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
-    const formattedValue = data.calculatedValue === undefined ? '' : (0, _units.formatValue)(data.calculatedValue, unit);
+    let formattedValue = '';
+    if (data.calculatedValue === null) {
+        formattedValue = 'null';
+    } else if (typeof data.calculatedValue === 'number') {
+        formattedValue = (0, _core.formatValue)(data.calculatedValue, unit);
+    }
+    const containerPadding = chartsTheme.container.padding.default;
+    var ref2;
+    // calculate series name font size and height
+    let seriesNameFontSize = (0, _calculateFontSize.useOptimalFontSize)({
+        text: (ref2 = data === null || data === void 0 ? void 0 : (ref = data.seriesData) === null || ref === void 0 ? void 0 : ref.name) !== null && ref2 !== void 0 ? ref2 : '',
+        fontWeight: SERIES_NAME_FONT_WEIGHT,
+        width,
+        height: height * 0.125,
+        lineHeight: LINE_HEIGHT,
+        maxSize: SERIES_NAME_MAX_FONT_SIZE
+    });
+    const seriesNameHeight = showSeriesName ? seriesNameFontSize * LINE_HEIGHT + containerPadding : 0;
+    // calculate value font size and height
+    const availableWidth = width - containerPadding * 2;
+    const availableHeight = height - seriesNameHeight;
+    const valueFontSize = (0, _calculateFontSize.useOptimalFontSize)({
+        text: formattedValue,
+        fontWeight: VALUE_FONT_WEIGHT,
+        // without sparkline, use only 50% of the available width so it looks better for multiseries
+        width: sparkline ? availableWidth : availableWidth * 0.5,
+        // with sparkline, use only 25% of available height to leave room for chart
+        // without sparkline, value should take up 90% of available space
+        height: sparkline ? availableHeight * 0.25 : availableHeight * 0.9,
+        lineHeight: LINE_HEIGHT
+    });
+    const valueFontHeight = valueFontSize * LINE_HEIGHT;
+    // make sure the series name font size is slightly smaller than value font size
+    seriesNameFontSize = Math.min(valueFontSize * 0.7, seriesNameFontSize);
     const option = (0, _react.useMemo)(()=>{
         if (data.seriesData === undefined) return chartsTheme.noDataOption;
         const series = data.seriesData;
@@ -50,15 +92,14 @@ function StatChart(props) {
         if (sparkline !== undefined) {
             const lineSeries = {
                 type: 'line',
-                data: [
-                    ...series.values
-                ],
+                name: series.name,
+                data: series.values,
                 zlevel: 1,
                 symbol: 'none',
                 animation: false,
                 silent: true
             };
-            const mergedSeries = (0, _lodashEs.merge)(lineSeries, sparkline);
+            const mergedSeries = (0, _merge.default)(lineSeries, sparkline);
             statSeries.push(mergedSeries);
         }
         const option = {
@@ -100,11 +141,6 @@ function StatChart(props) {
         chartsTheme,
         sparkline
     ]);
-    const isLargePanel = width > 250 && height > 180;
-    // adjusts fontSize depending on number of characters, clamp also used in fontSize attribute
-    const charactersAdjust = formattedValue.length;
-    const valueSize = isLargePanel === true ? MAX_VALUE_SIZE : Math.min(width, height) / charactersAdjust;
-    const containerPadding = `${chartsTheme.container.padding.default}px`;
     const textAlignment = sparkline ? 'auto' : 'center';
     const textStyles = {
         display: 'flex',
@@ -119,19 +155,22 @@ function StatChart(props) {
             ...textStyles
         },
         children: [
-            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+            showSeriesName && /*#__PURE__*/ (0, _jsxRuntime.jsx)(SeriesName, {
+                padding: containerPadding,
+                fontSize: seriesNameFontSize,
+                children: (ref1 = data.seriesData) === null || ref1 === void 0 ? void 0 : ref1.name
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(Value, {
                 variant: "h3",
-                sx: (theme)=>({
-                        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
-                        fontSize: `clamp(${MIN_VALUE_SIZE}px, ${valueSize}px, ${MAX_VALUE_SIZE}px)`,
-                        padding: sparkline ? `${containerPadding} ${containerPadding} 0 ${containerPadding}` : ` 0 ${containerPadding}`
-                    }),
+                color: color,
+                fontSize: valueFontSize,
+                padding: containerPadding,
                 children: formattedValue
             }),
             sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
                 sx: {
                     width: '100%',
-                    height: '100%'
+                    height: height - seriesNameHeight - valueFontHeight
                 },
                 option: option,
                 theme: chartsTheme.echartsTheme,
@@ -140,3 +179,22 @@ function StatChart(props) {
         ]
     });
 }
+const SeriesName = (0, _material.styled)(_material.Typography, {
+    shouldForwardProp: (prop)=>prop !== 'padding' && prop !== 'fontSize'
+})(({ theme , padding , fontSize  })=>({
+        color: theme.palette.text.secondary,
+        padding: `${padding}px`,
+        fontSize: `${fontSize}px`,
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap'
+    }));
+const Value = (0, _material.styled)(_material.Typography, {
+    shouldForwardProp: (prop)=>prop !== 'color' && prop !== 'padding' && prop !== 'fontSize' && prop !== 'sparkline'
+})(({ theme , color , padding , fontSize , sparkline  })=>({
+        color: color !== null && color !== void 0 ? color : theme.palette.text.primary,
+        fontSize: `${fontSize}px`,
+        padding: sparkline ? `${padding}px ${padding}px 0 ${padding}px` : ` 0 ${padding}px`,
+        whiteSpace: 'nowrap',
+        lineHeight: LINE_HEIGHT
+    }));

package/dist/cjs/StatChart/calculateFontSize.js

@@ -0,0 +1,51 @@
+// 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, "useOptimalFontSize", {
+    enumerable: true,
+    get: ()=>useOptimalFontSize
+});
+const _chartsThemeProvider = require("../context/ChartsThemeProvider");
+let canvasContext;
+function getGlobalCanvasContext() {
+    if (!canvasContext) {
+        canvasContext = document.createElement('canvas').getContext('2d');
+        if (canvasContext === null) {
+            throw new Error('Canvas context is null.');
+        }
+    }
+    return canvasContext;
+}
+function useOptimalFontSize({ text , fontWeight , width , height , lineHeight , maxSize  }) {
+    const ctx = getGlobalCanvasContext();
+    const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
+    const textStyle = chartsTheme.echartsTheme.textStyle;
+    var ref;
+    const fontSize = (ref = Number(textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontSize)) !== null && ref !== void 0 ? ref : 12;
+    var ref1;
+    const fontFamily = (ref1 = textStyle === null || textStyle === void 0 ? void 0 : textStyle.fontFamily) !== null && ref1 !== void 0 ? ref1 : 'Lato';
+    // set the font on the canvas context
+    const fontStyle = `${fontWeight} ${fontSize}px ${fontFamily}`;
+    ctx.font = fontStyle;
+    // measure the width of the text with the given font style
+    const textMetrics = ctx.measureText(text);
+    // check how much bigger we can make the font while staying within the width and height
+    const fontSizeBasedOnWidth = width / textMetrics.width * fontSize;
+    const fontSizeBasedOnHeight = height / lineHeight;
+    // return the smaller font size
+    const finalFontSize = Math.min(fontSizeBasedOnHeight, fontSizeBasedOnWidth);
+    return maxSize ? Math.min(finalFontSize, maxSize) : finalFontSize;
+}

package/dist/cjs/Table/InnerTable.js

@@ -25,20 +25,20 @@ const StyledMuiTable = (0, _material.styled)(_material.Table)(({ theme  })=>({
         // This value is needed to have a consistent table layout when scrolling.
         tableLayout: 'fixed',
         borderCollapse: 'separate',
-        backgroundColor: theme.palette.background.paper
+        backgroundColor: theme.palette.background.default
     }));
 const TABLE_DENSITY_CONFIG = {
     compact: 'small',
     standard: 'medium'
 };
-const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density , width , ...otherProps }, ref) {
+const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density , ...otherProps }, ref) {
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledMuiTable, {
         ...otherProps,
         tabIndex: -1,
         size: TABLE_DENSITY_CONFIG[density],
         ref: ref,
         sx: {
-            width: width
+            width: '100%'
         }
     });
 });

package/dist/cjs/Table/Table.js

@@ -28,16 +28,53 @@ 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',
-            size: 32,
+            size: 28,
             header: ({ table  })=>{
                 return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tableCheckbox.TableCheckbox, {
                     checked: table.getIsAllRowsSelected(),
@@ -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, {