feat: add actual select all to glide tables [ET-238]

webui/react/src/components/ComparisonView.test.mock.tsx

@@ -1,11 +1,14 @@
+import { useObservable } from 'micro-observables';
 import React from 'react';
 
 import { useGlasbey } from 'hooks/useGlasbey';
 import { RunMetricData } from 'hooks/useMetrics';
+import { V1LocationType } from 'services/api-ts-sdk';
 import { ExperimentWithTrial, Scale } from 'types';
 import { generateTestRunData } from 'utils/tests/generateTestData';
 
 import ComparisonView from './ComparisonView';
+import { FilterFormStore } from './FilterForm/components/FilterFormStore';
 
 export const METRIC_DATA: RunMetricData = {
   data: {
@@ -245,6 +248,7 @@ export const ExperimentComparisonViewWithMocks: React.FC<Props> = ({
   onWidthChange,
   open,
 }: Props): JSX.Element => {
+  const tableFilters = useObservable(new FilterFormStore(V1LocationType.EXPERIMENT).asJsonString);
   const colorMap = useGlasbey(SELECTED_EXPERIMENTS.map((exp) => exp.experiment.id));
   return (
     <ComparisonView
@@ -258,6 +262,7 @@ export const ExperimentComparisonViewWithMocks: React.FC<Props> = ({
       initialWidth={200}
       open={open}
       projectId={1}
+      tableFilters={tableFilters}
       onWidthChange={onWidthChange}>
       {children}
     </ComparisonView>
@@ -270,6 +275,7 @@ export const RunComparisonViewWithMocks: React.FC<Props> = ({
   onWidthChange,
   open,
 }: Props): JSX.Element => {
+  const tableFilters = useObservable(new FilterFormStore(V1LocationType.RUN).asJsonString);
   const colorMap = useGlasbey(SELECTED_RUNS.map((run) => run.id));
   return (
     <ComparisonView
@@ -283,6 +289,7 @@ export const RunComparisonViewWithMocks: React.FC<Props> = ({
           ? { selections: [], type: 'ONLY_IN' }
           : { selections: SELECTED_RUNS.map((run) => run.id), type: 'ONLY_IN' }
       }
+      tableFilters={tableFilters}
       onWidthChange={onWidthChange}>
       {children}
     </ComparisonView>

webui/react/src/components/ComparisonView.tsx

@@ -15,13 +15,16 @@ import useMobile from 'hooks/useMobile';
 import useScrollbarWidth from 'hooks/useScrollbarWidth';
 import { TrialsComparisonTable } from 'pages/ExperimentDetails/TrialsComparisonModal';
 import { searchExperiments, searchRuns } from 'services/api';
+import { V1ColumnType, V1LocationType } from 'services/api-ts-sdk';
 import { ExperimentWithTrial, FlatRun, SelectionType, XOR } from 'types';
 import handleError from 'utils/error';
 import { getIdsFilter as getExperimentIdsFilter } from 'utils/experiment';
+import { combine } from 'utils/filterFormSet';
 import { getIdsFilter as getRunIdsFilter } from 'utils/flatRun';
 
 import CompareMetrics from './CompareMetrics';
 import { INIT_FORMSET } from './FilterForm/components/FilterFormStore';
+import { FilterFormSet, Operator } from './FilterForm/components/type';
 
 export const EMPTY_MESSAGE = 'No items selected.';
 
@@ -33,6 +36,8 @@ interface BaseProps {
   onWidthChange: (width: number) => void;
   fixedColumnsCount: number;
   projectId: number;
+  searchId?: number;
+  tableFilters: string;
 }
 
 type Props = XOR<{ experimentSelection: SelectionType }, { runSelection: SelectionType }> &
@@ -132,6 +137,8 @@ const ComparisonView: React.FC<Props> = ({
   projectId,
   experimentSelection,
   runSelection,
+  searchId,
+  tableFilters,
 }) => {
   const scrollbarWidth = useScrollbarWidth();
   const hasPinnedColumns = fixedColumnsCount > 1;
@@ -148,7 +155,10 @@ const ComparisonView: React.FC<Props> = ({
       return NotLoaded;
     }
     try {
-      const filterFormSet = INIT_FORMSET;
+      const filterFormSet =
+        experimentSelection.type === 'ALL_EXCEPT'
+          ? (JSON.parse(tableFilters) as FilterFormSet)
+          : INIT_FORMSET;
       const filter = getExperimentIdsFilter(filterFormSet, experimentSelection);
       const response = await searchExperiments({
         filter: JSON.stringify(filter),
@@ -162,7 +172,7 @@ const ComparisonView: React.FC<Props> = ({
       handleError(e, { publicSubject: 'Unable to fetch experiments for comparison' });
       return NotLoaded;
     }
-  }, [experimentSelection, open]);
+  }, [experimentSelection, open, tableFilters]);
 
   const loadableSelectedRuns = useAsync(async () => {
     if (
@@ -172,12 +182,28 @@ const ComparisonView: React.FC<Props> = ({
     ) {
       return NotLoaded;
     }
-    const filterFormSet = INIT_FORMSET;
+    const filterFormSet =
+      runSelection.type === 'ALL_EXCEPT'
+        ? (JSON.parse(tableFilters) as FilterFormSet)
+        : INIT_FORMSET;
     try {
       const filter = getRunIdsFilter(filterFormSet, runSelection);
+      if (searchId) {
+        // only display trials for search
+        const searchFilter = {
+          columnName: 'experimentId',
+          kind: 'field' as const,
+          location: V1LocationType.RUN,
+          operator: Operator.Eq,
+          type: V1ColumnType.NUMBER,
+          value: searchId,
+        };
+        filter.filterGroup = combine(filter.filterGroup, 'and', searchFilter);
+      }
       const response = await searchRuns({
         filter: JSON.stringify(filter),
         limit: SELECTION_LIMIT,
+        projectId,
       });
       setIsSelectionLimitReached(
         !!response?.pagination?.total && response?.pagination?.total > SELECTION_LIMIT,
@@ -187,7 +213,7 @@ const ComparisonView: React.FC<Props> = ({
       handleError(e, { publicSubject: 'Unable to fetch runs for comparison' });
       return NotLoaded;
     }
-  }, [open, runSelection]);
+  }, [open, projectId, runSelection, searchId, tableFilters]);
 
   const minWidths: [number, number] = useMemo(() => {
     return [fixedColumnsCount * MIN_COLUMN_WIDTH + scrollbarWidth, 100];

webui/react/src/components/ExperimentActionDropdown.tsx

@@ -353,6 +353,7 @@ const ExperimentActionDropdown: React.FC<Props> = ({
       />
       <ExperimentMoveModal.Component
         experimentIds={[experiment.id]}
+        selectionSize={1}
         sourceProjectId={experiment.projectId}
         sourceWorkspaceId={experiment.workspaceId}
         onSubmit={handleMoveComplete}

webui/react/src/components/ExperimentMoveModal.tsx

@@ -14,34 +14,40 @@ import Link from 'components/Link';
 import useFeature from 'hooks/useFeature';
 import usePermissions from 'hooks/usePermissions';
 import { paths } from 'routes/utils';
-import { moveExperiments } from 'services/api';
-import { V1BulkExperimentFilters } from 'services/api-ts-sdk';
+import { moveSearches } from 'services/api';
+import { V1MoveSearchesRequest } from 'services/api-ts-sdk';
 import projectStore from 'stores/projects';
 import workspaceStore from 'stores/workspaces';
-import { Project } from 'types';
+import { Project, SelectionType, XOR } from 'types';
 import handleError from 'utils/error';
+import { getIdsFilter as getExperimentIdsFilter } from 'utils/experiment';
 import { capitalize, pluralizer } from 'utils/string';
 
+import { INIT_FORMSET } from './FilterForm/components/FilterFormStore';
+import { FilterFormSet } from './FilterForm/components/type';
+
 const FORM_ID = 'move-experiment-form';
 
 type FormInputs = {
   projectId?: number;
   workspaceId?: number;
 };
 
-interface Props {
-  excludedExperimentIds?: Map<number, unknown>;
-  experimentIds: number[];
-  filters?: V1BulkExperimentFilters;
+interface BaseProps {
   onSubmit?: (successfulIds?: number[]) => void;
+  selectionSize: number;
   sourceProjectId: number;
   sourceWorkspaceId?: number;
 }
 
+type Props = BaseProps &
+  XOR<{ experimentIds: number[] }, { selection: SelectionType; tableFilters: string }>;
+
 const ExperimentMoveModalComponent: React.FC<Props> = ({
-  excludedExperimentIds,
   experimentIds,
-  filters,
+  selection,
+  selectionSize,
+  tableFilters,
   onSubmit,
   sourceProjectId,
   sourceWorkspaceId,
@@ -84,16 +90,23 @@ const ExperimentMoveModalComponent: React.FC<Props> = ({
     const values = await form.validateFields();
     const projId = values.projectId ?? 1;
 
-    if (excludedExperimentIds?.size) {
-      filters = { ...filters, excludedExperimentIds: Array.from(excludedExperimentIds.keys()) };
+    const moveSearchesArgs: V1MoveSearchesRequest = {
+      destinationProjectId: projId,
+      sourceProjectId,
+    };
+
+    if (tableFilters !== undefined) {
+      const filterFormSet =
+        selection.type === 'ALL_EXCEPT'
+          ? (JSON.parse(tableFilters) as FilterFormSet)
+          : INIT_FORMSET;
+      const filter = getExperimentIdsFilter(filterFormSet, selection);
+      moveSearchesArgs.filter = JSON.stringify(filter);
+    } else {
+      moveSearchesArgs.searchIds = experimentIds;
     }
 
-    const results = await moveExperiments({
-      destinationProjectId: projId,
-      experimentIds,
-      filters,
-      projectId: sourceProjectId,
-    });
+    const results = await moveSearches(moveSearchesArgs);
 
     onSubmit?.(results.successful);
 
@@ -143,12 +156,11 @@ const ExperimentMoveModalComponent: React.FC<Props> = ({
   }, [form, sourceProjectId, sourceWorkspaceId]);
 
   // use plurals for indeterminate case
-  const entityCount = filters !== undefined ? 2 : experimentIds.length;
   const pluralizerArgs = f_flat_runs
     ? (['search', 'searches'] as const)
     : (['experiment'] as const);
   // we use apply instead of a direct call here because typescript errors when you spread a tuple into arguments
-  const plural = pluralizer.apply(null, [entityCount, ...pluralizerArgs]);
+  const plural = pluralizer.apply(null, [selectionSize, ...pluralizerArgs]);
   const actionCopy = `Move ${capitalize(plural)}`;
 
   return (

webui/react/src/components/LoadableCount.tsx

@@ -1,3 +1,4 @@
+import Button from 'hew/Button';
 import { Loadable } from 'hew/utils/loadable';
 import { useMemo } from 'react';
 
@@ -10,13 +11,19 @@ interface Props {
   total: Loadable<number>;
   labelSingular: string;
   labelPlural: string;
+  onActualSelectAll?: () => void;
+  onClearSelect?: () => void;
+  pageSize?: number;
   selectedCount: number;
 }
 
 const LoadableCount: React.FC<Props> = ({
   total,
   labelPlural,
   labelSingular,
+  onActualSelectAll,
+  onClearSelect,
+  pageSize = 20,
   selectedCount,
 }: Props) => {
   const isMobile = useMobile();
@@ -41,11 +48,37 @@ const LoadableCount: React.FC<Props> = ({
     });
   }, [labelPlural, labelSingular, total, selectedCount]);
 
+  const actualSelectAll = useMemo(() => {
+    return Loadable.match(total, {
+      _: () => null,
+      Loaded: (loadedTotal) => {
+        if (onActualSelectAll && selectedCount >= pageSize && selectedCount < loadedTotal) {
+          return (
+            <Button type="text" onClick={onActualSelectAll}>
+              Select all {labelPlural} in table
+            </Button>
+          );
+        } else if (onClearSelect && selectedCount >= pageSize) {
+          return (
+            <Button type="text" onClick={onClearSelect}>
+              Clear Selection
+            </Button>
+          );
+        }
+
+        return null;
+      },
+    });
+  }, [labelPlural, onActualSelectAll, onClearSelect, pageSize, selectedCount, total]);
+
   if (!isMobile) {
     return (
-      <span className={css.base} data-test="count">
-        {selectionLabel}
-      </span>
+      <>
+        <span className={css.base} data-test="count">
+          {selectionLabel}
+        </span>
+        {actualSelectAll}
+      </>
     );
   } else {
     return null;

webui/react/src/components/RunActionDropdown.tsx

@@ -207,7 +207,8 @@ const RunActionDropdown: React.FC<Props> = ({
 
   const shared = (
     <FlatRunMoveComponentModal
-      flatRuns={[run]}
+      runIds={[run.id]}
+      selectionSize={1}
       sourceProjectId={projectId}
       sourceWorkspaceId={run.workspaceId}
       onSubmit={() => onComplete?.(FlatRunAction.Move, run.id)}

webui/react/src/components/ExperimentTensorBoardModal.tsx → webui/react/src/components/SearchTensorBoardModal.tsx

@@ -1,29 +1,24 @@
 import { Modal } from 'hew/Modal';
 
 import { UNMANAGED_EXPERIMENT_ANNOTATION_MESSAGE } from 'constant';
-import { openOrCreateTensorBoard } from 'services/api';
-import { V1BulkExperimentFilters } from 'services/api-ts-sdk';
+import { openOrCreateTensorBoardSearches } from 'services/api';
 import { ProjectExperiment } from 'types';
 import handleError from 'utils/error';
 import { openCommandResponse } from 'utils/wait';
 
 interface Props {
-  selectedExperiments: ProjectExperiment[];
-  filters?: V1BulkExperimentFilters;
+  selectedSearches: ProjectExperiment[];
   workspaceId?: number;
 }
 
-const ExperimentTensorBoardModal = ({
-  workspaceId,
-  selectedExperiments,
-  filters,
-}: Props): JSX.Element => {
+const SearchTensorBoardModal = ({ workspaceId, selectedSearches }: Props): JSX.Element => {
   const handleSubmit = async () => {
-    const managedExperimentIds = selectedExperiments
-      .filter((exp) => !exp.unmanaged)
-      .map((exp) => exp.id);
+    const managedSearchIds = selectedSearches.filter((exp) => !exp.unmanaged).map((exp) => exp.id);
     openCommandResponse(
-      await openOrCreateTensorBoard({ experimentIds: managedExperimentIds, filters, workspaceId }),
+      await openOrCreateTensorBoardSearches({
+        searchIds: managedSearchIds,
+        workspaceId,
+      }),
     );
   };
 
@@ -42,4 +37,4 @@ const ExperimentTensorBoardModal = ({
   );
 };
 
-export default ExperimentTensorBoardModal;
+export default SearchTensorBoardModal;