wangchunlin
/
cvat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #2509 from openvinotoolkit/bs/label_selector_refactoring

Browse Source 
Added dedicated component for label selection, added tooltip
main
Boris Sekachev 5 years ago committed by GitHub
parent a3026f480b 7febefe29e
commit 0c986a33bd
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
13 changed files with 167 additions and 151 deletions
Show Stats Download Patch File Download Diff File

1
CHANGELOG.md
Unescape Escape View File

@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Added basic projects implementation (<https://github.com/openvinotoolkit/cvat/pull/2255>) - Added basic projects implementation (<https://github.com/openvinotoolkit/cvat/pull/2255>)
- Added documentation on how to mount cloud starage(AWS S3 bucket, Azure container, Google Drive) as FUSE (<https://github.com/openvinotoolkit/cvat/pull/2377>) - Added documentation on how to mount cloud starage(AWS S3 bucket, Azure container, Google Drive) as FUSE (<https://github.com/openvinotoolkit/cvat/pull/2377>)
- Added ability to work with share files without copying inside (<https://github.com/openvinotoolkit/cvat/pull/2377>) - Added ability to work with share files without copying inside (<https://github.com/openvinotoolkit/cvat/pull/2377>)
- Tooltips in label selectors (<https://github.com/openvinotoolkit/cvat/pull/2509>)
### Changed ### Changed

2
cvat-ui/package-lock.json generated
Unescape Escape View File

@ -1,6 +1,6 @@
{ {
"name": "cvat-ui", "name": "cvat-ui",
"version": "1.11.2", "version": "1.11.3",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {

2
cvat-ui/package.json
Unescape Escape View File

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

29
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
Unescape Escape View File

@ -4,7 +4,6 @@
import React from 'react'; import React from 'react';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import Select, { OptionProps } from 'antd/lib/select';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import InputNumber from 'antd/lib/input-number'; import InputNumber from 'antd/lib/input-number';
import Radio, { RadioChangeEvent } from 'antd/lib/radio'; import Radio, { RadioChangeEvent } from 'antd/lib/radio';
@ -14,6 +13,7 @@ import Text from 'antd/lib/typography/Text';
import { RectDrawingMethod, CuboidDrawingMethod } from 'cvat-canvas-wrapper'; import { RectDrawingMethod, CuboidDrawingMethod } from 'cvat-canvas-wrapper';
import { ShapeType } from 'reducers/interfaces'; import { ShapeType } from 'reducers/interfaces';
import { clamp } from 'utils/math'; import { clamp } from 'utils/math';
import LabelSelector from 'components/label-selector/label-selector';
interface Props { interface Props {
shapeType: ShapeType; shapeType: ShapeType;
@ -22,7 +22,7 @@ interface Props {
rectDrawingMethod?: RectDrawingMethod; rectDrawingMethod?: RectDrawingMethod;
cuboidDrawingMethod?: CuboidDrawingMethod; cuboidDrawingMethod?: CuboidDrawingMethod;
numberOfPoints?: number; numberOfPoints?: number;
selectedLabeID: number; selectedLabelID: number;
repeatShapeShortcut: string; repeatShapeShortcut: string;
onChangeLabel(value: string): void; onChangeLabel(value: string): void;
onChangePoints(value: number | undefined): void; onChangePoints(value: number | undefined): void;
@ -37,7 +37,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
labels, labels,
shapeType, shapeType,
minimumPoints, minimumPoints,
selectedLabeID, selectedLabelID,
numberOfPoints, numberOfPoints,
rectDrawingMethod, rectDrawingMethod,
cuboidDrawingMethod, cuboidDrawingMethod,
@ -64,25 +64,12 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
</Row> </Row>
<Row type='flex' justify='center'> <Row type='flex' justify='center'>
<Col span={24}> <Col span={24}>
<Select <LabelSelector
showSearch style={{ width: '100%' }}
filterOption={(input: string, option: React.ReactElement<OptionProps>) => { labels={labels}
const { children } = option.props; value={selectedLabelID}
if (typeof children === 'string') {
return children.toLowerCase().includes(input.toLowerCase());
}
return false;
}}
value={`${selectedLabeID}`}
onChange={onChangeLabel} onChange={onChangeLabel}
> />
{labels.map((label: any) => (
<Select.Option key={label.id} value={`${label.id}`}>
{label.name}
</Select.Option>
))}
</Select>
</Col> </Col>
</Row> </Row>
{shapeType === ShapeType.RECTANGLE && ( {shapeType === ShapeType.RECTANGLE && (

23
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
Unescape Escape View File

@ -4,21 +4,23 @@
import React from 'react'; import React from 'react';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import Select from 'antd/lib/select';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip'; import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import LabelSelector from 'components/label-selector/label-selector';
interface Props { interface Props {
labels: any[]; labels: any[];
selectedLabeID: number; selectedLabelID: number;
repeatShapeShortcut: string; repeatShapeShortcut: string;
onChangeLabel(value: string): void; onChangeLabel(value: string): void;
onSetup(labelID: number): void; onSetup(labelID: number): void;
} }
function SetupTagPopover(props: Props): JSX.Element { function SetupTagPopover(props: Props): JSX.Element {
const { labels, selectedLabeID, repeatShapeShortcut, onChangeLabel, onSetup } = props; const {
labels, selectedLabelID, repeatShapeShortcut, onChangeLabel, onSetup,
} = props;
return ( return (
<div className='cvat-draw-shape-popover-content'> <div className='cvat-draw-shape-popover-content'>
@ -36,19 +38,18 @@ function SetupTagPopover(props: Props): JSX.Element {
</Row> </Row>
<Row type='flex' justify='center'> <Row type='flex' justify='center'>
<Col span={24}> <Col span={24}>
<Select value={`${selectedLabeID}`} onChange={onChangeLabel}> <LabelSelector
{labels.map((label: any) => ( style={{ width: '100%' }}
<Select.Option key={label.id} value={`${label.id}`}> labels={labels}
{label.name} value={selectedLabelID}
</Select.Option> onChange={onChangeLabel}
))} />
</Select>
</Col> </Col>
</Row> </Row>
<Row type='flex' justify='space-around'> <Row type='flex' justify='space-around'>
<Col span={24}> <Col span={24}>
<Tooltip title={`Press ${repeatShapeShortcut} to add a tag again`} mouseLeaveDelay={0}> <Tooltip title={`Press ${repeatShapeShortcut} to add a tag again`} mouseLeaveDelay={0}>
<Button onClick={() => onSetup(selectedLabeID)}>Tag</Button> <Button onClick={() => onSetup(selectedLabelID)}>Tag</Button>
</Tooltip> </Tooltip>
</Col> </Col>
</Row> </Row>

124
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx
Unescape Escape View File

@ -6,7 +6,7 @@ import React, { MutableRefObject } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Icon from 'antd/lib/icon'; import Icon from 'antd/lib/icon';
import Popover from 'antd/lib/popover'; import Popover from 'antd/lib/popover';
import Select, { OptionProps } from 'antd/lib/select'; import Select from 'antd/lib/select';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Modal from 'antd/lib/modal'; import Modal from 'antd/lib/modal';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
@ -14,12 +14,15 @@ import Tabs from 'antd/lib/tabs';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import notification from 'antd/lib/notification'; import notification from 'antd/lib/notification';
import Progress from 'antd/lib/progress'; import Progress from 'antd/lib/progress';
import InputNumber from 'antd/lib/input-number';
import { AIToolsIcon } from 'icons'; import { AIToolsIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import range from 'utils/range'; import range from 'utils/range';
import getCore from 'cvat-core-wrapper'; import getCore from 'cvat-core-wrapper';
import { CombinedState, ActiveControl, Model, ObjectType, ShapeType } from 'reducers/interfaces'; import {
CombinedState, ActiveControl, Model, ObjectType, ShapeType,
} from 'reducers/interfaces';
import { import {
interactWithCanvas, interactWithCanvas,
fetchAnnotationsAsync, fetchAnnotationsAsync,
@ -28,7 +31,7 @@ import {
} from 'actions/annotation-actions'; } from 'actions/annotation-actions';
import { InteractionResult } from 'cvat-canvas/src/typescript/canvas'; import { InteractionResult } from 'cvat-canvas/src/typescript/canvas';
import DetectorRunner from 'components/model-runner-modal/detector-runner'; import DetectorRunner from 'components/model-runner-modal/detector-runner';
import InputNumber from 'antd/lib/input-number'; import LabelSelector from 'components/label-selector/label-selector';
interface StateToProps { interface StateToProps {
canvasInstance: Canvas; canvasInstance: Canvas;
@ -178,7 +181,9 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
}; };
private cancelListener = async (): Promise<void> => { private cancelListener = async (): Promise<void> => {
const { isActivated, jobInstance, frame, fetchAnnotations } = this.props; const {
isActivated, jobInstance, frame, fetchAnnotations,
} = this.props;
const { interactiveStateID, fetching } = this.state; const { interactiveStateID, fetching } = this.state;
if (isActivated) { if (isActivated) {
@ -313,7 +318,9 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
}; };
private onTracking = async (e: Event): Promise<void> => { private onTracking = async (e: Event): Promise<void> => {
const { isActivated, jobInstance, frame, curZOrder, fetchAnnotations } = this.props; const {
isActivated, jobInstance, frame, curZOrder, fetchAnnotations,
} = this.props;
const { activeLabelID } = this.state; const { activeLabelID } = this.state;
const [label] = jobInstance.task.labels.filter((_label: any): boolean => _label.id === activeLabelID); const [label] = jobInstance.task.labels.filter((_label: any): boolean => _label.id === activeLabelID);
@ -457,28 +464,12 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
</Row> </Row>
<Row type='flex' justify='center'> <Row type='flex' justify='center'>
<Col span={24}> <Col span={24}>
<Select <LabelSelector
style={{ width: '100%' }} style={{ width: '100%' }}
showSearch labels={labels}
filterOption={(input: string, option: React.ReactElement<OptionProps>) => { value={activeLabelID}
const { children } = option.props; onChange={(value: any) => this.setState({ activeLabelID: value.id })}
if (typeof children === 'string') { />
return children.toLowerCase().includes(input.toLowerCase());
}
return false;
}}
value={`${activeLabelID}`}
onChange={(value: string) => {
this.setState({ activeLabelID: +value });
}}
>
{labels.map((label: any) => (
<Select.Option key={label.id} value={`${label.id}`}>
{label.name}
</Select.Option>
))}
</Select>
</Col> </Col>
</Row> </Row>
</> </>
@ -486,8 +477,12 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
} }
private renderTrackerBlock(): JSX.Element { private renderTrackerBlock(): JSX.Element {
const { trackers, canvasInstance, jobInstance, frame, onInteractionStart } = this.props; const {
const { activeTracker, activeLabelID, fetching, trackingFrames } = this.state; trackers, canvasInstance, jobInstance, frame, onInteractionStart,
} = this.props;
const {
activeTracker, activeLabelID, fetching, trackingFrames,
} = this.state;
if (!trackers.length) { if (!trackers.length) {
return ( return (
@ -516,9 +511,9 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
onChange={this.setActiveTracker} onChange={this.setActiveTracker}
> >
{trackers.map( {trackers.map(
(interactor: Model): JSX.Element => ( (tracker: Model): JSX.Element => (
<Select.Option title={interactor.description} key={interactor.id}> <Select.Option title={tracker.description} key={tracker.id}>
{interactor.name} {tracker.name}
</Select.Option> </Select.Option>
), ),
)} )}
@ -650,7 +645,9 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
} }
private renderDetectorBlock(): JSX.Element { private renderDetectorBlock(): JSX.Element {
const { jobInstance, detectors, curZOrder, frame, fetchAnnotations } = this.props; const {
jobInstance, detectors, curZOrder, frame, fetchAnnotations,
} = this.props;
if (!detectors.length) { if (!detectors.length) {
return ( return (
@ -682,18 +679,17 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
}); });
const states = result.map( const states = result.map(
(data: any): any => (data: any): any => new core.classes.ObjectState({
new core.classes.ObjectState({ shapeType: data.type,
shapeType: data.type, label: task.labels.filter((label: any): boolean => label.name === data.label)[0],
label: task.labels.filter((label: any): boolean => label.name === data.label)[0], points: data.points,
points: data.points, objectType: ObjectType.SHAPE,
objectType: ObjectType.SHAPE, frame,
frame, occluded: false,
occluded: false, source: 'auto',
source: 'auto', attributes: {},
attributes: {}, zOrder: curZOrder,
zOrder: curZOrder, }),
}),
); );
await jobInstance.annotations.put(states); await jobInstance.annotations.put(states);
@ -739,29 +735,31 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
} }
public render(): JSX.Element | null { public render(): JSX.Element | null {
const { interactors, detectors, trackers, isActivated, canvasInstance } = this.props; const {
interactors, detectors, trackers, isActivated, canvasInstance,
} = this.props;
const { fetching, trackingProgress } = this.state; const { fetching, trackingProgress } = this.state;
if (![...interactors, ...detectors, ...trackers].length) return null; if (![...interactors, ...detectors, ...trackers].length) return null;
const dynamcPopoverPros = isActivated const dynamcPopoverPros = isActivated ?
? { {
overlayStyle: { overlayStyle: {
display: 'none', display: 'none',
}, },
} } :
: {}; {};
const dynamicIconProps = isActivated const dynamicIconProps = isActivated ?
? { {
className: 'cvat-active-canvas-control cvat-tools-control', className: 'cvat-active-canvas-control cvat-tools-control',
onClick: (): void => { onClick: (): void => {
canvasInstance.interact({ enabled: false }); canvasInstance.interact({ enabled: false });
}, },
} } :
: { {
className: 'cvat-tools-control', className: 'cvat-tools-control',
}; };
return ( return (
<> <>

30
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx
Unescape Escape View File

@ -5,12 +5,12 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import Icon from 'antd/lib/icon'; import Icon from 'antd/lib/icon';
import Select, { OptionProps } from 'antd/lib/select';
import Dropdown from 'antd/lib/dropdown'; import Dropdown from 'antd/lib/dropdown';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import Tooltip from 'antd/lib/tooltip'; import Tooltip from 'antd/lib/tooltip';
import { ObjectType, ShapeType, ColorBy } from 'reducers/interfaces'; import { ObjectType, ShapeType, ColorBy } from 'reducers/interfaces';
import LabelSelector from 'components/label-selector/label-selector';
import ItemMenu from './object-item-menu'; import ItemMenu from './object-item-menu';
interface Props { interface Props {
@ -33,7 +33,7 @@ interface Props {
toForegroundShortcut: string; toForegroundShortcut: string;
removeShortcut: string; removeShortcut: string;
changeColor(color: string): void; changeColor(color: string): void;
changeLabel(labelID: string): void; changeLabel(label: any): void;
copy(): void; copy(): void;
remove(): void; remove(): void;
propagate(): void; propagate(): void;
@ -103,30 +103,8 @@ function ItemTopComponent(props: Props): JSX.Element {
</Text> </Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Tooltip title={readonly ? 'Current label' : 'Change current label'} mouseLeaveDelay={0}> <Tooltip title='Change current label' mouseLeaveDelay={0}>
<Select <LabelSelector disabled={readonly} size='small' labels={labels} value={labelID} onChange={changeLabel} />
disabled={readonly}
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}
</Select.Option>
),
)}
</Select>
</Tooltip> </Tooltip>
</Col> </Col>
<Col span={2}> <Col span={2}>

2
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx
Unescape Escape View File

@ -35,7 +35,7 @@ interface Props {
toBackground(): void; toBackground(): void;
toForeground(): void; toForeground(): void;
remove(): void; remove(): void;
changeLabel(labelID: string): void; changeLabel(label: any): void;
changeAttribute(attrID: number, value: string): void; changeAttribute(attrID: number, value: string): void;
changeColor(color: string): void; changeColor(color: string): void;
collapse(): void; collapse(): void;

18
cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx
Unescape Escape View File

@ -12,8 +12,8 @@ import Layout, { SiderProps } from 'antd/lib/layout';
import Button from 'antd/lib/button/button'; import Button from 'antd/lib/button/button';
import Icon from 'antd/lib/icon'; import Icon from 'antd/lib/icon';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import Select from 'antd/lib/select';
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox/Checkbox'; import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox/Checkbox';
import Tag from 'antd/lib/tag';
import { import {
createAnnotationsAsync, createAnnotationsAsync,
@ -23,7 +23,7 @@ import {
} from 'actions/annotation-actions'; } from 'actions/annotation-actions';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import { CombinedState, ObjectType } from 'reducers/interfaces'; import { CombinedState, ObjectType } from 'reducers/interfaces';
import Tag from 'antd/lib/tag'; import LabelSelector from 'components/label-selector/label-selector';
import getCore from 'cvat-core-wrapper'; import getCore from 'cvat-core-wrapper';
import ShortcutsSelect from './shortcuts-select'; import ShortcutsSelect from './shortcuts-select';
@ -111,7 +111,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
const [sidebarCollapsed, setSidebarCollapsed] = useState(false); const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
const [frameTags, setFrameTags] = useState([] as any[]); const [frameTags, setFrameTags] = useState([] as any[]);
const [selectedLabelID, setSelectedLabelID] = useState(defaultLabelID); const [selectedLabelID, setSelectedLabelID] = useState<number>(defaultLabelID);
const [skipFrame, setSkipFrame] = useState(false); const [skipFrame, setSkipFrame] = useState(false);
useEffect(() => { useEffect(() => {
@ -155,8 +155,8 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
collapsed: sidebarCollapsed, collapsed: sidebarCollapsed,
}; };
const onChangeLabel = (value: string): void => { const onChangeLabel = (value: any): void => {
setSelectedLabelID(Number.parseInt(value, 10)); setSelectedLabelID(value.id);
}; };
const onRemoveState = (objectState: any): void => { const onRemoveState = (objectState: any): void => {
@ -216,13 +216,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen
<Row type='flex' justify='start' className='cvat-tag-annotation-sidebar-label-select'> <Row type='flex' justify='start' className='cvat-tag-annotation-sidebar-label-select'>
<Col> <Col>
<Text strong>Tag label</Text> <Text strong>Tag label</Text>
<Select value={`${selectedLabelID}`} onChange={onChangeLabel} size='default'> <LabelSelector labels={labels} value={selectedLabelID} onChange={onChangeLabel} />
{labels.map((label: any) => (
<Select.Option key={label.id} value={`${label.id}`}>
{label.name}
</Select.Option>
))}
</Select>
</Col> </Col>
</Row> </Row>
<Row type='flex' justify='space-around' className='cvat-tag-annotation-sidebar-buttons'> <Row type='flex' justify='space-around' className='cvat-tag-annotation-sidebar-buttons'>

54
cvat-ui/src/components/label-selector/label-selector.tsx
Unescape Escape View File

@ -0,0 +1,54 @@
// Copyright (C) 2020 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Select, { OptionProps, SelectProps } from 'antd/lib/select';
interface Props extends SelectProps {
labels: any[];
value: any | number | null;
onChange: (label: any) => void;
}
export default function LabelSelector(props: Props): JSX.Element {
const {
labels, value, onChange, ...rest
} = props;
const dinamicProps = value ?
{
value: typeof value === 'number' ? value : value.id,
} :
{};
return (
<Select
{...rest}
{...dinamicProps}
showSearch
filterOption={(input: string, option: React.ReactElement<OptionProps>) => {
const { children } = option.props;
if (typeof children === 'string') {
return children.toLowerCase().includes(input.toLowerCase());
}
return false;
}}
defaultValue={labels[0].id}
onChange={(newValue: string) => {
const [label] = labels.filter((_label: any): boolean => _label.id === +newValue);
if (label) {
onChange(label);
} else {
throw new Error(`Label with id ${newValue} was not found within the list`);
}
}}
>
{labels.map((label: any) => (
<Select.Option title={label.name} key={label.id} value={label.id}>
{label.name}
</Select.Option>
))}
</Select>
);
}

14
cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
Unescape Escape View File

@ -102,7 +102,9 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
private onDraw(objectType: ObjectType): void { private onDraw(objectType: ObjectType): void {
const { canvasInstance, shapeType, onDrawStart } = this.props; const { canvasInstance, shapeType, onDrawStart } = this.props;
const { rectDrawingMethod, cuboidDrawingMethod, numberOfPoints, selectedLabelID } = this.state; const {
rectDrawingMethod, cuboidDrawingMethod, numberOfPoints, selectedLabelID,
} = this.state;
canvasInstance.cancel(); canvasInstance.cancel();
canvasInstance.draw({ canvasInstance.draw({
@ -143,14 +145,16 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
}); });
}; };
private onChangeLabel = (value: string): void => { private onChangeLabel = (value: any): void => {
this.setState({ this.setState({
selectedLabelID: +value, selectedLabelID: value.id,
}); });
}; };
public render(): JSX.Element { public render(): JSX.Element {
const { rectDrawingMethod, cuboidDrawingMethod, selectedLabelID, numberOfPoints } = this.state; const {
rectDrawingMethod, cuboidDrawingMethod, selectedLabelID, numberOfPoints,
} = this.state;
const { normalizedKeyMap, labels, shapeType } = this.props; const { normalizedKeyMap, labels, shapeType } = this.props;
@ -159,7 +163,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
labels={labels} labels={labels}
shapeType={shapeType} shapeType={shapeType}
minimumPoints={this.minimumPoints} minimumPoints={this.minimumPoints}
selectedLabeID={selectedLabelID} selectedLabelID={selectedLabelID}
numberOfPoints={numberOfPoints} numberOfPoints={numberOfPoints}
rectDrawingMethod={rectDrawingMethod} rectDrawingMethod={rectDrawingMethod}
cuboidDrawingMethod={cuboidDrawingMethod} cuboidDrawingMethod={cuboidDrawingMethod}

10
cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
Unescape Escape View File

@ -74,14 +74,16 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
}; };
} }
private onChangeLabel = (value: string): void => { private onChangeLabel = (value: any): void => {
this.setState({ this.setState({
selectedLabelID: +value, selectedLabelID: value.id,
}); });
}; };
private onSetup = (): void => { private onSetup = (): void => {
const { frame, labels, jobInstance, canvasInstance, onAnnotationCreate, onRememberObject } = this.props; const {
frame, labels, jobInstance, canvasInstance, onAnnotationCreate, onRememberObject,
} = this.props;
const { selectedLabelID } = this.state; const { selectedLabelID } = this.state;
@ -105,7 +107,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
return ( return (
<SetupTagPopoverComponent <SetupTagPopoverComponent
labels={labels} labels={labels}
selectedLabeID={selectedLabelID} selectedLabelID={selectedLabelID}
repeatShapeShortcut={normalizedKeyMap.SWITCH_DRAW_MODE} repeatShapeShortcut={normalizedKeyMap.SWITCH_DRAW_MODE}
onChangeLabel={this.onChangeLabel} onChangeLabel={this.onChangeLabel}
onSetup={this.onSetup} onSetup={this.onSetup}

9
cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx
Unescape Escape View File

@ -254,15 +254,12 @@ class ObjectItemContainer extends React.PureComponent<Props> {
} }
}; };
private changeLabel = (labelID: string): void => { private changeLabel = (label: any): void => {
const { objectState, readonly, labels } = this.props; const { objectState, readonly } = this.props;
if (!readonly) { if (!readonly) {
const [label] = labels.filter((_label: any): boolean => _label.id === +labelID);
objectState.label = label; objectState.label = label;
this.commit();
} }
this.commit();
}; };
private changeAttribute = (id: number, value: string): void => { private changeAttribute = (id: number, value: string): void => {

Write Preview
Loading…
Cancel
Save