Improve Bounding Box Selection (#8054)

* add focus bbox to context menu

* focus on click and highlight on hover BBox in move mode

* improve controls for bbox selection in move mode

* improve var naming

* add changelog

---------

Co-authored-by: Philipp Otto <philippotto@users.noreply.github.com>

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/24.08.1...HEAD)
 
 ### Added
+- It is now possible to focus a bounding box in the bounding box tab by clicking its edges in a viewport or via a newly added context menu entry. [#8054](https://github.com/scalableminds/webknossos/pull/8054)
 
 ### Changed
 - Clicking on a bounding box within the bounding box tab centers it within the viewports and focusses it in the list. [#8049](https://github.com/scalableminds/webknossos/pull/8049)

frontend/javascripts/oxalis/controller/combinations/tool_controls.ts

@@ -129,8 +129,12 @@ export class MoveTool {
           if (SkeletonHandlers.handleSelectNode(planeView, pos, plane, isTouch)) {
             return;
           }
+          const clickedEdge = getClosestHoveredBoundingBox(pos, planeId);
+          if (clickedEdge) {
+            Store.dispatch(setActiveUserBoundingBoxId(clickedEdge[0].boxId));
+            return;
+          }
         }
-
         handleClickSegment(pos);
       },
       middleClick: (pos: Point2, _plane: OrthoView, event: MouseEvent) => {
@@ -142,7 +146,18 @@ export class MoveTool {
         MoveHandlers.setMousePosition(center);
         MoveHandlers.zoom(delta, true);
       },
-      mouseMove: MoveHandlers.moveWhenAltIsPressed,
+      mouseMove: (delta: Point2, position: Point2, _id: any, event: MouseEvent) => {
+        MoveHandlers.moveWhenAltIsPressed(delta, position, _id, event);
+        if (planeId !== OrthoViews.TDView) {
+          const hoveredEdgesInfo = getClosestHoveredBoundingBox(position, planeId);
+          if (hoveredEdgesInfo) {
+            const [primaryEdge] = hoveredEdgesInfo;
+            getSceneController().highlightUserBoundingBox(primaryEdge.boxId);
+          } else {
+            getSceneController().highlightUserBoundingBox(null);
+          }
+        }
+      },
       out: () => {
         MoveHandlers.setMousePosition(null);
       },

frontend/javascripts/oxalis/view/context_menu.tsx

@@ -128,7 +128,7 @@ import {
   ensureLayerMappingsAreLoadedAction,
   ensureSegmentIndexIsLoadedAction,
 } from "oxalis/model/actions/dataset_actions";
-import { hideContextMenuAction } from "oxalis/model/actions/ui_actions";
+import { hideContextMenuAction, setActiveUserBoundingBoxId } from "oxalis/model/actions/ui_actions";
 import { getDisabledInfoForTools } from "oxalis/model/accessors/tool_accessor";
 import FastTooltip from "components/fast_tooltip";
 
@@ -834,6 +834,11 @@ function getBoundingBoxMenuOptions({
 
   return [
     newBoundingBoxMenuItem,
+    {
+      key: "focus-in-bbox-tab",
+      label: "Focus in Bounding Box Tab",
+      onClick: () => Store.dispatch(setActiveUserBoundingBoxId(hoveredBBox.id)),
+    },
     {
       key: "change-bounding-box-name",
       label: (