Annotation Keyboard shortcuts do not work

[nulinspiratie]

The JavaScript code in _register_shortcut_callback() has become quite complex and may require refactoring.

Issue:
• The callback currently appears untested and may not function as intended.
• The logic includes conditional behavior based on whether the annotation tab is selected, which could be a source of complexity.

Open Questions:
• Is the conditional check necessary, given that the callback is defined within the annotation_tab_controller? Is that controller only active when the annotation tab is selected?
• Would it be cleaner to move the eventListener to the video_mode_component and forward relevant events to the annotation tab when needed?

Suggested Action:
• Reevaluate whether the conditional logic is needed.
• Consider simplifying the architecture by centralizing key event handling in video_mode_component if it improves clarity or maintainability.

Raised by @domess

[nulinspiratie]

Original working code, though not limited to the annotation tab:

        # Use keyboard shortcuts to switch between radio items (modes)
        '''
        Introduce keyboard shortcuts for the point and lines modes (radiobuttons). 
        This is done via Javascript.
        '''
        self.app.clientside_callback(
            """
            function(value) {
                document.addEventListener("keydown", function(event) {
                    if (event.shiftKey) { // Shift key is pressed
                        let key = event.key.toLowerCase();  // Normalize to lowercase
                        let mapping = {"p": "point", "l": "line", "d": "delete", "t": "translate-all"};

                        if (mapping.hasOwnProperty(key)) {
                            event.preventDefault();  // Prevent default browser actions
                            //console.log("Shortcut selected:", mapping[key]);
                            
                            // Update the RadioItems value
                            dash_clientside.set_props("mode-selector", {value: mapping[key]})                         
                        }
                    }
                });
                
                return window.dash_clientside.no_update;
            }
            """,
            Output("mode-selector", "value"),
            Input("mode-selector", "value")
        )