[GSoC2024] Added feature to show tags corresponding to GT job and manual job in a separate row

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

@@ -0,0 +1,4 @@
+### Added
+
+- 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. 
+  (<https://github.com/cvat-ai/cvat/pull/7774>)

cvat-core/src/labels.ts

@@ -98,6 +98,7 @@ export class Label {
     public deleted: boolean;
     public patched: boolean;
     public readonly hasParent?: boolean;
+    public highlight = false;
 
     constructor(initialData: Readonly<SerializedLabel>) {
         const data = {

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

@@ -481,14 +481,48 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
         }
 
         if (prevProps.highlightedConflict !== highlightedConflict) {
+            const { onUpdateAnnotations } = this.props;
             const severity: HighlightSeverity | undefined = highlightedConflict
                 ?.severity as unknown as HighlightSeverity;
             const highlightedClientIDs = (highlightedConflict?.annotationConflicts || [])
                 .map((conflict: AnnotationConflict) => annotations
-                    .find((state) => state.serverID === conflict.serverID && state.objectType === conflict.type),
+                    .find((state) => conflict.type !== 'tag' && state.serverID === conflict.serverID && state.objectType === conflict.type),
                 ).filter((state: ObjectState | undefined) => !!state)
                 .map((state) => state?.clientID) as number[];
 
+            // if last highlightedConflict was a tag then un-highlight it
+            const prevHighlightedClientIDs = (prevProps.highlightedConflict?.annotationConflicts || [])
+                .map((conflict: AnnotationConflict) => annotations
+                    .find((state) => conflict.type === 'tag' && state.serverID === conflict.serverID && state.objectType === conflict.type),
+                ).filter((state: ObjectState | undefined) => !!state)
+                .map((state) => state?.clientID) as number[];
+            if (prevHighlightedClientIDs.length !== 0) {
+                const states = annotations.filter((state) => prevHighlightedClientIDs.includes(state.clientID || 0));
+                if (states) {
+                    for (const state of states) {
+                        state.label.highlight = false;
+                        onUpdateAnnotations([state]);
+                    }
+                }
+            }
+
+            // if current conflict ids is empty then there might be a conflict in tag annotations
+            if (highlightedClientIDs.length === 0) {
+                const highlightedTagClientIDs = (highlightedConflict?.annotationConflicts || [])
+                    .map((conflict: AnnotationConflict) => annotations
+                        .find((state) => conflict.type === 'tag' && state.serverID === conflict.serverID && state.objectType === conflict.type),
+                    ).filter((state: ObjectState | undefined) => !!state)
+                    .map((state) => state?.clientID) as number[];
+
+                const states = annotations.filter((state) => highlightedTagClientIDs.includes(state.clientID || 0));
+                if (states) {
+                    for (const state of states) {
+                        state.label.highlight = true;
+                        onUpdateAnnotations([state]);
+                    }
+                }
+            }
+
             canvasInstance.highlight(highlightedClientIDs, severity || null);
         }
 

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

@@ -60,19 +60,50 @@ 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 !== 'Ground truth')
+                    .map((tag: any) => (
+                        <Tag
+                            className='cvat-frame-tag'
+                            color={tag.label.color}
+                            onClose={() => {
+                                onRemoveState(tag);
+                            }}
+                            key={tag.clientID}
+                            closable
+                            style={{
+                                transform: tag.label.highlight ? 'scale(1.1)' : 'scale(1)',
+                                transformOrigin: 'left',
+                            }}
+                        >
+                            {tag.label.name}
+                        </Tag>
+                    ))}
+            </div>
+            <div>
+                {frameTags
+                    .filter((tag: any) => tag.source === 'Ground truth')
+                    .map((tag: any) => (
+                        <Tag
+                            className='cvat-frame-tag'
+                            color={tag.label.color}
+                            onClose={() => {
+                                onRemoveState(tag);
+                            }}
+                            key={tag.clientID}
+                            closable
+                            style={{
+                                transform: tag.label.highlight ? 'scale(1.1)' : 'scale(1)',
+                                transformOrigin: 'left',
+                            }}
+                        >
+                            {tag.label.name}
+                            {' '}
+                            (GT)
+                        </Tag>
+                    ))}
+            </div>
         </>
     );
 }