wangchunlin
/
cvat
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Shared tooltip component with common settings [Refactoring only] (#2783)

Browse Source 
* Popover trigger on click, shared tooltip component

* Aborted trigger

* Updated version
main
Boris Sekachev 5 years ago committed by GitHub
parent f49eec7fba
commit 9a56e7edd5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
42 changed files with 400 additions and 347 deletions
Show Stats Download Patch File Download Diff File

8
cvat-ui/src/components/annotation-page/annotations-filters-input.tsx
Unescape Escape View File

@ -8,7 +8,6 @@ import Select, { SelectValue, LabeledValue } from 'antd/lib/select';
import Title from 'antd/lib/typography/Title'; import Title from 'antd/lib/typography/Title';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import Paragraph from 'antd/lib/typography/Paragraph'; import Paragraph from 'antd/lib/typography/Paragraph';
import Tooltip from 'antd/lib/tooltip';
import Modal from 'antd/lib/modal'; import Modal from 'antd/lib/modal';
import { FilterOutlined } from '@ant-design/icons'; import { FilterOutlined } from '@ant-design/icons';
@ -16,6 +15,7 @@ import {
changeAnnotationsFilters as changeAnnotationsFiltersAction, changeAnnotationsFilters as changeAnnotationsFiltersAction,
fetchAnnotationsAsync, fetchAnnotationsAsync,
} from 'actions/annotation-actions'; } from 'actions/annotation-actions';
import CVATTooltip from 'components/common/cvat-tooltip';
import { CombinedState } from 'reducers/interfaces'; import { CombinedState } from 'reducers/interfaces';
interface StateToProps { interface StateToProps {
@ -53,7 +53,7 @@ function mapDispatchToProps(dispatch: any): DispatchToProps {
dispatch(fetchAnnotationsAsync()); dispatch(fetchAnnotationsAsync());
} else if ( } else if (
Array.isArray(value) && Array.isArray(value) &&
value.every((element: string | number | LabeledValue): boolean => typeof element === 'string') !value.some((element: string | number | LabeledValue): boolean => typeof element !== 'string')
) { ) {
dispatch(changeAnnotationsFiltersAction(value as string[])); dispatch(changeAnnotationsFiltersAction(value as string[]));
dispatch(fetchAnnotationsAsync()); dispatch(fetchAnnotationsAsync());
@ -134,7 +134,7 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele
placeholder={ placeholder={
underCursor ? ( underCursor ? (
<> <>
<Tooltip title='Click to open help' mouseLeaveDelay={0}> <CVATTooltip title='Click to open help'>
<FilterOutlined <FilterOutlined
style={{ pointerEvents: 'all' }} style={{ pointerEvents: 'all' }}
onClick={() => { onClick={() => {
@ -152,7 +152,7 @@ function AnnotationsFiltersInput(props: StateToProps & DispatchToProps): JSX.Ele
onMouseEnter={() => setDropdownVisible(false)} onMouseEnter={() => setDropdownVisible(false)}
onMouseLeave={() => setDropdownVisible(true)} onMouseLeave={() => setDropdownVisible(true)}
/> />
</Tooltip> </CVATTooltip>
</> </>
) : ( ) : (
<> <>

29
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx
Unescape Escape View File

@ -1,13 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import Tooltip from 'antd/lib/tooltip';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import { LeftOutlined, RightOutlined } from '@ant-design/icons'; import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
currentAttribute: string; currentAttribute: string;
currentIndex: number; currentIndex: number;
@ -24,20 +25,28 @@ function AttributeSwitcher(props: Props): JSX.Element {
const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`; const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
return ( return (
<div className='cvat-attribute-annotation-sidebar-attribute-switcher'> <div className='cvat-attribute-annotation-sidebar-attribute-switcher'>
<Tooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`} mouseLeaveDelay={0}> <CVATTooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`}>
<Button className='cvat-attribute-annotation-sidebar-attribute-switcher-left' disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}> <Button
className='cvat-attribute-annotation-sidebar-attribute-switcher-left'
disabled={attributesCount <= 1}
onClick={() => nextAttribute(-1)}
>
<LeftOutlined /> <LeftOutlined />
</Button> </Button>
</Tooltip> </CVATTooltip>
<Tooltip title={title} mouseLeaveDelay={0}> <CVATTooltip title={title}>
<Text className='cvat-text'>{currentAttribute}</Text> <Text className='cvat-text'>{currentAttribute}</Text>
<Text strong>{` [${currentIndex + 1}/${attributesCount}]`}</Text> <Text strong>{` [${currentIndex + 1}/${attributesCount}]`}</Text>
</Tooltip> </CVATTooltip>
<Tooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`} mouseLeaveDelay={0}> <CVATTooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`}>
<Button className='cvat-attribute-annotation-sidebar-attribute-switcher-right' disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}> <Button
className='cvat-attribute-annotation-sidebar-attribute-switcher-right'
disabled={attributesCount <= 1}
onClick={() => nextAttribute(1)}
>
<RightOutlined /> <RightOutlined />
</Button> </Button>
</Tooltip> </CVATTooltip>
</div> </div>
); );
} }

29
cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx
Unescape Escape View File

@ -1,13 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import Tooltip from 'antd/lib/tooltip';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import { LeftOutlined, RightOutlined } from '@ant-design/icons'; import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
currentLabel: string; currentLabel: string;
clientID: number; clientID: number;
@ -26,21 +27,29 @@ function ObjectSwitcher(props: Props): JSX.Element {
const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`; const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
return ( return (
<div className='cvat-attribute-annotation-sidebar-object-switcher'> <div className='cvat-attribute-annotation-sidebar-object-switcher'>
<Tooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`} mouseLeaveDelay={0}> <CVATTooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`}>
<Button className='cvat-attribute-annotation-sidebar-object-switcher-left' disabled={objectsCount <= 1} onClick={() => nextObject(-1)}> <Button
className='cvat-attribute-annotation-sidebar-object-switcher-left'
disabled={objectsCount <= 1}
onClick={() => nextObject(-1)}
>
<LeftOutlined /> <LeftOutlined />
</Button> </Button>
</Tooltip> </CVATTooltip>
<Tooltip title={title} mouseLeaveDelay={0}> <CVATTooltip title={title}>
<Text className='cvat-text'>{currentLabel}</Text> <Text className='cvat-text'>{currentLabel}</Text>
<Text className='cvat-text'>{` ${clientID} `}</Text> <Text className='cvat-text'>{` ${clientID} `}</Text>
<Text strong>{`[${currentIndex + 1}/${objectsCount}]`}</Text> <Text strong>{`[${currentIndex + 1}/${objectsCount}]`}</Text>
</Tooltip> </CVATTooltip>
<Tooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`} mouseLeaveDelay={0}> <CVATTooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`}>
<Button className='cvat-attribute-annotation-sidebar-object-switcher-right' disabled={objectsCount <= 1} onClick={() => nextObject(1)}> <Button
className='cvat-attribute-annotation-sidebar-object-switcher-right'
disabled={objectsCount <= 1}
onClick={() => nextObject(1)}
>
<RightOutlined /> <RightOutlined />
</Button> </Button>
</Tooltip> </CVATTooltip>
</div> </div>
); );
} }

8
cvat-ui/src/components/annotation-page/canvas/canvas-point-context-menu.tsx
Unescape Escape View File

@ -1,16 +1,16 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React, { useState } from 'react'; import React, { useState } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip';
import { DeleteOutlined, EnvironmentOutlined } from '@ant-design/icons'; import { DeleteOutlined, EnvironmentOutlined } from '@ant-design/icons';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { CombinedState, ContextMenuType } from 'reducers/interfaces'; import { CombinedState, ContextMenuType } from 'reducers/interfaces';
import { updateAnnotationsAsync, updateCanvasContextMenu } from 'actions/annotation-actions'; import { updateAnnotationsAsync, updateCanvasContextMenu } from 'actions/annotation-actions';
import CVATTooltip from 'components/common/cvat-tooltip';
interface StateToProps { interface StateToProps {
activatedState: any | null; activatedState: any | null;
@ -103,11 +103,11 @@ function CanvasPointContextMenu(props: Props): React.ReactPortal | null {
return visible && contextMenuFor && type === ContextMenuType.CANVAS_SHAPE_POINT ? return visible && contextMenuFor && type === ContextMenuType.CANVAS_SHAPE_POINT ?
ReactDOM.createPortal( ReactDOM.createPortal(
<div className='cvat-canvas-point-context-menu' style={{ top, left }}> <div className='cvat-canvas-point-context-menu' style={{ top, left }}>
<Tooltip title='Delete point [Alt + dblclick]' mouseLeaveDelay={0}> <CVATTooltip title='Delete point [Alt + dblclick]'>
<Button type='link' icon={<DeleteOutlined />} onClick={onPointDelete}> <Button type='link' icon={<DeleteOutlined />} onClick={onPointDelete}>
Delete point Delete point
</Button> </Button>
</Tooltip> </CVATTooltip>
{contextMenuFor && contextMenuFor.shapeType === 'polygon' && ( {contextMenuFor && contextMenuFor.shapeType === 'polygon' && (
<Button type='link' icon={<EnvironmentOutlined />} onClick={onSetStartPoint}> <Button type='link' icon={<EnvironmentOutlined />} onClick={onSetStartPoint}>
Set start point Set start point

11
cvat-ui/src/components/annotation-page/canvas/canvas-wrapper.tsx
Unescape Escape View File

@ -1,13 +1,12 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys'; import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
import Tooltip from 'antd/lib/tooltip';
import Layout from 'antd/lib/layout'; import Layout from 'antd/lib/layout';
import Slider from 'antd/lib/slider'; import Slider from 'antd/lib/slider';
import { PlusCircleOutlined } from '@ant-design/icons';
import { import {
ColorBy, GridColor, ObjectType, ContextMenuType, Workspace, ShapeType, ColorBy, GridColor, ObjectType, ContextMenuType, Workspace, ShapeType,
@ -16,7 +15,7 @@ import { LogType } from 'cvat-logger';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import getCore from 'cvat-core-wrapper'; import getCore from 'cvat-core-wrapper';
import consts from 'consts'; import consts from 'consts';
import { PlusCircleOutlined } from '@ant-design/icons'; import CVATTooltip from 'components/common/cvat-tooltip';
const cvat = getCore(); const cvat = getCore();
@ -908,9 +907,9 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
defaultValue={0} defaultValue={0}
onChange={(value: number): void => onSwitchZLayer(value as number)} onChange={(value: number): void => onSwitchZLayer(value as number)}
/> />
<Tooltip title={`Add new layer ${maxZLayer + 1} and switch to it`} mouseLeaveDelay={0}> <CVATTooltip title={`Add new layer ${maxZLayer + 1} and switch to it`}>
<PlusCircleOutlined onClick={onAddZLayer} /> <PlusCircleOutlined onClick={onAddZLayer} />
</Tooltip> </CVATTooltip>
</div> </div>
</Layout.Content> </Layout.Content>
); );

8
cvat-ui/src/components/annotation-page/review-workspace/controls-side-bar/issue-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { ActiveControl } from 'reducers/interfaces'; import { ActiveControl } from 'reducers/interfaces';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import { RectangleIcon } from 'icons'; import { RectangleIcon } from 'icons';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
canvasInstance: Canvas; canvasInstance: Canvas;
@ -20,7 +20,7 @@ function ResizeControl(props: Props): JSX.Element {
const { activeControl, canvasInstance, selectIssuePosition } = props; const { activeControl, canvasInstance, selectIssuePosition } = props;
return ( return (
<Tooltip title='Open an issue' placement='right' mouseLeaveDelay={0}> <CVATTooltip title='Open an issue' placement='right'>
<Icon <Icon
component={RectangleIcon} component={RectangleIcon}
className={ className={
@ -39,7 +39,7 @@ function ResizeControl(props: Props): JSX.Element {
} }
}} }}
/> />
</Tooltip> </CVATTooltip>
); );
} }

9
cvat-ui/src/components/annotation-page/review/hidden-issue-label.tsx
Unescape Escape View File

@ -1,13 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React, { ReactPortal, useEffect } from 'react'; import React, { ReactPortal, useEffect } from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import Tag from 'antd/lib/tag'; import Tag from 'antd/lib/tag';
import Tooltip from 'antd/lib/tooltip';
import { CheckOutlined, CloseCircleOutlined } from '@ant-design/icons'; import { CheckOutlined, CloseCircleOutlined } from '@ant-design/icons';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
id: number; id: number;
message: string; message: string;
@ -34,7 +35,7 @@ export default function HiddenIssueLabel(props: Props): ReactPortal {
const elementID = `cvat-hidden-issue-label-${id}`; const elementID = `cvat-hidden-issue-label-${id}`;
return ReactDOM.createPortal( return ReactDOM.createPortal(
<Tooltip title={message}> <CVATTooltip title={message}>
<Tag <Tag
id={elementID} id={elementID}
onClick={onClick} onClick={onClick}
@ -50,7 +51,7 @@ export default function HiddenIssueLabel(props: Props): ReactPortal {
)} )}
{message} {message}
</Tag> </Tag>
</Tooltip>, </CVATTooltip>,
window.document.getElementById('cvat_canvas_attachment_board') as HTMLElement, window.document.getElementById('cvat_canvas_attachment_board') as HTMLElement,
); );
} }

12
cvat-ui/src/components/annotation-page/review/issue-dialog.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -9,10 +9,10 @@ import { CloseOutlined } from '@ant-design/icons';
import Comment from 'antd/lib/comment'; import Comment from 'antd/lib/comment';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import Title from 'antd/lib/typography/Title'; import Title from 'antd/lib/typography/Title';
import Tooltip from 'antd/lib/tooltip';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Input from 'antd/lib/input'; import Input from 'antd/lib/input';
import moment from 'moment'; import moment from 'moment';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
id: number; id: number;
@ -67,9 +67,9 @@ export default function IssueDialog(props: Props): JSX.Element {
author={<Text strong>{_comment.author ? _comment.author.username : 'Unknown'}</Text>} author={<Text strong>{_comment.author ? _comment.author.username : 'Unknown'}</Text>}
content={<p>{_comment.message}</p>} content={<p>{_comment.message}</p>}
datetime={( datetime={(
<Tooltip title={created.format('MMMM Do YYYY')}> <CVATTooltip title={created.format('MMMM Do YYYY')}>
<span>{diff}</span> <span>{diff}</span>
</Tooltip> </CVATTooltip>
)} )}
/> />
); );
@ -93,9 +93,9 @@ export default function IssueDialog(props: Props): JSX.Element {
<Title level={4}>{id >= 0 ? `Issue #${id}` : 'Issue'}</Title> <Title level={4}>{id >= 0 ? `Issue #${id}` : 'Issue'}</Title>
</Col> </Col>
<Col> <Col>
<Tooltip title='Collapse the chat'> <CVATTooltip title='Collapse the chat'>
<CloseOutlined onClick={collapse} /> <CloseOutlined onClick={collapse} />
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
<Row className='cvat-issue-dialog-chat' justify='start'> <Row className='cvat-issue-dialog-chat' justify='start'>

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { CursorIcon } from 'icons'; import { CursorIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces'; import { ActiveControl } from 'reducers/interfaces';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
canvasInstance: Canvas; canvasInstance: Canvas;
@ -20,7 +20,7 @@ function CursorControl(props: Props): JSX.Element {
const { canvasInstance, activeControl, cursorShortkey } = props; const { canvasInstance, activeControl, cursorShortkey } = props;
return ( return (
<Tooltip title={`Cursor ${cursorShortkey}`} placement='right' mouseLeaveDelay={0}> <CVATTooltip title={`Cursor ${cursorShortkey}`} placement='right'>
<Icon <Icon
component={CursorIcon} component={CursorIcon}
className={ className={
@ -30,7 +30,7 @@ function CursorControl(props: Props): JSX.Element {
} }
onClick={activeControl !== ActiveControl.CURSOR ? (): void => canvasInstance.cancel() : undefined} onClick={activeControl !== ActiveControl.CURSOR ? (): void => canvasInstance.cancel() : undefined}
/> />
</Tooltip> </CVATTooltip>
); );
} }

20
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -7,13 +7,13 @@ import { Row, Col } from 'antd/lib/grid';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import InputNumber from 'antd/lib/input-number'; import InputNumber from 'antd/lib/input-number';
import Radio, { RadioChangeEvent } from 'antd/lib/radio'; import Radio, { RadioChangeEvent } from 'antd/lib/radio';
import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import { RectDrawingMethod, CuboidDrawingMethod } from 'cvat-canvas-wrapper'; import { RectDrawingMethod, CuboidDrawingMethod } from 'cvat-canvas-wrapper';
import { ShapeType } from 'reducers/interfaces'; import { ShapeType } from 'reducers/interfaces';
import { clamp } from 'utils/math'; import { clamp } from 'utils/math';
import LabelSelector from 'components/label-selector/label-selector'; import LabelSelector from 'components/label-selector/label-selector';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
shapeType: ShapeType; shapeType: ShapeType;
@ -129,11 +129,11 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
</Col> </Col>
<Col span={10}> <Col span={10}>
<InputNumber <InputNumber
onChange={(value: number | undefined | string) => { onChange={(value: number | undefined | string | null) => {
if (typeof value !== 'undefined') { if (typeof value === 'undefined' || value === null) {
onChangePoints(Math.floor(clamp(+value, minimumPoints, Number.MAX_SAFE_INTEGER)));
} else if (!value) {
onChangePoints(undefined); onChangePoints(undefined);
} else {
onChangePoints(Math.floor(clamp(+value, minimumPoints, Number.MAX_SAFE_INTEGER)));
} }
}} }}
className='cvat-draw-shape-popover-points-selector' className='cvat-draw-shape-popover-points-selector'
@ -146,14 +146,14 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
)} )}
<Row justify='space-around'> <Row justify='space-around'>
<Col span={12}> <Col span={12}>
<Tooltip title={`Press ${repeatShapeShortcut} to draw again`} mouseLeaveDelay={0}> <CVATTooltip title={`Press ${repeatShapeShortcut} to draw again`}>
<Button onClick={onDrawShape}>Shape</Button> <Button onClick={onDrawShape}>Shape</Button>
</Tooltip> </CVATTooltip>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Tooltip title={`Press ${repeatShapeShortcut} to draw again`} mouseLeaveDelay={0}> <CVATTooltip title={`Press ${repeatShapeShortcut} to draw again`}>
<Button onClick={onDrawTrack}>Track</Button> <Button onClick={onDrawTrack}>Track</Button>
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
</div> </div>

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/fit-control.tsx
Unescape Escape View File

@ -1,13 +1,13 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { FitIcon } from 'icons'; import { FitIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
canvasInstance: Canvas; canvasInstance: Canvas;
@ -17,9 +17,9 @@ function FitControl(props: Props): JSX.Element {
const { canvasInstance } = props; const { canvasInstance } = props;
return ( return (
<Tooltip title='Fit the image [Double Click]' placement='right' mouseLeaveDelay={0}> <CVATTooltip title='Fit the image [Double Click]' placement='right'>
<Icon className='cvat-fit-control' component={FitIcon} onClick={(): void => canvasInstance.fit()} /> <Icon className='cvat-fit-control' component={FitIcon} onClick={(): void => canvasInstance.fit()} />
</Tooltip> </CVATTooltip>
); );
} }

51
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import Tooltip from 'antd/lib/tooltip';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import { GroupIcon } from 'icons'; import { GroupIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import { ActiveControl } from 'reducers/interfaces'; import { ActiveControl } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
canvasInstance: Canvas; canvasInstance: Canvas;
@ -19,30 +19,37 @@ interface Props {
} }
function GroupControl(props: Props): JSX.Element { function GroupControl(props: Props): JSX.Element {
const { switchGroupShortcut, resetGroupShortcut, activeControl, canvasInstance, groupObjects } = props; const {
switchGroupShortcut, resetGroupShortcut, activeControl, canvasInstance, groupObjects,
} = props;
const dynamicIconProps = const dynamicIconProps =
activeControl === ActiveControl.GROUP ? { activeControl === ActiveControl.GROUP ?
className: 'cvat-group-control cvat-active-canvas-control', {
onClick: (): void => { className: 'cvat-group-control cvat-active-canvas-control',
canvasInstance.group({ enabled: false }); onClick: (): void => {
groupObjects(false); canvasInstance.group({ enabled: false });
}, groupObjects(false);
} : { },
className: 'cvat-group-control', } :
onClick: (): void => { {
canvasInstance.cancel(); className: 'cvat-group-control',
canvasInstance.group({ enabled: true }); onClick: (): void => {
groupObjects(true); canvasInstance.cancel();
}, canvasInstance.group({ enabled: true });
}; groupObjects(true);
},
const title = };
`Group shapes/tracks ${switchGroupShortcut}.` + ` Select and press ${resetGroupShortcut} to reset a group`;
const title = [
`Group shapes/tracks ${switchGroupShortcut}. `,
`Select and press ${resetGroupShortcut} to reset a group.`,
].join(' ');
return ( return (
<Tooltip title={title} placement='right' mouseLeaveDelay={0}> <CVATTooltip title={title} placement='right'>
<Icon {...dynamicIconProps} component={GroupIcon} /> <Icon {...dynamicIconProps} component={GroupIcon} />
</Tooltip> </CVATTooltip>
); );
} }

2
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/handle-popover-visibility.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT

42
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import Tooltip from 'antd/lib/tooltip';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import { MergeIcon } from 'icons'; import { MergeIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import { ActiveControl } from 'reducers/interfaces'; import { ActiveControl } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
canvasInstance: Canvas; canvasInstance: Canvas;
@ -18,28 +18,32 @@ interface Props {
} }
function MergeControl(props: Props): JSX.Element { function MergeControl(props: Props): JSX.Element {
const { switchMergeShortcut, activeControl, canvasInstance, mergeObjects } = props; const {
switchMergeShortcut, activeControl, canvasInstance, mergeObjects,
} = props;
const dynamicIconProps = const dynamicIconProps =
activeControl === ActiveControl.MERGE ? { activeControl === ActiveControl.MERGE ?
className: 'cvat-merge-control cvat-active-canvas-control', {
onClick: (): void => { className: 'cvat-merge-control cvat-active-canvas-control',
canvasInstance.merge({ enabled: false }); onClick: (): void => {
mergeObjects(false); canvasInstance.merge({ enabled: false });
}, mergeObjects(false);
} : { },
className: 'cvat-merge-control', } :
onClick: (): void => { {
canvasInstance.cancel(); className: 'cvat-merge-control',
canvasInstance.merge({ enabled: true }); onClick: (): void => {
mergeObjects(true); canvasInstance.cancel();
}, canvasInstance.merge({ enabled: true });
}; mergeObjects(true);
},
};
return ( return (
<Tooltip title={`Merge shapes/tracks ${switchMergeShortcut}`} placement='right' mouseLeaveDelay={0}> <CVATTooltip title={`Merge shapes/tracks ${switchMergeShortcut}`} placement='right'>
<Icon {...dynamicIconProps} component={MergeIcon} /> <Icon {...dynamicIconProps} component={MergeIcon} />
</Tooltip> </CVATTooltip>
); );
} }

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/move-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { MoveIcon } from 'icons'; import { MoveIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces'; import { ActiveControl } from 'reducers/interfaces';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
canvasInstance: Canvas; canvasInstance: Canvas;
@ -19,7 +19,7 @@ function MoveControl(props: Props): JSX.Element {
const { canvasInstance, activeControl } = props; const { canvasInstance, activeControl } = props;
return ( return (
<Tooltip title='Move the image' placement='right' mouseLeaveDelay={0}> <CVATTooltip title='Move the image' placement='right'>
<Icon <Icon
component={MoveIcon} component={MoveIcon}
className={ className={
@ -36,7 +36,7 @@ function MoveControl(props: Props): JSX.Element {
} }
}} }}
/> />
</Tooltip> </CVATTooltip>
); );
} }

6
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/opencv-control.tsx
Unescape Escape View File

@ -5,7 +5,6 @@
import React from 'react'; import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import Tooltip from 'antd/lib/tooltip';
import Popover from 'antd/lib/popover'; import Popover from 'antd/lib/popover';
import Icon, { ScissorOutlined } from '@ant-design/icons'; import Icon, { ScissorOutlined } from '@ant-design/icons';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
@ -29,6 +28,7 @@ import {
createAnnotationsAsync, createAnnotationsAsync,
} from 'actions/annotation-actions'; } from 'actions/annotation-actions';
import LabelSelector from 'components/label-selector/label-selector'; import LabelSelector from 'components/label-selector/label-selector';
import CVATTooltip from 'components/common/cvat-tooltip';
import withVisibilityHandling from './handle-popover-visibility'; import withVisibilityHandling from './handle-popover-visibility';
interface Props { interface Props {
@ -293,7 +293,7 @@ class OpenCVControlComponent extends React.PureComponent<Props & DispatchToProps
</Row> </Row>
<Row justify='start' className='cvat-opencv-drawing-tools'> <Row justify='start' className='cvat-opencv-drawing-tools'>
<Col> <Col>
<Tooltip title='Intelligent scissors' className='cvat-opencv-drawing-tool'> <CVATTooltip title='Intelligent scissors' className='cvat-opencv-drawing-tool'>
<Button <Button
onClick={() => { onClick={() => {
this.activeTool = openCVWrapper.segmentation.intelligentScissorsFactory(); this.activeTool = openCVWrapper.segmentation.intelligentScissorsFactory();
@ -307,7 +307,7 @@ class OpenCVControlComponent extends React.PureComponent<Props & DispatchToProps
> >
<ScissorOutlined /> <ScissorOutlined />
</Button> </Button>
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
</> </>

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/resize-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { ZoomIcon } from 'icons'; import { ZoomIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces'; import { ActiveControl } from 'reducers/interfaces';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
canvasInstance: Canvas; canvasInstance: Canvas;
@ -19,7 +19,7 @@ function ResizeControl(props: Props): JSX.Element {
const { activeControl, canvasInstance } = props; const { activeControl, canvasInstance } = props;
return ( return (
<Tooltip title='Select a region of interest' placement='right' mouseLeaveDelay={0}> <CVATTooltip title='Select a region of interest' placement='right'>
<Icon <Icon
component={ZoomIcon} component={ZoomIcon}
className={ className={
@ -36,7 +36,7 @@ function ResizeControl(props: Props): JSX.Element {
} }
}} }}
/> />
</Tooltip> </CVATTooltip>
); );
} }

19
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/rotate-control.tsx
Unescape Escape View File

@ -4,12 +4,11 @@
import React from 'react'; import React from 'react';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Popover from 'antd/lib/popover'; import Popover from 'antd/lib/popover';
import { RotateIcon } from 'icons'; import { RotateIcon } from 'icons';
import { Rotation } from 'reducers/interfaces'; import { Rotation } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
import withVisibilityHandling from './handle-popover-visibility'; import withVisibilityHandling from './handle-popover-visibility';
interface Props { interface Props {
@ -27,28 +26,20 @@ function RotateControl(props: Props): JSX.Element {
placement='right' placement='right'
content={( content={(
<> <>
<Tooltip <CVATTooltip title={`Rotate the image anticlockwise ${anticlockwiseShortcut}`} placement='topRight'>
title={`Rotate the image anticlockwise ${anticlockwiseShortcut}`}
placement='topRight'
mouseLeaveDelay={0}
>
<Icon <Icon
className='cvat-rotate-canvas-controls-left' className='cvat-rotate-canvas-controls-left'
onClick={(): void => rotateFrame(Rotation.ANTICLOCKWISE90)} onClick={(): void => rotateFrame(Rotation.ANTICLOCKWISE90)}
component={RotateIcon} component={RotateIcon}
/> />
</Tooltip> </CVATTooltip>
<Tooltip <CVATTooltip title={`Rotate the image clockwise ${clockwiseShortcut}`} placement='topRight'>
title={`Rotate the image clockwise ${clockwiseShortcut}`}
placement='topRight'
mouseLeaveDelay={0}
>
<Icon <Icon
className='cvat-rotate-canvas-controls-right' className='cvat-rotate-canvas-controls-right'
onClick={(): void => rotateFrame(Rotation.CLOCKWISE90)} onClick={(): void => rotateFrame(Rotation.CLOCKWISE90)}
component={RotateIcon} component={RotateIcon}
/> />
</Tooltip> </CVATTooltip>
</> </>
)} )}
trigger='hover' trigger='hover'

9
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover.tsx
Unescape Escape View File

@ -1,13 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import LabelSelector from 'components/label-selector/label-selector'; import LabelSelector from 'components/label-selector/label-selector';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
labels: any[]; labels: any[];
@ -48,9 +49,9 @@ function SetupTagPopover(props: Props): JSX.Element {
</Row> </Row>
<Row justify='space-around'> <Row justify='space-around'>
<Col span={24}> <Col span={24}>
<Tooltip title={`Press ${repeatShapeShortcut} to add a tag again`} mouseLeaveDelay={0}> <CVATTooltip title={`Press ${repeatShapeShortcut} to add a tag again`}>
<Button onClick={() => onSetup(selectedLabelID)}>Tag</Button> <Button onClick={() => onSetup(selectedLabelID)}>Tag</Button>
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
</div> </div>

8
cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import Tooltip from 'antd/lib/tooltip';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import { SplitIcon } from 'icons'; import { SplitIcon } from 'icons';
import { Canvas } from 'cvat-canvas-wrapper'; import { Canvas } from 'cvat-canvas-wrapper';
import { ActiveControl } from 'reducers/interfaces'; import { ActiveControl } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
canvasInstance: Canvas; canvasInstance: Canvas;
@ -41,9 +41,9 @@ function SplitControl(props: Props): JSX.Element {
}; };
return ( return (
<Tooltip title={`Split a track ${switchSplitShortcut}`} placement='right' mouseLeaveDelay={0}> <CVATTooltip title={`Split a track ${switchSplitShortcut}`} placement='right'>
<Icon {...dynamicIconProps} component={SplitIcon} /> <Icon {...dynamicIconProps} component={SplitIcon} />
</Tooltip> </CVATTooltip>
); );
} }

8
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React, { useState } from 'react'; import React, { useState } from 'react';
@ -9,9 +9,9 @@ import Button from 'antd/lib/button';
import Popover from 'antd/lib/popover'; import Popover from 'antd/lib/popover';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import { SketchPicker } from 'react-color'; import { SketchPicker } from 'react-color';
import Tooltip from 'antd/lib/tooltip';
import getCore from 'cvat-core-wrapper'; import getCore from 'cvat-core-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
const core = getCore(); const core = getCore();
@ -108,7 +108,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
<Text strong>Select color</Text> <Text strong>Select color</Text>
</Col> </Col>
<Col span={4}> <Col span={4}>
<Tooltip title='Cancel'> <CVATTooltip title='Cancel'>
<Button <Button
type='link' type='link'
onClick={() => { onClick={() => {
@ -117,7 +117,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
> >
<CloseOutlined /> <CloseOutlined />
</Button> </Button>
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
)} )}

14
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/issues-list.tsx
Unescape Escape View File

@ -8,12 +8,12 @@ import { CombinedState } from 'reducers/interfaces';
import { import {
LeftOutlined, RightOutlined, EyeInvisibleFilled, EyeOutlined, LeftOutlined, RightOutlined, EyeInvisibleFilled, EyeOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Alert from 'antd/lib/alert'; import Alert from 'antd/lib/alert';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import { changeFrameAsync } from 'actions/annotation-actions'; import { changeFrameAsync } from 'actions/annotation-actions';
import { reviewActions } from 'actions/review-actions'; import { reviewActions } from 'actions/review-actions';
import CVATTooltip from 'components/common/cvat-tooltip';
export default function LabelsListComponent(): JSX.Element { export default function LabelsListComponent(): JSX.Element {
const dispatch = useDispatch(); const dispatch = useDispatch();
@ -54,17 +54,17 @@ export default function LabelsListComponent(): JSX.Element {
<div className='cvat-objects-sidebar-issues-list-header'> <div className='cvat-objects-sidebar-issues-list-header'>
<Row justify='start' align='middle'> <Row justify='start' align='middle'>
<Col> <Col>
<Tooltip title='Find the previous frame with issues'> <CVATTooltip title='Find the previous frame with issues'>
<LeftOutlined className='cvat-issues-sidebar-previous-frame' {...dinamicLeftProps} /> <LeftOutlined className='cvat-issues-sidebar-previous-frame' {...dinamicLeftProps} />
</Tooltip> </CVATTooltip>
</Col> </Col>
<Col offset={1}> <Col offset={1}>
<Tooltip title='Find the next frame with issues'> <CVATTooltip title='Find the next frame with issues'>
<RightOutlined className='cvat-issues-sidebar-next-frame' {...dinamicRightProps} /> <RightOutlined className='cvat-issues-sidebar-next-frame' {...dinamicRightProps} />
</Tooltip> </CVATTooltip>
</Col> </Col>
<Col offset={3}> <Col offset={3}>
<Tooltip title='Show/hide all the issues'> <CVATTooltip title='Show/hide all the issues'>
{issuesHidden ? ( {issuesHidden ? (
<EyeInvisibleFilled <EyeInvisibleFilled
className='cvat-issues-sidebar-hidden-issues' className='cvat-issues-sidebar-hidden-issues'
@ -76,7 +76,7 @@ export default function LabelsListComponent(): JSX.Element {
onClick={() => dispatch(reviewActions.switchIssuesHiddenFlag(true))} onClick={() => dispatch(reviewActions.switchIssuesHiddenFlag(true))}
/> />
)} )}
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
</div> </div>

8
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-basics.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -7,9 +7,9 @@ import { Row, Col } from 'antd/lib/grid';
import { MoreOutlined } from '@ant-design/icons'; import { MoreOutlined } from '@ant-design/icons';
import Dropdown from 'antd/lib/dropdown'; import Dropdown from 'antd/lib/dropdown';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import Tooltip from 'antd/lib/tooltip';
import { ObjectType, ShapeType, ColorBy } from 'reducers/interfaces'; import { ObjectType, ShapeType, ColorBy } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
import LabelSelector from 'components/label-selector/label-selector'; import LabelSelector from 'components/label-selector/label-selector';
import ItemMenu from './object-item-menu'; import ItemMenu from './object-item-menu';
@ -103,7 +103,7 @@ function ItemTopComponent(props: Props): JSX.Element {
</Text> </Text>
</Col> </Col>
<Col span={12}> <Col span={12}>
<Tooltip title='Change current label' mouseLeaveDelay={0}> <CVATTooltip title='Change current label'>
<LabelSelector <LabelSelector
disabled={readonly} disabled={readonly}
size='small' size='small'
@ -112,7 +112,7 @@ function ItemTopComponent(props: Props): JSX.Element {
onChange={changeLabel} onChange={changeLabel}
className='cvat-objects-sidebar-state-item-label-selector' className='cvat-objects-sidebar-state-item-label-selector'
/> />
</Tooltip> </CVATTooltip>
</Col> </Col>
<Col span={2}> <Col span={2}>
<Dropdown <Dropdown

36
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-buttons.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -17,8 +17,8 @@ import Icon, {
StarOutlined, StarOutlined,
EyeOutlined, EyeOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import CVATTooltip from 'components/common/cvat-tooltip';
import { ObjectType, ShapeType } from 'reducers/interfaces'; import { ObjectType, ShapeType } from 'reducers/interfaces';
import { import {
ObjectOutsideIcon, FirstIcon, LastIcon, PreviousIcon, NextIcon, ObjectOutsideIcon, FirstIcon, LastIcon, PreviousIcon, NextIcon,
@ -107,9 +107,9 @@ function NavigateFirstKeyframe(props: Props): JSX.Element {
function NavigatePrevKeyframe(props: Props): JSX.Element { function NavigatePrevKeyframe(props: Props): JSX.Element {
const { prevKeyFrameShortcut, navigatePrevKeyframe } = props; const { prevKeyFrameShortcut, navigatePrevKeyframe } = props;
return navigatePrevKeyframe ? ( return navigatePrevKeyframe ? (
<Tooltip title={`Go to previous keyframe ${prevKeyFrameShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Go to previous keyframe ${prevKeyFrameShortcut}`}>
<Icon {...classes.prevKeyFrame} component={PreviousIcon} onClick={navigatePrevKeyframe} /> <Icon {...classes.prevKeyFrame} component={PreviousIcon} onClick={navigatePrevKeyframe} />
</Tooltip> </CVATTooltip>
) : ( ) : (
<Icon {...classes.prevKeyFrame} component={PreviousIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} /> <Icon {...classes.prevKeyFrame} component={PreviousIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />
); );
@ -118,9 +118,9 @@ function NavigatePrevKeyframe(props: Props): JSX.Element {
function NavigateNextKeyframe(props: Props): JSX.Element { function NavigateNextKeyframe(props: Props): JSX.Element {
const { navigateNextKeyframe, nextKeyFrameShortcut } = props; const { navigateNextKeyframe, nextKeyFrameShortcut } = props;
return navigateNextKeyframe ? ( return navigateNextKeyframe ? (
<Tooltip title={`Go to next keyframe ${nextKeyFrameShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Go to next keyframe ${nextKeyFrameShortcut}`}>
<Icon {...classes.nextKeyFrame} component={NextIcon} onClick={navigateNextKeyframe} /> <Icon {...classes.nextKeyFrame} component={NextIcon} onClick={navigateNextKeyframe} />
</Tooltip> </CVATTooltip>
) : ( ) : (
<Icon {...classes.nextKeyFrame} component={NextIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} /> <Icon {...classes.nextKeyFrame} component={NextIcon} style={{ opacity: 0.5, pointerEvents: 'none' }} />
); );
@ -140,13 +140,13 @@ function SwitchLock(props: Props): JSX.Element {
locked, switchLockShortcut, lock, unlock, locked, switchLockShortcut, lock, unlock,
} = props; } = props;
return ( return (
<Tooltip title={`Switch lock property ${switchLockShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Switch lock property ${switchLockShortcut}`}>
{locked ? ( {locked ? (
<LockFilled {...classes.lock.enabled} onClick={unlock} /> <LockFilled {...classes.lock.enabled} onClick={unlock} />
) : ( ) : (
<UnlockOutlined {...classes.lock.disabled} onClick={lock} /> <UnlockOutlined {...classes.lock.disabled} onClick={lock} />
)} )}
</Tooltip> </CVATTooltip>
); );
} }
@ -155,26 +155,26 @@ function SwitchOccluded(props: Props): JSX.Element {
switchOccludedShortcut, occluded, unsetOccluded, setOccluded, switchOccludedShortcut, occluded, unsetOccluded, setOccluded,
} = props; } = props;
return ( return (
<Tooltip title={`Switch occluded property ${switchOccludedShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Switch occluded property ${switchOccludedShortcut}`}>
{occluded ? ( {occluded ? (
<TeamOutlined {...classes.occluded.enabled} onClick={unsetOccluded} /> <TeamOutlined {...classes.occluded.enabled} onClick={unsetOccluded} />
) : ( ) : (
<UserOutlined {...classes.occluded.disabled} onClick={setOccluded} /> <UserOutlined {...classes.occluded.disabled} onClick={setOccluded} />
)} )}
</Tooltip> </CVATTooltip>
); );
} }
function SwitchPinned(props: Props): JSX.Element { function SwitchPinned(props: Props): JSX.Element {
const { pinned, pin, unpin } = props; const { pinned, pin, unpin } = props;
return ( return (
<Tooltip title='Switch pinned property' mouseLeaveDelay={0}> <CVATTooltip title='Switch pinned property'>
{pinned ? ( {pinned ? (
<PushpinFilled {...classes.pinned.enabled} onClick={unpin} /> <PushpinFilled {...classes.pinned.enabled} onClick={unpin} />
) : ( ) : (
<PushpinOutlined {...classes.pinned.disabled} onClick={pin} /> <PushpinOutlined {...classes.pinned.disabled} onClick={pin} />
)} )}
</Tooltip> </CVATTooltip>
); );
} }
@ -184,13 +184,13 @@ function SwitchHidden(props: Props): JSX.Element {
} = props; } = props;
const hiddenStyle = hiddenDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {}; const hiddenStyle = hiddenDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {};
return ( return (
<Tooltip title={`Switch hidden property ${switchHiddenShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Switch hidden property ${switchHiddenShortcut}`}>
{hidden ? ( {hidden ? (
<EyeInvisibleFilled {...classes.hidden.enabled} onClick={show} style={hiddenStyle} /> <EyeInvisibleFilled {...classes.hidden.enabled} onClick={show} style={hiddenStyle} />
) : ( ) : (
<EyeOutlined {...classes.hidden.disabled} onClick={hide} style={hiddenStyle} /> <EyeOutlined {...classes.hidden.disabled} onClick={hide} style={hiddenStyle} />
)} )}
</Tooltip> </CVATTooltip>
); );
} }
@ -200,7 +200,7 @@ function SwitchOutside(props: Props): JSX.Element {
} = props; } = props;
const outsideStyle = outsideDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {}; const outsideStyle = outsideDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {};
return ( return (
<Tooltip title={`Switch outside property ${switchOutsideShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Switch outside property ${switchOutsideShortcut}`}>
{outside ? ( {outside ? (
<Icon <Icon
{...classes.outside.enabled} {...classes.outside.enabled}
@ -211,7 +211,7 @@ function SwitchOutside(props: Props): JSX.Element {
) : ( ) : (
<SelectOutlined {...classes.outside.disabled} onClick={setOutside} style={outsideStyle} /> <SelectOutlined {...classes.outside.disabled} onClick={setOutside} style={outsideStyle} />
)} )}
</Tooltip> </CVATTooltip>
); );
} }
@ -221,13 +221,13 @@ function SwitchKeyframe(props: Props): JSX.Element {
} = props; } = props;
const keyframeStyle = keyframeDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {}; const keyframeStyle = keyframeDisabled ? { opacity: 0.5, pointerEvents: 'none' as const } : {};
return ( return (
<Tooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Switch keyframe property ${switchKeyFrameShortcut}`}>
{keyframe ? ( {keyframe ? (
<StarFilled {...classes.keyframe.enabled} onClick={unsetKeyframe} style={keyframeStyle} /> <StarFilled {...classes.keyframe.enabled} onClick={unsetKeyframe} style={keyframeStyle} />
) : ( ) : (
<StarOutlined {...classes.keyframe.disabled} onClick={setKeyframe} style={keyframeStyle} /> <StarOutlined {...classes.keyframe.disabled} onClick={setKeyframe} style={keyframeStyle} />
)} )}
</Tooltip> </CVATTooltip>
); );
} }

33
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item-menu.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -6,7 +6,6 @@ import React from 'react';
import Menu from 'antd/lib/menu'; import Menu from 'antd/lib/menu';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Modal from 'antd/lib/modal'; import Modal from 'antd/lib/modal';
import Tooltip from 'antd/lib/tooltip';
import Icon, { import Icon, {
LinkOutlined, LinkOutlined,
CopyOutlined, CopyOutlined,
@ -15,9 +14,11 @@ import Icon, {
RetweetOutlined, RetweetOutlined,
DeleteOutlined, DeleteOutlined,
} from '@ant-design/icons'; } from '@ant-design/icons';
import { import {
BackgroundIcon, ForegroundIcon, ResetPerspectiveIcon, ColorizeIcon, BackgroundIcon, ForegroundIcon, ResetPerspectiveIcon, ColorizeIcon,
} from 'icons'; } from 'icons';
import CVATTooltip from 'components/common/cvat-tooltip';
import { ObjectType, ShapeType, ColorBy } from 'reducers/interfaces'; import { ObjectType, ShapeType, ColorBy } from 'reducers/interfaces';
import ColorPicker from './color-picker'; import ColorPicker from './color-picker';
@ -71,11 +72,11 @@ function MakeCopyItem(props: ItemProps): JSX.Element {
const { copyShortcut, pasteShortcut, copy } = toolProps; const { copyShortcut, pasteShortcut, copy } = toolProps;
return ( return (
<Menu.Item {...rest}> <Menu.Item {...rest}>
<Tooltip title={`${copyShortcut} and ${pasteShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`${copyShortcut} and ${pasteShortcut}`}>
<Button type='link' icon={<CopyOutlined />} onClick={copy}> <Button type='link' icon={<CopyOutlined />} onClick={copy}>
Make a copy Make a copy
</Button> </Button>
</Tooltip> </CVATTooltip>
</Menu.Item> </Menu.Item>
); );
} }
@ -85,11 +86,11 @@ function PropagateItem(props: ItemProps): JSX.Element {
const { propagateShortcut, propagate } = toolProps; const { propagateShortcut, propagate } = toolProps;
return ( return (
<Menu.Item {...rest}> <Menu.Item {...rest}>
<Tooltip title={`${propagateShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`${propagateShortcut}`}>
<Button type='link' icon={<BlockOutlined />} onClick={propagate}> <Button type='link' icon={<BlockOutlined />} onClick={propagate}>
Propagate Propagate
</Button> </Button>
</Tooltip> </CVATTooltip>
</Menu.Item> </Menu.Item>
); );
} }
@ -99,11 +100,11 @@ function TrackingItem(props: ItemProps): JSX.Element {
const { activateTracking } = toolProps; const { activateTracking } = toolProps;
return ( return (
<Menu.Item {...rest}> <Menu.Item {...rest}>
<Tooltip title='Run tracking with the active tracker' mouseLeaveDelay={0}> <CVATTooltip title='Run tracking with the active tracker'>
<Button type='link' icon={<GatewayOutlined />} onClick={activateTracking}> <Button type='link' icon={<GatewayOutlined />} onClick={activateTracking}>
Track Track
</Button> </Button>
</Tooltip> </CVATTooltip>
</Menu.Item> </Menu.Item>
); );
} }
@ -138,12 +139,12 @@ function ToBackgroundItem(props: ItemProps): JSX.Element {
const { toBackgroundShortcut, toBackground } = toolProps; const { toBackgroundShortcut, toBackground } = toolProps;
return ( return (
<Menu.Item {...rest}> <Menu.Item {...rest}>
<Tooltip title={`${toBackgroundShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`${toBackgroundShortcut}`}>
<Button type='link' onClick={toBackground}> <Button type='link' onClick={toBackground}>
<Icon component={BackgroundIcon} /> <Icon component={BackgroundIcon} />
To background To background
</Button> </Button>
</Tooltip> </CVATTooltip>
</Menu.Item> </Menu.Item>
); );
} }
@ -153,12 +154,12 @@ function ToForegroundItem(props: ItemProps): JSX.Element {
const { toForegroundShortcut, toForeground } = toolProps; const { toForegroundShortcut, toForeground } = toolProps;
return ( return (
<Menu.Item {...rest}> <Menu.Item {...rest}>
<Tooltip title={`${toForegroundShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`${toForegroundShortcut}`}>
<Button type='link' onClick={toForeground}> <Button type='link' onClick={toForeground}>
<Icon component={ForegroundIcon} /> <Icon component={ForegroundIcon} />
To foreground To foreground
</Button> </Button>
</Tooltip> </CVATTooltip>
</Menu.Item> </Menu.Item>
); );
} }
@ -182,12 +183,12 @@ function SwitchColorItem(props: ItemProps): JSX.Element {
onVisibleChange={changeColorPickerVisible} onVisibleChange={changeColorPickerVisible}
resetVisible={false} resetVisible={false}
> >
<Tooltip title={`${changeColorShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`${changeColorShortcut}`}>
<Button type='link'> <Button type='link'>
<Icon component={ColorizeIcon} /> <Icon component={ColorizeIcon} />
{`Change ${colorBy.toLowerCase()} color`} {`Change ${colorBy.toLowerCase()} color`}
</Button> </Button>
</Tooltip> </CVATTooltip>
</ColorPicker> </ColorPicker>
</Menu.Item> </Menu.Item>
); );
@ -198,7 +199,7 @@ function RemoveItem(props: ItemProps): JSX.Element {
const { removeShortcut, locked, remove } = toolProps; const { removeShortcut, locked, remove } = toolProps;
return ( return (
<Menu.Item {...rest}> <Menu.Item {...rest}>
<Tooltip title={`${removeShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`${removeShortcut}`}>
<Button <Button
type='link' type='link'
icon={<DeleteOutlined />} icon={<DeleteOutlined />}
@ -219,7 +220,7 @@ function RemoveItem(props: ItemProps): JSX.Element {
> >
Remove Remove
</Button> </Button>
</Tooltip> </CVATTooltip>
</Menu.Item> </Menu.Item>
); );
} }

16
cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/objects-list-header.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -12,8 +12,8 @@ import {
CaretDownOutlined, CaretDownOutlined,
CaretUpFilled, CaretUpFilled,
} from '@ant-design/icons'; } from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import CVATTooltip from 'components/common/cvat-tooltip';
import AnnotationsFiltersInput from 'components/annotation-page/annotations-filters-input'; import AnnotationsFiltersInput from 'components/annotation-page/annotations-filters-input';
import StatesOrderingSelector from 'components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector'; import StatesOrderingSelector from 'components/annotation-page/standard-workspace/objects-side-bar/states-ordering-selector';
import { StatesOrdering } from 'reducers/interfaces'; import { StatesOrdering } from 'reducers/interfaces';
@ -41,9 +41,9 @@ function LockAllSwitcher(props: Props): JSX.Element {
} = props; } = props;
return ( return (
<Col span={2}> <Col span={2}>
<Tooltip title={`Switch lock property for all ${switchLockAllShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Switch lock property for all ${switchLockAllShortcut}`}>
{statesLocked ? <LockFilled onClick={unlockAllStates} /> : <UnlockOutlined onClick={lockAllStates} />} {statesLocked ? <LockFilled onClick={unlockAllStates} /> : <UnlockOutlined onClick={lockAllStates} />}
</Tooltip> </CVATTooltip>
</Col> </Col>
); );
} }
@ -54,13 +54,13 @@ function HideAllSwitcher(props: Props): JSX.Element {
} = props; } = props;
return ( return (
<Col span={2}> <Col span={2}>
<Tooltip title={`Switch hidden property for all ${switchHiddenAllShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Switch hidden property for all ${switchHiddenAllShortcut}`}>
{statesHidden ? ( {statesHidden ? (
<EyeInvisibleFilled onClick={showAllStates} /> <EyeInvisibleFilled onClick={showAllStates} />
) : ( ) : (
<EyeOutlined onClick={hideAllStates} /> <EyeOutlined onClick={hideAllStates} />
)} )}
</Tooltip> </CVATTooltip>
</Col> </Col>
); );
} }
@ -69,13 +69,13 @@ function CollapseAllSwitcher(props: Props): JSX.Element {
const { statesCollapsed, expandAllStates, collapseAllStates } = props; const { statesCollapsed, expandAllStates, collapseAllStates } = props;
return ( return (
<Col span={2}> <Col span={2}>
<Tooltip title='Expand/collapse all' mouseLeaveDelay={0}> <CVATTooltip title='Expand/collapse all'>
{statesCollapsed ? ( {statesCollapsed ? (
<CaretDownOutlined onClick={expandAllStates} /> <CaretDownOutlined onClick={expandAllStates} />
) : ( ) : (
<CaretUpFilled onClick={collapseAllStates} /> <CaretUpFilled onClick={collapseAllStates} />
)} )}
</Tooltip> </CVATTooltip>
</Col> </Col>
); );
} }

10
cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/cursor-control.tsx
Unescape Escape View File

@ -4,11 +4,11 @@
import React from 'react'; import React from 'react';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { CursorIcon } from 'icons'; import { CursorIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces'; import { ActiveControl } from 'reducers/interfaces';
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper'; import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
canvasInstance: Canvas; canvasInstance: Canvas;
@ -20,15 +20,15 @@ function CursorControl(props: Props): JSX.Element {
const { activeControl, cursorShortkey } = props; const { activeControl, cursorShortkey } = props;
return ( return (
<Tooltip title={`Cursor ${cursorShortkey}`} placement='right' mouseLeaveDelay={0}> <CVATTooltip title={`Cursor ${cursorShortkey}`} placement='right'>
<Icon <Icon
component={CursorIcon} component={CursorIcon}
className={[ className={[
'cvat-cursor-control', 'cvat-cursor-control',
activeControl === ActiveControl.CURSOR ? 'cvat-active-canvas-control ' : null, activeControl === ActiveControl.CURSOR ? 'cvat-active-canvas-control ' : '',
]} ].join(' ')}
/> />
</Tooltip> </CVATTooltip>
); );
} }

10
cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/move-control.tsx
Unescape Escape View File

@ -4,10 +4,10 @@
import React from 'react'; import React from 'react';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import { MoveIcon } from 'icons'; import { MoveIcon } from 'icons';
import { ActiveControl } from 'reducers/interfaces'; import { ActiveControl } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper'; import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
interface Props { interface Props {
@ -19,15 +19,15 @@ function MoveControl(props: Props): JSX.Element {
const { activeControl } = props; const { activeControl } = props;
return ( return (
<Tooltip title='Move the image' placement='right' mouseLeaveDelay={0}> <CVATTooltip title='Move the image' placement='right'>
<Icon <Icon
component={MoveIcon} component={MoveIcon}
className={[ className={[
'cvat-move-control', 'cvat-move-control',
activeControl === ActiveControl.DRAG_CANVAS ? ' cvat-active-canvas-control' : null, activeControl === ActiveControl.DRAG_CANVAS ? 'cvat-active-canvas-control' : '',
]} ].join(' ')}
/> />
</Tooltip> </CVATTooltip>
); );
} }

9
cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/photo-context.tsx
Unescape Escape View File

@ -2,10 +2,11 @@
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react';
import CameraIcon from '@ant-design/icons/CameraOutlined'; import CameraIcon from '@ant-design/icons/CameraOutlined';
import Tooltip from 'antd/lib/tooltip';
import CVATTooltip from 'components/common/cvat-tooltip';
import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper'; import { Canvas3d as Canvas } from 'cvat-canvas3d-wrapper';
import React from 'react';
import { ActiveControl } from 'reducers/interfaces'; import { ActiveControl } from 'reducers/interfaces';
interface Props { interface Props {
@ -19,7 +20,7 @@ function PhotoContextControl(props: Props): JSX.Element {
const { activeControl, contextImageHide, hideShowContextImage } = props; const { activeControl, contextImageHide, hideShowContextImage } = props;
return ( return (
<Tooltip title='Photo context show/hide' placement='right' mouseLeaveDelay={0}> <CVATTooltip title='Photo context show/hide' placement='right'>
<CameraIcon <CameraIcon
className={`cvat-move-control className={`cvat-move-control
cvat-control-side-bar-icon-size ${ cvat-control-side-bar-icon-size ${
@ -29,7 +30,7 @@ function PhotoContextControl(props: Props): JSX.Element {
hideShowContextImage(!contextImageHide); hideShowContextImage(!contextImageHide);
}} }}
/> />
</Tooltip> </CVATTooltip>
); );
} }

66
cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx
Unescape Escape View File

@ -1,14 +1,14 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import { Col } from 'antd/lib/grid'; import { Col } from 'antd/lib/grid';
import Icon from '@ant-design/icons'; import Icon from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Popover from 'antd/lib/popover'; import Popover from 'antd/lib/popover';
import CVATTooltip from 'components/common/cvat-tooltip';
import { import {
FirstIcon, FirstIcon,
BackJumpIcon, BackJumpIcon,
@ -104,18 +104,18 @@ function PlayerButtons(props: Props): JSX.Element {
return ( return (
<Col className='cvat-player-buttons'> <Col className='cvat-player-buttons'>
<Tooltip title='Go to the first frame' mouseLeaveDelay={0}> <CVATTooltip title='Go to the first frame'>
<Icon className='cvat-player-first-button' component={FirstIcon} onClick={onFirstFrame} /> <Icon className='cvat-player-first-button' component={FirstIcon} onClick={onFirstFrame} />
</Tooltip> </CVATTooltip>
<Tooltip title={`Go back with a step ${backwardShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Go back with a step ${backwardShortcut}`}>
<Icon className='cvat-player-backward-button' component={BackJumpIcon} onClick={onBackward} /> <Icon className='cvat-player-backward-button' component={BackJumpIcon} onClick={onBackward} />
</Tooltip> </CVATTooltip>
<Popover <Popover
trigger='contextMenu' trigger='contextMenu'
placement='bottom' placement='bottom'
content={( content={(
<> <>
<Tooltip title={`${prevRegularText}`} mouseLeaveDelay={0}> <CVATTooltip title={`${prevRegularText}`}>
<Icon <Icon
className='cvat-player-previous-inlined-button' className='cvat-player-previous-inlined-button'
component={PreviousIcon} component={PreviousIcon}
@ -123,8 +123,8 @@ function PlayerButtons(props: Props): JSX.Element {
setPrevButton('regular'); setPrevButton('regular');
}} }}
/> />
</Tooltip> </CVATTooltip>
<Tooltip title={`${prevFilteredText}`} mouseLeaveDelay={0}> <CVATTooltip title={`${prevFilteredText}`}>
<Icon <Icon
className='cvat-player-previous-filtered-inlined-button' className='cvat-player-previous-filtered-inlined-button'
component={PreviousFilteredIcon} component={PreviousFilteredIcon}
@ -132,8 +132,8 @@ function PlayerButtons(props: Props): JSX.Element {
setPrevButton('filtered'); setPrevButton('filtered');
}} }}
/> />
</Tooltip> </CVATTooltip>
<Tooltip title={`${prevEmptyText}`} mouseLeaveDelay={0}> <CVATTooltip title={`${prevEmptyText}`}>
<Icon <Icon
className='cvat-player-previous-empty-inlined-button' className='cvat-player-previous-empty-inlined-button'
component={PreviousEmptyIcon} component={PreviousEmptyIcon}
@ -141,27 +141,23 @@ function PlayerButtons(props: Props): JSX.Element {
setPrevButton('empty'); setPrevButton('empty');
}} }}
/> />
</Tooltip> </CVATTooltip>
</> </>
)} )}
> >
<Tooltip <CVATTooltip placement='top' title={`${prevButtonTooltipMessage} ${previousFrameShortcut}`}>
placement='top'
mouseLeaveDelay={0}
title={`${prevButtonTooltipMessage} ${previousFrameShortcut}`}
>
{prevButton} {prevButton}
</Tooltip> </CVATTooltip>
</Popover> </Popover>
{!playing ? ( {!playing ? (
<Tooltip title={`Play ${playPauseShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Play ${playPauseShortcut}`}>
<Icon className='cvat-player-play-button' component={PlayIcon} onClick={onSwitchPlay} /> <Icon className='cvat-player-play-button' component={PlayIcon} onClick={onSwitchPlay} />
</Tooltip> </CVATTooltip>
) : ( ) : (
<Tooltip title={`Pause ${playPauseShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Pause ${playPauseShortcut}`}>
<Icon className='cvat-player-pause-button' component={PauseIcon} onClick={onSwitchPlay} /> <Icon className='cvat-player-pause-button' component={PauseIcon} onClick={onSwitchPlay} />
</Tooltip> </CVATTooltip>
)} )}
<Popover <Popover
@ -169,7 +165,7 @@ function PlayerButtons(props: Props): JSX.Element {
placement='bottom' placement='bottom'
content={( content={(
<> <>
<Tooltip title={`${nextRegularText}`} mouseLeaveDelay={0}> <CVATTooltip title={`${nextRegularText}`}>
<Icon <Icon
className='cvat-player-next-inlined-button' className='cvat-player-next-inlined-button'
component={NextIcon} component={NextIcon}
@ -177,8 +173,8 @@ function PlayerButtons(props: Props): JSX.Element {
setNextButton('regular'); setNextButton('regular');
}} }}
/> />
</Tooltip> </CVATTooltip>
<Tooltip title={`${nextFilteredText}`} mouseLeaveDelay={0}> <CVATTooltip title={`${nextFilteredText}`}>
<Icon <Icon
className='cvat-player-next-filtered-inlined-button' className='cvat-player-next-filtered-inlined-button'
component={NextFilteredIcon} component={NextFilteredIcon}
@ -186,8 +182,8 @@ function PlayerButtons(props: Props): JSX.Element {
setNextButton('filtered'); setNextButton('filtered');
}} }}
/> />
</Tooltip> </CVATTooltip>
<Tooltip title={`${nextEmptyText}`} mouseLeaveDelay={0}> <CVATTooltip title={`${nextEmptyText}`}>
<Icon <Icon
className='cvat-player-next-empty-inlined-button' className='cvat-player-next-empty-inlined-button'
component={NextEmptyIcon} component={NextEmptyIcon}
@ -195,20 +191,20 @@ function PlayerButtons(props: Props): JSX.Element {
setNextButton('empty'); setNextButton('empty');
}} }}
/> />
</Tooltip> </CVATTooltip>
</> </>
)} )}
> >
<Tooltip placement='top' mouseLeaveDelay={0} title={`${nextButtonTooltipMessage} ${nextFrameShortcut}`}> <CVATTooltip placement='top' title={`${nextButtonTooltipMessage} ${nextFrameShortcut}`}>
{nextButton} {nextButton}
</Tooltip> </CVATTooltip>
</Popover> </Popover>
<Tooltip title={`Go next with a step ${forwardShortcut}`} mouseLeaveDelay={0}> <CVATTooltip title={`Go next with a step ${forwardShortcut}`}>
<Icon className='cvat-player-forward-button' component={ForwardJumpIcon} onClick={onForward} /> <Icon className='cvat-player-forward-button' component={ForwardJumpIcon} onClick={onForward} />
</Tooltip> </CVATTooltip>
<Tooltip title='Go to the last frame' mouseLeaveDelay={0}> <CVATTooltip title='Go to the last frame'>
<Icon className='cvat-player-last-button' component={LastIcon} onClick={onLastFrame} /> <Icon className='cvat-player-last-button' component={LastIcon} onClick={onLastFrame} />
</Tooltip> </CVATTooltip>
</Col> </Col>
); );
} }

20
cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -7,11 +7,11 @@ import React, { useState, useEffect } from 'react';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import { LinkOutlined } from '@ant-design/icons'; import { LinkOutlined } from '@ant-design/icons';
import Slider from 'antd/lib/slider'; import Slider from 'antd/lib/slider';
import Tooltip from 'antd/lib/tooltip';
import InputNumber from 'antd/lib/input-number'; import InputNumber from 'antd/lib/input-number';
import Input from 'antd/lib/input'; import Input from 'antd/lib/input';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import CVATTooltip from 'components/common/cvat-tooltip';
import { clamp } from 'utils/math'; import { clamp } from 'utils/math';
interface Props { interface Props {
@ -63,26 +63,26 @@ function PlayerNavigation(props: Props): JSX.Element {
</Row> </Row>
<Row justify='center'> <Row justify='center'>
<Col className='cvat-player-filename-wrapper'> <Col className='cvat-player-filename-wrapper'>
<Tooltip title={frameFilename} mouseLeaveDelay={0}> <CVATTooltip title={frameFilename}>
<Text type='secondary'>{frameFilename}</Text> <Text type='secondary'>{frameFilename}</Text>
</Tooltip> </CVATTooltip>
</Col> </Col>
<Col offset={1}> <Col offset={1}>
<Tooltip title='Create frame URL' mouseLeaveDelay={0}> <CVATTooltip title='Create frame URL'>
<LinkOutlined className='cvat-player-frame-url-icon' onClick={onURLIconClick} /> <LinkOutlined className='cvat-player-frame-url-icon' onClick={onURLIconClick} />
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
</Col> </Col>
<Col> <Col>
<Tooltip title={`Press ${focusFrameInputShortcut} to focus here`} mouseLeaveDelay={0}> <CVATTooltip title={`Press ${focusFrameInputShortcut} to focus here`}>
<InputNumber <InputNumber
ref={inputFrameRef} ref={inputFrameRef}
className='cvat-player-frame-selector' className='cvat-player-frame-selector'
type='number' type='number'
value={frameInputValue} value={frameInputValue}
onChange={(value: number | undefined | string) => { onChange={(value: number | undefined | string | null) => {
if (typeof value !== 'undefined') { if (typeof value !== 'undefined' && value !== null) {
setFrameInputValue(Math.floor(clamp(+value, startFrame, stopFrame))); setFrameInputValue(Math.floor(clamp(+value, startFrame, stopFrame)));
} }
}} }}
@ -93,7 +93,7 @@ function PlayerNavigation(props: Props): JSX.Element {
onInputChange(frameInputValue); onInputChange(frameInputValue);
}} }}
/> />
</Tooltip> </CVATTooltip>
</Col> </Col>
</> </>
); );

7
cvat-ui/src/components/annotation-page/top-bar/statistics-modal.tsx
Unescape Escape View File

@ -5,12 +5,13 @@
import React from 'react'; import React from 'react';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import { QuestionCircleOutlined } from '@ant-design/icons'; import { QuestionCircleOutlined } from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Table from 'antd/lib/table'; import Table from 'antd/lib/table';
import Modal from 'antd/lib/modal'; import Modal from 'antd/lib/modal';
import Spin from 'antd/lib/spin'; import Spin from 'antd/lib/spin';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import CVATTooltip from 'components/common/cvat-tooltip';
interface Props { interface Props {
collecting: boolean; collecting: boolean;
data: any; data: any;
@ -76,12 +77,12 @@ export default function StatisticsModalComponent(props: Props): JSX.Element {
}); });
const makeShapesTracksTitle = (title: string): JSX.Element => ( const makeShapesTracksTitle = (title: string): JSX.Element => (
<Tooltip title='Shapes / Tracks' mouseLeaveDelay={0}> <CVATTooltip title='Shapes / Tracks'>
<Text strong style={{ marginRight: 5 }}> <Text strong style={{ marginRight: 5 }}>
{title} {title}
</Text> </Text>
<QuestionCircleOutlined className='cvat-info-circle-icon' /> <QuestionCircleOutlined className='cvat-info-circle-icon' />
</Tooltip> </CVATTooltip>
); );
const columns = [ const columns = [

18
cvat-ui/src/components/common/cvat-tooltip.tsx
Unescape Escape View File

@ -0,0 +1,18 @@
// Copyright (C) 2021 Intel Corporation
//
// SPDX-License-Identifier: MIT
import React from 'react';
import Tooltip, { TooltipProps } from 'antd/lib/tooltip';
function CVATTooltip(props: TooltipProps): JSX.Element {
const { children, ...rest } = props;
return (
<Tooltip destroyTooltipOnHide={{ keepParent: false }} mouseLeaveDelay={0} {...rest}>
{children}
</Tooltip>
);
}
export default React.memo(CVATTooltip);

23
cvat-ui/src/components/create-task-page/advanced-configuration-form.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -7,12 +7,12 @@ import { Row, Col } from 'antd/lib/grid';
import { PercentageOutlined } from '@ant-design/icons'; import { PercentageOutlined } from '@ant-design/icons';
import Input from 'antd/lib/input'; import Input from 'antd/lib/input';
import Checkbox from 'antd/lib/checkbox'; import Checkbox from 'antd/lib/checkbox';
import Tooltip from 'antd/lib/tooltip';
import Form, { FormInstance, RuleObject, RuleRender } from 'antd/lib/form'; import Form, { FormInstance, RuleObject, RuleRender } from 'antd/lib/form';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import { Store } from 'antd/lib/form/interface';
import CVATTooltip from 'components/common/cvat-tooltip';
import patterns from 'utils/validation-patterns'; import patterns from 'utils/validation-patterns';
import { Store } from 'antd/lib/form/interface';
export interface AdvancedConfiguration { export interface AdvancedConfiguration {
bugTracker?: string; bugTracker?: string;
@ -176,7 +176,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
private renderImageQuality(): JSX.Element { private renderImageQuality(): JSX.Element {
return ( return (
<Tooltip title='Defines images compression level' mouseLeaveDelay={0}> <CVATTooltip title='Defines images compression level'>
<Form.Item <Form.Item
label='Image quality' label='Image quality'
name='imageQuality' name='imageQuality'
@ -190,13 +190,13 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
> >
<Input size='large' type='number' min={5} max={100} suffix={<PercentageOutlined />} /> <Input size='large' type='number' min={5} max={100} suffix={<PercentageOutlined />} />
</Form.Item> </Form.Item>
</Tooltip> </CVATTooltip>
); );
} }
private renderOverlap(): JSX.Element { private renderOverlap(): JSX.Element {
return ( return (
<Tooltip title='Defines a number of intersected frames between different segments' mouseLeaveDelay={0}> <CVATTooltip title='Defines a number of intersected frames between different segments'>
<Form.Item <Form.Item
label='Overlap size' label='Overlap size'
name='overlapSize' name='overlapSize'
@ -205,17 +205,17 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
> >
<Input size='large' type='number' min={0} /> <Input size='large' type='number' min={0} />
</Form.Item> </Form.Item>
</Tooltip> </CVATTooltip>
); );
} }
private renderSegmentSize(): JSX.Element { private renderSegmentSize(): JSX.Element {
return ( return (
<Tooltip title='Defines a number of frames in a segment' mouseLeaveDelay={0}> <CVATTooltip title='Defines a number of frames in a segment'>
<Form.Item label='Segment size' name='segmentSize' rules={[{ validator: isInteger({ min: 1 }) }]}> <Form.Item label='Segment size' name='segmentSize' rules={[{ validator: isInteger({ min: 1 }) }]}>
<Input size='large' type='number' min={1} /> <Input size='large' type='number' min={1} />
</Form.Item> </Form.Item>
</Tooltip> </CVATTooltip>
); );
} }
@ -329,7 +329,7 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
private renderChunkSize(): JSX.Element { private renderChunkSize(): JSX.Element {
return ( return (
<Tooltip <CVATTooltip
title={( title={(
<> <>
Defines a number of frames to be packed in a chunk when send from client to server. Server Defines a number of frames to be packed in a chunk when send from client to server. Server
@ -346,12 +346,11 @@ class AdvancedConfigurationForm extends React.PureComponent<Props> {
More: 1 - 4 More: 1 - 4
</> </>
)} )}
mouseLeaveDelay={0}
> >
<Form.Item label='Chunk size' name='dataChunkSize' rules={[{ validator: isInteger({ min: 1 }) }]}> <Form.Item label='Chunk size' name='dataChunkSize' rules={[{ validator: isInteger({ min: 1 }) }]}>
<Input size='large' type='number' /> <Input size='large' type='number' />
</Form.Item> </Form.Item>
</Tooltip> </CVATTooltip>
); );
} }

8
cvat-ui/src/components/global-error-boundary/global-error-boundary.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -10,7 +10,6 @@ import Text from 'antd/lib/typography/Text';
import Paragraph from 'antd/lib/typography/Paragraph'; import Paragraph from 'antd/lib/typography/Paragraph';
import Collapse from 'antd/lib/collapse'; import Collapse from 'antd/lib/collapse';
import TextArea from 'antd/lib/input/TextArea'; import TextArea from 'antd/lib/input/TextArea';
import Tooltip from 'antd/lib/tooltip';
import copy from 'copy-to-clipboard'; import copy from 'copy-to-clipboard';
import ErrorStackParser from 'error-stack-parser'; import ErrorStackParser from 'error-stack-parser';
@ -18,6 +17,7 @@ import { ThunkDispatch } from 'utils/redux';
import { resetAfterErrorAsync } from 'actions/boundaries-actions'; import { resetAfterErrorAsync } from 'actions/boundaries-actions';
import { CombinedState } from 'reducers/interfaces'; import { CombinedState } from 'reducers/interfaces';
import logger, { LogType } from 'cvat-logger'; import logger, { LogType } from 'cvat-logger';
import CVATTooltip from 'components/common/cvat-tooltip';
import consts from 'consts'; import consts from 'consts';
interface StateToProps { interface StateToProps {
@ -146,7 +146,7 @@ class GlobalErrorBoundary extends React.PureComponent<Props, State> {
</Paragraph> </Paragraph>
<ul> <ul>
<li> <li>
<Tooltip title='Copied!' trigger='click' mouseLeaveDelay={0}> <CVATTooltip title='Copied!' trigger='click'>
{/* eslint-disable-next-line */} {/* eslint-disable-next-line */}
<a <a
onClick={() => { onClick={() => {
@ -157,7 +157,7 @@ class GlobalErrorBoundary extends React.PureComponent<Props, State> {
Copy Copy
{' '} {' '}
</a> </a>
</Tooltip> </CVATTooltip>
the error message to clipboard the error message to clipboard
</li> </li>
<li> <li>

12
cvat-ui/src/components/labels-editor/constructor-viewer-item.tsx
Unescape Escape View File

@ -1,12 +1,12 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
import React from 'react'; import React from 'react';
import { EditOutlined, CloseOutlined } from '@ant-design/icons'; import { EditOutlined, CloseOutlined } from '@ant-design/icons';
import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import CVATTooltip from 'components/common/cvat-tooltip';
import consts from 'consts'; import consts from 'consts';
import { Label } from './common'; import { Label } from './common';
@ -25,7 +25,7 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
return ( return (
<div style={{ background: color || consts.NEW_LABEL_COLOR }} className='cvat-constructor-viewer-item'> <div style={{ background: color || consts.NEW_LABEL_COLOR }} className='cvat-constructor-viewer-item'>
<Text>{label.name}</Text> <Text>{label.name}</Text>
<Tooltip title='Update attributes' mouseLeaveDelay={0}> <CVATTooltip title='Update attributes'>
<span <span
role='button' role='button'
tabIndex={0} tabIndex={0}
@ -34,9 +34,9 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
> >
<EditOutlined /> <EditOutlined />
</span> </span>
</Tooltip> </CVATTooltip>
{label.id < 0 && ( {label.id < 0 && (
<Tooltip title='Delete label' mouseLeaveDelay={0}> <CVATTooltip title='Delete label'>
<span <span
role='button' role='button'
tabIndex={0} tabIndex={0}
@ -45,7 +45,7 @@ export default function ConstructorViewerItem(props: ConstructorViewerItemProps)
> >
<CloseOutlined /> <CloseOutlined />
</span> </span>
</Tooltip> </CVATTooltip>
)} )}
</div> </div>
); );

60
cvat-ui/src/components/labels-editor/label-form.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -8,12 +8,12 @@ import Icon, { CloseCircleOutlined, PlusOutlined } from '@ant-design/icons';
import Input from 'antd/lib/input'; import Input from 'antd/lib/input';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Checkbox from 'antd/lib/checkbox'; import Checkbox from 'antd/lib/checkbox';
import Tooltip from 'antd/lib/tooltip';
import Select from 'antd/lib/select'; import Select from 'antd/lib/select';
import Form, { FormInstance } from 'antd/lib/form'; import Form, { FormInstance } from 'antd/lib/form';
import Badge from 'antd/lib/badge'; import Badge from 'antd/lib/badge';
import { Store } from 'antd/lib/form/interface'; import { Store } from 'antd/lib/form/interface';
import CVATTooltip from 'components/common/cvat-tooltip';
import ColorPicker from 'components/annotation-page/standard-workspace/objects-side-bar/color-picker'; import ColorPicker from 'components/annotation-page/standard-workspace/objects-side-bar/color-picker';
import { ColorizeIcon } from 'icons'; import { ColorizeIcon } from 'icons';
import patterns from 'utils/validation-patterns'; import patterns from 'utils/validation-patterns';
@ -132,17 +132,27 @@ export default class LabelForm extends React.Component<Props> {
const type = attr ? attr.input_type.toUpperCase() : AttributeType.SELECT; const type = attr ? attr.input_type.toUpperCase() : AttributeType.SELECT;
return ( return (
<Tooltip title='An HTML element representing the attribute' mouseLeaveDelay={0}> <CVATTooltip title='An HTML element representing the attribute'>
<Form.Item name={[key, 'type']} fieldKey={[fieldInstance.fieldKey, 'type']} initialValue={type}> <Form.Item name={[key, 'type']} fieldKey={[fieldInstance.fieldKey, 'type']} initialValue={type}>
<Select className='cvat-attribute-type-input' disabled={locked}> <Select className='cvat-attribute-type-input' disabled={locked}>
<Select.Option value={AttributeType.SELECT} className='cvat-attribute-type-input-select'>Select</Select.Option> <Select.Option value={AttributeType.SELECT} className='cvat-attribute-type-input-select'>
<Select.Option value={AttributeType.RADIO} className='cvat-attribute-type-input-radio'>Radio</Select.Option> Select
<Select.Option value={AttributeType.CHECKBOX} className='cvat-attribute-type-input-checkbox'>Checkbox</Select.Option> </Select.Option>
<Select.Option value={AttributeType.TEXT} className='cvat-attribute-type-input-text'>Text</Select.Option> <Select.Option value={AttributeType.RADIO} className='cvat-attribute-type-input-radio'>
<Select.Option value={AttributeType.NUMBER} className='cvat-attribute-type-input-number'>Number</Select.Option> Radio
</Select.Option>
<Select.Option value={AttributeType.CHECKBOX} className='cvat-attribute-type-input-checkbox'>
Checkbox
</Select.Option>
<Select.Option value={AttributeType.TEXT} className='cvat-attribute-type-input-text'>
Text
</Select.Option>
<Select.Option value={AttributeType.NUMBER} className='cvat-attribute-type-input-number'>
Number
</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
</Tooltip> </CVATTooltip>
); );
} }
@ -168,7 +178,7 @@ export default class LabelForm extends React.Component<Props> {
}; };
return ( return (
<Tooltip title='Press enter to add a new value' mouseLeaveDelay={0}> <CVATTooltip title='Press enter to add a new value'>
<Form.Item <Form.Item
name={[key, 'values']} name={[key, 'values']}
fieldKey={[fieldInstance.fieldKey, 'values']} fieldKey={[fieldInstance.fieldKey, 'values']}
@ -190,7 +200,7 @@ export default class LabelForm extends React.Component<Props> {
dropdownStyle={{ display: 'none' }} dropdownStyle={{ display: 'none' }}
/> />
</Form.Item> </Form.Item>
</Tooltip> </CVATTooltip>
); );
} }
@ -199,14 +209,14 @@ export default class LabelForm extends React.Component<Props> {
const value = attr ? attr.values[0] : 'false'; const value = attr ? attr.values[0] : 'false';
return ( return (
<Tooltip title='Specify a default value' mouseLeaveDelay={0}> <CVATTooltip title='Specify a default value'>
<Form.Item name={[key, 'values']} fieldKey={[fieldInstance.fieldKey, 'values']} initialValue={value}> <Form.Item name={[key, 'values']} fieldKey={[fieldInstance.fieldKey, 'values']} initialValue={value}>
<Select className='cvat-attribute-values-input'> <Select className='cvat-attribute-values-input'>
<Select.Option value='false'>False</Select.Option> <Select.Option value='false'>False</Select.Option>
<Select.Option value='true'>True</Select.Option> <Select.Option value='true'>True</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
</Tooltip> </CVATTooltip>
); );
} }
@ -281,7 +291,7 @@ export default class LabelForm extends React.Component<Props> {
const value = attr ? attr.mutable : false; const value = attr ? attr.mutable : false;
return ( return (
<Tooltip title='Can this attribute be changed frame to frame?' mouseLeaveDelay={0}> <CVATTooltip title='Can this attribute be changed frame to frame?'>
<Form.Item <Form.Item
name={[key, 'mutable']} name={[key, 'mutable']}
fieldKey={[fieldInstance.fieldKey, 'mutable']} fieldKey={[fieldInstance.fieldKey, 'mutable']}
@ -292,7 +302,7 @@ export default class LabelForm extends React.Component<Props> {
Mutable Mutable
</Checkbox> </Checkbox>
</Form.Item> </Form.Item>
</Tooltip> </CVATTooltip>
); );
} }
@ -301,7 +311,7 @@ export default class LabelForm extends React.Component<Props> {
const locked = attr ? attr.id >= 0 : false; const locked = attr ? attr.id >= 0 : false;
return ( return (
<Tooltip title='Delete the attribute' mouseLeaveDelay={0}> <CVATTooltip title='Delete the attribute'>
<Form.Item> <Form.Item>
<Button <Button
type='link' type='link'
@ -314,7 +324,7 @@ export default class LabelForm extends React.Component<Props> {
<CloseCircleOutlined /> <CloseCircleOutlined />
</Button> </Button>
</Form.Item> </Form.Item>
</Tooltip> </CVATTooltip>
); );
} }
@ -407,7 +417,7 @@ export default class LabelForm extends React.Component<Props> {
private renderDoneButton(): JSX.Element { private renderDoneButton(): JSX.Element {
return ( return (
<Tooltip title='Save the label and return' mouseLeaveDelay={0}> <CVATTooltip title='Save the label and return'>
<Button <Button
style={{ width: '150px' }} style={{ width: '150px' }}
type='primary' type='primary'
@ -418,7 +428,7 @@ export default class LabelForm extends React.Component<Props> {
> >
Done Done
</Button> </Button>
</Tooltip> </CVATTooltip>
); );
} }
@ -427,7 +437,7 @@ export default class LabelForm extends React.Component<Props> {
if (label) return null; if (label) return null;
return ( return (
<Tooltip title='Save the label and create one more' mouseLeaveDelay={0}> <CVATTooltip title='Save the label and create one more'>
<Button <Button
style={{ width: '150px' }} style={{ width: '150px' }}
type='primary' type='primary'
@ -438,7 +448,7 @@ export default class LabelForm extends React.Component<Props> {
> >
Continue Continue
</Button> </Button>
</Tooltip> </CVATTooltip>
); );
} }
@ -446,7 +456,7 @@ export default class LabelForm extends React.Component<Props> {
const { onSubmit } = this.props; const { onSubmit } = this.props;
return ( return (
<Tooltip title='Do not save the label and return' mouseLeaveDelay={0}> <CVATTooltip title='Do not save the label and return'>
<Button <Button
type='primary' type='primary'
danger danger
@ -457,7 +467,7 @@ export default class LabelForm extends React.Component<Props> {
> >
Cancel Cancel
</Button> </Button>
</Tooltip> </CVATTooltip>
); );
} }
@ -469,7 +479,7 @@ export default class LabelForm extends React.Component<Props> {
{() => ( {() => (
<Form.Item name='color' initialValue={label ? label?.color : undefined}> <Form.Item name='color' initialValue={label ? label?.color : undefined}>
<ColorPicker placement='bottom'> <ColorPicker placement='bottom'>
<Tooltip title='Change color of the label'> <CVATTooltip title='Change color of the label'>
<Button type='default' className='cvat-change-task-label-color-button'> <Button type='default' className='cvat-change-task-label-color-button'>
<Badge <Badge
className='cvat-change-task-label-color-badge' className='cvat-change-task-label-color-badge'
@ -477,7 +487,7 @@ export default class LabelForm extends React.Component<Props> {
text={<Icon component={ColorizeIcon} />} text={<Icon component={ColorizeIcon} />}
/> />
</Button> </Button>
</Tooltip> </CVATTooltip>
</ColorPicker> </ColorPicker>
</Form.Item> </Form.Item>
)} )}

8
cvat-ui/src/components/labels-editor/labels-editor.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -6,12 +6,12 @@ import './styles.scss';
import React from 'react'; import React from 'react';
import Tabs from 'antd/lib/tabs'; import Tabs from 'antd/lib/tabs';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip';
import notification from 'antd/lib/notification'; import notification from 'antd/lib/notification';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import copy from 'copy-to-clipboard'; import copy from 'copy-to-clipboard';
import { CopyOutlined, EditOutlined, BuildOutlined } from '@ant-design/icons'; import { CopyOutlined, EditOutlined, BuildOutlined } from '@ant-design/icons';
import CVATTooltip from 'components/common/cvat-tooltip';
import RawViewer from './raw-viewer'; import RawViewer from './raw-viewer';
import ConstructorViewer from './constructor-viewer'; import ConstructorViewer from './constructor-viewer';
import ConstructorCreator from './constructor-creator'; import ConstructorCreator from './constructor-creator';
@ -195,7 +195,7 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditortProps
type='card' type='card'
tabBarStyle={{ marginBottom: '0px' }} tabBarStyle={{ marginBottom: '0px' }}
tabBarExtraContent={( tabBarExtraContent={(
<Tooltip title='Copied to clipboard!' trigger='click' mouseLeaveDelay={0}> <CVATTooltip title='Copied to clipboard!' trigger='click'>
<Button <Button
type='link' type='link'
icon={<CopyOutlined />} icon={<CopyOutlined />}
@ -218,7 +218,7 @@ export default class LabelsEditor extends React.PureComponent<LabelsEditortProps
> >
Copy Copy
</Button> </Button>
</Tooltip> </CVATTooltip>
)} )}
> >
<Tabs.TabPane <Tabs.TabPane

12
cvat-ui/src/components/labels-editor/raw-viewer.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -6,10 +6,10 @@ import React, { RefObject } from 'react';
import { Row, Col } from 'antd/lib/grid'; import { Row, Col } from 'antd/lib/grid';
import Input from 'antd/lib/input'; import Input from 'antd/lib/input';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip';
import Form, { FormInstance, RuleObject } from 'antd/lib/form'; import Form, { FormInstance, RuleObject } from 'antd/lib/form';
import { Store } from 'antd/lib/form/interface'; import { Store } from 'antd/lib/form/interface';
import CVATTooltip from 'components/common/cvat-tooltip';
import { import {
Label, Attribute, validateParsedLabel, idGenerator, Label, Attribute, validateParsedLabel, idGenerator,
} from './common'; } from './common';
@ -87,14 +87,14 @@ export default class RawViewer extends React.PureComponent<Props> {
</Form.Item> </Form.Item>
<Row justify='start' align='middle'> <Row justify='start' align='middle'>
<Col> <Col>
<Tooltip title='Save labels and return' mouseLeaveDelay={0}> <CVATTooltip title='Save labels and return'>
<Button style={{ width: '150px' }} type='primary' htmlType='submit'> <Button style={{ width: '150px' }} type='primary' htmlType='submit'>
Done Done
</Button> </Button>
</Tooltip> </CVATTooltip>
</Col> </Col>
<Col offset={1}> <Col offset={1}>
<Tooltip title='Do not save the label and return' mouseLeaveDelay={0}> <CVATTooltip title='Do not save the label and return'>
<Button <Button
type='primary' type='primary'
danger danger
@ -107,7 +107,7 @@ export default class RawViewer extends React.PureComponent<Props> {
> >
Reset Reset
</Button> </Button>
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
</Form> </Form>

36
cvat-ui/src/components/model-runner-modal/detector-runner.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -8,7 +8,6 @@ import { Row, Col } from 'antd/lib/grid';
import { CloseCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons'; import { CloseCircleOutlined, QuestionCircleOutlined } from '@ant-design/icons';
import Select from 'antd/lib/select'; import Select from 'antd/lib/select';
import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox'; import Checkbox, { CheckboxChangeEvent } from 'antd/lib/checkbox';
import Tooltip from 'antd/lib/tooltip';
import Tag from 'antd/lib/tag'; import Tag from 'antd/lib/tag';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import InputNumber from 'antd/lib/input-number'; import InputNumber from 'antd/lib/input-number';
@ -19,6 +18,8 @@ import { OptionData, OptionGroupData } from 'rc-select/lib/interface';
import { Model, StringObject } from 'reducers/interfaces'; import { Model, StringObject } from 'reducers/interfaces';
import CVATTooltip from 'components/common/cvat-tooltip';
import { clamp } from 'utils/math'; import { clamp } from 'utils/math';
import consts from 'consts'; import consts from 'consts';
import { DimensionType } from '../../reducers/interfaces'; import { DimensionType } from '../../reducers/interfaces';
@ -93,7 +94,7 @@ function DetectorRunner(props: Props): JSX.Element {
onChange: (label: string) => void, onChange: (label: string) => void,
): JSX.Element { ): JSX.Element {
return ( return (
<Tooltip title={tooltip}> <CVATTooltip title={tooltip}>
<Select <Select
value={value} value={value}
onChange={onChange} onChange={onChange}
@ -118,7 +119,7 @@ function DetectorRunner(props: Props): JSX.Element {
), ),
)} )}
</Select> </Select>
</Tooltip> </CVATTooltip>
); );
} }
@ -169,7 +170,7 @@ function DetectorRunner(props: Props): JSX.Element {
<Tag color={color}>{mapping[modelLabel]}</Tag> <Tag color={color}>{mapping[modelLabel]}</Tag>
</Col> </Col>
<Col offset={1}> <Col offset={1}>
<Tooltip title='Remove the mapped values' mouseLeaveDelay={0}> <CVATTooltip title='Remove the mapped values'>
<CloseCircleOutlined <CloseCircleOutlined
className='cvat-danger-circle-icon' className='cvat-danger-circle-icon'
onClick={(): void => { onClick={(): void => {
@ -178,7 +179,7 @@ function DetectorRunner(props: Props): JSX.Element {
setMapping(newmapping); setMapping(newmapping);
}} }}
/> />
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
); );
@ -195,12 +196,9 @@ function DetectorRunner(props: Props): JSX.Element {
updateMatch(null, taskLabel))} updateMatch(null, taskLabel))}
</Col> </Col>
<Col span={1} offset={1}> <Col span={1} offset={1}>
<Tooltip <CVATTooltip title='Specify a label mapping between model labels and task labels'>
title='Specify a label mapping between model labels and task labels'
mouseLeaveDelay={0}
>
<QuestionCircleOutlined className='cvat-info-circle-icon' /> <QuestionCircleOutlined className='cvat-info-circle-icon' />
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
</> </>
@ -222,19 +220,19 @@ function DetectorRunner(props: Props): JSX.Element {
<Text>Threshold</Text> <Text>Threshold</Text>
</Col> </Col>
<Col offset={1}> <Col offset={1}>
<Tooltip title='Minimum similarity value for shapes that can be merged'> <CVATTooltip title='Minimum similarity value for shapes that can be merged'>
<InputNumber <InputNumber
min={0.01} min={0.01}
step={0.01} step={0.01}
max={1} max={1}
value={threshold} value={threshold}
onChange={(value: number | undefined | string) => { onChange={(value: number | undefined | string | null) => {
if (typeof value !== 'undefined') { if (typeof value !== 'undefined' && value !== null) {
setThreshold(clamp(+value, 0.01, 1)); setThreshold(clamp(+value, 0.01, 1));
} }
}} }}
/> />
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
<Row align='middle' justify='start'> <Row align='middle' justify='start'>
@ -242,18 +240,18 @@ function DetectorRunner(props: Props): JSX.Element {
<Text>Maximum distance</Text> <Text>Maximum distance</Text>
</Col> </Col>
<Col offset={1}> <Col offset={1}>
<Tooltip title='Maximum distance between shapes that can be merged'> <CVATTooltip title='Maximum distance between shapes that can be merged'>
<InputNumber <InputNumber
placeholder='Threshold' placeholder='Threshold'
min={1} min={1}
value={distance} value={distance}
onChange={(value: number | undefined | string) => { onChange={(value: number | undefined | string | null) => {
if (typeof value !== 'undefined') { if (typeof value !== 'undefined' && value !== null) {
setDistance(+value); setDistance(+value);
} }
}} }}
/> />
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
</div> </div>

21
cvat-ui/src/components/task-page/job-list.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -9,11 +9,12 @@ import { Row, Col } from 'antd/lib/grid';
import { LoadingOutlined, QuestionCircleOutlined, CopyOutlined } from '@ant-design/icons'; import { LoadingOutlined, QuestionCircleOutlined, CopyOutlined } from '@ant-design/icons';
import Table from 'antd/lib/table'; import Table from 'antd/lib/table';
import Button from 'antd/lib/button'; import Button from 'antd/lib/button';
import Tooltip from 'antd/lib/tooltip';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import moment from 'moment'; import moment from 'moment';
import copy from 'copy-to-clipboard'; import copy from 'copy-to-clipboard';
import CVATTooltip from 'components/common/cvat-tooltip';
import getCore from 'cvat-core-wrapper'; import getCore from 'cvat-core-wrapper';
import UserSelector, { User } from './user-selector'; import UserSelector, { User } from './user-selector';
@ -145,9 +146,9 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
return ( return (
<Text strong className={progressColor}> <Text strong className={progressColor}>
{status} {status}
<Tooltip title={<ReviewSummaryComponent jobInstance={jobInstance} />}> <CVATTooltip title={<ReviewSummaryComponent jobInstance={jobInstance} />}>
<QuestionCircleOutlined /> <QuestionCircleOutlined />
</Tooltip> </CVATTooltip>
</Text> </Text>
); );
}, },
@ -225,7 +226,7 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
<Row justify='space-between' align='middle'> <Row justify='space-between' align='middle'>
<Col> <Col>
<Text className='cvat-text-color cvat-jobs-header'> Jobs </Text> <Text className='cvat-text-color cvat-jobs-header'> Jobs </Text>
<Tooltip trigger='click' title='Copied to clipboard!' mouseLeaveDelay={0}> <CVATTooltip trigger='click' title='Copied to clipboard!'>
<Button <Button
type='link' type='link'
onClick={(): void => { onClick={(): void => {
@ -258,13 +259,19 @@ function JobListComponent(props: Props & RouteComponentProps): JSX.Element {
<CopyOutlined /> <CopyOutlined />
Copy Copy
</Button> </Button>
</Tooltip> </CVATTooltip>
</Col> </Col>
<Col> <Col>
<Text className='cvat-text-color'>{`${completed} of ${data.length} jobs`}</Text> <Text className='cvat-text-color'>{`${completed} of ${data.length} jobs`}</Text>
</Col> </Col>
</Row> </Row>
<Table className='cvat-task-jobs-table' rowClassName={() => 'cvat-task-jobs-table-row'} columns={columns} dataSource={data} size='small' /> <Table
className='cvat-task-jobs-table'
rowClassName={() => 'cvat-task-jobs-table-row'}
columns={columns}
dataSource={data}
size='small'
/>
</div> </div>
); );
} }

9
cvat-ui/src/components/tasks-page/automatic-annotation-progress.tsx
Unescape Escape View File

@ -1,4 +1,4 @@
// Copyright (C) 2020 Intel Corporation // Copyright (C) 2020-2021 Intel Corporation
// //
// SPDX-License-Identifier: MIT // SPDX-License-Identifier: MIT
@ -7,8 +7,9 @@ import { Row, Col } from 'antd/lib/grid';
import { CloseOutlined } from '@ant-design/icons'; import { CloseOutlined } from '@ant-design/icons';
import Text from 'antd/lib/typography/Text'; import Text from 'antd/lib/typography/Text';
import Progress from 'antd/lib/progress'; import Progress from 'antd/lib/progress';
import Tooltip from 'antd/lib/tooltip';
import Modal from 'antd/lib/modal'; import Modal from 'antd/lib/modal';
import CVATTooltip from 'components/common/cvat-tooltip';
import { ActiveInference } from 'reducers/interfaces'; import { ActiveInference } from 'reducers/interfaces';
interface Props { interface Props {
@ -41,7 +42,7 @@ export default function AutomaticAnnotationProgress(props: Props): JSX.Element |
/> />
</Col> </Col>
<Col span={1} className='close-auto-annotation-icon'> <Col span={1} className='close-auto-annotation-icon'>
<Tooltip title='Cancel automatic annotation' mouseLeaveDelay={0}> <CVATTooltip title='Cancel automatic annotation'>
<CloseOutlined <CloseOutlined
onClick={() => { onClick={() => {
Modal.confirm({ Modal.confirm({
@ -57,7 +58,7 @@ export default function AutomaticAnnotationProgress(props: Props): JSX.Element |
}); });
}} }}
/> />
</Tooltip> </CVATTooltip>
</Col> </Col>
</Row> </Row>
</> </>

Write Preview
Loading…
Cancel
Save