Optimized patch

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

@@ -33,6 +33,7 @@ interface StateToProps {
     labels: any[];
     jobInstance: any;
     keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
 }
 
 interface DispatchToProps {
@@ -59,6 +60,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         },
         shortcuts: {
             keyMap,
+            normalizedKeyMap,
         },
     } = state;
 
@@ -69,6 +71,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         activatedAttributeID,
         states,
         keyMap,
+        normalizedKeyMap,
     };
 }
 
@@ -93,6 +96,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
         updateAnnotations,
         activateObject,
         keyMap,
+        normalizedKeyMap,
     } = props;
 
     const [labelAttrMap, setLabelAttrMap] = useState(
@@ -226,7 +230,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
                     occluded={activeObjectState.occluded}
                     objectsCount={states.length}
                     currentIndex={states.indexOf(activeObjectState)}
-                    keyMap={keyMap}
+                    normalizedKeyMap={normalizedKeyMap}
                     nextObject={nextObject}
                 />
                 <ObjectBasicsEditor
@@ -254,7 +258,7 @@ function AttributeAnnotationSidebar(props: StateToProps & DispatchToProps): JSX.
                                     currentIndex={activeObjectState.label.attributes
                                         .indexOf(activeAttribute)}
                                     attributesCount={activeObjectState.label.attributes.length}
-                                    keyMap={keyMap}
+                                    normalizedKeyMap={normalizedKeyMap}
                                     nextAttribute={nextAttribute}
                                 />
                                 <AttributeEditor

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

@@ -3,19 +3,16 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import { ExtendedKeyMapOptions } from 'react-hotkeys';
 import Icon from 'antd/lib/icon';
 import Text from 'antd/lib/typography/Text';
 import Tooltip from 'antd/lib/tooltip';
 import Button from 'antd/lib/button';
 
-import { formatShortcuts } from 'utils/shortcuts';
-
 interface Props {
     currentAttribute: string;
     currentIndex: number;
     attributesCount: number;
-    keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
     nextAttribute(step: number): void;
 }
 
@@ -25,13 +22,13 @@ function AttributeSwitcher(props: Props): JSX.Element {
         currentIndex,
         attributesCount,
         nextAttribute,
-        keyMap,
+        normalizedKeyMap,
     } = props;
 
     const title = `${currentAttribute} [${currentIndex + 1}/${attributesCount}]`;
     return (
         <div className='attribute-annotation-sidebar-switcher'>
-            <Tooltip title={`Previous attribute ${formatShortcuts(keyMap.PREVIOUS_ATTRIBUTE)}`}>
+            <Tooltip title={`Previous attribute ${normalizedKeyMap.PREVIOUS_ATTRIBUTE}`}>
                 <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(-1)}>
                     <Icon type='left' />
                 </Button>
@@ -40,7 +37,7 @@ function AttributeSwitcher(props: Props): JSX.Element {
                 <Text className='cvat-text'>{currentAttribute}</Text>
                 <Text strong>{` [${currentIndex + 1}/${attributesCount}]`}</Text>
             </Tooltip>
-            <Tooltip title={`Next attribute ${formatShortcuts(keyMap.NEXT_ATTRIBUTE)}`}>
+            <Tooltip title={`Next attribute ${normalizedKeyMap.NEXT_ATTRIBUTE}`}>
                 <Button disabled={attributesCount <= 1} onClick={() => nextAttribute(1)}>
                     <Icon type='right' />
                 </Button>

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

@@ -3,21 +3,18 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import { ExtendedKeyMapOptions } from 'react-hotkeys';
 import Icon from 'antd/lib/icon';
 import Text from 'antd/lib/typography/Text';
 import Tooltip from 'antd/lib/tooltip';
 import Button from 'antd/lib/button';
 
-import { formatShortcuts } from 'utils/shortcuts';
-
 interface Props {
     currentLabel: string;
     clientID: number;
     occluded: boolean;
     objectsCount: number;
     currentIndex: number;
-    keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
     nextObject(step: number): void;
 }
 
@@ -28,14 +25,14 @@ function ObjectSwitcher(props: Props): JSX.Element {
         objectsCount,
         currentIndex,
         nextObject,
-        keyMap,
+        normalizedKeyMap,
     } = props;
 
 
     const title = `${currentLabel} ${clientID} [${currentIndex + 1}/${objectsCount}]`;
     return (
         <div className='attribute-annotation-sidebar-switcher'>
-            <Tooltip title={`Previous object ${formatShortcuts(keyMap.PREVIOUS_OBJECT)}`}>
+            <Tooltip title={`Previous object ${normalizedKeyMap.PREVIOUS_OBJECT}`}>
                 <Button disabled={objectsCount <= 1} onClick={() => nextObject(-1)}>
                     <Icon type='left' />
                 </Button>
@@ -45,7 +42,7 @@ function ObjectSwitcher(props: Props): JSX.Element {
                 <Text className='cvat-text'>{` ${clientID} `}</Text>
                 <Text strong>{`[${currentIndex + 1}/${objectsCount}]`}</Text>
             </Tooltip>
-            <Tooltip title={`Next object ${formatShortcuts(keyMap.NEXT_OBJECT)}`}>
+            <Tooltip title={`Next object ${normalizedKeyMap.NEXT_OBJECT}`}>
                 <Button disabled={objectsCount <= 1} onClick={() => nextObject(1)}>
                     <Icon type='right' />
                 </Button>

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

@@ -8,7 +8,6 @@ import Layout from 'antd/lib/layout';
 
 import { ActiveControl, Rotation } from 'reducers/interfaces';
 import { Canvas } from 'cvat-canvas';
-import { formatShortcuts } from 'utils/shortcuts';
 
 import RotateControl from './rotate-control';
 import CursorControl from './cursor-control';
@@ -28,6 +27,7 @@ interface Props {
     canvasInstance: Canvas;
     activeControl: ActiveControl;
     keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
 
     mergeObjects(enabled: boolean): void;
     groupObjects(enabled: boolean): void;
@@ -50,6 +50,7 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
         repeatDrawShape,
         pasteShape,
         resetGroup,
+        normalizedKeyMap,
         keyMap,
     } = props;
 
@@ -142,14 +143,14 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
         >
             <GlobalHotKeys keyMap={subKeyMap} handlers={handlers} allowChanges />
             <CursorControl
-                cursorShortkey={formatShortcuts(keyMap.CANCEL)}
+                cursorShortkey={normalizedKeyMap.CANCEL}
                 canvasInstance={canvasInstance}
                 activeControl={activeControl}
             />
             <MoveControl canvasInstance={canvasInstance} activeControl={activeControl} />
             <RotateControl
-                anticlockwiseShortcut={formatShortcuts(keyMap.ANTICLOCKWISE_ROTATION)}
+                anticlockwiseShortcut={normalizedKeyMap.ANTICLOCKWISE_ROTATION}
-                clockwiseShortcut={formatShortcuts(keyMap.CLOCKWISE_ROTATION)}
+                clockwiseShortcut={normalizedKeyMap.CLOCKWISE_ROTATION}
                 rotateFrame={rotateFrame}
             />
 
@@ -185,14 +186,14 @@ export default function ControlsSideBarComponent(props: Props): JSX.Element {
             <hr />
 
             <MergeControl
-                switchMergeShortcut={formatShortcuts(keyMap.SWITCH_MERGE_MODE)}
+                switchMergeShortcut={normalizedKeyMap.SWITCH_MERGE_MODE}
                 canvasInstance={canvasInstance}
                 activeControl={activeControl}
                 mergeObjects={mergeObjects}
             />
             <GroupControl
-                switchGroupShortcut={formatShortcuts(keyMap.SWITCH_GROUP_MODE)}
+                switchGroupShortcut={normalizedKeyMap.SWITCH_GROUP_MODE}
-                resetGroupShortcut={formatShortcuts(keyMap.RESET_GROUP)}
+                resetGroupShortcut={normalizedKeyMap.RESET_GROUP}
                 canvasInstance={canvasInstance}
                 activeControl={activeControl}
                 groupObjects={groupObjects}

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/object-item.tsx

@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import { ExtendedKeyMapOptions } from 'react-hotkeys';
 import { Row, Col } from 'antd/lib/grid';
 import Icon from 'antd/lib/icon';
 import Select from 'antd/lib/select';
@@ -34,7 +33,6 @@ import {
 
 import { ObjectType, ShapeType } from 'reducers/interfaces';
 import { clamp } from 'utils/math';
-import { formatShortcuts } from 'utils/shortcuts';
 
 function ItemMenu(
     serverID: number | undefined,
@@ -675,7 +673,7 @@ function ItemAttributesComponent(props: ItemAttributesComponentProps): JSX.Eleme
 const ItemAttributes = React.memo(ItemAttributesComponent, attrAreTheSame);
 
 interface Props {
-    keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
     activated: boolean;
     objectType: ObjectType;
     shapeType: ShapeType;
@@ -742,7 +740,7 @@ function objectItemsAreEqual(prevProps: Props, nextProps: Props): boolean {
         && nextProps.collapsed === prevProps.collapsed
         && nextProps.labels === prevProps.labels
         && nextProps.attributes === prevProps.attributes
-        && nextProps.keyMap === prevProps.keyMap
+        && nextProps.normalizedKeyMap === prevProps.normalizedKeyMap
         && nextProps.navigateFirstKeyframe === prevProps.navigateFirstKeyframe
         && nextProps.navigatePrevKeyframe === prevProps.navigatePrevKeyframe
         && nextProps.navigateNextKeyframe === prevProps.navigateNextKeyframe
@@ -771,7 +769,7 @@ function ObjectItemComponent(props: Props): JSX.Element {
         attributes,
         labels,
         collapsed,
-        keyMap,
+        normalizedKeyMap,
         navigateFirstKeyframe,
         navigatePrevKeyframe,
         navigateNextKeyframe,
@@ -839,12 +837,12 @@ function ObjectItemComponent(props: Props): JSX.Element {
                     objectType={objectType}
                     type={type}
                     locked={locked}
-                    copyShortcut={formatShortcuts(keyMap.COPY_SHAPE)}
+                    copyShortcut={normalizedKeyMap.COPY_SHAPE}
-                    pasteShortcut={formatShortcuts(keyMap.PASTE_SHAPE)}
+                    pasteShortcut={normalizedKeyMap.PASTE_SHAPE}
-                    propagateShortcut={formatShortcuts(keyMap.PROPAGATE_OBJECT)}
+                    propagateShortcut={normalizedKeyMap.PROPAGATE_OBJECT}
-                    toBackgroundShortcut={formatShortcuts(keyMap.TO_BACKGROUND)}
+                    toBackgroundShortcut={normalizedKeyMap.TO_BACKGROUND}
-                    toForegroundShortcut={formatShortcuts(keyMap.TO_FOREGROUND)}
+                    toForegroundShortcut={normalizedKeyMap.TO_FOREGROUND}
-                    removeShortcut={formatShortcuts(keyMap.DELETE_OBJECT)}
+                    removeShortcut={normalizedKeyMap.DELETE_OBJECT}
                     changeLabel={changeLabel}
                     copy={copy}
                     remove={remove}
@@ -862,13 +860,13 @@ function ObjectItemComponent(props: Props): JSX.Element {
                     pinned={pinned}
                     hidden={hidden}
                     keyframe={keyframe}
-                    switchOccludedShortcut={formatShortcuts(keyMap.SWITCH_OCCLUDED)}
+                    switchOccludedShortcut={normalizedKeyMap.SWITCH_OCCLUDED}
-                    switchOutsideShortcut={formatShortcuts(keyMap.SWITCH_OUTSIDE)}
+                    switchOutsideShortcut={normalizedKeyMap.SWITCH_OUTSIDE}
-                    switchLockShortcut={formatShortcuts(keyMap.SWITCH_LOCK)}
+                    switchLockShortcut={normalizedKeyMap.SWITCH_LOCK}
-                    switchHiddenShortcut={formatShortcuts(keyMap.SWITCH_HIDDEN)}
+                    switchHiddenShortcut={normalizedKeyMap.SWITCH_HIDDEN}
-                    switchKeyFrameShortcut={formatShortcuts(keyMap.SWITCH_KEYFRAME)}
+                    switchKeyFrameShortcut={normalizedKeyMap.SWITCH_KEYFRAME}
-                    nextKeyFrameShortcut={formatShortcuts(keyMap.NEXT_KEY_FRAME)}
+                    nextKeyFrameShortcut={normalizedKeyMap.NEXT_KEY_FRAME}
-                    prevKeyFrameShortcut={formatShortcuts(keyMap.PREV_KEY_FRAME)}
+                    prevKeyFrameShortcut={normalizedKeyMap.PREV_KEY_FRAME}
                     navigateFirstKeyframe={navigateFirstKeyframe}
                     navigatePrevKeyframe={navigatePrevKeyframe}
                     navigateNextKeyframe={navigateNextKeyframe}

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

@@ -23,6 +23,7 @@ interface StateToProps {
     rotateAll: boolean;
     activeControl: ActiveControl;
     keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
 }
 
 interface DispatchToProps {
@@ -50,6 +51,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         },
         shortcuts: {
             keyMap,
+            normalizedKeyMap,
         },
     } = state;
 
@@ -57,6 +59,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         rotateAll,
         canvasInstance,
         activeControl,
+        normalizedKeyMap,
         keyMap,
     };
 }

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

@@ -3,7 +3,6 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import { ExtendedKeyMapOptions } from 'react-hotkeys';
 import { connect } from 'react-redux';
 import { RadioChangeEvent } from 'antd/lib/radio';
 
@@ -11,7 +10,6 @@ import { CombinedState, 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;
@@ -28,7 +26,7 @@ interface DispatchToProps {
 }
 
 interface StateToProps {
-    keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
     canvasInstance: Canvas;
     shapeType: ShapeType;
     labels: any[];
@@ -59,7 +57,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
             },
         },
         shortcuts: {
-            keyMap,
+            normalizedKeyMap,
         },
     } = state;
 
@@ -67,7 +65,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
         ...own,
         canvasInstance,
         labels,
-        keyMap,
+        normalizedKeyMap,
     };
 }
 
@@ -164,7 +162,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
         } = this.state;
 
         const {
-            keyMap,
+            normalizedKeyMap,
             labels,
             shapeType,
         } = this.props;
@@ -177,7 +175,7 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
                 selectedLabeID={selectedLabelID}
                 numberOfPoints={numberOfPoints}
                 rectDrawingMethod={rectDrawingMethod}
-                repeatShapeShortcut={formatShortcuts(keyMap.SWITCH_DRAW_MODE)}
+                repeatShapeShortcut={normalizedKeyMap.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,7 +3,6 @@
 // SPDX-License-Identifier: MIT
 
 import React from 'react';
-import { ExtendedKeyMapOptions } from 'react-hotkeys';
 import { connect } from 'react-redux';
 
 import { CombinedState, ObjectType } from 'reducers/interfaces';
@@ -11,7 +10,6 @@ import { createAnnotationsAsync, rememberObject } from 'actions/annotation-actio
 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();
@@ -21,7 +19,7 @@ interface DispatchToProps {
 }
 
 interface StateToProps {
-    keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
     canvasInstance: Canvas;
     jobInstance: any;
     labels: any[];
@@ -56,7 +54,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
             },
         },
         shortcuts: {
-            keyMap,
+            normalizedKeyMap,
         },
     } = state;
 
@@ -65,7 +63,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         jobInstance,
         labels,
         frame,
-        keyMap,
+        normalizedKeyMap,
     };
 }
 
@@ -118,13 +116,13 @@ class DrawShapePopoverContainer extends React.PureComponent<Props, State> {
 
     public render(): JSX.Element {
         const { selectedLabelID } = this.state;
-        const { keyMap, labels } = this.props;
+        const { normalizedKeyMap, labels } = this.props;
 
         return (
             <SetupTagPopoverComponent
                 labels={labels}
                 selectedLabeID={selectedLabelID}
-                repeatShapeShortcut={formatShortcuts(keyMap.SWITCH_DRAW_MODE)}
+                repeatShapeShortcut={normalizedKeyMap.SWITCH_DRAW_MODE}
                 onChangeLabel={this.onChangeLabel}
                 onSetup={this.onSetup}
             />

cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/object-item.tsx

@@ -5,7 +5,6 @@
 import React from 'react';
 import copy from 'copy-to-clipboard';
 import { connect } from 'react-redux';
-import { ExtendedKeyMapOptions } from 'react-hotkeys';
 
 import { LogType } from 'cvat-logger';
 import { ActiveControl, CombinedState, ColorBy } from 'reducers/interfaces';
@@ -44,7 +43,7 @@ interface StateToProps {
     activeControl: ActiveControl;
     minZLayer: number;
     maxZLayer: number;
-    keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
 }
 
 interface DispatchToProps {
@@ -94,7 +93,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
             },
         },
         shortcuts: {
-            keyMap,
+            normalizedKeyMap,
         },
     } = state;
 
@@ -119,7 +118,7 @@ function mapStateToProps(state: CombinedState, own: OwnProps): StateToProps {
         activated: activatedStateID === own.clientID,
         minZLayer,
         maxZLayer,
-        keyMap,
+        normalizedKeyMap,
     };
 }
 
@@ -442,7 +441,7 @@ class ObjectItemContainer extends React.PureComponent<Props> {
             activated,
             colorBy,
             colors,
-            keyMap,
+            normalizedKeyMap,
         } = this.props;
 
         const {
@@ -484,7 +483,7 @@ class ObjectItemContainer extends React.PureComponent<Props> {
                 color={stateColor}
                 colors={colors}
                 attributes={attributes}
-                keyMap={keyMap}
+                normalizedKeyMap={normalizedKeyMap}
                 labels={labels}
                 collapsed={collapsed}
                 navigateFirstKeyframe={

cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx

@@ -6,7 +6,6 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { GlobalHotKeys, ExtendedKeyMapOptions } from 'react-hotkeys';
 
-import { formatShortcuts } from 'utils/shortcuts';
 import ObjectsListComponent from 'components/annotation-page/standard-workspace/objects-side-bar/objects-list';
 import {
     updateAnnotationsAsync,
@@ -32,6 +31,7 @@ interface StateToProps {
     maxZLayer: number;
     annotationsFiltersHistory: string[];
     keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
 }
 
 interface DispatchToProps {
@@ -69,6 +69,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         },
         shortcuts: {
             keyMap,
+            normalizedKeyMap,
         },
     } = state;
 
@@ -102,6 +103,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         maxZLayer,
         annotationsFiltersHistory,
         keyMap,
+        normalizedKeyMap,
     };
 }
 
@@ -251,6 +253,7 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
             maxZLayer,
             minZLayer,
             keyMap,
+            normalizedKeyMap,
         } = this.props;
         const {
             sortedStatesID,
@@ -410,8 +413,8 @@ class ObjectsListContainer extends React.PureComponent<Props, State> {
                     {...this.props}
                     statesOrdering={statesOrdering}
                     sortedStatesID={sortedStatesID}
-                    switchHiddenAllShortcut={formatShortcuts(keyMap.SWITCH_ALL_HIDDEN)}
+                    switchHiddenAllShortcut={normalizedKeyMap.SWITCH_ALL_HIDDEN}
-                    switchLockAllShortcut={formatShortcuts(keyMap.SWITCH_ALL_LOCK)}
+                    switchLockAllShortcut={normalizedKeyMap.SWITCH_ALL_LOCK}
                     changeStatesOrdering={this.onChangeStatesOrdering}
                     lockAllStates={this.onLockAllStates}
                     unlockAllStates={this.onUnlockAllStates}

cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx

@@ -26,7 +26,6 @@ import {
 
 import AnnotationTopBarComponent from 'components/annotation-page/top-bar/top-bar';
 import { CombinedState, FrameSpeed, Workspace } from 'reducers/interfaces';
-import { formatShortcuts } from 'utils/shortcuts';
 
 interface StateToProps {
     jobInstance: any;
@@ -45,6 +44,7 @@ interface StateToProps {
     autoSaveInterval: number;
     workspace: Workspace;
     keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
 }
 
 interface DispatchToProps {
@@ -96,6 +96,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         },
         shortcuts: {
             keyMap,
+            normalizedKeyMap,
         },
     } = state;
 
@@ -116,6 +117,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         autoSaveInterval,
         workspace,
         keyMap,
+        normalizedKeyMap,
     };
 }
 
@@ -469,6 +471,7 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
             searchAnnotations,
             changeWorkspace,
             keyMap,
+            normalizedKeyMap,
         } = this.props;
 
         const preventDefault = (event: KeyboardEvent | undefined): void => {
@@ -584,15 +587,15 @@ class AnnotationTopBarContainer extends React.PureComponent<Props> {
                     inputFrameRef={this.inputFrameRef}
                     undoAction={undoAction}
                     redoAction={redoAction}
-                    saveShortcut={formatShortcuts(keyMap.SAVE_JOB)}
+                    saveShortcut={normalizedKeyMap.SAVE_JOB}
-                    undoShortcut={formatShortcuts(keyMap.UNDO)}
+                    undoShortcut={normalizedKeyMap.UNDO}
-                    redoShortcut={formatShortcuts(keyMap.REDO)}
+                    redoShortcut={normalizedKeyMap.REDO}
-                    playPauseShortcut={formatShortcuts(keyMap.PLAY_PAUSE)}
+                    playPauseShortcut={normalizedKeyMap.PLAY_PAUSE}
-                    nextFrameShortcut={formatShortcuts(keyMap.NEXT_FRAME)}
+                    nextFrameShortcut={normalizedKeyMap.NEXT_FRAME}
-                    previousFrameShortcut={formatShortcuts(keyMap.PREV_FRAME)}
+                    previousFrameShortcut={normalizedKeyMap.PREV_FRAME}
-                    forwardShortcut={formatShortcuts(keyMap.FORWARD_FRAME)}
+                    forwardShortcut={normalizedKeyMap.FORWARD_FRAME}
-                    backwardShortcut={formatShortcuts(keyMap.BACKWARD_FRAME)}
+                    backwardShortcut={normalizedKeyMap.BACKWARD_FRAME}
-                    focusFrameInputShortcut={formatShortcuts(keyMap.FOCUS_INPUT_FRAME)}
+                    focusFrameInputShortcut={normalizedKeyMap.FOCUS_INPUT_FRAME}
                     onUndoClick={this.undo}
                     onRedoClick={this.redo}
                 />

cvat-ui/src/containers/header/header.tsx

@@ -8,7 +8,6 @@ import getCore from 'cvat-core';
 import HeaderComponent from 'components/header/header';
 import { SupportedPlugins, CombinedState } from 'reducers/interfaces';
 import { logoutAsync } from 'actions/auth-actions';
-import { formatShortcuts } from 'utils/shortcuts';
 
 const core = getCore();
 
@@ -49,7 +48,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
             packageVersion,
         },
         shortcuts: {
-            keyMap,
+            normalizedKeyMap,
         },
     } = state;
 
@@ -67,7 +66,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
         coreVersion: packageVersion.core,
         canvasVersion: packageVersion.canvas,
         uiVersion: packageVersion.ui,
-        switchSettingsShortcut: formatShortcuts(keyMap.OPEN_SETTINGS),
+        switchSettingsShortcut: normalizedKeyMap.OPEN_SETTINGS,
     };
 }
 

cvat-ui/src/reducers/interfaces.ts

@@ -445,6 +445,7 @@ export interface SettingsState {
 export interface ShortcutsState {
     visibleShortcutsHelp: boolean;
     keyMap: Record<string, ExtendedKeyMapOptions>;
+    normalizedKeyMap: Record<string, string>;
 }
 
 export interface CombinedState {

cvat-ui/src/reducers/shortcuts-reducer.ts

@@ -9,10 +9,18 @@ import { AuthActions, AuthActionTypes } from 'actions/auth-actions';
 import { ShortcutsActions, ShortcutsActionsTypes } from 'actions/shortcuts-actions';
 import { ShortcutsState } from './interfaces';
 
+function formatShortcuts(shortcuts: ExtendedKeyMapOptions): string {
+    const list: string[] = shortcuts.sequences as string[];
+    return `[${list.map((shortcut: string): string => {
+        let keys = shortcut.split('+');
+        keys = keys.map((key: string): string => `${key ? key[0].toUpperCase() : key}${key.slice(1)}`);
+        keys = keys.join('+').split(/\s/g);
+        keys = keys.map((key: string): string => `${key ? key[0].toUpperCase() : key}${key.slice(1)}`);
+        return keys.join(' ');
+    }).join(', ')}]`;
+}
 
-const defaultState: ShortcutsState = {
+const defaultKeyMap = {
-    visibleShortcutsHelp: false,
-    keyMap: {
     SWITCH_SHORTCUTS: {
         name: 'Show shortcuts',
         description: 'Open/hide the list of available shortcuts',
@@ -306,7 +314,18 @@ const defaultState: ShortcutsState = {
         sequences: ['`', '~'],
         action: 'keydown',
     },
-    } as any as Record<string, ExtendedKeyMapOptions>,
+} as any as Record<string, ExtendedKeyMapOptions>;
+
+
+const defaultState: ShortcutsState = {
+    visibleShortcutsHelp: false,
+    keyMap: defaultKeyMap,
+    normalizedKeyMap: Object.keys(defaultKeyMap)
+        .reduce((acc: Record<string, string>, key: string) => {
+            const normalized = formatShortcuts(defaultKeyMap[key]);
+            acc[key] = normalized;
+            return acc;
+        }, {}),
 };
 
 export default (

cvat-ui/src/utils/shortcuts.ts

@@ -1,17 +0,0 @@
-// Copyright (C) 2020 Intel Corporation
-//
-// SPDX-License-Identifier: MIT
-
-import { ExtendedKeyMapOptions } from 'react-hotkeys';
-
-/* eslint-disable-next-line import/prefer-default-export */
-export function formatShortcuts(shortcuts: ExtendedKeyMapOptions): string {
-    const list: string[] = shortcuts.sequences as string[];
-    return `[${list.map((shortcut: string): string => {
-        let keys = shortcut.split('+');
-        keys = keys.map((key: string): string => `${key ? key[0].toUpperCase() : key}${key.slice(1)}`);
-        keys = keys.join('+').split(/\s/g);
-        keys = keys.map((key: string): string => `${key ? key[0].toUpperCase() : key}${key.slice(1)}`);
-        return keys.join(' ');
-    }).join(', ')}]`;
-}