[Dependent] Simple Review Pipeline (Client) (#2357)
* tmp * Removed migration * Rebased * Added signals & rating * Updated API views * Added reviewer serializer * Added permissions * Fixed some code issues * Fixed swagger docs * Some fixes * Updated api method to create review * Added some API tests & some fixes * Added some tests * Removed extra code * cvat-core, basic review view * Removed extra components * Fixed context menu * Added api method to canvas, removed extra files * Implemented roi selection * Added method to display rois on canvas * Updated README.md * Create issue dialog, some fixes * Setup chat dialog windows * Code refactoring * Some fixes * Small enhancement * Fixed core tests, removed extra code * A couple of fixes on canvas * Canvas issues highlighting * Small UX fix * Fixed width of chat * Code refactoring * Added dialogs & review summary * Fixed tests * Fixed bug during rendering * Applied changes from client part * Fixed bugs in tests * Added docs & setup plugins in cvat-core * Aborted cypress changes * Fixed comments * Removed extra change * Renamed fields * Updated versions, fixed some comments * Merged develop * Merged develop * Removed extra changes * Removed extra changes * Fixed tests * Fixed scale & animation * Using hull instead of the whole set of points * Fixed minor issue * Added additional logic to improve UX * Updated task instance after review submitting * Removed extra dependenci from package lock * Fixed REST API test * Removed /comments/<id> [PUT] * /issue/comments/create [POST] -> /comments [POST] * /job/<id>/reviews/create [POST] -> /reviews [POST] * [PATCH] /issue/<id>/resolve(reopen) -> [PATCH] /issue/id * Minor fix * Updated till the latest REST APi * Fixed test * Reviewed review summary * Review summary client-side * Removed unused import * Checking permissions client side * Checking job permissions * UP issue dialog onmouseout * Added shadow & pressenter event * Added ref initial value * Using the same box shadow in the whole project * Removed extra files in the patch * Removed extra files in the patch * Updated versions * Updated changelog * Fixed merge issue * Set updated flag on changing a reviewer * Fixed submit review modal * Two minor issue fixed * Searching issues & additional sidebar tab * Show text for locked objects * Fixed permissions for reviewers * Fixed typos * Fixed review request/submit actions, added action to finish a job * Star rating instead * Fixed migration * Removed animation, updated blur/highlight behaviour, updated hiddel labels position * Hide/show issues button, adjusted header * Context menu & buttons * Removed ability to select an object in region selector * Do not show issues in AAM & tag annotation * Fixed jest tests * Fixed: cannot read property label of undefined * Getting hull before creating the issue * Added ability to leave quick comment one of latest Co-authored-by: Nikita Manovich <nikita.manovich@intel.com>main
Boris Sekachev
5 years ago
committed by
GitHub
parent
45e2ea0707
commit
d6ac8cc5be
@ -0,0 +1,133 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import * as SVG from 'svg.js';
|
||||
|
||||
import consts from './consts';
|
||||
import { translateToSVG } from './shared';
|
||||
import { Geometry } from './canvasModel';
|
||||
|
||||
export interface RegionSelector {
|
||||
select(enabled: boolean): void;
|
||||
cancel(): void;
|
||||
transform(geometry: Geometry): void;
|
||||
}
|
||||
|
||||
export class RegionSelectorImpl implements RegionSelector {
|
||||
private onRegionSelected: (points?: number[]) => void;
|
||||
private geometry: Geometry;
|
||||
private canvas: SVG.Container;
|
||||
private selectionRect: SVG.Rect | null;
|
||||
private startSelectionPoint: {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
private getSelectionBox(event: MouseEvent): { xtl: number; ytl: number; xbr: number; ybr: number } {
|
||||
const point = translateToSVG((this.canvas.node as any) as SVGSVGElement, [event.clientX, event.clientY]);
|
||||
const stopSelectionPoint = {
|
||||
x: point[0],
|
||||
y: point[1],
|
||||
};
|
||||
|
||||
return {
|
||||
xtl: Math.min(this.startSelectionPoint.x, stopSelectionPoint.x),
|
||||
ytl: Math.min(this.startSelectionPoint.y, stopSelectionPoint.y),
|
||||
xbr: Math.max(this.startSelectionPoint.x, stopSelectionPoint.x),
|
||||
ybr: Math.max(this.startSelectionPoint.y, stopSelectionPoint.y),
|
||||
};
|
||||
}
|
||||
|
||||
private onMouseMove = (event: MouseEvent): void => {
|
||||
if (this.selectionRect) {
|
||||
const box = this.getSelectionBox(event);
|
||||
|
||||
this.selectionRect.attr({
|
||||
x: box.xtl,
|
||||
y: box.ytl,
|
||||
width: box.xbr - box.xtl,
|
||||
height: box.ybr - box.ytl,
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
private onMouseDown = (event: MouseEvent): void => {
|
||||
if (!this.selectionRect && !event.altKey) {
|
||||
const point = translateToSVG((this.canvas.node as any) as SVGSVGElement, [event.clientX, event.clientY]);
|
||||
this.startSelectionPoint = {
|
||||
x: point[0],
|
||||
y: point[1],
|
||||
};
|
||||
|
||||
this.selectionRect = this.canvas
|
||||
.rect()
|
||||
.attr({
|
||||
'stroke-width': consts.BASE_STROKE_WIDTH / this.geometry.scale,
|
||||
})
|
||||
.addClass('cvat_canvas_shape_region_selection');
|
||||
this.selectionRect.attr({ ...this.startSelectionPoint });
|
||||
}
|
||||
};
|
||||
|
||||
private onMouseUp = (): void => {
|
||||
const { offset } = this.geometry;
|
||||
if (this.selectionRect) {
|
||||
const {
|
||||
w, h, x, y, x2, y2,
|
||||
} = this.selectionRect.bbox();
|
||||
this.selectionRect.remove();
|
||||
this.selectionRect = null;
|
||||
if (w === 0 && h === 0) {
|
||||
this.onRegionSelected([x - offset, y - offset]);
|
||||
} else {
|
||||
this.onRegionSelected([x - offset, y - offset, x2 - offset, y2 - offset]);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
private startSelection(): void {
|
||||
this.canvas.node.addEventListener('mousemove', this.onMouseMove);
|
||||
this.canvas.node.addEventListener('mousedown', this.onMouseDown);
|
||||
this.canvas.node.addEventListener('mouseup', this.onMouseUp);
|
||||
}
|
||||
|
||||
private stopSelection(): void {
|
||||
this.canvas.node.removeEventListener('mousemove', this.onMouseMove);
|
||||
this.canvas.node.removeEventListener('mousedown', this.onMouseDown);
|
||||
this.canvas.node.removeEventListener('mouseup', this.onMouseUp);
|
||||
}
|
||||
|
||||
private release(): void {
|
||||
this.stopSelection();
|
||||
}
|
||||
|
||||
public constructor(onRegionSelected: (points?: number[]) => void, canvas: SVG.Container, geometry: Geometry) {
|
||||
this.onRegionSelected = onRegionSelected;
|
||||
this.geometry = geometry;
|
||||
this.canvas = canvas;
|
||||
this.selectionRect = null;
|
||||
}
|
||||
|
||||
public select(enabled: boolean): void {
|
||||
if (enabled) {
|
||||
this.startSelection();
|
||||
} else {
|
||||
this.release();
|
||||
}
|
||||
}
|
||||
|
||||
public cancel(): void {
|
||||
this.release();
|
||||
this.onRegionSelected();
|
||||
}
|
||||
|
||||
public transform(geometry: Geometry): void {
|
||||
this.geometry = geometry;
|
||||
if (this.selectionRect) {
|
||||
this.selectionRect.attr({
|
||||
'stroke-width': consts.BASE_STROKE_WIDTH / geometry.scale,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,153 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
const User = require('./user');
|
||||
const { ArgumentError } = require('./exceptions');
|
||||
const { negativeIDGenerator } = require('./common');
|
||||
|
||||
/**
|
||||
* Class representing a single comment
|
||||
* @memberof module:API.cvat.classes
|
||||
* @hideconstructor
|
||||
*/
|
||||
class Comment {
|
||||
constructor(initialData) {
|
||||
const data = {
|
||||
id: undefined,
|
||||
message: undefined,
|
||||
created_date: undefined,
|
||||
updated_date: undefined,
|
||||
removed: false,
|
||||
author: undefined,
|
||||
};
|
||||
|
||||
for (const property in data) {
|
||||
if (Object.prototype.hasOwnProperty.call(data, property) && property in initialData) {
|
||||
data[property] = initialData[property];
|
||||
}
|
||||
}
|
||||
|
||||
if (data.author && !(data.author instanceof User)) data.author = new User(data.author);
|
||||
|
||||
if (typeof id === 'undefined') {
|
||||
data.id = negativeIDGenerator();
|
||||
}
|
||||
if (typeof data.created_date === 'undefined') {
|
||||
data.created_date = new Date().toISOString();
|
||||
}
|
||||
|
||||
Object.defineProperties(
|
||||
this,
|
||||
Object.freeze({
|
||||
/**
|
||||
* @name id
|
||||
* @type {integer}
|
||||
* @memberof module:API.cvat.classes.Comment
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
id: {
|
||||
get: () => data.id,
|
||||
},
|
||||
/**
|
||||
* @name message
|
||||
* @type {string}
|
||||
* @memberof module:API.cvat.classes.Comment
|
||||
* @instance
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
*/
|
||||
message: {
|
||||
get: () => data.message,
|
||||
set: (value) => {
|
||||
if (!value.trim().length) {
|
||||
throw new ArgumentError('Value must not be empty');
|
||||
}
|
||||
data.message = value;
|
||||
},
|
||||
},
|
||||
/**
|
||||
* @name createdDate
|
||||
* @type {string}
|
||||
* @memberof module:API.cvat.classes.Comment
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
createdDate: {
|
||||
get: () => data.created_date,
|
||||
},
|
||||
/**
|
||||
* @name updatedDate
|
||||
* @type {string}
|
||||
* @memberof module:API.cvat.classes.Comment
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
updatedDate: {
|
||||
get: () => data.updated_date,
|
||||
},
|
||||
/**
|
||||
* Instance of a user who has created the comment
|
||||
* @name author
|
||||
* @type {module:API.cvat.classes.User}
|
||||
* @memberof module:API.cvat.classes.Comment
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
author: {
|
||||
get: () => data.author,
|
||||
},
|
||||
/**
|
||||
* @name removed
|
||||
* @type {boolean}
|
||||
* @memberof module:API.cvat.classes.Comment
|
||||
* @instance
|
||||
*/
|
||||
removed: {
|
||||
get: () => data.removed,
|
||||
set: (value) => {
|
||||
if (typeof value !== 'boolean') {
|
||||
throw new ArgumentError('Value must be a boolean value');
|
||||
}
|
||||
data.removed = value;
|
||||
},
|
||||
},
|
||||
__internal: {
|
||||
get: () => data,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
serialize() {
|
||||
const data = {
|
||||
message: this.message,
|
||||
};
|
||||
|
||||
if (this.id > 0) {
|
||||
data.id = this.id;
|
||||
}
|
||||
if (this.createdDate) {
|
||||
data.created_date = this.createdDate;
|
||||
}
|
||||
if (this.updatedDate) {
|
||||
data.updated_date = this.updatedDate;
|
||||
}
|
||||
if (this.author) {
|
||||
data.author = this.author.serialize();
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
toJSON() {
|
||||
const data = this.serialize();
|
||||
const { author, ...updated } = data;
|
||||
return {
|
||||
...updated,
|
||||
author_id: author ? author.id : undefined,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = Comment;
|
||||
@ -0,0 +1,335 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
const quickhull = require('quickhull');
|
||||
|
||||
const PluginRegistry = require('./plugins');
|
||||
const Comment = require('./comment');
|
||||
const User = require('./user');
|
||||
const { ArgumentError } = require('./exceptions');
|
||||
const { negativeIDGenerator } = require('./common');
|
||||
const serverProxy = require('./server-proxy');
|
||||
|
||||
/**
|
||||
* Class representing a single issue
|
||||
* @memberof module:API.cvat.classes
|
||||
* @hideconstructor
|
||||
*/
|
||||
class Issue {
|
||||
constructor(initialData) {
|
||||
const data = {
|
||||
id: undefined,
|
||||
position: undefined,
|
||||
comment_set: [],
|
||||
frame: undefined,
|
||||
created_date: undefined,
|
||||
resolved_date: undefined,
|
||||
owner: undefined,
|
||||
resolver: undefined,
|
||||
removed: false,
|
||||
};
|
||||
|
||||
for (const property in data) {
|
||||
if (Object.prototype.hasOwnProperty.call(data, property) && property in initialData) {
|
||||
data[property] = initialData[property];
|
||||
}
|
||||
}
|
||||
|
||||
if (data.owner && !(data.owner instanceof User)) data.owner = new User(data.owner);
|
||||
if (data.resolver && !(data.resolver instanceof User)) data.resolver = new User(data.resolver);
|
||||
|
||||
if (data.comment_set) {
|
||||
data.comment_set = data.comment_set.map((comment) => new Comment(comment));
|
||||
}
|
||||
|
||||
if (typeof data.id === 'undefined') {
|
||||
data.id = negativeIDGenerator();
|
||||
}
|
||||
if (typeof data.created_date === 'undefined') {
|
||||
data.created_date = new Date().toISOString();
|
||||
}
|
||||
|
||||
Object.defineProperties(
|
||||
this,
|
||||
Object.freeze({
|
||||
/**
|
||||
* @name id
|
||||
* @type {integer}
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
id: {
|
||||
get: () => data.id,
|
||||
},
|
||||
/**
|
||||
* Region of interests of the issue
|
||||
* @name position
|
||||
* @type {number[]}
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @instance
|
||||
* @readonly
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
*/
|
||||
position: {
|
||||
get: () => data.position,
|
||||
set: (value) => {
|
||||
if (Array.isArray(value) || value.some((coord) => typeof coord !== 'number')) {
|
||||
throw new ArgumentError(`Array of numbers is expected. Got ${value}`);
|
||||
}
|
||||
data.position = value;
|
||||
},
|
||||
},
|
||||
/**
|
||||
* List of comments attached to the issue
|
||||
* @name comments
|
||||
* @type {module:API.cvat.classes.Comment[]}
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @instance
|
||||
* @readonly
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
*/
|
||||
comments: {
|
||||
get: () => data.comment_set.filter((comment) => !comment.removed),
|
||||
},
|
||||
/**
|
||||
* @name frame
|
||||
* @type {integer}
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
frame: {
|
||||
get: () => data.frame,
|
||||
},
|
||||
/**
|
||||
* @name createdDate
|
||||
* @type {string}
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
createdDate: {
|
||||
get: () => data.created_date,
|
||||
},
|
||||
/**
|
||||
* @name resolvedDate
|
||||
* @type {string}
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
resolvedDate: {
|
||||
get: () => data.resolved_date,
|
||||
},
|
||||
/**
|
||||
* An instance of a user who has raised the issue
|
||||
* @name owner
|
||||
* @type {module:API.cvat.classes.User}
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
owner: {
|
||||
get: () => data.owner,
|
||||
},
|
||||
/**
|
||||
* An instance of a user who has resolved the issue
|
||||
* @name resolver
|
||||
* @type {module:API.cvat.classes.User}
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
resolver: {
|
||||
get: () => data.resolver,
|
||||
},
|
||||
/**
|
||||
* @name removed
|
||||
* @type {boolean}
|
||||
* @memberof module:API.cvat.classes.Comment
|
||||
* @instance
|
||||
*/
|
||||
removed: {
|
||||
get: () => data.removed,
|
||||
set: (value) => {
|
||||
if (typeof value !== 'boolean') {
|
||||
throw new ArgumentError('Value must be a boolean value');
|
||||
}
|
||||
data.removed = value;
|
||||
},
|
||||
},
|
||||
__internal: {
|
||||
get: () => data,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
static hull(coordinates) {
|
||||
if (coordinates.length > 4) {
|
||||
const points = coordinates.reduce((acc, coord, index, arr) => {
|
||||
if (index % 2) acc.push({ x: arr[index - 1], y: coord });
|
||||
return acc;
|
||||
}, []);
|
||||
|
||||
return quickhull(points)
|
||||
.map((point) => [point.x, point.y])
|
||||
.flat();
|
||||
}
|
||||
|
||||
return coordinates;
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {Object} CommentData
|
||||
* @property {number} [author] an ID of a user who has created the comment
|
||||
* @property {string} message a comment message
|
||||
* @global
|
||||
*/
|
||||
/**
|
||||
* Method appends a comment to the issue
|
||||
* For a new issue it saves comment locally, for a saved issue it saves comment on the server
|
||||
* @method comment
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @param {CommentData} data
|
||||
* @readonly
|
||||
* @instance
|
||||
* @async
|
||||
* @throws {module:API.cvat.exceptions.ServerError}
|
||||
* @throws {module:API.cvat.exceptions.PluginError}
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
*/
|
||||
async comment(data) {
|
||||
const result = await PluginRegistry.apiWrapper.call(this, Issue.prototype.comment, data);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* The method resolves the issue
|
||||
* New issues are resolved locally, server-saved issues are resolved on the server
|
||||
* @method resolve
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @param {module:API.cvat.classes.User} user
|
||||
* @readonly
|
||||
* @instance
|
||||
* @async
|
||||
* @throws {module:API.cvat.exceptions.ServerError}
|
||||
* @throws {module:API.cvat.exceptions.PluginError}
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
*/
|
||||
async resolve(user) {
|
||||
const result = await PluginRegistry.apiWrapper.call(this, Issue.prototype.resolve, user);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* The method resolves the issue
|
||||
* New issues are reopened locally, server-saved issues are reopened on the server
|
||||
* @method reopen
|
||||
* @memberof module:API.cvat.classes.Issue
|
||||
* @readonly
|
||||
* @instance
|
||||
* @async
|
||||
* @throws {module:API.cvat.exceptions.ServerError}
|
||||
* @throws {module:API.cvat.exceptions.PluginError}
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
*/
|
||||
async reopen() {
|
||||
const result = await PluginRegistry.apiWrapper.call(this, Issue.prototype.reopen);
|
||||
return result;
|
||||
}
|
||||
|
||||
serialize() {
|
||||
const { comments } = this;
|
||||
const data = {
|
||||
position: this.position,
|
||||
frame: this.frame,
|
||||
comment_set: comments.map((comment) => comment.serialize()),
|
||||
};
|
||||
|
||||
if (this.id > 0) {
|
||||
data.id = this.id;
|
||||
}
|
||||
if (this.createdDate) {
|
||||
data.created_date = this.createdDate;
|
||||
}
|
||||
if (this.resolvedDate) {
|
||||
data.resolved_date = this.resolvedDate;
|
||||
}
|
||||
if (this.owner) {
|
||||
data.owner = this.owner.toJSON();
|
||||
}
|
||||
if (this.resolver) {
|
||||
data.resolver = this.resolver.toJSON();
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
toJSON() {
|
||||
const data = this.serialize();
|
||||
const { owner, resolver, ...updated } = data;
|
||||
return {
|
||||
...updated,
|
||||
comment_set: this.comments.map((comment) => comment.toJSON()),
|
||||
owner_id: owner ? owner.id : undefined,
|
||||
resolver_id: resolver ? resolver.id : undefined,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
Issue.prototype.comment.implementation = async function (data) {
|
||||
if (typeof data !== 'object' || data === null) {
|
||||
throw new ArgumentError(`The argument "data" must be a not null object. Got ${data}`);
|
||||
}
|
||||
if (typeof data.message !== 'string' || data.message.length < 1) {
|
||||
throw new ArgumentError(`Comment message must be a not empty string. Got ${data.message}`);
|
||||
}
|
||||
if (!(data.author instanceof User)) {
|
||||
throw new ArgumentError(`Author of the comment must a User instance. Got ${data.author}`);
|
||||
}
|
||||
|
||||
const comment = new Comment(data);
|
||||
const { id } = this;
|
||||
if (id >= 0) {
|
||||
const jsonified = comment.toJSON();
|
||||
jsonified.issue = id;
|
||||
const response = await serverProxy.comments.create(jsonified);
|
||||
const savedComment = new Comment(response);
|
||||
this.__internal.comment_set.push(savedComment);
|
||||
} else {
|
||||
this.__internal.comment_set.push(comment);
|
||||
}
|
||||
};
|
||||
|
||||
Issue.prototype.resolve.implementation = async function (user) {
|
||||
if (!(user instanceof User)) {
|
||||
throw new ArgumentError(`The argument "user" must be an instance of a User class. Got ${typeof user}`);
|
||||
}
|
||||
|
||||
const { id } = this;
|
||||
if (id >= 0) {
|
||||
const response = await serverProxy.issues.update(id, { resolver_id: user.id });
|
||||
this.__internal.resolved_date = response.resolved_date;
|
||||
this.__internal.resolver = new User(response.resolver);
|
||||
} else {
|
||||
this.__internal.resolved_date = new Date().toISOString();
|
||||
this.__internal.resolver = user;
|
||||
}
|
||||
};
|
||||
|
||||
Issue.prototype.reopen.implementation = async function () {
|
||||
const { id } = this;
|
||||
if (id >= 0) {
|
||||
const response = await serverProxy.issues.update(id, { resolver_id: null });
|
||||
this.__internal.resolved_date = response.resolved_date;
|
||||
this.__internal.resolver = response.resolver;
|
||||
} else {
|
||||
this.__internal.resolved_date = null;
|
||||
this.__internal.resolver = null;
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Issue;
|
||||
@ -0,0 +1,397 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
const store = require('store');
|
||||
|
||||
const PluginRegistry = require('./plugins');
|
||||
const Issue = require('./issue');
|
||||
const User = require('./user');
|
||||
const { ArgumentError, DataError } = require('./exceptions');
|
||||
const { ReviewStatus } = require('./enums');
|
||||
const { negativeIDGenerator } = require('./common');
|
||||
const serverProxy = require('./server-proxy');
|
||||
|
||||
/**
|
||||
* Class representing a single review
|
||||
* @memberof module:API.cvat.classes
|
||||
* @hideconstructor
|
||||
*/
|
||||
class Review {
|
||||
constructor(initialData) {
|
||||
const data = {
|
||||
id: undefined,
|
||||
job: undefined,
|
||||
issue_set: [],
|
||||
estimated_quality: undefined,
|
||||
status: undefined,
|
||||
reviewer: undefined,
|
||||
assignee: undefined,
|
||||
reviewed_frames: undefined,
|
||||
reviewed_states: undefined,
|
||||
};
|
||||
|
||||
for (const property in data) {
|
||||
if (Object.prototype.hasOwnProperty.call(data, property) && property in initialData) {
|
||||
data[property] = initialData[property];
|
||||
}
|
||||
}
|
||||
|
||||
if (data.reviewer && !(data.reviewer instanceof User)) data.reviewer = new User(data.reviewer);
|
||||
if (data.assignee && !(data.assignee instanceof User)) data.assignee = new User(data.assignee);
|
||||
|
||||
data.reviewed_frames = Array.isArray(data.reviewed_frames) ? new Set(data.reviewed_frames) : new Set();
|
||||
data.reviewed_states = Array.isArray(data.reviewed_states) ? new Set(data.reviewed_states) : new Set();
|
||||
if (data.issue_set) {
|
||||
data.issue_set = data.issue_set.map((issue) => new Issue(issue));
|
||||
}
|
||||
|
||||
if (typeof data.id === 'undefined') {
|
||||
data.id = negativeIDGenerator();
|
||||
}
|
||||
|
||||
Object.defineProperties(
|
||||
this,
|
||||
Object.freeze({
|
||||
/**
|
||||
* @name id
|
||||
* @type {integer}
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
id: {
|
||||
get: () => data.id,
|
||||
},
|
||||
/**
|
||||
* An identifier of a job the review is attached to
|
||||
* @name job
|
||||
* @type {integer}
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
job: {
|
||||
get: () => data.job,
|
||||
},
|
||||
/**
|
||||
* List of attached issues
|
||||
* @name issues
|
||||
* @type {number[]}
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @instance
|
||||
* @readonly
|
||||
*/
|
||||
issues: {
|
||||
get: () => data.issue_set.filter((issue) => !issue.removed),
|
||||
},
|
||||
/**
|
||||
* Estimated quality of the review
|
||||
* @name estimatedQuality
|
||||
* @type {number}
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @instance
|
||||
* @readonly
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
*/
|
||||
estimatedQuality: {
|
||||
get: () => data.estimated_quality,
|
||||
set: (value) => {
|
||||
if (typeof value !== 'number' || value < 0 || value > 5) {
|
||||
throw new ArgumentError(`Value must be a number in range [0, 5]. Got ${value}`);
|
||||
}
|
||||
data.estimated_quality = value;
|
||||
},
|
||||
},
|
||||
/**
|
||||
* @name status
|
||||
* @type {module:API.cvat.enums.ReviewStatus}
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @instance
|
||||
* @readonly
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
*/
|
||||
status: {
|
||||
get: () => data.status,
|
||||
set: (status) => {
|
||||
const type = ReviewStatus;
|
||||
let valueInEnum = false;
|
||||
for (const value in type) {
|
||||
if (type[value] === status) {
|
||||
valueInEnum = true;
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (!valueInEnum) {
|
||||
throw new ArgumentError(
|
||||
'Value must be a value from the enumeration cvat.enums.ReviewStatus',
|
||||
);
|
||||
}
|
||||
|
||||
data.status = status;
|
||||
},
|
||||
},
|
||||
/**
|
||||
* An instance of a user who has done the review
|
||||
* @name reviewer
|
||||
* @type {module:API.cvat.classes.User}
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @readonly
|
||||
* @instance
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
*/
|
||||
reviewer: {
|
||||
get: () => data.reviewer,
|
||||
set: (reviewer) => {
|
||||
if (!(reviewer instanceof User)) {
|
||||
throw new ArgumentError(`Reviewer must be an instance of the User class. Got ${reviewer}`);
|
||||
}
|
||||
|
||||
data.reviewer = reviewer;
|
||||
},
|
||||
},
|
||||
/**
|
||||
* An instance of a user who was assigned for annotation before the review
|
||||
* @name assignee
|
||||
* @type {module:API.cvat.classes.User}
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
assignee: {
|
||||
get: () => data.assignee,
|
||||
},
|
||||
/**
|
||||
* A set of frames that have been visited during review
|
||||
* @name reviewedFrames
|
||||
* @type {number[]}
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
reviewedFrames: {
|
||||
get: () => Array.from(data.reviewed_frames),
|
||||
},
|
||||
/**
|
||||
* A set of reviewed states (server IDs combined with frames)
|
||||
* @name reviewedFrames
|
||||
* @type {string[]}
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @readonly
|
||||
* @instance
|
||||
*/
|
||||
reviewedStates: {
|
||||
get: () => Array.from(data.reviewed_states),
|
||||
},
|
||||
__internal: {
|
||||
get: () => data,
|
||||
},
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Method appends a frame to a set of reviewed frames
|
||||
* Reviewed frames are saved only in local storage
|
||||
* @method reviewFrame
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @param {number} frame
|
||||
* @readonly
|
||||
* @instance
|
||||
* @async
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
* @throws {module:API.cvat.exceptions.PluginError}
|
||||
*/
|
||||
async reviewFrame(frame) {
|
||||
const result = await PluginRegistry.apiWrapper.call(this, Review.prototype.reviewFrame, frame);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Method appends a frame to a set of reviewed frames
|
||||
* Reviewed states are saved only in local storage. They are used to automatic annotations quality assessment
|
||||
* @method reviewStates
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @param {string[]} stateIDs
|
||||
* @readonly
|
||||
* @instance
|
||||
* @async
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
* @throws {module:API.cvat.exceptions.PluginError}
|
||||
*/
|
||||
async reviewStates(stateIDs) {
|
||||
const result = await PluginRegistry.apiWrapper.call(this, Review.prototype.reviewStates, stateIDs);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* @typedef {Object} IssueData
|
||||
* @property {number} frame
|
||||
* @property {number[]} position
|
||||
* @property {number} owner
|
||||
* @property {CommentData[]} comment_set
|
||||
* @global
|
||||
*/
|
||||
/**
|
||||
* Method adds a new issue to the review
|
||||
* @method openIssue
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @param {IssueData} data
|
||||
* @returns {module:API.cvat.classes.Issue}
|
||||
* @readonly
|
||||
* @instance
|
||||
* @async
|
||||
* @throws {module:API.cvat.exceptions.ArgumentError}
|
||||
* @throws {module:API.cvat.exceptions.PluginError}
|
||||
*/
|
||||
async openIssue(data) {
|
||||
const result = await PluginRegistry.apiWrapper.call(this, Review.prototype.openIssue, data);
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Method submits local review to the server
|
||||
* @method submit
|
||||
* @memberof module:API.cvat.classes.Review
|
||||
* @readonly
|
||||
* @instance
|
||||
* @async
|
||||
* @throws {module:API.cvat.exceptions.DataError}
|
||||
* @throws {module:API.cvat.exceptions.PluginError}
|
||||
*/
|
||||
async submit() {
|
||||
const result = await PluginRegistry.apiWrapper.call(this, Review.prototype.submit);
|
||||
return result;
|
||||
}
|
||||
|
||||
serialize() {
|
||||
const { issues, reviewedFrames, reviewedStates } = this;
|
||||
const data = {
|
||||
job: this.job,
|
||||
issue_set: issues.map((issue) => issue.serialize()),
|
||||
reviewed_frames: Array.from(reviewedFrames),
|
||||
reviewed_states: Array.from(reviewedStates),
|
||||
};
|
||||
|
||||
if (this.id > 0) {
|
||||
data.id = this.id;
|
||||
}
|
||||
if (typeof this.estimatedQuality !== 'undefined') {
|
||||
data.estimated_quality = this.estimatedQuality;
|
||||
}
|
||||
if (typeof this.status !== 'undefined') {
|
||||
data.status = this.status;
|
||||
}
|
||||
if (this.reviewer) {
|
||||
data.reviewer = this.reviewer.toJSON();
|
||||
}
|
||||
if (this.assignee) {
|
||||
data.reviewer = this.assignee.toJSON();
|
||||
}
|
||||
|
||||
return data;
|
||||
}
|
||||
|
||||
toJSON() {
|
||||
const data = this.serialize();
|
||||
const {
|
||||
reviewer,
|
||||
assignee,
|
||||
reviewed_frames: reviewedFrames,
|
||||
reviewed_states: reviewedStates,
|
||||
...updated
|
||||
} = data;
|
||||
|
||||
return {
|
||||
...updated,
|
||||
issue_set: this.issues.map((issue) => issue.toJSON()),
|
||||
reviewer_id: reviewer ? reviewer.id : undefined,
|
||||
assignee_id: assignee ? assignee.id : undefined,
|
||||
};
|
||||
}
|
||||
|
||||
async toLocalStorage() {
|
||||
const data = this.serialize();
|
||||
store.set(`job-${this.job}-review`, JSON.stringify(data));
|
||||
}
|
||||
}
|
||||
|
||||
Review.prototype.reviewFrame.implementation = function (frame) {
|
||||
if (!Number.isInteger(frame)) {
|
||||
throw new ArgumentError(`The argument "frame" is expected to be an integer. Got ${frame}`);
|
||||
}
|
||||
this.__internal.reviewed_frames.add(frame);
|
||||
};
|
||||
|
||||
Review.prototype.reviewStates.implementation = function (stateIDs) {
|
||||
if (!Array.isArray(stateIDs) || stateIDs.some((stateID) => typeof stateID !== 'string')) {
|
||||
throw new ArgumentError(`The argument "stateIDs" is expected to be an array of string. Got ${stateIDs}`);
|
||||
}
|
||||
|
||||
stateIDs.forEach((stateID) => this.__internal.reviewed_states.add(stateID));
|
||||
};
|
||||
|
||||
Review.prototype.openIssue.implementation = async function (data) {
|
||||
if (typeof data !== 'object' || data === null) {
|
||||
throw new ArgumentError(`The argument "data" must be a not null object. Got ${data}`);
|
||||
}
|
||||
|
||||
if (typeof data.frame !== 'number') {
|
||||
throw new ArgumentError(`Issue frame must be a number. Got ${data.frame}`);
|
||||
}
|
||||
|
||||
if (!(data.owner instanceof User)) {
|
||||
throw new ArgumentError(`Issue owner must be a User instance. Got ${data.owner}`);
|
||||
}
|
||||
|
||||
if (!Array.isArray(data.position) || data.position.some((coord) => typeof coord !== 'number')) {
|
||||
throw new ArgumentError(`Issue position must be an array of numbers. Got ${data.position}`);
|
||||
}
|
||||
|
||||
if (!Array.isArray(data.comment_set)) {
|
||||
throw new ArgumentError(`Issue comment set must be an array. Got ${data.comment_set}`);
|
||||
}
|
||||
|
||||
const copied = {
|
||||
frame: data.frame,
|
||||
position: Issue.hull(data.position),
|
||||
owner: data.owner,
|
||||
comment_set: [],
|
||||
};
|
||||
|
||||
const issue = new Issue(copied);
|
||||
|
||||
for (const comment of data.comment_set) {
|
||||
await issue.comment.implementation.call(issue, comment);
|
||||
}
|
||||
|
||||
this.__internal.issue_set.push(issue);
|
||||
return issue;
|
||||
};
|
||||
|
||||
Review.prototype.submit.implementation = async function () {
|
||||
if (typeof this.estimatedQuality === 'undefined') {
|
||||
throw new DataError('Estimated quality is expected to be a number. Got "undefined"');
|
||||
}
|
||||
|
||||
if (typeof this.status === 'undefined') {
|
||||
throw new DataError('Review status is expected to be a string. Got "undefined"');
|
||||
}
|
||||
|
||||
if (this.id < 0) {
|
||||
const data = this.toJSON();
|
||||
|
||||
const response = await serverProxy.jobs.reviews.create(data);
|
||||
store.remove(`job-${this.job}-review`);
|
||||
this.__internal.id = response.id;
|
||||
this.__internal.issue_set = response.issue_set.map((issue) => new Issue(issue));
|
||||
this.__internal.estimated_quality = response.estimated_quality;
|
||||
this.__internal.status = response.status;
|
||||
|
||||
if (response.reviewer) this.__internal.reviewer = new User(response.reviewer);
|
||||
if (response.assignee) this.__internal.assignee = new User(response.assignee);
|
||||
}
|
||||
};
|
||||
|
||||
module.exports = Review;
|
||||
@ -0,0 +1,217 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import { ActionUnion, createAction, ThunkAction } from 'utils/redux';
|
||||
import getCore from 'cvat-core-wrapper';
|
||||
import { updateTaskSuccess } from './tasks-actions';
|
||||
|
||||
const cvat = getCore();
|
||||
|
||||
export enum ReviewActionTypes {
|
||||
INITIALIZE_REVIEW_SUCCESS = 'INITIALIZE_REVIEW_SUCCESS',
|
||||
INITIALIZE_REVIEW_FAILED = 'INITIALIZE_REVIEW_FAILED',
|
||||
CREATE_ISSUE = 'CREATE_ISSUE',
|
||||
START_ISSUE = 'START_ISSUE',
|
||||
FINISH_ISSUE_SUCCESS = 'FINISH_ISSUE_SUCCESS',
|
||||
FINISH_ISSUE_FAILED = 'FINISH_ISSUE_FAILED',
|
||||
CANCEL_ISSUE = 'CANCEL_ISSUE',
|
||||
RESOLVE_ISSUE = 'RESOLVE_ISSUE',
|
||||
RESOLVE_ISSUE_SUCCESS = 'RESOLVE_ISSUE_SUCCESS',
|
||||
RESOLVE_ISSUE_FAILED = 'RESOLVE_ISSUE_FAILED',
|
||||
REOPEN_ISSUE = 'REOPEN_ISSUE',
|
||||
REOPEN_ISSUE_SUCCESS = 'REOPEN_ISSUE_SUCCESS',
|
||||
REOPEN_ISSUE_FAILED = 'REOPEN_ISSUE_FAILED',
|
||||
COMMENT_ISSUE = 'COMMENT_ISSUE',
|
||||
COMMENT_ISSUE_SUCCESS = 'COMMENT_ISSUE_SUCCESS',
|
||||
COMMENT_ISSUE_FAILED = 'COMMENT_ISSUE_FAILED',
|
||||
SUBMIT_REVIEW = 'SUBMIT_REVIEW',
|
||||
SUBMIT_REVIEW_SUCCESS = 'SUBMIT_REVIEW_SUCCESS',
|
||||
SUBMIT_REVIEW_FAILED = 'SUBMIT_REVIEW_FAILED',
|
||||
SWITCH_ISSUES_HIDDEN_FLAG = 'SWITCH_ISSUES_HIDDEN_FLAG',
|
||||
}
|
||||
|
||||
export const reviewActions = {
|
||||
initializeReviewSuccess: (reviewInstance: any, frame: number) =>
|
||||
createAction(ReviewActionTypes.INITIALIZE_REVIEW_SUCCESS, { reviewInstance, frame }),
|
||||
initializeReviewFailed: (error: any) => createAction(ReviewActionTypes.INITIALIZE_REVIEW_FAILED, { error }),
|
||||
createIssue: () => createAction(ReviewActionTypes.CREATE_ISSUE, {}),
|
||||
startIssue: (position: number[]) =>
|
||||
createAction(ReviewActionTypes.START_ISSUE, { position: cvat.classes.Issue.hull(position) }),
|
||||
finishIssueSuccess: (frame: number, issue: any) =>
|
||||
createAction(ReviewActionTypes.FINISH_ISSUE_SUCCESS, { frame, issue }),
|
||||
finishIssueFailed: (error: any) => createAction(ReviewActionTypes.FINISH_ISSUE_FAILED, { error }),
|
||||
cancelIssue: () => createAction(ReviewActionTypes.CANCEL_ISSUE),
|
||||
commentIssue: (issueId: number) => createAction(ReviewActionTypes.COMMENT_ISSUE, { issueId }),
|
||||
commentIssueSuccess: () => createAction(ReviewActionTypes.COMMENT_ISSUE_SUCCESS),
|
||||
commentIssueFailed: (error: any) => createAction(ReviewActionTypes.COMMENT_ISSUE_FAILED, { error }),
|
||||
resolveIssue: (issueId: number) => createAction(ReviewActionTypes.RESOLVE_ISSUE, { issueId }),
|
||||
resolveIssueSuccess: () => createAction(ReviewActionTypes.RESOLVE_ISSUE_SUCCESS),
|
||||
resolveIssueFailed: (error: any) => createAction(ReviewActionTypes.RESOLVE_ISSUE_FAILED, { error }),
|
||||
reopenIssue: (issueId: number) => createAction(ReviewActionTypes.REOPEN_ISSUE, { issueId }),
|
||||
reopenIssueSuccess: () => createAction(ReviewActionTypes.REOPEN_ISSUE_SUCCESS),
|
||||
reopenIssueFailed: (error: any) => createAction(ReviewActionTypes.REOPEN_ISSUE_FAILED, { error }),
|
||||
submitReview: (reviewId: number) => createAction(ReviewActionTypes.SUBMIT_REVIEW, { reviewId }),
|
||||
submitReviewSuccess: (activeReview: any, reviews: any[], issues: any[], frame: number) =>
|
||||
createAction(ReviewActionTypes.SUBMIT_REVIEW_SUCCESS, {
|
||||
activeReview,
|
||||
reviews,
|
||||
issues,
|
||||
frame,
|
||||
}),
|
||||
submitReviewFailed: (error: any) => createAction(ReviewActionTypes.SUBMIT_REVIEW_FAILED, { error }),
|
||||
switchIssuesHiddenFlag: (hidden: boolean) => createAction(ReviewActionTypes.SWITCH_ISSUES_HIDDEN_FLAG, { hidden }),
|
||||
};
|
||||
|
||||
export type ReviewActions = ActionUnion<typeof reviewActions>;
|
||||
|
||||
export const initializeReviewAsync = (): ThunkAction => async (dispatch, getState) => {
|
||||
try {
|
||||
const state = getState();
|
||||
const {
|
||||
annotation: {
|
||||
job: { instance: jobInstance },
|
||||
player: {
|
||||
frame: { number: frame },
|
||||
},
|
||||
},
|
||||
} = state;
|
||||
|
||||
const reviews = await jobInstance.reviews();
|
||||
const count = reviews.length;
|
||||
let reviewInstance = null;
|
||||
if (count && reviews[count - 1].id < 0) {
|
||||
reviewInstance = reviews[count - 1];
|
||||
} else {
|
||||
reviewInstance = new cvat.classes.Review({ job: jobInstance.id });
|
||||
}
|
||||
|
||||
dispatch(reviewActions.initializeReviewSuccess(reviewInstance, frame));
|
||||
} catch (error) {
|
||||
dispatch(reviewActions.initializeReviewFailed(error));
|
||||
}
|
||||
};
|
||||
|
||||
export const finishIssueAsync = (message: string): ThunkAction => async (dispatch, getState) => {
|
||||
const state = getState();
|
||||
const {
|
||||
auth: { user },
|
||||
annotation: {
|
||||
player: {
|
||||
frame: { number: frameNumber },
|
||||
},
|
||||
},
|
||||
review: { activeReview, newIssuePosition },
|
||||
} = state;
|
||||
|
||||
try {
|
||||
const issue = await activeReview.openIssue({
|
||||
frame: frameNumber,
|
||||
position: newIssuePosition,
|
||||
owner: user,
|
||||
comment_set: [
|
||||
{
|
||||
message,
|
||||
author: user,
|
||||
},
|
||||
],
|
||||
});
|
||||
await activeReview.toLocalStorage();
|
||||
dispatch(reviewActions.finishIssueSuccess(frameNumber, issue));
|
||||
} catch (error) {
|
||||
dispatch(reviewActions.finishIssueFailed(error));
|
||||
}
|
||||
};
|
||||
|
||||
export const commentIssueAsync = (id: number, message: string): ThunkAction => async (dispatch, getState) => {
|
||||
const state = getState();
|
||||
const {
|
||||
auth: { user },
|
||||
review: { frameIssues, activeReview },
|
||||
} = state;
|
||||
|
||||
try {
|
||||
dispatch(reviewActions.commentIssue(id));
|
||||
const [issue] = frameIssues.filter((_issue: any): boolean => _issue.id === id);
|
||||
await issue.comment({
|
||||
message,
|
||||
author: user,
|
||||
});
|
||||
if (activeReview && activeReview.issues.includes(issue)) {
|
||||
await activeReview.toLocalStorage();
|
||||
}
|
||||
dispatch(reviewActions.commentIssueSuccess());
|
||||
} catch (error) {
|
||||
dispatch(reviewActions.commentIssueFailed(error));
|
||||
}
|
||||
};
|
||||
|
||||
export const resolveIssueAsync = (id: number): ThunkAction => async (dispatch, getState) => {
|
||||
const state = getState();
|
||||
const {
|
||||
auth: { user },
|
||||
review: { frameIssues, activeReview },
|
||||
} = state;
|
||||
|
||||
try {
|
||||
dispatch(reviewActions.resolveIssue(id));
|
||||
const [issue] = frameIssues.filter((_issue: any): boolean => _issue.id === id);
|
||||
await issue.resolve(user);
|
||||
if (activeReview && activeReview.issues.includes(issue)) {
|
||||
await activeReview.toLocalStorage();
|
||||
}
|
||||
|
||||
dispatch(reviewActions.resolveIssueSuccess());
|
||||
} catch (error) {
|
||||
dispatch(reviewActions.resolveIssueFailed(error));
|
||||
}
|
||||
};
|
||||
|
||||
export const reopenIssueAsync = (id: number): ThunkAction => async (dispatch, getState) => {
|
||||
const state = getState();
|
||||
const {
|
||||
auth: { user },
|
||||
review: { frameIssues, activeReview },
|
||||
} = state;
|
||||
|
||||
try {
|
||||
dispatch(reviewActions.reopenIssue(id));
|
||||
const [issue] = frameIssues.filter((_issue: any): boolean => _issue.id === id);
|
||||
await issue.reopen(user);
|
||||
if (activeReview && activeReview.issues.includes(issue)) {
|
||||
await activeReview.toLocalStorage();
|
||||
}
|
||||
|
||||
dispatch(reviewActions.reopenIssueSuccess());
|
||||
} catch (error) {
|
||||
dispatch(reviewActions.reopenIssueFailed(error));
|
||||
}
|
||||
};
|
||||
|
||||
export const submitReviewAsync = (review: any): ThunkAction => async (dispatch, getState) => {
|
||||
const state = getState();
|
||||
const {
|
||||
annotation: {
|
||||
job: { instance: jobInstance },
|
||||
player: {
|
||||
frame: { number: frame },
|
||||
},
|
||||
},
|
||||
} = state;
|
||||
|
||||
try {
|
||||
dispatch(reviewActions.submitReview(review.id));
|
||||
await review.submit(jobInstance.id);
|
||||
|
||||
const [task] = await cvat.tasks.get({ id: jobInstance.task.id });
|
||||
dispatch(updateTaskSuccess(task));
|
||||
|
||||
const reviews = await jobInstance.reviews();
|
||||
const issues = await jobInstance.issues();
|
||||
const reviewInstance = new cvat.classes.Review({ job: jobInstance.id });
|
||||
|
||||
dispatch(reviewActions.submitReviewSuccess(reviewInstance, reviews, issues, frame));
|
||||
} catch (error) {
|
||||
dispatch(reviewActions.submitReviewFailed(error));
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,140 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Menu, { ClickParam } from 'antd/lib/menu';
|
||||
|
||||
import ObjectItemContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-item';
|
||||
import { Workspace } from 'reducers/interfaces';
|
||||
import consts from 'consts';
|
||||
|
||||
interface Props {
|
||||
readonly: boolean;
|
||||
workspace: Workspace;
|
||||
contextMenuClientID: number | null;
|
||||
objectStates: any[];
|
||||
visible: boolean;
|
||||
left: number;
|
||||
top: number;
|
||||
onStartIssue(position: number[]): void;
|
||||
openIssue(position: number[], message: string): void;
|
||||
latestComments: string[];
|
||||
}
|
||||
|
||||
interface ReviewContextMenuProps {
|
||||
top: number;
|
||||
left: number;
|
||||
latestComments: string[];
|
||||
onClick: (param: ClickParam) => void;
|
||||
}
|
||||
|
||||
enum ReviewContextMenuKeys {
|
||||
OPEN_ISSUE = 'open_issue',
|
||||
QUICK_ISSUE_POSITION = 'quick_issue_position',
|
||||
QUICK_ISSUE_ATTRIBUTE = 'quick_issue_attribute',
|
||||
QUICK_ISSUE_FROM_LATEST = 'quick_issue_from_latest',
|
||||
}
|
||||
|
||||
function ReviewContextMenu({
|
||||
top, left, latestComments, onClick,
|
||||
}: ReviewContextMenuProps): JSX.Element {
|
||||
return (
|
||||
<Menu onClick={onClick} selectable={false} className='cvat-canvas-context-menu' style={{ top, left }}>
|
||||
<Menu.Item className='cvat-context-menu-item' key={ReviewContextMenuKeys.OPEN_ISSUE}>
|
||||
Open an issue ...
|
||||
</Menu.Item>
|
||||
<Menu.Item className='cvat-context-menu-item' key={ReviewContextMenuKeys.QUICK_ISSUE_POSITION}>
|
||||
Quick issue: incorrect position
|
||||
</Menu.Item>
|
||||
<Menu.Item className='cvat-context-menu-item' key={ReviewContextMenuKeys.QUICK_ISSUE_ATTRIBUTE}>
|
||||
Quick issue: incorrect attribute
|
||||
</Menu.Item>
|
||||
{latestComments.length ? (
|
||||
<Menu.SubMenu
|
||||
title='Quick issue ...'
|
||||
className='cvat-context-menu-item'
|
||||
key={ReviewContextMenuKeys.QUICK_ISSUE_FROM_LATEST}
|
||||
>
|
||||
{latestComments.map(
|
||||
(comment: string, id: number): JSX.Element => (
|
||||
<Menu.Item className='cvat-context-menu-item' key={`${id}`}>
|
||||
{comment}
|
||||
</Menu.Item>
|
||||
),
|
||||
)}
|
||||
</Menu.SubMenu>
|
||||
) : null}
|
||||
</Menu>
|
||||
);
|
||||
}
|
||||
|
||||
export default function CanvasContextMenu(props: Props): JSX.Element | null {
|
||||
const {
|
||||
contextMenuClientID,
|
||||
objectStates,
|
||||
visible,
|
||||
left,
|
||||
top,
|
||||
readonly,
|
||||
workspace,
|
||||
latestComments,
|
||||
onStartIssue,
|
||||
openIssue,
|
||||
} = props;
|
||||
|
||||
if (!visible || contextMenuClientID === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (workspace === Workspace.REVIEW_WORKSPACE) {
|
||||
return ReactDOM.createPortal(
|
||||
<ReviewContextMenu
|
||||
key={contextMenuClientID}
|
||||
top={top}
|
||||
left={left}
|
||||
latestComments={latestComments}
|
||||
onClick={(param: ClickParam) => {
|
||||
const [state] = objectStates.filter(
|
||||
(_state: any): boolean => _state.clientID === contextMenuClientID,
|
||||
);
|
||||
if (param.key === ReviewContextMenuKeys.OPEN_ISSUE) {
|
||||
if (state) {
|
||||
onStartIssue(state.points);
|
||||
}
|
||||
} else if (param.key === ReviewContextMenuKeys.QUICK_ISSUE_POSITION) {
|
||||
if (state) {
|
||||
openIssue(state.points, consts.QUICK_ISSUE_INCORRECT_POSITION_TEXT);
|
||||
}
|
||||
} else if (param.key === ReviewContextMenuKeys.QUICK_ISSUE_ATTRIBUTE) {
|
||||
if (state) {
|
||||
openIssue(state.points, consts.QUICK_ISSUE_INCORRECT_ATTRIBUTE_TEXT);
|
||||
}
|
||||
} else if (
|
||||
param.keyPath.length === 2 &&
|
||||
param.keyPath[1] === ReviewContextMenuKeys.QUICK_ISSUE_FROM_LATEST
|
||||
) {
|
||||
if (state) {
|
||||
openIssue(state.points, latestComments[+param.keyPath[0]]);
|
||||
}
|
||||
}
|
||||
}}
|
||||
/>,
|
||||
window.document.body,
|
||||
);
|
||||
}
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<div className='cvat-canvas-context-menu' style={{ top, left }}>
|
||||
<ObjectItemContainer
|
||||
readonly={readonly}
|
||||
key={contextMenuClientID}
|
||||
clientID={contextMenuClientID}
|
||||
objectStates={objectStates}
|
||||
initialCollapsed
|
||||
/>
|
||||
</div>,
|
||||
window.document.body,
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,64 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useState } from 'react';
|
||||
import { AnyAction } from 'redux';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { useHistory } from 'react-router';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import Title from 'antd/lib/typography/Title';
|
||||
import Modal from 'antd/lib/modal';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
|
||||
import UserSelector, { User } from 'components/task-page/user-selector';
|
||||
import { CombinedState, TaskStatus } from 'reducers/interfaces';
|
||||
import { switchRequestReviewDialog } from 'actions/annotation-actions';
|
||||
import { updateJobAsync } from 'actions/tasks-actions';
|
||||
|
||||
export default function RequestReviewModal(): JSX.Element | null {
|
||||
const dispatch = useDispatch();
|
||||
const history = useHistory();
|
||||
const isVisible = useSelector((state: CombinedState): boolean => state.annotation.requestReviewDialogVisible);
|
||||
const job = useSelector((state: CombinedState): any => state.annotation.job.instance);
|
||||
const [reviewer, setReviewer] = useState<User | null>(job.reviewer ? job.reviewer : null);
|
||||
const close = (): AnyAction => dispatch(switchRequestReviewDialog(false));
|
||||
const submitAnnotations = (): void => {
|
||||
job.reviewer = reviewer;
|
||||
job.status = TaskStatus.REVIEW;
|
||||
dispatch(updateJobAsync(job));
|
||||
history.push(`/tasks/${job.task.id}`);
|
||||
};
|
||||
|
||||
if (!isVisible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className='cvat-request-review-dialog'
|
||||
visible={isVisible}
|
||||
destroyOnClose
|
||||
onCancel={close}
|
||||
onOk={submitAnnotations}
|
||||
okText='Submit'
|
||||
>
|
||||
<Row type='flex' justify='start'>
|
||||
<Col>
|
||||
<Title level={4}>Assign a user who is responsible for review</Title>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row align='middle' type='flex' justify='start'>
|
||||
<Col>
|
||||
<Text type='secondary'>Reviewer: </Text>
|
||||
</Col>
|
||||
<Col offset={1}>
|
||||
<UserSelector value={reviewer} onSelect={setReviewer} />
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' justify='start'>
|
||||
<Text type='secondary'>You might not be able to change the job after this action. Continue?</Text>
|
||||
</Row>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,93 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
|
||||
import Layout from 'antd/lib/layout';
|
||||
|
||||
import { ActiveControl, Rotation } from 'reducers/interfaces';
|
||||
import { Canvas } from 'cvat-canvas-wrapper';
|
||||
|
||||
import RotateControl from 'components/annotation-page/standard-workspace/controls-side-bar/rotate-control';
|
||||
import CursorControl from 'components/annotation-page/standard-workspace/controls-side-bar/cursor-control';
|
||||
import MoveControl from 'components/annotation-page/standard-workspace/controls-side-bar/move-control';
|
||||
import FitControl from 'components/annotation-page/standard-workspace/controls-side-bar/fit-control';
|
||||
import ResizeControl from 'components/annotation-page/standard-workspace/controls-side-bar/resize-control';
|
||||
import IssueControl from './issue-control';
|
||||
|
||||
interface Props {
|
||||
canvasInstance: Canvas;
|
||||
activeControl: ActiveControl;
|
||||
keyMap: Record<string, ExtendedKeyMapOptions>;
|
||||
normalizedKeyMap: Record<string, string>;
|
||||
|
||||
rotateFrame(rotation: Rotation): void;
|
||||
selectIssuePosition(enabled: boolean): void;
|
||||
}
|
||||
|
||||
export default function ControlsSideBarComponent(props: Props): JSX.Element {
|
||||
const {
|
||||
canvasInstance, activeControl, normalizedKeyMap, keyMap, rotateFrame, selectIssuePosition,
|
||||
} = props;
|
||||
|
||||
const preventDefault = (event: KeyboardEvent | undefined): void => {
|
||||
if (event) {
|
||||
event.preventDefault();
|
||||
}
|
||||
};
|
||||
|
||||
const subKeyMap = {
|
||||
CANCEL: keyMap.CANCEL,
|
||||
OPEN_REVIEW_ISSUE: keyMap.OPEN_REVIEW_ISSUE,
|
||||
};
|
||||
|
||||
const handlers = {
|
||||
CANCEL: (event: KeyboardEvent | undefined) => {
|
||||
preventDefault(event);
|
||||
if (activeControl !== ActiveControl.CURSOR) {
|
||||
canvasInstance.cancel();
|
||||
}
|
||||
},
|
||||
OPEN_REVIEW_ISSUE: (event: KeyboardEvent | undefined) => {
|
||||
preventDefault(event);
|
||||
if (activeControl === ActiveControl.OPEN_ISSUE) {
|
||||
canvasInstance.selectRegion(false);
|
||||
selectIssuePosition(false);
|
||||
} else {
|
||||
canvasInstance.cancel();
|
||||
canvasInstance.selectRegion(true);
|
||||
selectIssuePosition(true);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
return (
|
||||
<Layout.Sider className='cvat-canvas-controls-sidebar' theme='light' width={44}>
|
||||
<GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
|
||||
<CursorControl
|
||||
cursorShortkey={normalizedKeyMap.CANCEL}
|
||||
canvasInstance={canvasInstance}
|
||||
activeControl={activeControl}
|
||||
/>
|
||||
<MoveControl canvasInstance={canvasInstance} activeControl={activeControl} />
|
||||
<RotateControl
|
||||
anticlockwiseShortcut={normalizedKeyMap.ANTICLOCKWISE_ROTATION}
|
||||
clockwiseShortcut={normalizedKeyMap.CLOCKWISE_ROTATION}
|
||||
rotateFrame={rotateFrame}
|
||||
/>
|
||||
|
||||
<hr />
|
||||
|
||||
<FitControl canvasInstance={canvasInstance} />
|
||||
<ResizeControl canvasInstance={canvasInstance} activeControl={activeControl} />
|
||||
|
||||
<hr />
|
||||
<IssueControl
|
||||
canvasInstance={canvasInstance}
|
||||
activeControl={activeControl}
|
||||
selectIssuePosition={selectIssuePosition}
|
||||
/>
|
||||
</Layout.Sider>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,46 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import Icon from 'antd/lib/icon';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
|
||||
import { ActiveControl } from 'reducers/interfaces';
|
||||
import { Canvas } from 'cvat-canvas-wrapper';
|
||||
import { RectangleIcon } from 'icons';
|
||||
|
||||
interface Props {
|
||||
canvasInstance: Canvas;
|
||||
activeControl: ActiveControl;
|
||||
selectIssuePosition(enabled: boolean): void;
|
||||
}
|
||||
|
||||
function ResizeControl(props: Props): JSX.Element {
|
||||
const { activeControl, canvasInstance, selectIssuePosition } = props;
|
||||
|
||||
return (
|
||||
<Tooltip title='Open an issue' placement='right' mouseLeaveDelay={0}>
|
||||
<Icon
|
||||
component={RectangleIcon}
|
||||
className={
|
||||
activeControl === ActiveControl.OPEN_ISSUE ?
|
||||
'cvat-issue-control cvat-active-canvas-control' :
|
||||
'cvat-issue-control'
|
||||
}
|
||||
onClick={(): void => {
|
||||
if (activeControl === ActiveControl.OPEN_ISSUE) {
|
||||
canvasInstance.selectRegion(false);
|
||||
selectIssuePosition(false);
|
||||
} else {
|
||||
canvasInstance.cancel();
|
||||
canvasInstance.selectRegion(true);
|
||||
selectIssuePosition(true);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(ResizeControl);
|
||||
@ -0,0 +1,50 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React, { useEffect } from 'react';
|
||||
import Layout from 'antd/lib/layout';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import { initializeReviewAsync } from 'actions/review-actions';
|
||||
|
||||
import CanvasWrapperContainer from 'containers/annotation-page/canvas/canvas-wrapper';
|
||||
import ControlsSideBarContainer from 'containers/annotation-page/review-workspace/controls-side-bar/controls-side-bar';
|
||||
import ObjectSideBarComponent from 'components/annotation-page/standard-workspace/objects-side-bar/objects-side-bar';
|
||||
import ObjectsListContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/objects-list';
|
||||
import CanvasContextMenuContainer from 'containers/annotation-page/canvas/canvas-context-menu';
|
||||
import IssueAggregatorComponent from 'components/annotation-page/review/issues-aggregator';
|
||||
|
||||
export default function ReviewWorkspaceComponent(): JSX.Element {
|
||||
const dispatch = useDispatch();
|
||||
const frame = useSelector((state: CombinedState): number => state.annotation.player.frame.number);
|
||||
const states = useSelector((state: CombinedState): any[] => state.annotation.annotations.states);
|
||||
const review = useSelector((state: CombinedState): any => state.review.activeReview);
|
||||
|
||||
useEffect(() => {
|
||||
if (review) {
|
||||
review.reviewFrame(frame);
|
||||
review.reviewStates(
|
||||
states
|
||||
.map((state: any): number | undefined => state.serverID)
|
||||
.filter((serverID: number | undefined): boolean => typeof serverID !== 'undefined')
|
||||
.map((serverID: number | undefined): string => `${frame}_${serverID}`),
|
||||
);
|
||||
}
|
||||
}, [frame, states, review]);
|
||||
useEffect(() => {
|
||||
dispatch(initializeReviewAsync());
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Layout hasSider className='cvat-review-workspace'>
|
||||
<ControlsSideBarContainer />
|
||||
<CanvasWrapperContainer />
|
||||
<ObjectSideBarComponent objectsList={<ObjectsListContainer readonly />} />
|
||||
<CanvasContextMenuContainer readonly />
|
||||
<IssueAggregatorComponent />
|
||||
</Layout>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@import 'base.scss';
|
||||
|
||||
.cvat-review-workspace.ant-layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.cvat-issue-control {
|
||||
font-size: 40px;
|
||||
|
||||
&::after {
|
||||
content: '\FE56';
|
||||
font-size: 32px;
|
||||
position: absolute;
|
||||
bottom: $grid-unit-size;
|
||||
right: -$grid-unit-size;
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,88 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { ReactPortal } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import Form, { FormComponentProps } from 'antd/lib/form';
|
||||
import Input from 'antd/lib/input';
|
||||
import Button from 'antd/lib/button';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
|
||||
import { reviewActions, finishIssueAsync } from 'actions/review-actions';
|
||||
|
||||
type FormProps = {
|
||||
top: number;
|
||||
left: number;
|
||||
submit(message: string): void;
|
||||
cancel(): void;
|
||||
} & FormComponentProps;
|
||||
|
||||
function MessageForm(props: FormProps): JSX.Element {
|
||||
const {
|
||||
form: { getFieldDecorator },
|
||||
form,
|
||||
top,
|
||||
left,
|
||||
submit,
|
||||
cancel,
|
||||
} = props;
|
||||
|
||||
function handleSubmit(e: React.FormEvent): void {
|
||||
e.preventDefault();
|
||||
form.validateFields((error, values): void => {
|
||||
if (!error) {
|
||||
submit(values.issue_description);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return (
|
||||
<Form className='cvat-create-issue-dialog' style={{ top, left }} onSubmit={handleSubmit}>
|
||||
<Form.Item>
|
||||
{getFieldDecorator('issue_description', {
|
||||
rules: [{ required: true, message: 'Please, fill out the field' }],
|
||||
})(<Input autoComplete='off' placeholder='Please, describe the issue' />)}
|
||||
</Form.Item>
|
||||
<Row type='flex' justify='space-between'>
|
||||
<Col>
|
||||
<Button onClick={cancel} type='ghost'>
|
||||
Cancel
|
||||
</Button>
|
||||
</Col>
|
||||
<Col>
|
||||
<Button type='primary' htmlType='submit'>
|
||||
Submit
|
||||
</Button>
|
||||
</Col>
|
||||
</Row>
|
||||
</Form>
|
||||
);
|
||||
}
|
||||
|
||||
const WrappedMessageForm = Form.create<FormProps>()(MessageForm);
|
||||
|
||||
interface Props {
|
||||
top: number;
|
||||
left: number;
|
||||
}
|
||||
|
||||
export default function CreateIssueDialog(props: Props): ReactPortal {
|
||||
const dispatch = useDispatch();
|
||||
const { top, left } = props;
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<WrappedMessageForm
|
||||
top={top}
|
||||
left={left}
|
||||
submit={(message: string) => {
|
||||
dispatch(finishIssueAsync(message));
|
||||
}}
|
||||
cancel={() => {
|
||||
dispatch(reviewActions.cancelIssue());
|
||||
}}
|
||||
/>,
|
||||
window.document.getElementById('cvat_canvas_attachment_board') as HTMLElement,
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,56 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { ReactPortal, useEffect } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import Tag from 'antd/lib/tag';
|
||||
import Icon from 'antd/lib/icon';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
|
||||
interface Props {
|
||||
id: number;
|
||||
message: string;
|
||||
top: number;
|
||||
left: number;
|
||||
resolved: boolean;
|
||||
onClick: () => void;
|
||||
highlight: () => void;
|
||||
blur: () => void;
|
||||
}
|
||||
|
||||
export default function HiddenIssueLabel(props: Props): ReactPortal {
|
||||
const {
|
||||
id, message, top, left, resolved, onClick, highlight, blur,
|
||||
} = props;
|
||||
|
||||
useEffect(() => {
|
||||
if (!resolved) {
|
||||
setTimeout(highlight);
|
||||
} else {
|
||||
setTimeout(blur);
|
||||
}
|
||||
}, [resolved]);
|
||||
|
||||
const elementID = `cvat-hidden-issue-label-${id}`;
|
||||
return ReactDOM.createPortal(
|
||||
<Tooltip title={message}>
|
||||
<Tag
|
||||
id={elementID}
|
||||
onClick={onClick}
|
||||
onMouseEnter={highlight}
|
||||
onMouseLeave={blur}
|
||||
style={{ top, left }}
|
||||
className='cvat-hidden-issue-label'
|
||||
>
|
||||
{resolved ? (
|
||||
<Icon className='cvat-hidden-issue-resolved-indicator' type='check' />
|
||||
) : (
|
||||
<Icon className='cvat-hidden-issue-unsolved-indicator' type='close-circle' />
|
||||
)}
|
||||
{message}
|
||||
</Tag>
|
||||
</Tooltip>,
|
||||
window.document.getElementById('cvat_canvas_attachment_board') as HTMLElement,
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,143 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
import Comment from 'antd/lib/comment';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import Title from 'antd/lib/typography/Title';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
import Button from 'antd/lib/button';
|
||||
import Input from 'antd/lib/input';
|
||||
import Icon from 'antd/lib/icon';
|
||||
import moment from 'moment';
|
||||
|
||||
interface Props {
|
||||
id: number;
|
||||
comments: any[];
|
||||
left: number;
|
||||
top: number;
|
||||
resolved: boolean;
|
||||
isFetching: boolean;
|
||||
collapse: () => void;
|
||||
resolve: () => void;
|
||||
reopen: () => void;
|
||||
comment: (message: string) => void;
|
||||
highlight: () => void;
|
||||
blur: () => void;
|
||||
}
|
||||
|
||||
export default function IssueDialog(props: Props): JSX.Element {
|
||||
const ref = useRef<HTMLDivElement>(null);
|
||||
const [currentText, setCurrentText] = useState<string>('');
|
||||
const {
|
||||
comments,
|
||||
id,
|
||||
left,
|
||||
top,
|
||||
resolved,
|
||||
isFetching,
|
||||
collapse,
|
||||
resolve,
|
||||
reopen,
|
||||
comment,
|
||||
highlight,
|
||||
blur,
|
||||
} = props;
|
||||
|
||||
useEffect(() => {
|
||||
if (!resolved) {
|
||||
setTimeout(highlight);
|
||||
} else {
|
||||
setTimeout(blur);
|
||||
}
|
||||
}, [resolved]);
|
||||
|
||||
const lines = comments.map(
|
||||
(_comment: any): JSX.Element => {
|
||||
const created = _comment.createdDate ? moment(_comment.createdDate) : moment(moment.now());
|
||||
const diff = created.fromNow();
|
||||
|
||||
return (
|
||||
<Comment
|
||||
avatar={null}
|
||||
key={_comment.id}
|
||||
author={<Text strong>{_comment.author ? _comment.author.username : 'Unknown'}</Text>}
|
||||
content={<p>{_comment.message}</p>}
|
||||
datetime={(
|
||||
<Tooltip title={created.format('MMMM Do YYYY')}>
|
||||
<span>{diff}</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
/>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
const resolveButton = resolved ? (
|
||||
<Button loading={isFetching} type='primary' onClick={reopen}>
|
||||
Reopen
|
||||
</Button>
|
||||
) : (
|
||||
<Button loading={isFetching} type='primary' onClick={resolve}>
|
||||
Resolve
|
||||
</Button>
|
||||
);
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<div style={{ top, left }} ref={ref} className='cvat-issue-dialog'>
|
||||
<Row className='cvat-issue-dialog-header' type='flex' justify='space-between'>
|
||||
<Col>
|
||||
<Title level={4}>{id >= 0 ? `Issue #${id}` : 'Issue'}</Title>
|
||||
</Col>
|
||||
<Col>
|
||||
<Tooltip title='Collapse the chat'>
|
||||
<Icon type='close' onClick={collapse} />
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className='cvat-issue-dialog-chat' type='flex' justify='start'>
|
||||
<Col style={{ display: 'block' }}>{lines}</Col>
|
||||
</Row>
|
||||
<Row className='cvat-issue-dialog-input' type='flex' justify='start'>
|
||||
<Col span={24}>
|
||||
<Input
|
||||
placeholder='Print a comment here..'
|
||||
value={currentText}
|
||||
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
setCurrentText(event.target.value);
|
||||
}}
|
||||
onPressEnter={() => {
|
||||
if (currentText) {
|
||||
comment(currentText);
|
||||
setCurrentText('');
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row className='cvat-issue-dialog-footer' type='flex' justify='end'>
|
||||
<Col>
|
||||
{currentText.length ? (
|
||||
<Button
|
||||
loading={isFetching}
|
||||
type='primary'
|
||||
disabled={!currentText.length}
|
||||
onClick={() => {
|
||||
comment(currentText);
|
||||
setCurrentText('');
|
||||
}}
|
||||
>
|
||||
Comment
|
||||
</Button>
|
||||
) : (
|
||||
resolveButton
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
</div>,
|
||||
window.document.getElementById('cvat_canvas_attachment_board') as HTMLElement,
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,167 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import { Canvas } from 'cvat-canvas/src/typescript/canvas';
|
||||
|
||||
import { commentIssueAsync, resolveIssueAsync, reopenIssueAsync } from 'actions/review-actions';
|
||||
|
||||
import CreateIssueDialog from './create-issue-dialog';
|
||||
import HiddenIssueLabel from './hidden-issue-label';
|
||||
import IssueDialog from './issue-dialog';
|
||||
|
||||
const scaleHandler = (canvasInstance: Canvas): void => {
|
||||
const { geometry } = canvasInstance;
|
||||
const createDialogs = window.document.getElementsByClassName('cvat-create-issue-dialog');
|
||||
const hiddenIssues = window.document.getElementsByClassName('cvat-hidden-issue-label');
|
||||
const issues = window.document.getElementsByClassName('cvat-issue-dialog');
|
||||
for (const element of [...Array.from(createDialogs), ...Array.from(hiddenIssues), ...Array.from(issues)]) {
|
||||
(element as HTMLSpanElement).style.transform = `scale(${1 / geometry.scale}) rotate(${-geometry.angle}deg)`;
|
||||
}
|
||||
};
|
||||
|
||||
export default function IssueAggregatorComponent(): JSX.Element | null {
|
||||
const dispatch = useDispatch();
|
||||
const [expandedIssue, setExpandedIssue] = useState<number | null>(null);
|
||||
const frameIssues = useSelector((state: CombinedState): any[] => state.review.frameIssues);
|
||||
const canvasInstance = useSelector((state: CombinedState): Canvas => state.annotation.canvas.instance);
|
||||
const canvasIsReady = useSelector((state: CombinedState): boolean => state.annotation.canvas.ready);
|
||||
const newIssuePosition = useSelector((state: CombinedState): number[] | null => state.review.newIssuePosition);
|
||||
const issuesHidden = useSelector((state: CombinedState): any => state.review.issuesHidden);
|
||||
const issueFetching = useSelector((state: CombinedState): number | null => state.review.fetching.issueId);
|
||||
const issueLabels: JSX.Element[] = [];
|
||||
const issueDialogs: JSX.Element[] = [];
|
||||
|
||||
useEffect(() => {
|
||||
scaleHandler(canvasInstance);
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const regions = frameIssues.reduce((acc: Record<number, number[]>, issue: any): Record<number, number[]> => {
|
||||
acc[issue.id] = issue.position;
|
||||
return acc;
|
||||
}, {});
|
||||
|
||||
if (newIssuePosition) {
|
||||
regions[0] = newIssuePosition;
|
||||
}
|
||||
|
||||
canvasInstance.setupIssueRegions(regions);
|
||||
|
||||
if (newIssuePosition) {
|
||||
setExpandedIssue(null);
|
||||
const element = window.document.getElementById('cvat_canvas_issue_region_0');
|
||||
if (element) {
|
||||
element.style.display = 'block';
|
||||
}
|
||||
}
|
||||
}, [newIssuePosition]);
|
||||
|
||||
useEffect(() => {
|
||||
const listener = (): void => scaleHandler(canvasInstance);
|
||||
|
||||
canvasInstance.html().addEventListener('canvas.zoom', listener);
|
||||
canvasInstance.html().addEventListener('canvas.fit', listener);
|
||||
|
||||
return () => {
|
||||
canvasInstance.html().removeEventListener('canvas.zoom', listener);
|
||||
canvasInstance.html().removeEventListener('canvas.fit', listener);
|
||||
};
|
||||
}, []);
|
||||
|
||||
if (!canvasIsReady) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { geometry } = canvasInstance;
|
||||
for (const issue of frameIssues) {
|
||||
if (issuesHidden) break;
|
||||
const issueResolved = !!issue.resolver;
|
||||
const offset = 15;
|
||||
const translated = issue.position.map((coord: number): number => coord + geometry.offset);
|
||||
const minX = Math.min(...translated.filter((_: number, idx: number): boolean => idx % 2 === 0)) + offset;
|
||||
const minY = Math.min(...translated.filter((_: number, idx: number): boolean => idx % 2 !== 0)) + offset;
|
||||
const { id } = issue;
|
||||
const highlight = (): void => {
|
||||
const element = window.document.getElementById(`cvat_canvas_issue_region_${id}`);
|
||||
if (element) {
|
||||
element.style.display = 'block';
|
||||
}
|
||||
};
|
||||
|
||||
const blur = (): void => {
|
||||
if (issueResolved) {
|
||||
const element = window.document.getElementById(`cvat_canvas_issue_region_${id}`);
|
||||
if (element) {
|
||||
element.style.display = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (expandedIssue === id) {
|
||||
issueDialogs.push(
|
||||
<IssueDialog
|
||||
key={issue.id}
|
||||
id={issue.id}
|
||||
top={minY}
|
||||
left={minX}
|
||||
isFetching={issueFetching !== null}
|
||||
comments={issue.comments}
|
||||
resolved={issueResolved}
|
||||
highlight={highlight}
|
||||
blur={blur}
|
||||
collapse={() => {
|
||||
setExpandedIssue(null);
|
||||
}}
|
||||
resolve={() => {
|
||||
dispatch(resolveIssueAsync(issue.id));
|
||||
setExpandedIssue(null);
|
||||
}}
|
||||
reopen={() => {
|
||||
dispatch(reopenIssueAsync(issue.id));
|
||||
}}
|
||||
comment={(message: string) => {
|
||||
dispatch(commentIssueAsync(issue.id, message));
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
} else if (issue.comments.length) {
|
||||
issueLabels.push(
|
||||
<HiddenIssueLabel
|
||||
key={issue.id}
|
||||
id={issue.id}
|
||||
top={minY}
|
||||
left={minX}
|
||||
resolved={issueResolved}
|
||||
message={issue.comments[issue.comments.length - 1].message}
|
||||
highlight={highlight}
|
||||
blur={blur}
|
||||
onClick={() => {
|
||||
setExpandedIssue(id);
|
||||
}}
|
||||
/>,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const translated = newIssuePosition ? newIssuePosition.map((coord: number): number => coord + geometry.offset) : [];
|
||||
const createLeft = translated.length ?
|
||||
Math.max(...translated.filter((_: number, idx: number): boolean => idx % 2 === 0)) :
|
||||
null;
|
||||
const createTop = translated.length ?
|
||||
Math.min(...translated.filter((_: number, idx: number): boolean => idx % 2 !== 0)) :
|
||||
null;
|
||||
|
||||
return (
|
||||
<>
|
||||
{createLeft !== null && createTop !== null && <CreateIssueDialog top={createTop} left={createLeft} />}
|
||||
{issueDialogs}
|
||||
{issueLabels}
|
||||
</>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,112 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@import 'base.scss';
|
||||
|
||||
.cvat-create-issue-dialog {
|
||||
position: absolute;
|
||||
pointer-events: auto;
|
||||
width: $grid-unit-size * 30;
|
||||
padding: $grid-unit-size;
|
||||
background: $background-color-2;
|
||||
z-index: 100;
|
||||
transform-origin: top left;
|
||||
box-shadow: $box-shadow-base;
|
||||
|
||||
button {
|
||||
width: $grid-unit-size * 12;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-hidden-issue-label {
|
||||
position: absolute;
|
||||
min-width: 8 * $grid-unit-size;
|
||||
opacity: 0.8;
|
||||
z-index: 100;
|
||||
transition: none;
|
||||
pointer-events: auto;
|
||||
max-width: 16 * $grid-unit-size;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: 0;
|
||||
transform-origin: top left;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-issue-dialog {
|
||||
width: $grid-unit-size * 35;
|
||||
position: absolute;
|
||||
z-index: 100;
|
||||
transition: none;
|
||||
pointer-events: auto;
|
||||
background: $background-color-2;
|
||||
padding: $grid-unit-size;
|
||||
transform-origin: top left;
|
||||
box-shadow: $box-shadow-base;
|
||||
border-radius: 0.5 * $grid-unit-size;
|
||||
opacity: 0.95;
|
||||
|
||||
.cvat-issue-dialog-chat {
|
||||
> div {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.ant-comment {
|
||||
user-select: auto;
|
||||
padding: $grid-unit-size;
|
||||
padding-bottom: 0;
|
||||
|
||||
.ant-comment-content {
|
||||
line-height: 14px;
|
||||
}
|
||||
|
||||
.ant-comment-avatar {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
border-radius: 0.5 * $grid-unit-size;
|
||||
background: $background-color-1;
|
||||
padding: $grid-unit-size;
|
||||
max-height: $grid-unit-size * 45;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.cvat-issue-dialog-input {
|
||||
background: $background-color-1;
|
||||
margin-top: $grid-unit-size;
|
||||
}
|
||||
|
||||
.cvat-issue-dialog-footer {
|
||||
margin-top: $grid-unit-size;
|
||||
}
|
||||
|
||||
.ant-comment > .ant-comment-inner {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.cvat-hidden-issue-indicator {
|
||||
margin-right: $grid-unit-size;
|
||||
}
|
||||
|
||||
.cvat-hidden-issue-resolved-indicator {
|
||||
@extend .cvat-hidden-issue-indicator;
|
||||
|
||||
color: $ok-icon-color;
|
||||
}
|
||||
|
||||
.cvat-hidden-issue-unsolved-indicator {
|
||||
@extend .cvat-hidden-issue-indicator;
|
||||
|
||||
color: $danger-icon-color;
|
||||
}
|
||||
@ -0,0 +1,149 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import { AnyAction } from 'redux';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import Title from 'antd/lib/typography/Title';
|
||||
import Modal from 'antd/lib/modal';
|
||||
import Radio, { RadioChangeEvent } from 'antd/lib/radio';
|
||||
import RadioButton from 'antd/lib/radio/radioButton';
|
||||
import Description from 'antd/lib/descriptions';
|
||||
import Rate from 'antd/lib/rate';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
|
||||
import UserSelector, { User } from 'components/task-page/user-selector';
|
||||
import { CombinedState, ReviewStatus } from 'reducers/interfaces';
|
||||
import { switchSubmitReviewDialog } from 'actions/annotation-actions';
|
||||
import { submitReviewAsync } from 'actions/review-actions';
|
||||
import { clamp } from 'utils/math';
|
||||
import { useHistory } from 'react-router';
|
||||
|
||||
function computeEstimatedQuality(reviewedStates: number, openedIssues: number): number {
|
||||
if (reviewedStates === 0 && openedIssues === 0) {
|
||||
return 5; // corner case
|
||||
}
|
||||
|
||||
const K = 2; // means how many reviewed states are equivalent to one issue
|
||||
const quality = reviewedStates / (reviewedStates + K * openedIssues);
|
||||
return clamp(+(5 * quality).toPrecision(2), 0, 5);
|
||||
}
|
||||
|
||||
export default function SubmitReviewModal(): JSX.Element | null {
|
||||
const dispatch = useDispatch();
|
||||
const history = useHistory();
|
||||
const isVisible = useSelector((state: CombinedState): boolean => state.annotation.submitReviewDialogVisible);
|
||||
const job = useSelector((state: CombinedState): any => state.annotation.job.instance);
|
||||
const activeReview = useSelector((state: CombinedState): any => state.review.activeReview);
|
||||
const reviewIsBeingSubmitted = useSelector((state: CombinedState): any => state.review.fetching.reviewId);
|
||||
const numberOfIssues = useSelector((state: CombinedState): any => state.review.issues.length);
|
||||
const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
|
||||
const numberOfNewIssues = activeReview ? activeReview.issues.length : 0;
|
||||
const reviewedFrames = activeReview ? activeReview.reviewedFrames.length : 0;
|
||||
const reviewedStates = activeReview ? activeReview.reviewedStates.length : 0;
|
||||
|
||||
const [reviewer, setReviewer] = useState<User | null>(job.reviewer ? job.reviewer : null);
|
||||
const [reviewStatus, setReviewStatus] = useState<string>(ReviewStatus.ACCEPTED);
|
||||
const [estimatedQuality, setEstimatedQuality] = useState<number>(0);
|
||||
|
||||
const close = (): AnyAction => dispatch(switchSubmitReviewDialog(false));
|
||||
const submitReview = (): void => {
|
||||
activeReview.estimatedQuality = estimatedQuality;
|
||||
activeReview.status = reviewStatus;
|
||||
if (reviewStatus === ReviewStatus.REVIEW_FURTHER) {
|
||||
activeReview.reviewer = reviewer;
|
||||
}
|
||||
dispatch(submitReviewAsync(activeReview));
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setEstimatedQuality(computeEstimatedQuality(reviewedStates, numberOfNewIssues));
|
||||
}, [reviewedStates, numberOfNewIssues]);
|
||||
useEffect(() => {
|
||||
if (!isSubmitting && activeReview && activeReview.id === reviewIsBeingSubmitted) {
|
||||
setIsSubmitting(true);
|
||||
} else if (isSubmitting && reviewIsBeingSubmitted === null) {
|
||||
setIsSubmitting(false);
|
||||
close();
|
||||
history.push(`/tasks/${job.task.id}`);
|
||||
}
|
||||
}, [reviewIsBeingSubmitted, activeReview]);
|
||||
|
||||
if (!isVisible) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
className='cvat-submit-review-dialog'
|
||||
visible={isVisible}
|
||||
destroyOnClose
|
||||
confirmLoading={isSubmitting}
|
||||
onOk={submitReview}
|
||||
onCancel={close}
|
||||
okText='Submit'
|
||||
width={650}
|
||||
>
|
||||
<Row type='flex' justify='start'>
|
||||
<Col>
|
||||
<Title level={4}>Submitting your review</Title>
|
||||
</Col>
|
||||
</Row>
|
||||
<Row type='flex' justify='start'>
|
||||
<Col span={12}>
|
||||
<Description title='Review summary' layout='horizontal' column={1} size='small' bordered>
|
||||
<Description.Item label='Estimated quality: '>{estimatedQuality}</Description.Item>
|
||||
<Description.Item label='Issues: '>
|
||||
<Text>{numberOfIssues}</Text>
|
||||
{!!numberOfNewIssues && <Text strong>{` (+${numberOfNewIssues})`}</Text>}
|
||||
</Description.Item>
|
||||
<Description.Item label='Reviewed frames '>{reviewedFrames}</Description.Item>
|
||||
<Description.Item label='Reviewed objects: '>{reviewedStates}</Description.Item>
|
||||
</Description>
|
||||
</Col>
|
||||
<Col span={11} offset={1}>
|
||||
<Row>
|
||||
<Col>
|
||||
<Radio.Group
|
||||
value={reviewStatus}
|
||||
onChange={(event: RadioChangeEvent) => {
|
||||
if (typeof event.target.value !== 'undefined') {
|
||||
setReviewStatus(event.target.value);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<RadioButton value={ReviewStatus.ACCEPTED}>Accept</RadioButton>
|
||||
<RadioButton value={ReviewStatus.REVIEW_FURTHER}>Review next</RadioButton>
|
||||
<RadioButton value={ReviewStatus.REJECTED}>Reject</RadioButton>
|
||||
</Radio.Group>
|
||||
{reviewStatus === ReviewStatus.REVIEW_FURTHER && (
|
||||
<Row align='middle' type='flex' justify='start'>
|
||||
<Col>
|
||||
<Text type='secondary'>Reviewer: </Text>
|
||||
</Col>
|
||||
<Col offset={1}>
|
||||
<UserSelector value={reviewer} onSelect={setReviewer} />
|
||||
</Col>
|
||||
</Row>
|
||||
)}
|
||||
<Row type='flex' justify='center' align='middle'>
|
||||
<Col>
|
||||
<Rate
|
||||
value={Math.round(estimatedQuality)}
|
||||
onChange={(value: number | undefined) => {
|
||||
if (typeof value !== 'undefined') {
|
||||
setEstimatedQuality(value);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Col>
|
||||
</Row>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
|
||||
import ObjectItemContainer from 'containers/annotation-page/standard-workspace/objects-side-bar/object-item';
|
||||
|
||||
interface Props {
|
||||
activatedStateID: number | null;
|
||||
objectStates: any[];
|
||||
visible: boolean;
|
||||
left: number;
|
||||
top: number;
|
||||
}
|
||||
|
||||
export default function CanvasContextMenu(props: Props): JSX.Element | null {
|
||||
const { activatedStateID, objectStates, visible, left, top } = props;
|
||||
|
||||
if (!visible || activatedStateID === null) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return ReactDOM.createPortal(
|
||||
<div className='cvat-canvas-context-menu' style={{ top, left }}>
|
||||
<ObjectItemContainer
|
||||
key={activatedStateID}
|
||||
clientID={activatedStateID}
|
||||
objectStates={objectStates}
|
||||
initialCollapsed
|
||||
/>
|
||||
</div>,
|
||||
window.document.body,
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,124 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { useSelector, useDispatch } from 'react-redux';
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import Icon, { IconProps } from 'antd/lib/icon';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
import Alert from 'antd/lib/alert';
|
||||
import { Row, Col } from 'antd/lib/grid';
|
||||
|
||||
import { changeFrameAsync } from 'actions/annotation-actions';
|
||||
import { reviewActions } from 'actions/review-actions';
|
||||
|
||||
export default function LabelsListComponent(): JSX.Element {
|
||||
const dispatch = useDispatch();
|
||||
const tabContentHeight = useSelector((state: CombinedState) => state.annotation.tabContentHeight);
|
||||
const frame = useSelector((state: CombinedState): number => state.annotation.player.frame.number);
|
||||
const frameIssues = useSelector((state: CombinedState): any[] => state.review.frameIssues);
|
||||
const issues = useSelector((state: CombinedState): any[] => state.review.issues);
|
||||
const activeReview = useSelector((state: CombinedState): any => state.review.activeReview);
|
||||
const issuesHidden = useSelector((state: CombinedState): any => state.review.issuesHidden);
|
||||
const combinedIssues = activeReview ? issues.concat(activeReview.issues) : issues;
|
||||
const frames = combinedIssues.map((issue: any): number => issue.frame).sort((a: number, b: number) => +a - +b);
|
||||
const nearestLeft = frames.filter((_frame: number): boolean => _frame < frame).reverse()[0];
|
||||
const dinamicLeftProps: IconProps = Number.isInteger(nearestLeft) ?
|
||||
{
|
||||
onClick: () => dispatch(changeFrameAsync(nearestLeft)),
|
||||
} :
|
||||
{
|
||||
style: {
|
||||
pointerEvents: 'none',
|
||||
opacity: 0.5,
|
||||
},
|
||||
};
|
||||
|
||||
const nearestRight = frames.filter((_frame: number): boolean => _frame > frame)[0];
|
||||
const dinamicRightProps: IconProps = Number.isInteger(nearestRight) ?
|
||||
{
|
||||
onClick: () => dispatch(changeFrameAsync(nearestRight)),
|
||||
} :
|
||||
{
|
||||
style: {
|
||||
pointerEvents: 'none',
|
||||
opacity: 0.5,
|
||||
},
|
||||
};
|
||||
|
||||
const dinamicShowHideProps: IconProps = issuesHidden ?
|
||||
{
|
||||
onClick: () => dispatch(reviewActions.switchIssuesHiddenFlag(false)),
|
||||
type: 'eye-invisible',
|
||||
} :
|
||||
{
|
||||
onClick: () => dispatch(reviewActions.switchIssuesHiddenFlag(true)),
|
||||
type: 'eye',
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ height: tabContentHeight }}>
|
||||
<div className='cvat-objects-sidebar-issues-list-header'>
|
||||
<Row type='flex' justify='start' align='middle'>
|
||||
<Col>
|
||||
<Tooltip title='Find the previous frame with issues'>
|
||||
<Icon type='left' {...dinamicLeftProps} />
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col offset={1}>
|
||||
<Tooltip title='Find the next frame with issues'>
|
||||
<Icon type='right' {...dinamicRightProps} />
|
||||
</Tooltip>
|
||||
</Col>
|
||||
<Col offset={3}>
|
||||
<Tooltip title='Show/hide all the issues'>
|
||||
<Icon {...dinamicShowHideProps} />
|
||||
</Tooltip>
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
<div className='cvat-objects-sidebar-issues-list'>
|
||||
{frameIssues.map(
|
||||
(frameIssue: any): JSX.Element => (
|
||||
<div
|
||||
className='cvat-objects-sidebar-issue-item'
|
||||
onMouseEnter={() => {
|
||||
const element = window.document.getElementById(
|
||||
`cvat_canvas_issue_region_${frameIssue.id}`,
|
||||
);
|
||||
if (element) {
|
||||
element.setAttribute('fill', 'url(#cvat_issue_region_pattern_2)');
|
||||
}
|
||||
}}
|
||||
onMouseLeave={() => {
|
||||
const element = window.document.getElementById(
|
||||
`cvat_canvas_issue_region_${frameIssue.id}`,
|
||||
);
|
||||
if (element) {
|
||||
element.setAttribute('fill', 'url(#cvat_issue_region_pattern_1)');
|
||||
}
|
||||
}}
|
||||
>
|
||||
{frameIssue.resolver ? (
|
||||
<Alert
|
||||
description={<span>{`By ${frameIssue.resolver.username}`}</span>}
|
||||
message='Resolved'
|
||||
type='success'
|
||||
showIcon
|
||||
/>
|
||||
) : (
|
||||
<Alert
|
||||
description={<span>{`By ${frameIssue.owner.username}`}</span>}
|
||||
message='Opened'
|
||||
type='warning'
|
||||
showIcon
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import React from 'react';
|
||||
import { Col } from 'antd/lib/grid';
|
||||
import Select from 'antd/lib/select';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
|
||||
import { StatesOrdering } from 'reducers/interfaces';
|
||||
|
||||
interface StatesOrderingSelectorComponentProps {
|
||||
statesOrdering: StatesOrdering;
|
||||
changeStatesOrdering(value: StatesOrdering): void;
|
||||
}
|
||||
|
||||
function StatesOrderingSelectorComponent(props: StatesOrderingSelectorComponentProps): JSX.Element {
|
||||
const { statesOrdering, changeStatesOrdering } = props;
|
||||
|
||||
return (
|
||||
<Col span={16}>
|
||||
<Text strong>Sort by</Text>
|
||||
<Select
|
||||
className='cvat-objects-sidebar-ordering-selector'
|
||||
value={statesOrdering}
|
||||
onChange={changeStatesOrdering}
|
||||
>
|
||||
<Select.Option key={StatesOrdering.ID_DESCENT} value={StatesOrdering.ID_DESCENT}>
|
||||
{StatesOrdering.ID_DESCENT}
|
||||
</Select.Option>
|
||||
<Select.Option key={StatesOrdering.ID_ASCENT} value={StatesOrdering.ID_ASCENT}>
|
||||
{StatesOrdering.ID_ASCENT}
|
||||
</Select.Option>
|
||||
<Select.Option key={StatesOrdering.UPDATED} value={StatesOrdering.UPDATED}>
|
||||
{StatesOrdering.UPDATED}
|
||||
</Select.Option>
|
||||
</Select>
|
||||
</Col>
|
||||
);
|
||||
}
|
||||
|
||||
export default React.memo(StatesOrderingSelectorComponent);
|
||||
@ -0,0 +1,95 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import { ExtendedKeyMapOptions } from 'react-hotkeys';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import { Canvas } from 'cvat-canvas-wrapper';
|
||||
import {
|
||||
selectIssuePosition as selectIssuePositionAction,
|
||||
mergeObjects,
|
||||
groupObjects,
|
||||
splitTrack,
|
||||
redrawShapeAsync,
|
||||
rotateCurrentFrame,
|
||||
repeatDrawShapeAsync,
|
||||
pasteShapeAsync,
|
||||
resetAnnotationsGroup,
|
||||
} from 'actions/annotation-actions';
|
||||
import ControlsSideBarComponent from 'components/annotation-page/review-workspace/controls-side-bar/controls-side-bar';
|
||||
import { ActiveControl, CombinedState, Rotation } from 'reducers/interfaces';
|
||||
|
||||
interface StateToProps {
|
||||
canvasInstance: Canvas;
|
||||
rotateAll: boolean;
|
||||
activeControl: ActiveControl;
|
||||
keyMap: Record<string, ExtendedKeyMapOptions>;
|
||||
normalizedKeyMap: Record<string, string>;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
mergeObjects(enabled: boolean): void;
|
||||
groupObjects(enabled: boolean): void;
|
||||
splitTrack(enabled: boolean): void;
|
||||
rotateFrame(angle: Rotation): void;
|
||||
selectIssuePosition(enabled: boolean): void;
|
||||
resetGroup(): void;
|
||||
repeatDrawShape(): void;
|
||||
pasteShape(): void;
|
||||
redrawShape(): void;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const {
|
||||
annotation: {
|
||||
canvas: { instance: canvasInstance, activeControl },
|
||||
},
|
||||
settings: {
|
||||
player: { rotateAll },
|
||||
},
|
||||
shortcuts: { keyMap, normalizedKeyMap },
|
||||
} = state;
|
||||
|
||||
return {
|
||||
rotateAll,
|
||||
canvasInstance,
|
||||
activeControl,
|
||||
normalizedKeyMap,
|
||||
keyMap,
|
||||
};
|
||||
}
|
||||
|
||||
function dispatchToProps(dispatch: any): DispatchToProps {
|
||||
return {
|
||||
mergeObjects(enabled: boolean): void {
|
||||
dispatch(mergeObjects(enabled));
|
||||
},
|
||||
groupObjects(enabled: boolean): void {
|
||||
dispatch(groupObjects(enabled));
|
||||
},
|
||||
splitTrack(enabled: boolean): void {
|
||||
dispatch(splitTrack(enabled));
|
||||
},
|
||||
selectIssuePosition(enabled: boolean): void {
|
||||
dispatch(selectIssuePositionAction(enabled));
|
||||
},
|
||||
rotateFrame(rotation: Rotation): void {
|
||||
dispatch(rotateCurrentFrame(rotation));
|
||||
},
|
||||
repeatDrawShape(): void {
|
||||
dispatch(repeatDrawShapeAsync());
|
||||
},
|
||||
pasteShape(): void {
|
||||
dispatch(pasteShapeAsync());
|
||||
},
|
||||
resetGroup(): void {
|
||||
dispatch(resetAnnotationsGroup());
|
||||
},
|
||||
redrawShape(): void {
|
||||
dispatch(redrawShapeAsync());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, dispatchToProps)(ControlsSideBarComponent);
|
||||
@ -0,0 +1,192 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import consts from 'consts';
|
||||
import { AnnotationActionTypes } from 'actions/annotation-actions';
|
||||
import { ReviewActionTypes } from 'actions/review-actions';
|
||||
import { ReviewState } from './interfaces';
|
||||
|
||||
const defaultState: ReviewState = {
|
||||
reviews: [], // saved on the server
|
||||
issues: [], // saved on the server
|
||||
latestComments: [],
|
||||
frameIssues: [], // saved on the server and not saved on the server
|
||||
activeReview: null, // not saved on the server
|
||||
newIssuePosition: null,
|
||||
issuesHidden: false,
|
||||
fetching: {
|
||||
reviewId: null,
|
||||
issueId: null,
|
||||
},
|
||||
};
|
||||
|
||||
function computeFrameIssues(issues: any[], activeReview: any, frame: number): any[] {
|
||||
const combinedIssues = activeReview ? issues.concat(activeReview.issues) : issues;
|
||||
return combinedIssues.filter((issue: any): boolean => issue.frame === frame);
|
||||
}
|
||||
|
||||
export default function (state: ReviewState = defaultState, action: any): ReviewState {
|
||||
switch (action.type) {
|
||||
case AnnotationActionTypes.GET_JOB_SUCCESS: {
|
||||
const {
|
||||
reviews,
|
||||
issues,
|
||||
frameData: { number: frame },
|
||||
} = action.payload;
|
||||
const frameIssues = computeFrameIssues(issues, state.activeReview, frame);
|
||||
|
||||
return {
|
||||
...state,
|
||||
reviews,
|
||||
issues,
|
||||
frameIssues,
|
||||
};
|
||||
}
|
||||
case AnnotationActionTypes.CHANGE_FRAME: {
|
||||
return {
|
||||
...state,
|
||||
newIssuePosition: null,
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.SUBMIT_REVIEW: {
|
||||
const { reviewId } = action.payload;
|
||||
return {
|
||||
...state,
|
||||
fetching: {
|
||||
...state.fetching,
|
||||
reviewId,
|
||||
},
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.SUBMIT_REVIEW_SUCCESS: {
|
||||
const {
|
||||
activeReview, reviews, issues, frame,
|
||||
} = action.payload;
|
||||
const frameIssues = computeFrameIssues(issues, activeReview, frame);
|
||||
|
||||
return {
|
||||
...state,
|
||||
activeReview,
|
||||
reviews,
|
||||
issues,
|
||||
frameIssues,
|
||||
fetching: {
|
||||
...state.fetching,
|
||||
reviewId: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.SUBMIT_REVIEW_FAILED: {
|
||||
return {
|
||||
...state,
|
||||
fetching: {
|
||||
...state.fetching,
|
||||
reviewId: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
case AnnotationActionTypes.CHANGE_FRAME_SUCCESS: {
|
||||
const { number: frame } = action.payload;
|
||||
return {
|
||||
...state,
|
||||
frameIssues: computeFrameIssues(state.issues, state.activeReview, frame),
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.INITIALIZE_REVIEW_SUCCESS: {
|
||||
const { reviewInstance, frame } = action.payload;
|
||||
const frameIssues = computeFrameIssues(state.issues, reviewInstance, frame);
|
||||
|
||||
return {
|
||||
...state,
|
||||
activeReview: reviewInstance,
|
||||
frameIssues,
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.START_ISSUE: {
|
||||
const { position } = action.payload;
|
||||
return {
|
||||
...state,
|
||||
newIssuePosition: position,
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.FINISH_ISSUE_SUCCESS: {
|
||||
const { frame, issue } = action.payload;
|
||||
const frameIssues = computeFrameIssues(state.issues, state.activeReview, frame);
|
||||
|
||||
return {
|
||||
...state,
|
||||
latestComments: state.latestComments.includes(issue.comments[0].message) ?
|
||||
state.latestComments :
|
||||
Array.from(
|
||||
new Set(
|
||||
[...state.latestComments, issue.comments[0].message].filter(
|
||||
(message: string): boolean =>
|
||||
![
|
||||
consts.QUICK_ISSUE_INCORRECT_POSITION_TEXT,
|
||||
consts.QUICK_ISSUE_INCORRECT_ATTRIBUTE_TEXT,
|
||||
].includes(message),
|
||||
),
|
||||
),
|
||||
).slice(-consts.LATEST_COMMENTS_SHOWN_QUICK_ISSUE),
|
||||
frameIssues,
|
||||
newIssuePosition: null,
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.CANCEL_ISSUE: {
|
||||
return {
|
||||
...state,
|
||||
newIssuePosition: null,
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.COMMENT_ISSUE:
|
||||
case ReviewActionTypes.RESOLVE_ISSUE:
|
||||
case ReviewActionTypes.REOPEN_ISSUE: {
|
||||
const { issueId } = action.payload;
|
||||
return {
|
||||
...state,
|
||||
fetching: {
|
||||
...state.fetching,
|
||||
issueId,
|
||||
},
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.COMMENT_ISSUE_FAILED:
|
||||
case ReviewActionTypes.RESOLVE_ISSUE_FAILED:
|
||||
case ReviewActionTypes.REOPEN_ISSUE_FAILED: {
|
||||
return {
|
||||
...state,
|
||||
fetching: {
|
||||
...state.fetching,
|
||||
issueId: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.RESOLVE_ISSUE_SUCCESS:
|
||||
case ReviewActionTypes.REOPEN_ISSUE_SUCCESS:
|
||||
case ReviewActionTypes.COMMENT_ISSUE_SUCCESS: {
|
||||
const { issues, frameIssues } = state;
|
||||
|
||||
return {
|
||||
...state,
|
||||
issues: [...issues],
|
||||
frameIssues: [...frameIssues],
|
||||
fetching: {
|
||||
...state.fetching,
|
||||
issueId: null,
|
||||
},
|
||||
};
|
||||
}
|
||||
case ReviewActionTypes.SWITCH_ISSUES_HIDDEN_FLAG: {
|
||||
const { hidden } = action.payload;
|
||||
return {
|
||||
...state,
|
||||
issuesHidden: hidden,
|
||||
};
|
||||
}
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
||||
return state;
|
||||
}
|
||||
Loading…
Reference in New Issue