CVAT UI: batch of fixes (#1955)

cvat-ai · Jul 29, 2020 · 667a3f9 · 667a3f9
1 parent 7679434
commit 667a3f9
Show file tree

Hide file tree

Showing 44 changed files with 141 additions and 128 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -36,6 +36,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - No mapping between side object element and context menu in some attributes (<https://github.com/opencv/cvat/pull/1923>)
 - Interpolated shapes exported as `keyframe = True` (<https://github.com/opencv/cvat/pull/1937>)
 - Stylelint filetype scans (<https://github.com/opencv/cvat/pull/1952>)
+- Fixed toolip closing issue (<https://github.com/opencv/cvat/pull/1955>)
 
 ### Security
 -

diff --git a/cvat-ui/package-lock.json b/cvat-ui/package-lock.json
diff --git a/cvat-ui/package.json b/cvat-ui/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cvat-ui",
-  "version": "1.6.4",
+  "version": "1.6.5",
   "description": "CVAT single-page application",
   "main": "src/index.tsx",
   "scripts": {

diff --git a/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx b/cvat-ui/src/components/annotation-page/annotations-filters-input.tsx
@@ -147,7 +147,7 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele
             placeholder={
                 underCursor ? (
                     <>
-                        <Tooltip title='Click to open help'>
+                        <Tooltip title='Click to open help' mouseLeaveDelay={0}>
                             <Icon
                                 type='filter'
                                 onClick={(e: React.MouseEvent) => {

diff --git a/...n-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx b/...n-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
@@ -28,16 +28,16 @@ function AttributeSwitcher(props: Props): JSX.Element {
     const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
     return (
         <div className='attribute-annotation-sidebar-switcher'>
-            <Tooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`}>
+            <Tooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`} mouseLeaveDelay={0}>
                 <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
                     <Icon type='left' />
                 </Button>
             </Tooltip>
-            <Tooltip title={title}>
+            <Tooltip title={title} mouseLeaveDelay={0}>
                 <Text className='cvat-text'>{currentAttribute}</Text>
                 <Text strong>{` [${currentIndex + 1}/${attributesCount}]`}</Text>
             </Tooltip>
-            <Tooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`}>
+            <Tooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`} mouseLeaveDelay={0}>
                 <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
                     <Icon type='right' />
                 </Button>

diff --git a/...tion-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx b/...tion-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
@@ -32,17 +32,17 @@ function ObjectSwitcher(props: Props): JSX.Element {
     const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
     return (
         <div className='attribute-annotation-sidebar-switcher'>
-            <Tooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`}>
+            <Tooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`} mouseLeaveDelay={0}>
                 <Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
                     <Icon type='left' />
                 </Button>
             </Tooltip>
-            <Tooltip title={title}>
+            <Tooltip title={title} mouseLeaveDelay={0}>
                 <Text className='cvat-text'>{currentLabel}</Text>
                 <Text className='cvat-text'>{` ${clientID} `}</Text>
                 <Text strong>{`[${currentIndex + 1}/${objectsCount}]`}</Text>
             </Tooltip>
-            <Tooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`}>
+            <Tooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`} mouseLeaveDelay={0}>
                 <Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
                     <Icon type='right' />
                 </Button>

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-point-context-menu.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-point-context-menu.tsx
@@ -111,7 +111,7 @@ function CanvasPointContextMenu(props: Props): React.ReactPortal | null {
     return visible && contextMenuFor && type === ContextMenuType.CANVAS_SHAPE_POINT
         ? (ReactDOM.createPortal(
             <div className='cvat-canvas-point-context-menu' style={{ top, left }}>
-                <Tooltip title='Delete point [Ctrl + dblclick]'>
+                <Tooltip title='Delete point [Ctrl + dblclick]' mouseLeaveDelay={0}>
                     <Button type='link' icon='delete' onClick={onPointDelete}>
                         Delete point
                     </Button>

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx
@@ -876,7 +876,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
                         defaultValue={0}
                         onChange={(value: SliderValue): void => onSwitchZLayer(value as number)}
                     />
-                    <Tooltip title={`Add new layer ${maxZLayer + 1} and switch to it`}>
+                    <Tooltip title={`Add new layer ${maxZLayer + 1} and switch to it`} mouseLeaveDelay={0}>
                         <Icon type='plus-circle' onClick={onAddZLayer} />
                     </Tooltip>
                 </div>

diff --git a/...ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx b/...ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx
@@ -24,7 +24,7 @@ function CursorControl(props: Props): JSX.Element {
     } = props;
 
     return (
-        <Tooltip title={`Cursor ${cursorShortkey}`} placement='right'>
+        <Tooltip title={`Cursor ${cursorShortkey}`} placement='right' mouseLeaveDelay={0}>
             <Icon
                 component={CursorIcon}
                 className={activeControl === ActiveControl.CURSOR

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/dextr-plugin.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/dextr-plugin.tsx
@@ -62,7 +62,7 @@ function DEXTRPlugin(props: StateToProps & DispatchToProps): JSX.Element | null
 
     return (
         pluginEnabled ? (
-            <Tooltip title='Make AI polygon from at least 4 extreme points using deep extreme cut'>
+            <Tooltip title='Make AI polygon from at least 4 extreme points using deep extreme cut' mouseLeaveDelay={0}>
                 <Checkbox
                     style={{ marginTop: 5 }}
                     checked={pluginActivated}

diff --git a/...rc/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx b/...rc/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
@@ -186,14 +186,14 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
             }
             <Row type='flex' justify='space-around'>
                 <Col span={12}>
-                    <Tooltip title={`Press ${repeatShapeShortcut} to draw again`}>
+                    <Tooltip title={`Press ${repeatShapeShortcut} to draw again`} mouseLeaveDelay={0}>
                         <Button onClick={onDrawShape}>
                             Shape
                         </Button>
                     </Tooltip>
                 </Col>
                 <Col span={12}>
-                    <Tooltip title={`Press ${repeatShapeShortcut} to draw again`}>
+                    <Tooltip title={`Press ${repeatShapeShortcut} to draw again`} mouseLeaveDelay={0}>
                         <Button onClick={onDrawTrack}>
                             Track
                         </Button>

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx
@@ -19,7 +19,7 @@ function FitControl(props: Props): JSX.Element {
     } = props;
 
     return (
-        <Tooltip title='Fit the image [Double Click]' placement='right'>
+        <Tooltip title='Fit the image [Double Click]' placement='right' mouseLeaveDelay={0}>
             <Icon component={FitIcon} onClick={(): void => canvasInstance.fit()} />
         </Tooltip>
     );

diff --git a/...-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx b/...-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx
@@ -45,7 +45,7 @@ function GroupControl(props: Props): JSX.Element {
     const title = `Group shapes/tracks ${switchGroupShortcut}.`
         + ` Select and press ${resetGroupShortcut} to reset a group`;
     return (
-        <Tooltip title={title} placement='right'>
+        <Tooltip title={title} placement='right' mouseLeaveDelay={0}>
             <Icon {...dynamicIconProps} component={GroupIcon} />
         </Tooltip>
     );

diff --git a/...-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx b/...-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx
@@ -41,7 +41,7 @@ function MergeControl(props: Props): JSX.Element {
         };
 
     return (
-        <Tooltip title={`Merge shapes/tracks ${switchMergeShortcut}`} placement='right'>
+        <Tooltip title={`Merge shapes/tracks ${switchMergeShortcut}`} placement='right' mouseLeaveDelay={0}>
             <Icon {...dynamicIconProps} component={MergeIcon} />
         </Tooltip>
     );

diff --git a/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx b/cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx
@@ -19,7 +19,7 @@ function MoveControl(props: Props): JSX.Element {
     const { canvasInstance, activeControl } = props;
 
     return (
-        <Tooltip title='Move the image' placement='right'>
+        <Tooltip title='Move the image' placement='right' mouseLeaveDelay={0}>
             <Icon
                 component={MoveIcon}
                 className={activeControl === ActiveControl.DRAG_CANVAS

diff --git a/...ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx b/...ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx
@@ -22,7 +22,7 @@ function ResizeControl(props: Props): JSX.Element {
     } = props;
 
     return (
-        <Tooltip title='Select a region of interest' placement='right'>
+        <Tooltip title='Select a region of interest' placement='right' mouseLeaveDelay={0}>
             <Icon
                 component={ZoomIcon}
                 className={activeControl === ActiveControl.ZOOM_CANVAS

diff --git a/...ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx b/...ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx
@@ -29,14 +29,14 @@ function RotateControl(props: Props): JSX.Element {
             placement='right'
             content={(
                 <>
-                    <Tooltip title={`Rotate the image anticlockwise ${anticlockwiseShortcut}`} placement='topRight'>
+                    <Tooltip title={`Rotate the image anticlockwise ${anticlockwiseShortcut}`} placement='topRight' mouseLeaveDelay={0}>
                         <Icon
                             className='cvat-rotate-canvas-controls-left'
                             onClick={(): void => rotateFrame(Rotation.ANTICLOCKWISE90)}
                             component={RotateIcon}
                         />
                     </Tooltip>
-                    <Tooltip title={`Rotate the image clockwise ${clockwiseShortcut}`} placement='topRight'>
+                    <Tooltip title={`Rotate the image clockwise ${clockwiseShortcut}`} placement='topRight' mouseLeaveDelay={0}>
                         <Icon
                             className='cvat-rotate-canvas-controls-right'
                             onClick={(): void => rotateFrame(Rotation.CLOCKWISE90)}

diff --git a/...src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx b/...src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
@@ -61,7 +61,7 @@ function SetupTagPopover(props: Props): JSX.Element {
             </Row>
             <Row type='flex' justify='space-around'>
                 <Col span={24}>
-                    <Tooltip title={`Press ${repeatShapeShortcut} to add a tag again`}>
+                    <Tooltip title={`Press ${repeatShapeShortcut} to add a tag again`} mouseLeaveDelay={0}>
                         <Button onClick={() => onSetup(selectedLabeID)}>
                             Tag
                         </Button>

diff --git a/...-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx b/...-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx
@@ -41,7 +41,7 @@ function SplitControl(props: Props): JSX.Element {
         };
 
     return (
-        <Tooltip title={`Split a track ${switchSplitShortcut}`} placement='right'>
+        <Tooltip title={`Split a track ${switchSplitShortcut}`} placement='right' mouseLeaveDelay={0}>
             <Icon {...dynamicIconProps} component={SplitIcon} />
         </Tooltip>
     );

diff --git a/...src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx b/...src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx
@@ -74,7 +74,7 @@ function ItemTopComponent(props: Props): JSX.Element {
                 <Text type='secondary' style={{ fontSize: 10 }}>{type}</Text>
             </Col>
             <Col span={12}>
-                <Tooltip title='Change current label'>
+                <Tooltip title='Change current label' mouseLeaveDelay={0}>
                     <Select
                         size='small'
                         value={`${labelID}`}

diff --git a/...rc/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx b/...rc/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
@@ -113,7 +113,7 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                         <Col>
                             { navigatePrevKeyframe
                                 ? (
-                                    <Tooltip title={`Go to previous keyframe ${prevKeyFrameShortcut}`}>
+                                    <Tooltip title={`Go to previous keyframe ${prevKeyFrameShortcut}`} mouseLeaveDelay={0}>
                                         <Icon
                                             component={PreviousIcon}
                                             onClick={navigatePrevKeyframe}
@@ -125,7 +125,7 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                         <Col>
                             { navigateNextKeyframe
                                 ? (
-                                    <Tooltip title={`Go to next keyframe ${nextKeyFrameShortcut}`}>
+                                    <Tooltip title={`Go to next keyframe ${nextKeyFrameShortcut}`} mouseLeaveDelay={0}>
                                         <Icon
                                             component={NextIcon}
                                             onClick={navigateNextKeyframe}
@@ -142,7 +142,7 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                     </Row>
                     <Row type='flex' justify='space-around'>
                         <Col>
-                            <Tooltip title={`Switch outside property ${switchOutsideShortcut}`}>
+                            <Tooltip title={`Switch outside property ${switchOutsideShortcut}`} mouseLeaveDelay={0}>
                                 { outside
                                     ? (
                                         <Icon
@@ -155,28 +155,28 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                             </Tooltip>
                         </Col>
                         <Col>
-                            <Tooltip title={`Switch lock property ${switchLockShortcut}`}>
+                            <Tooltip title={`Switch lock property ${switchLockShortcut}`} mouseLeaveDelay={0}>
                                 { locked
                                     ? <Icon type='lock' theme='filled' onClick={unlock} />
                                     : <Icon type='unlock' onClick={lock} />}
                             </Tooltip>
                         </Col>
                         <Col>
-                            <Tooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
+                            <Tooltip title={`Switch occluded property ${switchOccludedShortcut}`} mouseLeaveDelay={0}>
                                 { occluded
                                     ? <Icon type='team' onClick={unsetOccluded} />
                                     : <Icon type='user' onClick={setOccluded} />}
                             </Tooltip>
                         </Col>
                         <Col>
-                            <Tooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
+                            <Tooltip title={`Switch hidden property ${switchHiddenShortcut}`} mouseLeaveDelay={0}>
                                 { hidden
                                     ? <Icon type='eye-invisible' theme='filled' onClick={show} style={hiddenStyle} />
                                     : <Icon type='eye' onClick={hide} style={hiddenStyle} />}
                             </Tooltip>
                         </Col>
                         <Col>
-                            <Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`}>
+                            <Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`} mouseLeaveDelay={0}>
                                 { keyframe
                                     ? <Icon type='star' theme='filled' onClick={unsetKeyframe} style={keyframeStyle} />
                                     : <Icon type='star' onClick={setKeyframe} style={keyframeStyle} />}
@@ -185,7 +185,7 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                         {
                             shapeType !== ShapeType.POINTS && (
                                 <Col>
-                                    <Tooltip title='Switch pinned property'>
+                                    <Tooltip title='Switch pinned property' mouseLeaveDelay={0}>
                                         { pinned
                                             ? <Icon type='pushpin' theme='filled' onClick={unpin} />
                                             : <Icon type='pushpin' onClick={pin} />}
@@ -205,7 +205,7 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                 <Col span={20} style={{ textAlign: 'center' }}>
                     <Row type='flex' justify='space-around'>
                         <Col>
-                            <Tooltip title={`Switch lock property ${switchLockShortcut}`}>
+                            <Tooltip title={`Switch lock property ${switchLockShortcut}`} mouseLeaveDelay={0}>
                                 { locked
                                     ? <Icon type='lock' onClick={unlock} theme='filled' />
                                     : <Icon type='unlock' onClick={lock} />}
@@ -222,21 +222,21 @@ function ItemButtonsComponent(props: Props): JSX.Element {
             <Col span={20} style={{ textAlign: 'center' }}>
                 <Row type='flex' justify='space-around'>
                     <Col>
-                        <Tooltip title={`Switch lock property ${switchLockShortcut}`}>
+                        <Tooltip title={`Switch lock property ${switchLockShortcut}`} mouseLeaveDelay={0}>
                             { locked
                                 ? <Icon type='lock' onClick={unlock} theme='filled' />
                                 : <Icon type='unlock' onClick={lock} />}
                         </Tooltip>
                     </Col>
                     <Col>
-                        <Tooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
+                        <Tooltip title={`Switch occluded property ${switchOccludedShortcut}`} mouseLeaveDelay={0}>
                             { occluded
                                 ? <Icon type='team' onClick={unsetOccluded} />
                                 : <Icon type='user' onClick={setOccluded} />}
                         </Tooltip>
                     </Col>
                     <Col>
-                        <Tooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
+                        <Tooltip title={`Switch hidden property ${switchHiddenShortcut}`} mouseLeaveDelay={0}>
                             { hidden
                                 ? <Icon type='eye-invisible' onClick={show} />
                                 : <Icon type='eye' onClick={hide} />}
@@ -245,7 +245,7 @@ function ItemButtonsComponent(props: Props): JSX.Element {
                     {
                         shapeType !== ShapeType.POINTS && (
                             <Col>
-                                <Tooltip title='Switch pinned property'>
+                                <Tooltip title='Switch pinned property' mouseLeaveDelay={0}>
                                     { pinned
                                         ? <Icon type='pushpin' theme='filled' onClick={unpin} />
                                         : <Icon type='pushpin' onClick={pin} />}