React UI: Semi-automatic segmentation (#1398)

* implemented checked

* Implemented plugin

* Added dialog windows

* Updated changelo

* Added cancel request

CHANGELOG.md

@@ -14,6 +14,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Dedicated message with clarifications when share is unmounted (https://github.com/opencv/cvat/pull/1373)
 - Ability to create one tracked point (https://github.com/opencv/cvat/pull/1383)
 - Tutorial: instructions for CVAT over HTTPS
+- Added deep extreme cut (semi-automatic segmentation) to the new UI (https://github.com/opencv/cvat/pull/1398)
 
 ### Changed
 - Increase preview size of a task till 256, 256 on the server

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

@@ -33,6 +33,7 @@ export function checkPluginsAsync(): ThunkAction {
             GIT_INTEGRATION: false,
             TF_ANNOTATION: false,
             TF_SEGMENTATION: false,
+            DEXTR_SEGMENTATION: false,
         };
 
         const promises: Promise<boolean>[] = [
@@ -41,15 +42,12 @@ export function checkPluginsAsync(): ThunkAction {
             PluginChecker.check(SupportedPlugins.GIT_INTEGRATION),
             PluginChecker.check(SupportedPlugins.TF_ANNOTATION),
             PluginChecker.check(SupportedPlugins.TF_SEGMENTATION),
+            PluginChecker.check(SupportedPlugins.DEXTR_SEGMENTATION),
         ];
 
         const values = await Promise.all(promises);
-        [plugins.ANALYTICS] = values;
-        [, plugins.AUTO_ANNOTATION] = values;
-        [,, plugins.GIT_INTEGRATION] = values;
-        [,,, plugins.TF_ANNOTATION] = values;
-        [,,,, plugins.TF_SEGMENTATION] = values;
-
+        [plugins.ANALYTICS, plugins.AUTO_ANNOTATION, plugins.GIT_INTEGRATION,
+            plugins.TF_ANNOTATION, plugins.TF_SEGMENTATION, plugins.DEXTR_SEGMENTATION] = values;
         dispatch(pluginActions.checkedAllPlugins(plugins));
     };
 }

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/dextr-plugin.tsx

@@ -0,0 +1,90 @@
+// Copyright (C) 2020 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React, { useState } from 'react';
+import { connect } from 'react-redux';
+import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
+import Tooltip from 'antd/lib/tooltip';
+
+import { Canvas } from 'cvat-canvas';
+import { CombinedState } from 'reducers/interfaces';
+import { activate as activatePlugin, deactivate as deactivatePlugin } from 'utils/dextr-utils';
+
+
+interface StateToProps {
+    pluginEnabled: boolean;
+    canvasInstance: Canvas;
+}
+
+interface DispatchToProps {
+    activate(canvasInstance: Canvas): void;
+    deactivate(canvasInstance: Canvas): void;
+}
+
+function mapStateToProps(state: CombinedState): StateToProps {
+    const {
+        plugins: {
+            list,
+        },
+        annotation: {
+            canvas: {
+                instance: canvasInstance,
+            },
+        },
+    } = state;
+
+    return {
+        canvasInstance,
+        pluginEnabled: list.DEXTR_SEGMENTATION,
+    };
+}
+
+function mapDispatchToProps(): DispatchToProps {
+    return {
+        activate(canvasInstance: Canvas): void {
+            activatePlugin(canvasInstance);
+        },
+        deactivate(canvasInstance: Canvas): void {
+            deactivatePlugin(canvasInstance);
+        },
+    };
+}
+
+function DEXTRPlugin(props: StateToProps & DispatchToProps): JSX.Element | null {
+    const {
+        pluginEnabled,
+        canvasInstance,
+        activate,
+        deactivate,
+    } = props;
+    const [pluginActivated, setActivated] = useState(false);
+
+    return (
+        pluginEnabled ? (
+            <Tooltip title='Make AI polygon from at least 4 extreme points using deep extreme cut'>
+                <Checkbox
+                    style={{ marginTop: 5 }}
+                    checked={pluginActivated}
+                    onChange={(event: CheckboxChangeEvent): void => {
+                        setActivated(event.target.checked);
+                        if (event.target.checked) {
+                            activate(canvasInstance);
+                        } else {
+                            deactivate(canvasInstance);
+                        }
+                    }}
+                >
+                    Make AI polygon
+                </Checkbox>
+            </Tooltip>
+        ) : null
+    );
+}
+
+export default connect(
+    mapStateToProps,
+    mapDispatchToProps,
+)(DEXTRPlugin);
+
+// TODO: Add dialog window with cancel button

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx

@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-
 import { Row, Col } from 'antd/lib/grid';
 import Select from 'antd/lib/select';
 import Button from 'antd/lib/button';
@@ -15,6 +14,7 @@ import Text from 'antd/lib/typography/Text';
 import { RectDrawingMethod } from 'cvat-canvas';
 import { ShapeType } from 'reducers/interfaces';
 import { clamp } from 'utils/math';
+import DEXTRPlugin from './dextr-plugin';
 
 interface Props {
     shapeType: ShapeType;
@@ -81,6 +81,9 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
                     </Select>
                 </Col>
             </Row>
+            {
+                shapeType === ShapeType.POLYGON && <DEXTRPlugin />
+            }
             {
                 shapeType === ShapeType.RECTANGLE ? (
                     <>

cvat-ui/src/reducers/interfaces.ts

@@ -75,6 +75,7 @@ export enum SupportedPlugins {
     AUTO_ANNOTATION = 'AUTO_ANNOTATION',
     TF_ANNOTATION = 'TF_ANNOTATION',
     TF_SEGMENTATION = 'TF_SEGMENTATION',
+    DEXTR_SEGMENTATION = 'DEXTR_SEGMENTATION',
     ANALYTICS = 'ANALYTICS',
 }
 

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

@@ -4,6 +4,7 @@
 
 import { PluginsActionTypes, PluginActions } from 'actions/plugins-actions';
 import { registerGitPlugin } from 'utils/git-utils';
+import { registerDEXTRPlugin } from 'utils/dextr-utils';
 import {
     PluginsState,
 } from './interfaces';
@@ -16,6 +17,7 @@ const defaultState: PluginsState = {
         AUTO_ANNOTATION: false,
         TF_ANNOTATION: false,
         TF_SEGMENTATION: false,
+        DEXTR_SEGMENTATION: false,
         ANALYTICS: false,
     },
 };
@@ -39,6 +41,10 @@ export default function (
                 registerGitPlugin();
             }
 
+            if (!state.list.DEXTR_SEGMENTATION && list.DEXTR_SEGMENTATION) {
+                registerDEXTRPlugin();
+            }
+
             return {
                 ...state,
                 initialized: true,