User interface with react and antd (cvat-ai#755)

* Login page, router
* Registration
* Tasks view

Author: bsekachev

.vscode/settings.json

@@ -14,6 +14,10 @@
             "directory":  "./cvat-canvas",
             "changeProcessCWD": true
         },
+        {
+            "directory":  "./cvat-ui",
+            "changeProcessCWD": true
+        },
         {
             "directory":  ".",
             "changeProcessCWD": true

cvat-canvas/package-lock.json

@@ -0,0 +1,5 @@
+dist
+docs
+node_modules
+reports
+

cvat-core/.dockerignore

@@ -50,5 +50,6 @@
         "func-names": [0],
         "valid-typeof": [0],
         "no-console": [0], // this rule deprecates console.log, console.warn etc. because "it is not good in production code"
+        "max-classes-per-file": [0],
     },
 };

cvat-core/.eslintrc.js

@@ -138,8 +138,8 @@
                 handler_file: initialData.handler_file,
             };
 
-            data.dumpers = initialData.dumpers.map(el => new Dumper(el));
-            data.loaders = initialData.loaders.map(el => new Loader(el));
+            data.dumpers = initialData.dumpers.map((el) => new Dumper(el));
+            data.loaders = initialData.loaders.map((el) => new Loader(el));
 
             // Now all fields are readonly
             Object.defineProperties(this, {

cvat-core/src/annotation-format.js

@@ -177,19 +177,19 @@
 
         export() {
             const data = {
-                tracks: this.tracks.filter(track => !track.removed)
-                    .map(track => track.toJSON()),
+                tracks: this.tracks.filter((track) => !track.removed)
+                    .map((track) => track.toJSON()),
                 shapes: Object.values(this.shapes)
                     .reduce((accumulator, value) => {
                         accumulator.push(...value);
                         return accumulator;
-                    }, []).filter(shape => !shape.removed)
-                    .map(shape => shape.toJSON()),
+                    }, []).filter((shape) => !shape.removed)
+                    .map((shape) => shape.toJSON()),
                 tags: Object.values(this.tags).reduce((accumulator, value) => {
                     accumulator.push(...value);
                     return accumulator;
-                }, []).filter(tag => !tag.removed)
-                    .map(tag => tag.toJSON()),
+                }, []).filter((tag) => !tag.removed)
+                    .map((tag) => tag.toJSON()),
             };
 
             return data;
@@ -200,7 +200,7 @@
             const shapes = this.shapes[frame] || [];
             const tags = this.tags[frame] || [];
 
-            const objects = tracks.concat(shapes).concat(tags).filter(object => !object.removed);
+            const objects = tracks.concat(shapes).concat(tags).filter((object) => !object.removed);
             // filtering here
 
             const objectStates = [];
@@ -370,7 +370,7 @@
 
             const clientID = ++this.count;
             const track = {
-                frame: Math.min.apply(null, Object.keys(keyframes).map(frame => +frame)),
+                frame: Math.min.apply(null, Object.keys(keyframes).map((frame) => +frame)),
                 shapes: Object.values(keyframes),
                 group: 0,
                 label_id: label.id,
@@ -577,7 +577,7 @@
 
                     if (objectType === 'track') {
                         const keyframes = Object.keys(object.shapes)
-                            .sort((a, b) => +a - +b).map(el => +el);
+                            .sort((a, b) => +a - +b).map((el) => +el);
 
                         let prevKeyframe = keyframes[0];
                         let visible = false;
@@ -699,13 +699,13 @@
                     } else if (state.objectType === 'track') {
                         constructed.tracks.push({
                             attributes: attributes
-                                .filter(attr => !labelAttributes[attr.spec_id].mutable),
+                                .filter((attr) => !labelAttributes[attr.spec_id].mutable),
                             frame: state.frame,
                             group: 0,
                             label_id: state.label.id,
                             shapes: [{
                                 attributes: attributes
-                                    .filter(attr => labelAttributes[attr.spec_id].mutable),
+                                    .filter((attr) => labelAttributes[attr.spec_id].mutable),
                                 frame: state.frame,
                                 occluded: state.occluded || false,
                                 outside: false,

cvat-core/src/annotations-collection.js

@@ -273,7 +273,7 @@
                 lock: this.lock,
                 zOrder: this.zOrder,
                 points: [...this.points],
-                attributes: Object.assign({}, this.attributes),
+                attributes: { ...this.attributes },
                 label: this.label,
                 group: this.group,
                 color: this.color,

cvat-core/src/annotations-objects.js

@@ -47,7 +47,7 @@
 
         cvat.server.formats.implementation = async () => {
             const result = await serverProxy.server.formats();
-            return result.map(el => new AnnotationFormat(el));
+            return result.map((el) => new AnnotationFormat(el));
         };
 
         cvat.server.register.implementation = async (username, firstName, lastName,
@@ -82,7 +82,7 @@
                 users = await serverProxy.users.getUsers();
             }
 
-            users = users.map(user => new User(user));
+            users = users.map((user) => new User(user));
             return users;
         };
 
@@ -116,8 +116,11 @@
 
             // If task was found by its id, then create task instance and get Job instance from it
             if (tasks !== null && tasks.length) {
+                tasks[0].owner = await serverProxy.users.getUsers(tasks[0].owner);
+                tasks[0].assignee = await serverProxy.users.getUsers(tasks[0].assignee);
                 const task = new Task(tasks[0]);
-                return filter.jobID ? task.jobs.filter(job => job.id === filter.jobID) : task.jobs;
+                return filter.jobID ? task.jobs
+                    .filter((job) => job.id === filter.jobID) : task.jobs;
             }
 
             return [];
@@ -158,8 +161,13 @@
                 }
             }
 
+            const users = await serverProxy.users.getUsers();
             const tasksData = await serverProxy.tasks.getTasks(searchParams.toString());
-            const tasks = tasksData.map(task => new Task(task));
+            const tasks = tasksData.map((task) => {
+                [task.owner] = users.filter((user) => user.id === task.owner);
+                [task.assignee] = users.filter((user) => user.id === task.assignee);
+                return new Task(task);
+            });
             tasks.count = tasksData.count;
 
             return tasks;

cvat-core/src/api-implementation.js

@@ -105,6 +105,26 @@
         });
     };
 
+    async function getPreview(taskID) {
+        return new Promise(async (resolve, reject) => {
+            try {
+                // Just go to server and get preview (no any cache)
+                const result = await serverProxy.frames.getPreview(taskID);
+                if (isNode) {
+                    resolve(global.Buffer.from(result, 'binary').toString('base64'));
+                } else if (isBrowser) {
+                    const reader = new FileReader();
+                    reader.onload = () => {
+                        resolve(reader.result);
+                    };
+                    reader.readAsDataURL(result);
+                }
+            } catch (error) {
+                reject(error);
+            }
+        });
+    }
+
     async function getFrame(taskID, mode, frame) {
         if (!(taskID in frameDataCache)) {
             frameDataCache[taskID] = {};
@@ -140,5 +160,6 @@
     module.exports = {
         FrameData,
         getFrame,
+        getPreview,
     };
 })();

cvat-core/src/frames.js

@@ -342,14 +342,20 @@
                 }
             }
 
-            async function getUsers() {
+            async function getUsers(id = null) {
                 const { backendAPI } = config;
 
                 let response = null;
                 try {
-                    response = await Axios.get(`${backendAPI}/users`, {
-                        proxy: config.proxy,
-                    });
+                    if (id === null) {
+                        response = await Axios.get(`${backendAPI}/users`, {
+                            proxy: config.proxy,
+                        });
+                    } else {
+                        response = await Axios.get(`${backendAPI}/users/${id}`, {
+                            proxy: config.proxy,
+                        });
+                    }
                 } catch (errorData) {
                     throw generateError(errorData, 'Could not get users from the server');
                 }
@@ -372,6 +378,27 @@
                 return response.data;
             }
 
+            async function getPreview(tid) {
+                const { backendAPI } = config;
+
+                let response = null;
+                try {
+                    // TODO: change 0 frame to preview
+                    response = await Axios.get(`${backendAPI}/tasks/${tid}/frames/0`, {
+                        proxy: config.proxy,
+                        responseType: 'blob',
+                    });
+                } catch (errorData) {
+                    const code = errorData.response ? errorData.response.status : errorData.code;
+                    throw new ServerError(
+                        `Could not get preview frame for the task ${tid} from the server`,
+                        code,
+                    );
+                }
+
+                return response.data;
+            }
+
             async function getData(tid, frame) {
                 const { backendAPI } = config;
 
@@ -567,6 +594,7 @@
                     value: Object.freeze({
                         getData,
                         getMeta,
+                        getPreview,
                     }),
                     writable: false,
                 },