refactor: Reworked progress bar, moved to model table.

equinor · Nov 30, 2023 · a856938 · a856938
1 parent 430773e
commit a856938
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 15 deletions.
diff --git a/src/components/Table.tsx b/src/components/Table.tsx
@@ -1,6 +1,11 @@
 /* eslint-disable max-lines-per-function */
 import { useMsal } from '@azure/msal-react';
-import { Button, Scrim, SideSheet } from '@equinor/eds-core-react';
+import {
+  Button,
+  LinearProgress,
+  Scrim,
+  SideSheet,
+} from '@equinor/eds-core-react';
 import { EdsDataGrid } from '@equinor/eds-data-grid-react';
 import { useQuery } from '@tanstack/react-query';
 import { useState } from 'react';
@@ -10,7 +15,15 @@ import { useAccessToken } from '../hooks/useAccessToken';
 import { AreaCoordinates } from './AreaCoordinates/AreaCoordinates';
 import * as Styled from './Table.styled';
 
-export const Table = ({ refetchKey }: { refetchKey: number }) => {
+export const Table = ({
+  refetchKey,
+  progress,
+  activeUploadId,
+}: {
+  refetchKey: number;
+  progress: number;
+  activeUploadId: string;
+}) => {
   const { instance, accounts } = useMsal();
   const token = useAccessToken(instance, accounts[0]);
   if (token) OpenAPI.TOKEN = token;
@@ -26,6 +39,20 @@ export const Table = ({ refetchKey }: { refetchKey: number }) => {
 
   if (isLoading || !data?.success) return <p>Loading...</p>;
 
+  const isActiveModel = (id: string) => {
+    let isActive = false;
+    let started = false;
+    if (progress < 100 && id === activeUploadId) {
+      isActive = true;
+      started = true;
+    }
+    if (progress === 0 && started && id === activeUploadId) {
+      isActive = false;
+      started = false;
+    }
+    return isActive;
+  };
+
   return (
     <Styled.Table>
       <EdsDataGrid
@@ -51,8 +78,28 @@ export const Table = ({ refetchKey }: { refetchKey: number }) => {
           },
           {
             accessorKey: 'isProcessed',
-            header: 'Status',
             id: 'isProcessed',
+
+            header: 'Upload status',
+            enableColumnFilter: false,
+            cell: ({ row }) => (
+              <>
+                {isActiveModel(row.original.analogueModelId) ? (
+                  <LinearProgress
+                    variant="determinate"
+                    value={progress}
+                  ></LinearProgress>
+                ) : (
+                  <>
+                    {row.original.isProcessed ? (
+                      <>Success</>
+                    ) : (
+                      <>Processing/Failed</>
+                    )}
+                  </>
+                )}
+              </>
+            ),
           },
 
           {

diff --git a/src/pages/Browse/Browse.tsx b/src/pages/Browse/Browse.tsx
@@ -1,11 +1,6 @@
 /* eslint-disable max-lines */
 /* eslint-disable max-lines-per-function */
-import {
-  Button,
-  LinearProgress,
-  Snackbar,
-  Typography,
-} from '@equinor/eds-core-react';
+import { Button, Snackbar, Typography } from '@equinor/eds-core-react';
 import { useMutation } from '@tanstack/react-query';
 import { useEffect, useState } from 'react';
 import {
@@ -159,8 +154,6 @@ export const Browse = () => {
       id: modelId,
       requestBody: readyAnalogue,
     });
-
-    setRefetch(refetch + 1);
   }
 
   async function uploadModel(file: File, metadata: MetadataProps) {
@@ -177,6 +170,7 @@ export const Browse = () => {
     if (createModel.error === null && modelUpload.success) {
       const id = modelUpload.data.analogueModelId;
       setModelId(id);
+      setRefetch(refetch + 1);
       uploadMetadata(id, metadata);
 
       if (counter >= chunkCount) {
@@ -295,7 +289,11 @@ export const Browse = () => {
         <div className="btn-div">
           <Button onClick={toggleDialog}>Add new model</Button>
         </div>
-        <Table refetchKey={refetch} />
+        <Table
+          refetchKey={refetch}
+          progress={progress}
+          activeUploadId={modelId}
+        />
       </Styled.BrowseWrapper>
       <AddModelDialog
         isOpen={isAddModelDialog}
@@ -305,9 +303,6 @@ export const Browse = () => {
         defaultMetadata={defaultMetadata}
       />
 
-      <Typography variant="h2">File Upload Progress</Typography>
-      <LinearProgress variant="determinate" value={progress}></LinearProgress>
-
       <Snackbar
         open={!!uploadStatus}
         autoHideDuration={15000}