[React] Added shortcuts & ability to search a label

CHANGELOG.md

@@ -7,9 +7,12 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ## [1.1.0-alpha] - Unreleased
 ### Added
 - Throttling policy for unauthenticated users (<https://github.com/opencv/cvat/pull/1531>)
-- Added default label color table for mask export (https://github.com/opencv/cvat/pull/1549)
+- Added default label color table for mask export (<https://github.com/opencv/cvat/pull/1549>)
 - Added environment variables for Redis and Postgres hosts for Kubernetes deployment support (<https://github.com/opencv/cvat/pull/1641>)
-- Added visual identification for unavailable formats (https://github.com/opencv/cvat/pull/1567)
+- Added visual identification for unavailable formats (<https://github.com/opencv/cvat/pull/1567>)
+- Shortcut to change color of an activated shape in new UI (Enter) (<https://github.com/opencv/cvat/pull/1683>)
+- Shortcut to switch split mode (<https://github.com/opencv/cvat/pull/1683>)
+- Built-in search for labels when create an object or change a label (<https://github.com/opencv/cvat/pull/1683>)
 
 ### Changed
 - Removed information about e-mail from the basic user information (<https://github.com/opencv/cvat/pull/1627>)
@@ -22,15 +25,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -
 
 ### Fixed
-- Fixed dataset filter item representation for imageless dataset items (https://github.com/opencv/cvat/pull/1593)
-- Fixed interpreter crash when trying to import `tensorflow` with no AVX instructions available (https://github.com/opencv/cvat/pull/1567)
+- Fixed dataset filter item representation for imageless dataset items (<https://github.com/opencv/cvat/pull/1593>)
+- Fixed interpreter crash when trying to import `tensorflow` with no AVX instructions available (<https://github.com/opencv/cvat/pull/1567>)
 - Kibana wrong working time calculation with new annotation UI use (<https://github.com/opencv/cvat/pull/1654>)
 - Wrong rexex for account name validation (<https://github.com/opencv/cvat/pull/1667>)
 - Wrong description on register view for the username field (<https://github.com/opencv/cvat/pull/1667>)
 - Wrong resolution for resizing a shape (<https://github.com/opencv/cvat/pull/1667>)
 
 ### Security
-- SQL injection in Django `CVE-2020-9402` (https://github.com/opencv/cvat/pull/1657)
+- SQL injection in Django `CVE-2020-9402` (<https://github.com/opencv/cvat/pull/1657>)
 
 ## [1.0.0] - 2020-05-29
 ### Added

CONTRIBUTING.md

@@ -14,7 +14,7 @@ Next steps should work on clear Ubuntu 18.04.
 
 -   Install necessary dependencies:
     ```sh
-    $ sudo apt-get update && sudo apt-get --no-install-recommends install -y ffmpeg build-essential curl redis-server python3-dev python3-pip python3-venv libldap2-dev libsasl2-dev
+    $ sudo apt-get update && sudo apt-get --no-install-recommends install -y ffmpeg build-essential curl redis-server python3-dev python3-pip python3-venv python3-tk libldap2-dev libsasl2-dev
     ```
     Also please make sure that you have installed ffmpeg with all necessary libav* libraries and pkg-config package.
     ```sh
@@ -83,12 +83,13 @@ for development
 
 You have done! Now it is possible to insert breakpoints and debug server and client of the tool.
 
-## How to setup additional components in development environment
+## Setup additional components in development environment
 
 ### Automatic annotation
-- Install OpenVINO on your host machine according to instructions from
+-   Install OpenVINO on your host machine according to instructions from
 [OpenVINO website](https://docs.openvinotoolkit.org/latest/index.html)
-- Add some environment variables (copy code below to the end of ``.env/bin/activate`` file):
+
+-   Add some environment variables (copy code below to the end of ``.env/bin/activate`` file):
 ```sh
     source /opt/intel/openvino/bin/setupvars.sh
 
@@ -161,9 +162,10 @@ litle exception - we prefere 4 spaces for indentation of nested blocks and state
 The project uses [a successful Git branching model](https://nvie.com/posts/a-successful-git-branching-model).
 Thus it has a couple of branches. Some of them are described below:
 
-- `origin/master` to be the main branch where the source code of
-HEAD always reflects a production-ready state.
-- `origin/develop` to be the main branch where the source code of
+-   `origin/master` to be the main branch where the source code of
+HEAD always reflects a production-ready state
+
+-   `origin/develop` to be the main branch where the source code of
 HEAD always reflects a state with the latest delivered development
 changes for the next release. Some would call this the “integration branch”.
 
@@ -173,27 +175,27 @@ The issue tracker is the preferred channel for [bug reports](#bugs),
 [features requests](#features) and [submitting pull
 requests](#pull-requests), but please respect the following restrictions:
 
-* Please **do not** use the issue tracker for personal support requests (use
+-   Please **do not** use the issue tracker for personal support requests (use
   [Stack Overflow](http://stackoverflow.com)).
 
-* Please **do not** derail or troll issues. Keep the discussion on topic and
+-   Please **do not** derail or troll issues. Keep the discussion on topic and
   respect the opinions of others.
 
-  <a name="bugs"></a>
+<a name="bugs"></a>
 ## Bug reports
 
 A bug is a _demonstrable problem_ that is caused by the code in the repository.
 Good bug reports are extremely helpful - thank you!
 
 Guidelines for bug reports:
 
-1. **Use the GitHub issue search** &mdash; check if the issue has already been
+1.  **Use the GitHub issue search** &mdash; check if the issue has already been
    reported.
 
-2. **Check if the issue has been fixed** &mdash; try to reproduce it using the
+1.  **Check if the issue has been fixed** &mdash; try to reproduce it using the
    latest `develop` branch in the repository.
 
-3. **Isolate the problem** &mdash; ideally create a reduced test case.
+1.  **Isolate the problem** &mdash; ideally create a reduced test case.
 
 A good bug report shouldn't leave others needing to chase you up for more
 information. Please try to be as detailed as possible in your report. What is
@@ -209,9 +211,8 @@ Example:
 > suitable, include the steps required to reproduce the bug.
 >
 > 1. This is the first step
-> 2. This is the second step
-> 3. Further steps, etc.
->
+> 1. This is the second step
+> 1. Further steps, etc.
 >
 > Any other information you want to share that is relevant to the issue being
 > reported. This might include the lines of code that you have identified as
@@ -222,7 +223,7 @@ Example:
 ## Feature requests
 
 Feature requests are welcome. But take a moment to find out whether your idea
-fits with the scope and aims of the project. It's up to *you* to make a strong
+fits with the scope and aims of the project. It's up to _you_ to make a strong
 case to convince the project's developers of the merits of this feature. Please
 provide as much detail and context as possible.
 
@@ -244,51 +245,51 @@ accurate comments, etc.) and any other requirements (such as test coverage).
 Follow this process if you'd like your work considered for inclusion in the
 project:
 
-1. [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
-   and configure the remotes:
+1.  [Fork](http://help.github.com/fork-a-repo/) the project, clone your fork,
+    and configure the remotes:
 
-   ```bash
-   # Clone your fork of the repo into the current directory
-   git clone https://github.com/<your-username>/<repo-name>
-   # Navigate to the newly cloned directory
-   cd <repo-name>
-   # Assign the original repo to a remote called "upstream"
-   git remote add upstream https://github.com/<upstream-owner>/<repo-name>
-   ```
+    ```bash
+    # Clone your fork of the repo into the current directory
+    git clone https://github.com/<your-username>/<repo-name>
+    # Navigate to the newly cloned directory
+    cd <repo-name>
+    # Assign the original repo to a remote called "upstream"
+    git remote add upstream https://github.com/<upstream-owner>/<repo-name>
+    ```
 
-2. If you cloned a while ago, get the latest changes from upstream:
+1.  If you cloned a while ago, get the latest changes from upstream:
 
-   ```bash
-   git checkout <dev-branch>
-   git pull upstream <dev-branch>
-   ```
+    ```bash
+    git checkout <dev-branch>
+    git pull upstream <dev-branch>
+    ```
 
-3. Create a new topic branch (off the main project development branch) to
-   contain your feature, change, or fix:
+1.  Create a new topic branch (off the main project development branch) to
+    contain your feature, change, or fix:
 
-   ```bash
-   git checkout -b <topic-branch-name>
-   ```
+    ```bash
+    git checkout -b <topic-branch-name>
+    ```
 
-4. Commit your changes in logical chunks. Please adhere to these [git commit
+1.  Commit your changes in logical chunks. Please adhere to these [git commit
    message guidelines](http://tbaggery.com/2008/04/19/a-note-about-git-commit-messages.html)
    or your code is unlikely be merged into the main project. Use Git's
    [interactive rebase](https://help.github.com/articles/interactive-rebase)
    feature to tidy up your commits before making them public.
 
-5. Locally merge (or rebase) the upstream development branch into your topic branch:
+1.  Locally merge (or rebase) the upstream development branch into your topic branch:
 
-   ```bash
-   git pull [--rebase] upstream <dev-branch>
-   ```
+    ```bash
+    git pull [--rebase] upstream <dev-branch>
+    ```
 
-6. Push your topic branch up to your fork:
+1.  Push your topic branch up to your fork:
 
-   ```bash
-   git push origin <topic-branch-name>
-   ```
+    ```bash
+    git push origin <topic-branch-name>
+    ```
 
-7. [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
+1.  [Open a Pull Request](https://help.github.com/articles/using-pull-requests/)
     with a clear title and description.
 
 **IMPORTANT**: By submitting a patch, you agree to allow the project owner to

cvat-ui/package.json

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

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

@@ -65,6 +65,7 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
         PASTE_SHAPE: keyMap.PASTE_SHAPE,
         SWITCH_DRAW_MODE: keyMap.SWITCH_DRAW_MODE,
         SWITCH_MERGE_MODE: keyMap.SWITCH_MERGE_MODE,
+        SWITCH_SPLIT_MODE: keyMap.SWITCH_SPLIT_MODE,
         SWITCH_GROUP_MODE: keyMap.SWITCH_GROUP_MODE,
         RESET_GROUP: keyMap.RESET_GROUP,
         CANCEL: keyMap.CANCEL,
@@ -102,6 +103,15 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
             canvasInstance.merge({ enabled: !merging });
             mergeObjects(!merging);
         },
+        SWITCH_SPLIT_MODE: (event: KeyboardEvent | undefined) => {
+            preventDefault(event);
+            const splitting = activeControl === ActiveControl.SPLIT;
+            if (!splitting) {
+                canvasInstance.cancel();
+            }
+            canvasInstance.split({ enabled: !splitting });
+            splitTrack(!splitting);
+        },
         SWITCH_GROUP_MODE: (event: KeyboardEvent | undefined) => {
             preventDefault(event);
             const grouping = activeControl === ActiveControl.GROUP;
@@ -205,6 +215,7 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
             />
             <SplitControl
                 canvasInstance={canvasInstance}
+                switchSplitShortcut={normalizedKeyMap.SWITCH_SPLIT_MODE}
                 activeControl={activeControl}
                 splitTrack={splitTrack}
             />

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

@@ -4,7 +4,7 @@
 
 import React from 'react';
 import { Row, Col } from 'antd/lib/grid';
-import Select from 'antd/lib/select';
+import Select, { OptionProps } from 'antd/lib/select';
 import Button from 'antd/lib/button';
 import InputNumber from 'antd/lib/input-number';
 import Radio, { RadioChangeEvent } from 'antd/lib/radio';
@@ -70,6 +70,15 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
             <Row type='flex' justify='center'>
                 <Col span={24}>
                     <Select
+                        showSearch
+                        filterOption={(input: string, option: React.ReactElement<OptionProps>) => {
+                            const { children } = option.props;
+                            if (typeof (children) === 'string') {
+                                return children.toLowerCase().includes(input.toLowerCase());
+                            }
+
+                            return false;
+                        }}
                         value={`${selectedLabeID}`}
                         onChange={onChangeLabel}
                     >

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

@@ -13,12 +13,13 @@ import { ActiveControl } from 'reducers/interfaces';
 interface Props {
     canvasInstance: Canvas;
     activeControl: ActiveControl;
-
+    switchSplitShortcut: string;
     splitTrack(enabled: boolean): void;
 }
 
 function SplitControl(props: Props): JSX.Element {
     const {
+        switchSplitShortcut,
         activeControl,
         canvasInstance,
         splitTrack,
@@ -40,7 +41,7 @@ function SplitControl(props: Props): JSX.Element {
         };
 
     return (
-        <Tooltip title='Split a track' placement='right'>
+        <Tooltip title={`Split a track ${switchSplitShortcut}`} placement='right'>
             <Icon {...dynamicIconProps} component={SplitIcon} />
         </Tooltip>
     );

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx

@@ -5,7 +5,7 @@
 import React from 'react';
 import { Row, Col } from 'antd/lib/grid';
 import Icon from 'antd/lib/icon';
-import Select from 'antd/lib/select';
+import Select, { OptionProps } from 'antd/lib/select';
 import Radio, { RadioChangeEvent } from 'antd/lib/radio';
 import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
 import Input from 'antd/lib/input';
@@ -86,7 +86,7 @@ function ItemMenu(
             {shapeType === ShapeType.CUBOID && (
                 <Menu.Item>
                     <Button type='link' onClick={resetCuboidPerspective}>
-                        <Icon component={ResetPerspectiveIcon}/>
+                        <Icon component={ResetPerspectiveIcon} />
                         Reset perspective
                     </Button>
                 </Menu.Item>
@@ -200,7 +200,20 @@ function ItemTopComponent(props: ItemTopComponentProps): JSX.Element {
             </Col>
             <Col span={12}>
                 <Tooltip title='Change current label'>
-                    <Select size='small' value={`${labelID}`} onChange={changeLabel}>
+                    <Select
+                        size='small'
+                        value={`${labelID}`}
+                        onChange={changeLabel}
+                        showSearch
+                        filterOption={(input: string, option: React.ReactElement<OptionProps>) => {
+                            const { children } = option.props;
+                            if (typeof (children) === 'string') {
+                                return children.toLowerCase().includes(input.toLowerCase());
+                            }
+
+                            return false;
+                        }}
+                    >
                         { labels.map((label: any): JSX.Element => (
                             <Select.Option key={label.id} value={`${label.id}`}>
                                 {label.name}
@@ -366,7 +379,7 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
                         <Col>
                             <Tooltip title={`Switch lock property ${switchLockShortcut}`}>
                                 { locked
-                                    ? <Icon type='lock' onClick={unlock} theme='filled'/>
+                                    ? <Icon type='lock' onClick={unlock} theme='filled' />
                                     : <Icon type='unlock' onClick={lock} />}
                             </Tooltip>
                         </Col>
@@ -433,7 +446,7 @@ function ItemButtonsComponent(props: ItemButtonsComponentProps): JSX.Element {
                     <Col>
                         <Tooltip title={`Switch lock property ${switchLockShortcut}`}>
                             { locked
-                                ? <Icon type='lock' onClick={unlock} theme='filled'/>
+                                ? <Icon type='lock' onClick={unlock} theme='filled' />
                                 : <Icon type='unlock' onClick={lock} />}
                         </Tooltip>
                     </Col>