Minor improvements of z order feature (#5145)

* Do not switch z layer when changing objects

* Added z order sorting

* Added z indication

* Updated version & changelog

CHANGELOG.md

@@ -12,6 +12,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - REST API tests with skeletons (<https://github.com/opencv/cvat/pull/4987>)
 - Host schema auto-detection in SDK (<https://github.com/opencv/cvat/pull/4910>)
 - Server compatibility checks in SDK (<https://github.com/opencv/cvat/pull/4935>)
+- Objects sorting option in the sidebar, by z order. Additional visualization when the sorting is applied
+(<https://github.com/opencv/cvat/pull/5145>)
 - Added YOLOv5 serverless function NVIDIA GPU support (<https://github.com/opencv/cvat/pull/4960>)
 
 ### Changed
@@ -54,6 +56,7 @@ non-ascii paths while adding files from "Connected file share" (issue #4428)
 (<https://github.com/opencv/cvat/pull/5138>)
 - Skeleton points exported out of order in the COCO Keypoints format
   (<https://github.com/opencv/cvat/issues/5048>)
+- Changing an object causes current z layer to be set to the maximum (<https://github.com/opencv/cvat/pull/5145>)
 
 ### Security
 - TDB

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.42.4",
+  "version": "1.42.5",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx

@@ -1,11 +1,15 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
 
+import Text from 'antd/lib/typography/Text';
+
 import { StatesOrdering } from 'reducers';
 import ObjectItemContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-item';
+import { ObjectState } from 'cvat-core-wrapper';
 import ObjectListHeader from './objects-list-header';
 
 interface Props {
@@ -47,6 +51,7 @@ function ObjectListComponent(props: Props): JSX.Element {
         showAllStates,
     } = props;
 
+    let latestZOrder: number | null = null;
     return (
         <>
             <ObjectListHeader
@@ -67,14 +72,32 @@ function ObjectListComponent(props: Props): JSX.Element {
             />
             <div className='cvat-objects-sidebar-states-list'>
                 {sortedStatesID.map(
-                    (id: number): JSX.Element => (
-                        <ObjectItemContainer
-                            readonly={readonly}
-                            objectStates={objectStates}
-                            key={id}
-                            clientID={id}
-                        />
-                    ),
+                    (id: number): JSX.Element => {
+                        const object = objectStates.find((state: ObjectState) => state.clientID === id);
+                        const zOrder = object?.zOrder || latestZOrder;
+
+                        const renderZLayer = latestZOrder !== zOrder && statesOrdering === StatesOrdering.Z_ORDER;
+                        if (renderZLayer) {
+                            latestZOrder = zOrder;
+                        }
+
+                        return (
+                            <React.Fragment key={id}>
+                                {renderZLayer && (
+                                    <div className='cvat-objects-sidebar-z-layer-mark'>
+                                        <Text strong>
+                                            {`Layer ${zOrder}`}
+                                        </Text>
+                                    </div>
+                                )}
+                                <ObjectItemContainer
+                                    readonly={readonly}
+                                    objectStates={objectStates}
+                                    clientID={id}
+                                />
+                            </React.Fragment>
+                        );
+                    },
                 )}
             </div>
         </>

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector.tsx

@@ -1,4 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -35,6 +36,9 @@ function StatesOrderingSelectorComponent(props: StatesOrderingSelectorComponentP
                 <Select.Option key={StatesOrdering.UPDATED} value={StatesOrdering.UPDATED}>
                     {StatesOrdering.UPDATED}
                 </Select.Option>
+                <Select.Option key={StatesOrdering.Z_ORDER} value={StatesOrdering.Z_ORDER}>
+                    {StatesOrdering.Z_ORDER}
+                </Select.Option>
             </Select>
         </Col>
     );

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/styles.scss

@@ -1,4 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -158,6 +159,10 @@
     overflow-y: auto;
 }
 
+.cvat-objects-sidebar-z-layer-mark {
+    text-align: center;
+}
+
 .cvat-objects-sidebar-state-item.cvat-objects-sidebar-state-active-item {
     border-top: 2px solid $object-item-border-color;
     border-right: 2px solid $object-item-border-color;

cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx

@@ -1,4 +1,5 @@
 // Copyright (C) 2020-2022 Intel Corporation
+// Copyright (C) 2022 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -152,8 +153,10 @@ function sortAndMap(objectStates: ObjectState[], ordering: StatesOrdering): numb
         sorted = [...objectStates].sort((a: any, b: any): number => a.clientID - b.clientID);
     } else if (ordering === StatesOrdering.ID_DESCENT) {
         sorted = [...objectStates].sort((a: any, b: any): number => b.clientID - a.clientID);
-    } else {
+    } else if (ordering === StatesOrdering.UPDATED) {
         sorted = [...objectStates].sort((a: any, b: any): number => b.updated - a.updated);
+    } else {
+        sorted = [...objectStates].sort((a: any, b: any): number => a.zOrder - b.zOrder);
     }
 
     return sorted.map((state: any) => state.clientID);

cvat-ui/src/reducers/annotation-reducer.ts

@@ -9,6 +9,7 @@ import { AuthActionTypes } from 'actions/auth-actions';
 import { BoundariesActionTypes } from 'actions/boundaries-actions';
 import { Canvas, CanvasMode } from 'cvat-canvas-wrapper';
 import { Canvas3d } from 'cvat-canvas3d-wrapper';
+import { clamp } from 'utils/math';
 
 import {
     ActiveControl,
@@ -631,7 +632,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                     zLayer: {
                         min: minZLayer,
                         max: maxZLayer,
-                        cur: maxZLayer,
+                        cur: clamp(state.annotations.zLayer.cur, minZLayer, maxZLayer),
                     },
                     states: nextStates,
                     history,
@@ -1007,7 +1008,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                     zLayer: {
                         min: minZ,
                         max: maxZ,
-                        cur: maxZ,
+                        cur: clamp(state.annotations.zLayer.cur, minZ, maxZ),
                     },
                 },
             };
@@ -1028,7 +1029,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                     zLayer: {
                         min: minZ,
                         max: maxZ,
-                        cur: maxZ,
+                        cur: clamp(state.annotations.zLayer.cur, minZ, maxZ),
                     },
                 },
             };
@@ -1066,7 +1067,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                     activatedStateID,
                     zLayer: {
                         ...state.annotations.zLayer,
-                        cur: Math.max(Math.min(cur, max), min),
+                        cur: clamp(cur, min, max),
                     },
                 },
             };

cvat-ui/src/reducers/index.ts

@@ -590,6 +590,7 @@ export enum StatesOrdering {
     ID_DESCENT = 'ID - descent',
     ID_ASCENT = 'ID - ascent',
     UPDATED = 'Updated time',
+    Z_ORDER = 'Z Order',
 }
 
 export enum ContextMenuType {