Do not call HOC component each render (#2780)

* Fixed issue #2753 * Updated version & changelog * Wire opencv popover via HOC

Do not call HOC component each render (#2780)
* Fixed issue #2753 * Updated version & changelog * Wire opencv popover via HOC
2da29e4f · Boris Sekachev · GitHub · 0c0c6093 · 2da29e4f · 2da29e4f
12 changed file
--- a/CHANGELOG.md
+++ b/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


--- a/cvat-ui/package-lock.json
+++ b/cvat-ui/package-lock.json
 {
  "name": "cvat-ui",
-  "version": "1.14.0",
+  "version": "1.14.1",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
--- a/cvat-ui/package.json
+++ b/cvat-ui/package.json
 {
  "name": "cvat-ui",
-  "version": "1.14.0",
+  "version": "1.14.1",
  "description": "CVAT single-page application",
  "main": "src/index.tsx",
  "scripts": {

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-cuboid-control.tsx
-// 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: {

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-points-control.tsx
-// 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: {

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polygon-control.tsx
-// 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: {

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-polyline-control.tsx
-// 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: {

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-rectangle-control.tsx
-// 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: {

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/opencv-control.tsx
+++ b/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>
        );
    }
 }

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx
-// 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

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-control.tsx
-// 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: {

--- a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx
+++ b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/tools-control.tsx
-// 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,
-            jobInstance,
-            frame,
-            curZOrder,
-            fetchAnnotations,
+            isActivated, 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 => {
-                                if (typeof value !== 'undefined') {
+                            onChange={(value: number | undefined | string | null): void => {
+                                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 => (
-                            new core.classes.ObjectState({
-                                shapeType: data.type,
-                                label: task.labels.filter((label: any): boolean => label.name === data.label)[0],
-                                points: data.points,
-                                objectType: ObjectType.SHAPE,
-                                frame,
-                                occluded: false,
-                                source: 'auto',
-                                attributes: {},
-                                zOrder: curZOrder,
-                            })
-                        ));
+                        const states = result.map(
+                            (data: any): any =>
+                                new core.classes.ObjectState({
+                                    shapeType: data.type,
+                                    label: task.labels.filter((label: any): boolean => label.name === data.label)[0],
+                                    points: data.points,
+                                    objectType: ObjectType.SHAPE,
+                                    frame,
+                                    occluded: false,
+                                    source: 'auto',
+                                    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 ?
            {