React UI: Added annotation menus, added shape context menu, added some confirmations before dangerous actions

cvat-canvas/src/typescript/canvasView.ts

@@ -445,6 +445,8 @@ export class CanvasViewImpl implements CanvasView, Listener {
                     });
                 }
             }
+
+            e.preventDefault();
         }
 
         if (value) {
@@ -615,9 +617,10 @@ export class CanvasViewImpl implements CanvasView, Listener {
             if ([1, 2].includes(event.which)) {
                 if ([Mode.DRAG_CANVAS, Mode.IDLE].includes(this.mode)) {
                     self.controller.enableDrag(event.clientX, event.clientY);
-                } else if (this.mode === Mode.ZOOM_CANVAS && event.which === 2) {
+                } else if ([Mode.ZOOM_CANVAS, Mode.DRAW].includes(this.mode) && event.which === 2) {
                     self.controller.enableDrag(event.clientX, event.clientY);
                 }
+                event.preventDefault();
             }
         });
 

cvat-ui/src/actions/annotation-actions.ts

@@ -68,6 +68,105 @@ export enum AnnotationActionTypes {
     CHANGE_JOB_STATUS = 'CHANGE_JOB_STATUS',
     CHANGE_JOB_STATUS_SUCCESS = 'CHANGE_JOB_STATUS_SUCCESS',
     CHANGE_JOB_STATUS_FAILED = 'CHANGE_JOB_STATUS_FAILED',
+    UPLOAD_JOB_ANNOTATIONS = 'UPLOAD_JOB_ANNOTATIONS',
+    UPLOAD_JOB_ANNOTATIONS_SUCCESS = 'UPLOAD_JOB_ANNOTATIONS_SUCCESS',
+    UPLOAD_JOB_ANNOTATIONS_FAILED = 'UPLOAD_JOB_ANNOTATIONS_FAILED',
+    REMOVE_JOB_ANNOTATIONS_SUCCESS = 'REMOVE_JOB_ANNOTATIONS_SUCCESS',
+    REMOVE_JOB_ANNOTATIONS_FAILED = 'REMOVE_JOB_ANNOTATIONS_FAILED',
+    UPDATE_CANVAS_CONTEXT_MENU = 'UPDATE_CANVAS_CONTEXT_MENU',
+}
+
+export function updateCanvasContextMenu(visible: boolean, left: number, top: number): AnyAction {
+    return {
+        type: AnnotationActionTypes.UPDATE_CANVAS_CONTEXT_MENU,
+        payload: {
+            visible,
+            left,
+            top,
+        },
+    };
+}
+
+export function removeAnnotationsAsync(sessionInstance: any):
+ThunkAction<Promise<void>, {}, {}, AnyAction> {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        try {
+            sessionInstance.annotations.clear();
+            dispatch({
+                type: AnnotationActionTypes.REMOVE_JOB_ANNOTATIONS_SUCCESS,
+                payload: {
+                    sessionInstance,
+                },
+            });
+        } catch (error) {
+            dispatch({
+                type: AnnotationActionTypes.REMOVE_JOB_ANNOTATIONS_FAILED,
+                payload: {
+                    error,
+                },
+            });
+        }
+    };
+}
+
+
+export function uploadJobAnnotationsAsync(job: any, loader: any, file: File):
+ThunkAction<Promise<void>, {}, {}, AnyAction> {
+    return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
+        try {
+            const store = getCVATStore();
+            const state: CombinedState = store.getState();
+            if (state.tasks.activities.loads[job.task.id]) {
+                throw Error('Annotations is being uploaded for the task');
+            }
+            if (state.annotation.activities.loads[job.id]) {
+                throw Error('Only one uploading of annotations for a job allowed at the same time');
+            }
+
+            dispatch({
+                type: AnnotationActionTypes.UPLOAD_JOB_ANNOTATIONS,
+                payload: {
+                    job,
+                    loader,
+                },
+            });
+
+            const frame = state.annotation.player.frame.number;
+            await job.annotations.upload(file, loader);
+
+            // One more update to escape some problems
+            // in canvas when shape with the same
+            // clientID has different type (polygon, rectangle) for example
+            dispatch({
+                type: AnnotationActionTypes.UPLOAD_JOB_ANNOTATIONS_SUCCESS,
+                payload: {
+                    job,
+                    states: [],
+                },
+            });
+
+            await job.annotations.clear(true);
+            const states = await job.annotations.get(frame);
+
+            setTimeout(() => {
+                dispatch({
+                    type: AnnotationActionTypes.UPLOAD_JOB_ANNOTATIONS_SUCCESS,
+                    payload: {
+                        job,
+                        states,
+                    },
+                });
+            });
+        } catch (error) {
+            dispatch({
+                type: AnnotationActionTypes.UPLOAD_JOB_ANNOTATIONS_FAILED,
+                payload: {
+                    job,
+                    error,
+                },
+            });
+        }
+    };
 }
 
 export function changeJobStatusAsync(jobInstance: any, status: string):

cvat-ui/src/actions/tasks-actions.ts

@@ -1,6 +1,10 @@
 import { AnyAction, Dispatch, ActionCreator } from 'redux';
 import { ThunkAction } from 'redux-thunk';
-import { TasksQuery } from 'reducers/interfaces';
+import {
+    TasksQuery,
+    CombinedState,
+} from 'reducers/interfaces';
+import { getCVATStore } from 'cvat-store';
 import getCore from 'cvat-core';
 import { getInferenceStatusAsync } from './models-actions';
 
@@ -213,6 +217,11 @@ export function loadAnnotationsAsync(task: any, loader: any, file: File):
 ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
+            const store = getCVATStore();
+            const state: CombinedState = store.getState();
+            if (state.tasks.activities.loads[task.id]) {
+                throw Error('Only one loading of annotations for a task allowed at the same time');
+            }
             dispatch(loadAnnotations(task, loader));
             await task.annotations.upload(file, loader);
         } catch (error) {

cvat-ui/src/components/actions-menu/actions-menu.tsx

@@ -8,135 +8,151 @@ import {
 
 import { ClickParam } from 'antd/lib/menu/index';
 
-import LoaderItemComponent from './loader-item';
-import DumperItemComponent from './dumper-item';
-import ExportItemComponent from './export-item';
+import DumpSubmenu from './dump-submenu';
+import LoadSubmenu from './load-submenu';
+import ExportSubmenu from './export-submenu';
 
-interface ActionsMenuComponentProps {
-    taskInstance: any;
-    loaders: any[];
-    dumpers: any[];
-    exporters: any[];
+interface Props {
+    taskID: number;
+    taskMode: string;
+    bugTracker: string;
+
+    loaders: string[];
+    dumpers: string[];
+    exporters: string[];
     loadActivity: string | null;
     dumpActivities: string[] | null;
     exportActivities: string[] | null;
+
     installedTFAnnotation: boolean;
     installedTFSegmentation: boolean;
     installedAutoAnnotation: boolean;
     inferenceIsActive: boolean;
-    onLoadAnnotation: (taskInstance: any, loader: any, file: File) => void;
-    onDumpAnnotation: (taskInstance: any, dumper: any) => void;
-    onExportDataset: (taskInstance: any, exporter: any) => void;
-    onDeleteTask: (taskInstance: any) => void;
-    onOpenRunWindow: (taskInstance: any) => void;
-}
 
-interface MinActionsMenuProps {
-    taskInstance: any;
-    onDeleteTask: (task: any) => void;
-    onOpenRunWindow: (taskInstance: any) => void;
+    onClickMenu: (params: ClickParam, file?: File) => void;
 }
 
-export function handleMenuClick(props: MinActionsMenuProps, params: ClickParam): void {
-    const { taskInstance } = props;
-    const tracker = taskInstance.bugTracker;
-
-    if (params.keyPath.length !== 2) {
-        switch (params.key) {
-            case 'tracker': {
-                // false positive eslint(security/detect-non-literal-fs-filename)
-                // eslint-disable-next-line
-                window.open(`${tracker}`, '_blank');
-                return;
-            } case 'auto_annotation': {
-                props.onOpenRunWindow(taskInstance);
-                return;
-            } case 'delete': {
-                const taskID = taskInstance.id;
-                Modal.confirm({
-                    title: `The task ${taskID} will be deleted`,
-                    content: 'All related data (images, annotations) will be lost. Continue?',
-                    onOk: () => {
-                        props.onDeleteTask(taskInstance);
-                    },
-                });
-                break;
-            } default: {
-                // do nothing
-            }
-        }
-    }
+export enum Actions {
+    DUMP_TASK_ANNO = 'dump_task_anno',
+    LOAD_TASK_ANNO = 'load_task_anno',
+    EXPORT_TASK_DATASET = 'export_task_dataset',
+    DELETE_TASK = 'delete_task',
+    RUN_AUTO_ANNOTATION = 'run_auto_annotation',
+    OPEN_BUG_TRACKER = 'open_bug_tracker',
 }
 
-export default function ActionsMenuComponent(props: ActionsMenuComponentProps): JSX.Element {
+export default function ActionsMenuComponent(props: Props): JSX.Element {
     const {
-        taskInstance,
+        taskID,
+        taskMode,
+        bugTracker,
+
         installedAutoAnnotation,
         installedTFAnnotation,
         installedTFSegmentation,
+        inferenceIsActive,
+
         dumpers,
         loaders,
         exporters,
-        inferenceIsActive,
+        onClickMenu,
+        dumpActivities,
+        exportActivities,
+        loadActivity,
     } = props;
-    const tracker = taskInstance.bugTracker;
+
     const renderModelRunner = installedAutoAnnotation
         || installedTFAnnotation || installedTFSegmentation;
 
+    let latestParams: ClickParam | null = null;
+    function onClickMenuWrapper(params: ClickParam | null, file?: File): void {
+        const copyParams = params || latestParams;
+        if (!copyParams) {
+            return;
+        }
+        latestParams = copyParams;
+
+        if (copyParams.keyPath.length === 2) {
+            const [, action] = copyParams.keyPath;
+            if (action === Actions.LOAD_TASK_ANNO) {
+                if (file) {
+                    Modal.confirm({
+                        title: 'Current annotation will be lost',
+                        content: 'You are going to upload new annotations to this task. Continue?',
+                        onOk: () => {
+                            onClickMenu(copyParams, file);
+                        },
+                        okButtonProps: {
+                            type: 'danger',
+                        },
+                        okText: 'Update',
+                    });
+                }
+            } else {
+                onClickMenu(copyParams);
+            }
+        } else if (copyParams.key === Actions.DELETE_TASK) {
+            Modal.confirm({
+                title: `The task ${taskID} will be deleted`,
+                content: 'All related data (images, annotations) will be lost. Continue?',
+                onOk: () => {
+                    onClickMenu(copyParams);
+                },
+                okButtonProps: {
+                    type: 'danger',
+                },
+                okText: 'Delete',
+            });
+        } else {
+            onClickMenu(copyParams);
+        }
+    }
+
     return (
         <Menu
             selectable={false}
             className='cvat-actions-menu'
-            onClick={
-                (params: ClickParam): void => handleMenuClick(props, params)
-            }
+            onClick={onClickMenuWrapper}
         >
-            <Menu.SubMenu key='dump' title='Dump annotations'>
-                {
-                    dumpers.map((dumper): JSX.Element => DumperItemComponent({
-                        dumper,
-                        taskInstance: props.taskInstance,
-                        dumpActivity: (props.dumpActivities || [])
-                            .filter((_dumper: string) => _dumper === dumper.name)[0] || null,
-                        onDumpAnnotation: props.onDumpAnnotation,
-                    }))
-                }
-            </Menu.SubMenu>
-            <Menu.SubMenu key='load' title='Upload annotations'>
-                {
-                    loaders.map((loader): JSX.Element => LoaderItemComponent({
-                        loader,
-                        taskInstance: props.taskInstance,
-                        loadActivity: props.loadActivity,
-                        onLoadAnnotation: props.onLoadAnnotation,
-                    }))
-                }
-            </Menu.SubMenu>
-            <Menu.SubMenu key='export' title='Export as a dataset'>
-                {
-                    exporters.map((exporter): JSX.Element => ExportItemComponent({
-                        exporter,
-                        taskInstance: props.taskInstance,
-                        exportActivity: (props.exportActivities || [])
-                            .filter((_exporter: string) => _exporter === exporter.name)[0] || null,
-                        onExportDataset: props.onExportDataset,
-                    }))
-                }
-            </Menu.SubMenu>
-            {tracker && <Menu.Item key='tracker'>Open bug tracker</Menu.Item>}
+            {
+                DumpSubmenu({
+                    taskMode,
+                    dumpers,
+                    dumpActivities,
+                    menuKey: Actions.DUMP_TASK_ANNO,
+                })
+            }
+            {
+                LoadSubmenu({
+                    loaders,
+                    loadActivity,
+                    onFileUpload: (file: File): void => {
+                        onClickMenuWrapper(null, file);
+                    },
+                    menuKey: Actions.LOAD_TASK_ANNO,
+                })
+            }
+            {
+                ExportSubmenu({
+                    exporters,
+                    exportActivities,
+                    menuKey: Actions.EXPORT_TASK_DATASET,
+                })
+            }
+            {!!bugTracker && <Menu.Item key={Actions.OPEN_BUG_TRACKER}>Open bug tracker</Menu.Item>}
             {
                 renderModelRunner
                     && (
                         <Menu.Item
                             disabled={inferenceIsActive}
-                            key='auto_annotation'
+                            key={Actions.RUN_AUTO_ANNOTATION}
                         >
                             Automatic annotation
                         </Menu.Item>
                     )
             }
             <hr />
-            <Menu.Item key='delete'>Delete</Menu.Item>
+            <Menu.Item key={Actions.DELETE_TASK}>Delete</Menu.Item>
         </Menu>
     );
 }