diff --git a/webui/react/package-lock.json b/webui/react/package-lock.json index 3d496043f6b..f293bbc4889 100644 --- a/webui/react/package-lock.json +++ b/webui/react/package-lock.json @@ -22,7 +22,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", @@ -7725,9 +7725,9 @@ }, "node_modules/hew": { "name": "@hpe.com/hew", - "version": "0.6.38", - "resolved": "https://registry.npmjs.org/@hpe.com/hew/-/hew-0.6.38.tgz", - "integrity": "sha512-WUvaM18JAx7JQwt3s655WR6qLKWFKWixE7Phgb4541fez3F19YoY7ovTSF/W31s3VeABk4QWcxjcX6P1iNwQbQ==", + "version": "0.6.39", + "resolved": "https://registry.npmjs.org/@hpe.com/hew/-/hew-0.6.39.tgz", + "integrity": "sha512-lyLO+Zk2oh1QxdUgE7jyeG2CdyAkMYYEdWwcPs8Jl4k3nP0aEBrVzvEopD8l2tz7Rfy9DWc1YIU3ee2sQsiItw==", "dependencies": { "@ant-design/icons": "^5.0.1", "@codemirror/lang-markdown": "^6.2.1", diff --git a/webui/react/package.json b/webui/react/package.json index a215890b38f..1f071e107b3 100644 --- a/webui/react/package.json +++ b/webui/react/package.json @@ -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", diff --git a/webui/react/src/components/OptionsMenu.settings.ts b/webui/react/src/components/OptionsMenu.settings.ts index 37faea58795..bfb817a50db 100644 --- a/webui/react/src/components/OptionsMenu.settings.ts +++ b/webui/react/src/components/OptionsMenu.settings.ts @@ -24,7 +24,6 @@ export const dataGridGlobalSettingsConfig = t.intersection([ export const dataGridGlobalSettingsDefaults = { rowHeight: RowHeight.MEDIUM, - tableViewMode: 'scroll', } as const; export const dataGridGlobalSettingsPath = 'globalTableSettings'; diff --git a/webui/react/src/components/Searches/Searches.tsx b/webui/react/src/components/Searches/Searches.tsx index 8279734708b..4d7b9065c39 100644 --- a/webui/react/src/components/Searches/Searches.tsx +++ b/webui/react/src/components/Searches/Searches.tsx @@ -153,7 +153,6 @@ const Searches: React.FC = ({ project }) => { const { settings: globalSettings, updateSettings: updateGlobalSettings } = useSettings(settingsConfigGlobal); - const isPagedView = true; const [sorts, setSorts] = useState(() => { if (!isLoadingSettings) { return parseSortString(settings.sortString); @@ -306,8 +305,6 @@ const Searches: React.FC = ({ project }) => { const fetchExperiments = useCallback(async (): Promise => { 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 }; @@ -329,32 +326,15 @@ const Searches: React.FC = ({ 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, ); @@ -368,7 +348,6 @@ const Searches: React.FC = ({ project }) => { experimentFilters, filtersString, isLoadingSettings, - isPagedView, loadableFormset, page, sortString, @@ -609,10 +588,6 @@ const Searches: React.FC = ({ project }) => { [isLoadingSettings, settings.columns], ); - const showPagination = useMemo(() => { - return isPagedView && !isMobile; - }, [isMobile, isPagedView]); - const { ui: { theme: appTheme }, isDarkMode, @@ -881,9 +856,6 @@ const Searches: React.FC = ({ project }) => { getHeaderMenuItems={getHeaderMenuItems} getRowAccentColor={getRowAccentColor} imperativeRef={dataGridRef} - isPaginated={isPagedView} - page={page} - pageSize={PAGE_SIZE} pinnedColumnsCount={isLoadingSettings ? 0 : settings.pinnedColumnsCount} renderContextMenuComponent={({ cell, @@ -911,15 +883,13 @@ const Searches: React.FC = ({ 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 && ( = ({ project }) => { const { settings: globalSettings, updateSettings: updateGlobalSettings } = useSettings(settingsConfigGlobal); - const isPagedView = true; const [sorts, setSorts] = useState(() => { if (!isLoadingSettings) { return parseSortString(settings.sortString); @@ -334,41 +333,19 @@ const F_ExperimentList: React.FC = ({ project }) => { const fetchExperiments = useCallback(async (): Promise => { 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, ); @@ -382,7 +359,6 @@ const F_ExperimentList: React.FC = ({ project }) => { experimentFilters, filtersString, isLoadingSettings, - isPagedView, loadableFormset, page, sortString, @@ -738,11 +714,9 @@ const F_ExperimentList: React.FC = ({ 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 }, @@ -1125,9 +1099,6 @@ const F_ExperimentList: React.FC = ({ project }) => { getRowAccentColor={getRowAccentColor} hideUnpinned={settings.compare} imperativeRef={dataGridRef} - isPaginated={isPagedView} - page={page} - pageSize={PAGE_SIZE} pinnedColumnsCount={isLoadingSettings ? 0 : settings.pinnedColumnsCount} renderContextMenuComponent={({ cell, @@ -1158,11 +1129,9 @@ const F_ExperimentList: React.FC = ({ 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} /> diff --git a/webui/react/src/pages/FlatRuns/FlatRuns.tsx b/webui/react/src/pages/FlatRuns/FlatRuns.tsx index 18f109cea2d..fb539e88813 100644 --- a/webui/react/src/pages/FlatRuns/FlatRuns.tsx +++ b/webui/react/src/pages/FlatRuns/FlatRuns.tsx @@ -160,7 +160,6 @@ const FlatRuns: React.FC = ({ projectId, searchId }) => { const [isOpenFilter, setIsOpenFilter] = useState(false); const [runs, setRuns] = useState[]>(INITIAL_LOADING_RUNS); - const isPagedView = true; const [sorts, setSorts] = useState(() => { if (!isLoadingSettings) { @@ -216,11 +215,9 @@ const FlatRuns: React.FC = ({ 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(); @@ -480,12 +477,11 @@ const FlatRuns: React.FC = ({ 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, }, @@ -493,18 +489,7 @@ const FlatRuns: React.FC = ({ projectId, searchId }) => { ); 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, ); @@ -517,7 +502,6 @@ const FlatRuns: React.FC = ({ projectId, searchId }) => { canceler.signal, filtersString, isLoadingSettings, - isPagedView, loadableFormset, page, projectId, @@ -1029,19 +1013,14 @@ const FlatRuns: React.FC = ({ 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} />