Skip to content

Commit

Permalink
refactor: Update column definition keys and handle columns order change.
Browse files Browse the repository at this point in the history
  • Loading branch information
@thiagodallacqua-hpe
thiagodallacqua-hpe committed Oct 22, 2024
1 parent 1f123a3 commit c3b4786
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 69 deletions.
77 changes: 24 additions & 53 deletions webui/react/src/components/ColumnPickerMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Message from 'hew/Message';
import Pivot from 'hew/Pivot';
import Spinner from 'hew/Spinner';
import { Loadable } from 'hew/utils/loadable';
import React, { ChangeEvent, useCallback, useEffect, useMemo, useState } from 'react';
import React, { ChangeEvent, useCallback, useMemo, useState } from 'react';
import { FixedSizeList as List } from 'react-window';

import { V1LocationType } from 'services/api-ts-sdk';
Expand All @@ -22,6 +22,8 @@ const BANNED_COLUMNS: Set<string> = new Set([]);
const removeBannedColumns = (columns: ProjectColumn[]) =>
columns.filter((col) => !BANNED_COLUMNS.has(col.column));

export const METADATA_SEPARATOR = '\u241F' as const;

export const LOCATION_LABEL_MAP: Record<V1LocationType, string> = {
[V1LocationType.EXPERIMENT]: 'General',
[V1LocationType.RUN]: 'General',
Expand Down Expand Up @@ -64,6 +66,11 @@ interface ColumnTabProps {
onHeatmapSelectionRemove?: (id: string) => void;
}

export const formatColumnKey = (col: ProjectColumn): string => {
if (col.location === 'LOCATION_TYPE_RUN_METADATA') return `${col.type}${METADATA_SEPARATOR}${col.column}`;
return col.column;
};

const ColumnPickerTab: React.FC<ColumnTabProps> = ({
columnState,
compare,
Expand Down Expand Up @@ -96,27 +103,12 @@ const ColumnPickerTab: React.FC<ColumnTabProps> = ({
}, [searchString, totalColumns, tab]);

const allFilteredColumnsChecked = useMemo(() => {
return filteredColumns.every((col) => {
const colType = col.type.replace('COLUMN_TYPE_', '');

if (col.column.includes('metadata'))
return columnState.includes(col.column.concat(`_${colType}`));
return columnState.includes(col.column);
});
return filteredColumns.every((col) => columnState.includes(formatColumnKey(col)));
}, [columnState, filteredColumns]);
const [metadataColumns, setMetadataColumns] = useState(() => new Map<string, number[]>()); // a map of metadata columns and found indexes

const handleShowHideAll = useCallback(() => {
const filteredColumnMap: Record<string, boolean> = filteredColumns.reduce((acc, col) => {
const colType = col.type.replace('COLUMN_TYPE_', '');

if (col.column.includes('metadata'))
return {
...acc,
[col.column.concat(`_${colType}`)]: columnState.includes(
col.column.concat(`_${colType}`),
),
};
if (col.column.includes('metadata')) return { ...acc, [formatColumnKey(col)]: columnState.includes(formatColumnKey(col)) };

return { ...acc, [col.column]: columnState.includes(col.column) };
}, {});
Expand All @@ -127,9 +119,7 @@ const ColumnPickerTab: React.FC<ColumnTabProps> = ({
...new Set([
...columnState,
...filteredColumns.map((col) => {
const colType = col.type.replace('COLUMN_TYPE_', '');

if (col.column.includes('metadata')) return col.column.concat(`_${colType}`);
if (col.column.includes('metadata')) formatColumnKey(col);
return col.column;
}),
]),
Expand All @@ -154,8 +144,7 @@ const ColumnPickerTab: React.FC<ColumnTabProps> = ({

if (id === undefined) return;

const [col] = id.split('_');
const targetCol = col.includes('metadata') ? id : col;
const targetCol = id;

if (compare) {
// pin or unpin column
Expand Down Expand Up @@ -199,61 +188,43 @@ const ColumnPickerTab: React.FC<ColumnTabProps> = ({
const col = filteredColumns[index];
const colType = col.type.replace('COLUMN_TYPE_', '');
const getColDisplayName = (col: ProjectColumn) => {
const metCol = metadataColumns.get(col.column);

if (metCol !== undefined && metCol.length > 1) {
return (
<>
{col.column} <Badge text={colType} />
</>
);
}

return (
<>
{col.displayName || col.column} <Badge text={colType} />
</>
);
};
const getId = () => {
if (col.column.includes('metadata')) return formatColumnKey(col);

return col.column;
};
const getChecked = () => {
if (col.column.includes('metadata'))
return checkedColumnNames.has(`${col.column}_${colType}`);
if (col.column.includes('metadata')) return checkedColumnNames.has(formatColumnKey(col));

return checkedColumnNames.has(col.column);
};

return (
<div
className={css.rows}
data-test="row"
data-test-id={`${col.column}_${colType}`}
key={`${col.column}_${colType}`}
data-test-id={getId()}
key={getId()}
style={style}>
<Checkbox
checked={getChecked()}
data-test="checkbox"
id={`${col.column}_${colType}`}
id={getId()}
onChange={handleColumnChange}>
{getColDisplayName(col)}
</Checkbox>
</div>
);
},
[filteredColumns, checkedColumnNames, metadataColumns, handleColumnChange],
[filteredColumns, checkedColumnNames, handleColumnChange],
);

useEffect(() => {
for (const [index, { column }] of totalColumns.entries()) {
if (column.includes('metadata')) {
const columnEntry = metadataColumns.get(column) ?? [];
if (!columnEntry.includes(index)) {
setMetadataColumns((prev) => {
prev.set(column, [...columnEntry, index]);
return prev;
});
}
}
}
}, [totalColumns, metadataColumns]);

return (
<div data-test-component="columnPickerTab" data-testid="column-picker-tab">
<Input
Expand Down
26 changes: 10 additions & 16 deletions webui/react/src/pages/FlatRuns/FlatRuns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ import { useObservable } from 'micro-observables';
import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { v4 as uuidv4 } from 'uuid';

import ColumnPickerMenu from 'components/ColumnPickerMenu';
import ColumnPickerMenu, { formatColumnKey, METADATA_SEPARATOR } from 'components/ColumnPickerMenu';
import ComparisonView from 'components/ComparisonView';
import { Error } from 'components/exceptions';
import { FilterFormStore, ROOT_ID } from 'components/FilterForm/components/FilterFormStore';
Expand Down Expand Up @@ -320,14 +320,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
const projectColumnsMap: Loadable<Record<string, ProjectColumn>> = Loadable.map(
projectColumns,
(columns) => {
return columns.reduce((acc, col) => {
const colType = col.type.replace('COLUMN_TYPE_', '');

if (col.column.includes('metadata'))
return { ...acc, [col.column.concat(`_${colType}`)]: col };

return { ...acc, [col.column]: col };
}, {});
return columns.reduce((acc, col) => ({ ...acc, [`${col.type}${METADATA_SEPARATOR}${col.column}`]: col }), {});
},
);
const columnDefs = getColumnDefs({
Expand Down Expand Up @@ -365,6 +358,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
};

let dataPath: string | undefined = undefined;
const columnDefKey = formatColumnKey(currentColumn);
switch (currentColumn.location) {
case V1LocationType.EXPERIMENT:
dataPath = `experiment.${currentColumn.column}`;
Expand Down Expand Up @@ -405,7 +399,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
settings.heatmapOn &&
!settings.heatmapSkipped.includes(currentColumn.column)
) {
columnDefs[currentColumn.column] = defaultNumberColumn(
columnDefs[columnDefKey] = defaultNumberColumn(
currentColumn.column,
currentColumn.displayName || currentColumn.column,
settings.columnWidths[currentColumn.column] ??
Expand All @@ -418,7 +412,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
},
);
} else {
columnDefs[currentColumn.column] = defaultNumberColumn(
columnDefs[columnDefKey] = defaultNumberColumn(
currentColumn.column,
currentColumn.displayName || currentColumn.column,
settings.columnWidths[currentColumn.column] ??
Expand All @@ -431,7 +425,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
break;
}
case V1ColumnType.DATE:
columnDefs[currentColumn.column] = defaultDateColumn(
columnDefs[columnDefKey] = defaultDateColumn(
currentColumn.column,
currentColumn.displayName || currentColumn.column,
settings.columnWidths[currentColumn.column] ??
Expand All @@ -441,7 +435,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
);
break;
case V1ColumnType.ARRAY:
columnDefs[currentColumn.column] = defaultArrayColumn(
columnDefs[columnDefKey] = defaultArrayColumn(
currentColumn.column,
currentColumn.displayName || currentColumn.column,
settings.columnWidths[currentColumn.column] ??
Expand All @@ -453,7 +447,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
case V1ColumnType.TEXT:
case V1ColumnType.UNSPECIFIED:
default:
columnDefs[currentColumn.column] = defaultTextColumn(
columnDefs[columnDefKey] = defaultTextColumn(
currentColumn.column,
currentColumn.displayName || currentColumn.column,
settings.columnWidths[currentColumn.column] ??
Expand All @@ -467,7 +461,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
.getOrElse([])
.find((h) => h.metricsName === currentColumn.column);

columnDefs[currentColumn.column] = searcherMetricsValColumn(
columnDefs[columnDefKey] = searcherMetricsValColumn(
settings.columnWidths[currentColumn.column],
heatmap && settings.heatmapOn && !settings.heatmapSkipped.includes(currentColumn.column)
? {
Expand All @@ -477,7 +471,7 @@ const FlatRuns: React.FC<Props> = ({ projectId, workspaceId, searchId }) => {
: undefined,
);
}
return columnDefs[currentColumn.column];
return columnDefs[columnDefKey];
})
.flatMap((col) => (col ? [col] : []));
return gridColumns;
Expand Down

0 comments on commit c3b4786

Please sign in to comment.