Fixed: Canvas is busy

CHANGELOG.md

@@ -32,6 +32,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - UI fails with the error "Cannot read property 'label' of undefined" (<https://github.com/openvinotoolkit/cvat/pull/2442>)
 - Exception: "Value must be a user instance" (<https://github.com/openvinotoolkit/cvat/pull/2441>)
 - Reset zoom option doesn't work in tag annotation mode (<https://github.com/openvinotoolkit/cvat/pull/2443>)
+- Canvas is busy error (<https://github.com/openvinotoolkit/cvat/pull/2437>)
 
 ### Security
 

cvat-ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.10.5",
+  "version": "1.10.6",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx

@@ -109,7 +109,7 @@ function PlayerButtons(props: Props): JSX.Element {
             <Popover
                 trigger='contextMenu'
                 placement='bottom'
-                content={
+                content={(
                     <>
                         <Tooltip title={`${prevRegularText}`} mouseLeaveDelay={0}>
                             <Icon
@@ -139,7 +139,7 @@ function PlayerButtons(props: Props): JSX.Element {
                             />
                         </Tooltip>
                     </>
-                }
+                )}
             >
                 <Tooltip
                     placement='top'
@@ -163,7 +163,7 @@ function PlayerButtons(props: Props): JSX.Element {
             <Popover
                 trigger='contextMenu'
                 placement='bottom'
-                content={
+                content={(
                     <>
                         <Tooltip title={`${nextRegularText}`} mouseLeaveDelay={0}>
                             <Icon
@@ -193,7 +193,7 @@ function PlayerButtons(props: Props): JSX.Element {
                             />
                         </Tooltip>
                     </>
-                }
+                )}
             >
                 <Tooltip placement='top' mouseLeaveDelay={0} title={`${nextButtonTooltipMessage} ${nextFrameShortcut}`}>
                     {nextButton}

cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx

@@ -231,15 +231,19 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
     }
 
     private undo = (): void => {
-        const { undo, jobInstance, frameNumber, canvasInstance } = this.props;
+        const {
+            undo, jobInstance, frameNumber, canvasInstance,
+        } = this.props;
 
         if (canvasInstance.isAbleToChangeFrame()) {
             undo(jobInstance, frameNumber);
         }
     };
 
     private redo = (): void => {
-        const { redo, jobInstance, frameNumber, canvasInstance } = this.props;
+        const {
+            redo, jobInstance, frameNumber, canvasInstance,
+        } = this.props;
 
         if (canvasInstance.isAbleToChangeFrame()) {
             redo(jobInstance, frameNumber);
@@ -253,7 +257,9 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
     };
 
     private onSwitchPlay = (): void => {
-        const { frameNumber, jobInstance, onSwitchPlay, playing } = this.props;
+        const {
+            frameNumber, jobInstance, onSwitchPlay, playing,
+        } = this.props;
 
         if (playing) {
             onSwitchPlay(false);
@@ -263,7 +269,9 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
     };
 
     private onFirstFrame = (): void => {
-        const { frameNumber, jobInstance, playing, onSwitchPlay } = this.props;
+        const {
+            frameNumber, jobInstance, playing, onSwitchPlay,
+        } = this.props;
 
         const newFrame = jobInstance.startFrame;
         if (newFrame !== frameNumber) {
@@ -275,7 +283,9 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
     };
 
     private onBackward = (): void => {
-        const { frameNumber, frameStep, jobInstance, playing, onSwitchPlay } = this.props;
+        const {
+            frameNumber, frameStep, jobInstance, playing, onSwitchPlay,
+        } = this.props;
 
         const newFrame = Math.max(jobInstance.startFrame, frameNumber - frameStep);
         if (newFrame !== frameNumber) {
@@ -288,46 +298,54 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
 
     private onPrevFrame = (): void => {
         const { prevButtonType } = this.state;
-        const { frameNumber, jobInstance, playing, onSwitchPlay, searchAnnotations, searchEmptyFrame } = this.props;
+        const {
+            frameNumber, jobInstance, playing, onSwitchPlay,
+        } = this.props;
         const { startFrame } = jobInstance;
 
         const newFrame = Math.max(jobInstance.startFrame, frameNumber - 1);
         if (newFrame !== frameNumber) {
             if (playing) {
                 onSwitchPlay(false);
             }
+
             if (prevButtonType === 'regular') {
                 this.changeFrame(newFrame);
             } else if (prevButtonType === 'filtered') {
-                searchAnnotations(jobInstance, frameNumber - 1, startFrame);
+                this.searchAnnotations(frameNumber - 1, startFrame);
             } else {
-                searchEmptyFrame(jobInstance, frameNumber - 1, startFrame);
+                this.searchEmptyFrame(frameNumber - 1, startFrame);
             }
         }
     };
 
     private onNextFrame = (): void => {
         const { nextButtonType } = this.state;
-        const { frameNumber, jobInstance, playing, onSwitchPlay, searchAnnotations, searchEmptyFrame } = this.props;
+        const {
+            frameNumber, jobInstance, playing, onSwitchPlay,
+        } = this.props;
         const { stopFrame } = jobInstance;
 
         const newFrame = Math.min(jobInstance.stopFrame, frameNumber + 1);
         if (newFrame !== frameNumber) {
             if (playing) {
                 onSwitchPlay(false);
             }
+
             if (nextButtonType === 'regular') {
                 this.changeFrame(newFrame);
             } else if (nextButtonType === 'filtered') {
-                searchAnnotations(jobInstance, frameNumber + 1, stopFrame);
+                this.searchAnnotations(frameNumber + 1, stopFrame);
             } else {
-                searchEmptyFrame(jobInstance, frameNumber + 1, stopFrame);
+                this.searchEmptyFrame(frameNumber + 1, stopFrame);
             }
         }
     };
 
     private onForward = (): void => {
-        const { frameNumber, frameStep, jobInstance, playing, onSwitchPlay } = this.props;
+        const {
+            frameNumber, frameStep, jobInstance, playing, onSwitchPlay,
+        } = this.props;
 
         const newFrame = Math.min(jobInstance.stopFrame, frameNumber + frameStep);
         if (newFrame !== frameNumber) {
@@ -339,7 +357,9 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
     };
 
     private onLastFrame = (): void => {
-        const { frameNumber, jobInstance, playing, onSwitchPlay } = this.props;
+        const {
+            frameNumber, jobInstance, playing, onSwitchPlay,
+        } = this.props;
 
         const newFrame = jobInstance.stopFrame;
         if (newFrame !== frameNumber) {
@@ -418,6 +438,20 @@ class AnnotationTopBarContainer extends React.PureComponent<Props, State> {
         }
     }
 
+    private searchAnnotations(start: number, stop: number): void {
+        const { canvasInstance, jobInstance, searchAnnotations } = this.props;
+        if (canvasInstance.isAbleToChangeFrame()) {
+            searchAnnotations(jobInstance, start, stop);
+        }
+    }
+
+    private searchEmptyFrame(start: number, stop: number): void {
+        const { canvasInstance, jobInstance, searchAnnotations } = this.props;
+        if (canvasInstance.isAbleToChangeFrame()) {
+            searchAnnotations(jobInstance, start, stop);
+        }
+    }
+
     public render(): JSX.Element {
         const { nextButtonType, prevButtonType } = this.state;
         const {