Panel content reorganization + Control/Tool rework

MIGRATIONS.unreleased.md

@@ -6,7 +6,23 @@ This project adheres to [Calendar Versioning](http://calver.org/) `0Y.0M.MICRO`.
 User-facing changes are documented in the [changelog](CHANGELOG.released.md).
 
 ## Unreleased
--
+- Consider setting `defaultToLegacyBindings` to `true` in application.conf if you want that new users use the classic controls by default.
+- To make the classic mouse bindings the default for existing users and task types execute the following (adapt `true` to `false` if you want the opposite):
+```
+-- Activate legacy bindings for all users
+UPDATE webknossos.users
+SET userconfiguration = jsonb_set(
+        userconfiguration,
+        array['useLegacyBindings'],
+        to_jsonb('true'::boolean))
+
+-- Recommend legacy bindings for users when starting a new task
+UPDATE webknossos.tasktypes
+SET recommendedconfiguration = jsonb_set(
+        recommendedconfiguration,
+        array['useLegacyBindings'],
+        to_jsonb('true'::boolean))
+```
 
 ### Postgres Evolutions:
 - 

conf/application.conf

@@ -84,6 +84,7 @@ features {
   publicDemoDatasetUrl = "https://webknossos.org/datasets/scalable_minds/l4dense_motta_et_al_demo"
   exportTiffMaxVolumeMVx = 1024
   exportTiffMaxEdgeLengthVx = 8192
+  defaultToLegacyBindings = false
 }
 
 # Serve annotations. Only active if the corresponding play module is enabled

docs/getting_started.md

@@ -50,11 +50,18 @@ You can also change the size of the viewports to see more details in your data a
 
 ## Your First Annotation
 Click the `Create Annotation` button from the view mode of a dataset to create your first annotation.
-webKnossos will launch the main annotation screen allowing you to navigate your dataset and place markers to reconstruct skeletons.
-
-Drag the mouse while pressing the left mouse button to navigate the dataset.
-Right-click in the data to place markers, called nodes.
-Basic movement in the dataset is done with the mouse wheel or by pressing the spacebar keyboard shortcut.
+webKnossos will launch the main annotation screen allowing you to navigate your dataset, place markers to reconstruct skeletons, or annotate segments as volume annotations.
+
+Depending on the current tool which can be selected in the top bar, various actions can be performed.
+Note that the most important controls are always shown in the status bar at the bottom of your screen.
+The first tool is the move tool which allows to navigate the dataset by moving the mouse while holding the left mouse button.
+In the skeleton tool, left click can be used to place markers in the data, called nodes.
+Additionally, the left mouse button can also be used to navigate around, select or drag nodes.
+The draw tool allows to "paint" voxels to create volumetric annotations.
+
+A right click can be used to open a context-sensitive menu with various actions, such as merging two trees or flood-filling a segment.
+Note that "Classic Controls" can be activated in the settings sidebar which assigns more specialized behaviors to the right click (e.g., dragging with the right mouse button in the draw tool will erase data).
+Basic movement along the 3rd axis is done with the mouse wheel or by pressing the spacebar keyboard shortcut.
 
 Learn more about the skeleton, volume, and hybrid annotations as well as the interface in the [Annotation UI guide](./tracing_ui.md).
 

docs/keyboard_shortcuts.md

@@ -1,6 +1,15 @@
 # Keyboard & Mouse Shortcuts
 
-Find all available keyboard & mouse shortcuts for webKnossos listed below.
+The most important shortcuts are always shown in the statusbar at the bottom.
+These shortcut hints depend on the active tool and also change when modifiers are pressed to allow easy exploration of available functionality.
+
+A complete listing of all available keyboard & mouse shortcuts for webKnossos can be found below.
+
+## Classic Controls
+
+Note that you can enable *Classic Controls* in the left sidebar.
+Without classic controls (which is the default), a more intuitive behavior is used which assigns the most important functionality to the left mouse button (e.g., moving around, selecting/creating/moving nodes) while the right mouse button always opens a context-sensitive menu for more complex actions, such as merging two trees.
+With classic controls, several mouse controls are modifier-driven and may also use the rightclick for actions, such as erasing volume data.
 
 ## General
 
@@ -33,26 +42,39 @@ Find all available keyboard & mouse shortcuts for webKnossos listed below.
 
 ### Orthogonal Mode
 
+Note that skeleton-specific mouse actions are usually only available, when the skeleton tool is active.
+
 | Key Binding                           | Operation                                   |
 | ------------------------------------- | ------------------------------------------- |
 | Left Mouse Drag or Arrow Keys         | Move In-Plane                               |
 | Alt + Mouse Move                      | Move In-Plane                               |
 | SPACE                                 | Move Forward                                |
 | Scroll Mousewheel (3D View)           | Zoom In And Out                             |
 | Right Click Drag (3D View)            | Rotate 3D View                              |
-| Right Click                           | Create New Node                             |
+| Left Click                            | Create New Node                             |
+| Left Click                            | Select Node (Mark as Active Node) if one was hovered  |
+| Left Drag                             | Move node if one was hovered                |
 | C                                     | Create New Tree                             |
-| SHIFT + Left Click                    | Select Node (Mark as Active Node)           |
 | CTRL + .                              | Navigate to subsequent Node (Mark as Active)|
 | CTRL + ,                              | Navigate to preceding Node (Mark as Active) |
 | CTRL + Left Click / CTRL + Arrow Keys | Move the Active Node                        |
-| SHIFT + ALT + Left Click      | Merge Two Nodes and Combine Trees                   |
-| SHIFT + CTRL + Left Click     | Delete Edge / Split Trees                           |
 | Del                           | Delete Node / Split Trees                           |
 | B                             | Mark Node as New Branchpoint                        |
 | J                             | Jump To Last Branchpoint                            |
 | S                             | Center Camera on Active Node                        |
 
+
+Note that you can enable *Classic Controls* which will behave slightly different and more explicit for the mouse actions:
+
+| Key Binding                   | Operation                           |
+| ----------------------------- | -------------                       |
+| Right Click                   | Create New Node                     |
+| SHIFT + Left Click            | Select Node (Mark as Active Node)   |
+| SHIFT + Left Click            | Select Node (Mark as Active Node)   |
+| SHIFT + ALT + Left Click      | Merge Two Nodes and Combine Trees   |
+| SHIFT + CTRL + Left Click     | Delete Edge / Split Trees           |
+
+
 ### Flight / Oblique Mode
 
 | Key Binding                   | Operation                                  |
@@ -77,24 +99,28 @@ Find all available keyboard & mouse shortcuts for webKnossos listed below.
 | --------------------------------- | ----------------------------------------------------------- |
 | Left Mouse Drag or Arrow Keys     | Move (Move Mode) / Add To Current Cell (Trace / Brush Mode) |
 | SHIFT + Left Click                | Select Active Cell                                          |
-| CTRL + Left Mouse Drag            | Add Empty Voxels To Current Cell (in Trace / Brush Mode); i.e., does not overwrite other cells    |
-| Right Mouse Drag                  | Remove Voxels From Current Cell                             |
-| CTRL + Right Mouse Drag           | Remove Voxels From Any Cell                                 |
-| CTRL + SHIFT + Left Click | Add All Voxels of the Current Area To Current Cell (Bucket Paint Tool) |
+| CTRL + Left Mouse Drag            | Add Voxels To Current Cell while inverting the overwrite-mode (see toolbar for overwrite-mode) |
+| CTRL + SHIFT + Left Mouse Drag    | Remove Voxels From Cell                                     |
 | Alt + Mouse Move                  | Move                                                        |
 | C                                 | Create New Cell                                             |
 | W, 1                              | Toggle Modes (Move / Trace / Brush)                         |
-| SHIFT + Mousewheel or SHIFT + I, O | Change Brush Size (Brush Mode)                              |
+| SHIFT + Mousewheel or SHIFT + I, O | Change Brush Size (Brush Mode)                             |
 | V                                 | Copy Segmentation of Current Cell From Previous Slice       |
 | SHIFT + V                         | Copy Segmentation of Current Cell From Next Slice           |
 
+Note that you can enable *Classic Controls* which won't open a context-menu on rightclick, but instead erases when the brush/trace tool is activated.
+
+| Key Binding                       | Operation                                                   |
+| --------------------------------- | ----------------------------------------------------------- |
+| Right Mouse Drag                  | Remove Voxels                                               |
+| CTRL + Right Mouse Drag           | Remove Voxels while inverting the overwrite-mode (see toolbar for overwrite-mode) |
+
 ## Mesh Related Shortcuts
 
 The following bindings only work if isosurface rendering is activated in the settings and a segmentation exists.
 
 | Key Binding                                            | Operation                                                   |
 | ------------------------------------------------------ | ----------------------------------------------------------- |
-| Shift + Click on a segment in the orthogonal viewports | Initiate isosurface rendering for that cell                 |
 | Shift + Click on a segment in the 3D viewport          | Change the active position to the clicked position          |
 | Ctrl + Click on a segment in the 3D viewport           | Remove the isosurface of the clicked cell                   |
 

docs/skeleton_annotation.md

@@ -54,7 +54,7 @@ Nodes are placed automatically along the flight path, creating skeleton very eff
 Skeleton annotations consist of connected nodes forming a graph.
 Nodes are connected through edges and are organized in trees.
 
-Nodes can be placed by right-clicking (*Right Click*) in orthogonal mode or automatically when moving in flight or oblique mode.
+Nodes can be placed by clicking (*Left Click* by default or *Right Click* when *Classic Controls* are enabled in the settings sidebar) in orthogonal mode (the skeleton tool should be selected) or automatically when moving in flight or oblique mode.
 All (global) operations are executed on the current active node, e.g. adding a comment or node deletion.
 Most keyboard shortcuts take the active node into context.
 Operations on whole trees, e.g. splitting or merging trees, follow the same pattern.
@@ -73,14 +73,25 @@ Press the "J" to jump to the latest branch point to continue working from there
 
 | Key Binding       | Operation                           |
 | ----------------- | -------------                       |
-| Right Click       | Create New Node                     |
-| SHIFT + Left Click| Select Node (Mark as Active Node)   |
+| Left Click        | Create New Node                     |
+| Left Click        | Select Node (Mark as Active Node) if one was hovered  |
+| Left Drag         | Move around                         |
+| Left Drag         | Move node if one was hovered        |
 | S                 | Center Camera on Active Node        |
 | DEL               | Delete Active Node                  |
 | B                 | Create Branch Point                 |
 | J                 | Jump to Last Branch Point           |
 | C                 | Create New Tree                     |
 
+Note that you can enable *Classic Controls* which will behave slightly different and more explicit for the mouse actions:
+
+| Key Binding       | Operation                           |
+| ----------------- | -------------                       |
+| Left Drag         | Move around                         |
+| Right Click       | Create New Node                     |
+| SHIFT + Left Click| Select Node (Mark as Active Node)   |
+| Left Drag         | Move node if one was hovered (unless *Classic Controls* are enabled)        |
+
 All further keyboard shortcuts are [available here](./keyboard_shortcuts.md).
 
 ### Tree Operations & Tree Groups
@@ -98,9 +109,9 @@ Hover over existing tree groups to bring up a little menu for creating new group
 Common tree operations include splitting and merging trees.
 
 - `Tree splitting` can be done in two ways:
-  1. Select a node at which to split (*SHIFT + Left Click*) and delete (*DEL*) it.
-  2. Delete an edge between two nodes. Select the first node (*SHIFT + Left Click*), then *SHIFT + CTRL + Left Click* on the second node of the edge to delete this connection.
-- `Tree merging` works similarly to edge deletion but will create a new edge between two previously unconnected trees. Select the first node and *SHIFT + ALT + Left Click* the second node to create an edge between the two.
+  1. Delete a node at which to split. This can be done by rightclicking a node and choosing "Delete this Node". If you have enabled *Classic Controls*, you need to select (*SHIFT + Left Click*) the node first and then delete (*DEL*) it.
+  2. Delete an edge between two nodes. Select the first node (*Left Click*), then rightclick the second node and select *Delete Edge to this Node*. If you have enabled *Classic Controls*, you need to select the first node with *Shift + Left Click* and then click on the second node with *SHIFT + CTRL + Left Click* on the second node of the edge to delete this connection.
+- `Tree merging` works similarly to edge deletion but will create a new edge between two previously unconnected trees. Select the first node and rightclick the second to choose *Create Edge & Merge with this Tree*. When using *Classic Controls*, the second node needs to be selected with *SHIFT + ALT + Left Click* to create an edge between the two.
 
 ![Trees can split by deleting the edge between two nodes or deleting a node. Two trees can be merged again by creating a new edge between them.](images/tracing_ui_tree_merge_split.gif)
 
@@ -124,13 +135,11 @@ There are also keyboard shortcuts to quickly toggle the visibility:
 | ----------------------------| -------------                         |
 | 1                           | Toggle Visibility of all Trees        |
 | 2                           | Toggle Visibility of Inactive Trees   |
-| SHIFT + ALT + Left Click    | Merge Two Nodes and Combine Trees     |
-| SHIFT + CTRL + Left Click   | Delete Edge / Split Trees             |
 
 ![Trees can be hidden for a better overview over the data. Toggle the visibility of individual tree using the checkbox in front of the tree's name or use the button to toggle all (inactive) trees at once.](images/tracing_ui_tree_visibility.png)
 
 #### The Context Menu for Easy Access to Functionalities
-webKnossos also has a context menu which can be opened via *Shift + Right Click*. This context menu takes the currently active node into context and offers functionalities plus information to the user.
+webKnossos also has a context menu which can be opened via *Right Click* (or *Shift + Right Click* if *Classic Controls* are enabled). This context menu takes the selected node into context and offers functionalities plus information to the user.
 ![Example of the context menu](./images/context_menu.png)
 The context menu has two modes. 
 

docs/volume_annotation.md

@@ -12,10 +12,13 @@ Select one of the drawing tools from the toolbar or toggle through with the keyb
 - `Move`: Navigate around the dataset.
 - `Trace`: Draw outlines around the voxel you would like to label.
 - `Brush`: Draw over the voxels you would like to label. Adjust the brush size with *SHIFT + Mousewheel*.
+- `Erase (Trace/Brush)`: Draw over the voxels you would like to erase. Adjust the brush size with *SHIFT + Mousewheel*.
 - `Fill Tool`: Flood-fill the clicked region. All adjacent voxels with the same voxel id as the clicked voxel will be changed to the active cell id.
+- `Cell Picker`: Click a segment to use its id as the active cell id.
 
-Add labels with *Left Mouse Drag*.
-Remove labels with *Right Mouse Drag*.
+When using the trace or brush tool, label can be added with *Left Mouse Drag*.
+Erasing is possible with the dedicated erase tools or with *CTRL + Shift + Left Mouse Drag*.
+If you have enabled *Classic Controls* in the settings sidebar, erasing is also possible with *Right Mouse Drag* within the brush and trace tool (otherwise, rightclick is mapped to open a context menu).
 
 In the `Segmentation` tab on the right-hand side, you can see the cell IDs which are active, below your cursor, or in the middle of the viewport.
 

frontend/javascripts/admin/dataset/dataset_upload_view.js

@@ -251,11 +251,7 @@ class DatasetUploadView extends React.Component<PropsWithFormAndRouter, State> {
                     The conversion for the uploaded dataset was started.
                     <br />
                     Click{" "}
-                    <a
-                      target="_blank"
-                      href="https://github.com/scalableminds/webknossos-cuber/"
-                      rel="noopener noreferrer"
-                    >
+                    <a target="_blank" href="/jobs" rel="noopener noreferrer">
                       here
                     </a>{" "}
                     to see all running jobs.