From 5fbd1b992398d11f6fd4eb49c44155f7044652e4 Mon Sep 17 00:00:00 2001 From: Boris Sekachev <40690378+bsekachev@users.noreply.github.com> Date: Mon, 15 Jun 2020 13:14:26 +0300 Subject: [PATCH] [React] Added shortcuts & ability to search a label (#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 --- CHANGELOG.md | 13 ++- CONTRIBUTING.md | 96 ++++++++++--------- cvat-ui/package-lock.json | 2 +- cvat-ui/package.json | 2 +- cvat-ui/src/actions/annotation-actions.ts | 16 ++-- .../controls-side-bar/controls-side-bar.tsx | 11 +++ .../controls-side-bar/draw-shape-popover.tsx | 11 ++- .../controls-side-bar/split-control.tsx | 5 +- .../objects-side-bar/color-changer.tsx | 14 +-- .../objects-side-bar/label-item.tsx | 3 + .../objects-side-bar/object-item.tsx | 24 ++++- .../objects-side-bar/label-item.tsx | 17 ++-- .../objects-side-bar/object-item.tsx | 42 ++++---- .../objects-side-bar/objects-list.tsx | 53 +++++++++- cvat-ui/src/reducers/shortcuts-reducer.ts | 12 +++ 15 files changed, 216 insertions(+), 105 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b97da483dcf6..69a196620ce8 100644 --- 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 () -- Added default label color table for mask export (https://github.com/opencv/cvat/pull/1549) +- Added default label color table for mask export () - Added environment variables for Redis and Postgres hosts for Kubernetes deployment support () -- Added visual identification for unavailable formats (https://github.com/opencv/cvat/pull/1567) +- Added visual identification for unavailable formats () +- Shortcut to change color of an activated shape in new UI (Enter) () +- Shortcut to switch split mode () +- Built-in search for labels when create an object or change a label () ### Changed - Removed information about e-mail from the basic user information () @@ -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 () +- Fixed interpreter crash when trying to import `tensorflow` with no AVX instructions available () - Kibana wrong working time calculation with new annotation UI use () - Wrong rexex for account name validation () - Wrong description on register view for the username field () - Wrong resolution for resizing a shape () ### Security -- SQL injection in Django `CVE-2020-9402` (https://github.com/opencv/cvat/pull/1657) +- SQL injection in Django `CVE-2020-9402` () ## [1.0.0] - 2020-05-29 ### Added diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index f4ce0d4c09fb..5474bb1eeb3b 100644 --- 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,13 +187,13 @@ 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. - + ## Bug reports A bug is a _demonstrable problem_ that is caused by the code in the repository. @@ -198,13 +201,13 @@ Good bug reports are extremely helpful - thank you! Guidelines for bug reports: -1. **Use the GitHub issue search** — check if the issue has already been +1. **Use the GitHub issue search** — check if the issue has already been reported. -2. **Check if the issue has been fixed** — try to reproduce it using the +1. **Check if the issue has been fixed** — try to reproduce it using the latest `develop` branch in the repository. -3. **Isolate the problem** — ideally create a reduced test case. +1. **Isolate the problem** — 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// - # Navigate to the newly cloned directory - cd - # Assign the original repo to a remote called "upstream" - git remote add upstream https://github.com// - ``` + ```bash + # Clone your fork of the repo into the current directory + git clone https://github.com// + # Navigate to the newly cloned directory + cd + # Assign the original repo to a remote called "upstream" + git remote add upstream https://github.com// + ``` -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 - git pull upstream - ``` + ```bash + git checkout + git pull upstream + ``` -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 - ``` + ```bash + git checkout -b + ``` -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 - ``` + ```bash + git pull [--rebase] upstream + ``` -6. Push your topic branch up to your fork: +1. Push your topic branch up to your fork: - ```bash - git push origin - ``` + ```bash + git push origin + ``` -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 index b5b3010193b6..d429a17f89d9 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.2.2", + "version": "1.3.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 5b94b7b13fc5..2a9f9705c084 100644 --- 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 index 18fa47c4e0e3..6f069ecf8c94 100644 --- a/cvat-ui/src/actions/annotation-actions.ts +++ b/cvat-ui/src/actions/annotation-actions.ts @@ -1367,19 +1367,23 @@ ThunkAction, {}, {}, AnyAction> { } export function changeLabelColorAsync( - sessionInstance: any, - frameNumber: number, label: any, color: string, ): ThunkAction, {}, {}, AnyAction> { return async (dispatch: ActionCreator): Promise => { 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/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx index 0d9dd5f54221..03a0d56f254d 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx +++ b/cvat-ui/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 { /> diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx index 1c61ed9fdd06..39b3230beb86 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx +++ b/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 { +