From afb4f88d02b952d2cb603a580fb2781365521191 Mon Sep 17 00:00:00 2001
From: Philipp Otto <philippotto@users.noreply.github.com>
Date: Thu, 18 Jul 2024 14:44:59 +0200
Subject: [PATCH] Add max timeout for chunks in resumable upload and misc
 tweaks (#7932)

* add max timeout for chunks in resumable upload; use floor for rounding progress; tweak listed supported extensions

* update changelog

* remove rogue 'import' from UI

* Update frontend/javascripts/admin/admin_rest_api.ts

Co-authored-by: Florian M <fm3@users.noreply.github.com>

---------

Co-authored-by: Florian M <fm3@users.noreply.github.com>
---
 CHANGELOG.unreleased.md                                |  1 +
 frontend/javascripts/admin/admin_rest_api.ts           |  4 ++--
 .../javascripts/admin/dataset/dataset_add_view.tsx     |  1 -
 .../javascripts/admin/dataset/dataset_upload_view.tsx  | 10 ++++++----
 4 files changed, 9 insertions(+), 7 deletions(-)

diff --git a/CHANGELOG.unreleased.md b/CHANGELOG.unreleased.md
index a2298e16461..2f620aff16a 100644
--- a/CHANGELOG.unreleased.md
+++ b/CHANGELOG.unreleased.md
@@ -21,6 +21,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 
 ### Fixed
 - Fixed a bug that allowed the default newly created bounding box to appear outside the dataset. In case the whole bounding box would be outside it is created regardless. [#7892](https://github.com/scalableminds/webknossos/pull/7892)
+- Fixed a rare bug that could cause hanging dataset uploads. [#7932](https://github.com/scalableminds/webknossos/pull/7932)
 
 ### Removed
 
diff --git a/frontend/javascripts/admin/admin_rest_api.ts b/frontend/javascripts/admin/admin_rest_api.ts
index cbbe6f19861..c2974a36e6d 100644
--- a/frontend/javascripts/admin/admin_rest_api.ts
+++ b/frontend/javascripts/admin/admin_rest_api.ts
@@ -1269,12 +1269,12 @@ export function createResumableUpload(datastoreUrl: string, uploadId: string): P
       new ResumableJS({
         testChunks: false,
         target: `${datastoreUrl}/data/datasets?token=${token}`,
-        chunkSize: 10 * 1024 * 1024,
-        // set chunk size to 10MB
+        chunkSize: 10 * 1024 * 1024, // 10MB
         permanentErrors: [400, 403, 404, 409, 415, 500, 501],
         simultaneousUploads: 3,
         chunkRetryInterval: 2000,
         maxChunkRetries: undefined,
+        xhrTimeout: 10 * 60 * 1000, // 10m
         // @ts-expect-error ts-migrate(2322) FIXME: Type '(file: any) => string' is not assignable to ... Remove this comment to see the full error message
         generateUniqueIdentifier,
       }),
diff --git a/frontend/javascripts/admin/dataset/dataset_add_view.tsx b/frontend/javascripts/admin/dataset/dataset_add_view.tsx
index b88d5da68bc..2066ff14c25 100644
--- a/frontend/javascripts/admin/dataset/dataset_add_view.tsx
+++ b/frontend/javascripts/admin/dataset/dataset_add_view.tsx
@@ -317,7 +317,6 @@ const getPostUploadModal = (
                 <Button type="primary" onClick={() => history.push("/jobs")}>
                   View the Jobs Queue
                 </Button>
-                import
                 <Button onClick={() => history.push("/dashboard/datasets")}>Go to Dashboard</Button>
               </React.Fragment>
             ) : (
diff --git a/frontend/javascripts/admin/dataset/dataset_upload_view.tsx b/frontend/javascripts/admin/dataset/dataset_upload_view.tsx
index 7dd2053c815..7c7572c58b6 100644
--- a/frontend/javascripts/admin/dataset/dataset_upload_view.tsx
+++ b/frontend/javascripts/admin/dataset/dataset_upload_view.tsx
@@ -476,8 +476,10 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
             <br />
             {isRetrying ? "Retrying to continue the upload …" : null}
             <br />
-            <Progress // Round to 1 digit after the comma.
-              percent={Math.round(uploadProgress * 1000) / 10}
+            <Progress
+              // Round to 1 digit after the comma, but use floor
+              // to avoid that 100% are displayed even though the progress is lower.
+              percent={Math.floor(uploadProgress * 1000) / 10}
               status="active"
             />
           </Spin>
@@ -1028,7 +1030,7 @@ function FileUploadArea({
 
                   <li>
                     <Popover content={<SingleLayerImageStackExample />} trigger="hover">
-                      Single-Layer Image File Sequence (tif, jpg, png, dm3, dm4)
+                      Single-Layer Image File Sequence (tif, jpg, png, dm3, dm4 etc.)
                       <InfoCircleOutlined
                         style={{
                           marginLeft: 4,
@@ -1113,7 +1115,7 @@ function FileUploadArea({
                       />
                     </Popover>
                   </li>
-                  <li>Single-file images (tif, czi, nifti, raw)</li>
+                  <li>Single-file images (tif, czi, nifti, raw, ims etc.)</li>
 
                   <li>KNOSSOS file hierarchy</li>
                 </ul>