From 25905fbd44b2f6ecc6f04781abb2d65bd3803d7e Mon Sep 17 00:00:00 2001
From: Peter Mazarovich <petrmazarovich@gmail.com>
Date: Fri, 17 Feb 2023 11:40:28 +0300
Subject: [PATCH] Task progress bar improvement

---
 cvat-core/src/session.ts                      |  4 ++
 .../src/components/tasks-page/task-item.tsx   | 43 ++++---------------
 2 files changed, 12 insertions(+), 35 deletions(-)

diff --git a/cvat-core/src/session.ts b/cvat-core/src/session.ts
index e776c9c2a207..0159fe76ce04 100644
--- a/cvat-core/src/session.ts
+++ b/cvat-core/src/session.ts
@@ -593,6 +593,8 @@ 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)) {
@@ -600,6 +602,8 @@ export class Task extends Session {
                 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
index aa5fe17a52a4..7417a6d5e6b0 100644
--- 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}