Refactor dataset download tables to include uploaded and processed zi…

…p files
VEuPathDB · Oct 23, 2023 · 9303da8 · 9303da8
1 parent fb81aae
commit 9303da8
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 21 deletions.
diff --git a/packages/libs/user-datasets/src/lib/Actions/UserDatasetsActions.ts b/packages/libs/user-datasets/src/lib/Actions/UserDatasetsActions.ts
@@ -514,8 +514,8 @@ export function shareUserDatasets(
     }, {});
 
     return Promise.all(
-      // @ts-ignore
       requests.map((req) =>
+        // @ts-ignore
         wdkService.editUserDatasetSharing(
           'grant',
           req.datasetId,

diff --git a/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.jsx b/packages/libs/user-datasets/src/lib/Components/Detail/UserDatasetDetail.jsx
@@ -339,46 +339,84 @@ class UserDatasetDetail extends React.Component {
    -=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-= */
 
   renderFileSection() {
-    const { userDataset, appUrl, dataNoun } = this.props;
-    const fileTableState = MesaState.create({
-      columns: this.getFileTableColumns({ userDataset, appUrl }),
-      rows: userDataset.datafiles,
+    const { userDataset, dataNoun } = this.props;
+    const uploadZipFileState = MesaState.create({
+      columns: this.getFileTableColumns('upload', true),
+      rows: [{ name: 'upload.zip', size: userDataset.size }],
+    });
+    const processedZipFileState = MesaState.create({
+      columns: this.getFileTableColumns('data', false),
+      rows: [{ name: 'install.zip' }],
     });
 
     return (
       <section id="dataset-files">
         <h2>Data Files</h2>
         <h3 className={classify('SectionTitle')}>
           <Icon fa="files-o" />
-          Files in {dataNoun.singular}
+          Uploaded Files in {dataNoun.singular}
+        </h3>
+        <Mesa state={uploadZipFileState} />
+        <h3 className={classify('SectionTitle')}>
+          <Icon fa="files-o" />
+          Processed Files in {dataNoun.singular}
         </h3>
-        <Mesa state={fileTableState} />
+        <Mesa state={processedZipFileState} />
       </section>
     );
   }
 
-  getFileTableColumns() {
+  getFileTableColumns(zipFileType, showFileSize) {
     const { userDataset } = this.props;
     const { id } = userDataset;
     const { wdkService } = this.context;
 
+    const fileList =
+      zipFileType === 'upload' ? (
+        <details style={{ margin: '1em 0 0 0.25em' }}>
+          <summary>List of uploaded files:</summary>
+          <ol
+            style={{
+              margin: '0.25em 0 0 0',
+              lineHeight: '1.5em',
+              padding: '0 0 0 2em',
+            }}
+          >
+            {userDataset.datafiles.map((file, index) => (
+              <li key={`${file.name}-${index}`}>
+                {file.name} <span>({bytesToHuman(file.size)})</span>
+              </li>
+            ))}
+          </ol>
+        </details>
+      ) : null;
+
     return [
       {
         key: 'name',
         name: 'File Name',
         renderCell({ row }) {
           const { name } = row;
-          return <code>{name}</code>;
-        },
-      },
-      {
-        key: 'size',
-        name: 'File Size',
-        renderCell({ row }) {
-          const { size } = row;
-          return bytesToHuman(size);
+          return (
+            <>
+              <code>{name}</code>
+              {fileList}
+            </>
+          );
         },
       },
+      ...(showFileSize
+        ? [
+            {
+              key: 'size',
+              name: 'File Size',
+              renderCell({ row }) {
+                const { size } = row;
+                return bytesToHuman(size);
+              },
+            },
+          ]
+        : []),
       {
         key: 'download',
         name: 'Download',
@@ -398,7 +436,7 @@ class UserDatasetDetail extends React.Component {
               }
               onClick={(e) => {
                 e.preventDefault();
-                wdkService.getUserDatasetFiles(id);
+                wdkService.getUserDatasetFiles(id, zipFileType);
               }}
             >
               <Icon fa="save" className="left-side" /> Download

diff --git a/packages/libs/user-datasets/src/lib/Service/api.ts b/packages/libs/user-datasets/src/lib/Service/api.ts
@@ -138,15 +138,17 @@ export class UserDatasetApi extends FetchClientWithCredentials {
     );
   };
 
-  // QUESTION: VDI has an option to GET upload files and data files. Should we tweak UI to provide both options?
-  getUserDatasetFiles = async (datasetId: number | string) => {
+  getUserDatasetFiles = async (
+    datasetId: number | string,
+    zipFileType: 'upload' | 'data'
+  ) => {
     if (typeof datasetId !== 'number' && typeof datasetId !== 'string')
       throw new TypeError(
         `Can't build downloadUrl; invalid datasetId given (${datasetId}) [${typeof datasetId}]`
       );
     submitAsForm({
       method: 'GET',
-      action: `${VDI_SERVICE_BASE_URL}${VDI_SERVICE}/${datasetId}/files/data`,
+      action: `${VDI_SERVICE_BASE_URL}${VDI_SERVICE}/${datasetId}/files/${zipFileType}`,
       inputs: {
         'Auth-Key': await this.findUserRequestAuthKey(),
       },