Using serverside paremeter min_pos_points, right colors of labels in … (#2162)

* Using serverside paremeter min_pos_points, right colors of labels in detector runner

* Updated changelog & versions

* Using color from consts instead of literal

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changed
 - UI models (like DEXTR) were redesigned to be more interactive (<https://github.com/opencv/cvat/pull/2054>)
 - Used Ubuntu:20.04 as a base image for CVAT Dockerfile (<https://github.com/opencv/cvat/pull/2101>)
+- Right colors of label tags in label mapping when a user runs automatic detection (<https://github.com/openvinotoolkit/cvat/pull/2162>)
 
 ### Deprecated
 -

cvat-core/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-core",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-core",
-  "version": "3.6.1",
+  "version": "3.7.0",
   "description": "Part of Computer Vision Tool which presents an interface for client-side integration",
   "main": "babel.config.js",
   "scripts": {

cvat-core/src/lambda-manager.js

@@ -29,11 +29,7 @@ class LambdaManager {
 
         for (const model of result) {
             models.push(new MLModel({
-                id: model.id,
-                name: model.name,
-                description: model.description,
-                framework: model.framework,
-                labels: [...model.labels],
+                ...model,
                 type: model.kind,
             }));
         }

cvat-core/src/ml-model.js

@@ -15,6 +15,11 @@ class MLModel {
         this._framework = data.framework;
         this._description = data.description;
         this._type = data.type;
+        this._params = {
+            canvas: {
+                minPosVertices: data.min_pos_points,
+            },
+        };
     }
 
     /**
@@ -68,6 +73,16 @@ class MLModel {
     get type() {
         return this._type;
     }
+
+    /**
+     * @returns {object}
+     * @readonly
+    */
+    get params() {
+        return {
+            canvas: { ...this._params.canvas },
+        };
+    }
 }
 
 module.exports = MLModel;

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.9.3",
+  "version": "1.9.4",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

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

@@ -1446,7 +1446,7 @@ export function repeatDrawShapeAsync(): ThunkAction {
                 canvasInstance.interact({
                     enabled: true,
                     shapeType: 'points',
-                    minPosVertices: 4, // TODO: Add parameter to interactor
+                    ...activeInteractor.params.canvas,
                 });
                 dispatch(interactWithCanvas(activeInteractor, activeLabelID));
             }

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx

@@ -657,8 +657,8 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                                     canvasInstance.cancel();
                                     canvasInstance.interact({
                                         shapeType: 'points',
-                                        minPosVertices: 4, // TODO: Add parameter to interactor
                                         enabled: true,
+                                        ...activeInteractor.params.canvas,
                                     });
 
                                     onInteractionStart(activeInteractor, activeLabelID);

cvat-ui/src/components/model-runner-modal/detector-runner.tsx

@@ -10,34 +10,15 @@ import Select, { OptionProps } from 'antd/lib/select';
 import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import Tooltip from 'antd/lib/tooltip';
 import Tag from 'antd/lib/tag';
-import notification from 'antd/lib/notification';
 import Text from 'antd/lib/typography/Text';
 import InputNumber from 'antd/lib/input-number';
-
-import { Model, StringObject } from 'reducers/interfaces';
 import Button from 'antd/lib/button';
+import notification from 'antd/lib/notification';
 
+import { Model, StringObject } from 'reducers/interfaces';
 
-function colorGenerator(): () => string {
-    const values = [
-        'magenta', 'green', 'geekblue',
-        'orange', 'red', 'cyan',
-        'blue', 'volcano', 'purple',
-    ];
-
-    let index = 0;
-
-    return (): string => {
-        const color = values[index++];
-        if (index >= values.length) {
-            index = 0;
-        }
-
-        return color;
-    };
-}
 
-const nextColor = colorGenerator();
+import consts from 'consts';
 
 interface Props {
     withCleanup: boolean;
@@ -56,7 +37,6 @@ function DetectorRunner(props: Props): JSX.Element {
 
     const [modelID, setModelID] = useState<string | null>(null);
     const [mapping, setMapping] = useState<StringObject>({});
-    const [colors, setColors] = useState<StringObject>({});
     const [threshold, setThreshold] = useState<number>(0.5);
     const [distance, setDistance] = useState<number>(50);
     const [cleanup, setCleanup] = useState<boolean>(false);
@@ -90,10 +70,7 @@ function DetectorRunner(props: Props): JSX.Element {
     function updateMatch(modelLabel: string | null, taskLabel: string | null): void {
         if (match.model && taskLabel) {
             const newmatch: { [index: string]: string } = {};
-            const newcolor: { [index: string]: string } = {};
             newmatch[match.model] = taskLabel;
-            newcolor[match.model] = nextColor();
-            setColors({ ...colors, ...newcolor });
             setMapping({ ...mapping, ...newmatch });
             setMatch({ model: null, task: null });
             return;
@@ -101,10 +78,7 @@ function DetectorRunner(props: Props): JSX.Element {
 
         if (match.task && modelLabel) {
             const newmatch: { [index: string]: string } = {};
-            const newcolor: { [index: string]: string } = {};
             newmatch[modelLabel] = match.task;
-            newcolor[modelLabel] = nextColor();
-            setColors({ ...colors, ...newcolor });
             setMapping({ ...mapping, ...newmatch });
             setMatch({ model: null, task: null });
             return;
@@ -157,18 +131,15 @@ function DetectorRunner(props: Props): JSX.Element {
                         onChange={(_modelID: string): void => {
                             const newmodel = models
                                 .filter((_model): boolean => _model.id === _modelID)[0];
-                            const newcolors: StringObject = {};
                             const newmapping = task.labels
                                 .reduce((acc: StringObject, label: any): StringObject => {
                                     if (newmodel.labels.includes(label.name)) {
                                         acc[label.name] = label.name;
-                                        newcolors[label.name] = nextColor();
                                     }
                                     return acc;
                                 }, {});
 
                             setMapping(newmapping);
-                            setColors(newcolors);
                             setMatch({ model: null, task: null });
                             setModelID(_modelID);
                         }}
@@ -180,29 +151,34 @@ function DetectorRunner(props: Props): JSX.Element {
                 </Col>
             </Row>
             { isDetector && !!Object.keys(mapping).length && (
-                Object.keys(mapping).map((modelLabel: string) => (
-                    <Row key={modelLabel} type='flex' justify='start' align='middle'>
-                        <Col span={10}>
-                            <Tag color={colors[modelLabel]}>{modelLabel}</Tag>
-                        </Col>
-                        <Col span={10} offset={1}>
-                            <Tag color={colors[modelLabel]}>{mapping[modelLabel]}</Tag>
-                        </Col>
-                        <Col offset={1}>
-                            <Tooltip title='Remove the mapped values' mouseLeaveDelay={0}>
-                                <Icon
-                                    className='cvat-danger-circle-icon'
-                                    type='close-circle'
-                                    onClick={(): void => {
-                                        const newmapping = { ...mapping };
-                                        delete newmapping[modelLabel];
-                                        setMapping(newmapping);
-                                    }}
-                                />
-                            </Tooltip>
-                        </Col>
-                    </Row>
-                ))
+                Object.keys(mapping).map((modelLabel: string) => {
+                    const label = task.labels
+                        .filter((_label: any): boolean => _label.name === mapping[modelLabel])[0];
+                    const color = label ? label.color : consts.NEW_LABEL_COLOR;
+                    return (
+                        <Row key={modelLabel} type='flex' justify='start' align='middle'>
+                            <Col span={10}>
+                                <Tag color={color}>{modelLabel}</Tag>
+                            </Col>
+                            <Col span={10} offset={1}>
+                                <Tag color={color}>{mapping[modelLabel]}</Tag>
+                            </Col>
+                            <Col offset={1}>
+                                <Tooltip title='Remove the mapped values' mouseLeaveDelay={0}>
+                                    <Icon
+                                        className='cvat-danger-circle-icon'
+                                        type='close-circle'
+                                        onClick={(): void => {
+                                            const newmapping = { ...mapping };
+                                            delete newmapping[modelLabel];
+                                            setMapping(newmapping);
+                                        }}
+                                    />
+                                </Tooltip>
+                            </Col>
+                        </Row>
+                    );
+                })
             )}
             { isDetector && !!taskLabels.length && !!modelLabels.length && (
                 <>

cvat-ui/src/reducers/interfaces.ts

@@ -141,6 +141,9 @@ export interface Model {
     framework: string;
     description: string;
     type: string;
+    params: {
+        canvas: object;
+    };
 }
 
 export enum RQStatus {

cvat/apps/lambda_manager/views.py

@@ -109,6 +109,7 @@ class LambdaFunction:
         self.framework = data['metadata']['annotations'].get('framework')
         # display name for the function
         self.name = data['metadata']['annotations'].get('name', self.id)
+        self.min_pos_points = int(data['metadata']['annotations'].get('min_pos_points', 1))
         self.gateway = gateway
 
     def to_dict(self):
@@ -120,6 +121,7 @@ class LambdaFunction:
             'description': self.description,
             'framework': self.framework,
             'name': self.name,
+            'min_pos_points': self.min_pos_points
         }
 
         return response