Instrumented more buttons (#5738)

<!-- Raise an issue to propose your change
(https://github.com/opencv/cvat/issues).
It helps to avoid duplication of efforts from multiple independent
contributors.
Discuss your ideas with maintainers to be sure that changes will be
approved and merged.
Read the [Contribution
guide](https://opencv.github.io/cvat/docs/contributing/). -->

<!-- Provide a general summary of your changes in the Title above -->

### Motivation and context
<!-- Why is this change required? What problem does it solve? If it
fixes an open
issue, please link to the issue here. Describe your changes in detail,
add
screenshots. -->

### How has this been tested?
<!-- Please describe in detail how you tested your changes.
Include details of your testing environment, and the tests you ran to
see how your change affects other areas of the code, etc. -->

### Checklist
<!-- Go over all the following points, and put an `x` in all the boxes
that apply.
If an item isn't applicable for some reason, then ~~explicitly
strikethrough~~ the whole
line. If you don't do that, GitHub will show incorrect progress for the
pull request.
If you're unsure about any of these, don't hesitate to ask. We're here
to help! -->
- [x] I submit my changes into the `develop` branch
- [ ] I have added a description of my changes into the
[CHANGELOG](https://github.com/opencv/cvat/blob/develop/CHANGELOG.md)
file
- [ ] I have updated the documentation accordingly
- [ ] I have added tests to cover my changes
- [ ] I have linked related issues (see [GitHub docs](

https://help.github.com/en/github/managing-your-work-on-github/linking-a-pull-request-to-an-issue#linking-a-pull-request-to-an-issue-using-a-keyword))
- [ ] I have increased versions of npm packages if it is necessary

([cvat-canvas](https://github.com/opencv/cvat/tree/develop/cvat-canvas#versioning),

[cvat-core](https://github.com/opencv/cvat/tree/develop/cvat-core#versioning),

[cvat-data](https://github.com/opencv/cvat/tree/develop/cvat-data#versioning)
and

[cvat-ui](https://github.com/opencv/cvat/tree/develop/cvat-ui#versioning))

### License

- [x] I submit _my code changes_ under the same [MIT License](
https://github.com/opencv/cvat/blob/develop/LICENSE) that covers the
project.
  Feel free to contact the maintainers if that's a concern.

cvat-core/src/enums.ts

@@ -83,6 +83,8 @@ export enum Source {
 }
 
 export enum LogType {
+    loadTool = 'load:cvat',
+
     loadJob = 'load:job',
     saveJob = 'save:job',
     restoreJob = 'restore:job',

cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-point-context-menu.tsx

@@ -104,12 +104,22 @@ function CanvasPointContextMenu(props: Props): React.ReactPortal | null {
         ReactDOM.createPortal(
             <div className='cvat-canvas-point-context-menu' style={{ top, left }}>
                 <CVATTooltip title='Delete point [Alt + dblclick]'>
-                    <Button type='link' icon={<DeleteOutlined />} onClick={onPointDelete}>
+                    <Button
+                        type='link'
+                        icon={<DeleteOutlined />}
+                        onClick={onPointDelete}
+                        className='cvat-canvas-point-context-menu-delete'
+                    >
                         Delete point
                     </Button>
                 </CVATTooltip>
                 {contextMenuFor && contextMenuFor.shapeType === 'polygon' && (
-                    <Button type='link' icon={<EnvironmentOutlined />} onClick={onSetStartPoint}>
+                    <Button
+                        type='link'
+                        icon={<EnvironmentOutlined />}
+                        onClick={onSetStartPoint}
+                        className='cvat-canvas-point-context-menu-set-start'
+                    >
                         Set start point
                     </Button>
                 )}

cvat-ui/src/components/annotation-page/canvas/views/canvas2d/image-setups-content.tsx

@@ -171,6 +171,7 @@ export default function ImageSetupsContent(): JSX.Element {
                     <Row className='cvat-image-setups-reset-color-settings' justify='space-around'>
                         <Col>
                             <Button
+                                className='cvat-image-setups-reset-color-settings-button'
                                 onClick={() => {
                                     const defaultValue = 100;
                                     dispatch(changeBrightnessLevel(defaultValue));

cvat-ui/src/components/annotation-page/canvas/views/canvas3d/canvas-wrapper3D.tsx

@@ -11,6 +11,7 @@ import { connect, useSelector } from 'react-redux';
 import {
     ArrowDownOutlined, ArrowLeftOutlined, ArrowRightOutlined, ArrowUpOutlined,
 } from '@ant-design/icons';
+import Button from 'antd/lib/button';
 import Spin from 'antd/lib/spin';
 
 import {
@@ -197,104 +198,106 @@ export const PerspectiveViewComponent = React.memo(
         };
 
         const ArrowGroup = (): ReactElement => (
-            <span className='cvat-canvas3d-perspective-arrow-directions'>
-                <CVATTooltip title='Shift+Arrow Up' placement='topRight'>
-                    <button
-                        data-cy='arrow-up'
-                        onClick={() => screenKeyControl(CameraAction.TILT_UP, false, true)}
-                        type='button'
-                        className='cvat-canvas3d-perspective-arrow-directions-icons-up'
-                    >
-                        <ArrowUpOutlined className='cvat-canvas3d-perspective-arrow-directions-icons-color' />
-                    </button>
-                </CVATTooltip>
-                <br />
-                <CVATTooltip title='Shift+Arrow Left' placement='topRight'>
-                    <button
-                        onClick={() => screenKeyControl(CameraAction.ROTATE_LEFT, false, true)}
-                        type='button'
-                        className='cvat-canvas3d-perspective-arrow-directions-icons-bottom'
-                    >
-                        <ArrowLeftOutlined className='cvat-canvas3d-perspective-arrow-directions-icons-color' />
-                    </button>
-                </CVATTooltip>
-                <CVATTooltip title='Shift+Arrow Bottom' placement='topRight'>
-                    <button
-                        onClick={() => screenKeyControl(CameraAction.TILT_DOWN, false, true)}
-                        type='button'
-                        className='cvat-canvas3d-perspective-arrow-directions-icons-bottom'
-                    >
-                        <ArrowDownOutlined className='cvat-canvas3d-perspective-arrow-directions-icons-color' />
-                    </button>
-                </CVATTooltip>
-                <CVATTooltip title='Shift+Arrow Right' placement='topRight'>
-                    <button
-                        onClick={() => screenKeyControl(CameraAction.ROTATE_RIGHT, false, true)}
-                        type='button'
-                        className='cvat-canvas3d-perspective-arrow-directions-icons-bottom'
-                    >
-                        <ArrowRightOutlined className='cvat-canvas3d-perspective-arrow-directions-icons-color' />
-                    </button>
-                </CVATTooltip>
-            </span>
+            <div className='cvat-canvas3d-perspective-arrow-directions'>
+                <div>
+                    <CVATTooltip title='Shift+Arrow Up' placement='topRight'>
+                        <Button
+                            size='small'
+                            onClick={() => screenKeyControl(CameraAction.TILT_UP, false, true)}
+                            className='cvat-canvas3d-perspective-arrow-directions-icons-up'
+                        >
+                            <ArrowUpOutlined className='cvat-canvas3d-perspective-arrow-directions-icons-color' />
+                        </Button>
+                    </CVATTooltip>
+                </div>
+                <div>
+                    <CVATTooltip title='Shift+Arrow Left' placement='topRight'>
+                        <Button
+                            size='small'
+                            onClick={() => screenKeyControl(CameraAction.ROTATE_LEFT, false, true)}
+                            className='cvat-canvas3d-perspective-arrow-directions-icons-left'
+                        >
+                            <ArrowLeftOutlined className='cvat-canvas3d-perspective-arrow-directions-icons-color' />
+                        </Button>
+                    </CVATTooltip>
+                    <CVATTooltip title='Shift+Arrow Bottom' placement='topRight'>
+                        <Button
+                            size='small'
+                            onClick={() => screenKeyControl(CameraAction.TILT_DOWN, false, true)}
+                            className='cvat-canvas3d-perspective-arrow-directions-icons-bottom'
+                        >
+                            <ArrowDownOutlined className='cvat-canvas3d-perspective-arrow-directions-icons-color' />
+                        </Button>
+                    </CVATTooltip>
+                    <CVATTooltip title='Shift+Arrow Right' placement='topRight'>
+                        <Button
+                            size='small'
+                            onClick={() => screenKeyControl(CameraAction.ROTATE_RIGHT, false, true)}
+                            className='cvat-canvas3d-perspective-arrow-directions-icons-right'
+                        >
+                            <ArrowRightOutlined className='cvat-canvas3d-perspective-arrow-directions-icons-color' />
+                        </Button>
+                    </CVATTooltip>
+                </div>
+            </div>
         );
 
         const ControlGroup = (): ReactElement => (
             <span className='cvat-canvas3d-perspective-directions'>
                 <CVATTooltip title='Alt+U' placement='topLeft'>
-                    <button
+                    <Button
+                        size='small'
                         onClick={() => screenKeyControl(CameraAction.MOVE_UP, true, false)}
-                        type='button'
-                        className='cvat-canvas3d-perspective-directions-icon'
+                        className='cvat-canvas3d-perspective-directions-icon cvat-canvas3d-perspective-shift-down'
                     >
                         U
-                    </button>
+                    </Button>
                 </CVATTooltip>
                 <CVATTooltip title='Alt+I' placement='topLeft'>
-                    <button
+                    <Button
+                        size='small'
                         onClick={() => screenKeyControl(CameraAction.ZOOM_IN, true, false)}
-                        type='button'
-                        className='cvat-canvas3d-perspective-directions-icon'
+                        className='cvat-canvas3d-perspective-directions-icon cvat-canvas3d-perspective-zoom-in'
                     >
                         I
-                    </button>
+                    </Button>
                 </CVATTooltip>
                 <CVATTooltip title='Alt+O' placement='topLeft'>
-                    <button
+                    <Button
+                        size='small'
                         onClick={() => screenKeyControl(CameraAction.MOVE_DOWN, true, false)}
-                        type='button'
-                        className='cvat-canvas3d-perspective-directions-icon'
+                        className='cvat-canvas3d-perspective-directions-icon cvat-canvas3d-perspective-shift-up'
                     >
                         O
-                    </button>
+                    </Button>
                 </CVATTooltip>
                 <br />
                 <CVATTooltip title='Alt+J' placement='topLeft'>
-                    <button
+                    <Button
+                        size='small'
                         onClick={() => screenKeyControl(CameraAction.MOVE_LEFT, true, false)}
-                        type='button'
-                        className='cvat-canvas3d-perspective-directions-icon'
+                        className='cvat-canvas3d-perspective-directions-icon cvat-canvas3d-perspective-shift-left'
                     >
                         J
-                    </button>
+                    </Button>
                 </CVATTooltip>
                 <CVATTooltip title='Alt+K' placement='topLeft'>
-                    <button
+                    <Button
+                        size='small'
                         onClick={() => screenKeyControl(CameraAction.ZOOM_OUT, true, false)}
-                        type='button'
-                        className='cvat-canvas3d-perspective-directions-icon'
+                        className='cvat-canvas3d-perspective-directions-icon cvat-canvas3d-perspective-zoom-out'
                     >
                         K
-                    </button>
+                    </Button>
                 </CVATTooltip>
                 <CVATTooltip title='Alt+L' placement='topLeft'>
-                    <button
+                    <Button
+                        size='small'
                         onClick={() => screenKeyControl(CameraAction.MOVE_RIGHT, true, false)}
-                        type='button'
-                        className='cvat-canvas3d-perspective-directions-icon'
+                        className='cvat-canvas3d-perspective-directions-icon cvat-canvas3d-perspective-shift-right'
                     >
                         L
-                    </button>
+                    </Button>
                 </CVATTooltip>
             </span>
         );

cvat-ui/src/components/annotation-page/canvas/views/canvas3d/styles.scss

@@ -25,14 +25,15 @@
     padding: $grid-unit-size;
     bottom: 0;
     right: 0;
-}
 
-.cvat-canvas3d-perspective-arrow-directions-icons-up {
-    margin-left: $grid-unit-size * 5.25;
+    > div {
+        text-align: center;
+    }
 }
 
-.cvat-canvas3d-perspective-arrow-directions-icons-bottom {
-    margin: $grid-unit-size * 0.5;
+.cvat-canvas3d-perspective-arrow-directions-icons-right,
+.cvat-canvas3d-perspective-arrow-directions-icons-left {
+    margin: $grid-unit-size;
 }
 
 .cvat-canvas3d-perspective-arrow-directions-icons-color {

cvat-ui/src/components/annotation-page/review/create-issue-dialog.tsx

@@ -42,12 +42,12 @@ function MessageForm(props: FormProps): JSX.Element {
             </Form.Item>
             <Row justify='space-between'>
                 <Col>
-                    <Button onClick={cancel} type='ghost'>
+                    <Button onClick={cancel} type='ghost' className='cvat-create-issue-dialog-cancel-button'>
                         Cancel
                     </Button>
                 </Col>
                 <Col>
-                    <Button type='primary' htmlType='submit'>
+                    <Button type='primary' htmlType='submit' className='cvat-create-issue-dialog-submit-button'>
                         Submit
                     </Button>
                 </Col>

cvat-ui/src/components/annotation-page/review/issue-dialog.tsx

@@ -106,11 +106,11 @@ export default function IssueDialog(props: Props): JSX.Element {
     );
 
     const resolveButton = resolved ? (
-        <Button loading={isFetching} type='primary' onClick={reopen}>
+        <Button loading={isFetching} className='cvat-issue-dialog-reopen-button' type='primary' onClick={reopen}>
             Reopen
         </Button>
     ) : (
-        <Button loading={isFetching} type='primary' onClick={resolve}>
+        <Button loading={isFetching} className='cvat-issue-dialog-resolve-button' type='primary' onClick={resolve}>
             Resolve
         </Button>
     );
@@ -151,13 +151,14 @@ export default function IssueDialog(props: Props): JSX.Element {
             </Row>
             <Row className='cvat-issue-dialog-footer' justify='space-between'>
                 <Col>
-                    <Button type='link' danger onClick={onDeleteIssue}>
+                    <Button type='link' className='cvat-issue-dialog-remove-button' danger onClick={onDeleteIssue}>
                         Remove
                     </Button>
                 </Col>
                 <Col>
                     {currentText.length ? (
                         <Button
+                            className='cvat-issue-dialog-comment-button'
                             loading={isFetching}
                             type='primary'
                             disabled={!currentText.length}

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

@@ -152,13 +152,18 @@ function DrawShapePopoverComponent(props: Props): JSX.Element {
             <Row justify='space-around'>
                 <Col span={12}>
                     <CVATTooltip title={`Press ${repeatShapeShortcut} to draw again`}>
-                        <Button onClick={onDrawShape}>Shape</Button>
+                        <Button className={`cvat-draw-${shapeType}-shape-button`} onClick={onDrawShape}>Shape</Button>
                     </CVATTooltip>
                 </Col>
                 {shapeType !== ShapeType.MASK && (
                     <Col span={12}>
                         <CVATTooltip title={`Press ${repeatShapeShortcut} to draw again`}>
-                            <Button onClick={onDrawTrack}>Track</Button>
+                            <Button
+                                className={`cvat-draw-${shapeType}-track-button`}
+                                onClick={onDrawTrack}
+                            >
+                                Track
+                            </Button>
                         </CVATTooltip>
                     </Col>
                 )}

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

@@ -638,6 +638,7 @@ class OpenCVControlComponent extends React.PureComponent<Props & DispatchToProps
                     <Col>
                         <CVATTooltip title='Intelligent scissors' className='cvat-opencv-drawing-tool'>
                             <Button
+                                className='cvat-opencv-scissors-tool-button'
                                 onClick={() => {
                                     this.setState({ mode: 'interaction' });
                                     this.activeTool = openCVWrapper.segmentation
@@ -665,7 +666,10 @@ class OpenCVControlComponent extends React.PureComponent<Props & DispatchToProps
                 <Col>
                     <CVATTooltip title='Histogram equalization' className='cvat-opencv-image-tool'>
                         <Button
-                            className={this.imageModifier('histogram') ? 'cvat-opencv-image-tool-active' : ''}
+                            className={
+                                this.imageModifier('histogram') ?
+                                    'cvat-opencv-histogram-tool-button cvat-opencv-image-tool-active' : 'cvat-opencv-histogram-tool-button'
+                            }
                             onClick={(e: React.MouseEvent<HTMLElement>) => {
                                 const modifier = this.imageModifier('histogram');
                                 if (!modifier) {

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/color-picker.tsx

@@ -70,6 +70,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
                         <Col span={9}>
                             {resetVisible !== false && (
                                 <Button
+                                    className='cvat-color-picker-reset-button'
                                     onClick={() => {
                                         if (typeof onChange === 'function') onChange('');
                                         changeVisible(false);
@@ -81,6 +82,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
                         </Col>
                         <Col span={9}>
                             <Button
+                                className='cvat-color-picker-cancel-button'
                                 onClick={() => {
                                     changeVisible(false);
                                 }}
@@ -90,6 +92,7 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
                         </Col>
                         <Col span={6}>
                             <Button
+                                className='cvat-color-picker-submit-button'
                                 type='primary'
                                 onClick={() => {
                                     if (typeof onChange === 'function') onChange(colorState || '');
@@ -108,8 +111,9 @@ function ColorPicker(props: Props, ref: React.Ref<any>): JSX.Element {
                         <Text strong>Select color</Text>
                     </Col>
                     <Col span={4}>
-                        <CVATTooltip title='Cancel'>
+                        <CVATTooltip title='Close'>
                             <Button
+                                className='cvat-color-picker-close-button'
                                 type='link'
                                 onClick={() => {
                                     changeVisible(false);

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/label-key-selector-popover.tsx

@@ -43,7 +43,10 @@ function PopoverContent(props: LabelKeySelectorPopoverContentProps): JSX.Element
                         return (
                             <Col key={i} span={8}>
                                 <CVATTooltip title={labelName}>
-                                    <Button onClick={() => updateLabelShortcutKey(i, labelID)}>
+                                    <Button
+                                        className='cvat-label-item-shortcut-button'
+                                        onClick={() => updateLabelShortcutKey(i, labelID)}
+                                    >
                                         <Text>{`${i}:`}</Text>
                                         <Text type='secondary'>{labelName}</Text>
                                     </Button>