Merge pull request #36 from zimmerman-team/feat/processing-timer

feat: added time ticker to dataset upload and fixed filesize display …
zimmerman-team · Sep 22, 2023 · b173b2a · b173b2a
2 parents f60ca80 + 4beade8
commit b173b2a
Show file tree

Hide file tree

Showing 6 changed files with 72 additions and 82 deletions.
diff --git a/.gitignore b/.gitignore
@@ -71,3 +71,5 @@ Icon
 # cypress recordings
 cypress/screenshots/
 cypress/videos/
+
+rawgraphs-charts
diff --git a/.gitmodules b/.gitmodules
@@ -1,3 +0,0 @@
-[submodule "rawgraphs-charts"]
-	path = rawgraphs-charts
-	url = https://github.com/zimmerman-team/rawgraphs-charts

diff --git a/rawgraphs-charts b/rawgraphs-charts
diff --git a/src/app/fragments/datasets-fragment/upload-steps/index.tsx b/src/app/fragments/datasets-fragment/upload-steps/index.tsx
@@ -20,7 +20,7 @@ export default function DatasetUploadSteps() {
   const [processingError, setProcessingError] = React.useState(false);
   const [errorMessage, setErrorMessage] = React.useState("");
   const [datasetId, setDatasetId] = React.useState("");
-  const [loadedProgress, setLoadedProgress] = React.useState(0);
+  const [loadedProgress, setLoadedProgress] = React.useState("0B");
   const [percentageLoadedProgress, setPercentageLoadedProgress] =
     React.useState(0);
   const [estUploadTime, setEstUploadTime] = React.useState(0);
@@ -31,6 +31,23 @@ export default function DatasetUploadSteps() {
     public: false,
   });
 
+  React.useEffect(() => {
+    let timer: any;
+
+    if (estUploadTime > 0) {
+      timer = setInterval(() => {
+        setEstUploadTime((prevEstUploadTime) => prevEstUploadTime - 1);
+      }, 1000); // 1000 milliseconds = 1 second
+    }
+
+    // Cleanup the timer when estUploadTime becomes 0 or less
+    return () => {
+      if (timer) {
+        clearInterval(timer);
+      }
+    };
+  }, [estUploadTime]);
+
   const steps = [
     "Upload",
     "Description",
@@ -74,26 +91,41 @@ export default function DatasetUploadSteps() {
   };
 
   const onUploadProgress = (progressEvent: any) => {
-    const { loaded, total, timeStamp } = progressEvent;
-    setLoadedProgress(parseFloat((loaded / 1024).toFixed(1)));
-    setPercentageLoadedProgress(Math.floor((loaded * 100) / total));
+    const { loaded, total } = progressEvent;
 
-    const currentTime = new Date().getTime();
-    // Calculate the time elapsed since the upload started in seconds.
-    const elapsedTimeInSeconds = (currentTime - timeStamp) / 1000;
-    // Calculate the upload speed in bytes per second.
-    const uploadSpeed = loaded / elapsedTimeInSeconds;
-    // Calculate the remaining bytes to upload.
-    const remainingBytes = total - loaded;
-    // Calculate the estimated time remaining in seconds.
-    const estimatedTimeRemainingInSeconds = remainingBytes / uploadSpeed;
-    // Convert the estimated time remaining to minutes.
-    const estimatedTimeRemainingInMinutes =
-      estimatedTimeRemainingInSeconds / 60;
+    /**
+     ATPB: Average Time per Byte, FS: File Size
+     ATPB (FS < 1 KB): 0.00020274914089347078 seconds/byte
+     ATPB (FS >= 1 KB and < 1 MB): 7.006672447772506e-06 seconds/byte
+     ATPB (FS >= 1 MB and < 10 MB): 2.8944496268656717e-06 seconds/byte
+     ATPB (FS >= 10 MB): 2.2532963802805073e-06 seconds/byte
+     lets floor that to 10 decimal places, and calculate the time per byte in
+     seconds for the different sizes, as they are all different due to overhead
+     */
+    const timePerByteIfBytes = 0.0002027491;
+    const timePerByteIfKiloBytes = 0.0000070067;
+    const timePerByteIfMegaBytes = 0.0000028944;
+    const timePerByteIfLargest = 0.0000022533;
 
-    setEstUploadTime(estimatedTimeRemainingInMinutes);
-  };
+    const KB = 1024;
+    const MB = 1048576;
+    const MB10 = 10485760;
+    let timePerByte = timePerByteIfBytes;
+    if (total >= KB && total < MB) timePerByte = timePerByteIfKiloBytes;
+    if (total >= MB && total < MB10) timePerByte = timePerByteIfMegaBytes;
+    if (total >= MB10) timePerByte = timePerByteIfLargest;
+    const timeEstimate = timePerByte * total;
+
+    let loadedProgressValue = `${loaded}B`;
+    if (loaded > KB && loaded < MB)
+      loadedProgressValue = `${(loaded / KB).toFixed(2)}KB`;
+    if (loaded > MB) loadedProgressValue = `${(loaded / MB).toFixed(2)}MB`;
+    setLoadedProgress(loadedProgressValue);
+    setPercentageLoadedProgress(Math.floor((loaded * 100) / total));
 
+    setEstUploadTime(timeEstimate);
+  };
+  console.log(percentageLoadedProgress, "percentageLoadedProgress");
   const onSubmit = async () => {
     // Post the dataset
     handleNext();

diff --git a/src/app/fragments/datasets-fragment/upload-steps/processing.tsx b/src/app/fragments/datasets-fragment/upload-steps/processing.tsx
@@ -7,15 +7,18 @@ interface Props {
   setProcessingError: React.Dispatch<React.SetStateAction<boolean>>;
   processingError: boolean;
   fileName: string;
-  loaded: number;
+  loaded: string;
   percentageLoaded: number;
   estimatedUploadTime: number;
 }
 export default function Processing(props: Props) {
   const getTimeInHoursnMins = (time: number) => {
-    const hr = Math.floor(time / 60);
-    const min = time % 60 < 10 ? `0${time % 60}` : time % 60;
-    return `${hr} : ${min}`;
+    const mft = Math.floor(time / 60);
+    const se = " seconds (estimated)";
+    let ret = mft + se;
+    if (mft <= 0) ret = "Finishing up...";
+    if (mft > 60) ret = +" minutes and " + Math.floor(time % 60) + se;
+    return ret;
   };
 
   return (
@@ -113,26 +116,22 @@ export default function Processing(props: Props) {
 
                     border-radius: 3.211px;
                     position: relative;
-
-                    ::before {
-                      content: "";
-                      border: 1px solid #fff;
-                      border-radius: 10px;
-                      position: absolute;
-                      top: -4px;
-                      right: -4px;
-                      bottom: -4px;
-                      left: -4px;
-                    }
                   `}
                 >
-                  <div className="progress-bar" />
+                  <div
+                    css={`
+                      width: ${props.percentageLoaded}%;
+                      height: 100%;
+                      background: linear-gradient(
+                        90deg,
+                        #6466f1 7.48%,
+                        #cea8bc 92.2%
+                      );
+                    `}
+                  />
                 </div>
-                <p>{props.loaded}MB</p>
-                <p>
-                  {getTimeInHoursnMins(props.estimatedUploadTime)} minutes
-                  remaining
-                </p>
+                <p>{props.loaded}</p>
+                <p>{getTimeInHoursnMins(props.estimatedUploadTime)}</p>
               </div>
             </div>
           </div>

diff --git a/src/index.css b/src/index.css
@@ -170,44 +170,5 @@ input[type="text"] {
   background: #f1f3f5;
 }
 
-.progress-bar{
-  position:absolute;
-  border-radius:10px;
-  top:0;
-  right:100%;
-  bottom:0;
-  left:0;
- background: linear-gradient(
-    90deg,
-    #6466f1 7.48%,
-    #cea8bc 92.2%
-  );
-  width:0;
-  animation:borealisBar 2s linear infinite;
-
-
-}
-@keyframes borealisBar {
-  0% {
-    left:0%;
-    right:100%;
-    width:0%;
-  }
-  10% {
-    left:0%;
-    right:45%;
-    width:55%;
-  }
-  90% {
-    right:0%;
-    left:45%;
-    width:55%;
-  }
-  100% {
-    left:100%;
-    right:0%;
-    width:0%;
-  }
-}