Skip to content

Commit cc011f4

Browse files
thiagodallacqua-hpethiagodallacqua-hpe
committed
rebased
1 parent 998dcb9 commit cc011f4

File tree

1 file changed

+48
-66
lines changed

1 file changed

+48
-66
lines changed

‎webui/react/src/pages/FlatRuns/FlatRuns.tsx‎

Lines changed: 48 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,6 @@ import Pagination from 'hew/Pagination';
2222
import Row from 'hew/Row';
2323
import { useToast } from 'hew/Toast';
2424
import { Loadable, Loaded, NotLoaded } from 'hew/utils/loadable';
25-
import { groupBy, keyBy, mapValues } from 'lodash';
2625
import { useObservable } from 'micro-observables';
2726
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
2827
import { v4 as uuidv4 } from 'uuid';
@@ -179,7 +178,6 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
179178
const [runs, setRuns] = useState<Loadable<FlatRun>[]>(INITIAL_LOADING_RUNS);
180179

181180
const [sorts, setSorts] = useState<Sort[]>([EMPTY_SORT]);
182-
183181
const sortString = useMemo(() => makeSortString(sorts.filter(validSort.is)), [sorts]);
184182
const loadableFormset = useObservable(formStore.formset);
185183
const rootFilterChildren: Array<FormGroup | FormField> = Loadable.match(loadableFormset, {
@@ -239,24 +237,6 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
239237
}
240238
}, [projectId]);
241239

242-
// expand sorts to include types from metadata columns so the column ids match
243-
const expandedSorts = useMemo(() => {
244-
return projectColumns.match({
245-
_: () => sorts,
246-
Loaded(pc) {
247-
const groupedColumns = groupBy(pc, (c) => c.column);
248-
const columnToExpandedColumns = mapValues(groupedColumns, (cols) =>
249-
cols.map((c) => formatColumnKey(c)),
250-
);
251-
return sorts
252-
.filter(validSort.is)
253-
.flatMap((sort) =>
254-
columnToExpandedColumns[sort.column].map((ec) => ({ ...sort, column: ec })),
255-
);
256-
},
257-
});
258-
}, [sorts, projectColumns]);
259-
260240
const arrayTypeColumns = useMemo(() => {
261241
const arrayTypeColumns = projectColumns
262242
.getOrElse([])
@@ -312,11 +292,13 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
312292
return [...STATIC_COLUMNS, ...settings.columns.slice(0, settings.pinnedColumnsCount)];
313293
}, [settings.columns, settings.pinnedColumnsCount]);
314294

315-
const projectColumnsMap = useMemo(() => {
316-
return projectColumns.map((columns) => keyBy(columns, formatColumnKey));
317-
}, [projectColumns]);
318-
319295
const columns: ColumnDef<FlatRun>[] = useMemo(() => {
296+
const projectColumnsMap: Loadable<Record<string, ProjectColumn>> = Loadable.map(
297+
projectColumns,
298+
(columns) => {
299+
return columns.reduce((acc, col) => ({ ...acc, [formatColumnKey(col)]: col }), {});
300+
},
301+
);
320302
const columnDefs = getColumnDefs({
321303
appTheme,
322304
columnWidths: settings.columnWidths,
@@ -397,8 +379,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
397379
columnDefKey,
398380
currentColumn.displayName || currentColumn.column,
399381
settings.columnWidths[columnDefKey] ??
400-
defaultColumnWidths[columnDefKey as RunColumn] ??
401-
MIN_COLUMN_WIDTH,
382+
defaultColumnWidths[columnDefKey as RunColumn] ??
383+
MIN_COLUMN_WIDTH,
402384
dataPath,
403385
{
404386
max: heatmap.max,
@@ -410,8 +392,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
410392
columnDefKey,
411393
currentColumn.displayName || currentColumn.column,
412394
settings.columnWidths[columnDefKey] ??
413-
defaultColumnWidths[columnDefKey as RunColumn] ??
414-
MIN_COLUMN_WIDTH,
395+
defaultColumnWidths[columnDefKey as RunColumn] ??
396+
MIN_COLUMN_WIDTH,
415397
dataPath,
416398
undefined,
417399
);
@@ -423,8 +405,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
423405
columnDefKey,
424406
currentColumn.displayName || currentColumn.column,
425407
settings.columnWidths[columnDefKey] ??
426-
defaultColumnWidths[columnDefKey as RunColumn] ??
427-
MIN_COLUMN_WIDTH,
408+
defaultColumnWidths[columnDefKey as RunColumn] ??
409+
MIN_COLUMN_WIDTH,
428410
dataPath,
429411
);
430412
break;
@@ -433,8 +415,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
433415
columnDefKey,
434416
currentColumn.displayName || currentColumn.column,
435417
settings.columnWidths[columnDefKey] ??
436-
defaultColumnWidths[columnDefKey as RunColumn] ??
437-
MIN_COLUMN_WIDTH,
418+
defaultColumnWidths[columnDefKey as RunColumn] ??
419+
MIN_COLUMN_WIDTH,
438420
dataPath,
439421
);
440422
break;
@@ -445,8 +427,8 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
445427
columnDefKey,
446428
currentColumn.displayName || currentColumn.column,
447429
settings.columnWidths[columnDefKey] ??
448-
defaultColumnWidths[columnDefKey as RunColumn] ??
449-
MIN_COLUMN_WIDTH,
430+
defaultColumnWidths[columnDefKey as RunColumn] ??
431+
MIN_COLUMN_WIDTH,
450432
dataPath,
451433
);
452434
}
@@ -459,9 +441,9 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
459441
settings.columnWidths[currentColumn.column],
460442
heatmap && settings.heatmapOn && !settings.heatmapSkipped.includes(currentColumn.column)
461443
? {
462-
max: heatmap.max,
463-
min: heatmap.min,
464-
}
444+
max: heatmap.max,
445+
min: heatmap.min,
446+
}
465447
: undefined,
466448
);
467449
}
@@ -473,7 +455,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
473455
appTheme,
474456
columnsIfLoaded,
475457
isDarkMode,
476-
projectColumnsMap,
458+
projectColumns,
477459
projectHeatmap,
478460
dataGridSelection.rows,
479461
settings.columnWidths,
@@ -835,32 +817,32 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
835817
? null
836818
: !isPinned
837819
? {
838-
icon: <Icon decorative name="pin" />,
839-
key: 'pin',
840-
label: 'Pin column',
841-
onClick: () => {
842-
const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId);
843-
newColumnsOrder.splice(settings.pinnedColumnsCount, 0, columnId);
844-
handleColumnsOrderChange(
845-
newColumnsOrder,
846-
Math.min(settings.pinnedColumnsCount + 1, columnsIfLoaded.length),
847-
);
848-
},
849-
}
820+
icon: <Icon decorative name="pin" />,
821+
key: 'pin',
822+
label: 'Pin column',
823+
onClick: () => {
824+
const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId);
825+
newColumnsOrder.splice(settings.pinnedColumnsCount, 0, columnId);
826+
handleColumnsOrderChange(
827+
newColumnsOrder,
828+
Math.min(settings.pinnedColumnsCount + 1, columnsIfLoaded.length),
829+
);
830+
},
831+
}
850832
: {
851-
disabled: settings.pinnedColumnsCount <= 1,
852-
icon: <Icon decorative name="pin" />,
853-
key: 'unpin',
854-
label: 'Unpin column',
855-
onClick: () => {
856-
const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId);
857-
newColumnsOrder.splice(settings.pinnedColumnsCount - 1, 0, columnId);
858-
handleColumnsOrderChange(
859-
newColumnsOrder,
860-
Math.max(settings.pinnedColumnsCount - 1, 0),
861-
);
862-
},
833+
disabled: settings.pinnedColumnsCount <= 1,
834+
icon: <Icon decorative name="pin" />,
835+
key: 'unpin',
836+
label: 'Unpin column',
837+
onClick: () => {
838+
const newColumnsOrder = columnsIfLoaded.filter((c) => c !== columnId);
839+
newColumnsOrder.splice(settings.pinnedColumnsCount - 1, 0, columnId);
840+
handleColumnsOrderChange(
841+
newColumnsOrder,
842+
Math.max(settings.pinnedColumnsCount - 1, 0),
843+
);
863844
},
845+
},
864846
{
865847
icon: <Icon decorative name="eye-close" />,
866848
key: 'hide',
@@ -889,9 +871,9 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
889871
sortCount === 0
890872
? []
891873
: [
892-
{ type: 'divider' as const },
893-
...sortMenuItemsForColumn(column, sorts, handleSortChange),
894-
];
874+
{ type: 'divider' as const },
875+
...sortMenuItemsForColumn(column, sorts, handleSortChange),
876+
];
895877
items.push(...sortMenuItems);
896878
}
897879

@@ -974,7 +956,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
974956
[
975957
bannedFilterColumns,
976958
bannedSortColumns,
977-
projectColumnsMap,
959+
projectColumns,
978960
settings.pinnedColumnsCount,
979961
settings.heatmapOn,
980962
settings.heatmapSkipped,

0 commit comments

Comments
 (0)