Minor improvements of z order feature

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 {