diff --git a/src/src/components/ChartPanel/ChartPanel.tsx b/src/src/components/ChartPanel/ChartPanel.tsx index 2de62f08..ef7c839e 100644 --- a/src/src/components/ChartPanel/ChartPanel.tsx +++ b/src/src/components/ChartPanel/ChartPanel.tsx @@ -205,7 +205,7 @@ const ChartPanel = React.forwardRef(function ChartPanel( tooltipContent={props?.tooltip?.content || {}} tooltipAppearance={props?.tooltip?.appearance} focusedState={props.focusedState} - alignmentConfig={props.alignmentConfigs![0]} + alignmentConfig={props.alignmentConfigs?.[0]} selectOptions={props.selectOptions} onChangeTooltip={props.onChangeTooltip} /> diff --git a/src/src/config/enums/tableEnums.ts b/src/src/config/enums/tableEnums.ts index 0735105d..7638bd79 100644 --- a/src/src/config/enums/tableEnums.ts +++ b/src/src/config/enums/tableEnums.ts @@ -19,5 +19,9 @@ enum HideColumnsEnum { HideSystemMetrics = 'Hide System Metrics', ShowSystemMetrics = 'Show System Metrics', All = 'All', + HideMetrics = 'Hide Metrics', + ShowMetrics = 'Show Metrics', + HideParams = 'Hide Params', + ShowParams = 'Show Params', } export { RowHeightEnum, HideRowsEnum, ResizeModeEnum, HideColumnsEnum }; diff --git a/src/src/pages/Metrics/components/Table/HideColumnsPopover/HideColumnsPopover.tsx b/src/src/pages/Metrics/components/Table/HideColumnsPopover/HideColumnsPopover.tsx index cba7cf84..fae18d9c 100644 --- a/src/src/pages/Metrics/components/Table/HideColumnsPopover/HideColumnsPopover.tsx +++ b/src/src/pages/Metrics/components/Table/HideColumnsPopover/HideColumnsPopover.tsx @@ -53,7 +53,7 @@ function HideColumnsPopover({ }} anchor={({ onAnchorClick, opened }) => (
diff --git a/src/src/pages/Metrics/components/Table/ManageColumnsPopover/ManageColumnsPopover.tsx b/src/src/pages/Metrics/components/Table/ManageColumnsPopover/ManageColumnsPopover.tsx index 7e7de038..9be3395a 100644 --- a/src/src/pages/Metrics/components/Table/ManageColumnsPopover/ManageColumnsPopover.tsx +++ b/src/src/pages/Metrics/components/Table/ManageColumnsPopover/ManageColumnsPopover.tsx @@ -1,6 +1,7 @@ /* eslint-disable react-hooks/exhaustive-deps */ import React from 'react'; import { DragDropContext, Droppable } from 'react-beautiful-dnd'; +import { List, AutoSizer } from 'react-virtualized'; import _ from 'lodash-es'; import { Divider, InputBase } from '@material-ui/core'; @@ -54,6 +55,8 @@ function ManageColumnsPopover({ const [popoverWidth, setPopoverWidth] = React.useState(800); const ref = React.useRef(null); + const VIRTUAL_COLUMN_THRESHOLD = 100; // If exceeded, use virtualized list + const onResize = _.debounce(() => { onPopoverWidthChange(); }, 500); @@ -245,6 +248,33 @@ function ManageColumnsPopover({ ); }, [appName, hiddenColumns, state]); + function generateRowRenderer(columnList: ITableColumn[]) { + const rowRenderer = ({ index, key }: { index: number; key: string }) => { + const column = columnList[index]; + return ( + { + toggleSoftHidden(column.key); + onColumnsVisibilityChange( + hiddenColumns?.includes(column.key) + ? hiddenColumns?.filter((col: string) => col !== column.key) + : hiddenColumns?.concat([column.key]), + ); + }} + draggingItemId={draggingItemId} + /> + ); + }; + return rowRenderer; + } + return ( - {state.columns.middle.list.map( - (column: ITableColumn, index: number) => ( - { - toggleSoftHidden(column.key); - onColumnsVisibilityChange( - hiddenColumns?.includes(column.key) - ? hiddenColumns?.filter( - (col: string) => col !== column.key, - ) - : hiddenColumns?.concat([column.key]), - ); - }} - draggingItemId={draggingItemId} - /> - ), + {state.columns.middle.list.length < + VIRTUAL_COLUMN_THRESHOLD ? ( + state.columns.middle.list.map( + (column: ITableColumn, index: number) => ( + { + toggleSoftHidden(column.key); + onColumnsVisibilityChange( + hiddenColumns?.includes(column.key) + ? hiddenColumns?.filter( + (col: string) => col !== column.key, + ) + : hiddenColumns?.concat([column.key]), + ); + }} + draggingItemId={draggingItemId} + /> + ), + ) + ) : ( + + {({ height, width }) => ( + + )} + )} {provided.placeholder}
@@ -470,7 +517,56 @@ function ManageColumnsPopover({ /> )} + + + + +