preserve sort and filter when loading more experiments

frontend/src/api/pipelines/custom.ts

@@ -139,6 +139,29 @@ export const listExperiments: ListExperimentsAPI = (hostPath) => (opts, params)
     proxyGET(hostPath, '/apis/v2beta1/experiments', pipelineParamsToQuery(params), opts),
   );
 
+export const listActiveExperiments: ListExperimentsAPI = (hostPath) => (opts, params) =>
+  handlePipelineFailures(
+    proxyGET(
+      hostPath,
+      '/apis/v2beta1/experiments',
+      pipelineParamsToQuery({
+        ...params,
+        filter: {
+          predicates: [
+            {
+              key: 'storage_state',
+              operation: PipelinesFilterOp.EQUALS,
+              // eslint-disable-next-line camelcase
+              string_value: StorageStateKF.AVAILABLE,
+            },
+            ...(params?.filter?.predicates ?? []),
+          ],
+        },
+      }),
+      opts,
+    ),
+  );
+
 export const listPipelines: ListPipelinesAPI = (hostPath) => (opts, params) =>
   handlePipelineFailures(
     proxyGET(hostPath, '/apis/v2beta1/pipelines', pipelineParamsToQuery(params), opts),

frontend/src/concepts/pipelines/apiHooks/useExperiments.ts

@@ -40,8 +40,19 @@ const useExperiments = (options?: PipelineOptions): FetchState<PipelineListPaged
 
 export const useActiveExperiments = (
   options?: PipelineOptions,
-): FetchState<PipelineListPaged<ExperimentKFv2>> =>
-  useExperimentsByStorageState(options, StorageStateKF.AVAILABLE);
+): FetchState<PipelineListPaged<ExperimentKFv2>> => {
+  const { api } = usePipelinesAPI();
+  return usePipelineQuery<ExperimentKFv2>(
+    React.useCallback(
+      (opts, params) =>
+        api
+          .listActiveExperiments(opts, params)
+          .then((result) => ({ ...result, items: result.experiments })),
+      [api],
+    ),
+    options,
+  );
+};
 
 export const useArchivedExperiments = (
   options?: PipelineOptions,

frontend/src/concepts/pipelines/content/experiment/ExperimentSelector.tsx

@@ -6,10 +6,7 @@ import { TableBase, getTableColumnSort } from '~/components/table';
 import { ExperimentKFv2 } from '~/concepts/pipelines/kfTypes';
 import PipelineViewMoreFooterRow from '~/concepts/pipelines/content/tables/PipelineViewMoreFooterRow';
 import DashboardEmptyTableView from '~/concepts/dashboard/DashboardEmptyTableView';
-import {
-  useActiveExperimentSelector,
-  useAllExperimentSelector,
-} from '~/concepts/pipelines/content/pipelineSelector/useCreateSelectors';
+import { useActiveExperimentSelector } from '~/concepts/pipelines/content/pipelineSelector/useCreateSelectors';
 import { experimentSelectorColumns } from '~/concepts/pipelines/content/experiment/columns';
 import SearchSelector from '~/components/searchSelector/SearchSelector';
 
@@ -19,7 +16,7 @@ type ExperimentSelectorProps = {
 };
 
 const InnerExperimentSelector: React.FC<
-  ReturnType<typeof useAllExperimentSelector> & ExperimentSelectorProps
+  ReturnType<typeof useActiveExperimentSelector> & ExperimentSelectorProps
 > = ({
   fetchedSize,
   totalSize,
@@ -93,12 +90,6 @@ const InnerExperimentSelector: React.FC<
     )}
   </SearchSelector>
 );
-
-export const AllExperimentSelector: React.FC<ExperimentSelectorProps> = (props) => {
-  const selectorProps = useAllExperimentSelector();
-  return <InnerExperimentSelector {...props} {...selectorProps} />;
-};
-
 export const ActiveExperimentSelector: React.FC<ExperimentSelectorProps> = (props) => {
   const selectorProps = useActiveExperimentSelector();
   return <InnerExperimentSelector {...props} {...selectorProps} />;

frontend/src/concepts/pipelines/content/pipelineSelector/useCreateSelectors.ts

@@ -2,13 +2,11 @@ import {
   useSelectorSearch,
   UseSelectorSearchValue,
 } from '~/concepts/pipelines/content/pipelineSelector/utils';
-import useExperimentTable, {
-  useActiveExperimentTable,
-} from '~/concepts/pipelines/content/tables/experiment/useExperimentTable';
+import { useActiveExperimentTable } from '~/concepts/pipelines/content/tables/experiment/useExperimentTable';
 import usePipelinesTable from '~/concepts/pipelines/content/tables/pipeline/usePipelinesTable';
 import {
   LoadMoreProps,
-  useExperimentLoadMore,
+  useActiveExperimentLoadMore,
   usePipelineLoadMore,
 } from '~/concepts/pipelines/content/tables/usePipelineLoadMore';
 import {
@@ -20,8 +18,6 @@ import {
   ExperimentKFv2,
   PipelineCoreResourceKFv2,
   PipelineKFv2,
-  PipelinesFilterOp,
-  StorageStateKF,
 } from '~/concepts/pipelines/kfTypes';
 import { PipelineListPaged } from '~/concepts/pipelines/types';
 import { FetchState } from '~/utilities/useFetchState';
@@ -38,40 +34,19 @@ type UsePipelineSelectorData<DataType> = {
   searchProps: Omit<UseSelectorSearchValue, 'onClear' | 'totalSize'>;
 } & Pick<UseSelectorSearchValue, 'totalSize'>;
 
-export const getExperimentSelector =
-  (useTable: typeof useExperimentTable, storageState?: StorageStateKF) =>
-  (): UsePipelineSelectorData<ExperimentKFv2> => {
-    const experimentsTable = useTable();
-    const [[{ items: initialData, nextPageToken: initialPageToken }, loaded]] = experimentsTable;
+export const useActiveExperimentSelector = (): UsePipelineSelectorData<ExperimentKFv2> => {
+  const experimentsTable = useActiveExperimentTable();
+  const [[{ items: initialData, nextPageToken: initialPageToken }, loaded]] = experimentsTable;
 
-    return useCreateSelector<ExperimentKFv2>(experimentsTable, () =>
-      useExperimentLoadMore({
-        initialData,
-        initialPageToken,
-        loaded,
-      })({
-        ...(storageState && {
-          filter: {
-            predicates: [
-              {
-                key: 'storage_state',
-                operation: PipelinesFilterOp.EQUALS,
-                // eslint-disable-next-line camelcase
-                string_value: storageState,
-              },
-            ],
-          },
-        }),
-      }),
-    );
-  };
-
-export const useAllExperimentSelector = getExperimentSelector(useExperimentTable);
-
-export const useActiveExperimentSelector = getExperimentSelector(
-  useActiveExperimentTable,
-  StorageStateKF.AVAILABLE,
-);
+  return useCreateSelector<ExperimentKFv2>(
+    experimentsTable,
+    useActiveExperimentLoadMore({
+      initialData,
+      initialPageToken,
+      loaded,
+    }),
+  );
+};
 
 export const usePipelineSelector = (): UsePipelineSelectorData<PipelineKFv2> => {
   const pipelinesTable = usePipelinesTable();

frontend/src/concepts/pipelines/content/tables/usePipelineLoadMore.ts

@@ -10,7 +10,7 @@ export type LoadMoreProps = {
   filter?: PipelinesFilter;
 };
 
-export const useExperimentLoadMore = (
+export const useActiveExperimentLoadMore = (
   initialState: UsePipelineDataRefProps<ExperimentKFv2>,
 ): ((props: LoadMoreProps) => [ExperimentKFv2[], () => Promise<void>]) => {
   const { api } = usePipelinesAPI();
@@ -22,7 +22,7 @@ export const useExperimentLoadMore = (
         if (!pageTokenRef.current) {
           return;
         }
-        const result = await api.listExperiments(
+        const result = await api.listActiveExperiments(
           {},
           getLoadMorePipelineParams({ pageTokenRef, ...loadMoreProps }),
         );

frontend/src/concepts/pipelines/context/usePipelineAPIState.ts

@@ -13,6 +13,7 @@ import {
   getPipelineRecurringRun,
   getPipelineVersion,
   listExperiments,
+  listActiveExperiments,
   listPipelineRecurringRuns,
   listPipelineRuns,
   listPipelineActiveRuns,
@@ -61,6 +62,7 @@ const usePipelineAPIState = (
       deletePipelineVersion: deletePipelineVersion(path),
       deleteExperiment: deleteExperiment(path),
       listExperiments: listExperiments(path),
+      listActiveExperiments: listActiveExperiments(path),
       listPipelines: listPipelines(path),
       listPipelineRuns: listPipelineRuns(path),
       listPipelineActiveRuns: listPipelineActiveRuns(path),

frontend/src/concepts/pipelines/types.ts

@@ -191,6 +191,7 @@ export type PipelineAPIs = {
   deletePipelineVersion: DeletePipelineVersion;
   deleteExperiment: DeleteExperiment;
   listExperiments: ListExperiments;
+  listActiveExperiments: ListExperiments;
   listPipelines: ListPipelines;
   listArtifacts: ListArtifacts;
   listPipelineRuns: ListPipelineRuns;