[GSoC2024] Added feature to show tags corresponding to GT job and man…

…ual job in a separate row (#7774)

Fixes #7773 and #7749

Added feature to show tags corresponding to GT job and manual job in a
separate row. Along with the tags of the GT job have a mark of '(GT)' in
them.

### How has this been tested?
When we want to see both manual annotations and GT annotations:
<img width="1217" alt="image loading..."
src="https://github.com/cvat-ai/cvat/assets/72168180/362a1728-24f3-43cb-ac4d-1571ebc5faaf">

When we only want to see the annotations for the manual annotations job:
<img width="1217" alt="image loading..."
src="https://github.com/cvat-ai/cvat/assets/72168180/443fbf56-cd86-404b-bd6d-28351738dddf">



### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [x] I have created a changelog fragment <!-- see top comment in
CHANGELOG.md -->
~- [ ] I have updated the documentation accordingly~
~- [ ] I have added tests to cover my changes~
- [x] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
~- [ ] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/cvat-ai/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/cvat-ai/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/cvat-ai/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/cvat-ai/cvat/tree/develop/cvat-ui#versioning))~

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/cvat-ai/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.


<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

- **New Features**
- Introduced display tags for Ground Truth (GT) and manual jobs in a
separate row, with GT tags marked for easy identification.
- Enhanced tag highlighting in the annotation interface to better
indicate conflicts.

- **Style**
- Implemented new styles for frame tags to improve visual distinction
when highlighted.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: Kirill Lakhov <kirill.9992@gmail.com>
Co-authored-by: Maxim Zhiltsov <zhiltsov.max35@gmail.com>

changelog.d/20240416_022857_vidit.agarwal.eee20_ui_tag_annotations.md

@@ -0,0 +1,4 @@
+### Added
+
+- Added feature to show tags of GT and manual job in separate row. Tags of GT job have '(GT)' in their name.
+  (<https://github.com/cvat-ai/cvat/pull/7774>)

cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-wrapper.tsx

@@ -483,13 +483,19 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
         if (prevProps.highlightedConflict !== highlightedConflict) {
             const severity: HighlightSeverity | undefined = highlightedConflict
                 ?.severity as unknown as HighlightSeverity;
-            const highlightedClientIDs = (highlightedConflict?.annotationConflicts || [])
+
+            const highlightedObjects = (highlightedConflict?.annotationConflicts || [])
                 .map((conflict: AnnotationConflict) => annotations
                     .find((state) => state.serverID === conflict.serverID && state.objectType === conflict.type),
-                ).filter((state: ObjectState | undefined) => !!state)
-                .map((state) => state?.clientID) as number[];
-
-            canvasInstance.highlight(highlightedClientIDs, severity || null);
+                ).filter((state: ObjectState | undefined) => !!state) as ObjectState[];
+            const highlightedClientIDs = highlightedObjects.map((state) => state?.clientID) as number[];
+
+            const higlightedTags = highlightedObjects.some((state) => state?.objectType === ObjectType.TAG);
+            if (higlightedTags && prevProps.highlightedConflict) {
+                canvasInstance.highlight([], null);
+            } else if (!higlightedTags) {
+                canvasInstance.highlight(highlightedClientIDs, severity || null);
+            }
         }
 
         if (gridSize !== prevProps.gridSize) {

cvat-ui/src/components/annotation-page/tag-annotation-workspace/frame-tags.tsx

@@ -2,6 +2,8 @@
 //
 // SPDX-License-Identifier: MIT
 
+import './styles.scss';
+
 import React, { useState, useEffect } from 'react';
 import Tag from 'antd/lib/tag';
 import { connect } from 'react-redux';
@@ -12,10 +14,15 @@ import {
     removeObject as removeObjectAction,
 } from 'actions/annotation-actions';
 import { CombinedState, ObjectType, Workspace } from 'reducers';
-import { ObjectState } from 'cvat-core-wrapper';
+import {
+    QualityConflict, ObjectState, AnnotationConflict, getCore,
+} from 'cvat-core-wrapper';
 import { filterAnnotations } from 'utils/filter-annotations';
 
+const core = getCore();
+
 interface StateToProps {
+    highlightedConflict: QualityConflict | null;
     states: ObjectState[];
     workspace: Workspace;
 }
@@ -27,12 +34,12 @@ interface DispatchToProps {
 function mapStateToProps(state: CombinedState): StateToProps {
     const {
         annotation: {
-            annotations: { states },
+            annotations: { highlightedConflict, states },
             workspace,
         },
     } = state;
 
-    return { states, workspace };
+    return { highlightedConflict, states, workspace };
 }
 
 function mapDispatchToProps(dispatch: ThunkDispatch<CombinedState, {}, Action>): DispatchToProps {
@@ -44,7 +51,9 @@ function mapDispatchToProps(dispatch: ThunkDispatch<CombinedState, {}, Action>):
 }
 
 function FrameTags(props: StateToProps & DispatchToProps): JSX.Element {
-    const { states, workspace, removeObject } = props;
+    const {
+        highlightedConflict, states, workspace, removeObject,
+    } = props;
 
     const [frameTags, setFrameTags] = useState([] as ObjectState[]);
 
@@ -60,19 +69,45 @@ function FrameTags(props: StateToProps & DispatchToProps): JSX.Element {
 
     return (
         <>
-            {frameTags.map((tag: any) => (
-                <Tag
-                    className='cvat-frame-tag'
-                    color={tag.label.color}
-                    onClose={() => {
-                        onRemoveState(tag);
-                    }}
-                    key={tag.clientID}
-                    closable
-                >
-                    {tag.label.name}
-                </Tag>
-            ))}
+            <div>
+                {frameTags
+                    .filter((tag: any) => tag.source !== core.enums.Source.GT)
+                    .map((tag: any) => (
+                        <Tag
+                            className={
+                                (highlightedConflict?.annotationConflicts || []).filter((conflict: AnnotationConflict) => conflict.serverID === tag.serverID).length !== 0 ? 'cvat-frame-tag-highlighted' : 'cvat-frame-tag'
+                            }
+                            color={tag.label.color}
+                            onClose={() => {
+                                onRemoveState(tag);
+                            }}
+                            key={tag.clientID}
+                            closable
+                        >
+                            {tag.label.name}
+                        </Tag>
+                    ))}
+            </div>
+            <div>
+                {frameTags
+                    .filter((tag: any) => tag.source === core.enums.Source.GT)
+                    .map((tag: any) => (
+                        <Tag
+                            className={
+                                (highlightedConflict?.annotationConflicts || []).filter((conflict: AnnotationConflict) => conflict.serverID === tag.serverID).length !== 0 ? 'cvat-frame-tag-highlighted' : 'cvat-frame-tag'
+                            }
+                            color={tag.label.color}
+                            onClose={() => {
+                                onRemoveState(tag);
+                            }}
+                            key={tag.clientID}
+                        >
+                            {tag.label.name}
+                            {' '}
+                            (GT)
+                        </Tag>
+                    ))}
+            </div>
         </>
     );
 }

cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss

@@ -86,3 +86,13 @@
     width: $grid-unit-size * 4;
     height: $grid-unit-size * 4;
 }
+
+.cvat-frame-tag {
+    transform-origin: left;
+}
+
+.cvat-frame-tag-highlighted {
+    @extend .cvat-frame-tag;
+
+    transform: scale(1.1);
+}