Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[GSoC'24] Registeration of Shortcuts via modules and dummy conflict detector #8007

Merged
merged 28 commits into from
Aug 8, 2024

Conversation

tahamukhtar20
Copy link
Contributor

@tahamukhtar20 tahamukhtar20 commented Jun 9, 2024

Part of: #747

Motivation and context

This PR is part of the GSOC project: Keyboard Shortcut Customization

How has this been tested?

It has been tested by checking if the existing shortcuts work the same way as before.

Checklist

  • I submit my changes into the develop branch
  • I have created a changelog fragment
    - [ ] I have updated the documentation accordingly
    - [ ] I have added tests to cover my changes
  • I have linked related issues (see GitHub docs)
    - [ ] I have increased versions of npm packages if it is necessary
    (cvat-canvas,
    cvat-core,
    cvat-data and
    cvat-ui)

License

  • I submit my code changes under the same MIT License that covers the project.
    Feel free to contact the maintainers if that's a concern.

Copy link
Contributor

coderabbitai bot commented Jun 9, 2024

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Walkthrough

The recent updates to the CVAT UI introduce a comprehensive system for managing keyboard shortcuts across various components. The changes include the addition of a new action type REGISTER_SHORTCUT, the use of the useRegisterShortcuts hook to register shortcuts, and the replacement of the action property with view in the KeyMapItem interface. These updates enhance the user experience by providing consistent and customizable keyboard shortcuts for different actions and views.

Changes

Files/Groups of Files Change Summary
cvat-ui/src/actions/shortcuts-actions.ts Added REGISTER_SHORTCUT action and registerShortcuts function.
cvat-ui/src/components/annotation-page/... (multiple files) Introduced and registered various keyboard shortcuts using useRegisterShortcuts hook.
cvat-ui/src/cvat-store.ts Modified createCVATStore function to accept rootReducerCreator and adjusted store creation logic.
cvat-ui/src/reducers/shortcuts-reducer.ts Updated default key mappings, added conflict detection for shortcuts, and handled shortcut registration.
cvat-ui/src/utils/enums.tsx Added ViewType enum with a single value ALL.
cvat-ui/src/utils/hooks.ts Added useRegisterShortcuts function for registering shortcuts.
cvat-ui/src/utils/mousetrap-react.tsx Replaced action with view in KeyMapItem interface and adjusted key binding logic in GlobalHotKeys.

Sequence Diagram(s)

sequenceDiagram
    participant Component
    participant Hook as useRegisterShortcuts
    participant Store as CVAT Store
    participant Actions as Shortcuts Actions
    participant Reducer as Shortcuts Reducer

    Component->>Hook: Define componentShortcuts
    Hook->>Store: Get CVAT Store
    Hook->>Actions: Dispatch registerShortcuts
    Actions->>Reducer: Handle REGISTER_SHORTCUT
    Reducer->>Store: Update key mappings
    Store-->>Component: Shortcuts registered
Loading

Poem

In the land of code where shortcuts play,
A rabbit hopped to save the day.
With keys and hooks, and views so bright,
Actions mapped from day to night.
Registering shortcuts, conflicts no more,
Enhancing CVAT, users adore.
Hoppy coding, swift and neat,
A world of shortcuts, oh what a feat!


Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

Share
Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai generate interesting stats about this repository and render them as a table.
    • @coderabbitai show all the console.log statements in this repository.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (invoked as PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Additionally, you can add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

@tahamukhtar20 tahamukhtar20 changed the title [GSoC'24] Keyboard Shortcut Customization Week 1 [GSoC'24] Keyboard Shortcut Customization Jun 9, 2024
@tahamukhtar20 tahamukhtar20 changed the title [GSoC'24] Keyboard Shortcut Customization [GSoC'24] Registeration of Shortcuts via modules and dummy conflict detector Jun 11, 2024
@tahamukhtar20 tahamukhtar20 marked this pull request as ready for review June 11, 2024 08:08
@tahamukhtar20 tahamukhtar20 requested a review from bsekachev as a code owner June 11, 2024 08:08
Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 13

Review details

Configuration used: CodeRabbit UI
Review profile: CHILL

Commits

Files that changed from the base of the PR and between 729322f and ade6675.

Files selected for processing (30)
  • cvat-ui/src/actions/shortcuts-actions.ts (1 hunks)
  • cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-annotation-sidebar.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-wrapper.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/canvas/views/canvas3d/canvas-wrapper3D.tsx (1 hunks)
  • cvat-ui/src/components/annotation-page/review-workspace/controls-side-bar/issue-control.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/single-shape-workspace/single-shape-sidebar/single-shape-sidebar.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/controls-side-bar.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/cursor-control.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/group-control.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/join-control.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/merge-control.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/slice-control.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/split-control.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/labels-list.tsx (1 hunks)
  • cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/controls-side-bar.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/top-bar/left-group.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx (2 hunks)
  • cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx (2 hunks)
  • cvat-ui/src/components/customizable-components/index.tsx (1 hunks)
  • cvat-ui/src/components/header/header.tsx (2 hunks)
  • cvat-ui/src/components/labels-editor/skeleton-configurator.tsx (2 hunks)
  • cvat-ui/src/components/layout-grid/layout-grid.tsx (1 hunks)
  • cvat-ui/src/containers/annotation-page/standard-workspace/objects-side-bar/objects-list.tsx (2 hunks)
  • cvat-ui/src/containers/annotation-page/top-bar/top-bar.tsx (2 hunks)
  • cvat-ui/src/cvat-store.ts (2 hunks)
  • cvat-ui/src/reducers/shortcuts-reducer.ts (2 hunks)
  • cvat-ui/src/utils/enums.tsx (1 hunks)
  • cvat-ui/src/utils/hooks.ts (2 hunks)
  • cvat-ui/src/utils/mousetrap-react.tsx (2 hunks)
Files skipped from review due to trivial changes (1)
  • cvat-ui/src/utils/enums.tsx
Additional comments not posted (49)
cvat-ui/src/actions/shortcuts-actions.ts (2)

11-11: The addition of REGISTER_SHORTCUT to ShortcutsActionsTypes aligns well with the PR's objectives to enhance shortcut management.


18-20: The implementation of registerShortcuts action creator is correct and follows the established patterns in the codebase.

cvat-ui/src/cvat-store.ts (1)

24-45: The modification to accept a rootReducerCreator function in createCVATStore enhances flexibility in configuring the rootReducer, which is beneficial for scenarios like dynamic module loading.

cvat-ui/src/components/customizable-components/index.tsx (1)

25-25: The registration of the SAVE_JOB shortcut within the component is implemented correctly, ensuring that the shortcut is active only when the component is rendered.

cvat-ui/src/utils/mousetrap-react.tsx (1)

14-14: The addition of the view property to the KeyMapItem interface enhances the clarity and functionality of shortcut definitions by specifying the context in which they are applicable.

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

16-16: The use of useRegisterShortcuts and ViewType is correctly implemented and aligns with the PR's objectives to enhance shortcut management.

Also applies to: 39-39


30-37: The definition of componentShortcuts for the cursor control is clear and well-documented, enhancing the usability and accessibility of the component.

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/join-control.tsx (2)

14-14: The use of useRegisterShortcuts and ViewType is correctly implemented and aligns with the PR's objectives to enhance shortcut management.

Also applies to: 38-38


29-36: The definition of componentShortcuts for the join control is clear and well-documented, enhancing the usability and accessibility of the component.

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

16-16: The use of useRegisterShortcuts and ViewType is correctly implemented and aligns with the PR's objectives to enhance shortcut management.

Also applies to: 40-40


31-37: The definition of componentShortcuts for the split control is clear and well-documented, enhancing the usability and accessibility of the component.

cvat-ui/src/components/annotation-page/review-workspace/controls-side-bar/issue-control.tsx (2)

14-15: The imports for ViewType and useRegisterShortcuts are correctly placed and used.


30-39: The shortcut registration for 'Open an issue' is implemented correctly. Ensure that the shortcut 'n' does not conflict with other global shortcuts.

Verification successful

To verify if the shortcut 'n' conflicts with other global shortcuts, we need to search for the sequence 'n' in all TypeScript and JavaScript files. Let's adjust the script to search for the pattern in these file types.


To verify if the shortcut 'n' conflicts with other global shortcuts, we need to correct the syntax error in the script and re-run it.


To verify if the shortcut 'n' conflicts with other global shortcuts, we need to correct the syntax error in the script by ensuring all quotes are properly matched and re-run it.


To verify if the shortcut 'n' conflicts with other global shortcuts, we need to correct the syntax error by using double quotes for the entire pattern and re-run the script.


The search results indicate that the shortcut 'n' is only used in the issue-control.tsx file and does not conflict with other global shortcuts.

  • cvat-ui/src/components/annotation-page/review-workspace/controls-side-bar/issue-control.tsx: sequences: ['n']
Scripts executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify if the shortcut 'n' conflicts with other global shortcuts.

# Test: Search for the shortcut 'n' in other components. Expect: No other global usage of 'n'.
rg --type tsx $'sequences: \['n'\]'

Length of output: 62



Script:

#!/bin/bash
# Description: Verify if the shortcut 'n' conflicts with other global shortcuts.

# Test: Search for the shortcut 'n' in other components. Expect: No other global usage of 'n'.
rg --type-add 'ts:*.{ts,tsx}' --type-add 'js:*.{js,jsx}' 'sequences: \[\'n\'\]'

Length of output: 93



Script:

#!/bin/bash
# Description: Verify if the shortcut 'n' conflicts with other global shortcuts.

# Test: Search for the shortcut 'n' in other components. Expect: No other global usage of 'n'.
rg --type-add 'ts:*.{ts,tsx}' --type-add 'js:*.{js,jsx}' 'sequences: \[\'n\'\]'

Length of output: 93



Script:

#!/bin/bash
# Description: Verify if the shortcut 'n' conflicts with other global shortcuts.

# Test: Search for the shortcut 'n' in other components. Expect: No other global usage of 'n'.
rg --type-add 'ts:*.{ts,tsx}' --type-add 'js:*.{js,jsx}' 'sequences: \[\'n\'\]'

Length of output: 93



Script:

#!/bin/bash
# Description: Verify if the shortcut 'n' conflicts with other global shortcuts.

# Test: Search for the shortcut 'n' in other components. Expect: No other global usage of 'n'.
rg --type-add "ts:*.{ts,tsx}" --type-add "js:*.{js,jsx}" "sequences: \['n'\]"

Length of output: 203

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

15-16: Imports for useRegisterShortcuts and ViewType are correctly implemented.


31-40: Shortcut registration for 'Merge mode' is correctly implemented. Verify that the shortcut 'm' does not conflict with other shortcuts.

Verification successful

Shortcut 'm' for 'Merge mode' does not conflict with other shortcuts.

Scripts executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify if the shortcut 'm' conflicts with other shortcuts.

# Test: Search for the shortcut 'm' in other components. Expect: No other usage of 'm'.
rg --type tsx $'sequences: \['m'\]'

Length of output: 62



Script:

#!/bin/bash
# Description: Verify if the shortcut 'm' conflicts with other shortcuts.

# Test: Search for the shortcut 'm' in all TypeScript and JavaScript files. Expect: No other usage of 'm'.
rg --glob '*.ts' --glob '*.tsx' --glob '*.js' --glob '*.jsx' $'sequences: \[\'m\'\]'

Length of output: 209

cvat-ui/src/components/annotation-page/standard-workspace/controls-side-bar/slice-control.tsx (1)

15-16: Correct implementation of imports for useRegisterShortcuts and ViewType.

cvat-ui/src/reducers/shortcuts-reducer.ts (1)

60-78: The handling of the REGISTER_SHORTCUT action is correctly implemented. Ensure that the error handling for shortcut conflicts is robust and user-friendly.

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

15-16: Ensure that the new imports are used appropriately in the file.


36-49: The shortcut registration for 'Group mode' and 'Reset group' is well-defined and aligns with the new system architecture.


51-51: The useRegisterShortcuts hook is correctly placed outside of the component to avoid unnecessary re-registrations on re-renders.

cvat-ui/src/utils/hooks.ts (1)

137-141: The implementation of useRegisterShortcuts correctly utilizes the Redux store to dispatch actions, which is a clean and effective way to handle global state changes related to shortcuts.

cvat-ui/src/components/annotation-page/standard-workspace/objects-side-bar/labels-list.tsx (3)

16-17: Ensure that the new imports are used appropriately in the file.


19-26: The shortcut registration for 'Switch label' is well-defined and aligns with the new system architecture.


28-28: The useRegisterShortcuts hook is correctly placed outside of the component to avoid unnecessary re-registrations on re-renders.

cvat-ui/src/components/annotation-page/top-bar/left-group.tsx (3)

19-20: Ensure that the new imports are used appropriately in the file.


40-53: The shortcut registration for 'Undo action' and 'Redo action' is well-defined and aligns with the new system architecture.


55-55: The useRegisterShortcuts hook is correctly placed outside of the component to avoid unnecessary re-registrations on re-renders.

cvat-ui/src/components/annotation-page/standard3D-workspace/controls-side-bar/controls-side-bar.tsx (1)

32-33: Ensure proper testing of the useRegisterShortcuts hook integration.

Also applies to: 65-65

cvat-ui/src/components/annotation-page/top-bar/player-navigation.tsx (2)

47-61: Validate the shortcut key sequences for potential conflicts or overlaps.

Verification successful

The search for shortcut key sequences did not yield any conflicting results. The only relevant match found was a single instance of shortcuts.sequences in the codebase, which does not indicate any conflicts.

  • No conflicts or overlaps were found with the existing shortcut key sequences.
Scripts executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify that the shortcut key sequences do not conflict with existing ones.

# Test: Search for all shortcut key sequences in the project to check for conflicts.
rg --type typescript "sequences:" "src/"

Length of output: 73



Script:

#!/bin/bash
# Description: Verify that the shortcut key sequences do not conflict with existing ones.

# Test: Search for all shortcut key sequences in the project to check for conflicts.
rg --type ts "sequences:" "src/"

Length of output: 75



Script:

#!/bin/bash
# Description: Locate TypeScript files and verify that the shortcut key sequences do not conflict with existing ones.

# Step 1: Locate TypeScript files to determine the correct directory structure.
fd --extension ts

# Step 2: Search for all shortcut key sequences in the located directories to check for conflicts.
fd --extension ts --exec rg "sequences:"

Length of output: 6719



Script:

#!/bin/bash
# Description: Locate TypeScript files and verify that the shortcut key sequences do not conflict with existing ones.

# Step 1: Locate TypeScript files to determine the correct directory structure.
fd --extension ts

# Step 2: Search for all shortcut key sequences in the located directories to check for conflicts.
fd --extension ts --exec rg "sequences"

Length of output: 6812


22-23: Ensure proper testing of the useRegisterShortcuts hook integration.

Also applies to: 63-63

cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/tag-annotation-sidebar.tsx (1)

31-32: Ensure proper testing of the useRegisterShortcuts hook integration.

Also applies to: 92-92

cvat-ui/src/components/annotation-page/top-bar/player-buttons.tsx (1)

51-101: Validate the shortcut key sequences for potential conflicts or overlaps.

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

26-27: The import of useRegisterShortcuts and ViewType aligns with the PR's objective to enhance shortcut management. Ensure that these utilities are used consistently across other components if applicable.


55-110: Introduced a comprehensive set of keyboard shortcuts for various actions within the attribute annotation sidebar. This is a significant enhancement for accessibility and efficiency. Ensure that these shortcuts do not conflict with existing global shortcuts and are documented in the user guide.


112-112: The useRegisterShortcuts hook is correctly used to register the defined shortcuts. It's crucial to ensure that this hook is called in the appropriate lifecycle method or effect to avoid potential issues with re-registration on every render.

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

16-17: The import of useRegisterShortcuts and ViewType is consistent with the changes in other components, supporting the PR's theme of enhanced shortcut management.

cvat-ui/src/components/header/header.tsx (3)

44-46: The import of useRegisterShortcuts, useIsMounted, and ViewType is consistent with the changes in other components, supporting the PR's theme of enhanced shortcut management.


76-89: Introduced keyboard shortcuts for toggling the shortcuts and settings modals. This is a useful feature for enhancing accessibility. Ensure these shortcuts are documented and do not conflict with other global shortcuts.

Verification successful

The search results indicate that the newly introduced shortcuts (f1 and f2) do not conflict with any existing shortcuts in the codebase. Therefore, the new shortcuts for toggling the shortcuts and settings modals are unique and should not cause any issues.

  • No conflicts found with the f1 and f2 shortcuts.
Scripts executed

The following scripts were executed for the analysis:


Script:

#!/bin/bash
# Description: Verify the uniqueness of newly introduced shortcuts.

# Test: Search for potential conflicts in shortcut definitions across the project.
rg --type tsx $'sequences:'

Length of output: 54



Script:

#!/bin/bash
# Description: Verify the uniqueness of newly introduced shortcuts.

# Test: Search for potential conflicts in shortcut definitions across the project.
rg --type typescript $'sequences:'

Length of output: 68



Script:

#!/bin/bash
# Description: Verify the uniqueness of newly introduced shortcuts.

# Test: Search for potential conflicts in shortcut definitions across the project.
rg 'sequences:'

Length of output: 9252


91-91: The useRegisterShortcuts hook is correctly used to register the defined shortcuts. It's crucial to ensure that this hook is called in the appropriate lifecycle method or effect to avoid potential issues with re-registration on every render.

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

32-33: Integration of useRegisterShortcuts hook.

The import and usage of useRegisterShortcuts from utils/hooks aligns with the PR's objective to manage shortcut registration through a centralized hook. This modular approach enhances maintainability and reusability.


72-169: Comprehensive shortcut definitions for object management.

The componentShortcuts object comprehensively defines various shortcuts for object manipulation within the annotation workspace. Each shortcut is well-documented with a name, description, sequences, and a view type. This structured approach not only enhances user interaction but also maintains consistency across the application.


171-171: Proper usage of the useRegisterShortcuts hook.

The useRegisterShortcuts hook is correctly utilized to register the defined shortcuts at the component level. This ensures that the shortcuts are active and available when the component is rendered, aligning with the lifecycle of the React component.

cvat-ui/src/components/annotation-page/single-shape-workspace/single-shape-sidebar/single-shape-sidebar.tsx (2)

32-33: Integration of ViewType enum and useRegisterShortcuts hook.

This change aligns with the PR's objective to enhance shortcut management. Ensure that the ViewType enum and useRegisterShortcuts function are properly defined and exported in their respective modules.


134-151: Definition and registration of component-specific shortcuts.

The shortcuts for 'Draw mode' and 'Cancel' are well-defined with clear names, descriptions, and sequences. This should enhance user accessibility and efficiency. Ensure that the ViewType.ALL is appropriate for these shortcuts and that it doesn't lead to unintended behavior in other parts of the application.

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

45-46: Integration of ViewType enum and useRegisterShortcuts hook.

This change is consistent with the PR's goal to manage shortcuts more effectively. Verify that the ViewType enum and useRegisterShortcuts function are correctly implemented and available for use as intended.


103-113: Definition and registration of a component-specific shortcut for switching tools blocker state.

The shortcut for 'Switch algorithm blocker' is defined with a clear name, description, and sequence. This addition should help in managing the interaction tools more efficiently. Confirm that the ViewType.ALL setting is suitable for this shortcut and does not interfere with other functionalities.

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

37-38: Ensure proper shortcut registration and usage.

The shortcut definitions for camera controls are well-defined with clear names and descriptions. The use of ViewType.ALL ensures these shortcuts are globally available, which is appropriate for these actions. The registration of these shortcuts using useRegisterShortcuts is correctly implemented.

Also applies to: 42-102, 105-105

cvat-ui/src/components/labels-editor/skeleton-configurator.tsx (1)

24-25: Ensure proper shortcut registration and usage.

The shortcut for canceling skeleton edge drawing is well-defined with a clear name and description. The use of ViewType.ALL ensures this shortcut is globally available, which is appropriate for this action. The registration of this shortcut using useRegisterShortcuts is correctly implemented.

Also applies to: 52-61, 61-61

cvat-ui/src/components/annotation-page/canvas/views/canvas2d/canvas-wrapper.tsx (1)

62-63: Integrate new imports effectively.

The imports for ViewType and useRegisterShortcuts are correctly placed and follow the project's conventions for organizing imports.

@bsekachev
Copy link
Member

bsekachev commented Jun 14, 2024

Hi @tahamukhtar20

There are plenty failed end to end tests with this pull request
Could you please take a look?

It is expected that nothing is changed for a user with this patch. So, I do not think you need to fix test. Probably there are some issues with the implementation.

@bsekachev
Copy link
Member

Example:
New organization pipeline -- The first user creates an organization and activates it -- after all hook (failed)

Copy link

Quality Gate Failed Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

cvat-ui/src/actions/shortcuts-actions.ts Outdated Show resolved Hide resolved
cvat-ui/src/utils/enums.tsx Outdated Show resolved Hide resolved
cvat-ui/src/utils/mousetrap-react.tsx Outdated Show resolved Hide resolved
cvat-ui/src/utils/hooks.ts Outdated Show resolved Hide resolved
@bsekachev
Copy link
Member

Hello,

Not all the shortcuts are transformed with this patch (because not all were initially defined in shortcuts reducer).
Try to search in project by GlobalHotKeys to understand what files include declared keymaps.

For example in file cvat-ui/src/components/annotation-page/attribute-annotation-workspace/attribute-annotation-sidebar/attribute-editor.tsx you may find the following:

        sortedValues.forEach((value: string, index: number): void => {
            const key = `SET_${index}_VALUE`;
            keyMap[key] = {
                name: `Set value "${value}"`,
                description: `Change current value for the attribute to "${value}"`,
                sequences: [`${index}`],
                action: 'keydown',
            };

            handlers[key] = (event: KeyboardEvent | undefined) => {
                if (event) {
                    event.preventDefault();
                }

                onChange(value);
            };
        });

On one hand, if we want to avoid shortcuts conflicts, using common design, now we have to declare these shortcuts globally as well (register in storage) (probably with specific scope (e.g. attribute annotation mode));

On the other hand, I do not think we want to be able to modify such kind of shortcuts in the future (and even list them in total shortcuts list). So, maybe we should introduce isMutable, isEnumerable flags to keyMapItem or something like this, and handle them properly. The reason of such restriction is that these shortcuts are very dynamic (for different labels and attributes they are different, with own name, and description).

Alternatively, we may unify these shortcuts, like:

name: "Set 1st value to the current attribute"
description: "Change current value for the attribute to the 1st value in the list"

and only provide correct handlers in attribute annotation sidebar component.

From first look, I like the second option more.

As I remember, there is similar problem in tag annotation mode (this file: cvat-ui/src/components/annotation-page/tag-annotation-workspace/tag-annotation-sidebar/shortcuts-select.tsx).

In this component, I believe it make sense to be able to see and configure these shortcuts (again, with specific scope, e.g. tag annotation mode)

@bsekachev
Copy link
Member

LGTM, let's wait for CI.

We are going to make a new release soon, after that this PR will be merged.
But we still need to apply the same approach for attribute annotation mode as you did in tag annotation mode

@tahamukhtar20
Copy link
Contributor Author

Yes sure, I will make those changes in the next pull request, the UI one.

Copy link

sonarqubecloud bot commented Aug 7, 2024

Quality Gate Failed Quality Gate failed

Failed conditions
C Reliability Rating on New Code (required ≥ A)

See analysis details on SonarCloud

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

@bsekachev bsekachev merged commit 38075d3 into cvat-ai:develop Aug 8, 2024
32 of 33 checks passed
bsekachev pushed a commit that referenced this pull request Aug 29, 2024
…cuts adjusted according to different Scopes, with the addition of Local Storage (#8186)
bschultz96 pushed a commit to bschultz96/cvat that referenced this pull request Sep 12, 2024
…d Shortcuts adjusted according to different Scopes, with the addition of Local Storage (cvat-ai#8186)
@tahamukhtar20 tahamukhtar20 deleted the week-1 branch September 24, 2024 18:39
@GeorgePearse
Copy link

GeorgePearse commented Dec 3, 2024

I think this maybe removed the ability to change the "active class" with hotkeys on a per task basis?

Without being able to change the class names that these are applied to, these hotkeys are really not useful. It means I can only use hotkeys for 10 of my > 200 classes, and a completely randomly selected subset at that.

image

This implementation, seems to have broken the functionality that was requested below (which is more useful IMO)
#3070 (comment)
#2317

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants