Add option to hide tree edges

frontend/javascripts/oxalis/api/api_latest.ts

@@ -25,6 +25,7 @@ import {
   setTreeVisibilityAction,
   setTreeGroupAction,
   setTreeGroupsAction,
+  setTreeEdgeVisibilityAction as setTreeEdgeVisibilityAction,
 } from "oxalis/model/actions/skeletontracing_actions";
 import {
   bucketPositionToGlobalAddress,
@@ -383,6 +384,22 @@ class TracingApi {
     Store.dispatch(setTreeNameAction(name, treeId));
   }
 
+  /**
+   * Sets the visibility of the edges for a tree. If no tree id is given, the active tree is used.
+   *
+   * @example
+   * api.tracing.setTreeEdgeVisibility(false, 1);
+   */
+  setTreeEdgeVisibility(edgesAreVisible: boolean, treeId: number | null | undefined) {
+    const skeletonTracing = assertSkeleton(Store.getState().tracing);
+
+    if (treeId == null) {
+      treeId = skeletonTracing.activeTreeId;
+    }
+
+    Store.dispatch(setTreeEdgeVisibilityAction(treeId, edgesAreVisible));
+  }
+
   /**
    * Makes the specified tree active. Within the tree, the node with the highest ID will be activated.
    *

frontend/javascripts/oxalis/geometries/materials/node_shader.ts

@@ -198,7 +198,8 @@ void main() {
     ));
 
     color = texture(treeColors, treeIdToTextureCoordinate).rgb;
-    bool isVisible = texture(treeColors, treeIdToTextureCoordinate).a == 1.0;
+    float alpha = texture(treeColors, treeIdToTextureCoordinate).a;
+    bool isVisible = alpha == 1.0 || alpha == 0.5 ;
 
     // DELETED OR INVISIBLE NODE
     if (type == ${NodeTypes.INVALID.toFixed(1)} || !isVisible) {

frontend/javascripts/oxalis/geometries/skeleton.ts

@@ -359,14 +359,20 @@ class Skeleton {
         }
 
         case "createTree": {
-          this.updateTreeColor(update.value.id, update.value.color, update.value.isVisible);
+          this.updateTreeColor(
+            update.value.id,
+            update.value.color,
+            update.value.isVisible,
+            update.value.edgesAreVisible,
+          );
           break;
         }
 
-        case "updateTreeVisibility": {
+        case "updateTreeVisibility":
+        case "updateTreeEdgesVisibility": {
           const { treeId } = update.value;
           const tree = skeletonTracing.trees[treeId];
-          this.updateTreeColor(treeId, tree.color, tree.isVisible);
+          this.updateTreeColor(treeId, tree.color, tree.isVisible, tree.edgesAreVisible);
           break;
         }
 
@@ -399,7 +405,7 @@ class Skeleton {
           });
 
           if (tree.color !== prevTree.color) {
-            this.updateTreeColor(treeId, update.value.color, tree.isVisible);
+            this.updateTreeColor(treeId, update.value.color, tree.isVisible, tree.edgesAreVisible);
           }
 
           break;
@@ -499,7 +505,7 @@ class Skeleton {
       this.createEdge(tree.treeId, source, target);
     }
 
-    this.updateTreeColor(tree.treeId, tree.color, tree.isVisible);
+    this.updateTreeColor(tree.treeId, tree.color, tree.isVisible, tree.edgesAreVisible);
   }
 
   /**
@@ -679,14 +685,20 @@ class Skeleton {
    * Updates a node/edge's color based on the tree color. Colors are stored in
    * a texture shared between the node and edge shader.
    */
-  updateTreeColor(treeId: number, color: Vector3, isVisible: boolean = true) {
-    const rgba = this.getTreeRGBA(color, isVisible);
+  updateTreeColor(
+    treeId: number,
+    color: Vector3,
+    isVisible: boolean = true,
+    edgesAreVisible: boolean = true,
+  ) {
+    const rgba = this.getTreeRGBA(color, isVisible, edgesAreVisible);
     this.treeColorTexture.image.data.set(rgba, treeId * 4);
     this.treeColorTexture.needsUpdate = true;
   }
 
-  getTreeRGBA(color: Vector3, isVisible: boolean): Vector4 {
-    return [...color, isVisible ? 1 : 0];
+  getTreeRGBA(color: Vector3, isVisible: boolean, areEdgesVisible: boolean): Vector4 {
+    const alpha = isVisible ? (areEdgesVisible ? 1 : 0.5) : 0;
+    return [...color, alpha];
   }
 }
 

frontend/javascripts/oxalis/model/actions/skeletontracing_actions.tsx

@@ -34,6 +34,7 @@ type ToggleInactiveTreesAction = ReturnType<typeof toggleInactiveTreesAction>;
 type ToggleTreeGroupAction = ReturnType<typeof toggleTreeGroupAction>;
 type RequestDeleteBranchPointAction = ReturnType<typeof requestDeleteBranchPointAction>;
 type CreateTreeAction = ReturnType<typeof createTreeAction>;
+type SetEdgeVisibilityAction = ReturnType<typeof setTreeEdgeVisibilityAction>;
 type AddTreesAndGroupsAction = ReturnType<typeof addTreesAndGroupsAction>;
 type DeleteTreeAction = ReturnType<typeof deleteTreeAction>;
 type ResetSkeletonTracingAction = ReturnType<typeof resetSkeletonTracingAction>;
@@ -85,6 +86,7 @@ export type SkeletonTracingAction =
   | DeleteBranchpointByIdAction
   | RequestDeleteBranchPointAction
   | CreateTreeAction
+  | SetEdgeVisibilityAction
   | AddTreesAndGroupsAction
   | DeleteTreeAction
   | ResetSkeletonTracingAction
@@ -126,6 +128,7 @@ export const SkeletonTracingSaveRelevantActions = [
   "DELETE_BRANCHPOINT_BY_ID",
   "DELETE_BRANCHPOINT",
   "CREATE_TREE",
+  "SET_EDGES_ARE_VISIBLE",
   "ADD_TREES_AND_GROUPS",
   "DELETE_TREE",
   "SET_ACTIVE_TREE",
@@ -275,6 +278,16 @@ export const createTreeAction = (timestamp: number = Date.now()) =>
     timestamp,
   } as const);
 
+export const setTreeEdgeVisibilityAction = (
+  treeId: number | null | undefined,
+  edgesAreVisible: boolean,
+) =>
+  ({
+    type: "SET_EDGES_ARE_VISIBLE",
+    treeId,
+    edgesAreVisible,
+  } as const);
+
 export const addTreesAndGroupsAction = (
   trees: MutableTreeMap,
   treeGroups: Array<TreeGroup> | null | undefined,

frontend/javascripts/oxalis/model/helpers/nml_helpers.ts

@@ -593,6 +593,7 @@ function splitTreeIntoComponents(
       isVisible: tree.isVisible,
       groupId: newGroupId,
       type: tree.type,
+      edgesAreVisible: tree.edgesAreVisible,
     };
     newTrees.push(newTree);
   }
@@ -721,6 +722,7 @@ export function parseNml(nmlString: string): Promise<{
               isVisible: _parseFloat(attr, "color.a") !== 0,
               groupId: groupId >= 0 ? groupId : DEFAULT_GROUP_ID,
               type: _parseTreeType(attr, "type", TreeTypeEnum.DEFAULT),
+              edgesAreVisible: _parseBool(attr, "edgesAreVisible", true),
             };
             if (trees[currentTree.treeId] != null)
               throw new NmlParseError(`${messages["nml.duplicate_tree_id"]} ${currentTree.treeId}`);

frontend/javascripts/oxalis/model/reducers/skeletontracing_reducer.ts

@@ -956,6 +956,26 @@ function SkeletonTracingReducer(state: OxalisState, action: Action): OxalisState
             .getOrElse(state);
         }
 
+        case "SET_EDGES_ARE_VISIBLE": {
+          return getTree(skeletonTracing, action.treeId)
+            .map((tree) => {
+              return update(state, {
+                tracing: {
+                  skeleton: {
+                    trees: {
+                      [tree.treeId]: {
+                        edgesAreVisible: {
+                          $set: action.edgesAreVisible,
+                        },
+                      },
+                    },
+                  },
+                },
+              });
+            })
+            .getOrElse(state);
+        }
+
         case "CREATE_COMMENT": {
           const { commentText, nodeId, treeId } = action;
           return getNodeAndTree(skeletonTracing, nodeId, treeId)

frontend/javascripts/oxalis/model/reducers/skeletontracing_reducer_helpers.ts

@@ -360,6 +360,7 @@ function splitTreeByNodes(
             isVisible: true,
             groupId: activeTree.groupId,
             type: activeTree.type,
+            edgesAreVisible: true,
           };
         } else {
           const immutableNewTree = createTree(
@@ -482,6 +483,7 @@ export function createTree(
   addToActiveGroup: boolean = true,
   name?: string,
   type: TreeType = TreeTypeEnum.DEFAULT,
+  edgesAreVisible: boolean = true,
 ): Maybe<Tree> {
   return getSkeletonTracing(state.tracing).chain((skeletonTracing) => {
     // Create a new tree id and name
@@ -510,6 +512,7 @@ export function createTree(
       isVisible: true,
       groupId,
       type,
+      edgesAreVisible,
     };
     return Maybe.Just(tree);
   });
@@ -845,6 +848,7 @@ export function createMutableTreeMapFromTreeArray(
         timestamp: tree.createdTimestamp,
         groupId: tree.groupId,
         type: tree.type != null ? tree.type : TreeTypeEnum.DEFAULT,
+        edgesAreVisible: tree.edgesAreVisible != null ? tree.edgesAreVisible : true,
       }),
     ),
     "treeId",

frontend/javascripts/oxalis/model/sagas/skeletontracing_saga.ts

@@ -23,6 +23,7 @@ import {
   deleteNode,
   deleteTree,
   updateTreeVisibility,
+  updateTreeEdgesVisibility,
   updateNode,
   updateSkeletonTracing,
   updateUserBoundingBoxes,
@@ -583,6 +584,9 @@ export function* diffTrees(
       if (prevTree.isVisible !== tree.isVisible) {
         yield updateTreeVisibility(tree);
       }
+      if (prevTree.edgesAreVisible !== tree.edgesAreVisible) {
+        yield updateTreeEdgesVisibility(tree);
+      }
     }
   }
 }

frontend/javascripts/oxalis/model/sagas/update_actions.ts

@@ -22,6 +22,7 @@ export type MergeTreeUpdateAction = ReturnType<typeof mergeTree>;
 export type CreateNodeUpdateAction = ReturnType<typeof createNode>;
 export type UpdateNodeUpdateAction = ReturnType<typeof updateNode>;
 export type UpdateTreeVisibilityUpdateAction = ReturnType<typeof updateTreeVisibility>;
+export type UpdateTreeEdgesVisibilityUpdateAction = ReturnType<typeof updateTreeEdgesVisibility>;
 export type UpdateTreeGroupVisibilityUpdateAction = ReturnType<typeof updateTreeGroupVisibility>;
 export type DeleteNodeUpdateAction = ReturnType<typeof deleteNode>;
 export type CreateEdgeUpdateAction = ReturnType<typeof createEdge>;
@@ -64,6 +65,7 @@ export type UpdateAction =
   | DeleteSegmentUpdateAction
   | UpdateBucketUpdateAction
   | UpdateTreeVisibilityUpdateAction
+  | UpdateTreeEdgesVisibilityUpdateAction
   | UpdateTreeGroupVisibilityUpdateAction
   | RevertToVersionUpdateAction
   | UpdateSegmentGroupsUpdateAction
@@ -115,6 +117,7 @@ export function createTree(tree: Tree) {
       groupId: tree.groupId,
       isVisible: tree.isVisible,
       type: tree.type,
+      edgesAreVisible: tree.edgesAreVisible,
     },
   } as const;
 }
@@ -140,6 +143,7 @@ export function updateTree(tree: Tree) {
       groupId: tree.groupId,
       isVisible: tree.isVisible,
       type: tree.type,
+      edgesAreVisible: tree.edgesAreVisible,
     },
   } as const;
 }
@@ -153,6 +157,16 @@ export function updateTreeVisibility(tree: Tree) {
     },
   } as const;
 }
+export function updateTreeEdgesVisibility(tree: Tree) {
+  const { treeId, edgesAreVisible } = tree;
+  return {
+    name: "updateTreeEdgesVisibility",
+    value: {
+      treeId,
+      edgesAreVisible,
+    },
+  } as const;
+}
 export function updateTreeGroupVisibility(groupId: number | null | undefined, isVisible: boolean) {
   return {
     name: "updateTreeGroupVisibility",

frontend/javascripts/oxalis/store.ts

@@ -141,6 +141,7 @@ export type MutableTree = {
   isVisible: boolean;
   nodes: MutableNodeMap;
   type: TreeType;
+  edgesAreVisible: boolean;
 };
 export type Tree = {
   readonly treeId: number;
@@ -154,6 +155,7 @@ export type Tree = {
   readonly isVisible: boolean;
   readonly nodes: NodeMap;
   readonly type: TreeType;
+  readonly edgesAreVisible: boolean;
 };
 export type TreeGroupTypeFlat = {
   readonly name: string;

frontend/javascripts/oxalis/view/right-border-tabs/connectome_tab/connectome_view.tsx

@@ -154,6 +154,7 @@ const synapseTreeCreator = (synapseId: number, synapseType: string): MutableTree
   isVisible: true,
   groupId: null,
   type: TreeTypeEnum.DEFAULT,
+  edgesAreVisible: true,
 });
 
 const synapseNodeCreator = (synapseId: number, synapsePosition: Vector3): MutableNode => ({

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

@@ -53,6 +53,7 @@ import {
   deleteTreeAction,
   toggleInactiveTreesAction,
   shuffleAllTreeColorsAction,
+  setTreeEdgeVisibilityAction,
 } from "oxalis/model/actions/skeletontracing_actions";
 import messages from "messages";
 import { formatNumberToLength, formatLengthAsVx } from "libs/format_utils";
@@ -89,6 +90,7 @@ type Props = OwnProps & {
   onBatchActions: (arg0: Array<Action>, arg1: string) => void;
   onToggleHideInactiveTrees: () => void;
   onShuffleAllTreeColors: () => void;
+  onSetTreeEdgesVisibility: (treeId: number, edgesAreVisible: boolean) => void;
 };
 type State = {
   prevProps: Props | null | undefined;
@@ -622,6 +624,19 @@ class TreeHierarchyView extends React.PureComponent<Props, State> {
               icon: <i className="fas fa-eye" />,
               label: "Hide/Show all other trees",
             },
+            {
+              key: "hideTreeEdges",
+              onClick: () => {
+                this.props.onSetActiveTree(tree.treeId);
+                this.props.onSetTreeEdgesVisibility(tree.treeId, !tree.edgesAreVisible);
+                this.handleTreeDropdownMenuVisibility(tree.treeId, false);
+              },
+              title: "Hide/Show edges of this tree",
+              icon: (
+                <img src="/assets/images/hide-skeleton-edges-icon.svg" alt="Hide Tree Edges Icon" />
+              ),
+              label: "Hide/Show edges of this tree",
+            },
           ],
         };
       };
@@ -798,6 +813,10 @@ const mapDispatchToProps = (dispatch: Dispatch<any>) => ({
     dispatch(toggleTreeAction(treeId));
   },
 
+  onSetTreeEdgesVisibility(treeId: number, edgesAreVisible: boolean) {
+    dispatch(setTreeEdgeVisibilityAction(treeId, edgesAreVisible));
+  },
+
   onToggleTreeGroup(groupId: number) {
     dispatch(toggleTreeGroupAction(groupId));
   },

frontend/javascripts/oxalis/view/version_entry.tsx

@@ -25,6 +25,7 @@ import type {
   RevertToVersionUpdateAction,
   UpdateNodeUpdateAction,
   UpdateTreeVisibilityUpdateAction,
+  UpdateTreeEdgesVisibilityUpdateAction,
   UpdateTreeGroupVisibilityUpdateAction,
   CreateEdgeUpdateAction,
   DeleteEdgeUpdateAction,
@@ -132,6 +133,10 @@ const descriptionFns: Record<ServerUpdateAction["name"], (...args: any) => Descr
     description: `Updated the visibility of the tree with id ${action.value.treeId}.`,
     icon: <EyeOutlined />,
   }),
+  updateTreeEdgesVisibility: (action: UpdateTreeEdgesVisibilityUpdateAction): Description => ({
+    description: `Updated the visibility of the edges of the tree with id ${action.value.treeId}.`,
+    icon: <img src="/assets/images/hide-skeleton-edges-icon.svg" alt="Hide Tree Edges Icon" />,
+  }),
   updateTreeGroupVisibility: (action: UpdateTreeGroupVisibilityUpdateAction): Description => ({
     description: `Updated the visibility of the group with id ${
       action.value.treeGroupId != null ? action.value.treeGroupId : MISSING_GROUP_ID