Merge branch 'develop' into bs/kill_worker

changelog.d/20240521_182333_klakhov_fix_conflicts_render.md

@@ -0,0 +1,4 @@
+### Fixed
+
+- UI crash on hovering conflict related to hidden objects
+  (<https://github.com/cvat-ai/cvat/pull/7917>)

cvat-canvas/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-canvas",
-  "version": "2.20.1",
+  "version": "2.20.2",
   "type": "module",
   "description": "Part of Computer Vision Annotation Tool which presents its canvas library",
   "main": "src/canvas.ts",

cvat-canvas/src/typescript/canvasModel.ts

@@ -651,8 +651,12 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     }
 
     public highlight(clientIDs: number[], severity: HighlightSeverity | null): void {
+        const elementsIDs = clientIDs.filter((id: number): boolean => (
+            this.objects.find((_state: any): boolean => _state.clientID === id)
+        ));
+
         this.data.highlightedElements = {
-            elementsIDs: clientIDs,
+            elementsIDs,
             severity,
         };
 

cvat-ui/package.json

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

cvat-ui/src/components/annotation-page/review/issues-aggregator.tsx

@@ -1,11 +1,11 @@
 // Copyright (C) 2020-2022 Intel Corporation
-// Copyright (C) 2023 CVAT.ai Corporation
+// Copyright (C) 2023-2024 CVAT.ai Corporation
 //
 // SPDX-License-Identifier: MIT
 
 import './styles.scss';
 import React, { useState, useEffect, useCallback } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector, useDispatch, shallowEqual } from 'react-redux';
 
 import { ActiveControl, CombinedState } from 'reducers';
 import { Canvas } from 'cvat-canvas/src/typescript/canvas';
@@ -32,26 +32,43 @@ interface ConflictMappingElement {
 
 export default function IssueAggregatorComponent(): JSX.Element | null {
     const dispatch = useDispatch();
+
+    const {
+        frameIssues,
+        issuesHidden,
+        issuesResolvedHidden,
+        canvasInstance,
+        canvasIsReady,
+        annotationsZLayer,
+        newIssuePosition,
+        issueFetching,
+        qualityConflicts,
+        objectStates,
+        showConflicts,
+        highlightedConflict,
+        activeControl,
+    } = useSelector((state: CombinedState) => ({
+        frameIssues: state.review.frameIssues,
+        issuesHidden: state.review.issuesHidden,
+        issuesResolvedHidden: state.review.issuesResolvedHidden,
+        canvasInstance: state.annotation.canvas.instance,
+        canvasIsReady: state.annotation.canvas.ready,
+        annotationsZLayer: state.annotation.annotations.zLayer.cur,
+        newIssuePosition: state.review.newIssuePosition,
+        issueFetching: state.review.fetching.issueId,
+        qualityConflicts: state.review.frameConflicts,
+        objectStates: state.annotation.annotations.states,
+        showConflicts: state.settings.shapes.showGroundTruth,
+        highlightedConflict: state.annotation.annotations.highlightedConflict,
+        activeControl: state.annotation.canvas.activeControl,
+    }), shallowEqual);
+
     const [expandedIssue, setExpandedIssue] = useState<number | null>(null);
-    const frameIssues = useSelector((state: CombinedState): any[] => state.review.frameIssues);
-    const issuesHidden = useSelector((state: CombinedState): boolean => state.review.issuesHidden);
-    const issuesResolvedHidden = useSelector((state: CombinedState): boolean => state.review.issuesResolvedHidden);
-    const canvasInstance = useSelector((state: CombinedState) => state.annotation.canvas.instance);
-    const canvasIsReady = useSelector((state: CombinedState): boolean => state.annotation.canvas.ready);
-    const newIssuePosition = useSelector((state: CombinedState): number[] | null => state.review.newIssuePosition);
-    const issueFetching = useSelector((state: CombinedState): number | null => state.review.fetching.issueId);
     const [geometry, setGeometry] = useState<Canvas['geometry'] | null>(null);
 
-    const qualityConflicts = useSelector((state: CombinedState) => state.review.frameConflicts);
-    const objectStates = useSelector((state: CombinedState) => state.annotation.annotations.states);
-    const showConflicts = useSelector((state: CombinedState) => state.settings.shapes.showGroundTruth);
-    const highlightedConflict = useSelector((state: CombinedState) => state.annotation.annotations.highlightedConflict);
-
     const highlightedObjectsIDs = highlightedConflict?.annotationConflicts
         ?.map((annotationConflict: AnnotationConflict) => annotationConflict.serverID);
 
-    const activeControl = useSelector((state: CombinedState) => state.annotation.canvas.activeControl);
-
     const canvasReady = canvasInstance instanceof Canvas && canvasIsReady;
 
     const onEnter = useCallback((conflict: QualityConflict) => {
@@ -137,7 +154,7 @@ export default function IssueAggregatorComponent(): JSX.Element | null {
                         _state.objectType === mainAnnotationsConflict.type
                     ));
 
-                    if (state) {
+                    if (state && state.zOrder <= annotationsZLayer && !state.hidden) {
                         const points = canvasInstance.setupConflictRegions(state);
                         if (points) {
                             return {
@@ -158,7 +175,7 @@ export default function IssueAggregatorComponent(): JSX.Element | null {
         } else {
             setConflictMapping([]);
         }
-    }, [geometry, objectStates, showConflicts, canvasReady, qualityConflicts]);
+    }, [geometry, objectStates, showConflicts, canvasReady, qualityConflicts, annotationsZLayer]);
 
     if (!canvasReady || !geometry) {
         return null;

tests/cypress/e2e/features/single_object_annotation.js

@@ -87,6 +87,7 @@ context('Single object annotation mode', { scrollBehavior: false }, () => {
                 ...params,
             },
         });
+        cy.get('.cvat-canvas-container').should('not.exist');
         cy.get('.cvat-canvas-container').should('exist').and('be.visible');
     }
 

tests/cypress/support/commands_organizations.js

@@ -8,6 +8,7 @@
 function openOrganizationsMenu() {
     cy.get('.cvat-header-menu-user-dropdown')
         .should('exist').and('be.visible').click();
+    cy.wait(500); // animation
     cy.get('.cvat-header-menu')
         .should('exist')
         .and('be.visible')