Implement multi selection of datasets in folder tab (#6683)

* allow to select multiple datasets in the folders tab

* complete multi select logic for all combinations of click, ctrl+click and drag

* move details sidebar into own module

* refactor sidebar sub components and display 'n datasets are selected' in multi selection case

* show progress indicator when moving multiple datasets

* fix not tall enough sidebar highlighting during drag

* show 'selected x of z datasets' during multi select

* implement range select with shift modifier

* update changelog and docs

* fix incorrect range selection when default ordering is used

* improve selection click by shrinking invisible tag container

* show empty context menu when right clicking multiple datasets

* show warning when moving datasets to the folder where there are already located

Author: philippotto

CHANGELOG.unreleased.md

@@ -14,6 +14,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 - Added sign in via OIDC. [#6534](https://github.com/scalableminds/webknossos/pull/6534)
 - Added a new datasets tab to the dashboard which supports managing datasets in folders. Folders can be organized hierarchically and datasets can be moved into these folders. Selecting a dataset will show dataset details in a sidebar. [#6591](https://github.com/scalableminds/webknossos/pull/6591)
 - Added the option to search a specific folder in the new datasets tab. [#6677](https://github.com/scalableminds/webknossos/pull/6677)
+- The new datasets tab in the dashboard allows multi-selection of datasets so that multiple datasets can be moved to a folder at once. As in typical file explorers, CTRL + left click adds individual datasets to the current selection. Shift + left click selects a range of datasets. [#6683](https://github.com/scalableminds/webknossos/pull/6683)
 
 ### Changed
 - webKnossos is now able to recover from a lost webGL context. [#6663](https://github.com/scalableminds/webknossos/pull/6663)

docs/dashboard.md

@@ -9,10 +9,12 @@ You can *view* a dataset (read-only) or start new annotations from this screen.
 Search for your dataset by using the search bar or sorting any of the table columns.
 Learn more about managing datasets in the [Datasets guide](./datasets.md).
 
-The presentation differs corresponding to your user role.
+The presentation differs depending on your user role.
 Regular users can only start or continue annotations and work on tasks.
 [Admins and Team Managers](./users.md#access-rights-roles) also have access to additional administration actions, access-rights management, and advanced dataset properties for each dataset.
 
+Read more about the organization of datasets [here](./datasets.md#dataset-organization).
+
 ![Dashboard for Team Managers or Admins with access to dataset settings and additional administration actions.](./images/dashboard_datasets.jpeg)
 ![Dashboard for Regular Users](./images/dashboard_regular_user.jpeg)
 

docs/datasets.md

@@ -221,6 +221,8 @@ This is because the access permissions are handled cumulatively.
 In addition to the folder organization, datasets can also be tagged.
 Use the tags column to do so or select a dataset with a click and use the right sidebar.
 
+To move multiple datasets to a folder at once, you can make use of multi-selection. As in typical file explorers, CTRL + left click adds individual datasets to the current selection. Shift + left click selects a range of datasets.
+
 ## Dataset Sharing
 Read more in the [Sharing guide](./sharing.md#dataset-sharing)
 

frontend/javascripts/dashboard/advanced_dataset/dataset_action_view.tsx

@@ -252,13 +252,30 @@ const onClearCache = async (
 
 export function getDatasetActionContextMenu({
   reloadDataset,
-  dataset,
+  datasets,
   hideContextMenu,
 }: {
   reloadDataset: (arg0: APIDatasetId) => Promise<void>;
-  dataset: APIMaybeUnimportedDataset;
+  datasets: APIMaybeUnimportedDataset[];
   hideContextMenu: () => void;
 }) {
+  if (datasets.length !== 1) {
+    return (
+      <Menu
+        onClick={hideContextMenu}
+        style={{
+          borderRadius: 6,
+        }}
+        mode="vertical"
+      >
+        <Menu.Item key="view" disabled>
+          No actions available.
+        </Menu.Item>
+      </Menu>
+    );
+  }
+  const dataset = datasets[0];
+
   return (
     <Menu
       onClick={hideContextMenu}

frontend/javascripts/dashboard/advanced_dataset/dataset_table.tsx

@@ -59,36 +59,36 @@ type Props = {
   reloadDataset: (arg0: APIDatasetId, arg1?: Array<APIMaybeUnimportedDataset>) => Promise<void>;
   updateDataset: (arg0: APIDataset) => Promise<void>;
   addTagToSearch: (tag: string) => void;
-  onSelectDataset?: (dataset: APIMaybeUnimportedDataset | null) => void;
-  selectedDataset?: APIMaybeUnimportedDataset | null | undefined;
+  onSelectDataset: (dataset: APIMaybeUnimportedDataset | null, multiSelect?: boolean) => void;
+  selectedDatasets: APIMaybeUnimportedDataset[];
   hideDetailsColumns?: boolean;
   context: DatasetCacheContextValue | DatasetCollectionContextValue;
 };
 type State = {
   prevSearchQuery: string;
   sortedInfo: SorterResult<string>;
   contextMenuPosition: [number, number] | null | undefined;
-  datasetForContextMenu: APIMaybeUnimportedDataset | null;
+  datasetsForContextMenu: APIMaybeUnimportedDataset[];
 };
 
 type ContextMenuProps = {
   contextMenuPosition: [number, number] | null | undefined;
   hideContextMenu: () => void;
-  dataset: APIMaybeUnimportedDataset | null;
+  datasets: APIMaybeUnimportedDataset[];
   reloadDataset: Props["reloadDataset"];
 };
 
 function ContextMenuInner(propsWithInputRef: ContextMenuProps) {
   const inputRef = React.useContext(ContextMenuContext);
-  const { dataset, reloadDataset, contextMenuPosition, hideContextMenu } = propsWithInputRef;
+  const { datasets, reloadDataset, contextMenuPosition, hideContextMenu } = propsWithInputRef;
   let overlay = <div />;
 
-  if (contextMenuPosition != null && dataset != null) {
+  if (contextMenuPosition != null) {
     // getDatasetActionContextMenu should not be turned into <DatasetActionMenu />
     // as this breaks antd's styling of the menu within the dropdown.
     overlay = getDatasetActionContextMenu({
       hideContextMenu,
-      dataset,
+      datasets,
       reloadDataset,
     });
   }
@@ -239,8 +239,12 @@ class DatasetTable extends React.PureComponent<Props, State> {
     },
     prevSearchQuery: "",
     contextMenuPosition: null,
-    datasetForContextMenu: null,
+    datasetsForContextMenu: [],
   };
+  // currentPageData is only used for range selection (and not during
+  // rendering). That's why it's not included in this.state (also it
+  // would lead to infinite loops, too).
+  currentPageData: APIMaybeUnimportedDataset[] = [];
 
   static getDerivedStateFromProps(nextProps: Props, prevState: State): Partial<State> {
     const maybeSortedInfo: SorterResult<string> | {} = // Clear the sorting exactly when the search box is initially filled
@@ -263,7 +267,6 @@ class DatasetTable extends React.PureComponent<Props, State> {
     _pagination: TablePaginationConfig,
     _filters: Record<string, FilterValue | null>,
     sorter: SorterResult<RecordType> | SorterResult<RecordType>[],
-    _extra: TableCurrentDataSource<RecordType>,
   ) => {
     this.setState({
       // @ts-ignore
@@ -407,7 +410,7 @@ class DatasetTable extends React.PureComponent<Props, State> {
           hideContextMenu={() => {
             this.setState({ contextMenuPosition: null });
           }}
-          dataset={this.state.datasetForContextMenu}
+          datasets={this.state.datasetsForContextMenu}
           reloadDataset={this.props.reloadDataset}
           contextMenuPosition={this.state.contextMenuPosition}
         />
@@ -423,7 +426,19 @@ class DatasetTable extends React.PureComponent<Props, State> {
           locale={{
             emptyText: this.renderEmptyText(),
           }}
+          summary={(currentPageData) => {
+            // Workaround to get to the currently rendered entries (since the ordering
+            // is managed by antd).
+            // Also see https://github.com/ant-design/ant-design/issues/24022.
+            this.currentPageData = currentPageData as APIMaybeUnimportedDataset[];
+            return null;
+          }}
           onRow={(record: APIMaybeUnimportedDataset) => ({
+            onDragStart: () => {
+              if (!this.props.selectedDatasets.includes(record)) {
+                this.props.onSelectDataset(record);
+              }
+            },
             onClick: (event) => {
               // @ts-expect-error
               if (event.target?.tagName !== "TD") {
@@ -432,11 +447,38 @@ class DatasetTable extends React.PureComponent<Props, State> {
                 // (e.g., the link action and a (de)selection).
                 return;
               }
-              if (this.props.onSelectDataset) {
-                if (this.props.selectedDataset === record) {
-                  this.props.onSelectDataset(null);
-                } else {
-                  this.props.onSelectDataset(record);
+
+              if (!event.shiftKey || this.props.selectedDatasets.length === 0) {
+                this.props.onSelectDataset(record, event.ctrlKey || event.metaKey);
+              } else {
+                // Shift was pressed and there's already another selected dataset that was not
+                // clicked just now.
+                // We are using the current page data as there is no way to get the currently
+                // rendered datasets otherwise. Also see
+                // https://github.com/ant-design/ant-design/issues/24022.
+                const renderedDatasets = this.currentPageData;
+
+                const clickedDatasetIdx = renderedDatasets.indexOf(record);
+                const selectedIndices = this.props.selectedDatasets.map((selectedDS) =>
+                  renderedDatasets.indexOf(selectedDS),
+                );
+                const closestSelectedDatasetIdx = _.minBy(selectedIndices, (idx) =>
+                  Math.abs(idx - clickedDatasetIdx),
+                );
+
+                if (clickedDatasetIdx == null || closestSelectedDatasetIdx == null) {
+                  return;
+                }
+
+                const [start, end] = [closestSelectedDatasetIdx, clickedDatasetIdx].sort(
+                  (a, b) => a - b,
+                );
+
+                for (let idx = start; idx <= end; idx++) {
+                  // closestSelectedDatasetIdx is already selected (don't deselect it).
+                  if (idx !== closestSelectedDatasetIdx) {
+                    this.props.onSelectDataset(renderedDatasets[idx], true);
+                  }
                 }
               }
             },
@@ -466,15 +508,25 @@ class DatasetTable extends React.PureComponent<Props, State> {
               const y = event.clientY - bounds.top;
 
               this.showContextMenuAt(x, y);
-              this.setState({ datasetForContextMenu: record });
+              if (this.props.selectedDatasets.includes(record)) {
+                this.setState({
+                  datasetsForContextMenu: this.props.selectedDatasets,
+                });
+              } else {
+                // If dataset is clicked which is not selected, ignore the selected
+                // datasets.
+                this.setState({
+                  datasetsForContextMenu: [record],
+                });
+              }
             },
             onDoubleClick: () => {
               window.location.href = `/datasets/${record.owningOrganization}/${record.name}/view`;
             },
           })}
           rowSelection={{
-            selectedRowKeys: this.props.selectedDataset ? [this.props.selectedDataset.name] : [],
-            onSelectNone: () => this.props.onSelectDataset?.(null),
+            selectedRowKeys: this.props.selectedDatasets.map((ds) => ds.name),
+            onSelectNone: () => this.props.onSelectDataset(null),
           }}
         >
           <Column
@@ -644,7 +696,7 @@ export function DatasetTags({
   };
 
   return (
-    <div style={{ maxWidth: 280 }}>
+    <div className="tags-container">
       {dataset.tags.map((tag) => (
         <CategorizationLabel
           tag={tag}

frontend/javascripts/dashboard/dashboard_view.tsx

@@ -284,7 +284,15 @@ class DashboardView extends PureComponent<PropsWithRouter, State> {
 }
 function DatasetViewWithLegacyContext({ user }: { user: APIUser }) {
   const datasetCacheContext = useContext(DatasetCacheContext);
-  return <DatasetView user={user} hideDetailsColumns={false} context={datasetCacheContext} />;
+  return (
+    <DatasetView
+      user={user}
+      hideDetailsColumns={false}
+      context={datasetCacheContext}
+      selectedDatasets={[]}
+      onSelectDataset={() => {}}
+    />
+  );
 }
 
 const mapStateToProps = (state: OxalisState): StateProps => ({

frontend/javascripts/dashboard/dataset/dataset_collection_context.tsx

@@ -38,6 +38,8 @@ export type DatasetCollectionContextValue = {
   setActiveFolderId: (id: string | null) => void;
   mostRecentlyUsedActiveFolderId: string | null;
   supportsFolders: true;
+  selectedDatasets: APIMaybeUnimportedDataset[];
+  setSelectedDatasets: React.Dispatch<React.SetStateAction<APIMaybeUnimportedDataset[]>>;
   globalSearchQuery: string | null;
   setGlobalSearchQuery: (val: string | null) => void;
   searchRecursively: boolean;
@@ -83,6 +85,7 @@ export default function DatasetCollectionContextProvider({
   const isMutating = useIsMutating() > 0;
   const { data: folder } = useFolderQuery(activeFolderId);
 
+  const [selectedDatasets, setSelectedDatasets] = useState<APIMaybeUnimportedDataset[]>([]);
   const [globalSearchQuery, setGlobalSearchQueryInner] = useState<string | null>(null);
   const setGlobalSearchQuery = useCallback(
     (value: string | null) => {
@@ -203,6 +206,8 @@ export default function DatasetCollectionContextProvider({
 
         datasetsInFolderQuery.refetch();
       },
+      selectedDatasets,
+      setSelectedDatasets,
       globalSearchQuery,
       setGlobalSearchQuery,
       searchRecursively,
@@ -238,6 +243,8 @@ export default function DatasetCollectionContextProvider({
       updateFolderMutation,
       moveFolderMutation,
       updateDatasetMutation,
+      selectedDatasets,
+      setSelectedDatasets,
       globalSearchQuery,
     ],
   );