Fix active tree's comments not getting scrolled into view when switching to comments tab

CHANGELOG.unreleased.md

@@ -49,6 +49,7 @@ For upgrade instructions, please check the [migration guide](MIGRATIONS.released
 ### Fixed
 - Fixed a bug that allowed the default newly created bounding box to appear outside the dataset. In case the whole bounding box would be outside it is created regardless. [#7892](https://github.com/scalableminds/webknossos/pull/7892)
 - Fixed a rare bug that could cause hanging dataset uploads. [#7932](https://github.com/scalableminds/webknossos/pull/7932)
+- Fixed that comments of the active tree were not scrolled into view in some cases when switching to the comments tab. [8022](https://github.com/scalableminds/webknossos/pull/8022)
 - Fixed that trashcan icons to remove layers during remote dataset upload were floating above the navbar. [#7954](https://github.com/scalableminds/webknossos/pull/7954)
 - Fixed that the flood-filling action was available in the context menu although an editable mapping is active. Additionally volume related actions were removed from the context menu if only a skeleton layer is visible. [#7975](https://github.com/scalableminds/webknossos/pull/7975)
 - Fixed that activating the skeleton tab would always change the active position to the active node. [#7958](https://github.com/scalableminds/webknossos/pull/7958)

frontend/javascripts/oxalis/view/components/dom_visibility_observer.ts

@@ -4,6 +4,7 @@ import * as React from "react";
 // This allows to not render performance-heavy components or to disable shortcuts if their flex layout tab is not visible.
 type Props = {
   targetId: string;
+  onChange?: (isVisibleInDom: boolean, wasEverVisibleInDom: boolean) => void;
   children: (isVisibleInDom: boolean, wasEverVisibleInDom: boolean) => React.ReactNode;
 };
 type State = {
@@ -47,6 +48,7 @@ export default class DomVisibilityObserver extends React.Component<Props, State>
           isVisibleInDom,
           wasEverVisibleInDom: oldState.wasEverVisibleInDom || isVisibleInDom,
         }));
+        this.props.onChange?.(isVisibleInDom, this.state.wasEverVisibleInDom);
       };
 
       this.observer = new IntersectionObserver(callback, {});

frontend/javascripts/oxalis/view/right-border-tabs/comment_tab/comment_tab_view.tsx

@@ -103,6 +103,7 @@ function CommentTabView(props: Props) {
   const [collapsedTreeIds, setCollapsedTreeIds] = useState<React.Key[]>([]);
   const [highlightedNodeIds, setHighlightedNodeIds] = useState<React.Key[]>([]);
   const [isMarkdownModalOpen, setIsMarkdownModalOpen] = useState(false);
+  const [isVisibleInDom, setIsVisibleInDom] = useState(true);
 
   const [keyboard, setKeyboard] = useState<InputKeyboard | null>(null);
   const nextCommentRef = useRef<(arg0?: boolean) => void>();
@@ -159,8 +160,10 @@ function CommentTabView(props: Props) {
   useEffect(() => {
     // If the activeNode has a comment, scroll to it,
     // otherwise scroll to the activeTree
-    scrollToActiveCommentOrTree(activeComment, props.skeletonTracing.activeTreeId);
-  }, [activeComment, props.skeletonTracing.activeTreeId]);
+    if (isVisibleInDom) {
+      scrollToActiveCommentOrTree(activeComment, props.skeletonTracing.activeTreeId);
+    }
+  }, [activeComment, props.skeletonTracing.activeTreeId, isVisibleInDom]);
 
   function scrollToActiveCommentOrTree(
     activeComment: MutableCommentType | undefined,
@@ -177,13 +180,13 @@ function CommentTabView(props: Props) {
       if (treeRef.current)
         if (activeComment) {
           const commentNodeKey = `comment-${activeComment.nodeId}`;
-          treeRef.current.scrollTo({ key: commentNodeKey, align: "auto" });
+          treeRef.current.scrollTo({ key: commentNodeKey, align: "top" });
           setHighlightedNodeIds([commentNodeKey]);
         } else if (activeTreeId) {
           const treeNodeKey = activeTreeId.toString();
           treeRef.current.scrollTo({
             key: treeNodeKey,
-            align: "auto",
+            align: "top",
           });
           setHighlightedNodeIds([treeNodeKey]);
         }
@@ -430,7 +433,12 @@ function CommentTabView(props: Props) {
         height: "inherit",
       }}
     >
-      <DomVisibilityObserver targetId={commentTabId}>
+      <DomVisibilityObserver
+        targetId={commentTabId}
+        onChange={(isVisible) => {
+          setIsVisibleInDom(isVisible);
+        }}
+      >
         {(isVisibleInDom) => {
           if (!isVisibleInDom && !isMarkdownModalOpen) {
             return null;

tools/postgres/schema.sql

@@ -545,7 +545,6 @@ CREATE TABLE webknossos.emailVerificationKeys(
 CREATE TYPE webknossos.AI_MODEL_CATEGORY AS ENUM ('em_neurons', 'em_nuclei');
 
 CREATE TABLE webknossos.aiModels(
-   -- todo foreign keys
   _id CHAR(24) PRIMARY KEY,
   _organization CHAR(24) NOT NULL,
   _dataStore VARCHAR(256) NOT NULL, -- redundant to job, but must be available for jobless models