From cc011f4d5d19ea210ada7e73d3a628ab96666546 Mon Sep 17 00:00:00 2001 From: Thiago Dallacqua Date: Thu, 31 Oct 2024 11:01:17 -0300 Subject: [PATCH] rebased --- webui/react/src/pages/FlatRuns/FlatRuns.tsx | 114 +++++++++----------- 1 file changed, 48 insertions(+), 66 deletions(-) diff --git a/webui/react/src/pages/FlatRuns/FlatRuns.tsx b/webui/react/src/pages/FlatRuns/FlatRuns.tsx index af7a790a47f..81210441468 100644 --- a/webui/react/src/pages/FlatRuns/FlatRuns.tsx +++ b/webui/react/src/pages/FlatRuns/FlatRuns.tsx @@ -22,7 +22,6 @@ import Pagination from 'hew/Pagination'; import Row from 'hew/Row'; import { useToast } from 'hew/Toast'; import { Loadable, Loaded, NotLoaded } from 'hew/utils/loadable'; -import { groupBy, keyBy, mapValues } from 'lodash'; import { useObservable } from 'micro-observables'; import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react'; import { v4 as uuidv4 } from 'uuid'; @@ -179,7 +178,6 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { const [runs, setRuns] = useState[]>(INITIAL_LOADING_RUNS); const [sorts, setSorts] = useState([EMPTY_SORT]); - const sortString = useMemo(() => makeSortString(sorts.filter(validSort.is)), [sorts]); const loadableFormset = useObservable(formStore.formset); const rootFilterChildren: Array = Loadable.match(loadableFormset, { @@ -239,24 +237,6 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { } }, [projectId]); - // expand sorts to include types from metadata columns so the column ids match - const expandedSorts = useMemo(() => { - return projectColumns.match({ - _: () => sorts, - Loaded(pc) { - const groupedColumns = groupBy(pc, (c) => c.column); - const columnToExpandedColumns = mapValues(groupedColumns, (cols) => - cols.map((c) => formatColumnKey(c)), - ); - return sorts - .filter(validSort.is) - .flatMap((sort) => - columnToExpandedColumns[sort.column].map((ec) => ({ ...sort, column: ec })), - ); - }, - }); - }, [sorts, projectColumns]); - const arrayTypeColumns = useMemo(() => { const arrayTypeColumns = projectColumns .getOrElse([]) @@ -312,11 +292,13 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { return [...STATIC_COLUMNS, ...settings.columns.slice(0, settings.pinnedColumnsCount)]; }, [settings.columns, settings.pinnedColumnsCount]); - const projectColumnsMap = useMemo(() => { - return projectColumns.map((columns) => keyBy(columns, formatColumnKey)); - }, [projectColumns]); - const columns: ColumnDef[] = useMemo(() => { + const projectColumnsMap: Loadable> = Loadable.map( + projectColumns, + (columns) => { + return columns.reduce((acc, col) => ({ ...acc, [formatColumnKey(col)]: col }), {}); + }, + ); const columnDefs = getColumnDefs({ appTheme, columnWidths: settings.columnWidths, @@ -397,8 +379,8 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { columnDefKey, currentColumn.displayName || currentColumn.column, settings.columnWidths[columnDefKey] ?? - defaultColumnWidths[columnDefKey as RunColumn] ?? - MIN_COLUMN_WIDTH, + defaultColumnWidths[columnDefKey as RunColumn] ?? + MIN_COLUMN_WIDTH, dataPath, { max: heatmap.max, @@ -410,8 +392,8 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { columnDefKey, currentColumn.displayName || currentColumn.column, settings.columnWidths[columnDefKey] ?? - defaultColumnWidths[columnDefKey as RunColumn] ?? - MIN_COLUMN_WIDTH, + defaultColumnWidths[columnDefKey as RunColumn] ?? + MIN_COLUMN_WIDTH, dataPath, undefined, ); @@ -423,8 +405,8 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { columnDefKey, currentColumn.displayName || currentColumn.column, settings.columnWidths[columnDefKey] ?? - defaultColumnWidths[columnDefKey as RunColumn] ?? - MIN_COLUMN_WIDTH, + defaultColumnWidths[columnDefKey as RunColumn] ?? + MIN_COLUMN_WIDTH, dataPath, ); break; @@ -433,8 +415,8 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { columnDefKey, currentColumn.displayName || currentColumn.column, settings.columnWidths[columnDefKey] ?? - defaultColumnWidths[columnDefKey as RunColumn] ?? - MIN_COLUMN_WIDTH, + defaultColumnWidths[columnDefKey as RunColumn] ?? + MIN_COLUMN_WIDTH, dataPath, ); break; @@ -445,8 +427,8 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { columnDefKey, currentColumn.displayName || currentColumn.column, settings.columnWidths[columnDefKey] ?? - defaultColumnWidths[columnDefKey as RunColumn] ?? - MIN_COLUMN_WIDTH, + defaultColumnWidths[columnDefKey as RunColumn] ?? + MIN_COLUMN_WIDTH, dataPath, ); } @@ -459,9 +441,9 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { settings.columnWidths[currentColumn.column], heatmap && settings.heatmapOn && !settings.heatmapSkipped.includes(currentColumn.column) ? { - max: heatmap.max, - min: heatmap.min, - } + max: heatmap.max, + min: heatmap.min, + } : undefined, ); } @@ -473,7 +455,7 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { appTheme, columnsIfLoaded, isDarkMode, - projectColumnsMap, + projectColumns, projectHeatmap, dataGridSelection.rows, settings.columnWidths, @@ -835,32 +817,32 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { ? null : !isPinned ? { - icon: , - key: 'pin', - label: 'Pin column', - onClick: () => { - const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId); - newColumnsOrder.splice(settings.pinnedColumnsCount, 0, columnId); - handleColumnsOrderChange( - newColumnsOrder, - Math.min(settings.pinnedColumnsCount + 1, columnsIfLoaded.length), - ); - }, - } + icon: , + key: 'pin', + label: 'Pin column', + onClick: () => { + const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId); + newColumnsOrder.splice(settings.pinnedColumnsCount, 0, columnId); + handleColumnsOrderChange( + newColumnsOrder, + Math.min(settings.pinnedColumnsCount + 1, columnsIfLoaded.length), + ); + }, + } : { - disabled: settings.pinnedColumnsCount <= 1, - icon: , - key: 'unpin', - label: 'Unpin column', - onClick: () => { - const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId); - newColumnsOrder.splice(settings.pinnedColumnsCount - 1, 0, columnId); - handleColumnsOrderChange( - newColumnsOrder, - Math.max(settings.pinnedColumnsCount - 1, 0), - ); - }, + disabled: settings.pinnedColumnsCount <= 1, + icon: , + key: 'unpin', + label: 'Unpin column', + onClick: () => { + const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId); + newColumnsOrder.splice(settings.pinnedColumnsCount - 1, 0, columnId); + handleColumnsOrderChange( + newColumnsOrder, + Math.max(settings.pinnedColumnsCount - 1, 0), + ); }, + }, { icon: , key: 'hide', @@ -889,9 +871,9 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { sortCount === 0 ? [] : [ - { type: 'divider' as const }, - ...sortMenuItemsForColumn(column, sorts, handleSortChange), - ]; + { type: 'divider' as const }, + ...sortMenuItemsForColumn(column, sorts, handleSortChange), + ]; items.push(...sortMenuItems); } @@ -974,7 +956,7 @@ const FlatRuns: React.FC = ({ projectId, workspaceId, searchId }) => { [ bannedFilterColumns, bannedSortColumns, - projectColumnsMap, + projectColumns, settings.pinnedColumnsCount, settings.heatmapOn, settings.heatmapSkipped,