React UI: Attribute annotation mode (#1255)
* Done main work * Fixed mount/unmount for canvas wrapper * Refactoring, added filters * Added missed file * Removed unnecessary useEffect * Removed extra code * Max 9 attributes, inputNumber -> Input in aam * Added blur * Renamed component * Fixed condition when validate number attribute * Some minor fixes * Fixed hotkeys config * Fixed canvas zoom * Improved behaviour of number & text * Fixed attributes switching order * Fix tags * Fixed intervalmain
Boris Sekachev
6 years ago
committed by
GitHub
parent
6a7bf6d267
commit
1bb582f7f0
@ -0,0 +1,92 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import Select, { SelectValue, LabeledValue } from 'antd/lib/select';
|
||||||
|
import Icon from 'antd/lib/icon';
|
||||||
|
|
||||||
|
import {
|
||||||
|
changeAnnotationsFilters as changeAnnotationsFiltersAction,
|
||||||
|
fetchAnnotationsAsync,
|
||||||
|
} from 'actions/annotation-actions';
|
||||||
|
import { CombinedState } from 'reducers/interfaces';
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
annotationsFilters: string[];
|
||||||
|
annotationsFiltersHistory: string[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
changeAnnotationsFilters(value: SelectValue): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const {
|
||||||
|
annotation: {
|
||||||
|
annotations: {
|
||||||
|
filters: annotationsFilters,
|
||||||
|
filtersHistory: annotationsFiltersHistory,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} = state;
|
||||||
|
|
||||||
|
return {
|
||||||
|
annotationsFilters,
|
||||||
|
annotationsFiltersHistory,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||||
|
return {
|
||||||
|
changeAnnotationsFilters(value: SelectValue) {
|
||||||
|
if (typeof (value) === 'string') {
|
||||||
|
dispatch(changeAnnotationsFiltersAction([value]));
|
||||||
|
dispatch(fetchAnnotationsAsync());
|
||||||
|
} else if (Array.isArray(value)
|
||||||
|
&& value.every((element: string | number | LabeledValue): boolean => (
|
||||||
|
typeof (element) === 'string'
|
||||||
|
))
|
||||||
|
) {
|
||||||
|
dispatch(changeAnnotationsFiltersAction(value as string[]));
|
||||||
|
dispatch(fetchAnnotationsAsync());
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Element {
|
||||||
|
const {
|
||||||
|
annotationsFilters,
|
||||||
|
annotationsFiltersHistory,
|
||||||
|
changeAnnotationsFilters,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Select
|
||||||
|
className='cvat-annotations-filters-input'
|
||||||
|
allowClear
|
||||||
|
value={annotationsFilters}
|
||||||
|
mode='tags'
|
||||||
|
style={{ width: '100%' }}
|
||||||
|
placeholder={(
|
||||||
|
<>
|
||||||
|
<Icon type='filter' />
|
||||||
|
<span style={{ marginLeft: 5 }}>Annotations filter</span>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
onChange={changeAnnotationsFilters}
|
||||||
|
>
|
||||||
|
{annotationsFiltersHistory.map((element: string): JSX.Element => (
|
||||||
|
<Select.Option key={element} value={element}>{element}</Select.Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps,
|
||||||
|
)(AnnotationsFiltersInput);
|
||||||
@ -0,0 +1,300 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
|
||||||
|
import { connect } from 'react-redux';
|
||||||
|
import Layout, { SiderProps } from 'antd/lib/layout';
|
||||||
|
import { SelectValue } from 'antd/lib/select';
|
||||||
|
import { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||||
|
import { Row, Col } from 'antd/lib/grid';
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
|
||||||
|
import {
|
||||||
|
activateObject as activateObjectAction,
|
||||||
|
updateAnnotationsAsync,
|
||||||
|
} from 'actions/annotation-actions';
|
||||||
|
import { CombinedState } from 'reducers/interfaces';
|
||||||
|
import AnnotationsFiltersInput from 'components/annotation-page/annotations-filters-input';
|
||||||
|
import ObjectSwitcher from './object-switcher';
|
||||||
|
import AttributeSwitcher from './attribute-switcher';
|
||||||
|
import ObjectBasicsEditor from './object-basics-edtior';
|
||||||
|
import AttributeEditor from './attribute-editor';
|
||||||
|
|
||||||
|
|
||||||
|
interface StateToProps {
|
||||||
|
activatedStateID: number | null;
|
||||||
|
activatedAttributeID: number | null;
|
||||||
|
states: any[];
|
||||||
|
labels: any[];
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DispatchToProps {
|
||||||
|
activateObject(clientID: number | null, attrID: number | null): void;
|
||||||
|
updateAnnotations(statesToUpdate: any[]): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LabelAttrMap {
|
||||||
|
[index: number]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapStateToProps(state: CombinedState): StateToProps {
|
||||||
|
const {
|
||||||
|
annotation: {
|
||||||
|
annotations: {
|
||||||
|
activatedStateID,
|
||||||
|
activatedAttributeID,
|
||||||
|
states,
|
||||||
|
},
|
||||||
|
job: {
|
||||||
|
labels,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
} = state;
|
||||||
|
|
||||||
|
return {
|
||||||
|
labels,
|
||||||
|
activatedStateID,
|
||||||
|
activatedAttributeID,
|
||||||
|
states,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function mapDispatchToProps(dispatch: any): DispatchToProps {
|
||||||
|
return {
|
||||||
|
activateObject(clientID: number, attrID: number): void {
|
||||||
|
dispatch(activateObjectAction(clientID, attrID));
|
||||||
|
},
|
||||||
|
updateAnnotations(states): void {
|
||||||
|
dispatch(updateAnnotationsAsync(states));
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Element {
|
||||||
|
const {
|
||||||
|
labels,
|
||||||
|
states,
|
||||||
|
activatedStateID,
|
||||||
|
activatedAttributeID,
|
||||||
|
updateAnnotations,
|
||||||
|
activateObject,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const [labelAttrMap, setLabelAttrMap] = useState(
|
||||||
|
labels.reduce((acc, label): LabelAttrMap => {
|
||||||
|
acc[label.id] = label.attributes.length ? label.attributes[0] : null;
|
||||||
|
return acc;
|
||||||
|
}, {}),
|
||||||
|
);
|
||||||
|
|
||||||
|
const [activeObjectState] = activatedStateID === null
|
||||||
|
? [null] : states.filter((objectState: any): boolean => (
|
||||||
|
objectState.clientID === activatedStateID
|
||||||
|
));
|
||||||
|
const activeAttribute = activeObjectState
|
||||||
|
? labelAttrMap[activeObjectState.label.id]
|
||||||
|
: null;
|
||||||
|
|
||||||
|
if (activeObjectState) {
|
||||||
|
const attribute = labelAttrMap[activeObjectState.label.id];
|
||||||
|
if (attribute && attribute.id !== activatedAttributeID) {
|
||||||
|
activateObject(activatedStateID, attribute ? attribute.id : null);
|
||||||
|
}
|
||||||
|
} else if (states.length) {
|
||||||
|
const attribute = labelAttrMap[states[0].label.id];
|
||||||
|
activateObject(states[0].clientID, attribute ? attribute.id : null);
|
||||||
|
}
|
||||||
|
|
||||||
|
const nextObject = (step: number): void => {
|
||||||
|
if (states.length) {
|
||||||
|
const index = states.indexOf(activeObjectState);
|
||||||
|
let nextIndex = index + step;
|
||||||
|
if (nextIndex > states.length - 1) {
|
||||||
|
nextIndex = 0;
|
||||||
|
} else if (nextIndex < 0) {
|
||||||
|
nextIndex = states.length - 1;
|
||||||
|
}
|
||||||
|
if (nextIndex !== index) {
|
||||||
|
const attribute = labelAttrMap[states[nextIndex].label.id];
|
||||||
|
activateObject(states[nextIndex].clientID, attribute ? attribute.id : null);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const nextAttribute = (step: number): void => {
|
||||||
|
if (activeObjectState) {
|
||||||
|
const { label } = activeObjectState;
|
||||||
|
const { attributes } = label;
|
||||||
|
if (attributes.length) {
|
||||||
|
const index = attributes.indexOf(activeAttribute);
|
||||||
|
let nextIndex = index + step;
|
||||||
|
if (nextIndex > attributes.length - 1) {
|
||||||
|
nextIndex = 0;
|
||||||
|
} else if (nextIndex < 0) {
|
||||||
|
nextIndex = attributes.length - 1;
|
||||||
|
}
|
||||||
|
if (index !== nextIndex) {
|
||||||
|
const updatedLabelAttrMap = { ...labelAttrMap };
|
||||||
|
updatedLabelAttrMap[label.id] = attributes[nextIndex];
|
||||||
|
setLabelAttrMap(updatedLabelAttrMap);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (document.activeElement instanceof HTMLElement) {
|
||||||
|
document.activeElement.blur();
|
||||||
|
}
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
const siderProps: SiderProps = {
|
||||||
|
className: 'attribute-annotation-sidebar',
|
||||||
|
theme: 'light',
|
||||||
|
width: 300,
|
||||||
|
collapsedWidth: 0,
|
||||||
|
reverseArrow: true,
|
||||||
|
collapsible: true,
|
||||||
|
trigger: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
const keyMap = {
|
||||||
|
NEXT_ATTRIBUTE: {
|
||||||
|
name: 'Next attribute',
|
||||||
|
description: 'Go to the next attribute',
|
||||||
|
sequence: 'ArrowDown',
|
||||||
|
action: 'keydown',
|
||||||
|
},
|
||||||
|
PREVIOUS_ATTRIBUTE: {
|
||||||
|
name: 'Previous attribute',
|
||||||
|
description: 'Go to the previous attribute',
|
||||||
|
sequence: 'ArrowUp',
|
||||||
|
action: 'keydown',
|
||||||
|
},
|
||||||
|
NEXT_OBJECT: {
|
||||||
|
name: 'Next object',
|
||||||
|
description: 'Go to the next object',
|
||||||
|
sequence: 'Tab',
|
||||||
|
action: 'keydown',
|
||||||
|
},
|
||||||
|
PREVIOUS_OBJECT: {
|
||||||
|
name: 'Previous object',
|
||||||
|
description: 'Go to the previous object',
|
||||||
|
sequence: 'Shift+Tab',
|
||||||
|
action: 'keydown',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const handlers = {
|
||||||
|
NEXT_ATTRIBUTE: (event: KeyboardEvent | undefined) => {
|
||||||
|
if (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
nextAttribute(1);
|
||||||
|
},
|
||||||
|
PREVIOUS_ATTRIBUTE: (event: KeyboardEvent | undefined) => {
|
||||||
|
if (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
nextAttribute(-1);
|
||||||
|
},
|
||||||
|
NEXT_OBJECT: (event: KeyboardEvent | undefined) => {
|
||||||
|
if (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
nextObject(1);
|
||||||
|
},
|
||||||
|
PREVIOUS_OBJECT: (event: KeyboardEvent | undefined) => {
|
||||||
|
if (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
nextObject(-1);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
if (activeObjectState) {
|
||||||
|
return (
|
||||||
|
<Layout.Sider {...siderProps}>
|
||||||
|
<GlobalHotKeys keyMap={keyMap as any as KeyMap} handlers={handlers} allowChanges />
|
||||||
|
<Row>
|
||||||
|
<Col>
|
||||||
|
<AnnotationsFiltersInput />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
<ObjectSwitcher
|
||||||
|
currentLabel={activeObjectState.label.name}
|
||||||
|
clientID={activeObjectState.clientID}
|
||||||
|
occluded={activeObjectState.occluded}
|
||||||
|
objectsCount={states.length}
|
||||||
|
currentIndex={states.indexOf(activeObjectState)}
|
||||||
|
nextObject={nextObject}
|
||||||
|
/>
|
||||||
|
<ObjectBasicsEditor
|
||||||
|
currentLabel={activeObjectState.label.name}
|
||||||
|
labels={labels}
|
||||||
|
occluded={activeObjectState.occluded}
|
||||||
|
changeLabel={(value: SelectValue): void => {
|
||||||
|
const labelName = value as string;
|
||||||
|
const [newLabel] = labels
|
||||||
|
.filter((_label): boolean => _label.name === labelName);
|
||||||
|
activeObjectState.label = newLabel;
|
||||||
|
updateAnnotations([activeObjectState]);
|
||||||
|
}}
|
||||||
|
setOccluded={(event: CheckboxChangeEvent): void => {
|
||||||
|
activeObjectState.occluded = event.target.checked;
|
||||||
|
updateAnnotations([activeObjectState]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
{
|
||||||
|
activeAttribute
|
||||||
|
? (
|
||||||
|
<>
|
||||||
|
<AttributeSwitcher
|
||||||
|
currentAttribute={activeAttribute.name}
|
||||||
|
currentIndex={activeObjectState.label.attributes
|
||||||
|
.indexOf(activeAttribute)}
|
||||||
|
attributesCount={activeObjectState.label.attributes.length}
|
||||||
|
nextAttribute={nextAttribute}
|
||||||
|
/>
|
||||||
|
<AttributeEditor
|
||||||
|
attribute={activeAttribute}
|
||||||
|
currentValue={activeObjectState.attributes[activeAttribute.id]}
|
||||||
|
onChange={(value: string) => {
|
||||||
|
const { attributes } = activeObjectState;
|
||||||
|
attributes[activeAttribute.id] = value;
|
||||||
|
activeObjectState.attributes = attributes;
|
||||||
|
updateAnnotations([activeObjectState]);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<div className='attribute-annotations-sidebar-not-found-wrapper'>
|
||||||
|
<Text strong>No attributes found</Text>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
</Layout.Sider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Layout.Sider {...siderProps}>
|
||||||
|
<div className='attribute-annotations-sidebar-not-found-wrapper'>
|
||||||
|
<Text strong>No objects found</Text>
|
||||||
|
</div>
|
||||||
|
</Layout.Sider>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export default connect(
|
||||||
|
mapStateToProps,
|
||||||
|
mapDispatchToProps,
|
||||||
|
)(AttributeAnnotationSidebar);
|
||||||
@ -0,0 +1,281 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||||
|
import Select, { SelectValue } from 'antd/lib/select';
|
||||||
|
import Radio, { RadioChangeEvent } from 'antd/lib/radio';
|
||||||
|
import Input from 'antd/lib/input';
|
||||||
|
import InputNumber from 'antd/lib/input-number';
|
||||||
|
|
||||||
|
interface InputElementParameters {
|
||||||
|
attrID: number;
|
||||||
|
inputType: string;
|
||||||
|
values: string[];
|
||||||
|
currentValue: string;
|
||||||
|
onChange(value: string): void;
|
||||||
|
ref: React.RefObject<Input | InputNumber>;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderInputElement(parameters: InputElementParameters): JSX.Element {
|
||||||
|
const {
|
||||||
|
inputType,
|
||||||
|
attrID,
|
||||||
|
values,
|
||||||
|
currentValue,
|
||||||
|
onChange,
|
||||||
|
ref,
|
||||||
|
} = parameters;
|
||||||
|
|
||||||
|
const renderCheckbox = (): JSX.Element => (
|
||||||
|
<>
|
||||||
|
<Text strong>Checkbox: </Text>
|
||||||
|
<div className='attribute-annotation-sidebar-attr-elem-wrapper'>
|
||||||
|
<Checkbox
|
||||||
|
onChange={(event: CheckboxChangeEvent): void => (
|
||||||
|
onChange(event.target.checked ? 'true' : 'false')
|
||||||
|
)}
|
||||||
|
checked={currentValue === 'true'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderSelect = (): JSX.Element => (
|
||||||
|
<>
|
||||||
|
<Text strong>Values: </Text>
|
||||||
|
<div className='attribute-annotation-sidebar-attr-elem-wrapper'>
|
||||||
|
<Select
|
||||||
|
value={currentValue}
|
||||||
|
style={{ width: '80%' }}
|
||||||
|
onChange={(value: SelectValue) => (
|
||||||
|
onChange(value as string)
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{values.map((value: string): JSX.Element => (
|
||||||
|
<Select.Option key={value} value={value}>{value}</Select.Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
const renderRadio = (): JSX.Element => (
|
||||||
|
<>
|
||||||
|
<Text strong>Values: </Text>
|
||||||
|
<div className='attribute-annotation-sidebar-attr-elem-wrapper'>
|
||||||
|
<Radio.Group
|
||||||
|
value={currentValue}
|
||||||
|
onChange={(event: RadioChangeEvent) => (
|
||||||
|
onChange(event.target.value)
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
{values.map((value: string): JSX.Element => (
|
||||||
|
<Radio style={{ display: 'block' }} key={value} value={value}>{value}</Radio>
|
||||||
|
))}
|
||||||
|
</Radio.Group>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
const handleKeydown = (event: React.KeyboardEvent<HTMLInputElement>): void => {
|
||||||
|
if (['ArrowDown', 'ArrowUp', 'ArrowLeft',
|
||||||
|
'ArrowRight', 'Tab', 'Shift', 'Control']
|
||||||
|
.includes(event.key)
|
||||||
|
) {
|
||||||
|
event.preventDefault();
|
||||||
|
const copyEvent = new KeyboardEvent('keydown', event);
|
||||||
|
window.document.dispatchEvent(copyEvent);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderText = (): JSX.Element => (
|
||||||
|
<>
|
||||||
|
{inputType === 'number' ? <Text strong>Number: </Text> : <Text strong>Text: </Text>}
|
||||||
|
<div className='attribute-annotation-sidebar-attr-elem-wrapper'>
|
||||||
|
<Input
|
||||||
|
autoFocus
|
||||||
|
key={attrID}
|
||||||
|
defaultValue={currentValue}
|
||||||
|
onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
|
||||||
|
const { value } = event.target;
|
||||||
|
if (inputType === 'number') {
|
||||||
|
if (value !== '') {
|
||||||
|
const numberValue = +value;
|
||||||
|
if (!Number.isNaN(numberValue)) {
|
||||||
|
onChange(`${numberValue}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
onChange(value);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onKeyDown={handleKeydown}
|
||||||
|
ref={ref as React.RefObject<Input>}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
|
||||||
|
let element = null;
|
||||||
|
if (inputType === 'checkbox') {
|
||||||
|
element = renderCheckbox();
|
||||||
|
} else if (inputType === 'select') {
|
||||||
|
element = renderSelect();
|
||||||
|
} else if (inputType === 'radio') {
|
||||||
|
element = renderRadio();
|
||||||
|
} else {
|
||||||
|
element = renderText();
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='attribute-annotation-sidebar-attr-editor'>
|
||||||
|
{element}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ListParameters {
|
||||||
|
inputType: string;
|
||||||
|
values: string[];
|
||||||
|
onChange(value: string): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderList(parameters: ListParameters): JSX.Element | null {
|
||||||
|
const { inputType, values, onChange } = parameters;
|
||||||
|
|
||||||
|
if (inputType === 'checkbox') {
|
||||||
|
const sortedValues = ['true', 'false'];
|
||||||
|
if (values[0].toLowerCase() !== 'true') {
|
||||||
|
sortedValues.reverse();
|
||||||
|
}
|
||||||
|
|
||||||
|
const keyMap: KeyMap = {};
|
||||||
|
const handlers: {
|
||||||
|
[key: string]: (keyEvent?: KeyboardEvent) => void;
|
||||||
|
} = {};
|
||||||
|
|
||||||
|
sortedValues.forEach((value: string, index: number): void => {
|
||||||
|
const key = `SET_${index}_VALUE`;
|
||||||
|
keyMap[key] = {
|
||||||
|
name: `Set value "${value}"`,
|
||||||
|
description: `Change current value for the attribute to "${value}"`,
|
||||||
|
sequence: `${index}`,
|
||||||
|
action: 'keydown',
|
||||||
|
};
|
||||||
|
|
||||||
|
handlers[key] = (event: KeyboardEvent | undefined) => {
|
||||||
|
if (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange(value);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='attribute-annotation-sidebar-attr-list-wrapper'>
|
||||||
|
<GlobalHotKeys keyMap={keyMap as KeyMap} handlers={handlers} allowChanges />
|
||||||
|
<div>
|
||||||
|
<Text strong>0:</Text>
|
||||||
|
<Text>{` ${sortedValues[0]}`}</Text>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>1:</Text>
|
||||||
|
<Text>{` ${sortedValues[1]}`}</Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (inputType === 'radio' || inputType === 'select') {
|
||||||
|
const keyMap: KeyMap = {};
|
||||||
|
const handlers: {
|
||||||
|
[key: string]: (keyEvent?: KeyboardEvent) => void;
|
||||||
|
} = {};
|
||||||
|
|
||||||
|
values.slice(0, 10).forEach((value: string, index: number): void => {
|
||||||
|
const key = `SET_${index}_VALUE`;
|
||||||
|
keyMap[key] = {
|
||||||
|
name: `Set value "${value}"`,
|
||||||
|
description: `Change current value for the attribute to "${value}"`,
|
||||||
|
sequence: `${index}`,
|
||||||
|
action: 'keydown',
|
||||||
|
};
|
||||||
|
|
||||||
|
handlers[key] = (event: KeyboardEvent | undefined) => {
|
||||||
|
if (event) {
|
||||||
|
event.preventDefault();
|
||||||
|
}
|
||||||
|
|
||||||
|
onChange(value);
|
||||||
|
};
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='attribute-annotation-sidebar-attr-list-wrapper'>
|
||||||
|
<GlobalHotKeys keyMap={keyMap as KeyMap} handlers={handlers} allowChanges />
|
||||||
|
{values.map((value: string, index: number): JSX.Element => (
|
||||||
|
<div key={value}>
|
||||||
|
<Text strong>{`${index}:`}</Text>
|
||||||
|
<Text>{` ${value}`}</Text>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (inputType === 'number') {
|
||||||
|
return (
|
||||||
|
<div className='attribute-annotation-sidebar-attr-list-wrapper'>
|
||||||
|
<div>
|
||||||
|
<Text strong>From:</Text>
|
||||||
|
<Text>{` ${values[0]}`}</Text>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>To:</Text>
|
||||||
|
<Text>{` ${values[1]}`}</Text>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<Text strong>Step:</Text>
|
||||||
|
<Text>{` ${values[2]}`}</Text>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
attribute: any;
|
||||||
|
currentValue: string;
|
||||||
|
onChange(value: string): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function AttributeEditor(props: Props): JSX.Element {
|
||||||
|
const { attribute, currentValue, onChange } = props;
|
||||||
|
const { inputType, values, id: attrID } = attribute;
|
||||||
|
const ref = inputType === 'number' ? React.createRef<InputNumber>()
|
||||||
|
: React.createRef<Input>();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{renderList({ values, inputType, onChange })}
|
||||||
|
<hr />
|
||||||
|
{renderInputElement({
|
||||||
|
attrID,
|
||||||
|
ref,
|
||||||
|
inputType,
|
||||||
|
currentValue,
|
||||||
|
values,
|
||||||
|
onChange,
|
||||||
|
})}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(AttributeEditor);
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import Icon from 'antd/lib/icon';
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
import Tooltip from 'antd/lib/tooltip';
|
||||||
|
import Button from 'antd/lib/button';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
currentAttribute: string;
|
||||||
|
currentIndex: number;
|
||||||
|
attributesCount: number;
|
||||||
|
nextAttribute(step: number): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function AttributeSwitcher(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
currentAttribute,
|
||||||
|
currentIndex,
|
||||||
|
attributesCount,
|
||||||
|
nextAttribute,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
|
||||||
|
return (
|
||||||
|
<div className='attribute-annotation-sidebar-switcher'>
|
||||||
|
<Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
|
||||||
|
<Icon type='left' />
|
||||||
|
</Button>
|
||||||
|
<Tooltip title={title}>
|
||||||
|
<Text className='cvat-text'>{currentAttribute}</Text>
|
||||||
|
<Text strong>{` [${currentIndex + 1}/${attributesCount}]`}</Text>
|
||||||
|
</Tooltip>
|
||||||
|
<Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
|
||||||
|
<Icon type='right' />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(AttributeSwitcher);
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import Select, { SelectValue } from 'antd/lib/select';
|
||||||
|
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
currentLabel: string;
|
||||||
|
labels: any[];
|
||||||
|
occluded: boolean;
|
||||||
|
setOccluded(event: CheckboxChangeEvent): void;
|
||||||
|
changeLabel(value: SelectValue): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ObjectBasicsEditor(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
currentLabel,
|
||||||
|
occluded,
|
||||||
|
labels,
|
||||||
|
setOccluded,
|
||||||
|
changeLabel,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className='attribute-annotation-sidebar-basics-editor'>
|
||||||
|
<Select value={currentLabel} onChange={changeLabel} style={{ width: '50%' }}>
|
||||||
|
{labels.map((label: any): JSX.Element => (
|
||||||
|
<Select.Option
|
||||||
|
value={label.name}
|
||||||
|
key={label.name}
|
||||||
|
>
|
||||||
|
{label.name}
|
||||||
|
</Select.Option>
|
||||||
|
))}
|
||||||
|
</Select>
|
||||||
|
<Checkbox checked={occluded} onChange={setOccluded}>Occluded</Checkbox>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(ObjectBasicsEditor);
|
||||||
@ -0,0 +1,48 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import Icon from 'antd/lib/icon';
|
||||||
|
import Text from 'antd/lib/typography/Text';
|
||||||
|
import Tooltip from 'antd/lib/tooltip';
|
||||||
|
import Button from 'antd/lib/button';
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
currentLabel: string;
|
||||||
|
clientID: number;
|
||||||
|
occluded: boolean;
|
||||||
|
objectsCount: number;
|
||||||
|
currentIndex: number;
|
||||||
|
nextObject(step: number): void;
|
||||||
|
}
|
||||||
|
|
||||||
|
function ObjectSwitcher(props: Props): JSX.Element {
|
||||||
|
const {
|
||||||
|
currentLabel,
|
||||||
|
clientID,
|
||||||
|
objectsCount,
|
||||||
|
currentIndex,
|
||||||
|
nextObject,
|
||||||
|
} = props;
|
||||||
|
|
||||||
|
|
||||||
|
const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
|
||||||
|
return (
|
||||||
|
<div className='attribute-annotation-sidebar-switcher'>
|
||||||
|
<Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
|
||||||
|
<Icon type='left' />
|
||||||
|
</Button>
|
||||||
|
<Tooltip title={title}>
|
||||||
|
<Text className='cvat-text'>{currentLabel}</Text>
|
||||||
|
<Text className='cvat-text'>{` ${clientID} `}</Text>
|
||||||
|
<Text strong>{`[${currentIndex + 1}/${objectsCount}]`}</Text>
|
||||||
|
</Tooltip>
|
||||||
|
<Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
|
||||||
|
<Icon type='right' />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export default React.memo(ObjectSwitcher);
|
||||||
@ -0,0 +1,19 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
import './styles.scss';
|
||||||
|
import React from 'react';
|
||||||
|
import Layout from 'antd/lib/layout';
|
||||||
|
|
||||||
|
import CanvasWrapperContainer from 'containers/annotation-page/standard-workspace/canvas-wrapper';
|
||||||
|
import AttributeAnnotationSidebar from './attribute-annotation-sidebar/attribute-annotation-sidebar';
|
||||||
|
|
||||||
|
export default function AttributeAnnotationWorkspace(): JSX.Element {
|
||||||
|
return (
|
||||||
|
<Layout hasSider className='attribute-annotation-workspace'>
|
||||||
|
<CanvasWrapperContainer />
|
||||||
|
<AttributeAnnotationSidebar />
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
// Copyright (C) 2020 Intel Corporation
|
||||||
|
//
|
||||||
|
// SPDX-License-Identifier: MIT
|
||||||
|
|
||||||
|
@import 'base.scss';
|
||||||
|
|
||||||
|
.attribute-annotation-workspace.ant-layout {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attribute-annotation-sidebar {
|
||||||
|
background: $background-color-2;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attribute-annotation-sidebar-switcher {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 18px;
|
||||||
|
margin-top: 10px;
|
||||||
|
|
||||||
|
> span {
|
||||||
|
max-width: 60%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
> button > i {
|
||||||
|
color: $objects-bar-icons-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.attribute-annotation-sidebar-basics-editor {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
font-size: 18px;
|
||||||
|
margin: 10px 0px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attribute-annotations-sidebar-not-found-wrapper {
|
||||||
|
margin-top: 20px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attribute-annotation-sidebar-attr-list-wrapper {
|
||||||
|
margin: 10px 0px 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.attribute-annotation-sidebar-attr-elem-wrapper {
|
||||||
|
display: inline-block;
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attribute-annotation-sidebar-number-list {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.attribute-annotation-sidebar-attr-editor {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue