Duplicate skeletons (#8662)

### Steps to test:
- Open an annotation, add some trees (also within nested groups)
- open their context menu -> duplicate tree
- in the same group, a new tree with new nodes (same positions) should
appear
- all tree actions should be working on original and copied tree
- check that NML import of skeletons is still working fine (as this uses
the same action that was adjusted in this PR)

### Issues:
- fixes #5291

Author: knollengewaechs

CHANGELOG.unreleased.md

@@ -11,6 +11,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 [Commits](https://github.com/scalableminds/webknossos/compare/25.06.1...HEAD)
 
 ### Added
+- Added the ability to duplicate trees in skeleton annotations. Users can create a copy of any tree (including all nodes, edges, and properties) via the context menu in the skeleton tab. [#8662](https://github.com/scalableminds/webknossos/pull/8662)
 - Meshes are now reloaded using their previous opacity value. [#8622](https://github.com/scalableminds/webknossos/pull/8622)
 
 ### Changed

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

@@ -327,12 +327,18 @@ export const addTreesAndGroupsAction = (
   trees: MutableTreeMap,
   treeGroups: Array<TreeGroup> | null | undefined,
   treeIdsCallback: ((ids: number[]) => void) | undefined = undefined,
+  assignTreeToNewGroupId: boolean = true,
 ) =>
+  // If assignTreeToNewGroupId is false, the given group id of a tree will be kept. This is useful
+  // when trees are duplicated, as the copied tree should be in the same group as the original tree.
+  // If assignTreeToNewGroupId is true, the tree will be assigned to a new group id, as the original
+  // group id might already be used by another group.
   ({
     type: "ADD_TREES_AND_GROUPS",
     trees,
     treeGroups: treeGroups || [],
     treeIdsCallback,
+    assignNewGroupId: assignTreeToNewGroupId,
   }) as const;
 
 export const deleteTreeAction = (treeId?: number, suppressActivatingNextNode: boolean = false) =>

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

@@ -933,9 +933,14 @@ function SkeletonTracingReducer(state: WebknossosState, action: Action): Webknos
     }
 
     case "ADD_TREES_AND_GROUPS": {
-      const { trees, treeGroups } = action;
+      const { trees, treeGroups, assignNewGroupId } = action;
       const treesWithNames = ensureTreeNames(state, trees);
-      const treesResult = addTreesAndGroups(skeletonTracing, treesWithNames, treeGroups);
+      const treesResult = addTreesAndGroups(
+        skeletonTracing,
+        treesWithNames,
+        treeGroups,
+        assignNewGroupId,
+      );
       if (treesResult == null) {
         return state;
       }

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

@@ -557,6 +557,7 @@ export function addTreesAndGroups(
   skeletonTracing: SkeletonTracing,
   trees: MutableTreeMap,
   treeGroups: MutableTreeGroup[],
+  assignNewGroupId: boolean = true,
 ): [MutableTreeMap, TreeGroup[], number] | null {
   const hasInvalidTreeIds = trees
     .keys()
@@ -627,8 +628,11 @@ export function addTreesAndGroups(
       nodeId: idMap[bp.nodeId],
     }));
 
-    // Assign the new group id to the tree if the tree belongs to a group
-    tree.groupId = tree.groupId != null ? groupIdMap[tree.groupId] : tree.groupId;
+    // Assign the new group id to the tree if the tree belongs to a group that was newly added
+    // or keep the old group id if the tree should be assigned to an existing group.
+    if (tree.groupId != null && assignNewGroupId) {
+      tree.groupId = groupIdMap[tree.groupId];
+    }
     tree.treeId = newTreeId;
 
     newTrees.mutableSet(newTreeId, tree);

frontend/javascripts/viewer/view/right-border-tabs/trees_tab/tree_hierarchy_renderers.tsx

@@ -24,6 +24,7 @@ import FastTooltip from "components/fast_tooltip";
 import { formatLengthAsVx, formatNumberToLength } from "libs/format_utils";
 import messages from "messages";
 import {
+  addTreesAndGroupsAction,
   deleteTreeAction,
   setActiveTreeAction,
   setActiveTreeGroupAction,
@@ -39,7 +40,7 @@ import {
   toggleInactiveTreesAction,
 } from "viewer/model/actions/skeletontracing_actions";
 import { getMaximumGroupId } from "viewer/model/reducers/skeletontracing_reducer_helpers";
-import type { Tree, TreeGroup, TreeMap } from "viewer/model/types/tree_types";
+import { type Tree, type TreeGroup, TreeMap } from "viewer/model/types/tree_types";
 import { Store, api } from "viewer/singletons";
 import EditableTextLabel from "viewer/view/components/editable_text_label";
 import {
@@ -147,6 +148,19 @@ const createMenuForTree = (tree: Tree, props: Props, hideContextMenu: () => void
         icon: <i className="fas fa-adjust" />,
         label: "Shuffle Tree Color",
       },
+      {
+        key: "duplicateTree",
+        onClick: () => {
+          const copyOfTree = { ..._.cloneDeep(tree), name: `${tree.name} (copy)` };
+          const treeMap = new TreeMap([[tree.treeId, copyOfTree]]);
+          Store.dispatch(addTreesAndGroupsAction(treeMap, null, undefined, false));
+          hideContextMenu();
+        },
+        title: "Duplicate Tree",
+        disabled: isEditingDisabled,
+        icon: <i className="fas fa-clone" />,
+        label: "Duplicate Tree",
+      },
       {
         key: "deleteTree",
         onClick: () => {