Fixed: cannot read property 'label' of undefined (#2311)

* Fixed: cannot read property 'label' of undefined

* Updated UI package version & changelog

* Fixed tests

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 (<https://github.com/openvinotoolkit/cvat/issues/2129>)
 -   Fixed CVAT startup process if the user has `umask 077` in .bashrc file (<https://github.com/openvinotoolkit/cvat/pull/2293>)
 -   Exception: Cannot read property "each" of undefined after drawing a single point (<https://github.com/openvinotoolkit/cvat/pull/2307>)
+-   Cannot read property 'label' of undefined (Fixed?) (<https://github.com/openvinotoolkit/cvat/pull/2311>)
 
 ### Security
 

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": {

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": {

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 {
             <ObjectItemContainer
                 key={activatedStateID}
                 clientID={activatedStateID}
+                objectStates={objectStates}
                 initialCollapsed
             />
         </div>,

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}
             />
             <div className='cvat-objects-sidebar-states-list'>
-                { sortedStatesID.map((id: number): JSX.Element => (
-                    <ObjectItemContainer
-                        key={id}
-                        clientID={id}
-                        initialCollapsed={statesCollapsedAll}
-                    />
-                ))}
+                {sortedStatesID.map(
+                    (id: number): JSX.Element => (
+                        <ObjectItemContainer
+                            objectStates={objectStates}
+                            key={id}
+                            clientID={id}
+                            initialCollapsed={statesCollapsedAll}
+                        />
+                    ),
+                )}
             </div>
         </div>
     );

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<Props, State> {
     }
 
     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<Props, State> {
 
         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<Props, State> {
     };
 
     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<Props, State> {
     }
 
     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 && (
                     <CanvasContextMenuComponent
                         left={left}
                         top={top}
                         visible={visible}
+                        objectStates={objectStates}
                         activatedStateID={activatedStateID}
                     />
                 )}
@@ -196,6 +180,4 @@ class CanvasContextMenuContainer extends React.PureComponent<Props, State> {
     }
 }
 
-export default connect(
-    mapStateToProps,
-)(CanvasContextMenuContainer);
+export default connect(mapStateToProps)(CanvasContextMenuContainer);

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<Props> {
     };
 
     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<Props> {
                 }
 
                 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<Props> {
     };
 
     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<Props> {
     };
 
     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<Props> {
     };
 
     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<Props> {
     };
 
     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<Props> {
 
         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<Props> {
     };
 
     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) {

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<Props, State> {
     };
 
     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<Props, State> {
     }
 
     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<Props, State> {
     }
 
     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<Props, State> {
             statesHidden,
             statesLocked,
             activatedStateID,
-            objectStates,
             jobInstance,
             updateAnnotations,
             changeGroupColor,
@@ -285,10 +256,7 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
             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<Props, State> {
 
         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<Props, State> {
                 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<Props, State> {
                 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<Props, State> {
                     {...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<Props, State> {
     }
 }
 
-export default connect(
-    mapStateToProps,
-    mapDispatchToProps,
-)(ObjectsListContainer);
+export default connect(mapStateToProps, mapDispatchToProps)(ObjectsListContainer);