Fixed: Context image disappears after undo/redo (#3416)

* Fixed found issue

* Updated version & changelog

CHANGELOG.md

@@ -46,6 +46,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Falsely successful `cvat_ui` image build in case of OOM error that leads to the default nginx welcome page
   (<https://github.com/openvinotoolkit/cvat/pull/3379>)
 - Fixed issue when save filtered object in AAM (<https://github.com/openvinotoolkit/cvat/pull/3401>)
+- Context image disappears after undo/redo (<https://github.com/openvinotoolkit/cvat/pull/3416>)
 
 ### Security
 

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

@@ -801,7 +801,6 @@ export function undoActionAsync(sessionInstance: any, frame: number): ThunkActio
                 true,
             );
 
-            dispatch(changeFrameAsync(undo[1]));
             await sessionInstance.actions.undo();
             const history = await sessionInstance.actions.get();
             const states = await sessionInstance.annotations.get(frame, showAllInterpolationTracks, filters);
@@ -817,6 +816,11 @@ export function undoActionAsync(sessionInstance: any, frame: number): ThunkActio
                     maxZ,
                 },
             });
+
+            const undoOnFrame = undo[1];
+            if (frame !== undoOnFrame) {
+                dispatch(changeFrameAsync(undoOnFrame));
+            }
         } catch (error) {
             dispatch({
                 type: AnnotationActionTypes.UNDO_ACTION_FAILED,
@@ -845,7 +849,7 @@ export function redoActionAsync(sessionInstance: any, frame: number): ThunkActio
                 },
                 true,
             );
-            dispatch(changeFrameAsync(redo[1]));
+
             await sessionInstance.actions.redo();
             const history = await sessionInstance.actions.get();
             const states = await sessionInstance.annotations.get(frame, showAllInterpolationTracks, filters);
@@ -861,6 +865,11 @@ export function redoActionAsync(sessionInstance: any, frame: number): ThunkActio
                     maxZ,
                 },
             });
+
+            const redoOnFrame = redo[1];
+            if (frame !== redoOnFrame) {
+                dispatch(changeFrameAsync(redoOnFrame));
+            }
         } catch (error) {
             dispatch({
                 type: AnnotationActionTypes.REDO_ACTION_FAILED,
@@ -1632,7 +1641,7 @@ export function hideShowContextImage(hidden: boolean): AnyAction {
     };
 }
 
-export function getContextImage(): ThunkAction {
+export function getContextImageAsync(): ThunkAction {
     return async (dispatch: ActionCreator<Dispatch>): Promise<void> => {
         const state: CombinedState = getStore().getState();
         const { instance: job } = state.annotation.job;

cvat-ui/src/components/annotation-page/standard-workspace/context-image/context-image.tsx

@@ -10,7 +10,7 @@ import Spin from 'antd/lib/spin';
 import Image from 'antd/lib/image';
 
 import { CombinedState } from 'reducers/interfaces';
-import { hideShowContextImage, getContextImage } from 'actions/annotation-actions';
+import { hideShowContextImage, getContextImageAsync } from 'actions/annotation-actions';
 import CVATTooltip from 'components/common/cvat-tooltip';
 
 export function adjustContextImagePosition(sidebarCollapsed: boolean): void {
@@ -26,7 +26,7 @@ export function adjustContextImagePosition(sidebarCollapsed: boolean): void {
     }
 }
 
-export default function ContextImage(): JSX.Element | null {
+function ContextImage(): JSX.Element | null {
     const dispatch = useDispatch();
     const { number: frame, hasRelatedContext } = useSelector((state: CombinedState) => state.annotation.player.frame);
     const { data: contextImageData, hidden: contextImageHidden, fetching: contextImageFetching } = useSelector(
@@ -42,7 +42,7 @@ export default function ContextImage(): JSX.Element | null {
 
     useEffect(() => {
         if (hasRelatedContext && !contextImageHidden && !requested) {
-            dispatch(getContextImage());
+            dispatch(getContextImageAsync());
             setRequested(true);
         }
     }, [contextImageHidden, requested, hasRelatedContext]);
@@ -85,3 +85,5 @@ export default function ContextImage(): JSX.Element | null {
         </div>
     );
 }
+
+export default React.memo(ContextImage);

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

@@ -287,7 +287,7 @@ export default (state = defaultState, action: AnyAction): AnnotationState => {
                     },
                     contextImage: {
                         ...state.player.contextImage,
-                        data: null,
+                        ...(state.player.frame.number === number ? {} : { data: null }),
                     },
                 },
                 annotations: {