Fixes after review comments at cvat-ai#30

byte-motion · May 19, 2022 · 1361ded · 1361ded
1 parent 9e7f061
commit 1361ded
Show file tree

Hide file tree

Showing 10 changed files with 89 additions and 53 deletions.
diff --git a/cvat-core/src/api-implementation.js b/cvat-core/src/api-implementation.js
@@ -326,10 +326,10 @@
 
         cvat.aifred.dtls.implementation = (workspaceId) => aifredProxy.dtls(workspaceId);
 
-        cvat.aifred.createWorkout
-            .implementation = (name, instance, workspaceId, dtlId, iterations) => {
-                aifredProxy.createWorkout(name, instance, workspaceId, dtlId, iterations);
-            };
+        cvat.aifred.createWorkout.implementation =
+            (name, instance, workspaceId, dtlId, iterations) => (
+                aifredProxy.createWorkout(name, instance, workspaceId, dtlId, iterations)
+            );
 
         cvat.aifred.getSelf.implementation = () => aifredProxy.getSelf();
 
@@ -410,9 +410,8 @@
             };
         };
 
-        cvat.aifred.getWorkoutImage.implementation = (workoutId, fileType, fileName) => {
-            aifredProxy.getWorkoutImage(workoutId, fileType, fileName);
-        };
+        cvat.aifred.getWorkoutImage.implementation =
+            (workoutId, fileType, fileName) => aifredProxy.getWorkoutImage(workoutId, fileType, fileName);
 
         cvat.aifred.getWorkoutMetrics.implementation = (workoutId) => aifredProxy.getWorkoutMetrics(workoutId);
 

diff --git a/cvat-ui/dist/favicon.ico b/cvat-ui/dist/favicon.ico
diff --git a/cvat-ui/package.json b/cvat-ui/package.json
@@ -5,7 +5,7 @@
   "main": "src/index.tsx",
   "scripts": {
     "build": "webpack --config ./webpack.config.js",
-    "start": "webpack-dev-server --env.API_URL=http://cvat:8080 --config ./webpack.config.js --mode=development",
+    "start": "webpack-dev-server --env.API_URL=http://cvat.lab:8080 --config ./webpack.config.js --mode=development",
     "type-check": "tsc --noEmit",
     "type-check:watch": "npm run type-check -- --watch",
     "lint": "eslint './src/**/*.{ts,tsx}'",
@@ -62,4 +62,4 @@
     "redux-logger": "^3.0.6",
     "redux-thunk": "^2.3.0"
   }
-}
+}
diff --git a/cvat-ui/src/components/header/header.tsx b/cvat-ui/src/components/header/header.tsx
@@ -5,15 +5,14 @@
 import './styles.scss';
 import React from 'react';
 import { connect } from 'react-redux';
-import { useHistory } from 'react-router';
+import { useHistory, useLocation } from 'react-router';
 import { Row, Col } from 'antd/lib/grid';
 import Icon, {
     SettingOutlined,
     InfoCircleOutlined,
     EditOutlined,
     LoadingOutlined,
     LogoutOutlined,
-    GithubOutlined,
     QuestionCircleOutlined,
     CaretDownOutlined,
     ControlOutlined,
@@ -148,10 +147,11 @@ function HeaderContainer(props: Props): JSX.Element {
     } = props;
 
     const {
-        CHANGELOG_URL, LICENSE_URL, GITTER_URL, FORUM_URL, GITHUB_URL,
+        CHANGELOG_URL, LICENSE_URL, GITTER_URL, FORUM_URL,
     } = consts;
 
     const history = useHistory();
+    const location = useLocation();
 
     function showAboutModal(): void {
         Modal.info({
@@ -255,12 +255,18 @@ function HeaderContainer(props: Props): JSX.Element {
         </Menu>
     );
 
+    const getButtonClassName = (value: string): string => {
+        // eslint-disable-next-line security/detect-non-literal-regexp
+        const regex = new RegExp(`${value}$`);
+        return location.pathname.match(regex) ? 'cvat-header-button cvat-active-header-button' : 'cvat-header-button';
+    };
+
     return (
         <Layout.Header className='cvat-header'>
             <div className='cvat-left-header'>
                 <Icon className='ocellus-logo-icon' component={OcellusLogo} />
                 <Button
-                    className='cvat-header-button'
+                    className={getButtonClassName('projects')}
                     type='link'
                     value='projects'
                     href='/projects'
@@ -272,7 +278,7 @@ function HeaderContainer(props: Props): JSX.Element {
                     Projects
                 </Button>
                 <Button
-                    className='cvat-header-button'
+                    className={getButtonClassName('tasks')}
                     type='link'
                     value='tasks'
                     href='/tasks?page=1'
@@ -284,7 +290,7 @@ function HeaderContainer(props: Props): JSX.Element {
                     Tasks
                 </Button>
                 <Button
-                    className='cvat-header-button'
+                    className={getButtonClassName('workouts')}
                     type='link'
                     value='workouts'
                     href='/workouts?page=1'
@@ -295,18 +301,6 @@ function HeaderContainer(props: Props): JSX.Element {
                 >
                     Workouts
                 </Button>
-                <Button
-                    className='cvat-header-button'
-                    type='link'
-                    value='cloudstorages'
-                    href='/cloudstorages?page=1'
-                    onClick={(event: React.MouseEvent): void => {
-                        event.preventDefault();
-                        history.push('/cloudstorages?page=1');
-                    }}
-                >
-                    Cloud Storages
-                </Button>
                 {isModelsPluginActive && (
                     <Button
                         className='cvat-header-button'
@@ -338,18 +332,6 @@ function HeaderContainer(props: Props): JSX.Element {
                 )}
             </div>
             <div className='cvat-right-header'>
-                <Button
-                    className='cvat-header-button'
-                    type='link'
-                    href={GITHUB_URL}
-                    onClick={(event: React.MouseEvent): void => {
-                        event.preventDefault();
-                        window.open(GITHUB_URL, '_blank');
-                    }}
-                >
-                    <GithubOutlined />
-                    <Text className='cvat-text-color'>GitHub</Text>
-                </Button>
                 <Button
                     className='cvat-header-button'
                     type='link'

diff --git a/cvat-ui/src/components/workout-page/details.tsx b/cvat-ui/src/components/workout-page/details.tsx
@@ -6,6 +6,7 @@ import React, { useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router';
 import moment from 'moment';
+import { Table } from 'antd';
 import { Row, Col } from 'antd/lib/grid';
 import Title from 'antd/lib/typography/Title';
 import Button from 'antd/lib/button';
@@ -34,20 +35,41 @@ export default function DetailsComponent(props: DetailsComponentProps): JSX.Elem
         </div>
     );
 
+    const histogramColumns = [
+        {
+            title: 'Name',
+            dataIndex: 'name',
+            key: 'name',
+        },
+        {
+            title: 'Number of instances',
+            dataIndex: 'instances',
+            key: 'instances',
+        },
+        {
+            title: '%',
+            dataIndex: 'percent',
+            key: 'percent',
+        },
+    ];
+
+    const histogramData = (Object.keys(workout.histogram).length > 0) ? workout.histogram?.classes.map(
+        (item: any): { key: string, name: string; instances: number; percent: number; } => (
+            {
+                ...item,
+                percent: Math.round((item.instances / workout.histogram.total) * 100),
+                key: item.name,
+            }
+        ),
+    ) : null;
+
     const histogram = (
         <Row justify='space-between' className='cvat-workout-classes'>
 
-            {(Object.keys(workout.histogram).length > 0) && (
+            {(histogramData !== null) && (
                 <Col span={24}>
                     <Text strong>Classes:</Text>
-                    <ul>
-                        {workout.histogram.classes.map((item: any): JSX.Element => (
-                            <li key={item.name}>
-                                {`${item.name}: ${item.instances} `}
-                                {`(${Math.round((item.instances / workout.histogram.total) * 100)} %)`}
-                            </li>
-                        ))}
-                    </ul>
+                    <Table columns={histogramColumns} dataSource={histogramData} />
                 </Col>
             )}
         </Row>

diff --git a/cvat-ui/src/components/workout-page/progress-bar.tsx b/cvat-ui/src/components/workout-page/progress-bar.tsx
@@ -39,6 +39,7 @@ export default function ProgressBarComponent(props: Props): JSX.Element {
     const numOfIterations = workout.iterations;
     const numOfCompleted = workout.iteration;
     const timeLeft = (workout.eta < 0) ? 'N/A' : formatSeconds(workout.eta);
+    const showETA = !(workout.eta === 0); // don't show ETA for finished workout
 
     const progressText = (
         <Text strong className={ProgressColor(status)}>
@@ -75,7 +76,7 @@ export default function ProgressBarComponent(props: Props): JSX.Element {
             </Row>
             <Row justify='space-between' align='top'>
                 <Col span={24}>
-                    <Text type='secondary'>{`ETA: ${timeLeft}`}</Text>
+                    <Text type='secondary'>{showETA && `ETA: ${timeLeft}`}</Text>
                 </Col>
             </Row>
         </Col>

diff --git a/cvat-ui/src/components/workout-page/styles.scss b/cvat-ui/src/components/workout-page/styles.scss
@@ -127,4 +127,9 @@
 
 .cvat-workout-classes {
     margin-top: $grid-unit-size * 2;
+}
+
+.cvat-workout-validation-preview {
+    margin-left: 1%;
+    width: 97%;
 }
diff --git a/cvat-ui/src/components/workout-page/validations.tsx b/cvat-ui/src/components/workout-page/validations.tsx
@@ -7,6 +7,7 @@ import Title from 'antd/lib/typography/Title';
 import { useDispatch, useSelector } from 'react-redux';
 import Spin from 'antd/lib/spin';
 
+import Text from 'antd/lib/typography/Text';
 import { getWorkoutValidationsAsync } from 'actions/workout-actions';
 import { CombinedState, WorkoutValidation } from 'reducers/interfaces';
 import EmptyListComponent from './empty-list';
@@ -37,9 +38,10 @@ export default function ValidationsComponent(props: ValidationsComponentProps):
                 Model Validations
             </Title>
             {imagesFetching ? <Spin key={workout.id} size='large' className='cvat-spinner' /> : images.map(
-                (item: WorkoutValidation): JSX.Element => (
+                (item: WorkoutValidation, idx: number): JSX.Element => (
                     <div key={item.name} className='cvat-workout-image-container'>
-                        <img key={item.name} alt={item.name} className='cvat-task-item-preview' src={item.image} />
+                        <Text strong>{`#${idx + 1}:`}</Text>
+                        <img key={item.name} alt={item.name} className='cvat-workout-validation-preview' src={item.image} />
                     </div>
                 ),
             )}

diff --git a/cvat-ui/src/consts.ts b/cvat-ui/src/consts.ts
@@ -9,7 +9,7 @@ const LICENSE_URL = 'https://github.com/openvinotoolkit/cvat/blob/develop/LICENS
 const GITTER_URL = 'https://gitter.im/opencv-cvat';
 const GITTER_PUBLIC_URL = 'https://gitter.im/opencv-cvat/public';
 const FORUM_URL = 'https://software.intel.com/en-us/forums/intel-distribution-of-openvino-toolkit';
-const GITHUB_URL = 'https://github.com/openvinotoolkit/cvat';
+const GITHUB_URL = 'https://github.com/byte-motion/cvat';
 const GITHUB_IMAGE_URL =
     'https://github.com/openvinotoolkit/cvat/raw/develop/site/content/en/images/cvat.jpg';
 const SHARE_MOUNT_GUIDE_URL =

diff --git a/cvat-ui/src/ocellus.scss b/cvat-ui/src/ocellus.scss
@@ -37,8 +37,33 @@ $monospaced-fonts-stack: Roboto Mono, Consolas, Monaco, Lucida Console, Liberati
     color: $inprogress-progress-color;
 }
 
+
+.cvat-workout-top-bar-actions .cvat-menu-icon svg,
+.cvat-task-top-bar .cvat-menu-icon svg,
 .cvat-annotation-header svg,
 .cvat-objects-sidebar-tabs svg,
-.cvat-canvas-controls-sidebar svg {
+.cvat-canvas-controls-sidebar svg,
+.cvat-header-account-icon svg,
+.cvat-item-open-task-actions svg {
     filter: invert(0.8);
+}
+
+.cvat-item-open-task-actions svg:hover {
+    cursor: pointer;
+}
+
+.cvat-active-header-button {
+    font-weight: bold;
+}
+
+.anticon.cvat-header-account-icon {
+    > svg {
+        transform: scale(0.7);
+    }
+}
+
+.anticon.anticon-question-circle {
+    > svg {
+        transform: scale(1.5);
+    }
 }