Show clicked Bounding Box in BB-Tab

frontend/javascripts/oxalis/view/components/setting_input_views.tsx

@@ -378,7 +378,6 @@ type UserBoundingBoxInputProps = {
   disabled: boolean;
   isLockedByOwner: boolean;
   isOwner: boolean;
-  id?: string | undefined;
 };
 type State = {
   isEditing: boolean;
@@ -506,7 +505,7 @@ export class UserBoundingBoxInput extends React.PureComponent<UserBoundingBoxInp
       isOwner,
     );
     return (
-      <div id={this.props.id}>
+      <>
         <Row
           style={{
             marginTop: 10,
@@ -602,7 +601,7 @@ export class UserBoundingBoxInput extends React.PureComponent<UserBoundingBoxInp
             </Tooltip>
           </Col>
         </Row>
-      </div>
+      </>
     );
   }
 }

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

@@ -1,7 +1,7 @@
 import { Table, Tooltip, Typography } from "antd";
 import { PlusSquareOutlined } from "@ant-design/icons";
 import { useSelector, useDispatch } from "react-redux";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import _ from "lodash";
 import { UserBoundingBoxInput } from "oxalis/view/components/setting_input_views";
 import { Vector3, Vector6, BoundingBoxType, ControlModeEnum } from "oxalis/constants";
@@ -19,6 +19,7 @@ import DownloadModalView from "../action-bar/download_modal_view";
 import { APIJobType } from "types/api_flow_types";
 
 export default function BoundingBoxTab() {
+  const bboxTableRef: Parameters<typeof Table>[0]["ref"] = useRef(null);
   const [selectedBoundingBoxForExport, setSelectedBoundingBoxForExport] =
     useState<UserBoundingBox | null>(null);
   const tracing = useSelector((state: OxalisState) => state.tracing);
@@ -102,22 +103,12 @@ export default function BoundingBoxTab() {
     APIJobType.EXPORT_TIFF,
   );
 
-  const bboxInputId = (id: number) => `bounding-box-input-${id}`;
-
   // biome-ignore lint/correctness/useExhaustiveDependencies: Always try to scroll the active bounding box into view.
   useEffect(() => {
-    if (activeBoundingBoxId == null) {
-      return;
+    if (bboxTableRef.current != null && activeBoundingBoxId != null) {
+      bboxTableRef.current.scrollTo({ key: activeBoundingBoxId });
     }
-    const activeBoundingBoxInput = document.getElementById(bboxInputId(activeBoundingBoxId));
-    if (activeBoundingBoxInput) {
-      activeBoundingBoxInput.scrollIntoView({
-        behavior: "smooth",
-        block: "nearest",
-        inline: "nearest",
-      });
-    }
-  }, [activeBoundingBoxId]);
+  }, [activeBoundingBoxId, bboxTableRef.current]);
 
   const boundingBoxWrapperTableColumns = [
     {
@@ -126,7 +117,6 @@ export default function BoundingBoxTab() {
       render: (_id: number, bb: UserBoundingBox) => (
         <UserBoundingBoxInput
           key={bb.id}
-          id={bboxInputId(bb.id)}
           tooltipTitle="Format: minX, minY, minZ, width, height, depth"
           value={Utils.computeArrayFromBoundingBox(bb.boundingBox)}
           color={bb.color}
@@ -148,18 +138,31 @@ export default function BoundingBoxTab() {
     },
   ];
 
+  const maybeAddBoundingBoxButton = allowUpdate ? (
+    <div style={{ display: "inline-block", width: "100%", textAlign: "center" }}>
+      <Tooltip title="Click to add another bounding box.">
+        <PlusSquareOutlined
+          onClick={addNewBoundingBox}
+          style={{
+            cursor: "pointer",
+            marginBottom: userBoundingBoxes.length === 0 ? 12 : 0,
+          }}
+        />
+      </Tooltip>
+    </div>
+  ) : null;
+
   return (
     <div
       className="padded-tab-content"
       style={{
         minWidth: 300,
       }}
     >
-      {/* In view mode, it's okay to render an empty list, since there will be
-          an explanation below, anyway.
-      */}
-      {userBoundingBoxes.length > 0 || isViewMode ? (
+      {/* Don't render a table in view mode. */}
+      {isViewMode ? null : userBoundingBoxes.length > 0 ? (
         <Table
+          ref={bboxTableRef}
           columns={boundingBoxWrapperTableColumns}
           dataSource={userBoundingBoxes}
           pagination={false}
@@ -170,24 +173,15 @@ export default function BoundingBoxTab() {
             selectedRowKeys: activeBoundingBoxId != null ? [activeBoundingBoxId] : [],
             getCheckboxProps: () => ({ disabled: true }),
           }}
+          footer={() => maybeAddBoundingBoxButton}
         />
       ) : (
-        <div>No Bounding Boxes created yet.</div>
+        <>
+          <div>No Bounding Boxes created yet.</div>
+          {maybeAddBoundingBoxButton}
+        </>
       )}
       <Typography.Text type="secondary">{maybeUneditableExplanation}</Typography.Text>
-      {allowUpdate ? (
-        <div style={{ display: "inline-block", width: "100%", textAlign: "center" }}>
-          <Tooltip title="Click to add another bounding box.">
-            <PlusSquareOutlined
-              onClick={addNewBoundingBox}
-              style={{
-                cursor: "pointer",
-                marginBottom: userBoundingBoxes.length === 0 ? 12 : 0,
-              }}
-            />
-          </Tooltip>
-        </div>
-      ) : null}
       {selectedBoundingBoxForExport != null ? (
         <DownloadModalView
           isOpen

frontend/stylesheets/trace_view/_right_menu.less

@@ -235,4 +235,8 @@
     // Hiding the extra checkbox column rendered due to using rowSelection in the table wrapping the bounding boxes.
     display: none;
   }
+  .ant-table-footer {
+    background-color: transparent;
+    padding: 8px;
+  }
 }