Only show replies that match the search filter or contain at least one visible descendant

Given a thread like this:

    A-
     |- B
        |- C
        |- D
     |- E

Where only 'B' matches the search filter, the rendered output should be:

    View 4 more in conversation
     |- B
        View two more in conversation

h/static/scripts/directive/annotation-thread.js

@@ -7,6 +7,13 @@ function hiddenCount(thread) {
   }, isHidden ? 1 : 0);
 }
 
+function visibleCount(thread) {
+  var isVisible = thread.annotation && thread.visible;
+  return thread.children.reduce(function (count, reply) {
+    return count + visibleCount(reply);
+  }, isVisible ? 1 : 0);
+}
+
 function showAllChildren(thread, showFn) {
   thread.children.forEach(function (child) {
     showFn({thread: child});
@@ -47,6 +54,10 @@ function AnnotationThreadController() {
   this.hiddenCount = function () {
     return hiddenCount(this.thread);
   };
+
+  this.shouldShowReply = function (child) {
+    return visibleCount(child) > 0;
+  };
 }
 
 /**

h/static/scripts/directive/test/annotation-thread-test.js

@@ -9,8 +9,8 @@ function PageObject(element) {
   this.annotations = function () {
     return Array.from(element[0].querySelectorAll('annotation'));
   };
-  this.replies = function () {
-    return Array.from(element[0].querySelectorAll('annotation-thread'));
+  this.visibleReplies = function () {
+    return Array.from(element[0].querySelectorAll('.thread:not(.ng-hide)'));
   };
   this.replyList = function () {
     return element[0].querySelector('.thread-replies');
@@ -39,13 +39,14 @@ describe('annotationThread', function () {
           id: '2',
           annotation: {id: '2', text: 'areply'},
           children: [],
+          visible: true,
         }],
         visible: true,
       },
     });
     var pageObject = new PageObject(element);
     assert.equal(pageObject.annotations().length, 2);
-    assert.equal(pageObject.replies().length, 1);
+    assert.equal(pageObject.visibleReplies().length, 1);
   });
 
   it('does not render hidden threads', function () {
@@ -78,7 +79,7 @@ describe('annotationThread', function () {
       }
     });
     var pageObject = new PageObject(element);
-    assert.equal(pageObject.replies().length, 1);
+    assert.isFalse(pageObject.isHidden(pageObject.replyList()));
   });
 
   it('does not show replies if collapsed', function () {
@@ -100,6 +101,30 @@ describe('annotationThread', function () {
     assert.isTrue(pageObject.isHidden(pageObject.replyList()));
   });
 
+  it('only shows replies that match the search filter', function () {
+    var element = util.createDirective(document, 'annotationThread', {
+      thread: {
+        id: '1',
+        annotation: {id: '1'},
+        visible: true,
+        children: [{
+          id: '2',
+          annotation: {id: '2'},
+          children: [],
+          visible: false,
+        },{
+          id: '3',
+          annotation: {id: '3'},
+          children: [],
+          visible: true,
+        }],
+        collapsed: false,
+      }
+    });
+    var pageObject = new PageObject(element);
+    assert.equal(pageObject.visibleReplies().length, 1);
+  });
+
   describe('#toggleCollapsed', function () {
     it('toggles replies', function () {
       var onChangeCollapsed = sinon.stub();

h/templates/client/annotation_thread.html

@@ -39,7 +39,9 @@
 
 <!-- Replies -->
 <ul class="thread-replies" ng-show="!vm.thread.collapsed">
-  <li class="thread" ng-repeat="child in vm.thread.children track by child.id">
+  <li class="thread"
+      ng-repeat="child in vm.thread.children track by child.id"
+      ng-show="vm.shouldShowReply(child)">
     <annotation-thread
       show-document-info="false"
       thread="child"