Add extended keyboard shortcut mode via ctrl + k for tool shortcuts #7112

MichaelBuessemeyer · 2023-06-01T15:24:29Z

This PR adds a new "extended" mode to the keyboard shortcuts. This mode is activated using ctrl + k and gives access to more commands. Only shortcuts for switching between annotation tools are implemented, but more can be added.
To leave the "extended" mode, the user needs to use one of the supported extended shortcuts or use ctrl + k again or wait 3 seconds.

Here is a list of all shortcuts for all tools. These shortcuts only work, once ctrl + k was pressed.

Shortcut	Tool
m	Move Tool
s	Skeleton Tool
b	Brush Tool
e	Brush Erase Tool
l	Lasso Tool
r	Lasso lErase Too
p	Segment Picker Tool
q	Quick Select Tool
x	Bounding Box Tool
o	Proofreading Tool

URL of deployed dev instance (used for testing):

https://___.webknossos.xyz

Steps to test:

Open any (hybrid) tracing
Press ctrl + k and try to quick-access the tools above by using their respective shortcuts. This should work.

Issues:

fixes Shortcut for faster tool switching #7045

Open Questions:

Where should I add the shortcut for the proofreading tool? Into the Skeleton or volume or default extended shortcuts? Additionally, do I need to make the proofreading tool shortcut only available if the proofreading tool is allowed? Because the shortcut can still exist without any problems and will not activate the proofreading tool, in case it is disabled for the user / lab / instance / dataset e.t.c.

Known Problems:

One should be able to deactivate the extended mode by pressing ctrl + k again, but Firefox does not trigger the second press as a key event and instead opens the Google search bar.

TODOs:

Write changelog entry and link keyboard shortcuts doc.

(Please delete unneeded items, merge only when none are left open)

Updated changelog
Updated documentation if applicable

…l-specific-shortcuts

docs/keyboard_shortcuts.md

MichaelBuessemeyer · 2023-06-02T13:01:07Z

frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx

+    ensureNonConflictingHandlers(extendedSkeletonControls, extendedVolumeControls);
+    const extendedAnnotationControls = { ...extendedSkeletonControls, ...extendedVolumeControls };
+    ensureNonConflictingHandlers(extendedAnnotationControls, extendedControls);
+    extendedControls = { ...extendedControls, ...extendedAnnotationControls };


I am not so happy about these lines as they seem not easy to read, but I thought that still ensuring no conflicts makes sense and overweights the hard to read code lines

not ideal, but okay in my opinion :)

MichaelBuessemeyer · 2023-06-02T13:07:47Z

frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx

+      b: () => setTool(AnnotationToolEnum.BRUSH),
+      e: () => setTool(AnnotationToolEnum.ERASE_BRUSH),
+      l: () => setTool(AnnotationToolEnum.TRACE),
+      r: () => setTool(AnnotationToolEnum.ERASE_TRACE),
+      f: () => setTool(AnnotationToolEnum.FILL_CELL),
+      p: () => setTool(AnnotationToolEnum.PICK_CELL),
+      q: () => setTool(AnnotationToolEnum.QUICK_SELECT),
+      o: () => setTool(AnnotationToolEnum.PROOFREAD),


@dieknolle3333 In order to define new "extended" shortcuts, just define them as regular keyboard shortcuts leaving out the ctrl + k. But make sure these are included in their own object that is additionally passed to the InputKeyboardNoLoop in the constructor. E.g. ctrl + k, 1 becomes simply 1.

Then you need to create the InputKeyboardNoLoop like this:

const extendedKeyboardBindings = { 1: () -> setBrushToPreset(PRESETS.1)}; new InputKeyboardNoLoop(normalKeyboardBindings, {options}, extendedKeyboardBindings);

This way pressing ctrl + k, 1 should call () -> setBrushToPreset(PRESETS.1)

alright, I'll try that once it's merged :)

…l-specific-shortcuts

MichaelBuessemeyer

@philippotto I assigned you to this review as Daniel already knows the "hacky"-way we implemented the "extended" keyboard mode using KeyboardJS. This pr should not take long to review (IMO #tm).

MichaelBuessemeyer · 2023-06-03T09:42:31Z

frontend/javascripts/libs/input.ts

+    if (isExtendedCommand) {
+      KeyboardJS.withContext("extended", () => {
+        KeyboardJS.bind(...binding);
+      });
+    }
+    KeyboardJS.withContext("default", () => {
+      KeyboardJS.bind(...binding);
+    });


In order to realize / implement the "extended keyboard mode" we use the context feature of KeyboardJS. This might not be the way this feature was intended but it works 👍

frontend/javascripts/libs/keyboard.ts

MichaelBuessemeyer

@philippotto I assigned you to this review as Daniel already knows the "hacky"-way we implemented the "extended" keyboard mode using KeyboardJS. This pr should not take long to review (IMO #tm).

philippotto

great :) looks mostly good to me, but left some comments. will test after the next iteration.

docs/keyboard_shortcuts.md

frontend/javascripts/libs/keyboard.ts

philippotto · 2023-06-05T11:56:14Z

frontend/javascripts/oxalis/controller/viewmodes/plane_controller.tsx

+    ensureNonConflictingHandlers(extendedSkeletonControls, extendedVolumeControls);
+    const extendedAnnotationControls = { ...extendedSkeletonControls, ...extendedVolumeControls };
+    ensureNonConflictingHandlers(extendedAnnotationControls, extendedControls);
+    extendedControls = { ...extendedControls, ...extendedAnnotationControls };


not ideal, but okay in my opinion :)

frontend/javascripts/libs/input.ts

philippotto

Works great! Only see my one comment. However, I think, that this is not really critical (and I'm not sure whether it's fixable in the first place)..

philippotto · 2023-06-07T07:34:58Z

frontend/javascripts/libs/input.ts

+    if (extendedCommands) {
+      this.attach(EXTENDED_COMMAND_KEYS, this.toggleExtendedMode);
+      // Add empty callback in extended mode to deactivate the extended mode via the same EXTENDED_COMMAND_KEYS.
+      this.attach(EXTENDED_COMMAND_KEYS, _.noop, true);


Does this work for you? If I hit CTRL + K twice, Chrome focuses my search bar on the second hit. I'm releasing both keys fully inbetween..

No, unfortunatley, this does not work for me :/
I'll try a bit whether I can fix this as github seemed to have managed it. Maybe I can find a workaround.

I just pushed a fix that works on Firefox. I also checked for chrome, but my chrome installation is somewhat broken. Thus it would be best, if you could check this again

…l-specific-shortcuts

philippotto · 2023-06-16T07:51:36Z

Great 👍 :)

…esign-right-sidebar * 'master' of github.com:scalableminds/webknossos: added Youtube videos to docs Log dataset uploads (with no conversion) to slack (#7157) Added "Automation Tutorial" to docs (#7160) fix logo image in README.md Second try for “Async IO for HttpsDataVault, Fox Error Handling” (#7155) Revert "Async IO for HttpsDataVault, Fox Error Handling (#7137)" (#7154) Async IO for HttpsDataVault, Fox Error Handling (#7137) Fix vault path for precomputed datasets (#7151) Add extended keyboard shortcut mode via ctrl + k for tool shortcuts (#7112) Shared Chunk Cache for all DatasetArrays, CacheWeight for AlfuCache (#7067)

MichaelBuessemeyer added 2 commits June 1, 2023 16:19

add extended keyboard shortcut mode via ctrl + k

8f077d7

enable extended shortcuts dependent on active tracing type

242256f

MichaelBuessemeyer added enhancement frontend labels Jun 1, 2023

MichaelBuessemeyer self-assigned this Jun 1, 2023

MichaelBuessemeyer added 4 commits June 1, 2023 17:25

Merge branch 'master' of github.com:scalableminds/webknossos into too…

c258d14

…l-specific-shortcuts

add proofreading tool shortcut

83729d9

add new shortcuts to docs

cd0b93e

remove unused keyboard prop

2c467b8

MichaelBuessemeyer commented Jun 2, 2023

View reviewed changes

MichaelBuessemeyer added 2 commits June 2, 2023 15:08

Merge branch 'master' of github.com:scalableminds/webknossos into too…

9e23cf9

…l-specific-shortcuts

add changelog entry

e4eb669

MichaelBuessemeyer commented Jun 3, 2023

View reviewed changes

MichaelBuessemeyer marked this pull request as ready for review June 3, 2023 09:46

MichaelBuessemeyer requested a review from philippotto June 3, 2023 09:47

MichaelBuessemeyer added 2 commits June 3, 2023 11:54

fix tests and typo

9011232

fix linting (unused arg)

a5a95f7

philippotto reviewed Jun 5, 2023

View reviewed changes

MichaelBuessemeyer and others added 2 commits June 6, 2023 16:05

Merge branch 'master' into tool-specific-shortcuts

b7874a3

apply review feedback

46fc973

MichaelBuessemeyer requested a review from philippotto June 6, 2023 14:08

philippotto approved these changes Jun 7, 2023

View reviewed changes

MichaelBuessemeyer added 3 commits June 15, 2023 20:15

prevent browser searchbar focus on ctrl + k

40f6833

Merge branch 'master' of github.com:scalableminds/webknossos into too…

5cd4826

…l-specific-shortcuts

fix linting

3390a14

MichaelBuessemeyer requested a review from philippotto June 15, 2023 19:12

MichaelBuessemeyer merged commit 80e2525 into master Jun 16, 2023
2 checks passed

MichaelBuessemeyer deleted the tool-specific-shortcuts branch June 16, 2023 08:06

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add extended keyboard shortcut mode via ctrl + k for tool shortcuts #7112

Add extended keyboard shortcut mode via ctrl + k for tool shortcuts #7112

MichaelBuessemeyer commented Jun 1, 2023 •

edited

MichaelBuessemeyer Jun 2, 2023

philippotto Jun 5, 2023

MichaelBuessemeyer Jun 2, 2023

dieknolle3333 Jun 2, 2023 •

edited

MichaelBuessemeyer left a comment

MichaelBuessemeyer Jun 3, 2023

MichaelBuessemeyer left a comment

philippotto left a comment

philippotto Jun 5, 2023

philippotto left a comment

philippotto Jun 7, 2023

MichaelBuessemeyer Jun 15, 2023

MichaelBuessemeyer Jun 15, 2023

philippotto Jun 16, 2023

philippotto commented Jun 16, 2023

Add extended keyboard shortcut mode via ctrl + k for tool shortcuts #7112

Add extended keyboard shortcut mode via ctrl + k for tool shortcuts #7112

Conversation

MichaelBuessemeyer commented Jun 1, 2023 • edited

URL of deployed dev instance (used for testing):

Steps to test:

Issues:

Open Questions:

Known Problems:

TODOs:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dieknolle3333 Jun 2, 2023 • edited

Choose a reason for hiding this comment

MichaelBuessemeyer left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

MichaelBuessemeyer left a comment

Choose a reason for hiding this comment

philippotto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

philippotto left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

philippotto commented Jun 16, 2023

MichaelBuessemeyer commented Jun 1, 2023 •

edited

dieknolle3333 Jun 2, 2023 •

edited