15610: Uses a virtualized list to show the collection's file tree. (WIP)

[arvados-workbench2.git] / src / store / collection-panel / collection-panel-files / collection-panel-files-actions.ts

diff --git a/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts b/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
index b75de94a7e890ac74871b496b565bf270c3d861e..175a8cef5e705f41a6caf978bd1a95f4e4ea3844 100644 (file)
--- a/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
+++ b/src/store/collection-panel/collection-panel-files/collection-panel-files-actions.ts
@@ -4,17 +4,17 @@
 
 import { unionize, ofType, UnionOf } from "~/common/unionize";
 import { Dispatch } from "redux";
-import { CollectionFilesTree, CollectionFileType } from "~/models/collection-file";
+import { CollectionFilesTree, CollectionFileType, createCollectionFilesTree } from "~/models/collection-file";
 import { ServiceRepository } from "~/services/services";
 import { RootState } from "../../store";
 import { snackbarActions, SnackbarKind } from "../../snackbar/snackbar-actions";
 import { dialogActions } from '../../dialog/dialog-actions';
-import { getNodeValue } from "~/models/tree";
+import { getNodeValue, mapTreeValues } from "~/models/tree";
 import { filterCollectionFilesBySelection } from './collection-panel-files-state';
-import { startSubmit, stopSubmit, reset, initialize, FormErrors } from 'redux-form';
+import { startSubmit, stopSubmit, initialize, FormErrors } from 'redux-form';
 import { getDialog } from "~/store/dialog/dialog-reducer";
-import { getFileFullPath } from "~/services/collection-service/collection-service-files-response";
-import { resourcesDataActions } from "~/store/resources-data/resources-data-actions";
+import { getFileFullPath, sortFilesTree } from "~/services/collection-service/collection-service-files-response";
+import { progressIndicatorActions } from "~/store/progress-indicator/progress-indicator-actions";
 
 export const collectionPanelFilesAction = unionize({
     SET_COLLECTION_FILES: ofType<CollectionFilesTree>(),
@@ -26,11 +26,31 @@ export const collectionPanelFilesAction = unionize({
 
 export type CollectionPanelFilesAction = UnionOf<typeof collectionPanelFilesAction>;
 
+export const COLLECTION_PANEL_LOAD_FILES = 'collectionPanelLoadFiles';
+export const COLLECTION_PANEL_LOAD_FILES_THRESHOLD = 40000;
+
 export const loadCollectionFiles = (uuid: string) =>
     async (dispatch: Dispatch, getState: () => RootState, services: ServiceRepository) => {
+        let step = Date.now();
+        dispatch(progressIndicatorActions.START_WORKING(COLLECTION_PANEL_LOAD_FILES));
         const files = await services.collectionService.files(uuid);
-        dispatch(collectionPanelFilesAction.SET_COLLECTION_FILES(files));
-        dispatch(resourcesDataActions.SET_FILES({ uuid, files }));
+        console.log('Get files: ', (Date.now()-step)/1000);
+
+        // Given the array of directories and files, create the appropriate tree nodes,
+        // sort them, and add the complete url to each.
+        step = Date.now();
+        const tree = createCollectionFilesTree(files);
+        console.log('Create tree: ', (Date.now()-step)/1000);
+        step = Date.now();
+        const sorted = sortFilesTree(tree);
+        console.log('Sort tree: ', (Date.now()-step)/1000);
+        step = Date.now();
+        const mapped = mapTreeValues(services.collectionService.extendFileURL)(sorted);
+        console.log('Add URL: ', (Date.now()-step)/1000);
+        step = Date.now();
+        dispatch(collectionPanelFilesAction.SET_COLLECTION_FILES(mapped));
+        console.log('Dispatch: ', (Date.now()-step)/1000);
+        dispatch(progressIndicatorActions.STOP_WORKING(COLLECTION_PANEL_LOAD_FILES));
     };
 
 export const removeCollectionFiles = (filePaths: string[]) =>
@@ -77,8 +97,8 @@ export const openFileRemoveDialog = (filePath: string) =>
                 ? 'Are you sure you want to remove this directory?'
                 : 'Are you sure you want to remove this file?';
             const info = isDirectory
-                ? 'Removing files will change content adress.'
-                : 'Removing a file will change content adress.';
+                ? 'Removing files will change content address.'
+                : 'Removing a file will change content address.';
 
             dispatch(dialogActions.OPEN_DIALOG({
                 id: FILE_REMOVE_DIALOG,
@@ -101,7 +121,7 @@ export const openMultipleFilesRemoveDialog = () =>
         data: {
             title: 'Removing files',
             text: 'Are you sure you want to remove selected files?',
-            info: 'Removing files will change content adress.',
+            info: 'Removing files will change content address.',
             confirmButtonLabel: 'Remove'
         }
     });