Making the webKnossos UI more intuitive

webKnossos is a very powerful tool for microscopy data exploration and annotation in the right hands. In the latest release, we are introducing improvements to the UI that make webKnossos easier to get started with and make some advanced features more easily discoverable.

In this blog post, we will go over all the changes and tweaks to the controls to make newcomers welcome and keep veterans in the loop.

Context-sensitive Actions Menu

The biggest new addition is a context-sensitive menu on right-click available both in line-segment (skeleton) or volume annotation mode. The menu will contain useful, context-sensitive actions available for your current annotation operation depending on your click target. For example, when right-clicking on a skeleton node you will have the option to 1) delete the selected node or 2) connect it to the currently active node (merge two skeletons) and more operations. Most of these actions were already possible with the help of keyboard shortcuts but the new context menu makes them more discoverable and easier to use.

The new right-click context menu in action. It context-sensitively provides users with appropriate actions based on the current annotation tool and click target. Here, a user first create a new node, then merges two line-segment annotations (skeletons) by choosing the “Create Edge & Merge With This Tree” action and later undos the change by using the “Delete” action.

Additionally, the context menu will provide you with more information about the selected object, e.g. node/skeleton/segment IDs or its exact coordinates. There are also analysis features like measuring the distance between your click position and the currently active node.

The context menu also offers useful information on your annotation and analysis features. Here, a user copies the coordinates of a node in a skeleton annotation and then inquires about the total path length of their reconstruction.

The veterans among you will likely note that right-clicking was already associated with placing skeleton nodes in webKnossos. Now, it is possible to create skeleton nodes with the left-click. webKnossos is smart enough to detect whether you want to move the dataset, create new nodes, select existing nodes, or move nodes. We believe that this change will make working with skeletons more efficient. Additionally, similar to the volume annotation tools like “brush” there is now a dedicated tool for skeleton annotations where left-clicking will place nodes.

In volume annotation mode, right-clicking was associated with removing/erasing the volume segmentation. The eraser modifier is now available separately from the toolbar (see below) and through a keyboard modifier.

Basic dataset navigation is still done with left-mouse dragging in any viewport. Right-clicking will always bring up the context menu regardless of the selected tool.

For compatibility reasons and all of you with long-lasting muscle memory, we also offer “Classic mode” that retains the “old” behavior of placing skeleton nodes with a right-click. The context menu can be invoked with “SHIFT + right-clicking” instead.

Once the update is live, users can choose to enable the new control scheme or use “Classic Controls”. In classic mode, skeleton node placement remains bound to right mouse clicks and the context menu is invoked with SHIFT + right-clicking.

webKnossos will ask existing users to choose between the new controls and classic mode the first time you open it after the update goes live. Alternatively, you can switch between classic and regular control mode in the Settings.

Improved Toolbar

The toolbar with the main annotation and navigation tools at the top of the screen has been around for some time now. With this update we chose to expand it with the new tools for “Navigation” and “Skeleton Annotation” as well as with new modifiers.

A good example of this is the “Single Node Tree” mode (sometimes referred to as “soma-clicking” mode) which can be used to automatically create a new skeleton/tree for each node that you place. (This is super helpful in marking individual locations in a dataset such as the location /center point of a nucleus/soma, or individual vesicles when counting them etc.) This modifier for the skeleton annotation mode was previously hidden in the settings and will now be prominently displayed in the toolbar when selecting the appropriate skeleton annotation tool. Similarly, we move the merger mode and the ability to create a new tree/skeleton into the toolbar.

The toolbar now contains new annotation tools and modifiers. Skeleton anntotation mode is now a separate available tool with the modifiers for “Single Tree Mode” (Soma-clicking mode) and “Merger Mode” quickly available. Here, a user selects the skeleton annotation tool, switches into single tree mode and annotates the center point of several nuclei by left-clicking into them.

Similarly, the frequently used setting for changing the brush size in the volume annotation tools has been moved to the toolbar to make it readily available. (The shortcut SHIFT + mouse wheel also still works.)

As mentioned above, both the brush and trace tools for volume annotations now have an eraser modifier in the toolbar as well. When active, voxels will be erased from a segmentation when painting over them. Alternatively, the modifier can be triggered with the keyboard shortcut SHIFT + CTRL + Left Drag.

The volume annotation tools (brush & trace) have a new eraser modifier that can be activated in the toolbar. Alternatively, trigger them with SHIFT + CTRL + left mouse dragging.

New Status Bar

At the bottom of the screen, webKnossos now has a status bar containing useful information about current annotation as well as a small context-sensitive help

In details, the status bar contains

• Current render resolution/mipmap level of the data, mouse coordinates, volume segment ID under the cursor
• IDs of the Active Volume Segment, Node, and Tree/Skeletons. Click on the little icon to manually input an ID as required.
• A summary of the most frequent actions associated with the mouse controls given the selected tool. This is a context-sensitive help panel and updates based on active tool modifiers and annotation mode.

A close-up of the webKnossos status board at the bottom of the screen. It contains useful information about current annotation as well as a small context-sensitive help section on the most frequent controls.

Note, there are also small arrow icon buttons on the very left-hand and right-hand side of the status bar. Use these to toggle the visibility of the respective left-hand and right-hand sidebar. Similarly, you will find these icons in the title bar of the XY and XY viewports where they have the same functionality.

This is super useful for customizing the webKnossos main window to your current workflow. Don’t need the layers/setting menu for your current task? Just hide them! Want to see your data front and center but still want to tweak the opacity of a single volume layer? Maximize the XY viewport and toggle/overlay the left-hand side Layer sidebar.

Other Changes

Similar to volume layers, an annotation now has a “Skeleton“ layer containing the controls and settings for all line-segment/skeleton annotations in your dataset. You can easily toggle the visibility of all skeletons in your annotation. Many skeleton annotation-related settings (e.g. node radius, node highlighting) that were previously a “Settings” panel were moved here.

• The bounding boxes panel was moved from the settings section and promoted to have its own “BBox” tab next to skeletons, meshes, and volume tabs in the right-hand sidebar.
• The tabs in the left-hand sidebar were renamed from “Annotation” and “Dataset” to “Layers” and “Settings”.
• A few other settings were rearranged in the left-hand sidebar

Two neurites touching each other at a synpase. Meshes exported from webKnossos based on an automated segmentation from scalable minds.

Summary

We made webKnossos more intuitive and discoverable with a number of key improvements:

• A right-click menu offering context-sensitive actions
• An improved toolbar with new tools for skeleton annotations and volume erasers
• A reorganization of the sidebars with new toggles to show/hide them
• A permanent status bar with relevant information on your current annotation and context-sensitive help

I hope you found this blog post helpful and like the new webKnossos control schema and UX. Try them out for yourself for free at https://webknossos.org.
If you have any questions or feedback on the new user experience, feel free to reach out at hello@webknossos.org.