Add "hide/show other trees" to tree context-menu

CHANGELOG.unreleased.md

@@ -13,6 +13,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Added
 - The visible meshes are now included in the link copied from the "Share" modal or the "Share" button next to the dataset position. They are automatically loaded for users that open the shared link. [#5993](https://github.com/scalableminds/webknossos/pull/5993)
 - Added a new "Connectome Tab" which can be used to explore connectomes by visualizing neurites and their synaptic connections. Connectome files need to be placed in a `connectomes` folder inside of the respective segmentation layer. It is possible to craft links that automatically load specific agglomerates and their synapses when openend. For more information refer to https://docs.webknossos.org/webknossos/sharing.html#sharing-link-format. [#5894](https://github.com/scalableminds/webknossos/pull/5894)
+- Added a context-menu option when right-clicking on skeleton trees to hide/show all other trees but the selected one. Great for inspecting a single tree oin isolation. Identical to keyboard shortcut "2". [#6102](https://github.com/scalableminds/webknossos/pull/6102)
 
 ### Changed
 - The maximum brush size now depends on the available magnifications. Consequentially, one can use a larger brush size when the magnifications of a volume layer are restricted. [#6066](https://github.com/scalableminds/webknossos/pull/6066)

frontend/javascripts/oxalis/view/right-border-tabs/tree_hierarchy_view.js

@@ -39,6 +39,7 @@ import {
   shuffleTreeColorAction,
   setTreeGroupAction,
   deleteTreeAction,
+  toggleInactiveTreesAction,
 } from "oxalis/model/actions/skeletontracing_actions";
 import messages from "messages";
 import { formatNumberToLength, formatLengthAsVx } from "libs/format_utils";
@@ -73,6 +74,7 @@ type Props = {
   onToggleTreeGroup: number => void,
   onUpdateTreeGroups: (Array<TreeGroup>) => void,
   onBatchActions: (Array<Action>, string) => void,
+  onToggleHideInactiveTrees: () => void,
 };
 
 type State = {
@@ -341,6 +343,16 @@ class TreeHierarchyView extends React.PureComponent<Props, State> {
             Expand all subgroups
           </Menu.Item>
         ) : null}
+        <Menu.Item
+          key="hideTree"
+          onClick={() => {
+            this.props.onSetActiveGroup(id);
+            this.props.onToggleHideInactiveTrees();
+          }}
+          title="Hide/Show all other trees"
+        >
+          <i className="fas fa-eye" /> Hide/Show all other trees
+        </Menu.Item>
       </Menu>
     );
 
@@ -445,6 +457,17 @@ class TreeHierarchyView extends React.PureComponent<Props, State> {
           >
             <i className="fas fa-ruler" /> Measure Skeleton Length
           </Menu.Item>
+          <Menu.Item
+            key="hideTree"
+            onClick={() => {
+              this.props.onSetActiveTree(tree.treeId);
+              this.props.onToggleHideInactiveTrees();
+              this.handleTreeDropdownMenuVisibility(tree.treeId, false);
+            }}
+            title="Hide/Show all other trees"
+          >
+            <i className="fas fa-eye" /> Hide/Show all other trees
+          </Menu.Item>
         </Menu>
       );
 
@@ -586,6 +609,9 @@ const mapDispatchToProps = (dispatch: Dispatch<*>) => ({
   onBatchActions(actions, actionName) {
     dispatch(batchActions(actions, actionName));
   },
+  onToggleHideInactiveTrees() {
+    dispatch(toggleInactiveTreesAction());
+  },
 });
 
 export default connect<Props, OwnProps, _, _, _, _>(