Make comment app track which tab comments are on

client/src/components/CommentApp/comments.js

@@ -134,6 +134,9 @@ class BasicFieldLevelAnnotation {
       );
     });
   }
+  getTab() {
+    return this.fieldNode.closest('section[data-tab]')?.getAttribute('data-tab');
+  }
   getDesiredPosition() {
     return (
       this.fieldNode.getBoundingClientRect().top +

client/src/components/CommentApp/components/Comment/index.tsx

@@ -78,6 +78,7 @@ export interface CommentProps {
   store: Store;
   comment: Comment;
   isFocused: boolean;
+  isVisible: boolean;
   layout: LayoutController;
   user: Author | null;
   strings: TranslatableStrings;
@@ -541,6 +542,7 @@ export default class CommentComponent extends React.Component<CommentProps> {
           position: 'absolute',
           top: `${top}px`,
           right: `${right}px`,
+          display: this.props.isVisible ? 'block' : 'none',
         }}
         data-comment-id={this.props.comment.localId}
         onClick={onClick}
@@ -565,10 +567,13 @@ export default class CommentComponent extends React.Component<CommentProps> {
       }
 
       this.props.layout.setCommentElement(this.props.comment.localId, element);
-      this.props.layout.setCommentHeight(
-        this.props.comment.localId,
-        element.offsetHeight
-      );
+
+      if (this.props.isVisible) {
+        this.props.layout.setCommentHeight(
+          this.props.comment.localId,
+          element.offsetHeight
+        );
+      }
     }
   }
 
@@ -580,7 +585,7 @@ export default class CommentComponent extends React.Component<CommentProps> {
     const element = ReactDOM.findDOMNode(this);
 
     // Keep height up to date so that other comments will be moved out of the way
-    if (element instanceof HTMLElement) {
+    if (this.props.isVisible && element instanceof HTMLElement) {
       this.props.layout.setCommentHeight(
         this.props.comment.localId,
         element.offsetHeight

client/src/components/CommentApp/main.tsx

@@ -108,7 +108,7 @@ function renderCommentsUi(
   strings: TranslatableStrings
 ): React.ReactElement {
   const state = store.getState();
-  const { commentsEnabled, user } = state.settings;
+  const { commentsEnabled, user, currentTab } = state.settings;
   const focusedComment = state.comments.focusedComment;
   let commentsToRender = comments;
 
@@ -125,6 +125,7 @@ function renderCommentsUi(
       user={user}
       comment={comment}
       isFocused={comment.localId === focusedComment}
+      isVisible={layout.getCommentVisible(currentTab, comment.localId)}
       strings={strings}
     />
   ));

client/src/components/CommentApp/utils/annotation.ts

@@ -1,3 +1,4 @@
 export interface Annotation {
+  getTab(): string | null | undefined;
   getDesiredPosition(focused: boolean): number;
 }

client/src/components/CommentApp/utils/layout.ts

@@ -8,6 +8,7 @@ const OFFSET = -50; // How many pixels from the annotation position should the c
 export class LayoutController {
   commentElements: Map<number, HTMLElement> = new Map();
   commentAnnotations: Map<number, Annotation> = new Map();
+  commentTabs: Map<number, string | null> = new Map();
   commentDesiredPositions: Map<number, number> = new Map();
   commentHeights: Map<number, number> = new Map();
   pinnedComment: number | null = null;
@@ -26,6 +27,7 @@ export class LayoutController {
 
   setCommentAnnotation(commentId: number, annotation: Annotation) {
     this.commentAnnotations.set(commentId, annotation);
+    this.commentTabs.set(commentId, annotation.getTab() || null);
     this.updateDesiredPosition(commentId);
     this.isDirty = true;
   }
@@ -178,6 +180,11 @@ export class LayoutController {
     return true;
   }
 
+  getCommentVisible(tab: string | null, commentId: number): boolean {
+    const commentTab = getOrDefault(this.commentTabs, commentId, null);
+    return commentTab === tab;
+  }
+
   getCommentPosition(commentId: number) {
     if (this.commentCalculatedPositions.has(commentId)) {
       return this.commentCalculatedPositions.get(commentId);

client/src/components/Draftail/CommentableEditor/CommentableEditor.tsx

@@ -91,6 +91,9 @@ class DraftailInlineAnnotation implements Annotation {
     }
     return null;
   }
+  getTab() {
+    return this.field.closest('section[data-tab]')?.getAttribute('data-tab');
+  }
   getDesiredPosition(focused = false) {
     // The comment should always aim to float by an annotation, rather than between them
     // so calculate which annotation is the median one by height and float the comment by that