React UI: Added button to cancel started automatic annotation

cvat-ui/src/components/tasks-page/styles.scss

@@ -87,37 +87,11 @@
     padding-top: 20px;
     background: $background-color-1;
 
-    /* description */
-    > div:nth-child(2) {
-        word-break: break-all;
-        max-height: 100%;
-        overflow: hidden;
-    }
-
-    /* open, actions */
-    div:nth-child(4) {
-        > div {
-            margin-right: 20px;
-        }
-
-        /* actions */
-        > div:nth-child(2) {
-            margin-right: 5px;
-            margin-top: 10px;
-
-            > div {
-                display: flex;
-                align-items: center;
-            }
-        }
-    }
-
     &:hover {
         border: 1px solid $border-color-hover;
     }
 }
 
-
 .cvat-task-item-preview-wrapper {
     display: flex;
     justify-content: center;
@@ -131,6 +105,12 @@
     }
 }
 
+.cvat-task-item-description {
+    word-break: break-all;
+    max-height: 100%;
+    overflow: hidden;
+}
+
 .cvat-task-progress {
     width: 100%;
 }
@@ -159,6 +139,26 @@
     margin-right: 5px;
 }
 
+.close-auto-annotation-icon {
+    color: $danger-icon-color;
+    opacity: 0.7;
+
+    &:hover {
+        opacity: 1;
+    }
+}
+
+.cvat-item-open-task-actions {
+    margin-right: 5px;
+    margin-top: 10px;
+    display: flex;
+    align-items: center;
+}
+
+.cvat-item-open-task-button {
+    margin-right: 20px;
+}
+
 #cvat-create-task-button {
     padding: 0 30px;
 }

cvat-ui/src/components/tasks-page/task-item.tsx

@@ -14,6 +14,8 @@ import {
     Icon,
     Progress,
     Dropdown,
+    Tooltip,
+    Modal,
 } from 'antd';
 
 import moment from 'moment';
@@ -28,6 +30,7 @@ export interface TaskItemProps {
     deleted: boolean;
     hidden: boolean;
     activeInference: ActiveInference | null;
+    cancelAutoAnnotation(): void;
 }
 
 class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteComponentProps> {
@@ -54,7 +57,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
         const name = `${taskInstance.name.substring(0, 70)}${taskInstance.name.length > 70 ? '...' : ''}`;
 
         return (
-            <Col span={10}>
+            <Col span={10} className='cvat-task-item-description'>
                 <Text strong type='secondary'>{`#${id}: `}</Text>
                 <Text strong className='cvat-text-color'>{name}</Text>
                 <br />
@@ -76,6 +79,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
         const {
             taskInstance,
             activeInference,
+            cancelAutoAnnotation,
         } = this.props;
         // Count number of jobs and performed jobs
         const numOfJobs = taskInstance.jobs.length;
@@ -132,8 +136,8 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
                                     <Text strong>Automatic annotation</Text>
                                 </Col>
                             </Row>
-                            <Row>
-                                <Col>
+                            <Row type='flex' justify='space-between'>
+                                <Col span={22}>
                                     <Progress
                                         percent={Math.floor(activeInference.progress)}
                                         strokeColor={{
@@ -145,6 +149,23 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
                                         size='small'
                                     />
                                 </Col>
+                                <Col span={1} className='close-auto-annotation-icon'>
+                                    <Tooltip title='Cancel automatic annotation'>
+                                        <Icon
+                                            type='close'
+                                            onClick={() => {
+                                                Modal.confirm({
+                                                    title: 'You are going to cancel automatic annotation?',
+                                                    content: 'Reached progress will be lost. Continue?',
+                                                    okType: 'danger',
+                                                    onOk() {
+                                                        cancelAutoAnnotation();
+                                                    },
+                                                });
+                                            }}
+                                        />
+                                    </Tooltip>
+                                </Col>
                             </Row>
                         </>
                     )}
@@ -164,6 +185,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
                 <Row type='flex' justify='end'>
                     <Col>
                         <Button
+                            className='cvat-item-open-task-button'
                             type='primary'
                             size='large'
                             ghost
@@ -174,7 +196,7 @@ class TaskItemComponent extends React.PureComponent<TaskItemProps & RouteCompone
                     </Col>
                 </Row>
                 <Row type='flex' justify='end'>
-                    <Col>
+                    <Col className='cvat-item-open-task-actions'>
                         <Text className='cvat-text-color'>Actions</Text>
                         <Dropdown overlay={<ActionsMenuContainer taskInstance={taskInstance} />}>
                             <Icon className='cvat-menu-icon' component={MenuIcon} />

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

@@ -10,7 +10,7 @@ import {
     CombinedState,
 } from 'reducers/interfaces';
 
-import { showRunModelDialog } from 'actions/models-actions';
+import { modelsActions } from 'actions/models-actions';
 import {
     dumpAnnotationsAsync,
     loadAnnotationsAsync,
@@ -99,7 +99,7 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
             dispatch(deleteTaskAsync(taskInstance));
         },
         openRunModelWindow: (taskInstance: any): void => {
-            dispatch(showRunModelDialog(taskInstance));
+            dispatch(modelsActions.showRunModelDialog(taskInstance));
         },
     };
 }

cvat-ui/src/containers/model-runner-dialog/model-runner-dialog.tsx

@@ -12,8 +12,8 @@ import {
 } from 'reducers/interfaces';
 import {
     getModelsAsync,
-    inferModelAsync,
-    closeRunModelDialog,
+    startInferenceAsync,
+    modelsActions,
 } from 'actions/models-actions';
 
 
@@ -64,13 +64,13 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
             },
             cleanOut: boolean,
         ): void {
-            dispatch(inferModelAsync(taskInstance, model, mapping, cleanOut));
+            dispatch(startInferenceAsync(taskInstance, model, mapping, cleanOut));
         },
         getModels(): void {
             dispatch(getModelsAsync());
         },
         closeDialog(): void {
-            dispatch(closeRunModelDialog());
+            dispatch(modelsActions.closeRunModelDialog());
         },
     });
 }

cvat-ui/src/containers/tasks-page/task-item.tsx

@@ -13,9 +13,8 @@ import {
 
 import TaskItemComponent from 'components/tasks-page/task-item';
 
-import {
-    getTasksAsync,
-} from 'actions/tasks-actions';
+import { getTasksAsync } from 'actions/tasks-actions';
+import { cancelInferenceAsync } from 'actions/models-actions';
 
 interface StateToProps {
     deleted: boolean;
@@ -26,7 +25,8 @@ interface StateToProps {
 }
 
 interface DispatchToProps {
-    getTasks: (query: TasksQuery) => void;
+    getTasks(query: TasksQuery): void;
+    cancelAutoAnnotation(): void;
 }
 
 interface OwnProps {
@@ -48,23 +48,18 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
     };
 }
 
-function mapDispatchToProps(dispatch: any): DispatchToProps {
+function mapDispatchToProps(dispatch: any, own: OwnProps): DispatchToProps {
     return {
-        getTasks: (query: TasksQuery): void => {
+        getTasks(query: TasksQuery): void {
             dispatch(getTasksAsync(query));
         },
+        cancelAutoAnnotation(): void {
+            dispatch(cancelInferenceAsync(own.taskID));
+        },
     };
 }
 
-type TasksItemContainerProps = StateToProps & DispatchToProps & OwnProps;
-
-function TaskItemContainer(props: TasksItemContainerProps): JSX.Element {
-    return (
-        <TaskItemComponent {...props} />
-    );
-}
-
 export default connect(
     mapStateToProps,
     mapDispatchToProps,
-)(TaskItemContainer);
+)(TaskItemComponent);

cvat-ui/src/reducers/interfaces.ts

@@ -134,10 +134,17 @@ export enum RQStatus {
     failed = 'failed',
 }
 
+export enum ModelType {
+    OPENVINO = 'openvino',
+    RCNN = 'rcnn',
+    MASK_RCNN = 'mask_rcnn',
+}
+
 export interface ActiveInference {
     status: RQStatus;
     progress: number;
     error: string;
+    modelType: ModelType;
 }
 
 export interface ModelsState {
@@ -199,6 +206,7 @@ export interface NotificationsState {
             starting: null | ErrorState;
             deleting: null | ErrorState;
             fetching: null | ErrorState;
+            canceling: null | ErrorState;
             metaFetching: null | ErrorState;
             inferenceStatusFetching: null | ErrorState;
         };

cvat-ui/src/reducers/models-reducer.ts

@@ -2,10 +2,8 @@
 //
 // SPDX-License-Identifier: MIT
 
-import { AnyAction } from 'redux';
-
-import { ModelsActionTypes } from 'actions/models-actions';
-import { AuthActionTypes } from 'actions/auth-actions';
+import { ModelsActionTypes, ModelsActions } from 'actions/models-actions';
+import { AuthActionTypes, AuthActions } from 'actions/auth-actions';
 import { ModelsState } from './interfaces';
 
 const defaultState: ModelsState = {
@@ -18,7 +16,7 @@ const defaultState: ModelsState = {
     inferences: {},
 };
 
-export default function (state = defaultState, action: AnyAction): ModelsState {
+export default function (state = defaultState, action: ModelsActions | AuthActions): ModelsState {
     switch (action.type) {
         case ModelsActionTypes.GET_MODELS: {
             return {
@@ -90,7 +88,7 @@ export default function (state = defaultState, action: AnyAction): ModelsState {
             };
         }
         case ModelsActionTypes.GET_INFERENCE_STATUS_SUCCESS: {
-            const inferences = { ...state.inferences };
+            const { inferences } = state;
             if (action.payload.activeInference.status === 'finished') {
                 delete inferences[action.payload.taskID];
             } else {
@@ -99,16 +97,25 @@ export default function (state = defaultState, action: AnyAction): ModelsState {
 
             return {
                 ...state,
-                inferences,
+                inferences: { ...inferences },
             };
         }
         case ModelsActionTypes.GET_INFERENCE_STATUS_FAILED: {
-            const inferences = { ...state.inferences };
+            const { inferences } = state;
+            delete inferences[action.payload.taskID];
+
+            return {
+                ...state,
+                inferences: { ...inferences },
+            };
+        }
+        case ModelsActionTypes.CANCEL_INFERENCE_SUCCESS: {
+            const { inferences } = state;
             delete inferences[action.payload.taskID];
 
             return {
                 ...state,
-                inferences,
+                inferences: { ...inferences },
             };
         }
         case AuthActionTypes.LOGOUT_SUCCESS: {

cvat-ui/src/reducers/notifications-reducer.ts

@@ -50,6 +50,7 @@ const defaultState: NotificationsState = {
             starting: null,
             deleting: null,
             fetching: null,
+            canceling: null,
             metaFetching: null,
             inferenceStatusFetching: null,
         },
@@ -432,7 +433,7 @@ export default function (state = defaultState, action: AnyAction): Notifications
                 },
             };
         }
-        case ModelsActionTypes.INFER_MODEL_FAILED: {
+        case ModelsActionTypes.START_INFERENCE_FAILED: {
             const { taskID } = action.payload;
             return {
                 ...state,
@@ -449,6 +450,23 @@ export default function (state = defaultState, action: AnyAction): Notifications
                 },
             };
         }
+        case ModelsActionTypes.CANCEL_INFERENCE_FAILED: {
+            const { taskID } = action.payload;
+            return {
+                ...state,
+                errors: {
+                    ...state.errors,
+                    models: {
+                        ...state.errors.models,
+                        canceling: {
+                            message: 'Could not cancel model inference for the '
+                                + `<a href="/tasks/${taskID}" target="_blank">task ${taskID}</a>`,
+                            reason: action.payload.error.toString(),
+                        },
+                    },
+                },
+            };
+        }
         case AnnotationActionTypes.GET_JOB_FAILED: {
             return {
                 ...state,