React UI: Added logging (#1288)

cvat-canvas/README.md

@@ -37,6 +37,19 @@ Canvas itself handles:
         EXTREME_POINTS = 'By 4 points'
     }
 
+    enum Mode {
+        IDLE = 'idle',
+        DRAG = 'drag',
+        RESIZE = 'resize',
+        DRAW = 'draw',
+        EDIT = 'edit',
+        MERGE = 'merge',
+        SPLIT = 'split',
+        GROUP = 'group',
+        DRAG_CANVAS = 'drag_canvas',
+        ZOOM_CANVAS = 'zoom_canvas',
+    }
+
     interface DrawData {
         enabled: boolean;
         shapeType?: string;
@@ -70,6 +83,7 @@ Canvas itself handles:
     }
 
     interface Canvas {
+        mode(): Mode;
         html(): HTMLDivElement;
         setZLayer(zLayer: number | null): void;
         setup(frameData: any, objectStates: any[]): void;
@@ -128,14 +142,19 @@ Standard JS events are used.
     - canvas.dragstop
     - canvas.zoomstart
     - canvas.zoomstop
+    - canvas.zoom
+    - canvas.fit
+    - canvas.dragshape => {id: number}
+    - canvas.resizeshape => {id: number}
 ```
 
 ### WEB
 ```js
     // Create an instance of a canvas
     const canvas = new window.canvas.Canvas();
 
-    console.log('Version', window.canvas.CanvasVersion);
+    console.log('Version ', window.canvas.CanvasVersion);
+    console.log('Current mode is ', window.canvas.mode());
 
     // Put canvas to a html container
     htmlContainer.appendChild(canvas.html());

cvat-canvas/src/typescript/canvasView.ts

@@ -74,7 +74,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
         return this.controller.mode;
     }
 
-    private onDrawDone(data: object, continueDraw?: boolean): void {
+    private onDrawDone(data: object | null, duration: number, continueDraw?: boolean): void {
         if (data) {
             const { zLayer } = this.controller;
             const event: CustomEvent = new CustomEvent('canvas.drawn', {
@@ -87,6 +87,7 @@ export class CanvasViewImpl implements CanvasView, Listener {
                         zOrder: zLayer || 0,
                     },
                     continue: continueDraw,
+                    duration,
                 },
             });
 
@@ -137,12 +138,13 @@ export class CanvasViewImpl implements CanvasView, Listener {
         this.mode = Mode.IDLE;
     }
 
-    private onMergeDone(objects: any[]): void {
+    private onMergeDone(objects: any[]| null, duration?: number): void {
         if (objects) {
             const event: CustomEvent = new CustomEvent('canvas.merged', {
                 bubbles: false,
                 cancelable: true,
                 detail: {
+                    duration,
                     states: objects,
                 },
             });
@@ -701,6 +703,12 @@ export class CanvasViewImpl implements CanvasView, Listener {
         } else if ([UpdateReasons.IMAGE_ZOOMED, UpdateReasons.IMAGE_FITTED].includes(reason)) {
             this.moveCanvas();
             this.transformCanvas();
+            if (reason === UpdateReasons.IMAGE_FITTED) {
+                this.canvas.dispatchEvent(new CustomEvent('canvas.fit', {
+                    bubbles: false,
+                    cancelable: true,
+                }));
+            }
         } else if (reason === UpdateReasons.IMAGE_MOVED) {
             this.moveCanvas();
         } else if ([UpdateReasons.OBJECTS_UPDATED, UpdateReasons.SET_Z_LAYER].includes(reason)) {
@@ -1159,6 +1167,13 @@ export class CanvasViewImpl implements CanvasView, Listener {
                     ).map((x: number): number => x - offset);
 
                     this.drawnStates[state.clientID].points = points;
+                    this.canvas.dispatchEvent(new CustomEvent('canvas.dragshape', {
+                        bubbles: false,
+                        cancelable: true,
+                        detail: {
+                            id: state.clientID,
+                        },
+                    }));
                     this.onEditDone(state, points);
                 }
             });
@@ -1209,6 +1224,13 @@ export class CanvasViewImpl implements CanvasView, Listener {
                 ).map((x: number): number => x - offset);
 
                 this.drawnStates[state.clientID].points = points;
+                this.canvas.dispatchEvent(new CustomEvent('canvas.resizeshape', {
+                    bubbles: false,
+                    cancelable: true,
+                    detail: {
+                        id: state.clientID,
+                    },
+                }));
                 this.onEditDone(state, points);
             }
         });

cvat-canvas/src/typescript/drawHandler.ts

@@ -31,7 +31,8 @@ export interface DrawHandler {
 
 export class DrawHandlerImpl implements DrawHandler {
     // callback is used to notify about creating new shape
-    private onDrawDone: (data: object, continueDraw?: boolean) => void;
+    private onDrawDone: (data: object | null, duration?: number, continueDraw?: boolean) => void;
+    private startTimestamp: number;
     private canvas: SVG.Container;
     private text: SVG.Container;
     private cursorPosition: {
@@ -180,7 +181,7 @@ export class DrawHandlerImpl implements DrawHandler {
                 this.onDrawDone({
                     shapeType,
                     points: [xtl, ytl, xbr, ybr],
-                });
+                }, Date.now() - this.startTimestamp);
             }
         }).on('drawupdate', (): void => {
             this.shapeSizeElement.update(this.drawInstance);
@@ -213,7 +214,7 @@ export class DrawHandlerImpl implements DrawHandler {
                         this.onDrawDone({
                             shapeType,
                             points: [xtl, ytl, xbr, ybr],
-                        });
+                        }, Date.now() - this.startTimestamp);
                     }
                 }
             }).on('undopoint', (): void => {
@@ -300,21 +301,21 @@ export class DrawHandlerImpl implements DrawHandler {
                 this.onDrawDone({
                     shapeType,
                     points,
-                });
+                }, Date.now() - this.startTimestamp);
             } else if (shapeType === 'polyline'
                 && ((box.xbr - box.xtl) >= consts.SIZE_THRESHOLD
                 || (box.ybr - box.ytl) >= consts.SIZE_THRESHOLD)
                 && points.length >= 2 * 2) {
                 this.onDrawDone({
                     shapeType,
                     points,
-                });
+                }, Date.now() - this.startTimestamp);
             } else if (shapeType === 'points'
                 && (e.target as any).getAttribute('points') !== '0,0') {
                 this.onDrawDone({
                     shapeType,
                     points,
-                });
+                }, Date.now() - this.startTimestamp);
             }
         });
     }
@@ -365,7 +366,7 @@ export class DrawHandlerImpl implements DrawHandler {
                 attributes: { ...this.drawData.initialState.attributes },
                 label: this.drawData.initialState.label,
                 color: this.drawData.initialState.color,
-            }, e.detail.originalEvent.ctrlKey);
+            }, Date.now() - this.startTimestamp, e.detail.originalEvent.ctrlKey);
         });
     }
 
@@ -405,7 +406,7 @@ export class DrawHandlerImpl implements DrawHandler {
                 attributes: { ...this.drawData.initialState.attributes },
                 label: this.drawData.initialState.label,
                 color: this.drawData.initialState.color,
-            }, e.detail.originalEvent.ctrlKey);
+            }, Date.now() - this.startTimestamp, e.detail.originalEvent.ctrlKey);
         });
     }
 
@@ -583,14 +584,16 @@ export class DrawHandlerImpl implements DrawHandler {
             this.setupDrawEvents();
         }
 
+        this.startTimestamp = Date.now();
         this.initialized = true;
     }
 
     public constructor(
-        onDrawDone: (data: object, continueDraw?: boolean) => void,
+        onDrawDone: (data: object | null, duration?: number, continueDraw?: boolean) => void,
         canvas: SVG.Container,
         text: SVG.Container,
     ) {
+        this.startTimestamp = Date.now();
         this.onDrawDone = onDrawDone;
         this.canvas = canvas;
         this.text = text;

cvat-canvas/src/typescript/mergeHandler.ts

@@ -15,8 +15,9 @@ export interface MergeHandler {
 
 export class MergeHandlerImpl implements MergeHandler {
     // callback is used to notify about merging end
-    private onMergeDone: (objects: any[]) => void;
+    private onMergeDone: (objects: any[] | null, duration?: number) => void;
     private onFindObject: (event: MouseEvent) => void;
+    private startTimestamp: number;
     private canvas: SVG.Container;
     private initialized: boolean;
     private statesToBeMerged: any[]; // are being merged
@@ -57,6 +58,7 @@ export class MergeHandlerImpl implements MergeHandler {
 
     private initMerging(): void {
         this.canvas.node.addEventListener('click', this.onFindObject);
+        this.startTimestamp = Date.now();
         this.initialized = true;
     }
 
@@ -66,7 +68,7 @@ export class MergeHandlerImpl implements MergeHandler {
             this.release();
 
             if (statesToBeMerged.length > 1) {
-                this.onMergeDone(statesToBeMerged);
+                this.onMergeDone(statesToBeMerged, Date.now() - this.startTimestamp);
             } else {
                 this.onMergeDone(null);
                 // here is a cycle
@@ -77,12 +79,13 @@ export class MergeHandlerImpl implements MergeHandler {
     }
 
     public constructor(
-        onMergeDone: (objects: any[]) => void,
+        onMergeDone: (objects: any[] | null, duration?: number) => void,
         onFindObject: (event: MouseEvent) => void,
         canvas: SVG.Container,
     ) {
         this.onMergeDone = onMergeDone;
         this.onFindObject = onFindObject;
+        this.startTimestamp = Date.now();
         this.canvas = canvas;
         this.statesToBeMerged = [];
         this.highlightedShapes = {};

cvat-core/src/api.js

@@ -14,7 +14,8 @@
 
 function build() {
     const PluginRegistry = require('./plugins');
-    const User = require('./user');
+    const loggerStorage = require('./logger-storage');
+    const Log = require('./log');
     const ObjectState = require('./object-state');
     const Statistics = require('./statistics');
     const { Job, Task } = require('./session');
@@ -41,6 +42,7 @@ function build() {
         ServerError,
     } = require('./exceptions');
 
+    const User = require('./user');
     const pjson = require('../package.json');
     const config = require('./config');
 
@@ -419,6 +421,53 @@ function build() {
                 return result;
             },
         },
+        /**
+            * Namespace to working with logs
+            * @namespace logger
+            * @memberof module:API.cvat
+        */
+        /**
+             * Method to logger configuration
+             * @method configure
+             * @memberof module:API.cvat.logger
+             * @param {function} isActiveChecker - callback to know if logger
+             * should increase working time or not
+             * @param {object} userActivityCallback - container for a callback <br>
+             * Logger put here a callback to update user activity timer <br>
+             * You can call it outside
+             * @instance
+             * @async
+             * @throws {module:API.cvat.exceptions.PluginError}
+             * @throws {module:API.cvat.exceptions.ArgumentError}
+         */
+
+        /**
+            * Append log to a log collection <br>
+            * Durable logs will have been added after "close" method is called for them <br>
+            * Ignore rules exist for some logs (e.g. zoomImage, changeAttribute) <br>
+            * Payload of ignored logs are shallowly combined to previous logs of the same type
+            * @method log
+            * @memberof module:API.cvat.logger
+            * @param {module:API.cvat.enums.LogType | string} type - log type
+            * @param {Object} [payload = {}] - any other data that will be appended to the log
+            * @param {boolean} [wait = false] - specifies if log is durable
+            * @returns {module:API.cvat.classes.Log}
+            * @instance
+            * @async
+            * @throws {module:API.cvat.exceptions.PluginError}
+            * @throws {module:API.cvat.exceptions.ArgumentError}
+        */
+
+        /**
+            * Save accumulated logs on a server
+            * @method save
+            * @memberof module:API.cvat.logger
+            * @throws {module:API.cvat.exceptions.PluginError}
+            * @throws {module:API.cvat.exceptions.ServerError}
+            * @instance
+            * @async
+        */
+        logger: loggerStorage,
         /**
             * Namespace contains some changeable configurations
             * @namespace config
@@ -432,12 +481,6 @@ function build() {
                 * @property {string} proxy Axios proxy settings.
                 * For more details please read <a href="https://github.com/axios/axios"> here </a>
                 * @memberof module:API.cvat.config
-                * @property {integer} taskID this value is displayed in a logs if available
-                * @memberof module:API.cvat.config
-                * @property {integer} jobID this value is displayed in a logs if available
-                * @memberof module:API.cvat.config
-                * @property {integer} clientID read only auto-generated
-                * value which is displayed in a logs
                 * @memberof module:API.cvat.config
             */
             get backendAPI() {
@@ -452,21 +495,6 @@ function build() {
             set proxy(value) {
                 config.proxy = value;
             },
-            get taskID() {
-                return config.taskID;
-            },
-            set taskID(value) {
-                config.taskID = value;
-            },
-            get jobID() {
-                return config.jobID;
-            },
-            set jobID(value) {
-                config.jobID = value;
-            },
-            get clientID() {
-                return config.clientID;
-            },
         },
         /**
             * Namespace contains some library information e.g. api version
@@ -524,6 +552,7 @@ function build() {
             Task,
             User,
             Job,
+            Log,
             Attribute,
             Label,
             Statistics,

cvat-core/src/config.js

@@ -6,7 +6,4 @@
 module.exports = {
     backendAPI: 'http://localhost:7000/api/v1',
     proxy: false,
-    taskID: undefined,
-    jobID: undefined,
-    clientID: +Date.now().toString().substr(-6),
 };