@perses-dev/table-plugin 0.13.0 → 0.14.0-beta.2

package/lib/components/TablePanel.js

@@ -1,4 +1,3 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // Copyright 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.
@@ -11,14 +10,16 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 // 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.
-import { Box, Typography, useTheme } from '@mui/material';
-import { formatValue, Table, transformData, useSelection } from '@perses-dev/components';
-import { useSelectionItemActions } from '@perses-dev/dashboards';
-import { CalculationsMap, replaceVariablesInString, useAllVariableValues } from '@perses-dev/plugin-system';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { evaluateConditionalFormatting } from '../models';
-import { buildRawTableData, getTablePanelQueryMode } from '../table-data-utils';
-import { EmbeddedPanel } from './EmbeddedPanel';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Box, Typography, useTheme } from "@mui/material";
+import { formatValue, Table, transformData, useSelection } from "@perses-dev/components";
+import { useSelectionItemActions } from "@perses-dev/dashboards";
+import { CalculationsMap, replaceVariablesInString, useAllVariableValues } from "@perses-dev/plugin-system";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { evaluateConditionalFormatting } from "../models/index.js";
+import { buildRawTableData, getTablePanelQueryMode } from "../table-data-utils.js";
+import { EmbeddedPanel } from "./EmbeddedPanel.js";
 function parseNumericCellValue(value) {
     if (typeof value === 'number' && Number.isFinite(value)) {
         return value;
@@ -194,8 +195,8 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
     const [searchTerm, setSearchTerm] = useState('');
     const values = [
         ...new Set(allValues)
-    ].filter((v)=>v !== null).sort();
-    const filteredValues = searchTerm ? values.filter((v)=>String(v).toLowerCase().includes(searchTerm.toLowerCase())) : values;
+    ].filter((v)=>v !== null).toSorted();
+    const filteredValues = searchTerm ? values.filter((v)=>String(v.formatted).toLowerCase().includes(searchTerm.toLowerCase())) : values;
     if (values.length === 0) {
         return /*#__PURE__*/ _jsx("div", {
             "data-filter-dropdown": true,
@@ -291,19 +292,17 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                     style: {
                         marginBottom: 4
                     },
-                    children: /*#__PURE__*/ _jsxs("label", {
-                        style: {
+                    children: /*#__PURE__*/ _jsxs(Box, {
+                        component: "label",
+                        sx: {
                             display: 'flex',
                             alignItems: 'center',
                             cursor: 'pointer',
                             padding: '2px 0',
-                            borderRadius: 2
-                        },
-                        onMouseEnter: (e)=>{
-                            e.currentTarget.style.backgroundColor = theme.palette.action.hover;
-                        },
-                        onMouseLeave: (e)=>{
-                            e.currentTarget.style.backgroundColor = 'transparent';
+                            borderRadius: '2px',
+                            '&:hover': {
+                                backgroundColor: theme.palette.action.hover
+                            }
                         },
                         children: [
                             /*#__PURE__*/ _jsx("input", {
@@ -340,7 +339,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
  * Generate column config from column definitions, if a column has multiple definitions, the first one will be used.
  * If column is hidden, return undefined.
  * If column do not have a definition, return a default column config.
- */ function generateColumnConfig(name, columnSettings, allVariables, gaugeRangeByColumn, globalCellSettings = []) {
+ */ function generateColumnConfig(name, columnSettings, allVariables, gaugeRangeByColumn, globalCellSettings = [], defaultEnableSorting = false) {
     for (const column of columnSettings){
         if (column.name === name) {
             if (column.hide) {
@@ -355,7 +354,7 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
                 accessorKey: name,
                 header: header ?? name,
                 headerDescription,
-                enableSorting,
+                enableSorting: enableSorting ?? defaultEnableSorting,
                 width,
                 align,
                 dataLink: modifiedDataLink,
@@ -365,7 +364,8 @@ function ColumnFilterDropdown({ allValues, selectedValues, onFilterChange, theme
     }
     return {
         accessorKey: name,
-        header: name
+        header: name,
+        enableSorting: defaultEnableSorting
     };
 }
 export function getTablePanelQueryOptions(spec) {
@@ -386,6 +386,10 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         variableState: allVariables
     });
     const filteredDataRef = useRef([]);
+    // Refs used to keep the filter row in sync with the table's horizontal
+    const panelContainerRef = useRef(null);
+    const filterRowInnerRef = useRef(null);
+    const filterCellRefs = useRef([]);
     // Convert selectionMap to TanStack's RowSelectionState format
     const rowSelection = useMemo(()=>{
         const result = {};
@@ -528,7 +532,7 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         // Process columnSettings if they exist
         for (const columnSetting of spec.columnSettings ?? []){
             if (customizedColumns.has(columnSetting.name)) continue; // Skip duplicates
-            const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? [], allVariables, gaugeRangeByColumn, spec.cellSettings ?? []);
+            const columnConfig = generateColumnConfig(columnSetting.name, spec.columnSettings ?? [], allVariables, gaugeRangeByColumn, spec.cellSettings ?? [], spec.enableSorting ?? false);
             if (columnConfig !== undefined) {
                 columns.push(columnConfig);
                 customizedColumns.add(columnSetting.name);
@@ -538,7 +542,7 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         if (!spec.defaultColumnHidden) {
             for (const key of keys){
                 if (!customizedColumns.has(key)) {
-                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? [], allVariables, gaugeRangeByColumn, spec.cellSettings ?? []);
+                    const columnConfig = generateColumnConfig(key, spec.columnSettings ?? [], allVariables, gaugeRangeByColumn, spec.cellSettings ?? [], spec.enableSorting ?? false);
                     if (columnConfig !== undefined) {
                         columns.push(columnConfig);
                     }
@@ -550,6 +554,7 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         keys,
         spec.columnSettings,
         spec.defaultColumnHidden,
+        spec.enableSorting,
         allVariables,
         gaugeRangeByColumn,
         spec.cellSettings
@@ -650,6 +655,10 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
     const handleFilterClick = (event, columnId)=>{
         event.preventDefault();
         event.stopPropagation();
+        if (openFilterColumn === columnId) {
+            handleFilterClose();
+            return;
+        }
         setFilterAnchorEl({
             ...filterAnchorEl,
             [columnId]: event.currentTarget
@@ -699,6 +708,76 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
         spec.pagination,
         pagination
     ]);
+    // Sync the filter row's horizontal position with the table scroll.
+    useEffect(()=>{
+        if (!spec.enableFiltering) {
+            return;
+        }
+        const scrollContainer = panelContainerRef.current?.querySelector('.MuiTableContainer-root');
+        const filterRowInner = filterRowInnerRef.current;
+        if (!scrollContainer || !filterRowInner) {
+            return;
+        }
+        const syncFilterRowScroll = ()=>{
+            filterRowInner.style.transform = `translateX(-${scrollContainer.scrollLeft}px)`;
+            setOpenFilterColumn((current)=>current === null ? current : null);
+            setFilterAnchorEl((current)=>Object.keys(current).length === 0 ? current : {});
+        };
+        syncFilterRowScroll();
+        scrollContainer.addEventListener('scroll', syncFilterRowScroll, {
+            passive: true
+        });
+        return ()=>{
+            scrollContainer.removeEventListener('scroll', syncFilterRowScroll);
+        };
+    }, [
+        spec.enableFiltering,
+        columns,
+        contentDimensions
+    ]);
+    // Sync filter cell widths with the actual rendered table column widths to keep them aligned.
+    useEffect(()=>{
+        if (!spec.enableFiltering) {
+            return;
+        }
+        const scrollContainer = panelContainerRef.current?.querySelector('.MuiTableContainer-root');
+        if (!scrollContainer) {
+            return;
+        }
+        const headerRow = scrollContainer.querySelector('thead tr');
+        if (!headerRow) {
+            return;
+        }
+        const syncColumnWidths = ()=>{
+            const headerCells = scrollContainer.querySelectorAll('thead tr th');
+            columns.forEach((_, idx)=>{
+                const headerCell = headerCells[idx];
+                const filterCell = filterCellRefs.current[idx];
+                if (!headerCell || !filterCell) {
+                    return;
+                }
+                const width = `${headerCell.getBoundingClientRect().width}px`;
+                filterCell.style.width = width;
+                filterCell.style.minWidth = width;
+                filterCell.style.maxWidth = width;
+            });
+        };
+        syncColumnWidths();
+        // Re-sync whenever the header row's size changes
+        const resizeObserver = new ResizeObserver(syncColumnWidths);
+        if (headerRow) {
+            resizeObserver.observe(headerRow);
+        }
+        return ()=>{
+            resizeObserver.disconnect();
+        };
+    }, [
+        spec.enableFiltering,
+        columns,
+        contentDimensions,
+        selectionEnabled,
+        actionButtons
+    ]);
     if (contentDimensions === undefined) {
         return null;
     }
@@ -715,89 +794,107 @@ export function TablePanel({ contentDimensions, spec, queryResults }) {
             })
         });
     }
-    return /*#__PURE__*/ _jsxs(_Fragment, {
+    return /*#__PURE__*/ _jsxs("div", {
+        ref: panelContainerRef,
+        style: {
+            display: 'contents'
+        },
         children: [
             confirmDialog,
             spec.enableFiltering && /*#__PURE__*/ _jsx("div", {
                 style: {
-                    display: 'flex',
+                    overflow: 'hidden',
                     background: theme.palette.background.default,
                     borderBottom: `1px solid ${theme.palette.divider}`,
                     width: contentDimensions.width,
                     boxSizing: 'border-box'
                 },
-                children: columns.map((column, idx)=>{
-                    const filters = getSelectedFilterValues(column.accessorKey);
-                    const columnWidth = column.width || spec.defaultColumnWidth;
-                    return /*#__PURE__*/ _jsxs("div", {
-                        style: {
-                            padding: '8px',
-                            borderRight: idx < columns.length - 1 ? `1px solid ${theme.palette.divider}` : 'none',
-                            width: columnWidth,
-                            minWidth: columnWidth,
-                            maxWidth: columnWidth,
-                            display: 'flex',
-                            alignItems: 'center',
-                            position: 'relative',
-                            boxSizing: 'border-box',
-                            flex: typeof columnWidth === 'number' ? 'none' : '1 1 auto'
-                        },
-                        children: [
-                            /*#__PURE__*/ _jsx("span", {
-                                style: {
-                                    marginRight: 8,
-                                    fontSize: '12px',
-                                    color: theme.palette.text.secondary,
-                                    flex: 1,
-                                    overflow: 'hidden',
-                                    textOverflow: 'ellipsis',
-                                    whiteSpace: 'nowrap'
-                                },
-                                children: filters.length ? `${filters.length} items` : 'All'
-                            }),
-                            /*#__PURE__*/ _jsx("button", {
-                                onClick: (e)=>{
-                                    handleFilterClick(e, column.accessorKey);
-                                },
-                                style: {
-                                    border: `1px solid ${theme.palette.divider}`,
-                                    background: theme.palette.background.paper,
-                                    cursor: 'pointer',
-                                    fontSize: '12px',
-                                    color: filters.length ? theme.palette.primary.main : theme.palette.text.secondary,
-                                    padding: '4px 8px',
-                                    borderRadius: '4px',
-                                    minWidth: '20px',
-                                    height: '24px',
-                                    flexShrink: 0,
-                                    transition: 'all 0.2s ease'
-                                },
-                                onMouseEnter: (e)=>{
-                                    e.currentTarget.style.background = theme.palette.action.hover;
-                                },
-                                onMouseLeave: (e)=>{
-                                    e.currentTarget.style.background = theme.palette.background.paper;
-                                },
-                                type: "button",
-                                children: "▼"
-                            }),
-                            openFilterColumn === column.accessorKey && /*#__PURE__*/ _jsx("div", {
-                                style: {
-                                    position: 'absolute',
-                                    top: '100%',
-                                    left: 0,
-                                    zIndex: 1000,
-                                    marginTop: 4
-                                },
-                                children: /*#__PURE__*/ _jsx(ColumnFilterDropdown, {
-                                    allValues: columnUniqueValues[column.accessorKey] || [],
-                                    selectedValues: filters,
-                                    onFilterChange: (values)=>updateColumnFilter(column.accessorKey, values),
-                                    theme: theme
-                                })
-                            })
-                        ]
-                    }, `filter-${idx}`);
+                children: /*#__PURE__*/ _jsx("div", {
+                    ref: filterRowInnerRef,
+                    style: {
+                        display: 'flex',
+                        width: 'max-content',
+                        willChange: 'transform'
+                    },
+                    children: columns.map((column, idx)=>{
+                        const filters = getSelectedFilterValues(column.accessorKey);
+                        const columnWidth = column.width || spec.defaultColumnWidth;
+                        const anchorEl = filterAnchorEl[column.accessorKey];
+                        return /*#__PURE__*/ _jsxs("div", {
+                            ref: (el)=>{
+                                filterCellRefs.current[idx] = el;
+                            },
+                            style: {
+                                padding: '8px',
+                                borderRight: idx < columns.length - 1 ? `1px solid ${theme.palette.divider}` : 'none',
+                                // These are just a starting size for the first paint —
+                                // the width-sync effect above overwrites them with the
+                                // table's actual rendered column widths.
+                                width: columnWidth,
+                                minWidth: columnWidth,
+                                maxWidth: columnWidth,
+                                display: 'flex',
+                                alignItems: 'center',
+                                position: 'relative',
+                                boxSizing: 'border-box',
+                                flex: 'none'
+                            },
+                            children: [
+                                /*#__PURE__*/ _jsx("span", {
+                                    style: {
+                                        marginRight: 8,
+                                        fontSize: '12px',
+                                        color: theme.palette.text.secondary,
+                                        flex: 1,
+                                        overflow: 'hidden',
+                                        textOverflow: 'ellipsis',
+                                        whiteSpace: 'nowrap'
+                                    },
+                                    children: filters.length ? `${filters.length} items` : 'All'
+                                }),
+                                /*#__PURE__*/ _jsx("button", {
+                                    onClick: (e)=>{
+                                        handleFilterClick(e, column.accessorKey);
+                                    },
+                                    style: {
+                                        border: `1px solid ${theme.palette.divider}`,
+                                        background: theme.palette.background.paper,
+                                        cursor: 'pointer',
+                                        fontSize: '12px',
+                                        color: filters.length ? theme.palette.primary.main : theme.palette.text.secondary,
+                                        padding: '4px 8px',
+                                        borderRadius: '4px',
+                                        minWidth: '20px',
+                                        height: '24px',
+                                        flexShrink: 0,
+                                        transition: 'all 0.2s ease'
+                                    },
+                                    onMouseEnter: (e)=>{
+                                        e.currentTarget.style.background = theme.palette.action.hover;
+                                    },
+                                    onMouseLeave: (e)=>{
+                                        e.currentTarget.style.background = theme.palette.background.paper;
+                                    },
+                                    type: "button",
+                                    children: "▼"
+                                }),
+                                openFilterColumn === column.accessorKey && anchorEl && /*#__PURE__*/ createPortal(/*#__PURE__*/ _jsx("div", {
+                                    style: {
+                                        position: 'fixed',
+                                        top: anchorEl.getBoundingClientRect().bottom + 4,
+                                        left: anchorEl.getBoundingClientRect().left,
+                                        zIndex: theme.zIndex.modal
+                                    },
+                                    children: /*#__PURE__*/ _jsx(ColumnFilterDropdown, {
+                                        allValues: columnUniqueValues[column.accessorKey] || [],
+                                        selectedValues: filters,
+                                        onFilterChange: (values)=>updateColumnFilter(column.accessorKey, values),
+                                        theme: theme
+                                    })
+                                }), document.body)
+                            ]
+                        }, `column-${column.accessorKey}`);
+                    })
                 })
             }),
             /*#__PURE__*/ _jsx(Table, {