React UI: Added titles

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MIT
 
 import React, { useState, useEffect } from 'react';
-import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
+import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
 import { connect } from 'react-redux';
 import { Action } from 'redux';
 import { ThunkDispatch } from 'redux-thunk';
@@ -32,6 +32,8 @@ interface StateToProps {
     states: any[];
     labels: any[];
     jobInstance: any;
+    keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
 }
 
 interface DispatchToProps {
@@ -56,6 +58,10 @@ function mapStateToProps(state: CombinedState): StateToProps {
                 labels,
             },
         },
+        shortcuts: {
+            keyMap,
+            normalizedKeyMap,
+        },
     } = state;
 
     return {
@@ -64,6 +70,8 @@ function mapStateToProps(state: CombinedState): StateToProps {
         activatedStateID,
         activatedAttributeID,
         states,
+        keyMap,
+        normalizedKeyMap,
     };
 }
 
@@ -87,6 +95,8 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
         jobInstance,
         updateAnnotations,
         activateObject,
+        keyMap,
+        normalizedKeyMap,
     } = props;
 
     const [labelAttrMap, setLabelAttrMap] = useState(
@@ -167,31 +177,11 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
         trigger: null,
     };
 
-    const keyMap = {
-        NEXT_ATTRIBUTE: {
-            name: 'Next attribute',
-            description: 'Go to the next attribute',
-            sequence: 'ArrowDown',
-            action: 'keydown',
-        },
-        PREVIOUS_ATTRIBUTE: {
-            name: 'Previous attribute',
-            description: 'Go to the previous attribute',
-            sequence: 'ArrowUp',
-            action: 'keydown',
-        },
-        NEXT_OBJECT: {
-            name: 'Next object',
-            description: 'Go to the next object',
-            sequence: 'Tab',
-            action: 'keydown',
-        },
-        PREVIOUS_OBJECT: {
-            name: 'Previous object',
-            description: 'Go to the previous object',
-            sequence: 'Shift+Tab',
-            action: 'keydown',
-        },
+    const subKeyMap = {
+        NEXT_ATTRIBUTE: keyMap.NEXT_ATTRIBUTE,
+        PREVIOUS_ATTRIBUTE: keyMap.PREVIOUS_ATTRIBUTE,
+        NEXT_OBJECT: keyMap.NEXT_OBJECT,
+        PREVIOUS_OBJECT: keyMap.PREVIOUS_OBJECT,
     };
 
     const handlers = {
@@ -228,7 +218,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
     if (activeObjectState) {
         return (
             <Layout.Sider {...siderProps}>
-                <GlobalHotKeys keyMap={keyMap as any as KeyMap} handlers={handlers} allowChanges />
+                <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
                 <Row>
                     <Col>
                         <AnnotationsFiltersInput />
@@ -240,6 +230,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
                     occluded={activeObjectState.occluded}
                     objectsCount={states.length}
                     currentIndex={states.indexOf(activeObjectState)}
+                    normalizedKeyMap={normalizedKeyMap}
                     nextObject={nextObject}
                 />
                 <ObjectBasicsEditor
@@ -267,6 +258,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
                                     currentIndex={activeObjectState.label.attributes
                                         .indexOf(activeAttribute)}
                                     attributesCount={activeObjectState.label.attributes.length}
+                                    normalizedKeyMap={normalizedKeyMap}
                                     nextAttribute={nextAttribute}
                                 />
                                 <AttributeEditor

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-switcher.tsx

@@ -12,6 +12,7 @@ interface Props {
     currentAttribute: string;
     currentIndex: number;
     attributesCount: number;
+    normalizedKeyMap: Record<string, string>;
     nextAttribute(step: number): void;
 }
 
@@ -21,21 +22,26 @@ function AttributeSwitcher(props: Props): JSX.Element {
         currentIndex,
         attributesCount,
         nextAttribute,
+        normalizedKeyMap,
     } = props;
 
     const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
     return (
         <div className='attribute-annotation-sidebar-switcher'>
-            <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
-                <Icon type='left' />
-            </Button>
+            <Tooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`}>
+                <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
+                    <Icon type='left' />
+                </Button>
+            </Tooltip>
             <Tooltip title={title}>
                 <Text className='cvat-text'>{currentAttribute}</Text>
                 <Text strong>{` [${currentIndex + 1}/${attributesCount}]`}</Text>
             </Tooltip>
-            <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
-                <Icon type='right' />
-            </Button>
+            <Tooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`}>
+                <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
+                    <Icon type='right' />
+                </Button>
+            </Tooltip>
         </div>
     );
 }

cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/object-switcher.tsx

@@ -14,6 +14,7 @@ interface Props {
     occluded: boolean;
     objectsCount: number;
     currentIndex: number;
+    normalizedKeyMap: Record<string, string>;
     nextObject(step: number): void;
 }
 
@@ -24,23 +25,28 @@ function ObjectSwitcher(props: Props): JSX.Element {
         objectsCount,
         currentIndex,
         nextObject,
+        normalizedKeyMap,
     } = props;
 
 
     const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
     return (
         <div className='attribute-annotation-sidebar-switcher'>
-            <Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
-                <Icon type='left' />
-            </Button>
+            <Tooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`}>
+                <Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
+                    <Icon type='left' />
+                </Button>
+            </Tooltip>
             <Tooltip title={title}>
                 <Text className='cvat-text'>{currentLabel}</Text>
                 <Text className='cvat-text'>{` ${clientID} `}</Text>
                 <Text strong>{`[${currentIndex + 1}/${objectsCount}]`}</Text>
             </Tooltip>
-            <Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
-                <Icon type='right' />
-            </Button>
+            <Tooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`}>
+                <Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
+                    <Icon type='right' />
+                </Button>
+            </Tooltip>
         </div>
     );
 }

cvat-ui/src/components/annotation-page/standard-workspace/canvas-wrapper.tsx

@@ -3,7 +3,7 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
+import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
 
 import Tooltip from 'antd/lib/tooltip';
 import Icon from 'antd/lib/icon';
@@ -59,6 +59,7 @@ interface Props {
     contextType: ContextMenuType;
     aamZoomMargin: number;
     workspace: Workspace;
+    keyMap: Record<string, ExtendedKeyMapOptions>;
     onSetupCanvas: () => void;
     onDragCanvas: (enabled: boolean) => void;
     onZoomCanvas: (enabled: boolean) => void;
@@ -683,6 +684,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             onChangeGridColor,
             onChangeGridOpacity,
             onSwitchGrid,
+            keyMap,
         } = this.props;
 
         const preventDefault = (event: KeyboardEvent | undefined): void => {
@@ -691,61 +693,16 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
             }
         };
 
-        const keyMap = {
-            INCREASE_BRIGHTNESS: {
-                name: 'Brightness+',
-                description: 'Increase brightness level for the image',
-                sequence: 'shift+b+=',
-                action: 'keypress',
-            },
-            DECREASE_BRIGHTNESS: {
-                name: 'Brightness-',
-                description: 'Decrease brightness level for the image',
-                sequence: 'shift+b+-',
-                action: 'keydown',
-            },
-            INCREASE_CONTRAST: {
-                name: 'Contrast+',
-                description: 'Increase contrast level for the image',
-                sequence: 'shift+c+=',
-                action: 'keydown',
-            },
-            DECREASE_CONTRAST: {
-                name: 'Contrast-',
-                description: 'Decrease contrast level for the image',
-                sequence: 'shift+c+-',
-                action: 'keydown',
-            },
-            INCREASE_SATURATION: {
-                name: 'Saturation+',
-                description: 'Increase saturation level for the image',
-                sequence: 'shift+s+=',
-                action: 'keydown',
-            },
-            DECREASE_SATURATION: {
-                name: 'Saturation-',
-                description: 'Increase contrast level for the image',
-                sequence: 'shift+s+-',
-                action: 'keydown',
-            },
-            INCREASE_GRID_OPACITY: {
-                name: 'Grid opacity+',
-                description: 'Make the grid more visible',
-                sequence: 'shift+g+=',
-                action: 'keydown',
-            },
-            DECREASE_GRID_OPACITY: {
-                name: 'Grid opacity-',
-                description: 'Make the grid less visible',
-                sequences: 'shift+g+-',
-                action: 'keydown',
-            },
-            CHANGE_GRID_COLOR: {
-                name: 'Grid color',
-                description: 'Set another color for the image grid',
-                sequence: 'shift+g+enter',
-                action: 'keydown',
-            },
+        const subKeyMap = {
+            INCREASE_BRIGHTNESS: keyMap.INCREASE_BRIGHTNESS,
+            DECREASE_BRIGHTNESS: keyMap.DECREASE_BRIGHTNESS,
+            INCREASE_CONTRAST: keyMap.INCREASE_CONTRAST,
+            DECREASE_CONTRAST: keyMap.DECREASE_CONTRAST,
+            INCREASE_SATURATION: keyMap.INCREASE_SATURATION,
+            DECREASE_SATURATION: keyMap.DECREASE_SATURATION,
+            INCREASE_GRID_OPACITY: keyMap.INCREASE_GRID_OPACITY,
+            DECREASE_GRID_OPACITY: keyMap.DECREASE_GRID_OPACITY,
+            CHANGE_GRID_COLOR: keyMap.CHANGE_GRID_COLOR,
         };
 
         const step = 10;
@@ -826,7 +783,7 @@ export default class CanvasWrapperComponent extends React.PureComponent<Props> {
 
         return (
             <Layout.Content style={{ position: 'relative' }}>
-                <GlobalHotKeys keyMap={keyMap as any as KeyMap} handlers={handlers} allowChanges />
+                <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
                 {/*
                     This element doesn't have any props
                     So, React isn't going to rerender it