Skip to content

Commit

Permalink
refactor: remove DataGrid pagination code (ET-259) (#9520)
Browse files Browse the repository at this point in the history
  • Loading branch information
@johnkim-det
johnkim-det authored Jun 17, 2024
1 parent edbeee9 commit 88b01c6
Show file tree
Hide file tree
Showing 6 changed files with 19 additions and 102 deletions.
8 changes: 4 additions & 4 deletions webui/react/package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion webui/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@
"fp-ts": "^2.16.5",
"fuse.js": "^7.0.0",
"hermes-parallel-coordinates": "^0.6.17",
"hew": "npm:@hpe.com/hew@^0.6.38",
"hew": "npm:@hpe.com/hew@^0.6.39",
"humanize-duration": "^3.28.0",
"immutable": "^4.3.0",
"io-ts": "^2.2.21",
Expand Down
1 change: 0 additions & 1 deletion webui/react/src/components/OptionsMenu.settings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ export const dataGridGlobalSettingsConfig = t.intersection([

export const dataGridGlobalSettingsDefaults = {
rowHeight: RowHeight.MEDIUM,
tableViewMode: 'scroll',
} as const;

export const dataGridGlobalSettingsPath = 'globalTableSettings';
Expand Down
38 changes: 4 additions & 34 deletions webui/react/src/components/Searches/Searches.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,6 @@ const Searches: React.FC<Props> = ({ project }) => {
const { settings: globalSettings, updateSettings: updateGlobalSettings } =
useSettings<DataGridGlobalSettings>(settingsConfigGlobal);

const isPagedView = true;
const [sorts, setSorts] = useState<Sort[]>(() => {
if (!isLoadingSettings) {
return parseSortString(settings.sortString);
Expand Down Expand Up @@ -306,8 +305,6 @@ const Searches: React.FC<Props> = ({ project }) => {
const fetchExperiments = useCallback(async (): Promise<void> => {
if (isLoadingSettings || Loadable.isNotLoaded(loadableFormset)) return;
try {
const tableOffset = Math.max((page - 0.5) * PAGE_SIZE, 0);

// always filter out single trial experiments
const filters = JSON.parse(filtersString);
const existingFilterGroup = { ...filters.filterGroup };
Expand All @@ -329,32 +326,15 @@ const Searches: React.FC<Props> = ({ project }) => {
{
...experimentFilters,
filter: JSON.stringify(filters),
limit: isPagedView ? settings.pageLimit : 2 * PAGE_SIZE,
offset: isPagedView ? page * settings.pageLimit : tableOffset,
limit: settings.pageLimit,
offset: page * settings.pageLimit,
sort: sortString || undefined,
},
{ signal: canceler.signal },
);
const total = response.pagination.total ?? 0;
const loadedExperiments = response.experiments;

setExperiments((prev) => {
if (isPagedView) {
return loadedExperiments.map((experiment) => Loaded(experiment));
}

// Ensure experiments array has enough space for full result set
const newExperiments = prev.length !== total ? new Array(total).fill(NotLoaded) : [...prev];

// Update the list with the fetched results.
Array.prototype.splice.apply(newExperiments, [
tableOffset,
loadedExperiments.length,
...loadedExperiments.map((experiment) => Loaded(experiment)),
]);

return newExperiments;
});
setExperiments(loadedExperiments.map((experiment) => Loaded(experiment)));
setTotal(
response.pagination.total !== undefined ? Loaded(response.pagination.total) : NotLoaded,
);
Expand All @@ -368,7 +348,6 @@ const Searches: React.FC<Props> = ({ project }) => {
experimentFilters,
filtersString,
isLoadingSettings,
isPagedView,
loadableFormset,
page,
sortString,
Expand Down Expand Up @@ -609,10 +588,6 @@ const Searches: React.FC<Props> = ({ project }) => {
[isLoadingSettings, settings.columns],
);

const showPagination = useMemo(() => {
return isPagedView && !isMobile;
}, [isMobile, isPagedView]);

const {
ui: { theme: appTheme },
isDarkMode,
Expand Down Expand Up @@ -881,9 +856,6 @@ const Searches: React.FC<Props> = ({ project }) => {
getHeaderMenuItems={getHeaderMenuItems}
getRowAccentColor={getRowAccentColor}
imperativeRef={dataGridRef}
isPaginated={isPagedView}
page={page}
pageSize={PAGE_SIZE}
pinnedColumnsCount={isLoadingSettings ? 0 : settings.pinnedColumnsCount}
renderContextMenuComponent={({
cell,
Expand Down Expand Up @@ -911,15 +883,13 @@ const Searches: React.FC<Props> = ({ project }) => {
selection={selection}
sorts={sorts}
staticColumns={STATIC_COLUMNS}
total={Loadable.getOrElse(PAGE_SIZE, total)}
onColumnResize={handleColumnWidthChange}
onColumnsOrderChange={handleColumnsOrderChange}
onContextMenuComplete={handleContextMenuComplete}
onPageUpdate={setPage}
onPinnedColumnsCountChange={handlePinnedColumnsCountChange}
onSelectionChange={handleSelectionChange}
/>
{showPagination && (
{!isMobile && (
<Row>
<Column align="right">
<Pagination
Expand Down
41 changes: 5 additions & 36 deletions webui/react/src/pages/F_ExpList/F_ExperimentList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,7 +163,6 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {

const { settings: globalSettings, updateSettings: updateGlobalSettings } =
useSettings<DataGridGlobalSettings>(settingsConfigGlobal);
const isPagedView = true;
const [sorts, setSorts] = useState<Sort[]>(() => {
if (!isLoadingSettings) {
return parseSortString(settings.sortString);
Expand Down Expand Up @@ -334,41 +333,19 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
const fetchExperiments = useCallback(async (): Promise<void> => {
if (isLoadingSettings || Loadable.isNotLoaded(loadableFormset)) return;
try {
const tableOffset = Math.max((page - 0.5) * PAGE_SIZE, 0);
const response = await searchExperiments(
{
...experimentFilters,
filter: filtersString,
limit: isPagedView ? settings.pageLimit : 2 * PAGE_SIZE,
offset: isPagedView ? page * settings.pageLimit : tableOffset,
limit: settings.pageLimit,
offset: page * settings.pageLimit,
sort: sortString || undefined,
},
{ signal: canceler.signal },
);
const total = response.pagination.total ?? 0;
const loadedExperiments = response.experiments;

setExperiments((prev) => {
if (isPagedView) {
return loadedExperiments.map((experiment) => Loaded(experiment));
}

let newExperiments = prev;

// Fill out the loadable experiments array with total count.
if (prev.length !== total) {
newExperiments = new Array(total).fill(NotLoaded);
}

// Update the list with the fetched results.
Array.prototype.splice.apply(newExperiments, [
tableOffset,
loadedExperiments.length,
...loadedExperiments.map((experiment) => Loaded(experiment)),
]);

return newExperiments;
});
setExperiments(loadedExperiments.map((experiment) => Loaded(experiment)));
setTotal(
response.pagination.total !== undefined ? Loaded(response.pagination.total) : NotLoaded,
);
Expand All @@ -382,7 +359,6 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
experimentFilters,
filtersString,
isLoadingSettings,
isPagedView,
loadableFormset,
page,
sortString,
Expand Down Expand Up @@ -738,11 +714,9 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {

const showPagination = useMemo(() => {
return (
isPagedView &&
(!settings.compare || settings.pinnedColumnsCount !== 0) &&
!(isMobile && settings.compare)
(!settings.compare || settings.pinnedColumnsCount !== 0) && !(isMobile && settings.compare)
);
}, [isMobile, isPagedView, settings.compare, settings.pinnedColumnsCount]);
}, [isMobile, settings.compare, settings.pinnedColumnsCount]);

const {
ui: { theme: appTheme },
Expand Down Expand Up @@ -1125,9 +1099,6 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
getRowAccentColor={getRowAccentColor}
hideUnpinned={settings.compare}
imperativeRef={dataGridRef}
isPaginated={isPagedView}
page={page}
pageSize={PAGE_SIZE}
pinnedColumnsCount={isLoadingSettings ? 0 : settings.pinnedColumnsCount}
renderContextMenuComponent={({
cell,
Expand Down Expand Up @@ -1158,11 +1129,9 @@ const F_ExperimentList: React.FC<Props> = ({ project }) => {
selection={selection}
sorts={sorts}
staticColumns={STATIC_COLUMNS}
total={Loadable.getOrElse(PAGE_SIZE, total)}
onColumnResize={handleColumnWidthChange}
onColumnsOrderChange={handleColumnsOrderChange}
onContextMenuComplete={handleContextMenuComplete}
onPageUpdate={setPage}
onPinnedColumnsCountChange={handlePinnedColumnsCountChange}
onSelectionChange={handleSelectionChange}
/>
Expand Down
31 changes: 5 additions & 26 deletions webui/react/src/pages/FlatRuns/FlatRuns.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -160,7 +160,6 @@ const FlatRuns: React.FC<Props> = ({ projectId, searchId }) => {

const [isOpenFilter, setIsOpenFilter] = useState<boolean>(false);
const [runs, setRuns] = useState<Loadable<FlatRun>[]>(INITIAL_LOADING_RUNS);
const isPagedView = true;

const [sorts, setSorts] = useState<Sort[]>(() => {
if (!isLoadingSettings) {
Expand Down Expand Up @@ -216,11 +215,9 @@ const FlatRuns: React.FC<Props> = ({ projectId, searchId }) => {

const showPagination = useMemo(() => {
return (
isPagedView &&
(!settings.compare || settings.pinnedColumnsCount !== 0) &&
!(isMobile && settings.compare)
(!settings.compare || settings.pinnedColumnsCount !== 0) && !(isMobile && settings.compare)
);
}, [isMobile, isPagedView, settings.compare, settings.pinnedColumnsCount]);
}, [isMobile, settings.compare, settings.pinnedColumnsCount]);

const [loadedSelectedRuns, loadedSelectedRunIds] = useMemo(() => {
const selectedMap = new Map<number, { run: FlatRun; index: number }>();
Expand Down Expand Up @@ -480,31 +477,19 @@ const FlatRuns: React.FC<Props> = ({ projectId, searchId }) => {
kind: 'group',
};
}
const tableOffset = Math.max((page - 0.5) * PAGE_SIZE, 0);
const response = await searchRuns(
{
filter: JSON.stringify(filters),
limit: isPagedView ? settings.pageLimit : 2 * PAGE_SIZE,
offset: isPagedView ? page * settings.pageLimit : tableOffset,
limit: settings.pageLimit,
offset: page * settings.pageLimit,
projectId: projectId,
sort: sortString || undefined,
},
{ signal: canceler.signal },
);
const loadedRuns = response.runs;

setRuns((prev) => {
if (isPagedView) {
return loadedRuns.map((run) => Loaded(run));
}

// Update the list with the fetched results.
return prev.toSpliced(
tableOffset,
loadedRuns.length,
...loadedRuns.map((experiment) => Loaded(experiment)),
);
});
setRuns(loadedRuns.map((run) => Loaded(run)));
setTotal(
response.pagination.total !== undefined ? Loaded(response.pagination.total) : NotLoaded,
);
Expand All @@ -517,7 +502,6 @@ const FlatRuns: React.FC<Props> = ({ projectId, searchId }) => {
canceler.signal,
filtersString,
isLoadingSettings,
isPagedView,
loadableFormset,
page,
projectId,
Expand Down Expand Up @@ -1029,19 +1013,14 @@ const FlatRuns: React.FC<Props> = ({ projectId, searchId }) => {
getHeaderMenuItems={getHeaderMenuItems}
getRowAccentColor={getRowAccentColor}
imperativeRef={dataGridRef}
isPaginated={isPagedView}
page={page}
pageSize={PAGE_SIZE}
pinnedColumnsCount={isLoadingSettings ? 0 : settings.pinnedColumnsCount}
rowHeight={rowHeightMap[globalSettings.rowHeight as RowHeight]}
selection={selection}
sorts={sorts}
staticColumns={STATIC_COLUMNS}
total={total.getOrElse(PAGE_SIZE)}
onColumnResize={handleColumnWidthChange}
onColumnsOrderChange={handleColumnsOrderChange}
onContextMenuComplete={handleContextMenuComplete}
onPageUpdate={setPage}
onPinnedColumnsCountChange={handlePinnedColumnsCountChange}
onSelectionChange={handleSelectionChange}
/>
Expand Down

0 comments on commit 88b01c6

Please sign in to comment.