[GSoC2024] fix cvat-ui error when open a job with issue (#7600)

changelog.d/20240412_213101_umangapatel123_ui_error_job_with_issues.md

@@ -0,0 +1,4 @@
+### Fixed
+
+- UI error when job with issues is reopened from the job page
+  (<https://github.com/cvat-ai/cvat/pull/7760>)

cvat-ui/src/actions/annotation-actions.ts

@@ -128,7 +128,7 @@ export enum AnnotationActionTypes {
     SAVE_ANNOTATIONS_FAILED = 'SAVE_ANNOTATIONS_FAILED',
     SWITCH_PLAY = 'SWITCH_PLAY',
     CONFIRM_CANVAS_READY = 'CONFIRM_CANVAS_READY',
-
+    UPDATE_CANVAS_READY = 'UPDATE_CANVAS_READY',
     UPDATE_ACTIVE_CONTROL = 'UPDATE_ACTIVE_CONTROL',
 
     COPY_SHAPE = 'COPY_SHAPE',
@@ -652,6 +652,15 @@ export function confirmCanvasReadyAsync(): ThunkAction {
     };
 }
 
+export function updateCanvasReady(ready: boolean): AnyAction {
+    return {
+        type: AnnotationActionTypes.UPDATE_CANVAS_READY,
+        payload: {
+            ready,
+        },
+    };
+}
+
 export function changeFrameAsync(
     toFrame: number,
     fillBuffer?: boolean,

cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-wrapper.tsx

@@ -45,6 +45,7 @@ import {
     fetchAnnotationsAsync,
     getDataFailed,
     canvasErrorOccurred,
+    updateCanvasReady,
 } from 'actions/annotation-actions';
 import {
     switchGrid,
@@ -144,6 +145,7 @@ interface DispatchToProps {
     onGetDataFailed(error: Error): void;
     onCanvasErrorOccurred(error: Error): void;
     onStartIssue(position: number[]): void;
+    UpdateCanvasReadyStatus(status: boolean): void;
 }
 
 function mapStateToProps(state: CombinedState): StateToProps {
@@ -335,6 +337,9 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
         onStartIssue(position: number[]): void {
             dispatch(reviewActions.startIssue(position));
         },
+        UpdateCanvasReadyStatus(status: boolean): void {
+            dispatch(updateCanvasReady(status));
+        },
     };
 }
 
@@ -565,6 +570,9 @@ class CanvasWrapperComponent extends React.PureComponent<Props> {
     public componentWillUnmount(): void {
         const { canvasInstance } = this.props as { canvasInstance: Canvas };
 
+        const { UpdateCanvasReadyStatus } = this.props;
+        UpdateCanvasReadyStatus(false);
+
         canvasInstance.html().removeEventListener('mousedown', this.onCanvasMouseDown);
         canvasInstance.html().removeEventListener('click', this.onCanvasClicked);
         canvasInstance.html().removeEventListener('canvas.editstart', this.onCanvasEditStart);

cvat-ui/src/reducers/annotation-reducer.ts

@@ -447,6 +447,15 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                 },
             };
         }
+        case AnnotationActionTypes.UPDATE_CANVAS_READY: {
+            return {
+                ...state,
+                canvas: {
+                    ...state.canvas,
+                    ready: action.payload.ready,
+                },
+            };
+        }
         case AnnotationActionTypes.REMEMBER_OBJECT: {
             const { payload } = action;