diff --git a/CHANGELOG.md b/CHANGELOG.md index 7023ec7b..a7933f47 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -13,6 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Added basic projects implementation () - Added documentation on how to mount cloud starage(AWS S3 bucket, Azure container, Google Drive) as FUSE () - Added ability to work with share files without copying inside () +- Tooltips in label selectors () ### Changed @@ -39,6 +40,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Projects view layout fix () - Fixed the tasks view (infinite loading) when it is impossible to get a preview of the task () - Empty frames navigation () +- Disabled position editing in AAM () +- TypeError: Cannot read property 'toString' of undefined () +- Extra shapes are drawn after Esc, or G pressed while drawing a region in grouping () ### Security diff --git a/cvat-canvas/package-lock.json b/cvat-canvas/package-lock.json index cffc743f..e13c0da1 100644 --- a/cvat-canvas/package-lock.json +++ b/cvat-canvas/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-canvas", - "version": "2.2.0", + "version": "2.2.1", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-canvas/package.json b/cvat-canvas/package.json index 1c7f9bc7..0fb63b61 100644 --- a/cvat-canvas/package.json +++ b/cvat-canvas/package.json @@ -1,6 +1,6 @@ { "name": "cvat-canvas", - "version": "2.2.0", + "version": "2.2.1", "description": "Part of Computer Vision Annotation Tool which presents its canvas library", "main": "src/canvas.ts", "scripts": { diff --git a/cvat-canvas/src/typescript/canvasView.ts b/cvat-canvas/src/typescript/canvasView.ts index ddec7d15..d4304f22 100644 --- a/cvat-canvas/src/typescript/canvasView.ts +++ b/cvat-canvas/src/typescript/canvasView.ts @@ -1342,8 +1342,7 @@ export class CanvasViewImpl implements CanvasView, Listener { } this.mode = Mode.IDLE; this.canvas.style.cursor = ''; - } - else if (reason === UpdateReasons.DATA_FAILED) { + } else if (reason === UpdateReasons.DATA_FAILED) { const event: CustomEvent = new CustomEvent('canvas.error', { detail: { exception: model.exception, diff --git a/cvat-canvas/src/typescript/groupHandler.ts b/cvat-canvas/src/typescript/groupHandler.ts index 84f840cf..c94b5cbf 100644 --- a/cvat-canvas/src/typescript/groupHandler.ts +++ b/cvat-canvas/src/typescript/groupHandler.ts @@ -35,11 +35,11 @@ export class GroupHandlerImpl implements GroupHandler { private getSelectionBox( event: MouseEvent, ): { - xtl: number; - ytl: number; - xbr: number; - ybr: number; - } { + xtl: number; + ytl: number; + xbr: number; + ybr: number; + } { const point = translateToSVG((this.canvas.node as any) as SVGSVGElement, [event.clientX, event.clientY]); const stopSelectionPoint = { x: point[0], @@ -96,11 +96,11 @@ export class GroupHandlerImpl implements GroupHandler { const bbox = shape.bbox(); const clientID = shape.attr('clientID'); if ( - bbox.x > box.xtl && - bbox.y > box.ytl && - bbox.x + bbox.width < box.xbr && - bbox.y + bbox.height < box.ybr && - !(clientID in this.highlightedShapes) + bbox.x > box.xtl + && bbox.y > box.ytl + && bbox.x + bbox.width < box.xbr + && bbox.y + bbox.height < box.ybr + && !(clientID in this.highlightedShapes) ) { const objectState = this.getStates().filter( (state: any): boolean => state.clientID === clientID, @@ -124,7 +124,6 @@ export class GroupHandlerImpl implements GroupHandler { this.resetSelectedObjects(); this.initialized = false; - this.selectionRect = null; this.startSelectionPoint = { x: null, y: null, @@ -213,6 +212,10 @@ export class GroupHandlerImpl implements GroupHandler { } this.statesToBeGroupped = []; this.highlightedShapes = {}; + if (this.selectionRect) { + this.selectionRect.remove(); + this.selectionRect = null; + } } public cancel(): void { diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index 59a75dbd..0d425685 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,7 @@ { "name": "cvat-ui", "version": "1.11.1", + "version": "1.11.3", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 35884c24..69a247b8 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,7 @@ { "name": "cvat-ui", "version": "1.11.1", + "version": "1.11.3", "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 8f486e96..1d98243e 100644 --- a/cvat-ui/src/actions/annotation-actions.ts +++ b/cvat-ui/src/actions/annotation-actions.ts @@ -520,13 +520,13 @@ export function removeObjectAsync(sessionInstance: any, objectState: any, force: }, }); } else { - throw new Error('Could not remove the object. Is it locked?'); + throw new Error('Could not remove the locked object'); } } catch (error) { dispatch({ type: AnnotationActionTypes.REMOVE_OBJECT_FAILED, payload: { - objectState, + error, }, }); } diff --git a/cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx b/cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx index 20007713..d96ebf14 100644 --- a/cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx +++ b/cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx @@ -109,7 +109,7 @@ export default class CanvasWrapperComponent extends React.PureComponent { autoborders: automaticBordering, undefinedAttrValue: consts.UNDEFINED_ATTRIBUTE_VALUE, displayAllText: showObjectsTextAlways, - forceDisableEditing: workspace === Workspace.REVIEW_WORKSPACE, + forceDisableEditing: [Workspace.ATTRIBUTE_ANNOTATION, Workspace.REVIEW_WORKSPACE].includes(workspace), }); this.initialSetup(); @@ -260,11 +260,11 @@ export default class CanvasWrapperComponent extends React.PureComponent { } if (prevProps.workspace !== workspace) { - if (workspace === Workspace.REVIEW_WORKSPACE) { + if ([Workspace.ATTRIBUTE_ANNOTATION, Workspace.REVIEW_WORKSPACE].includes(workspace)) { canvasInstance.configure({ forceDisableEditing: true, }); - } else if (prevProps.workspace === Workspace.REVIEW_WORKSPACE) { + } else if ([Workspace.ATTRIBUTE_ANNOTATION, Workspace.REVIEW_WORKSPACE].includes(prevProps.workspace)) { canvasInstance.configure({ forceDisableEditing: false, }); 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 6c72c5ec..8a72c39b 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,6 @@ import React from 'react'; import { Row, Col } from 'antd/lib/grid'; -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'; @@ -14,6 +13,7 @@ import Text from 'antd/lib/typography/Text'; import { RectDrawingMethod, CuboidDrawingMethod } from 'cvat-canvas-wrapper'; import { ShapeType } from 'reducers/interfaces'; import { clamp } from 'utils/math'; +import LabelSelector from 'components/label-selector/label-selector'; interface Props { shapeType: ShapeType; @@ -22,7 +22,7 @@ interface Props { rectDrawingMethod?: RectDrawingMethod; cuboidDrawingMethod?: CuboidDrawingMethod; numberOfPoints?: number; - selectedLabeID: number; + selectedLabelID: number; repeatShapeShortcut: string; onChangeLabel(value: string): void; onChangePoints(value: number | undefined): void; @@ -37,7 +37,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element { labels, shapeType, minimumPoints, - selectedLabeID, + selectedLabelID, numberOfPoints, rectDrawingMethod, cuboidDrawingMethod, @@ -64,25 +64,12 @@ function DrawShapePopoverComponent(props: Props): JSX.Element { - + /> {shapeType === ShapeType.RECTANGLE && ( diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx index 62e8cd6e..a07b16da 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx @@ -4,21 +4,23 @@ import React from 'react'; import { Row, Col } from 'antd/lib/grid'; -import Select from 'antd/lib/select'; import Button from 'antd/lib/button'; import Tooltip from 'antd/lib/tooltip'; import Text from 'antd/lib/typography/Text'; +import LabelSelector from 'components/label-selector/label-selector'; interface Props { labels: any[]; - selectedLabeID: number; + selectedLabelID: number; repeatShapeShortcut: string; onChangeLabel(value: string): void; onSetup(labelID: number): void; } function SetupTagPopover(props: Props): JSX.Element { - const { labels, selectedLabeID, repeatShapeShortcut, onChangeLabel, onSetup } = props; + const { + labels, selectedLabelID, repeatShapeShortcut, onChangeLabel, onSetup, + } = props; return (
@@ -36,19 +38,18 @@ function SetupTagPopover(props: Props): JSX.Element { - + - + diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx index 01f4658a..a52d7f4d 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx @@ -6,7 +6,7 @@ import React, { MutableRefObject } from 'react'; import { connect } from 'react-redux'; import Icon from 'antd/lib/icon'; 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 Modal from 'antd/lib/modal'; 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 notification from 'antd/lib/notification'; import Progress from 'antd/lib/progress'; +import InputNumber from 'antd/lib/input-number'; import { AIToolsIcon } from 'icons'; import { Canvas } from 'cvat-canvas-wrapper'; import range from 'utils/range'; 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 { interactWithCanvas, fetchAnnotationsAsync, @@ -28,7 +31,7 @@ import { } from 'actions/annotation-actions'; import { InteractionResult } from 'cvat-canvas/src/typescript/canvas'; 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 { canvasInstance: Canvas; @@ -178,7 +181,9 @@ export class ToolsControlComponent extends React.PureComponent { }; private cancelListener = async (): Promise => { - const { isActivated, jobInstance, frame, fetchAnnotations } = this.props; + const { + isActivated, jobInstance, frame, fetchAnnotations, + } = this.props; const { interactiveStateID, fetching } = this.state; if (isActivated) { @@ -313,7 +318,9 @@ export class ToolsControlComponent extends React.PureComponent { }; private onTracking = async (e: Event): Promise => { - const { isActivated, jobInstance, frame, curZOrder, fetchAnnotations } = this.props; + const { + isActivated, jobInstance, frame, curZOrder, fetchAnnotations, + } = this.props; const { activeLabelID } = this.state; const [label] = jobInstance.task.labels.filter((_label: any): boolean => _label.id === activeLabelID); @@ -457,28 +464,12 @@ export class ToolsControlComponent extends React.PureComponent { - + labels={labels} + value={activeLabelID} + onChange={(value: any) => this.setState({ activeLabelID: value.id })} + /> @@ -486,8 +477,12 @@ export class ToolsControlComponent extends React.PureComponent { } private renderTrackerBlock(): JSX.Element { - const { trackers, canvasInstance, jobInstance, frame, onInteractionStart } = this.props; - const { activeTracker, activeLabelID, fetching, trackingFrames } = this.state; + const { + trackers, canvasInstance, jobInstance, frame, onInteractionStart, + } = this.props; + const { + activeTracker, activeLabelID, fetching, trackingFrames, + } = this.state; if (!trackers.length) { return ( @@ -516,9 +511,9 @@ export class ToolsControlComponent extends React.PureComponent { onChange={this.setActiveTracker} > {trackers.map( - (interactor: Model): JSX.Element => ( - - {interactor.name} + (tracker: Model): JSX.Element => ( + + {tracker.name} ), )} @@ -650,7 +645,9 @@ export class ToolsControlComponent extends React.PureComponent { } private renderDetectorBlock(): JSX.Element { - const { jobInstance, detectors, curZOrder, frame, fetchAnnotations } = this.props; + const { + jobInstance, detectors, curZOrder, frame, fetchAnnotations, + } = this.props; if (!detectors.length) { return ( @@ -682,18 +679,17 @@ export class ToolsControlComponent extends React.PureComponent { }); const states = result.map( - (data: any): any => - new core.classes.ObjectState({ - shapeType: data.type, - label: task.labels.filter((label: any): boolean => label.name === data.label)[0], - points: data.points, - objectType: ObjectType.SHAPE, - frame, - occluded: false, - source: 'auto', - attributes: {}, - zOrder: curZOrder, - }), + (data: any): any => new core.classes.ObjectState({ + shapeType: data.type, + label: task.labels.filter((label: any): boolean => label.name === data.label)[0], + points: data.points, + objectType: ObjectType.SHAPE, + frame, + occluded: false, + source: 'auto', + attributes: {}, + zOrder: curZOrder, + }), ); await jobInstance.annotations.put(states); @@ -739,29 +735,31 @@ export class ToolsControlComponent extends React.PureComponent { } 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; if (![...interactors, ...detectors, ...trackers].length) return null; - const dynamcPopoverPros = isActivated - ? { - overlayStyle: { - display: 'none', - }, - } - : {}; - - const dynamicIconProps = isActivated - ? { - className: 'cvat-active-canvas-control cvat-tools-control', - onClick: (): void => { - canvasInstance.interact({ enabled: false }); - }, - } - : { - className: 'cvat-tools-control', - }; + const dynamcPopoverPros = isActivated ? + { + overlayStyle: { + display: 'none', + }, + } : + {}; + + const dynamicIconProps = isActivated ? + { + className: 'cvat-active-canvas-control cvat-tools-control', + onClick: (): void => { + canvasInstance.interact({ enabled: false }); + }, + } : + { + className: 'cvat-tools-control', + }; return ( <> diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx index 2fe26cd7..3b0610f0 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx @@ -5,12 +5,12 @@ import React, { useState } from 'react'; import { Row, Col } from 'antd/lib/grid'; import Icon from 'antd/lib/icon'; -import Select, { OptionProps } from 'antd/lib/select'; import Dropdown from 'antd/lib/dropdown'; import Text from 'antd/lib/typography/Text'; import Tooltip from 'antd/lib/tooltip'; import { ObjectType, ShapeType, ColorBy } from 'reducers/interfaces'; +import LabelSelector from 'components/label-selector/label-selector'; import ItemMenu from './object-item-menu'; interface Props { @@ -33,7 +33,7 @@ interface Props { toForegroundShortcut: string; removeShortcut: string; changeColor(color: string): void; - changeLabel(labelID: string): void; + changeLabel(label: any): void; copy(): void; remove(): void; propagate(): void; @@ -103,30 +103,8 @@ function ItemTopComponent(props: Props): JSX.Element { - - + + diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx index d2b91eb3..578e239f 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx @@ -35,7 +35,7 @@ interface Props { toBackground(): void; toForeground(): void; remove(): void; - changeLabel(labelID: string): void; + changeLabel(label: any): void; changeAttribute(attrID: number, value: string): void; changeColor(color: string): void; collapse(): void; diff --git a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx index 252805e9..1a8ab191 100644 --- a/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx +++ b/cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx @@ -12,8 +12,8 @@ import Layout, { SiderProps } from 'antd/lib/layout'; import Button from 'antd/lib/button/button'; import Icon from 'antd/lib/icon'; import Text from 'antd/lib/typography/Text'; -import Select from 'antd/lib/select'; import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox/Checkbox'; +import Tag from 'antd/lib/tag'; import { createAnnotationsAsync, @@ -23,7 +23,7 @@ import { } from 'actions/annotation-actions'; import { Canvas } from 'cvat-canvas-wrapper'; 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 ShortcutsSelect from './shortcuts-select'; @@ -111,7 +111,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen const [sidebarCollapsed, setSidebarCollapsed] = useState(false); const [frameTags, setFrameTags] = useState([] as any[]); - const [selectedLabelID, setSelectedLabelID] = useState(defaultLabelID); + const [selectedLabelID, setSelectedLabelID] = useState(defaultLabelID); const [skipFrame, setSkipFrame] = useState(false); useEffect(() => { @@ -155,8 +155,8 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen collapsed: sidebarCollapsed, }; - const onChangeLabel = (value: string): void => { - setSelectedLabelID(Number.parseInt(value, 10)); + const onChangeLabel = (value: any): void => { + setSelectedLabelID(value.id); }; const onRemoveState = (objectState: any): void => { @@ -216,13 +216,7 @@ function TagAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.Elemen Tag label - + diff --git a/cvat-ui/src/components/label-selector/label-selector.tsx b/cvat-ui/src/components/label-selector/label-selector.tsx new file mode 100644 index 00000000..c5f5beaf --- /dev/null +++ b/cvat-ui/src/components/label-selector/label-selector.tsx @@ -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 ( + + ); +} diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx index f7d1f9e8..937b61f0 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx @@ -102,7 +102,9 @@ class DrawShapePopoverContainer extends React.PureComponent { private onDraw(objectType: ObjectType): void { const { canvasInstance, shapeType, onDrawStart } = this.props; - const { rectDrawingMethod, cuboidDrawingMethod, numberOfPoints, selectedLabelID } = this.state; + const { + rectDrawingMethod, cuboidDrawingMethod, numberOfPoints, selectedLabelID, + } = this.state; canvasInstance.cancel(); canvasInstance.draw({ @@ -143,14 +145,16 @@ class DrawShapePopoverContainer extends React.PureComponent { }); }; - private onChangeLabel = (value: string): void => { + private onChangeLabel = (value: any): void => { this.setState({ - selectedLabelID: +value, + selectedLabelID: value.id, }); }; public render(): JSX.Element { - const { rectDrawingMethod, cuboidDrawingMethod, selectedLabelID, numberOfPoints } = this.state; + const { + rectDrawingMethod, cuboidDrawingMethod, selectedLabelID, numberOfPoints, + } = this.state; const { normalizedKeyMap, labels, shapeType } = this.props; @@ -159,7 +163,7 @@ class DrawShapePopoverContainer extends React.PureComponent { labels={labels} shapeType={shapeType} minimumPoints={this.minimumPoints} - selectedLabeID={selectedLabelID} + selectedLabelID={selectedLabelID} numberOfPoints={numberOfPoints} rectDrawingMethod={rectDrawingMethod} cuboidDrawingMethod={cuboidDrawingMethod} diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx index b2d805da..5c0c5b8b 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx @@ -74,14 +74,16 @@ class DrawShapePopoverContainer extends React.PureComponent { }; } - private onChangeLabel = (value: string): void => { + private onChangeLabel = (value: any): void => { this.setState({ - selectedLabelID: +value, + selectedLabelID: value.id, }); }; 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; @@ -105,7 +107,7 @@ class DrawShapePopoverContainer extends React.PureComponent { return ( { } }; - private changeLabel = (labelID: string): void => { - const { objectState, readonly, labels } = this.props; - + private changeLabel = (label: any): void => { + const { objectState, readonly } = this.props; if (!readonly) { - const [label] = labels.filter((_label: any): boolean => _label.id === +labelID); objectState.label = label; + this.commit(); } - - this.commit(); }; private changeAttribute = (id: number, value: string): void => {