Table Column Filtering and Performance Improvements

src/src/components/Table/Table.tsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react';
-import { isEmpty, isEqual, isNil } from 'lodash-es';
+import { isEmpty, isEqual, isNil, debounce } from 'lodash-es';
 import { useResizeObserver } from 'hooks';
 import _ from 'lodash-es';
 
@@ -26,6 +26,7 @@ import ManageColumnsPopover from 'pages/Metrics/components/Table/ManageColumnsPo
 import HideRowsPopover from 'pages/Metrics/components/Table/HideRowsPopover/HideRowsPopover';
 import RowHeightPopover from 'pages/Metrics/components/Table/RowHeightPopover/RowHeightPopover';
 import CompareSelectedRunsPopover from 'pages/Metrics/components/Table/CompareSelectedRunsPopover';
+import HideColumnsPopover from 'pages/Metrics/components/Table/HideColumnsPopover/HideColumnsPopover';
 
 import { ITableProps } from 'types/components/Table/Table';
 
@@ -51,6 +52,7 @@ const Table = React.forwardRef(function Table(
     onRowHover = () => {},
     onRowClick = () => {},
     onTableResizeModeChange,
+    onDefaultColumnsVisibilityChange,
     custom,
     data,
     columns,
@@ -71,6 +73,7 @@ const Table = React.forwardRef(function Table(
     updateColumnsWidths,
     sortFields,
     hiddenRows,
+    unselectedColumnState,
     isLoading,
     showRowClickBehaviour = true,
     showResizeContainerActionBar = true,
@@ -379,19 +382,21 @@ const Table = React.forwardRef(function Table(
               const groupRow = dataRef.current[groupKey];
               if (!!groupRow && !!groupRow.data) {
                 if (colKey === 'value') {
+                  const { min, line, max, stdDevValue, stdErrValue } =
+                    groupRow.data.aggregation.area;
                   groupHeaderRowCell.children[0].children[0].children[0].textContent =
-                    groupRow.data.aggregation.area.min;
+                    min;
                   groupHeaderRowCell.children[0].children[0].children[1].textContent =
-                    groupRow.data.aggregation.line;
+                    line;
                   groupHeaderRowCell.children[0].children[0].children[2].textContent =
-                    groupRow.data.aggregation.area.max;
+                    max;
                   if (!isNil(groupRow.data.aggregation.area.stdDevValue)) {
                     groupHeaderRowCell.children[0].children[0].children[3].textContent =
-                      groupRow.data.aggregation.area.stdDevValue;
+                      stdDevValue;
                   }
                   if (!isNil(groupRow.data.aggregation.area.stdErrValue)) {
                     groupHeaderRowCell.children[0].children[0].children[3].textContent =
-                      groupRow.data.aggregation.area.stdErrValue;
+                      stdErrValue;
                   }
                 } else {
                   groupHeaderRowCell.textContent = groupRow.data[colKey];
@@ -604,22 +609,9 @@ const Table = React.forwardRef(function Table(
 
   React.useEffect(() => {
     if (custom && !!tableContainerRef.current) {
-      const windowEdges = calculateWindow({
-        scrollTop: tableContainerRef.current.scrollTop,
-        offsetHeight: tableContainerRef.current.offsetHeight,
-        scrollHeight: tableContainerRef.current.scrollHeight,
-        itemHeight: rowHeight,
-        groupMargin:
-          ROW_CELL_SIZE_CONFIG[rowHeight]?.groupMargin ??
-          ROW_CELL_SIZE_CONFIG[RowHeightSize.md].groupMargin,
-      });
-
-      startIndex.current = windowEdges.startIndex;
-      endIndex.current = windowEdges.endIndex;
-
-      virtualizedUpdate();
-
-      tableContainerRef.current.onscroll = ({ target }) => {
+      // Debounce the scroll event to avoid performance issues
+      const handleScroll = debounce(() => {
+        const target = tableContainerRef.current;
         const windowEdges = calculateWindow({
           scrollTop: target.scrollTop,
           offsetHeight: target.offsetHeight,
@@ -651,15 +643,16 @@ const Table = React.forwardRef(function Table(
           }
         }
         setListWindowMeasurements();
+      }, 30);
+
+      tableContainerRef.current.addEventListener('scroll', handleScroll);
+
+      return () => {
+        if (tableContainerRef.current) {
+          tableContainerRef.current.removeEventListener('scroll', handleScroll);
+        }
       };
     }
-
-    return () => {
-      if (custom && tableContainerRef.current) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-        tableContainerRef.current.onscroll = null;
-      }
-    };
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [custom, rowData]);
 
@@ -803,6 +796,15 @@ const Table = React.forwardRef(function Table(
                     data={dataRef.current}
                   />
                 )}
+                {onDefaultColumnsVisibilityChange && (
+                  <HideColumnsPopover
+                    unselectedColumnState={unselectedColumnState}
+                    onDefaultColumnsVisibilityChange={
+                      onDefaultColumnsVisibilityChange
+                    }
+                    appName={appName}
+                  />
+                )}
                 {onSort && (
                   <ControlPopover
                     anchorOrigin={{

src/src/config/analytics/analyticsKeysMap.ts

@@ -21,6 +21,8 @@ export const ANALYTICS_EVENT_KEYS = {
       metricVisibilityChange:
         '[MetricsExplorer][Table] Change metric visibility',
       compareSelectedRuns: '[MetricsExplorer][Table] Compare selected runs',
+      changeDefaultColumnsVisibility:
+        '[MetricsExplorer][Table] Change default columns visibility',
     },
     chart: {
       controls: {
@@ -97,6 +99,8 @@ export const ANALYTICS_EVENT_KEYS = {
       metricVisibilityChange:
         '[ParamsExplorer][Table] Change metric visibility',
       compareSelectedRuns: '[ParamsExplorer][Table] Compare selected runs',
+      changeDefaultColumnsVisibility:
+        '[ParamsExplorer][Table] Change default columns visibility',
     },
     chart: {
       controls: {
@@ -153,6 +157,8 @@ export const ANALYTICS_EVENT_KEYS = {
       changeSorting: '[RunsExplorer][Table] Change sorting',
       metricVisibilityChange: '[RunsExplorer][Table] Change metric visibility',
       compareSelectedRuns: '[RunsExplorer][Table] Compare selected runs',
+      changeDefaultColumnsVisibility:
+        '[RunsExplorer][Table] Change default columns visibility',
     },
   },
   scatters: {
@@ -177,6 +183,8 @@ export const ANALYTICS_EVENT_KEYS = {
       metricVisibilityChange:
         '[ScattersExplorer][Table] Change metric visibility',
       compareSelectedRuns: '[ScattersExplorer][Table] Compare selected runs',
+      changeDefaultColumnsVisibility:
+        '[ScattersExplorer][Table] Change default columns visibility',
     },
     chart: {
       controls: {

src/src/config/table/tableConfigs.ts

@@ -17,6 +17,12 @@ export enum VisualizationElementEnum {
   IMAGE = 'image',
 }
 
+export enum UnselectedColumnState {
+  FORCE_HIDE = 'hide',
+  FORCE_SHOW = 'show',
+  DEFAULT = 'default',
+}
+
 export const ROW_CELL_SIZE_CONFIG = {
   22: {
     groupMargin: 2,
@@ -42,6 +48,7 @@ export const TABLE_DEFAULT_CONFIG: Record<string, any> = {
     resizeMode: ResizeModeEnum.Resizable,
     rowHeight: RowHeightSize.md,
     sortFields: [],
+    unselectedColumnState: UnselectedColumnState.FORCE_HIDE,
     hideSystemMetrics: true,
     hiddenMetrics: [],
     hiddenColumns: ['hash', 'description'],
@@ -58,6 +65,7 @@ export const TABLE_DEFAULT_CONFIG: Record<string, any> = {
     resizeMode: ResizeModeEnum.Resizable,
     rowHeight: RowHeightSize.md,
     sortFields: [],
+    unselectedColumnState: UnselectedColumnState.FORCE_HIDE,
     hiddenMetrics: [],
     hiddenColumns: ['hash', 'description'],
     nonHidableColumns: new Set(['#', 'run', 'actions']),
@@ -73,6 +81,7 @@ export const TABLE_DEFAULT_CONFIG: Record<string, any> = {
     resizeMode: ResizeModeEnum.Resizable,
     rowHeight: RowHeightSize.md,
     sortFields: [],
+    unselectedColumnState: UnselectedColumnState.FORCE_HIDE,
     hiddenMetrics: [],
     hiddenColumns: ['hash', 'description'],
     nonHidableColumns: new Set(['#', 'run', 'actions']),
@@ -89,6 +98,7 @@ export const TABLE_DEFAULT_CONFIG: Record<string, any> = {
     resizeMode: ResizeModeEnum.Resizable,
     rowHeight: RowHeightSize.md,
     sortFields: [],
+    unselectedColumnState: UnselectedColumnState.FORCE_HIDE,
     hiddenMetrics: [],
     hiddenColumns: ['hash', 'description'],
     nonHidableColumns: new Set(['#', 'run', 'actions']),

src/src/pages/Metrics/Metrics.tsx

@@ -259,6 +259,7 @@ function Metrics(
                           resizeMode={props.resizeMode}
                           columnsWidths={props.columnsWidths}
                           selectedRows={props.selectedRows}
+                          unselectedColumnState={props.unselectedColumnState}
                           hideSystemMetrics={props.hideSystemMetrics}
                           appName={AppNameEnum.METRICS}
                           hiddenChartRows={props.lineChartData?.length === 0}
@@ -272,6 +273,9 @@ function Metrics(
                           onColumnsVisibilityChange={
                             props.onColumnsVisibilityChange
                           }
+                          onDefaultColumnsVisibilityChange={
+                            props.onDefaultColumnsVisibilityChange
+                          }
                           onTableDiffShow={props.onTableDiffShow}
                           onRowHeightChange={props.onRowHeightChange}
                           onRowsChange={props.onMetricVisibilityChange}

src/src/pages/Metrics/MetricsContainer.tsx

@@ -159,6 +159,9 @@ function MetricsContainer(): React.FunctionComponentElement<React.ReactNode> {
         hiddenMetrics={metricsData?.config?.table?.hiddenMetrics!}
         hideSystemMetrics={metricsData?.config?.table?.hideSystemMetrics!}
         hiddenColumns={metricsData?.config?.table?.hiddenColumns!}
+        unselectedColumnState={
+          metricsData?.config?.table?.unselectedColumnState!
+        }
         chartPanelOffsetHeight={chartPanelOffsetHeight}
         selectedRows={metricsData?.selectedRows!}
         groupingSelectOptions={metricsData?.groupingSelectOptions!}
@@ -209,6 +212,9 @@ function MetricsContainer(): React.FunctionComponentElement<React.ReactNode> {
         onMetricVisibilityChange={metricAppModel.onMetricVisibilityChange}
         onColumnsOrderChange={metricAppModel.onColumnsOrderChange}
         onColumnsVisibilityChange={metricAppModel.onColumnsVisibilityChange}
+        onDefaultColumnsVisibilityChange={
+          metricAppModel.onDefaultColumnsVisibilityChange
+        }
         onTableDiffShow={metricAppModel.onTableDiffShow}
         onTableResizeModeChange={metricAppModel.onTableResizeModeChange}
         onRowsVisibilityChange={metricAppModel.onRowsVisibilityChange}

src/src/pages/Metrics/components/Table/HideColumnsPopover/HideColumnsPopover.scss

@@ -0,0 +1,27 @@
+@use 'src/styles/abstracts' as *;
+
+.HideColumnsPopover {
+  padding: 0.5rem;
+  width: 16.5rem;
+  &__item {
+    text-transform: capitalize;
+  }
+}
+
+.HideColumnsPopover__trigger {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  border: 0.0625rem solid transparent;
+  transition: all 0.18s ease-out;
+  border-radius: $radius-main;
+  padding: 0 0.375rem !important;
+  margin-right: 0.375rem !important;
+  i {
+    margin-right: 0.75rem;
+  }
+  &.opened {
+    border: $border-main-active;
+    background-color: $primary-color-10;
+  }
+}