[React] Added shortcuts & ability to search a label (cvat-ai#1683)

* Fixed remark-linter errors in CONTRIBUTING.md, added python3-tk to the installation guide * Added labels search * Added shortcuts to change color and split * Updated version * Updated CHANGELOG.md * Added title * Added shortcut hint for change color, added ability to change color of group/label using the shortcut * Updated CONTRIBUTING.md
signatrix · Aug 3, 2020 · 5fbd1b9 · 5fbd1b9
1 parent 7cc8571
commit 5fbd1b9
Show file tree

Hide file tree

Showing 15 changed files with 216 additions and 105 deletions.
diff --git a/CHANGELOG.md b/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>)
@@ -21,15 +24,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

diff --git a/CONTRIBUTING.md b/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
@@ -60,6 +60,7 @@ for development
 
 -   Install npm packages for UI and start UI debug server (run the following command from CVAT root directory):
     ```sh
+    npm install && \
     cd cvat-core && npm install && \
     cd ../cvat-ui && npm install && npm start
     ```
@@ -83,12 +84,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
 
@@ -172,9 +174,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”.
 
@@ -184,27 +187,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
@@ -220,9 +223,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
@@ -233,7 +235,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.
 
@@ -255,51 +257,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

diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json
diff --git a/cvat-ui/package.json b/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": {

diff --git a/cvat-ui/src/actions/annotation-actions.ts b/cvat-ui/src/actions/annotation-actions.ts
@@ -1367,19 +1367,23 @@ ThunkAction<Promise<void>, {}, {}, AnyAction> {
 }
 
 export function changeLabelColorAsync(
-    sessionInstance: any,
-    frameNumber: number,
     label: any,
     color: string,
 ): ThunkAction<Promise<void>, {}, {}, AnyAction> {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         try {
-            const { filters, showAllInterpolationTracks } = receiveAnnotationsParameters();
+            const {
+                filters,
+                showAllInterpolationTracks,
+                jobInstance,
+                frame,
+            } = receiveAnnotationsParameters();
+
             const updatedLabel = label;
             updatedLabel.color = color;
-            const states = await sessionInstance.annotations
-                .get(frameNumber, showAllInterpolationTracks, filters);
-            const history = await sessionInstance.actions.get();
+            const states = await jobInstance.annotations
+                .get(frame, showAllInterpolationTracks, filters);
+            const history = await jobInstance.actions.get();
 
             dispatch({
                 type: AnnotationActionTypes.CHANGE_LABEL_COLOR_SUCCESS,

diff --git a/...src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx b/...src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx
@@ -82,6 +82,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,
@@ -119,6 +120,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;
@@ -235,6 +245,7 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
             />
             <SplitControl
                 canvasInstance={canvasInstance}
+                switchSplitShortcut={normalizedKeyMap.SWITCH_SPLIT_MODE}
                 activeControl={activeControl}
                 splitTrack={splitTrack}
             />

diff --git a/...rc/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/...rc/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}
                     >

diff --git a/...-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx b/...-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>
     );

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-changer.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-changer.tsx
@@ -5,17 +5,16 @@
 import React from 'react';
 import { Row, Col } from 'antd/lib/grid';
 import Button from 'antd/lib/button';
+import Text from 'antd/lib/typography/Text';
 
 interface Props {
+    shortcut: string;
     colors: string[];
     onChange(color: string): void;
 }
 
 function ColorChanger(props: Props): JSX.Element {
-    const {
-        colors,
-        onChange,
-    } = props;
+    const { shortcut, colors, onChange } = props;
 
     const cols = 6;
     const rows = Math.ceil(colors.length / cols);
@@ -47,9 +46,12 @@ function ColorChanger(props: Props): JSX.Element {
     }
 
     return (
-        <>
+        <div>
+            <Text>
+                {`Press ${shortcut} to set a random color`}
+            </Text>
             {antdRows}
-        </>
+        </div>
     );
 }