Do not call HOC component each render (#2780)

* Fixed issue #2753

* Updated version & changelog

* Wire opencv popover via HOC

CHANGELOG.md

@@ -39,6 +39,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - A couple of css-related issues (top bar disappear, wrong arrow position on collapse elements) (<https://github.com/openvinotoolkit/cvat/pull/2736>)
 - Issue with point region doesn't work in Firefox (<https://github.com/openvinotoolkit/cvat/pull/2727>)
 - Fixed cuboid perpective change (<https://github.com/openvinotoolkit/cvat/pull/2733>)
+- Annotation page popups (ai tools, drawing) reset state after detecting, tracking, drawing (<https://github.com/openvinotoolkit/cvat/pull/2780>)
 
 ### Security
 

cvat-ui/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.14.0",
+  "version": "1.14.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {

cvat-ui/package.json

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

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -19,10 +19,9 @@ interface Props {
     isDrawing: boolean;
 }
 
+const CustomPopover = withVisibilityHandling(Popover, 'draw-cuboid');
 function DrawPolygonControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
-    const CustomPopover = withVisibilityHandling(Popover, 'draw-cuboid');
-
     const dynamcPopoverPros = isDrawing ?
         {
             overlayStyle: {

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -18,10 +18,9 @@ interface Props {
     isDrawing: boolean;
 }
 
+const CustomPopover = withVisibilityHandling(Popover, 'draw-points');
 function DrawPointsControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
-    const CustomPopover = withVisibilityHandling(Popover, 'draw-points');
-
     const dynamcPopoverPros = isDrawing ?
         {
             overlayStyle: {

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -18,10 +18,9 @@ interface Props {
     isDrawing: boolean;
 }
 
+const CustomPopover = withVisibilityHandling(Popover, 'draw-polygon');
 function DrawPolygonControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
-    const CustomPopover = withVisibilityHandling(Popover, 'draw-polygon');
-
     const dynamcPopoverPros = isDrawing ?
         {
             overlayStyle: {

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -18,10 +18,9 @@ interface Props {
     isDrawing: boolean;
 }
 
+const CustomPopover = withVisibilityHandling(Popover, 'draw-polyline');
 function DrawPolylineControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
-    const CustomPopover = withVisibilityHandling(Popover, 'draw-polyline');
-
     const dynamcPopoverPros = isDrawing ?
         {
             overlayStyle: {

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -18,10 +18,9 @@ interface Props {
     isDrawing: boolean;
 }
 
+const CustomPopover = withVisibilityHandling(Popover, 'draw-rectangle');
 function DrawRectangleControl(props: Props): JSX.Element {
     const { canvasInstance, isDrawing } = props;
-    const CustomPopover = withVisibilityHandling(Popover, 'draw-rectangle');
-
     const dynamcPopoverPros = isDrawing ?
         {
             overlayStyle: {

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/opencv-control.tsx

@@ -29,6 +29,7 @@ import {
     createAnnotationsAsync,
 } from 'actions/annotation-actions';
 import LabelSelector from 'components/label-selector/label-selector';
+import withVisibilityHandling from './handle-popover-visibility';
 
 interface Props {
     labels: any[];
@@ -55,6 +56,7 @@ interface State {
 }
 
 const core = getCore();
+const CustomPopover = withVisibilityHandling(Popover, 'opencv-control');
 
 function mapStateToProps(state: CombinedState): Props {
     const {
@@ -73,7 +75,7 @@ function mapStateToProps(state: CombinedState): Props {
 
     return {
         isActivated: activeControl === ActiveControl.OPENCV_TOOLS,
-        canvasInstance,
+        canvasInstance: canvasInstance as Canvas,
         jobInstance,
         curZOrder,
         labels,
@@ -402,14 +404,14 @@ class OpenCVControlComponent extends React.PureComponent<Props & DispatchToProps
             };
 
         return (
-            <Popover
+            <CustomPopover
                 {...dynamcPopoverPros}
                 placement='right'
                 overlayClassName='cvat-opencv-control-popover'
                 content={this.renderContent()}
             >
                 <Icon {...dynamicIconProps} component={OpenCVIcon} />
-            </Popover>
+            </CustomPopover>
         );
     }
 }

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -18,9 +18,9 @@ interface Props {
     rotateFrame(rotation: Rotation): void;
 }
 
+const CustomPopover = withVisibilityHandling(Popover, 'rotate-canvas');
 function RotateControl(props: Props): JSX.Element {
     const { anticlockwiseShortcut, clockwiseShortcut, rotateFrame } = props;
-    const CustomPopover = withVisibilityHandling(Popover, 'rotate-canvas');
 
     return (
         <CustomPopover

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -17,10 +17,9 @@ interface Props {
     isDrawing: boolean;
 }
 
+const CustomPopover = withVisibilityHandling(Popover, 'setup-tag');
 function SetupTagControl(props: Props): JSX.Element {
     const { isDrawing } = props;
-    const CustomPopover = withVisibilityHandling(Popover, 'setup-tag');
-
     const dynamcPopoverPros = isDrawing ?
         {
             overlayStyle: {

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx

@@ -1,4 +1,4 @@
-// Copyright (C) 2020 Intel Corporation
+// Copyright (C) 2020-2021 Intel Corporation
 //
 // SPDX-License-Identifier: MIT
 
@@ -56,6 +56,7 @@ interface DispatchToProps {
 }
 
 const core = getCore();
+const CustomPopover = withVisibilityHandling(Popover, 'tools-control');
 
 function mapStateToProps(state: CombinedState): StateToProps {
     const { annotation } = state;
@@ -73,7 +74,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         activeLabelID: annotation.drawing.activeLabelID,
         labels: annotation.job.labels,
         states: annotation.annotations.states,
-        canvasInstance,
+        canvasInstance: canvasInstance as Canvas,
         jobInstance,
         frame,
         curZOrder: annotation.annotations.zLayer.cur,
@@ -303,11 +304,7 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
 
     private onTracking = async (e: Event): Promise<void> => {
         const {
-            isActivated,
+            isActivated, jobInstance, frame, curZOrder, fetchAnnotations,
-            jobInstance,
-            frame,
-            curZOrder,
-            fetchAnnotations,
         } = this.props;
 
         if (!isActivated) {
@@ -520,8 +517,8 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                             min={1}
                             precision={0}
                             max={jobInstance.stopFrame - frame}
-                            onChange={(value: number | undefined | string): void => {
+                            onChange={(value: number | undefined | string | null): void => {
-                                if (typeof value !== 'undefined') {
+                                if (typeof value !== 'undefined' && value !== null) {
                                     this.setState({
                                         trackingFrames: +value,
                                     });
@@ -659,19 +656,20 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
                     try {
                         this.setState({ mode: 'detection', fetching: true });
                         const result = await core.lambda.call(task, model, { ...body, frame });
-                        const states = result.map((data: any): any => (
+                        const states = result.map(
-                            new core.classes.ObjectState({
+                            (data: any): any =>
-                                shapeType: data.type,
+                                new core.classes.ObjectState({
-                                label: task.labels.filter((label: any): boolean => label.name === data.label)[0],
+                                    shapeType: data.type,
-                                points: data.points,
+                                    label: task.labels.filter((label: any): boolean => label.name === data.label)[0],
-                                objectType: ObjectType.SHAPE,
+                                    points: data.points,
-                                frame,
+                                    objectType: ObjectType.SHAPE,
-                                occluded: false,
+                                    frame,
-                                source: 'auto',
+                                    occluded: false,
-                                attributes: {},
+                                    source: 'auto',
-                                zOrder: curZOrder,
+                                    attributes: {},
-                            })
+                                    zOrder: curZOrder,
-                        ));
+                                }),
+                        );
 
                         await jobInstance.annotations.put(states);
                         fetchAnnotations();
@@ -722,7 +720,6 @@ export class ToolsControlComponent extends React.PureComponent<Props, State> {
         const { fetching, trackingProgress } = this.state;
 
         if (![...interactors, ...detectors, ...trackers].length) return null;
-        const CustomPopover = withVisibilityHandling(Popover, 'tools-control');
 
         const dynamcPopoverPros = isActivated ?
             {