-
Notifications
You must be signed in to change notification settings - Fork 3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
CVAT UI: tag annotation workspace (#1570)
- Loading branch information
1 parent
db29291
commit 27dc52a
Showing
11 changed files
with
522 additions
and
19 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 47 additions & 0 deletions
47
cvat-ui/src/components/annotation-page/tag-annotation-workspace/styles.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| // Copyright (C) 2020 Intel Corporation | ||
| // | ||
| // SPDX-License-Identifier: MIT | ||
|
|
||
| @import 'base.scss'; | ||
|
|
||
| .cvat-tag-annotation-workspace.ant-layout { | ||
| height: 100%; | ||
| } | ||
|
|
||
| .cvat-tag-annotation-sidebar { | ||
| background: $background-color-2; | ||
| padding: 5px; | ||
|
|
||
| > div > .ant-row-flex > .ant-col > .ant-tag { | ||
| margin: 4px; | ||
| } | ||
| } | ||
|
|
||
| .cvat-tag-annotation-sidebar-label-select { | ||
| padding-top: 40px; | ||
| padding-bottom: 15px; | ||
|
|
||
| > .ant-col > .ant-select { | ||
| padding-left: 5px; | ||
| width: 230px; | ||
| } | ||
| } | ||
|
|
||
| .cvat-tag-annotation-sidebar-shortcut-help { | ||
| padding-top: 15px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .cvat-tag-annotation-sidebar-buttons, | ||
| .cvat-tag-anntation-sidebar-checkbox-skip-frame { | ||
| padding-bottom: 15px; | ||
| } | ||
|
|
||
| .cvat-tag-annotation-label-selects { | ||
| padding-top: 10px; | ||
|
|
||
| .ant-select { | ||
| width: 230px; | ||
| padding: 5px 10px; | ||
| } | ||
| } |
125 changes: 125 additions & 0 deletions
125
...ents/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/shortcuts-select.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,125 @@ | ||
| // Copyright (C) 2020 Intel Corporation | ||
| // | ||
| // SPDX-License-Identifier: MIT | ||
|
|
||
| import React, { useState, useEffect, Fragment } from 'react'; | ||
| import { useSelector } from 'react-redux'; | ||
| import { GlobalHotKeys, KeyMap } from 'react-hotkeys'; | ||
| import { Row, Col } from 'antd/lib/grid'; | ||
| import Text from 'antd/lib/typography/Text'; | ||
| import Select from 'antd/lib/select'; | ||
|
|
||
| import { CombinedState } from 'reducers/interfaces'; | ||
| import { shift } from 'utils/math'; | ||
|
|
||
| interface ShortcutLabelMap { | ||
| [index: number]: any; | ||
| } | ||
|
|
||
| type Props = { | ||
| onAddTag(labelID: number): void; | ||
| }; | ||
|
|
||
| const defaultShortcutLabelMap = { | ||
| 1: '', | ||
| 2: '', | ||
| 3: '', | ||
| 4: '', | ||
| 5: '', | ||
| 6: '', | ||
| 7: '', | ||
| 8: '', | ||
| 9: '', | ||
| 0: '', | ||
| } as ShortcutLabelMap; | ||
|
|
||
| const ShortcutsSelect = (props: Props): JSX.Element => { | ||
| const { onAddTag } = props; | ||
| const { labels } = useSelector((state: CombinedState) => state.annotation.job); | ||
| const [shortcutLabelMap, setShortcutLabelMap] = useState(defaultShortcutLabelMap); | ||
|
|
||
| const keyMap: KeyMap = {}; | ||
| const handlers: { | ||
| [key: string]: (keyEvent?: KeyboardEvent) => void; | ||
| } = {}; | ||
|
|
||
| useEffect(() => { | ||
| const newShortcutLabelMap = { ...shortcutLabelMap }; | ||
| (labels as any[]).slice(0, 10).forEach((label, index) => { | ||
| newShortcutLabelMap[(index + 1) % 10] = label.id; | ||
| }); | ||
| setShortcutLabelMap(newShortcutLabelMap); | ||
| }, []); | ||
|
|
||
|
|
||
| Object.keys(shortcutLabelMap).map((id) => Number.parseInt(id, 10)) | ||
| .filter((id) => shortcutLabelMap[id]).forEach((id: number): void => { | ||
| const [label] = labels.filter((_label) => _label.id === shortcutLabelMap[id]); | ||
| const key = `SETUP_${id}_TAG`; | ||
| keyMap[key] = { | ||
| name: `Setup ${label.name} tag`, | ||
| description: `Setup tag with "${label.name}" label`, | ||
| sequence: `${id}`, | ||
| action: 'keydown', | ||
| }; | ||
|
|
||
| handlers[key] = (event: KeyboardEvent | undefined) => { | ||
| if (event) { | ||
| event.preventDefault(); | ||
| } | ||
|
|
||
| onAddTag(label.id); | ||
| }; | ||
| }); | ||
|
|
||
| const onChangeShortcutLabel = (value: string, id: number): void => { | ||
| const newShortcutLabelMap = { ...shortcutLabelMap }; | ||
| newShortcutLabelMap[id] = value ? Number.parseInt(value, 10) : ''; | ||
| setShortcutLabelMap(newShortcutLabelMap); | ||
| }; | ||
|
|
||
| return ( | ||
| <div className='cvat-tag-annotation-label-selects'> | ||
| <GlobalHotKeys keyMap={keyMap as KeyMap} handlers={handlers} allowChanges /> | ||
| <Row> | ||
| <Col> | ||
| <Text strong>Shortcuts for labels:</Text> | ||
| </Col> | ||
| </Row> | ||
| {shift(Object.keys(shortcutLabelMap), 1).slice(0, Math.min(labels.length, 10)).map((id) => ( | ||
| <Row key={id}> | ||
| <Col> | ||
| <Text strong>{`Key ${id}:`}</Text> | ||
| <Select | ||
| value={`${shortcutLabelMap[Number.parseInt(id, 10)]}`} | ||
| onChange={(value: string) => { | ||
| onChangeShortcutLabel(value, Number.parseInt(id, 10)); | ||
| }} | ||
| size='default' | ||
| style={{ width: 200 }} | ||
| className='cvat-tag-annotation-label-select' | ||
| > | ||
| <Select.Option value=''> | ||
| <Text type='secondary'> | ||
| None | ||
| </Text> | ||
| </Select.Option> | ||
| { | ||
| (labels as any[]).map((label: any) => ( | ||
| <Select.Option | ||
| key={label.id} | ||
| value={`${label.id}`} | ||
| > | ||
| {label.name} | ||
| </Select.Option> | ||
| )) | ||
| } | ||
| </Select> | ||
| </Col> | ||
| </Row> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ShortcutsSelect; |
Oops, something went wrong.