Task progress bar improvement

cvat-ai · Feb 17, 2023 · fb574b1 · fb574b1
1 parent 771c13c
commit fb574b1
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 35 deletions.
diff --git a/cvat-core/src/session.ts b/cvat-core/src/session.ts
@@ -593,13 +593,17 @@ export class Task extends Session {
         // FIX ME: progress shoud come from server, not from segments
         const progress = {
             completedJobs: 0,
+            annotationJobs: 0,
+            validationJobs: 0,
             totalJobs: 0,
         };
         if (Array.isArray(initialData.segments)) {
             for (const segment of initialData.segments) {
                 for (const job of segment.jobs) {
                     progress.totalJobs += 1;
                     if (job.stage === 'acceptance') progress.completedJobs += 1;
+                    if (job.stage === 'validation') progress.validationJobs += 1;
+                    if (job.stage === 'annotation') progress.annotationJobs += 1;
                 }
             }
         }

diff --git a/cvat-ui/src/components/tasks-page/task-item.tsx b/cvat-ui/src/components/tasks-page/task-item.tsx
@@ -77,53 +77,26 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
         // Count number of jobs and performed jobs
         const numOfJobs = taskInstance.progress.totalJobs;
         const numOfCompleted = taskInstance.progress.completedJobs;
+        const numOfValidation = taskInstance.progress.validationJobs;
+        const numOfAnnotation = taskInstance.progress.annotationJobs;
 
         // Progress appearance depends on number of jobs
-        let progressColor = null;
-        let progressText = null;
-        if (numOfCompleted && numOfCompleted === numOfJobs) {
-            progressColor = 'cvat-task-completed-progress';
-            progressText = (
-                <Text strong className={progressColor}>
-                    Completed
-                </Text>
-            );
-        } else if (numOfCompleted) {
-            progressColor = 'cvat-task-progress-progress';
-            progressText = (
-                <Text strong className={progressColor}>
-                    In Progress
-                </Text>
-            );
-        } else {
-            progressColor = 'cvat-task-pending-progress';
-            progressText = (
-                <Text strong className={progressColor}>
-                    Pending
-                </Text>
-            );
-        }
-
-        const jobsProgress = numOfCompleted / numOfJobs;
+        const jobsProgress = ((numOfCompleted+numOfValidation) * 100) / numOfJobs;
 
         return (
             <Col span={6}>
                 <Row justify='space-between' align='top'>
                     <Col>
-                        <svg height='8' width='8' className={progressColor}>
-                            <circle cx='4' cy='4' r='4' strokeWidth='0' />
-                        </svg>
-                        {progressText}
-                    </Col>
-                    <Col>
-                        <Text type='secondary'>{`${numOfCompleted} of ${numOfJobs} jobs`}</Text>
+                        <Text type='secondary'>{`Completed: ${numOfCompleted} Validation: ${numOfValidation} Annotation: ${numOfAnnotation}`}</Text>
                     </Col>
                 </Row>
                 <Row>
                     <Col span={24}>
                         <Progress
-                            className={`${progressColor} cvat-task-progress`}
-                            percent={jobsProgress * 100}
+                            percent={jobsProgress}
+                            success={{
+                                percent: (numOfCompleted*100)/numOfJobs,
+                            }}
                             strokeColor='#1890FF'
                             showInfo={false}
                             strokeWidth={5}