@perses-dev/components 0.0.0-snapshot-tooltip-highlight-c995fc8 → 0.0.0-snapshot-saving-defaults-refinements-1b25cec

package/dist/cjs/Legend/ListLegend.js

@@ -19,119 +19,33 @@ Object.defineProperty(exports, "ListLegend", {
     get: ()=>ListLegend
 });
 const _jsxRuntime = require("react/jsx-runtime");
-const _material = require("@mui/material");
-const _reactWindow = require("react-window");
-const _react = require("react");
+const _reactVirtuoso = require("react-virtuoso");
+const _model = require("../model");
 const _listLegendItem = require("./ListLegendItem");
-const DEFAULT_INITIAL_ROW_HEIGHT = 26;
-function ListLegend({ items , height , width , initialRowHeight =DEFAULT_INITIAL_ROW_HEIGHT  }) {
-    // Storing a ref to the react-window `VariableSizeList`, so we can call
-    // `resetAfterIndex` to resize the list after mouseover/out events to account
-    // for the change in list items on hover.
-    const listRef = (0, _react.useRef)(null);
-    // Storing row heights, so we can use dynamic heights, which enables the
-    // user the hover to show the full label, while still having a virtualized
-    // list.
-    const rowHeights = (0, _react.useRef)({});
-    const theme = (0, _material.useTheme)();
-    // Padding value used throughout to adjust the react-window virtual layouts
-    // to simulate padding per the guidance from:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-    const LIST_PADDING = parseInt(theme.spacing(1), 10);
+function ListLegend({ items , height , width , selectedItems , onLegendItemClick  }) {
     // show full labels on hover when there are many total series
     const truncateLabels = items.length > 5;
-    // Gets the row height for a given item to enable the virtualized list to
-    // render the row properly.
-    function getRowHeight(index) {
-        const currentHeight = rowHeights.current[index];
-        return currentHeight !== null && currentHeight !== void 0 ? currentHeight : initialRowHeight;
-    }
-    // Set the height for a given item to enable the virtualized list to
-    // adjust to size changes.
-    function setRowHeight(index, size) {
-        var // Tell the virtualized list that items changed size and need to be
-        // re-evaluated.
-        ref;
-        (ref = listRef.current) === null || ref === void 0 ? void 0 : ref.resetAfterIndex(0);
-        rowHeights.current = {
-            ...rowHeights.current,
-            [index]: size
-        };
-    }
-    // Renderer for virtualized rows in `VariableSizeList`.
-    function ListLegendRow({ index , style  }) {
-        // Storing a ref to the row's `ListLegendItem`, so we can get the "real"
-        // height and adjust the height of the row based on it, enabling the dynamic
-        // heights on hover.
-        const rowRef = (0, _react.useRef)(null);
-        // useCallback is important here to avoid constantly running the useEffect
-        // that calls this in `ListLegendItem`.
-        const handleRowLayoutChange = (0, _react.useCallback)(()=>{
-            // Handle size changes from hovering on a list item.
-            if (rowRef.current) {
-                setRowHeight(index, rowRef.current.clientHeight);
-            }
-        }, [
-            index
-        ]);
-        // Adjust row heights when the row being rendered changes.
-        (0, _react.useEffect)(()=>{
-            handleRowLayoutChange();
-        }, [
-            handleRowLayoutChange
-        ]);
-        const item = items[index];
-        if (!item) {
-            // This shouldn't happen if configured correctly, but covering
-            // the case to appease the type checking and to cover any edge
-            // cases.
-            return null;
-        }
-        const originalTop = parseFloat(`${style.top}`);
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            style: {
-                ...style,
-                // Adjust the top position to simulate top padding on the list.
-                top: `${originalTop + LIST_PADDING}px`
-            },
-            children: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
-                ref: rowRef,
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactVirtuoso.Virtuoso, {
+        style: {
+            height,
+            width
+        },
+        data: items,
+        itemContent: (index, item)=>{
+            return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_listLegendItem.ListLegendItem, {
                 item: item,
                 truncateLabel: truncateLabels,
-                onLayoutChange: handleRowLayoutChange,
+                isVisuallySelected: (0, _model.isLegendItemVisuallySelected)(item, selectedItems),
+                onClick: onLegendItemClick,
                 sx: {
                     // Having an explicit width is important for the ellipsizing to
                     // work correctly. Subtract padding to simulate padding.
-                    width: width - LIST_PADDING,
+                    width: width,
                     wordBreak: 'break-word',
                     overflow: 'hidden'
                 }
-            }, item.id)
-        });
-    }
-    // Renderer for the inner container element of the `VariableSizeList` used
-    // to adjust styles to simulate padding on the list per:
-    // https://github.com/bvaughn/react-window#can-i-add-padding-to-the-top-and-bottom-of-a-list
-    const InnerElementType = /*#__PURE__*/ (0, _react.forwardRef)(function InnerElementType({ style , ...rest }, ref) {
-        const originalHeight = (style === null || style === void 0 ? void 0 : style.height) ? parseFloat(`${style === null || style === void 0 ? void 0 : style.height}`) : 0;
-        return /*#__PURE__*/ (0, _jsxRuntime.jsx)("div", {
-            ref: ref,
-            role: "list",
-            style: {
-                ...style,
-                // Adjust height to account for simulated padding.
-                height: `${originalHeight + LIST_PADDING * 2}px`
-            },
-            ...rest
-        });
-    });
-    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_reactWindow.VariableSizeList, {
-        height: height,
-        width: width,
-        itemCount: items.length,
-        itemSize: getRowHeight,
-        innerElementType: InnerElementType,
-        ref: listRef,
-        children: ListLegendRow
+            }, item.id);
+        },
+        role: "list"
     });
 }

package/dist/cjs/Legend/ListLegendItem.js

@@ -62,7 +62,7 @@ function _interopRequireWildcard(obj, nodeInterop) {
     }
     return newObj;
 }
-const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onLayoutChange , ...others }, ref) {
+const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLegendItem({ item , sx , truncateLabel , onClick , isVisuallySelected , ...others }, ref) {
     const [noWrap, setNoWrap] = (0, _react.useState)(truncateLabel);
     function handleMouseOver() {
         if (truncateLabel) {
@@ -74,14 +74,11 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
             setNoWrap(true);
         }
     }
-    (0, _react.useEffect)(()=>{
-        // When `noWrap` changes, so does the layout of the component. Notifies the
-        // parent, so it can handle those changes.
-        onLayoutChange === null || onLayoutChange === void 0 ? void 0 : onLayoutChange();
-    }, [
-        noWrap,
-        onLayoutChange
-    ]);
+    const handleClick = (e)=>{
+        var ref;
+        onClick(e, item.id);
+        (ref = item.onClick) === null || ref === void 0 ? void 0 : ref.call(item, e);
+    };
     return /*#__PURE__*/ (0, _react.createElement)(_material.ListItem, {
         ...others,
         component: "div",
@@ -92,8 +89,8 @@ const ListLegendItemBase = /*#__PURE__*/ (0, _react.forwardRef)(function ListLeg
         }, sx),
         dense: true,
         key: item.id,
-        onClick: item.onClick,
-        selected: item.isSelected,
+        onClick: handleClick,
+        selected: isVisuallySelected,
         ref: ref,
         children: [
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Box, {

package/dist/cjs/Legend/TableLegend.js

@@ -0,0 +1,67 @@
+// 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, "TableLegend", {
+    enumerable: true,
+    get: ()=>TableLegend
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _react = require("react");
+const _table = require("../Table");
+const COLUMNS = [
+    {
+        accessorKey: 'label',
+        header: 'Name',
+        // Starting with `title` attr instead of a tooltip because it is easier to
+        // implement. We should try adding a tooltip in the future, but we'll need
+        // to be very careful about performance when doing so with large tables.
+        cell: ({ getValue  })=>/*#__PURE__*/ (0, _jsxRuntime.jsx)("span", {
+                title: getValue(),
+                children: getValue()
+            })
+    }
+];
+const getRowId = (data)=>{
+    return data.id;
+};
+const getCheckboxColor = (data)=>{
+    return data.color;
+};
+function TableLegend({ items , selectedItems: initRowSelection , onSelectedItemsChange , height , width  }) {
+    const rowSelection = (0, _react.useMemo)(()=>{
+        return typeof initRowSelection !== 'string' ? initRowSelection : // items for checkboxes.
+        // TODO: clean this up if we switch to also using checkboxes in list legend.
+        items.reduce((allRowSelection, item, index)=>{
+            allRowSelection[getRowId(item, index)] = true;
+            return allRowSelection;
+        }, {});
+    }, [
+        initRowSelection,
+        items
+    ]);
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(_table.Table, {
+        height: height,
+        width: width,
+        rowSelection: rowSelection,
+        onRowSelectionChange: onSelectedItemsChange,
+        data: items,
+        columns: COLUMNS,
+        density: "compact",
+        getRowId: getRowId,
+        getCheckboxColor: getCheckboxColor,
+        checkboxSelection: true
+    });
+}

package/dist/cjs/LegendOptionsEditor/LegendOptionsEditor.js

@@ -29,6 +29,12 @@ const POSITION_OPTIONS = Object.entries(_model.LEGEND_POSITIONS_CONFIG).map(([id
         ...config
     };
 });
+const MODE_OPTIONS = Object.entries(_model.LEGEND_MODE_CONFIG).map(([id, config])=>{
+    return {
+        id: id,
+        ...config
+    };
+});
 function LegendOptionsEditor({ value , onChange  }) {
     const handleLegendShowChange = (_, checked)=>{
         // legend is hidden when legend obj is undefined
@@ -43,9 +49,18 @@ function LegendOptionsEditor({ value , onChange  }) {
             position: newValue.id
         });
     };
+    const handleLegendModeChange = (_, newValue)=>{
+        onChange({
+            ...value,
+            position: currentPosition,
+            mode: newValue.id
+        });
+    };
     const isValidLegend = (0, _model.validateLegendSpec)(value);
     const currentPosition = (0, _model.getLegendPosition)(value === null || value === void 0 ? void 0 : value.position);
-    const legendConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
+    const legendPositionConfig = _model.LEGEND_POSITIONS_CONFIG[currentPosition];
+    const currentMode = (0, _model.getLegendMode)(value === null || value === void 0 ? void 0 : value.mode);
+    const legendModeConfig = _model.LEGEND_MODE_CONFIG[currentMode];
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
         children: [
             !isValidLegend && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_errorAlert.ErrorAlert, {
@@ -65,7 +80,7 @@ function LegendOptionsEditor({ value , onChange  }) {
                 label: "Position",
                 control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
                     value: {
-                        ...legendConfig,
+                        ...legendPositionConfig,
                         id: currentPosition
                     },
                     options: POSITION_OPTIONS,
@@ -77,6 +92,23 @@ function LegendOptionsEditor({ value , onChange  }) {
                     disabled: value === undefined,
                     disableClearable: true
                 })
+            }),
+            /*#__PURE__*/ (0, _jsxRuntime.jsx)(_optionsEditorLayout.OptionsEditorControl, {
+                label: "Mode",
+                control: /*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.Autocomplete, {
+                    value: {
+                        ...legendModeConfig,
+                        id: currentMode
+                    },
+                    options: MODE_OPTIONS,
+                    isOptionEqualToValue: (option, value)=>option.id === value.id,
+                    renderInput: (params)=>/*#__PURE__*/ (0, _jsxRuntime.jsx)(_material.TextField, {
+                            ...params
+                        }),
+                    onChange: handleLegendModeChange,
+                    disabled: value === undefined,
+                    disableClearable: true
+                })
             })
         ]
     });

package/dist/cjs/LineChart/LineChart.js

@@ -26,7 +26,6 @@ const _charts = require("echarts/charts");
 const _components = require("echarts/components");
 const _renderers = require("echarts/renderers");
 const _echart = require("../EChart");
-const _graph = require("../model/graph");
 const _chartsThemeProvider = require("../context/ChartsThemeProvider");
 const _timeSeriesTooltip = require("../TimeSeriesTooltip");
 const _timeZoneProvider = require("../context/TimeZoneProvider");
@@ -85,20 +84,22 @@ function _interopRequireWildcard(obj, nodeInterop) {
 ]);
 function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfig ={
     wrapLabels: true
-} , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
+} , noDataVariant ='message' , onDataZoom , onDoubleClick , __experimentalEChartsOptionsOverride  }) {
     var ref;
     const chartsTheme = (0, _chartsThemeProvider.useChartsTheme)();
     const chartRef = (0, _react.useRef)();
     const [showTooltip, setShowTooltip] = (0, _react.useState)(true);
-    const [pinTooltip, setPinTooltip] = (0, _react.useState)(false);
+    const [tooltipPinnedCoords, setTooltipPinnedCoords] = (0, _react.useState)(null);
     const { timeZone  } = (0, _timeZoneProvider.useTimeZone)();
+    const [isDragging, setIsDragging] = (0, _react.useState)(false);
+    const [startX, setStartX] = (0, _react.useState)(0);
     const handleEvents = (0, _react.useMemo)(()=>{
         return {
             datazoom: (params)=>{
                 if (onDataZoom === undefined) {
                     setTimeout(()=>{
                         // workaround so unpin happens after click event
-                        setPinTooltip(false);
+                        setTooltipPinnedCoords(null);
                     }, 10);
                 }
                 if (onDataZoom === undefined || params.batch[0] === undefined) return;
@@ -122,28 +123,17 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
     }, [
         data,
         onDataZoom,
-        setPinTooltip
+        setTooltipPinnedCoords
     ]);
     if (chartRef.current !== undefined) {
         (0, _utils.enableDataZoom)(chartRef.current);
     }
-    const handleOnDoubleClick = (e)=>{
-        setPinTooltip(false);
-        // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
-        if (onDoubleClick === undefined) {
-            if (chartRef.current !== undefined) {
-                (0, _utils.restoreChart)(chartRef.current);
-            }
-        } else {
-            onDoubleClick(e);
-        }
-    };
     const { noDataOption  } = chartsTheme;
     const option = (0, _react.useMemo)(()=>{
         if (data.timeSeries === undefined) return {};
-        if (data.timeSeries === null || data.timeSeries.length === 0) return noDataOption;
-        // show symbols and axisPointer dashed line on hover
-        const isOptimizedMode = data.timeSeries.length > _graph.OPTIMIZED_MODE_SERIES_LIMIT;
+        // The "chart" `noDataVariant` is only used when the `timeSeries` is an
+        // empty array because a `null` value will throw an error.
+        if (data.timeSeries === null || data.timeSeries.length === 0 && noDataVariant === 'message') return noDataOption;
         var _rangeMs;
         const rangeMs = (_rangeMs = data.rangeMs) !== null && _rangeMs !== void 0 ? _rangeMs : (0, _utils.getDateRange)(data.xAxis);
         const option = {
@@ -161,13 +151,13 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
             yAxis: (0, _utils.getYAxes)(yAxis, unit),
             animation: false,
             tooltip: {
-                show: !isOptimizedMode,
+                show: true,
                 trigger: 'axis',
                 showContent: false
             },
             // https://echarts.apache.org/en/option.html#axisPointer
             axisPointer: {
-                type: isOptimizedMode ? 'none' : 'line',
+                type: 'line',
                 z: 0,
                 triggerEmphasis: false,
                 triggerTooltip: false,
@@ -196,27 +186,67 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
         legend,
         noDataOption,
         timeZone,
-        __experimentalEChartsOptionsOverride
+        __experimentalEChartsOptionsOverride,
+        noDataVariant
     ]);
     return /*#__PURE__*/ (0, _jsxRuntime.jsxs)(_material.Box, {
         sx: {
             height
         },
-        onClick: ()=>{
-            setPinTooltip((current)=>!current);
+        onClick: (e)=>{
+            // Pin and unpin when clicking on chart canvas but not tooltip text.
+            if (e.target instanceof HTMLCanvasElement) {
+                setTooltipPinnedCoords((current)=>{
+                    if (current === null) {
+                        return {
+                            page: {
+                                x: e.pageX,
+                                y: e.pageY
+                            },
+                            client: {
+                                x: e.clientX,
+                                y: e.clientY
+                            },
+                            plotCanvas: {
+                                x: e.nativeEvent.offsetX,
+                                y: e.nativeEvent.offsetY
+                            },
+                            target: e.target
+                        };
+                    } else {
+                        return null;
+                    }
+                });
+            }
         },
         onMouseDown: (e)=>{
-            // hide tooltip when user drags to zoom, but allow clicking inside tooltip to copy labels
-            if (e.target instanceof HTMLCanvasElement) {
-                setShowTooltip(false);
+            const { clientX  } = e;
+            setIsDragging(true);
+            setStartX(clientX);
+        },
+        onMouseMove: (e)=>{
+            // Allow clicking inside tooltip to copy labels.
+            if (!(e.target instanceof HTMLCanvasElement)) {
+                return;
+            }
+            const { clientX  } = e;
+            if (isDragging) {
+                const deltaX = clientX - startX;
+                if (deltaX > 0) {
+                    // Hide tooltip when user drags to zoom.
+                    setShowTooltip(false);
+                }
             }
         },
         onMouseUp: ()=>{
+            setIsDragging(false);
+            setStartX(0);
             setShowTooltip(true);
         },
         onMouseLeave: ()=>{
-            setShowTooltip(false);
-            setPinTooltip(false);
+            if (tooltipPinnedCoords === null) {
+                setShowTooltip(false);
+            }
         },
         onMouseEnter: ()=>{
             setShowTooltip(true);
@@ -224,16 +254,33 @@ function LineChart({ height , data , yAxis , unit , grid , legend , tooltipConfi
                 (0, _utils.enableDataZoom)(chartRef.current);
             }
         },
-        onDoubleClick: handleOnDoubleClick,
+        onDoubleClick: (e)=>{
+            setTooltipPinnedCoords(null);
+            // either dispatch ECharts restore action to return to orig state or allow consumer to define behavior
+            if (onDoubleClick === undefined) {
+                if (chartRef.current !== undefined) {
+                    (0, _utils.restoreChart)(chartRef.current);
+                }
+            } else {
+                onDoubleClick(e);
+            }
+        },
         children: [
             showTooltip === true && ((ref = option.tooltip) === null || ref === void 0 ? void 0 : ref.showContent) === false && tooltipConfig.hidden !== true && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_timeSeriesTooltip.TimeSeriesTooltip, {
                 chartRef: chartRef,
                 chartData: data,
                 wrapLabels: tooltipConfig.wrapLabels,
-                pinTooltip: pinTooltip,
-                unit: unit
+                pinnedPos: tooltipPinnedCoords,
+                unit: unit,
+                onUnpinClick: ()=>{
+                    setTooltipPinnedCoords(null);
+                }
             }),
             /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 onEvents: handleEvents,

package/dist/cjs/StatChart/StatChart.js

@@ -80,7 +80,14 @@ function StatChart(props) {
             },
             yAxis: {
                 type: 'value',
-                show: false
+                show: false,
+                min: (value)=>{
+                    if (value.min >= 0 && value.min <= 1) {
+                        // helps with PercentDecimal units, or datasets that return 0 or 1 booleans
+                        return 0;
+                    }
+                    return value.min;
+                }
             },
             tooltip: {
                 show: false
@@ -117,11 +124,15 @@ function StatChart(props) {
                 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: `${containerPadding} ${containerPadding} 0 ${containerPadding}`
+                        padding: sparkline ? `${containerPadding} ${containerPadding} 0 ${containerPadding}` : ` 0 ${containerPadding}`
                     }),
                 children: formattedValue
             }),
             sparkline !== undefined && /*#__PURE__*/ (0, _jsxRuntime.jsx)(_echart.EChart, {
+                sx: {
+                    width: '100%',
+                    height: '100%'
+                },
                 option: option,
                 theme: chartsTheme.echartsTheme,
                 renderer: "svg"

package/dist/cjs/Table/InnerTable.js

@@ -0,0 +1,44 @@
+// 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, "InnerTable", {
+    enumerable: true,
+    get: ()=>InnerTable
+});
+const _jsxRuntime = require("react/jsx-runtime");
+const _material = require("@mui/material");
+const _react = require("react");
+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
+    }));
+const TABLE_DENSITY_CONFIG = {
+    compact: 'small',
+    standard: 'medium'
+};
+const InnerTable = /*#__PURE__*/ (0, _react.forwardRef)(function InnerTable({ density , width , ...otherProps }, ref) {
+    return /*#__PURE__*/ (0, _jsxRuntime.jsx)(StyledMuiTable, {
+        ...otherProps,
+        tabIndex: -1,
+        size: TABLE_DENSITY_CONFIG[density],
+        ref: ref,
+        sx: {
+            width: width
+        }
+    });
+});