Honey pot UI

CHANGELOG.md

@@ -9,6 +9,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 - Now CVAT supports project/task markdown description with additional assets
 (png, jpeg, gif, webp images and pdf files) (<https://github.com/opencv/cvat/pull/6191>)
+- Ground Truth jobs and quality analytics for tasks (<https://github.com/opencv/cvat/pull/6039>)
+
 
 ### Changed
 - TDB

cvat-canvas/package.json

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

cvat-canvas/src/scss/canvas.scss

@@ -148,6 +148,46 @@ polyline.cvat_canvas_shape_splitting {
     stroke-dasharray: 5;
 }
 
+.cvat_canvas_ground_truth {
+    stroke-dasharray: 1;
+}
+
+.cvat_canvas_conflicted {
+    stroke: #ff4800;
+    fill: #ff4800;
+
+    rect,
+    ellipse,
+    polygon,
+    polyline,
+    line {
+        fill: #ff4800;
+        stroke: #ff4800;
+    }
+
+    circle {
+        fill: #ff4800;
+    }
+}
+
+.cvat_canvas_warned {
+    stroke: #ff7301;
+    fill: #ff7301;
+
+    rect,
+    ellipse,
+    polygon,
+    polyline,
+    line {
+        fill: #ff7301;
+        stroke: #ff7301;
+    }
+
+    circle {
+        fill: #ff7301;
+    }
+}
+
 .cvat_canvas_shape_occluded_point {
     stroke-dasharray: 1 !important;
     stroke: white;
@@ -298,6 +338,38 @@ g.cvat_canvas_shape_occluded {
     position: relative;
 }
 
+.cvat-canvas-highlight-enabled {
+    svg {
+        >rect:not(.cvat_canvas_issue_region,.cvat_canvas_conflicted,.cvat_canvas_warned),
+        >ellipse:not(.cvat_canvas_issue_region,.cvat_canvas_conflicted,.cvat_canvas_warned),
+        >polygon:not(.cvat_canvas_issue_region,.cvat_canvas_conflicted,.cvat_canvas_warned),
+        >polyline:not(.cvat_canvas_issue_region,.cvat_canvas_conflicted,.cvat_canvas_warned),
+        >line:not(.cvat_canvas_issue_region,.cvat_canvas_conflicted,.cvat_canvas_warned) {
+            fill: gray;
+            stroke: gray;
+        }
+
+        >circle:not(.cvat_canvas_issue_region,.cvat_canvas_conflicted,.cvat_canvas_warned) {
+            fill: gray;
+        }
+
+        >g:not(.cvat_canvas_issue_region,.cvat_canvas_conflicted,.cvat_canvas_warned) {
+            rect,
+            ellipse,
+            polygon,
+            polyline,
+            line {
+                fill: gray;
+                stroke: gray;
+            }
+
+            circle {
+                fill: gray;
+            }
+        }
+    }
+}
+
 #cvat_canvas_text_content {
     text-rendering: optimizeSpeed;
     position: absolute;
@@ -380,3 +452,8 @@ g.cvat_canvas_shape_occluded {
         stroke: #09c;
     }
 }
+
+.cvat_canvas_shape_darken {
+    fill: #838383;
+    stroke: #838383;
+}

cvat-canvas/src/typescript/canvas.ts

@@ -18,6 +18,7 @@ import {
     CuboidDrawingMethod,
     Configuration,
     Geometry,
+    HighlightSeverity as _HighlightSeverity,
 } from './canvasModel';
 import { Master } from './master';
 import { CanvasController, CanvasControllerImpl } from './canvasController';
@@ -32,7 +33,9 @@ interface Canvas {
     html(): HTMLDivElement;
     setup(frameData: any, objectStates: any[], zLayer?: number): void;
     setupIssueRegions(issueRegions: Record<number, { hidden: boolean; points: number[] }>): void;
-    activate(clientID: number | null, attributeID?: number): void;
+    setupConflictRegions(clientID: number): number[];
+    activate(clientID: number | null, attributeID?: number): number[];
+    highlight(clientIDs: number[] | null, severity: HighlightSeverity | null): void;
     rotate(rotationAngle: number): void;
     focus(clientID: number, padding?: number): void;
     fit(): void;
@@ -84,6 +87,10 @@ class CanvasImpl implements Canvas {
         this.model.setupIssueRegions(issueRegions);
     }
 
+    public setupConflictsRegions(clientID: number): number[] {
+        return this.view.setupConflictsRegions(clientID);
+    }
+
     public fitCanvas(): void {
         this.model.fitCanvas(this.view.html().clientWidth, this.view.html().clientHeight);
     }
@@ -108,6 +115,10 @@ class CanvasImpl implements Canvas {
         this.model.activate(clientID, attributeID);
     }
 
+    public highlight(clientIDs: number[] | null, severity: HighlightSeverity | null = null): void {
+        this.model.highlight(clientIDs, severity);
+    }
+
     public rotate(rotationAngle: number): void {
         this.model.rotate(rotationAngle);
     }
@@ -179,6 +190,7 @@ class CanvasImpl implements Canvas {
 
 export type InteractionData = _InteractionData;
 export type InteractionResult = _InteractionResult;
+export type HighlightSeverity = _HighlightSeverity;
 
 export {
     CanvasImpl as Canvas, CanvasVersion, RectDrawingMethod, CuboidDrawingMethod, Mode as CanvasMode,

cvat-canvas/src/typescript/canvasController.ts

@@ -17,6 +17,7 @@ import {
     InteractionData,
     Configuration,
     MasksEditData,
+    HighlightedElements,
 } from './canvasModel';
 
 export interface CanvasController {
@@ -25,6 +26,7 @@ export interface CanvasController {
     readonly zLayer: number | null;
     readonly focusData: FocusData;
     readonly activeElement: ActiveElement;
+    readonly highlightedElements: HighlightedElements;
     readonly drawData: DrawData;
     readonly editData: MasksEditData;
     readonly interactionData: InteractionData;
@@ -147,6 +149,10 @@ export class CanvasControllerImpl implements CanvasController {
         return this.model.activeElement;
     }
 
+    public get highlightedElements(): HighlightedElements {
+        return this.model.highlightedElements;
+    }
+
     public get drawData(): DrawData {
         return this.model.drawData;
     }

cvat-canvas/src/typescript/canvasModel.ts

@@ -43,6 +43,16 @@ export interface ActiveElement {
     attributeID: number | null;
 }
 
+export enum HighlightSeverity {
+    ERROR = 'error',
+    WARNING = 'warning',
+}
+
+export interface HighlightedElements {
+    elementsIDs: number [];
+    severity: HighlightSeverity;
+}
+
 export enum RectDrawingMethod {
     CLASSIC = 'By 2 points',
     EXTREME_POINTS = 'By 4 points',
@@ -68,6 +78,7 @@ export interface Configuration {
     textContent?: string;
     undefinedAttrValue?: string;
     showProjections?: boolean;
+    showConflicts?: boolean;
     forceDisableEditing?: boolean;
     intelligentPolygonCrop?: boolean;
     forceFrameUpdate?: boolean;
@@ -168,6 +179,7 @@ export enum UpdateReasons {
     OBJECTS_UPDATED = 'objects_updated',
     SHAPE_ACTIVATED = 'shape_activated',
     SHAPE_FOCUSED = 'shape_focused',
+    SHAPE_HIGHLIGHTED = 'shape_highlighted',
 
     FITTED_CANVAS = 'fitted_canvas',
 
@@ -213,6 +225,7 @@ export interface CanvasModel {
     readonly gridSize: Size;
     readonly focusData: FocusData;
     readonly activeElement: ActiveElement;
+    readonly highlightedElements: HighlightedElements;
     readonly drawData: DrawData;
     readonly editData: MasksEditData;
     readonly interactionData: InteractionData;
@@ -231,6 +244,7 @@ export interface CanvasModel {
     setup(frameData: any, objectStates: any[], zLayer: number): void;
     setupIssueRegions(issueRegions: Record<number, { hidden: boolean; points: number[] }>): void;
     activate(clientID: number | null, attributeID: number | null): void;
+    highlight(clientIDs: number[] | null, severity: HighlightSeverity): void;
     rotate(rotationAngle: number): void;
     focus(clientID: number, padding: number): void;
     fit(): void;
@@ -303,6 +317,7 @@ function disableInternalSVGDrawing(data: DrawData | MasksEditData, currentData:
 export class CanvasModelImpl extends MasterImpl implements CanvasModel {
     private data: {
         activeElement: ActiveElement;
+        highlightedElements: HighlightedElements;
         angle: number;
         canvasSize: Size;
         configuration: Configuration;
@@ -340,6 +355,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 clientID: null,
                 attributeID: null,
             },
+            highlightedElements: {
+                elementsIDs: [],
+                severity: null,
+            },
             angle: 0,
             canvasSize: {
                 height: 0,
@@ -350,6 +369,7 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
                 autoborders: false,
                 displayAllText: false,
                 showProjections: false,
+                showConflicts: false,
                 forceDisableEditing: false,
                 intelligentPolygonCrop: false,
                 forceFrameUpdate: false,
@@ -584,6 +604,22 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         this.notify(UpdateReasons.SHAPE_ACTIVATED);
     }
 
+    public highlight(clientIDs: number[] | null, severity: HighlightSeverity | null): void {
+        if (Array.isArray(clientIDs)) {
+            this.data.highlightedElements = {
+                elementsIDs: clientIDs,
+                severity,
+            };
+        } else {
+            this.data.highlightedElements = {
+                elementsIDs: [],
+                severity: null,
+            };
+        }
+
+        this.notify(UpdateReasons.SHAPE_HIGHLIGHTED);
+    }
+
     public rotate(rotationAngle: number): void {
         if (this.data.angle !== rotationAngle && !this.data.imageIsDeleted) {
             this.data.angle = (360 + Math.floor(rotationAngle / 90) * 90) % 360;
@@ -857,6 +893,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
             this.data.configuration.colorBy = configuration.colorBy;
         }
 
+        if (typeof configuration.showConflicts === 'boolean') {
+            this.data.configuration.showConflicts = configuration.showConflicts;
+        }
+
         if (typeof configuration.CSSImageFilter === 'string') {
             this.data.configuration.CSSImageFilter = configuration.CSSImageFilter;
         }
@@ -955,6 +995,10 @@ export class CanvasModelImpl extends MasterImpl implements CanvasModel {
         return { ...this.data.activeElement };
     }
 
+    public get highlightedElements(): HighlightedElements {
+        return { ...this.data.highlightedElements };
+    }
+
     public get drawData(): DrawData {
         return { ...this.data.drawData };
     }