From 0484e698f4fcc80a7c585422b1f9f54c8fb9b02e Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Wed, 23 Oct 2024 11:15:21 +0300 Subject: [PATCH 1/5] refactored frame-tags component --- .../tag-annotation-workspace/frame-tags.tsx | 79 ++++++------------- 1 file changed, 24 insertions(+), 55 deletions(-) diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx index 145ec6c1c9b5..902ff12a456f 100644 --- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx +++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx @@ -1,64 +1,31 @@ // Copyright (C) 2022 Intel Corporation +// Copyright (C) 2024 CVAT.ai Corporation // // SPDX-License-Identifier: MIT import './styles.scss'; -import React, { useState, useEffect } from 'react'; +import React, { useState, useEffect, useCallback } from 'react'; import Tag from 'antd/lib/tag'; -import { connect } from 'react-redux'; -import { Action } from 'redux'; -import { ThunkDispatch } from 'redux-thunk'; +import { useDispatch, useSelector } from 'react-redux'; import { removeObject as removeObjectAction, } from 'actions/annotation-actions'; -import { CombinedState, ObjectType, Workspace } from 'reducers'; -import { - QualityConflict, ObjectState, AnnotationConflict, getCore, -} from 'cvat-core-wrapper'; +import { CombinedState, ObjectType } from 'reducers'; +import { ObjectState, AnnotationConflict } from 'cvat-core-wrapper'; import { filterAnnotations } from 'utils/filter-annotations'; -const core = getCore(); - -interface StateToProps { - highlightedConflict: QualityConflict | null; - states: ObjectState[]; - workspace: Workspace; -} - -interface DispatchToProps { - removeObject(objectState: any): void; -} - -function mapStateToProps(state: CombinedState): StateToProps { - const { - annotation: { - annotations: { highlightedConflict, states }, - workspace, - }, - } = state; +function FrameTags(): JSX.Element { + const dispatch = useDispatch(); - return { highlightedConflict, states, workspace }; -} - -function mapDispatchToProps(dispatch: ThunkDispatch): DispatchToProps { - return { - removeObject(objectState: ObjectState): void { - dispatch(removeObjectAction(objectState, false)); - }, - }; -} - -function FrameTags(props: StateToProps & DispatchToProps): JSX.Element { - const { - highlightedConflict, states, workspace, removeObject, - } = props; + const { highlightedConflict, states } = useSelector((state: CombinedState) => state.annotation.annotations); + const { workspace } = useSelector((state: CombinedState) => state.annotation); - const [frameTags, setFrameTags] = useState([] as ObjectState[]); + const [frameTags, setFrameTags] = useState([]); const onRemoveState = (objectState: ObjectState): void => { - removeObject(objectState); + dispatch(removeObjectAction(objectState, false)); }; useEffect(() => { @@ -67,16 +34,20 @@ function FrameTags(props: StateToProps & DispatchToProps): JSX.Element { ); }, [states]); + const tagClassName = useCallback((tag: ObjectState) => { + const tagHighlighted = (highlightedConflict?.annotationConflicts || []) + .find((conflict: AnnotationConflict) => conflict.serverID === tag.serverID); + return tagHighlighted ? 'cvat-frame-tag-highlighted' : 'cvat-frame-tag'; + }, [highlightedConflict]); + return ( <>
{frameTags - .filter((tag: any) => tag.source !== core.enums.Source.GT) - .map((tag: any) => ( + .filter((tag: ObjectState) => !tag.isGroundTruth) + .map((tag: ObjectState) => ( conflict.serverID === tag.serverID).length !== 0 ? 'cvat-frame-tag-highlighted' : 'cvat-frame-tag' - } + className={tagClassName(tag)} color={tag.label.color} onClose={() => { onRemoveState(tag); @@ -90,12 +61,10 @@ function FrameTags(props: StateToProps & DispatchToProps): JSX.Element {
{frameTags - .filter((tag: any) => tag.source === core.enums.Source.GT) - .map((tag: any) => ( + .filter((tag: ObjectState) => tag.isGroundTruth) + .map((tag: ObjectState) => ( conflict.serverID === tag.serverID).length !== 0 ? 'cvat-frame-tag-highlighted' : 'cvat-frame-tag' - } + className={tagClassName(tag)} color={tag.label.color} onClose={() => { onRemoveState(tag); @@ -112,4 +81,4 @@ function FrameTags(props: StateToProps & DispatchToProps): JSX.Element { ); } -export default connect(mapStateToProps, mapDispatchToProps)(FrameTags); +export default React.memo(FrameTags); From 9cfe0c8d45f6477d840a4fcb045caf79010b6828 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Wed, 23 Oct 2024 11:52:03 +0300 Subject: [PATCH 2/5] improved styles --- .../annotation-page/tag-annotation-workspace/frame-tags.tsx | 4 ++-- .../annotation-page/tag-annotation-workspace/styles.scss | 4 ++++ 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx index 902ff12a456f..90da415f9677 100644 --- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx +++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx @@ -42,7 +42,7 @@ function FrameTags(): JSX.Element { return ( <> -
+
{frameTags .filter((tag: ObjectState) => !tag.isGroundTruth) .map((tag: ObjectState) => ( @@ -59,7 +59,7 @@ function FrameTags(): JSX.Element { ))}
-
+
{frameTags .filter((tag: ObjectState) => tag.isGroundTruth) .map((tag: ObjectState) => ( diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss index 8ac9962e01e8..0740e3c9046d 100644 --- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss +++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss @@ -96,3 +96,7 @@ transform: scale(1.1); } + +.cvat-canvas-annotation-frame-tags { + margin-bottom: $grid-unit-size; +} From 63b5bb3bec049b84b121eb9017d68226d72945eb Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Wed, 23 Oct 2024 12:05:19 +0300 Subject: [PATCH 3/5] changelog & package --- changelog.d/20241023_120236_klakhov_improve_gt_tags.md | 7 +++++++ cvat-ui/package.json | 2 +- .../tag-annotation-workspace/frame-tags.tsx | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 changelog.d/20241023_120236_klakhov_improve_gt_tags.md diff --git a/changelog.d/20241023_120236_klakhov_improve_gt_tags.md b/changelog.d/20241023_120236_klakhov_improve_gt_tags.md new file mode 100644 index 000000000000..79c1e724a35a --- /dev/null +++ b/changelog.d/20241023_120236_klakhov_improve_gt_tags.md @@ -0,0 +1,7 @@ +### Fixed + +- Tags in ground truth job were displayed as `tag (GT)` + () + +- Tags in ground truth job couldn't be deleted via `x` button + () diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 81b392eb7e54..2c43904a3fb9 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.66.1", + "version": "1.66.2", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx index 90da415f9677..1791f8d808ad 100644 --- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx +++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx @@ -34,7 +34,7 @@ function FrameTags(): JSX.Element { ); }, [states]); - const tagClassName = useCallback((tag: ObjectState) => { + const tagClassName = useCallback((tag: ObjectState): string => { const tagHighlighted = (highlightedConflict?.annotationConflicts || []) .find((conflict: AnnotationConflict) => conflict.serverID === tag.serverID); return tagHighlighted ? 'cvat-frame-tag-highlighted' : 'cvat-frame-tag'; From b3c4e0e23731d22513e01d4105bd39146c2a1b11 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Mon, 28 Oct 2024 11:24:55 +0300 Subject: [PATCH 4/5] combined use selector --- .../tag-annotation-workspace/frame-tags.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx index 1791f8d808ad..6779a308a558 100644 --- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx +++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx @@ -19,8 +19,11 @@ import { filterAnnotations } from 'utils/filter-annotations'; function FrameTags(): JSX.Element { const dispatch = useDispatch(); - const { highlightedConflict, states } = useSelector((state: CombinedState) => state.annotation.annotations); - const { workspace } = useSelector((state: CombinedState) => state.annotation); + const { highlightedConflict, states, workspace } = useSelector((state: CombinedState) => ({ + highlightedConflict: state.annotation.annotations.highlightedConflict, + states: state.annotation.annotations.states, + workspace: state.annotation.workspace, + })); const [frameTags, setFrameTags] = useState([]); From 23e5ae6f8d09563018e54e66dcb667691178a044 Mon Sep 17 00:00:00 2001 From: Kirill Lakhov Date: Mon, 28 Oct 2024 12:16:17 +0300 Subject: [PATCH 5/5] minor fix --- .../annotation-page/tag-annotation-workspace/frame-tags.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx index 6779a308a558..4c286122ceb1 100644 --- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx +++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx @@ -7,7 +7,7 @@ import './styles.scss'; import React, { useState, useEffect, useCallback } from 'react'; import Tag from 'antd/lib/tag'; -import { useDispatch, useSelector } from 'react-redux'; +import { shallowEqual, useDispatch, useSelector } from 'react-redux'; import { removeObject as removeObjectAction, @@ -23,7 +23,7 @@ function FrameTags(): JSX.Element { highlightedConflict: state.annotation.annotations.highlightedConflict, states: state.annotation.annotations.states, workspace: state.annotation.workspace, - })); + }), shallowEqual); const [frameTags, setFrameTags] = useState([]);