From bcc8bba39ece18b67d9173bd287545737d2fb662 Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Tue, 13 Oct 2020 17:35:21 +0300 Subject: [PATCH] Fixed: cannot read property 'label' of undefined (#2311) * Fixed: cannot read property 'label' of undefined * Updated UI package version & changelog * Fixed tests --- CHANGELOG.md | 1 + cvat-ui/package-lock.json | 2 +- cvat-ui/package.json | 2 +- .../canvas-context-menu.tsx | 9 +- .../objects-side-bar/objects-list.tsx | 19 ++- .../canvas-context-menu.tsx | 56 +++----- .../objects-side-bar/object-item.tsx | 124 +++++------------- .../objects-side-bar/objects-list.tsx | 73 +++-------- 8 files changed, 86 insertions(+), 200 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7ad5d14082d5..d9ee25f4a4f7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -63,6 +63,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - A problem in exporting of tracks, where tracks could be truncated () - Fixed CVAT startup process if the user has `umask 077` in .bashrc file () - Exception: Cannot read property "each" of undefined after drawing a single point () +- Cannot read property 'label' of undefined (Fixed?) () ### Security diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index b03effa7051d..4a8158987f70 100644 --- a/cvat-ui/package-lock.json +++ b/cvat-ui/package-lock.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.9.12", + "version": "1.9.13", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 4394568d73c3..f6cba291c9c1 100644 --- a/cvat-ui/package.json +++ b/cvat-ui/package.json @@ -1,6 +1,6 @@ { "name": "cvat-ui", - "version": "1.9.12", + "version": "1.9.13", "description": "CVAT single-page application", "main": "src/index.tsx", "scripts": { diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-context-menu.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-context-menu.tsx index 635addfad0b9..36623adb8e7f 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-context-menu.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-context-menu.tsx @@ -9,18 +9,14 @@ import ObjectItemContainer from 'containers/annotation-page/standard-workspace/o interface Props { activatedStateID: number | null; + objectStates: any[]; visible: boolean; left: number; top: number; } export default function CanvasContextMenu(props: Props): JSX.Element | null { - const { - activatedStateID, - visible, - left, - top, - } = props; + const { activatedStateID, objectStates, visible, left, top } = props; if (!visible || activatedStateID === null) { return null; @@ -31,6 +27,7 @@ export default function CanvasContextMenu(props: Props): JSX.Element | null { , diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx index 456826264d88..6415d319c180 100644 --- a/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx +++ b/cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx @@ -15,6 +15,7 @@ interface Props { statesCollapsedAll: boolean; statesOrdering: StatesOrdering; sortedStatesID: number[]; + objectStates: any[]; switchLockAllShortcut: string; switchHiddenAllShortcut: string; changeStatesOrdering(value: StatesOrdering): void; @@ -34,6 +35,7 @@ function ObjectListComponent(props: Props): JSX.Element { statesCollapsedAll, statesOrdering, sortedStatesID, + objectStates, switchLockAllShortcut, switchHiddenAllShortcut, changeStatesOrdering, @@ -63,13 +65,16 @@ function ObjectListComponent(props: Props): JSX.Element { showAllStates={showAllStates} />
- { sortedStatesID.map((id: number): JSX.Element => ( - - ))} + {sortedStatesID.map( + (id: number): JSX.Element => ( + + ), + )}
); diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-context-menu.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-context-menu.tsx index 3d0a508c03cb..d1e2c6582a04 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-context-menu.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/canvas-context-menu.tsx @@ -11,6 +11,7 @@ import CanvasContextMenuComponent from 'components/annotation-page/standard-work interface StateToProps { activatedStateID: number | null; + objectStates: any[]; visible: boolean; top: number; left: number; @@ -21,17 +22,9 @@ interface StateToProps { function mapStateToProps(state: CombinedState): StateToProps { const { annotation: { - annotations: { - activatedStateID, - collapsed, - }, + annotations: { activatedStateID, collapsed, states: objectStates }, canvas: { - contextMenu: { - visible, - top, - left, - type, - }, + contextMenu: { visible, top, left, type }, }, }, } = state; @@ -39,6 +32,7 @@ function mapStateToProps(state: CombinedState): StateToProps { return { activatedStateID, collapsed: activatedStateID !== null ? collapsed[activatedStateID] : undefined, + objectStates, visible, left, top, @@ -76,8 +70,7 @@ class CanvasContextMenuContainer extends React.PureComponent { } static getDerivedStateFromProps(props: Props, state: State): State | null { - if (props.left === state.latestLeft - && props.top === state.latestTop) { + if (props.left === state.latestLeft && props.top === state.latestTop) { return null; } @@ -100,9 +93,13 @@ class CanvasContextMenuContainer extends React.PureComponent { const [element] = window.document.getElementsByClassName('cvat-canvas-context-menu'); if (collapsed !== prevProps.collapsed && element) { - element.addEventListener('transitionend', () => { - this.updatePositionIfOutOfScreen(); - }, { once: true }); + element.addEventListener( + 'transitionend', + () => { + this.updatePositionIfOutOfScreen(); + }, + { once: true }, + ); } else if (element) { this.updatePositionIfOutOfScreen(); } @@ -145,15 +142,9 @@ class CanvasContextMenuContainer extends React.PureComponent { }; private updatePositionIfOutOfScreen(): void { - const { - top, - left, - } = this.state; + const { top, left } = this.state; - const { - innerWidth, - innerHeight, - } = window; + const { innerWidth, innerHeight } = window; const [element] = window.document.getElementsByClassName('cvat-canvas-context-menu'); if (element) { @@ -170,24 +161,17 @@ class CanvasContextMenuContainer extends React.PureComponent { } public render(): JSX.Element { - const { - left, - top, - } = this.state; - - const { - visible, - activatedStateID, - type, - } = this.props; + const { left, top } = this.state; + const { visible, activatedStateID, objectStates, type } = this.props; return ( <> - { type === ContextMenuType.CANVAS_SHAPE && ( + {type === ContextMenuType.CANVAS_SHAPE && ( )} @@ -196,6 +180,4 @@ class CanvasContextMenuContainer extends React.PureComponent { } } -export default connect( - mapStateToProps, -)(CanvasContextMenuContainer); +export default connect(mapStateToProps)(CanvasContextMenuContainer); diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx index 94c0137f37f8..2d2e6f516ca2 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx @@ -7,12 +7,7 @@ import copy from 'copy-to-clipboard'; import { connect } from 'react-redux'; import { LogType } from 'cvat-logger'; -import { - ActiveControl, - CombinedState, - ColorBy, - ShapeType, -} from 'reducers/interfaces'; +import { ActiveControl, CombinedState, ColorBy, ShapeType } from 'reducers/interfaces'; import { collapseObjectItems, updateAnnotationsAsync, @@ -31,6 +26,7 @@ import { shift } from 'utils/math'; interface OwnProps { clientID: number; + objectStates: any[]; initialCollapsed: boolean; } @@ -66,46 +62,30 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { const { annotation: { annotations: { - states, collapsed: statesCollapsed, activatedStateID, - zLayer: { - min: minZLayer, - max: maxZLayer, - }, - }, - job: { - attributes: jobAttributes, - instance: jobInstance, - labels, + zLayer: { min: minZLayer, max: maxZLayer }, }, + job: { attributes: jobAttributes, instance: jobInstance, labels }, player: { - frame: { - number: frameNumber, - }, - }, - canvas: { - ready, - activeControl, + frame: { number: frameNumber }, }, + canvas: { ready, activeControl }, aiToolsRef, }, settings: { - shapes: { - colorBy, - }, - }, - shortcuts: { - normalizedKeyMap, + shapes: { colorBy }, }, + shortcuts: { normalizedKeyMap }, } = state; + const { objectStates: states, initialCollapsed, clientID } = own; const stateIDs = states.map((_state: any): number => _state.clientID); - const index = stateIDs.indexOf(own.clientID); + const index = stateIDs.indexOf(clientID); try { - const collapsedState = typeof (statesCollapsed[own.clientID]) === 'undefined' - ? own.initialCollapsed : statesCollapsed[own.clientID]; + const collapsedState = + typeof statesCollapsed[clientID] === 'undefined' ? initialCollapsed : statesCollapsed[clientID]; return { objectState: states[index], @@ -117,7 +97,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { colorBy, jobInstance, frameNumber, - activated: activatedStateID === own.clientID, + activated: activatedStateID === clientID, minZLayer, maxZLayer, normalizedKeyMap, @@ -133,7 +113,9 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps { clientID: own.clientID, stateIDs, }; - throw new Error(`${exception.toString()} in mapStateToProps of ObjectItemContainer. Data are ${JSON.stringify(dataObject)}`); + throw new Error( + `${exception.toString()} in mapStateToProps of ObjectItemContainer. Data are ${JSON.stringify(dataObject)}`, + ); } } @@ -180,25 +162,15 @@ class ObjectItemContainer extends React.PureComponent { }; private remove = (): void => { - const { - objectState, - removeObject, - jobInstance, - } = this.props; + const { objectState, removeObject, jobInstance } = this.props; removeObject(jobInstance, objectState); }; private createURL = (): void => { - const { - objectState, - frameNumber, - } = this.props; + const { objectState, frameNumber } = this.props; - const { - origin, - pathname, - } = window.location; + const { origin, pathname } = window.location; const search = `frame=${frameNumber}&type=${objectState.objectType}&serverID=${objectState.serverID}`; const url = `${origin}${pathname}?${search}`; @@ -219,12 +191,12 @@ class ObjectItemContainer extends React.PureComponent { } return acc; - }, [], + }, + [], ); if (objectState.shapeType === ShapeType.POLYGON) { - objectState.points = reducedPoints.slice(0, 1) - .concat(reducedPoints.reverse().slice(0, -1)).flat(); + objectState.points = reducedPoints.slice(0, 1).concat(reducedPoints.reverse().slice(0, -1)).flat(); updateState(objectState); } else if (objectState.shapeType === ShapeType.POLYLINE) { objectState.points = reducedPoints.reverse().flat(); @@ -233,32 +205,21 @@ class ObjectItemContainer extends React.PureComponent { }; private toBackground = (): void => { - const { - objectState, - minZLayer, - } = this.props; + const { objectState, minZLayer } = this.props; objectState.zOrder = minZLayer - 1; this.commit(); }; private toForeground = (): void => { - const { - objectState, - maxZLayer, - } = this.props; + const { objectState, maxZLayer } = this.props; objectState.zOrder = maxZLayer + 1; this.commit(); }; private activate = (): void => { - const { - activateObject, - objectState, - ready, - activeControl, - } = this.props; + const { activateObject, objectState, ready, activeControl } = this.props; if (ready && activeControl === ActiveControl.CURSOR) { activateObject(objectState.clientID); @@ -266,11 +227,7 @@ class ObjectItemContainer extends React.PureComponent { }; private collapse = (): void => { - const { - collapseOrExpand, - objectState, - collapsed, - } = this.props; + const { collapseOrExpand, objectState, collapsed } = this.props; collapseOrExpand([objectState], !collapsed); }; @@ -283,11 +240,7 @@ class ObjectItemContainer extends React.PureComponent { }; private changeColor = (color: string): void => { - const { - objectState, - colorBy, - changeGroupColor, - } = this.props; + const { objectState, colorBy, changeGroupColor } = this.props; if (colorBy === ColorBy.INSTANCE) { objectState.color = color; @@ -298,10 +251,7 @@ class ObjectItemContainer extends React.PureComponent { }; private changeLabel = (labelID: string): void => { - const { - objectState, - labels, - } = this.props; + const { objectState, labels } = this.props; const [label] = labels.filter((_label: any): boolean => _label.id === +labelID); objectState.label = label; @@ -330,8 +280,7 @@ class ObjectItemContainer extends React.PureComponent { this.resetCuboidPerspective(false); - objectState.points = shift(objectState.points, - cuboidOrientationIsLeft(objectState.points) ? 4 : -4); + objectState.points = shift(objectState.points, cuboidOrientationIsLeft(objectState.points) ? 4 : -4); this.commit(); }; @@ -369,24 +318,13 @@ class ObjectItemContainer extends React.PureComponent { }; private commit(): void { - const { - objectState, - updateState, - } = this.props; + const { objectState, updateState } = this.props; updateState(objectState); } public render(): JSX.Element { - const { - objectState, - collapsed, - labels, - attributes, - activated, - colorBy, - normalizedKeyMap, - } = this.props; + const { objectState, collapsed, labels, attributes, activated, colorBy, normalizedKeyMap } = this.props; let stateColor = ''; if (colorBy === ColorBy.INSTANCE) { diff --git a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx index 58204bc282f1..0371f4a878bd 100644 --- a/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx +++ b/cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx @@ -17,12 +17,7 @@ import { changeGroupColorAsync, } from 'actions/annotation-actions'; import { Canvas } from 'cvat-canvas-wrapper'; -import { - CombinedState, - StatesOrdering, - ObjectType, - ColorBy, -} from 'reducers/interfaces'; +import { CombinedState, StatesOrdering, ObjectType, ColorBy } from 'reducers/interfaces'; interface StateToProps { jobInstance: any; @@ -65,34 +60,20 @@ function mapStateToProps(state: CombinedState): StateToProps { collapsed, collapsedAll, activatedStateID, - zLayer: { - min: minZLayer, - max: maxZLayer, - }, - }, - job: { - instance: jobInstance, + zLayer: { min: minZLayer, max: maxZLayer }, }, + job: { instance: jobInstance }, player: { - frame: { - number: frameNumber, - }, - }, - canvas: { - instance: canvasInstance, + frame: { number: frameNumber }, }, + canvas: { instance: canvasInstance }, tabContentHeight: listHeight, colors, }, settings: { - shapes: { - colorBy, - }, - }, - shortcuts: { - keyMap, - normalizedKeyMap, + shapes: { colorBy }, }, + shortcuts: { keyMap, normalizedKeyMap }, } = state; let statesHidden = true; @@ -232,10 +213,7 @@ class ObjectsListContainer extends React.PureComponent { }; private lockAllStates(locked: boolean): void { - const { - objectStates, - updateAnnotations, - } = this.props; + const { objectStates, updateAnnotations } = this.props; for (const objectState of objectStates) { objectState.lock = locked; } @@ -244,10 +222,7 @@ class ObjectsListContainer extends React.PureComponent { } private hideAllStates(hidden: boolean): void { - const { - objectStates, - updateAnnotations, - } = this.props; + const { objectStates, updateAnnotations } = this.props; for (const objectState of objectStates) { objectState.hidden = hidden; } @@ -256,10 +231,7 @@ class ObjectsListContainer extends React.PureComponent { } private collapseAllStates(collapsed: boolean): void { - const { - objectStates, - collapseStates, - } = this.props; + const { objectStates, collapseStates } = this.props; collapseStates(objectStates, collapsed); } @@ -269,7 +241,6 @@ class ObjectsListContainer extends React.PureComponent { statesHidden, statesLocked, activatedStateID, - objectStates, jobInstance, updateAnnotations, changeGroupColor, @@ -285,10 +256,7 @@ class ObjectsListContainer extends React.PureComponent { colors, colorBy, } = this.props; - const { - sortedStatesID, - statesOrdering, - } = this.state; + const { objectStates, sortedStatesID, statesOrdering } = this.state; const subKeyMap = { SWITCH_ALL_LOCK: keyMap.SWITCH_ALL_LOCK, @@ -316,10 +284,9 @@ class ObjectsListContainer extends React.PureComponent { const activatedStated = (): any | null => { if (activatedStateID !== null) { - const [state] = objectStates - .filter((objectState: any): boolean => ( - objectState.clientID === activatedStateID - )); + const [state] = objectStates.filter( + (objectState: any): boolean => objectState.clientID === activatedStateID, + ); return state || null; } @@ -434,8 +401,7 @@ class ObjectsListContainer extends React.PureComponent { preventDefault(event); const state = activatedStated(); if (state && state.objectType === ObjectType.TRACK) { - const frame = typeof (state.keyframes.next) === 'number' - ? state.keyframes.next : null; + const frame = typeof state.keyframes.next === 'number' ? state.keyframes.next : null; if (frame !== null && canvasInstance.isAbleToChangeFrame()) { changeFrame(frame); } @@ -445,8 +411,7 @@ class ObjectsListContainer extends React.PureComponent { preventDefault(event); const state = activatedStated(); if (state && state.objectType === ObjectType.TRACK) { - const frame = typeof (state.keyframes.prev) === 'number' - ? state.keyframes.prev : null; + const frame = typeof state.keyframes.prev === 'number' ? state.keyframes.prev : null; if (frame !== null && canvasInstance.isAbleToChangeFrame()) { changeFrame(frame); } @@ -461,6 +426,7 @@ class ObjectsListContainer extends React.PureComponent { {...this.props} statesOrdering={statesOrdering} sortedStatesID={sortedStatesID} + objectStates={objectStates} switchHiddenAllShortcut={normalizedKeyMap.SWITCH_ALL_HIDDEN} switchLockAllShortcut={normalizedKeyMap.SWITCH_ALL_LOCK} changeStatesOrdering={this.onChangeStatesOrdering} @@ -476,7 +442,4 @@ class ObjectsListContainer extends React.PureComponent { } } -export default connect( - mapStateToProps, - mapDispatchToProps, -)(ObjectsListContainer); +export default connect(mapStateToProps, mapDispatchToProps)(ObjectsListContainer);