cvat-ai · bsekachev · May 23, 2024 · Feb 9, 2024 · Feb 9, 2024 · Feb 9, 2024
diff --git a/README.md b/README.md
@@ -249,7 +249,6 @@ questions and get our support.
 - [How to Use CVAT (Roboflow guide)](https://blog.roboflow.com/cvat/)
 - [How to auto-label data in CVAT with one of 50,000+ models on Roboflow Universe](https://blog.roboflow.com/how-to-use-roboflow-models-in-cvat/)
 
-  <!-- prettier-ignore-start -->
   <!-- Badges -->
 
 [docker-server-pulls-img]: https://img.shields.io/docker/pulls/cvat/server.svg?style=flat-square&label=server%20pulls

@@ -0,0 +1,4 @@
+### Changed
+
+- Upgraded React and Antd dependencies, it leads to stylistic changes in the user interface
+  (<https://github.com/cvat-ai/cvat/pull/7466>)
@@ -166,7 +166,7 @@ async function runSingleFrameChain(
             // Ignore deleted frames
             if (!frameData.deleted) {
                 // Get annotations according to filter
-                const states: ObjectState[] = await getAnnotations(instance, frame, false, filters, null);
+                const states: ObjectState[] = await getAnnotations(instance, frame, false, filters);
                 const frameCollectionIDs = states.reduce<IDsToHandle>((acc, val) => {
                     if (val.objectType === ObjectType.SHAPE) {
                         acc.shapes.push(val.clientID as number);

@@ -20,22 +20,23 @@
   "author": "CVAT.ai",
   "license": "MIT",
   "dependencies": {
+    "@ant-design/compatible": "^5.1.2",
     "@ant-design/icons": "^4.6.3",
     "@react-awesome-query-builder/antd": "^6.2.1",
     "@types/json-logic-js": "^2.0.2",
     "@types/lru-cache": "^7.10.10",
     "@types/platform": "^1.3.4",
-    "@types/react": "^16.14.15",
+    "@types/react": "18.2.55",
     "@types/react-color": "^3.0.5",
-    "@types/react-dom": "^16.9.14",
+    "@types/react-dom": "18.2.19",
     "@types/react-grid-layout": "^1.3.2",
     "@types/react-redux": "^7.1.18",
     "@types/react-router": "^5.1.16",
     "@types/react-router-dom": "^5.1.9",
     "@types/redux-logger": "^3.0.9",
     "@types/resize-observer-browser": "^0.1.6",
     "@uiw/react-md-editor": "^3.22.0",
-    "antd": "~4.18.9",
+    "antd": "5.17.1",
     "chart.js": "^4.3.0",
     "copy-to-clipboard": "^3.3.1",
     "cvat-canvas": "link:./../cvat-canvas",
@@ -50,11 +51,11 @@
     "onnxruntime-web": "1.14.0",
     "platform": "^1.3.6",
     "prop-types": "^15.7.2",
-    "react": "^16.14.0",
+    "react": "18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-color": "^2.19.3",
     "react-cookie": "^4.0.3",
-    "react-dom": "^16.14.0",
+    "react-dom": "18.2.0",
     "react-grid-layout": "^1.3.4",
     "react-markdown": "^8.0.4",
     "react-moment": "^1.1.1",

@@ -1,5 +1,5 @@
 // Copyright (C) 2019-2022 Intel Corporation
-// Copyright (C) 2022-2023 CVAT.ai Corporation
+// Copyright (C) 2022-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -32,7 +32,6 @@ export enum ProjectsActionTypes {
     GET_PROJECT_PREVIEW_FAILED = 'GET_PROJECT_PREVIEW_FAILED',
 }
 
-// prettier-ignore
 const projectActions = {
     getProjects: () => createAction(ProjectsActionTypes.GET_PROJECTS),
     getProjectsSuccess: (array: any[], count: number) => (

@@ -1,5 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
-// Copyright (C) 2023 CVAT.ai Corporation
+// Copyright (C) 2023-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -15,7 +15,7 @@ $hover-menu-color: rgba(24, 144, 255, 5%);
 $completed-progress-color: #61c200;
 $validation-progress-color: #1890ff;
 $annotation-progress-color: #c1c1c1;
-$border-color-1: #d9d9d9;
+$border-color-1: #f0f0f0;;
 $border-color-hover: #40a9ff;
 $background-color-1: white;
 $background-color-2: #f1f1f1;
@@ -32,8 +32,9 @@ $objects-bar-icons-color: #242424; // #6e6e6e
 $active-label-background-color: #d8ecff;
 $object-item-border-color: rgba(0, 0, 0, 70%);
 $slider-color: #1890ff;
-$box-shadow-base: 0 3px 6px -4px rgba(0, 0, 0, 12%), 0 6px 16px 0 rgba(0, 0, 0, 8%),
-    0 9px 28px 8px rgba(0, 0, 0, 5%);
+$border-radius-base: 8px;
+$box-shadow-base: 0 1px 2px -2px rgba(0, 0, 0, 16%), 0 3px 6px 0 rgba(0, 0, 0, 12%), 0 5px 12px 4px rgba(0, 0, 0, 9%);
+$box-shadow-transition: 0.2s;
 $monospaced-fonts-stack: Consolas, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono, Bitstream Vera Sans Mono,
     Courier New, monospace;
 

@@ -1,37 +1,13 @@
 // Copyright (C) 2020-2022 Intel Corporation
-// Copyright (C) 2022 CVAT.ai Corporation
+// Copyright (C) 2022-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
-@import '../../base.scss';
-
-.ant-menu.cvat-actions-menu {
-    box-shadow: $box-shadow-base;
-
-    > li:hover {
-        background-color: $hover-menu-color;
-    }
-
-    .ant-menu-submenu-title {
-        margin: 0;
-        width: 13em;
-    }
-}
-
-.cvat-menu-dump-submenu-item,
-.cvat-menu-export-submenu-item {
-    > span[role='img'] {
-        color: $info-icon-color;
-    }
-
-    &:hover {
-        background-color: $hover-menu-color;
-    }
-}
+@import 'base';
 
 .cvat-menu-icon {
     font-size: 16px;
-    margin-left: 8px;
+    margin-left: $grid-unit-size;
     align-self: center;
 }
 

@@ -275,22 +275,25 @@ function AnalyticsPage(): JSX.Element {
                 defaultActiveKey={AnalyticsTabs.OVERVIEW}
                 onChange={onTabKeyChange}
                 className='cvat-task-analytics-tabs'
-            >
-                <Tabs.TabPane tab='Performance' key={AnalyticsTabs.OVERVIEW}>
-                    <AnalyticsOverview
-                        report={analyticsReport}
-                        timePeriod={timePeriod}
-                        reportRefreshingStatus={reportRefreshingStatus}
-                        onTimePeriodChange={setTimePeriod}
-                        onCreateReport={onCreateReport}
-                    />
-                </Tabs.TabPane>
-                {instanceType === 'task' && (
-                    <Tabs.TabPane tab='Quality' key={AnalyticsTabs.QUALITY}>
-                        <TaskQualityComponent task={instance} onJobUpdate={onJobUpdate} />
-                    </Tabs.TabPane>
-                )}
-            </Tabs>
+                items={[{
+                    key: AnalyticsTabs.OVERVIEW,
+                    label: 'Performance',
+                    children: (
+                        <AnalyticsOverview
+                            report={analyticsReport}
+                            timePeriod={timePeriod}
+                            reportRefreshingStatus={reportRefreshingStatus}
+                            onTimePeriodChange={setTimePeriod}
+                            onCreateReport={onCreateReport}
+                        />
+                    ),
+                },
+                ...(instanceType === 'task' ? [{
+                    key: AnalyticsTabs.QUALITY,
+                    label: 'Quality',
+                    children: <TaskQualityComponent task={instance} onJobUpdate={onJobUpdate} />,
+                }] : [])]}
+            />
         );
     }
 

@@ -11,7 +11,6 @@ import Notification from 'antd/lib/notification';
 import { Col, Row } from 'antd/lib/grid';
 import Button from 'antd/lib/button';
 import Card from 'antd/lib/card';
-import Title from 'antd/lib/typography/Title';
 import { ReloadOutlined, LoadingOutlined } from '@ant-design/icons';
 
 import { AnalyticsReport, AnalyticsEntryViewType } from 'cvat-core-wrapper';
@@ -66,7 +65,7 @@ function AnalyticsOverview(props: Props): JSX.Element | null {
                         <Card>
                             <div className='cvat-empty-performance-analytics-item'>
                                 {reportRefreshingStatus ? <Text>{reportRefreshingStatus}</Text> :
-                                    <Title level={5}> Performance report was not calculated yet... </Title>}
+                                    <Text>{`A performance report for the ${report.target} was not computed`}</Text>}
                                 <Button
                                     onClick={onCreateReport}
                                     loading={reportRefreshingStatus !== null}

@@ -80,7 +80,7 @@ export default function QualitySettingsModal(props: Props): JSX.Element | null {
             okText='Save'
             cancelText='Cancel'
             title={<Text strong>Annotation Quality Settings</Text>}
-            visible={visible}
+            open={visible}
             onOk={onOk}
             onCancel={onCancel}
             confirmLoading={fetching}

@@ -2,13 +2,14 @@
 //
 // SPDX-License-Identifier: MIT
 
-@import '../../base';
+@import 'base';
 
 .cvat-analytics-inner {
     background: $background-color-1;
     min-height: $grid-unit-size * 95;
     padding: $grid-unit-size * 4;
     padding-bottom: $grid-unit-size;
+    border-radius: $border-radius-base;
 
     .ant-tabs {
         height: 100%;
@@ -25,6 +26,7 @@
 
 .cvat-empty-performance-analytics-item {
     display: flex;
+    align-items: center;
     justify-content: space-between;
 }
 
@@ -128,8 +130,8 @@
 .cvat-quality-settings-switch {
     padding: 6px 8px;
     border: 1px solid lightgray;
-    margin-left: 8px;
-    border-radius: 2px;
+    margin-left: $grid-unit-size;
+    border-radius: $border-radius-base;
 }
 
 .cvat-quality-settings-title {

@@ -9,7 +9,7 @@ import { Link } from 'react-router-dom';
 import { Col, Row } from 'antd/lib/grid';
 import Card from 'antd/lib/card';
 import Button from 'antd/lib/button';
-import Title from 'antd/lib/typography/Title';
+import Text from 'antd/lib/typography/Text';
 
 interface Props {
     taskID: number,
@@ -23,7 +23,7 @@ function EmptyJobComponent(props: Props): JSX.Element {
             <Card className='cvat-job-empty-ground-truth-item'>
                 <Row justify='space-between' align='middle'>
                     <Col>
-                        <Title level={5}>No Ground Truth job created yet...</Title>
+                        <Text>A ground truth job for the task was not created</Text>
                     </Col>
                     <Col>
                         <Button type='primary'>

@@ -87,7 +87,7 @@ export default function AnnotationPageComponent(props: Props): JSX.Element {
                                 type='link'
                                 onClick={() => {
                                     changeFrame(latestFrame);
-                                    notification.close(notificationKey);
+                                    notification.destroy(notificationKey);
                                 }}
                             >
                                 here

@@ -281,7 +281,7 @@ function AnnotationsActionsModalContent(props: { onClose: () => void; }): JSX.El
         <Modal
             closable={false}
             width={640}
-            visible={modalVisible}
+            open={modalVisible}
             destroyOnClose
             footer={null}
             afterClose={onClose}