fix: bulk action bug in the old experiment table that cannot trigger …

…bulk actions across pages (#9404)

webui/react/src/pages/ExperimentList.tsx

@@ -11,6 +11,7 @@ import { useTheme } from 'hew/Theme';
 import Toggle from 'hew/Toggle';
 import { Body } from 'hew/Typography';
 import { Loadable } from 'hew/utils/loadable';
+import _ from 'lodash';
 import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import Badge, { BadgeType } from 'components/Badge';
@@ -124,6 +125,10 @@ const MenuKey = {
 
 const ExperimentList: React.FC<Props> = ({ project }) => {
   const [experiments, setExperiments] = useState<BulkExperimentItem[]>([]);
+  const [hiddenSelectedExperiments, setHiddenSelectedExperiments] = useState<BulkExperimentItem[]>(
+    // this is used to selected experiments that are not visible in the experiment table page
+    [],
+  );
   const [labels, setLabels] = useState<string[]>([]);
   const [batchMovingExperimentIds, setBatchMovingExperimentIds] = useState<number[]>();
   const [batchRetainLogsExperimentIds, setBatchRetainLogsExperimentIds] = useState<number[]>([]);
@@ -149,14 +154,14 @@ const ExperimentList: React.FC<Props> = ({ project }) => {
   } = useSettings<ExperimentListSettings>(settingsConfig);
 
   const experimentMap = useMemo(() => {
-    return (experiments || []).reduce(
-      (acc, experiment) => {
+    return [...experiments, ...hiddenSelectedExperiments].reduce(
+      (acc: Record<RecordKey, ProjectExperiment>, experiment) => {
         acc[experiment.id] = getProjectExperimentForExperimentItem(experiment, project);
         return acc;
       },
-      {} as Record<RecordKey, ProjectExperiment>,
+      {},
     );
-  }, [experiments, project]);
+  }, [experiments, project, hiddenSelectedExperiments]);
 
   const filterCount = useMemo(() => activeSettings(filterKeys).length, [activeSettings]);
 
@@ -228,6 +233,28 @@ const ExperimentList: React.FC<Props> = ({ project }) => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [id, isLoadingSettings, settings, labelsString, pinnedString, statesString, usersString]);
 
+  const fetchHiddenSelectedExperiments = useCallback(async (): Promise<void> => {
+    try {
+      const fetchedExpIds = new Set(experiments.map((exp) => exp.id));
+      const hiddenSelectedExpIds = (settings.row ?? []).filter((id) => !fetchedExpIds.has(id));
+      if (hiddenSelectedExpIds.length > 0) {
+        const chunkedSelectedExperimentIds = _.chunk(hiddenSelectedExpIds, settings.tableLimit);
+        const selectedExperiments = await Promise.all(
+          chunkedSelectedExperimentIds.map(async (ids) => {
+            const expResponse = await getExperiments(
+              { experimentIdFilter: { incl: ids } },
+              { signal: canceler.current.signal },
+            );
+            return expResponse.experiments;
+          }),
+        );
+        setHiddenSelectedExperiments(selectedExperiments.flat());
+      }
+    } catch (e) {
+      handleError(e, { publicSubject: 'Unable to fetch selected experiments.' });
+    }
+  }, [experiments, settings.row, settings.tableLimit]);
+
   const fetchLabels = useCallback(async () => {
     try {
       const labels = await getExperimentLabels(
@@ -246,6 +273,10 @@ const ExperimentList: React.FC<Props> = ({ project }) => {
   }, [fetchExperiments, fetchLabels]);
 
   const { stopPolling } = usePolling(fetchAll, { rerunOnNewFn: true });
+  const { stopPolling: stopHiddenSelectExpPolling } = usePolling(fetchHiddenSelectedExperiments, {
+    interval: 30_000, // 30s
+    rerunOnNewFn: true,
+  });
 
   const experimentTags = useExperimentTags(fetchAll);
 
@@ -903,8 +934,11 @@ const ExperimentList: React.FC<Props> = ({ project }) => {
   }, []);
 
   useEffect(() => {
-    return () => stopPolling();
-  }, [stopPolling]);
+    return () => {
+      stopPolling();
+      stopHiddenSelectExpPolling();
+    };
+  }, [stopHiddenSelectExpPolling, stopPolling]);
 
   useEffect(() => {
     const currentCanceler = canceler.current;