Controls panel titles

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

@@ -4,19 +4,11 @@
 
 import React from 'react';
 import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
+import Layout from 'antd/lib/layout';
 
-import {
+import { ActiveControl, Rotation } from 'reducers/interfaces';
-    Layout,
+import { Canvas } from 'cvat-canvas';
-} from 'antd';
+import { formatShortcuts } from 'utils/shortcuts';
-
-import {
-    ActiveControl,
-    Rotation,
-} from 'reducers/interfaces';
-
-import {
-    Canvas,
-} from 'cvat-canvas';
 
 import RotateControl from './rotate-control';
 import CursorControl from './cursor-control';
@@ -149,10 +141,17 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
             width={44}
         >
             <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
-
+            <CursorControl
-            <CursorControl canvasInstance={canvasInstance} activeControl={activeControl} />
+                cursorShortkey={formatShortcuts(keyMap.CANCEL)}
+                canvasInstance={canvasInstance}
+                activeControl={activeControl}
+            />
             <MoveControl canvasInstance={canvasInstance} activeControl={activeControl} />
-            <RotateControl rotateFrame={rotateFrame} />
+            <RotateControl
+                anticlockwiseShortcut={formatShortcuts(keyMap.ANTICLOCKWISE_ROTATION)}
+                clockwiseShortcut={formatShortcuts(keyMap.CLOCKWISE_ROTATION)}
+                rotateFrame={rotateFrame}
+            />
 
             <hr />
 
@@ -186,11 +185,14 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
             <hr />
 
             <MergeControl
+                switchMergeShortcut={formatShortcuts(keyMap.SWITCH_MERGE_MODE)}
                 canvasInstance={canvasInstance}
                 activeControl={activeControl}
                 mergeObjects={mergeObjects}
             />
             <GroupControl
+                switchGroupShortcut={formatShortcuts(keyMap.SWITCH_GROUP_MODE)}
+                resetGroupShortcut={formatShortcuts(keyMap.RESET_GROUP)}
                 canvasInstance={canvasInstance}
                 activeControl={activeControl}
                 groupObjects={groupObjects}

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

@@ -3,26 +3,16 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import Icon from 'antd/lib/icon';
+import Tooltop from 'antd/lib/tooltip';
 
-import {
+import { CursorIcon } from 'icons';
-    Icon,
+import { ActiveControl } from 'reducers/interfaces';
-    Tooltip,
+import { Canvas } from 'cvat-canvas';
-} from 'antd';
-
-import {
-    CursorIcon,
-} from 'icons';
-
-import {
-    ActiveControl,
-} from 'reducers/interfaces';
-
-import {
-    Canvas,
-} from 'cvat-canvas';
 
 interface Props {
     canvasInstance: Canvas;
+    cursorShortkey: string;
     activeControl: ActiveControl;
 }
 
@@ -30,10 +20,11 @@ function CursorControl(props: Props): JSX.Element {
     const {
         canvasInstance,
         activeControl,
+        cursorShortkey,
     } = props;
 
     return (
-        <Tooltip title='Cursor' placement='right'>
+        <Tooltop title={`Cursor ${cursorShortkey}`} placement='right'>
             <Icon
                 component={CursorIcon}
                 className={activeControl === ActiveControl.CURSOR
@@ -44,7 +35,7 @@ function CursorControl(props: Props): JSX.Element {
                         : undefined
                 }
             />
-        </Tooltip>
+        </Tooltop>
     );
 }
 

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

@@ -3,10 +3,8 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import {
+import Popover from 'antd/lib/popover';
-    Popover,
+import Icon from 'antd/lib/icon';
-    Icon,
-} from 'antd';
 
 import { Canvas } from 'cvat-canvas';
 import { PointIcon } from 'icons';
@@ -20,10 +18,7 @@ interface Props {
 }
 
 function DrawPointsControl(props: Props): JSX.Element {
-    const {
+    const { canvasInstance, isDrawing } = props;
-        canvasInstance,
-        isDrawing,
-    } = props;
 
     const dynamcPopoverPros = isDrawing ? {
         overlayStyle: {

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

@@ -3,10 +3,8 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import {
+import Popover from 'antd/lib/popover';
-    Popover,
+import Icon from 'antd/lib/icon';
-    Icon,
-} from 'antd';
 
 import { Canvas } from 'cvat-canvas';
 import { PolygonIcon } from 'icons';
@@ -20,10 +18,7 @@ interface Props {
 }
 
 function DrawPolygonControl(props: Props): JSX.Element {
-    const {
+    const { canvasInstance, isDrawing } = props;
-        canvasInstance,
-        isDrawing,
-    } = props;
 
     const dynamcPopoverPros = isDrawing ? {
         overlayStyle: {

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

@@ -3,10 +3,8 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import {
+import Popover from 'antd/lib/popover';
-    Popover,
+import Icon from 'antd/lib/icon';
-    Icon,
-} from 'antd';
 
 import { Canvas } from 'cvat-canvas';
 import { PolylineIcon } from 'icons';
@@ -20,10 +18,7 @@ interface Props {
 }
 
 function DrawPolylineControl(props: Props): JSX.Element {
-    const {
+    const { canvasInstance, isDrawing } = props;
-        canvasInstance,
-        isDrawing,
-    } = props;
 
     const dynamcPopoverPros = isDrawing ? {
         overlayStyle: {

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

@@ -3,10 +3,8 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import {
+import Popover from 'antd/lib/popover';
-    Popover,
+import Icon from 'antd/lib/icon';
-    Icon,
-} from 'antd';
 
 import { Canvas } from 'cvat-canvas';
 import { RectangleIcon } from 'icons';
@@ -20,10 +18,7 @@ interface Props {
 }
 
 function DrawRectangleControl(props: Props): JSX.Element {
-    const {
+    const { canvasInstance, isDrawing } = props;
-        canvasInstance,
-        isDrawing,
-    } = props;
 
     const dynamcPopoverPros = isDrawing ? {
         overlayStyle: {
@@ -44,7 +39,9 @@ function DrawRectangleControl(props: Props): JSX.Element {
             overlayClassName='cvat-draw-shape-popover'
             placement='right'
             content={(
-                <DrawShapePopoverContainer shapeType={ShapeType.RECTANGLE} />
+                <DrawShapePopoverContainer
+                    shapeType={ShapeType.RECTANGLE}
+                />
             )}
         >
             <Icon

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

@@ -9,6 +9,7 @@ import Select from 'antd/lib/select';
 import Button from 'antd/lib/button';
 import InputNumber from 'antd/lib/input-number';
 import Radio, { RadioChangeEvent } from 'antd/lib/radio';
+import Tooltip from 'antd/lib/tooltip';
 import Text from 'antd/lib/typography/Text';
 
 import { RectDrawingMethod } from 'cvat-canvas';
@@ -22,6 +23,7 @@ interface Props {
     rectDrawingMethod?: RectDrawingMethod;
     numberOfPoints?: number;
     selectedLabeID: number;
+    repeatShapeShortcut: string;
     onChangeLabel(value: string): void;
     onChangePoints(value: number | undefined): void;
     onChangeRectDrawingMethod(event: RadioChangeEvent): void;
@@ -37,6 +39,7 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
         selectedLabeID,
         numberOfPoints,
         rectDrawingMethod,
+        repeatShapeShortcut,
         onDrawTrack,
         onDrawShape,
         onChangeLabel,
@@ -133,19 +136,23 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
             }
             <Row type='flex' justify='space-around'>
                 <Col span={12}>
-                    <Button
+                    <Tooltip title={`Press ${repeatShapeShortcut} to draw again`}>
-                        onClick={onDrawShape}
+                        <Button
-                    >
+                            onClick={onDrawShape}
-                        Shape
+                        >
-                    </Button>
+                            Shape
+                        </Button>
+                    </Tooltip>
                 </Col>
                 <Col span={12}>
-                    <Button
+                    <Tooltip title={`Press ${repeatShapeShortcut} to draw again`}>
-                        onClick={onDrawTrack}
+                        <Button
-                        disabled={shapeType !== ShapeType.RECTANGLE}
+                            onClick={onDrawTrack}
-                    >
+                            disabled={shapeType !== ShapeType.RECTANGLE}
-                        Track
+                        >
-                    </Button>
+                            Track
+                        </Button>
+                    </Tooltip>
                 </Col>
             </Row>
         </div>

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

@@ -3,19 +3,11 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import Icon from 'antd/lib/icon';
+import Tooltip from 'antd/lib/tooltip';
 
-import {
+import { FitIcon } from 'icons';
-    Icon,
+import { Canvas } from 'cvat-canvas';
-    Tooltip,
-} from 'antd';
-
-import {
-    FitIcon,
-} from 'icons';
-
-import {
-    Canvas,
-} from 'cvat-canvas';
 
 interface Props {
     canvasInstance: Canvas;
@@ -27,7 +19,7 @@ function FitControl(props: Props): JSX.Element {
     } = props;
 
     return (
-        <Tooltip title='Fit the image' placement='right'>
+        <Tooltip title='Fit the image [Double Click]' placement='right'>
             <Icon component={FitIcon} onClick={(): void => canvasInstance.fit()} />
         </Tooltip>
     );

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

@@ -3,28 +3,25 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import Tooltip from 'antd/lib/tooltip';
+import Icon from 'antd/lib/icon';
 
-import {
+import { GroupIcon } from 'icons';
-    Tooltip,
-    Icon,
-} from 'antd';
-
-import {
-    GroupIcon,
-} from 'icons';
-
 import { Canvas } from 'cvat-canvas';
 import { ActiveControl } from 'reducers/interfaces';
 
 interface Props {
     canvasInstance: Canvas;
     activeControl: ActiveControl;
-
+    switchGroupShortcut: string;
+    resetGroupShortcut: string;
     groupObjects(enabled: boolean): void;
 }
 
 function GroupControl(props: Props): JSX.Element {
     const {
+        switchGroupShortcut,
+        resetGroupShortcut,
         activeControl,
         canvasInstance,
         groupObjects,
@@ -45,8 +42,10 @@ function GroupControl(props: Props): JSX.Element {
             },
         };
 
+    const title = `Group shapes/tracks ${switchGroupShortcut}.`
+        + ` Select and press ${resetGroupShortcut} to reset a group`;
     return (
-        <Tooltip title='Group shapes/tracks' placement='right'>
+        <Tooltip title={title} placement='right'>
             <Icon {...dynamicIconProps} component={GroupIcon} />
         </Tooltip>
     );

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

@@ -19,12 +19,13 @@ import { ActiveControl } from 'reducers/interfaces';
 interface Props {
     canvasInstance: Canvas;
     activeControl: ActiveControl;
-
+    switchMergeShortcut: string;
     mergeObjects(enabled: boolean): void;
 }
 
 function MergeControl(props: Props): JSX.Element {
     const {
+        switchMergeShortcut,
         activeControl,
         canvasInstance,
         mergeObjects,
@@ -46,7 +47,7 @@ function MergeControl(props: Props): JSX.Element {
         };
 
     return (
-        <Tooltip title='Merge shapes/tracks' placement='right'>
+        <Tooltip title={`Merge shapes/tracks ${switchMergeShortcut}`} placement='right'>
             <Icon {...dynamicIconProps} component={MergeIcon} />
         </Tooltip>
     );

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

@@ -3,23 +3,12 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import Icon from 'antd/lib/icon';
+import Tooltip from 'antd/lib/tooltip';
 
-import {
+import { MoveIcon } from 'icons';
-    Icon,
+import { ActiveControl } from 'reducers/interfaces';
-    Tooltip,
+import { Canvas } from 'cvat-canvas';
-} from 'antd';
-
-import {
-    MoveIcon,
-} from 'icons';
-
-import {
-    ActiveControl,
-} from 'reducers/interfaces';
-
-import {
-    Canvas,
-} from 'cvat-canvas';
 
 interface Props {
     canvasInstance: Canvas;
@@ -27,10 +16,7 @@ interface Props {
 }
 
 function MoveControl(props: Props): JSX.Element {
-    const {
+    const { canvasInstance, activeControl } = props;
-        canvasInstance,
-        activeControl,
-    } = props;
 
     return (
         <Tooltip title='Move the image' placement='right'>

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

@@ -3,23 +3,12 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import Icon from 'antd/lib/icon';
+import Tooltip from 'antd/lib/tooltip';
 
-import {
+import { ZoomIcon } from 'icons';
-    Icon,
+import { ActiveControl } from 'reducers/interfaces';
-    Tooltip,
+import { Canvas } from 'cvat-canvas';
-} from 'antd';
-
-import {
-    ZoomIcon,
-} from 'icons';
-
-import {
-    ActiveControl,
-} from 'reducers/interfaces';
-
-import {
-    Canvas,
-} from 'cvat-canvas';
 
 interface Props {
     canvasInstance: Canvas;

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

@@ -3,27 +3,23 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import Icon from 'antd/lib/icon';
+import Tooltip from 'antd/lib/tooltip';
+import Popover from 'antd/lib/popover';
 
-import {
+import { RotateIcon } from 'icons';
-    Icon,
+import { Rotation } from 'reducers/interfaces';
-    Tooltip,
-    Popover,
-} from 'antd';
-
-import {
-    RotateIcon,
-} from 'icons';
-
-import {
-    Rotation,
-} from 'reducers/interfaces';
 
 interface Props {
+    clockwiseShortcut: string;
+    anticlockwiseShortcut: string;
     rotateFrame(rotation: Rotation): void;
 }
 
 function RotateControl(props: Props): JSX.Element {
     const {
+        anticlockwiseShortcut,
+        clockwiseShortcut,
         rotateFrame,
     } = props;
 
@@ -33,14 +29,14 @@ function RotateControl(props: Props): JSX.Element {
             placement='right'
             content={(
                 <>
-                    <Tooltip title='Rotate the image anticlockwise' placement='topRight'>
+                    <Tooltip title={`Rotate the image anticlockwise ${anticlockwiseShortcut}`} placement='topRight'>
                         <Icon
                             className='cvat-rotate-canvas-controls-left'
                             onClick={(): void => rotateFrame(Rotation.ANTICLOCKWISE90)}
                             component={RotateIcon}
                         />
                     </Tooltip>
-                    <Tooltip title='Rotate the image clockwise' placement='topRight'>
+                    <Tooltip title={`Rotate the image clockwise ${clockwiseShortcut}`} placement='topRight'>
                         <Icon
                             className='cvat-rotate-canvas-controls-right'
                             onClick={(): void => rotateFrame(Rotation.CLOCKWISE90)}

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

@@ -3,10 +3,8 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import {
+import Popover from 'antd/lib/popover';
-    Popover,
+import Icon from 'antd/lib/icon';
-    Icon,
-} from 'antd';
 
 import { Canvas } from 'cvat-canvas';
 import { TagIcon } from 'icons';

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

@@ -3,29 +3,27 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-
+import { Row, Col } from 'antd/lib/grid';
-import {
+import Select from 'antd/lib/select';
-    Row,
+import Button from 'antd/lib/button';
-    Col,
+import Tooltip from 'antd/lib/tooltip';
-    Select,
-    Button,
-} from 'antd';
-
 import Text from 'antd/lib/typography/Text';
 
 interface Props {
     labels: any[];
     selectedLabeID: number;
+    repeatShapeShortcut: string;
     onChangeLabel(value: string): void;
     onSetup(
         labelID: number,
     ): void;
 }
 
-function setupTagPopover(props: Props): JSX.Element {
+function SetupTagPopover(props: Props): JSX.Element {
     const {
         labels,
         selectedLabeID,
+        repeatShapeShortcut,
         onChangeLabel,
         onSetup,
     } = props;
@@ -63,13 +61,15 @@ function setupTagPopover(props: Props): JSX.Element {
             </Row>
             <Row type='flex' justify='space-around'>
                 <Col span={24}>
-                    <Button onClick={() => onSetup(selectedLabeID)}>
+                    <Tooltip title={`Press ${repeatShapeShortcut} to add a tag again`}>
-                        Tag
+                        <Button onClick={() => onSetup(selectedLabeID)}>
-                    </Button>
+                            Tag
+                        </Button>
+                    </Tooltip>
                 </Col>
             </Row>
         </div>
     );
 }
 
-export default React.memo(setupTagPopover);
+export default React.memo(SetupTagPopover);

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

@@ -3,16 +3,10 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import Tooltip from 'antd/lib/tooltip';
+import Icon from 'antd/lib/icon';
 
-import {
+import { SplitIcon } from 'icons';
-    Tooltip,
-    Icon,
-} from 'antd';
-
-import {
-    SplitIcon,
-} from 'icons';
-
 import { Canvas } from 'cvat-canvas';
 import { ActiveControl } from 'reducers/interfaces';
 

cvat-ui/src/containers/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover.tsx

@@ -3,20 +3,15 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import { ExtendedKeyMapOptions } from 'react-hotkeys';
 import { connect } from 'react-redux';
 import { RadioChangeEvent } from 'antd/lib/radio';
 
-import {
+import { CombinedState, ShapeType, ObjectType } from 'reducers/interfaces';
-    CombinedState,
+import { rememberObject } from 'actions/annotation-actions';
-    ShapeType,
-    ObjectType,
-} from 'reducers/interfaces';
-
-import {
-    rememberObject,
-} from 'actions/annotation-actions';
 import { Canvas, RectDrawingMethod } from 'cvat-canvas';
 import DrawShapePopoverComponent from 'components/annotation-page/standard-workspace/controls-side-bar/draw-shape-popover';
+import { formatShortcuts } from 'utils/shortcuts';
 
 interface OwnProps {
     shapeType: ShapeType;
@@ -33,6 +28,7 @@ interface DispatchToProps {
 }
 
 interface StateToProps {
+    keyMap: Record<string, ExtendedKeyMapOptions>;
     canvasInstance: Canvas;
     shapeType: ShapeType;
     labels: any[];
@@ -62,12 +58,16 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
                 labels,
             },
         },
+        shortcuts: {
+            keyMap,
+        },
     } = state;
 
     return {
         ...own,
         canvasInstance,
         labels,
+        keyMap,
     };
 }
 
@@ -164,6 +164,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
         } = this.state;
 
         const {
+            keyMap,
             labels,
             shapeType,
         } = this.props;
@@ -176,6 +177,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
                 selectedLabeID={selectedLabelID}
                 numberOfPoints={numberOfPoints}
                 rectDrawingMethod={rectDrawingMethod}
+                repeatShapeShortcut={formatShortcuts(keyMap.SWITCH_DRAW_MODE)}
                 onChangeLabel={this.onChangeLabel}
                 onChangePoints={this.onChangePoints}
                 onChangeRectDrawingMethod={this.onChangeRectDrawingMethod}

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

@@ -3,20 +3,15 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
+import { ExtendedKeyMapOptions } from 'react-hotkeys';
 import { connect } from 'react-redux';
 
-import {
+import { CombinedState, ObjectType } from 'reducers/interfaces';
-    CombinedState,
+import { createAnnotationsAsync, rememberObject } from 'actions/annotation-actions';
-    ObjectType,
-} from 'reducers/interfaces';
-
-import {
-    createAnnotationsAsync,
-    rememberObject,
-} from 'actions/annotation-actions';
 import SetupTagPopoverComponent from 'components/annotation-page/standard-workspace/controls-side-bar/setup-tag-popover';
 
 import { Canvas } from 'cvat-canvas';
+import { formatShortcuts } from 'utils/shortcuts';
 import getCore from 'cvat-core';
 
 const cvat = getCore();
@@ -26,6 +21,7 @@ interface DispatchToProps {
 }
 
 interface StateToProps {
+    keyMap: Record<string, ExtendedKeyMapOptions>;
     canvasInstance: Canvas;
     jobInstance: any;
     labels: any[];
@@ -59,6 +55,9 @@ function mapStateToProps(state: CombinedState): StateToProps {
                 },
             },
         },
+        shortcuts: {
+            keyMap,
+        },
     } = state;
 
     return {
@@ -66,6 +65,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         jobInstance,
         labels,
         frame,
+        keyMap,
     };
 }
 
@@ -91,7 +91,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
         });
     };
 
-    private onSetup(): void {
+    private onSetup = (): void => {
         const {
             frame,
             labels,
@@ -114,23 +114,17 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
         });
 
         onAnnotationCreate(jobInstance, frame, [objectState]);
-    }
+    };
 
     public render(): JSX.Element {
-        const {
+        const { selectedLabelID } = this.state;
-            selectedLabelID,
+        const { keyMap, labels } = this.props;
-        } = this.state;
-
-        const {
-            labels,
-        } = this.props;
-
-        this.onSetup = this.onSetup.bind(this);
 
         return (
             <SetupTagPopoverComponent
                 labels={labels}
                 selectedLabeID={selectedLabelID}
+                repeatShapeShortcut={formatShortcuts(keyMap.SWITCH_DRAW_MODE)}
                 onChangeLabel={this.onChangeLabel}
                 onSetup={this.onSetup}
             />