From 2da29e4f0b84985132cfcaa529a1c91fffe40b5d Mon Sep 17 00:00:00 2001 From: Boris Sekachev Date: Tue, 9 Feb 2021 14:10:16 +0300 Subject: [PATCH] Do not call HOC component each render (#2780) * Fixed issue #2753 * Updated version & changelog * Wire opencv popover via HOC --- CHANGELOG.md | 1 + cvat-ui/package-lock.json | 2 +- cvat-ui/package.json | 2 +- .../controls-side-bar/draw-cuboid-control.tsx | 5 +-- .../controls-side-bar/draw-points-control.tsx | 5 +-- .../draw-polygon-control.tsx | 5 +-- .../draw-polyline-control.tsx | 5 +-- .../draw-rectangle-control.tsx | 5 +-- .../controls-side-bar/opencv-control.tsx | 8 ++-- .../controls-side-bar/rotate-control.tsx | 4 +- .../controls-side-bar/setup-tag-control.tsx | 5 +-- .../controls-side-bar/tools-control.tsx | 43 +++++++++---------- 12 files changed, 42 insertions(+), 48 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index e7b08362d5e6..b66384c05bdb 100644 --- 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) () - Issue with point region doesn't work in Firefox () - Fixed cuboid perpective change () +- Annotation page popups (ai tools, drawing) reset state after detecting, tracking, drawing () ### Security diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json index eee95796ac76..4a7b3604024b 100644 --- a/cvat-ui/package-lock.json +++ b/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": { diff --git a/cvat-ui/package.json b/cvat-ui/package.json index 260f87dd2b77..87818b21f307 100644 --- a/cvat-ui/package.json +++ b/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": { diff --git 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 index 958b208bba78..0a86df2ebe90 100644 --- 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 @@ -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: { diff --git 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 index 8127059d4a06..462e78c9d695 100644 --- 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 @@ -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: { diff --git 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 index 23f5e7549eb7..f07a324d7cf5 100644 --- 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 @@ -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: { diff --git 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 index 2139ad4dcb9b..a1d3c157b3de 100644 --- 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 @@ -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: { diff --git 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 index 50efd5183f01..0d0462818f5b 100644 --- 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 @@ -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: { diff --git 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 index af59821a378c..90b0e45befd5 100644 --- 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 - + ); } } diff --git 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 index 380e6b55f8a6..3aa537eba7a0 100644 --- 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 @@ -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 ( { private onTracking = async (e: Event): Promise => { 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 { 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 { 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 { const { fetching, trackingProgress } = this.state; if (![...interactors, ...detectors, ...trackers].length) return null; - const CustomPopover = withVisibilityHandling(Popover, 'tools-control'); const dynamcPopoverPros = isActivated ? {