@perses-dev/components 0.30.0 → 0.31.0

package/dist/cjs/Table/hooks/useVirtualizedTableKeyboardNav.js

@@ -0,0 +1,93 @@
+// 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, "useVirtualizedTableKeyboardNav", {
+    enumerable: true,
+    get: ()=>useVirtualizedTableKeyboardNav
+});
+const _useTableKeyboardNav = require("./useTableKeyboardNav");
+function useVirtualizedTableKeyboardNav({ visibleRange , virtualTable , maxRows , maxColumns  }) {
+    const baseKeyboard = (0, _useTableKeyboardNav.useTableKeyboardNav)({
+        maxRows,
+        maxColumns,
+        onActiveCellChange: (e, currentPosition, defaultNewPosition)=>{
+            const key = e.key;
+            const defaultValueChanged = defaultNewPosition && (currentPosition.column !== defaultNewPosition.column || currentPosition.row !== defaultNewPosition.row);
+            var ref;
+            const nextRow = (ref = defaultNewPosition === null || defaultNewPosition === void 0 ? void 0 : defaultNewPosition.row) !== null && ref !== void 0 ? ref : currentPosition.row;
+            if (key === 'ArrowDown' && defaultValueChanged) {
+                // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
+                    var ref1;
+                    (ref1 = virtualTable.current) === null || ref1 === void 0 ? void 0 : ref1.scrollToIndex({
+                        index: nextRow - 1,
+                        align: 'end'
+                    });
+                }
+            } else if (key === 'ArrowUp' && defaultValueChanged) {
+                // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                if (nextRow - 1 < visibleRange.current.startIndex || nextRow - 1 > visibleRange.current.endIndex) {
+                    var ref2;
+                    (ref2 = virtualTable.current) === null || ref2 === void 0 ? void 0 : ref2.scrollToIndex({
+                        index: nextRow - 1,
+                        align: 'start'
+                    });
+                }
+            } else if (defaultValueChanged && (key === 'Home' || key === 'End')) {
+                var // Use default cell position. Shift the virtual table scroll position
+                // when needed to make the active cell visible.
+                ref3;
+                (ref3 = virtualTable.current) === null || ref3 === void 0 ? void 0 : ref3.scrollToIndex({
+                    index: Math.max(nextRow - 1, 0),
+                    align: 'start'
+                });
+            } else if (key === 'PageDown') {
+                var ref4;
+                // Full handling of logic for `PageDown` because there is no default.
+                e.preventDefault();
+                let nextRow1 = currentPosition.row;
+                // Add 1 to account for header
+                nextRow1 = Math.min(maxRows - 1, visibleRange.current.endIndex + 1);
+                (ref4 = virtualTable.current) === null || ref4 === void 0 ? void 0 : ref4.scrollToIndex({
+                    index: nextRow1 - 1,
+                    align: 'start'
+                });
+                return {
+                    row: nextRow1,
+                    column: currentPosition.column
+                };
+            } else if (key === 'PageUp') {
+                var ref5;
+                // Full handling of logic for `PageUp` because there is no default.
+                let nextRow2 = currentPosition.row;
+                // Minus 1 to account for header
+                nextRow2 = Math.max(0, visibleRange.current.startIndex - 1);
+                (ref5 = virtualTable.current) === null || ref5 === void 0 ? void 0 : ref5.scrollToIndex({
+                    index: nextRow2 - 1,
+                    align: 'end'
+                });
+                return {
+                    row: nextRow2,
+                    column: currentPosition.column
+                };
+            }
+            return defaultNewPosition;
+        }
+    });
+    return baseKeyboard;
+}

package/dist/cjs/Table/index.js

@@ -0,0 +1,33 @@
+// 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, "getTableCellLayout", {
+    enumerable: true,
+    get: ()=>_tableModel.getTableCellLayout
+});
+_exportStar(require("./Table"), exports);
+const _tableModel = require("./model/table-model");
+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/Table/model/table-model.js

@@ -0,0 +1,80 @@
+// Copyright 2023 The Perses Authors
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+function _export(target, all) {
+    for(var name in all)Object.defineProperty(target, name, {
+        enumerable: true,
+        get: all[name]
+    });
+}
+_export(exports, {
+    getTableCellLayout: ()=>getTableCellLayout,
+    persesColumnsToTanstackColumns: ()=>persesColumnsToTanstackColumns
+});
+function calculateTableCellHeight(lineHeight, paddingY) {
+    // Doing a bunch of math to enforce height to avoid weirdness with mismatched
+    // heights based on customization of cell contents.
+    const lineHeightNum = typeof lineHeight === 'string' ? parseInt(lineHeight, 10) : lineHeight !== null && lineHeight !== void 0 ? lineHeight : 0;
+    const verticalPaddingNum = typeof paddingY === 'string' ? parseInt(paddingY, 10) : paddingY;
+    return lineHeightNum + verticalPaddingNum * 2;
+}
+function getTableCellLayout(theme, density) {
+    if (density === 'compact') {
+        const paddingY = theme.spacing(0.5);
+        const paddingX = theme.spacing(0.25);
+        const lineHeight = theme.typography.body2.lineHeight;
+        return {
+            padding: `${paddingY} ${paddingX}`,
+            height: calculateTableCellHeight(lineHeight, paddingY),
+            fontSize: theme.typography.body2.fontSize,
+            lineHeight: lineHeight
+        };
+    }
+    // standard density
+    const paddingY1 = theme.spacing(1);
+    const paddingX1 = theme.spacing(1.25);
+    const lineHeight1 = theme.typography.body1.lineHeight;
+    return {
+        padding: `${paddingY1} ${paddingX1}`,
+        height: calculateTableCellHeight(lineHeight1, paddingY1),
+        fontSize: theme.typography.body1.fontSize,
+        lineHeight: lineHeight1
+    };
+}
+function persesColumnsToTanstackColumns(columns) {
+    const tableCols = columns.map(({ width , ...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.
+        // Taking from a recommendation in this github discussion:
+        // https://github.com/TanStack/table/discussions/4179#discussioncomment-3631326
+        const sizeProps = width === 'auto' || width === undefined ? {
+            // All zero values are used as shorthand for "auto" when rendering
+            // because it makes it easy to fall back. (e.g. `row.size || "auto"`)
+            size: 0,
+            minSize: 0,
+            maxSize: 0
+        } : {
+            size: width
+        };
+        const result = {
+            ...otherProps,
+            ...sizeProps
+        };
+        return result;
+    });
+    return tableCols;
+}

package/dist/cjs/TimeSeriesTooltip/SeriesInfo.js

@@ -24,7 +24,7 @@ const _seriesMarker = require("./SeriesMarker");
 const _seriesLabelsStack = require("./SeriesLabelsStack");
 const _tooltipModel = require("./tooltip-model");
 function SeriesInfo(props) {
-    const { seriesName , formattedY , markerColor , totalSeries , wrapLabels =true  } = props;
+    const { seriesName , formattedY , markerColor , totalSeries , emphasizeText =false , wrapLabels =true  } = props;
     // metric __name__ comes before opening curly brace, ignore if not populated
     // ex with metric name: node_load15{env="demo",job="node"}
     // ex without metric name: {env="demo",job="node"}
@@ -73,21 +73,23 @@ function SeriesInfo(props) {
                                 maxWidth: _tooltipModel.TOOLTIP_LABELS_MAX_WIDTH,
                                 overflow: 'hidden',
                                 color: theme.palette.common.white,
+                                fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular,
                                 textOverflow: 'ellipsis',
                                 whiteSpace: wrapLabels ? 'normal' : 'nowrap'
                             }),
+                        "aria-label": emphasizeText ? _tooltipModel.EMPHASIZED_SERIES_DESCRIPTION : _tooltipModel.NEARBY_SERIES_DESCRIPTION,
                         children: formattedSeriesInfo
                     })
                 ]
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                sx: {
-                    display: 'table-cell',
-                    paddingLeft: 1.5,
-                    textAlign: 'right',
-                    verticalAlign: 'top',
-                    fontWeight: '700'
-                },
+                sx: (theme)=>({
+                        display: 'table-cell',
+                        paddingLeft: 1.5,
+                        textAlign: 'right',
+                        verticalAlign: 'top',
+                        fontWeight: emphasizeText ? theme.typography.fontWeightBold : theme.typography.fontWeightRegular
+                    }),
                 children: formattedY
             })
         ]

package/dist/cjs/TimeSeriesTooltip/TimeSeriesTooltip.js

@@ -23,7 +23,7 @@ const _material = require("@mui/material");
 const _react = /*#__PURE__*/ _interopRequireWildcard(require("react"));
 const _useResizeObserver = /*#__PURE__*/ _interopRequireDefault(require("use-resize-observer"));
 const _tooltipContent = require("./TooltipContent");
-const _focusedSeries = require("./focused-series");
+const _nearbySeries = require("./nearby-series");
 const _tooltipModel = require("./tooltip-model");
 const _utils = require("./utils");
 function _interopRequireDefault(obj) {
@@ -70,30 +70,44 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , pinTooltip , unit  }) {
+const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesTooltip({ chartRef , chartData , wrapLabels , isTooltipPinned , unit , onUnpinClick  }) {
+    const [showAllSeries, setShowAllSeries] = (0, _react.useState)(false);
     const [pinnedPos, setPinnedPos] = (0, _react.useState)(null);
     const mousePos = (0, _tooltipModel.useMousePosition)();
     const { height , width , ref: tooltipRef  } = (0, _useResizeObserver.default)();
     if (mousePos === null || mousePos.target === null) return null;
-    // ensure user is hovering over a chart before checking for nearby series
+    // Ensure user is hovering over a chart before checking for nearby series.
     if (pinnedPos === null && mousePos.target.tagName !== 'CANVAS') return null;
     const chart = chartRef.current;
-    const focusedSeries = (0, _focusedSeries.getFocusedSeriesData)(mousePos, chartData, pinnedPos, chart, unit);
     var ref;
-    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : 750;
-    const cursorTransform = (0, _utils.assembleTransform)(mousePos, focusedSeries.length, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
+    const chartWidth = (ref = chart === null || chart === void 0 ? void 0 : chart.getWidth()) !== null && ref !== void 0 ? ref : _tooltipModel.FALLBACK_CHART_WIDTH; // Fallback width not likely to every be needed.
+    const cursorTransform = (0, _utils.assembleTransform)(mousePos, chartWidth, pinnedPos, height !== null && height !== void 0 ? height : 0, width !== null && width !== void 0 ? width : 0);
+    // Get series nearby the cursor and pass into tooltip content children.
+    const focusedSeries = (0, _nearbySeries.getNearbySeriesData)({
+        mousePos,
+        chartData,
+        pinnedPos,
+        chart,
+        unit,
+        showAllSeries
+    });
     if (focusedSeries.length === 0) {
         return null;
     }
-    if (pinTooltip === true && pinnedPos === null) {
+    if (isTooltipPinned === true && pinnedPos === null) {
         setPinnedPos(mousePos);
     }
+    // Option for user to see all series instead of only the nearby focused series.
+    // Only relevant when there are more total series than are visible.
+    const showAllSeriesToggle = isTooltipPinned === true && showAllSeries === false && chartData.timeSeries.length > 1 && focusedSeries.length !== chartData.timeSeries.length;
     return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Portal, {
-        children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+        children: /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
             ref: tooltipRef,
             sx: (theme)=>({
+                    minWidth: _tooltipModel.TOOLTIP_MIN_WIDTH,
                     maxWidth: _tooltipModel.TOOLTIP_MAX_WIDTH,
                     maxHeight: _tooltipModel.TOOLTIP_MAX_HEIGHT,
+                    padding: theme.spacing(0.5, 2),
                     position: 'absolute',
                     top: 0,
                     left: 0,
@@ -113,10 +127,41 @@ const TimeSeriesTooltip = /*#__PURE__*/ _react.default.memo(function TimeSeriesT
             style: {
                 transform: cursorTransform
             },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
-                focusedSeries: focusedSeries,
-                wrapLabels: wrapLabels
-            })
+            children: [
+                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_tooltipContent.TooltipContent, {
+                    series: focusedSeries,
+                    wrapLabels: wrapLabels,
+                    isTooltipPinned: isTooltipPinned,
+                    onUnpinClick: ()=>{
+                        setPinnedPos(null);
+                        if (onUnpinClick !== undefined) {
+                            onUnpinClick();
+                        }
+                    }
+                }),
+                showAllSeriesToggle && /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                    direction: "row",
+                    gap: 1,
+                    alignItems: "center",
+                    sx: {
+                        textAlign: 'right'
+                    },
+                    children: [
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
+                            children: "Show All?"
+                        }),
+                        /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Switch, {
+                            checked: showAllSeries,
+                            onChange: (_, checked)=>setShowAllSeries(checked),
+                            sx: (theme)=>({
+                                    '& .MuiSwitch-switchBase': {
+                                        color: theme.palette.common.white
+                                    }
+                                })
+                        })
+                    ]
+                })
+            ]
         })
     });
 });

package/dist/cjs/TimeSeriesTooltip/TooltipContent.js

@@ -20,18 +20,25 @@ Object.defineProperty(exports, "TooltipContent", {
 });
 const _jsxRuntime = require("react/jsx-runtime");
 const _react = require("react");
+const _pinOutline = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/PinOutline"));
+const _pin = /*#__PURE__*/ _interopRequireDefault(require("mdi-material-ui/Pin"));
 const _material = require("@mui/material");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
 const _seriesInfo = require("./SeriesInfo");
+function _interopRequireDefault(obj) {
+    return obj && obj.__esModule ? obj : {
+        default: obj
+    };
+}
 function TooltipContent(props) {
-    const { focusedSeries , wrapLabels  } = props;
+    const { series , wrapLabels , isTooltipPinned , onUnpinClick  } = props;
     const { formatWithUserTimeZone  } = (0, _timeZoneProvider.useTimeZone)();
-    const seriesTime = focusedSeries && focusedSeries[0] && focusedSeries[0].date ? focusedSeries[0].date : null;
+    const seriesTime = series && series[0] && series[0].date ? series[0].date : null;
     const formatTimeSeriesHeader = (timeMs)=>{
         const date = new Date(timeMs);
         const formattedDate = formatWithUserTimeZone(date, 'MMM dd, yyyy - ');
         const formattedTime = formatWithUserTimeZone(date, 'HH:mm:ss');
-        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
             children: [
                 /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
                     variant: "caption",
@@ -50,46 +57,81 @@ function TooltipContent(props) {
         });
     };
     const sortedFocusedSeries = (0, _react.useMemo)(()=>{
-        if (focusedSeries === null) return null;
-        return focusedSeries.sort((a, b)=>a.y > b.y ? -1 : 1);
+        if (series === null) return null;
+        return series.sort((a, b)=>a.y > b.y ? -1 : 1);
     }, [
-        focusedSeries
+        series
     ]);
-    if (sortedFocusedSeries !== null && seriesTime !== null) {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
-            py: 1,
-            px: 1.5,
-            spacing: 0.5,
-            children: [
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Typography, {
-                    variant: "caption",
-                    children: formatTimeSeriesHeader(seriesTime)
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
-                    sx: (theme)=>({
-                            borderColor: theme.palette.grey['500']
-                        })
-                }),
-                /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
-                    sx: {
-                        display: 'table'
-                    },
-                    children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor  })=>{
-                        if (datumIdx === null || seriesIdx === null) return null;
-                        const key = seriesIdx.toString() + datumIdx.toString();
-                        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesInfo.SeriesInfo, {
-                            seriesName: seriesName,
-                            y: y,
-                            formattedY: formattedY,
-                            markerColor: markerColor,
-                            totalSeries: sortedFocusedSeries.length,
-                            wrapLabels: wrapLabels
-                        }, key);
+    if (sortedFocusedSeries === null || seriesTime === null) {
+        return null;
+    }
+    // TODO: use react-virtuoso to improve performance
+    return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+        py: 1,
+        spacing: 0.5,
+        children: [
+            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
+                sx: {
+                    display: 'flex',
+                    justifyContent: 'start',
+                    alignItems: 'center'
+                },
+                children: [
+                    formatTimeSeriesHeader(seriesTime),
+                    /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Stack, {
+                        direction: "row",
+                        gap: 1,
+                        sx: {
+                            marginLeft: 'auto'
+                        },
+                        children: [
+                            /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Typography, {
+                                sx: {
+                                    fontSize: 11
+                                },
+                                children: [
+                                    "Click to ",
+                                    isTooltipPinned ? 'Unpin' : 'Pin'
+                                ]
+                            }),
+                            isTooltipPinned ? /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pin.default, {
+                                onClick: onUnpinClick,
+                                sx: {
+                                    fontSize: 16,
+                                    cursor: 'pointer'
+                                }
+                            }) : /*#__PURE__*/ (0, _jsxRuntime.jsx)(_pinOutline.default, {
+                                sx: {
+                                    fontSize: 16
+                                }
+                            })
+                        ]
+                    })
+                ]
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Divider, {
+                sx: (theme)=>({
+                        borderColor: theme.palette.grey['500']
                     })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {
+                sx: {
+                    display: 'table'
+                },
+                children: sortedFocusedSeries.map(({ datumIdx , seriesIdx , seriesName , y , formattedY , markerColor , isClosestToCursor  })=>{
+                    if (datumIdx === null || seriesIdx === null) return null;
+                    const key = seriesIdx.toString() + datumIdx.toString();
+                    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_seriesInfo.SeriesInfo, {
+                        seriesName: seriesName,
+                        y: y,
+                        formattedY: formattedY,
+                        markerColor: markerColor,
+                        totalSeries: sortedFocusedSeries.length,
+                        wrapLabels: wrapLabels,
+                        emphasizeText: isClosestToCursor
+                    }, key);
                 })
-            ]
-        });
-    } else {
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
-    }
+            })
+        ]
+    });
 }

package/dist/cjs/TimeSeriesTooltip/index.js

@@ -19,7 +19,7 @@ _exportStar(require("./SeriesInfo"), exports);
 _exportStar(require("./SeriesLabelsStack"), exports);
 _exportStar(require("./SeriesMarker"), exports);
 _exportStar(require("./TooltipContent"), exports);
-_exportStar(require("./focused-series"), exports);
+_exportStar(require("./nearby-series"), exports);
 _exportStar(require("./tooltip-model"), exports);
 _exportStar(require("./utils"), exports);
 function _exportStar(from, to) {