Semi-automatic tools enhancements (Non-blocking UI, tips)

CHANGELOG.md

@@ -10,10 +10,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Added
 
 - Notification if the browser does not support nesassary API
+- Additional inline tips in interactors with demo gifs (<https://github.com/openvinotoolkit/cvat/pull/3473>)
 
 ### Changed
 
-- TDB
+- Non-blocking UI when using interactors (<https://github.com/openvinotoolkit/cvat/pull/3473>)
 
 ### Deprecated
 
@@ -873,20 +874,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ```
 ## [Unreleased]
 ### Added
--
+- TDB
 
 ### Changed
--
+- TDB
 
 ### Deprecated
--
+- TDB
 
 ### Removed
--
+- TDB
 
 ### Fixed
--
+- TDB
 
 ### Security
--
+- TDB
 ```

cvat-ui/package.json

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

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/interactor-tooltips.tsx

@@ -0,0 +1,75 @@
+// Copyright (C) 2021 Intel Corporation
+//
+// SPDX-License-Identifier: MIT
+
+import React from 'react';
+import Image from 'antd/lib/image';
+import Paragraph from 'antd/lib/typography/Paragraph';
+import Text from 'antd/lib/typography/Text';
+
+interface Props {
+ tool?: string;
+ withNegativePoints?: boolean;
+}
+
+function InteractorTooltips(props: Props): JSX.Element {
+ const { tool, withNegativePoints } = props;
+
+ const DEXTR_GIF = 'https://openvinotoolkit.github.io/cvat/images/dextr_example.gif';
+ const FBRS_GIF = 'https://openvinotoolkit.github.io/cvat/images/fbrs_example.gif';
+ const IOG_GIF = 'https://openvinotoolkit.github.io/cvat/images/iog_example.gif';
+ const DEXTR_DESC =
+ 'The interactor allows to get a mask of an object using its extreme points (more or equal 4). You can add a point left-clicking the image';
+ const FBRS_DESC = 'The interactor allows to get a mask for an object using positive points, and negative points.';
+ const IOG_DESC =
+ 'The interactor allows to get a mask of an object using its wrapping boundig box, positive, and negative points inside it';
+
+ const UNKNOWN_DESC = 'Selected interactor does not have tips';
+
+ let gif = null;
+ let desc = '';
+
+ switch (tool) {
+ case undefined:
+ desc = 'Select an interactor to see description';
+ break;
+ case 'DEXTR':
+ gif = DEXTR_GIF;
+ desc = DEXTR_DESC;
+ break;
+ case 'f-BRS':
+ gif = FBRS_GIF;
+ desc = FBRS_DESC;
+ break;
+ case 'IOG':
+ gif = IOG_GIF;
+ desc = IOG_DESC;
+ break;
+ default:
+ desc = UNKNOWN_DESC;
+ }
+
+ return (
+ <div className='cvat-interactor-tip-container'>
+ <Paragraph>{desc}</Paragraph>
+ {tool ? (
+ <>
+ <Paragraph>
+ <Text>You can prevent server requests holding</Text>
+ <Text strong>{' Ctrl '}</Text>
+ <Text>key</Text>
+ </Paragraph>
+ <Paragraph>
+ <Text>Positive points can be added by left-clicking the image. </Text>
+ {withNegativePoints ? (
+ <Text>Negative points can be added by right-clicking the image. </Text>
+ ) : null}
+ </Paragraph>
+ </>
+ ) : null}
+ {gif ? <Image className='cvat-interactor-tip-image' alt='Example gif' src={gif} /> : null}
+ </div>
+ );
+}
+
+export default React.memo(InteractorTooltips);