Add a show/hide toggle for all annotations in a group

histomicsui/web_client/panels/AnnotationSelector.js

@@ -35,6 +35,7 @@ var AnnotationSelector = Panel.extend({
         'input #h-annotation-opacity': '_changeGlobalOpacity',
         'input #h-annotation-fill-opacity': '_changeGlobalFillOpacity',
         'click .h-annotation-select-by-region': 'selectAnnotationByRegion',
+        'click .h-toggle-group-annotations': 'toggleGroupAnnotations',
         'click .h-annotation-group-name': '_toggleExpandGroup'
     }),
 
@@ -624,6 +625,27 @@ var AnnotationSelector = Panel.extend({
         this.trigger('h:annotationFillOpacity', this._fillOpacity);
     },
 
+    toggleGroupAnnotations(evt) {
+        // prevent the click from also expanding/collapsing the group
+        evt.stopPropagation();
+        let group = $(evt.currentTarget).closest('.h-annotation-group').data('groupName');
+        // The ungrouped annotations are displayed under the 'Other' group, but
+        // their group value is null
+        group = group === 'Other' ? null : group;
+        const annotations = this.collection.filter((model) => _.contains(model.get('groups'), group));
+        const allDisplayed = annotations.length && annotations.every((model) => model.get('displayed'));
+
+        this._showAllAnnotationsState = false;
+        annotations.forEach((model) => {
+            model.set('displayed', !allDisplayed);
+            if (allDisplayed) {
+                model.unset('highlight');
+                this._deselectAnnotationElements(model);
+                this._deactivateAnnotation(model);
+            }
+        });
+    },
+
     _toggleExpandGroup(evt) {
         const name = $(evt.currentTarget).parent().data('groupName');
         if (this._expandedGroups.has(name)) {

histomicsui/web_client/stylesheets/panels/annotationSelector.styl

@@ -67,6 +67,11 @@
     white-space nowrap
     min-width 0
 
+  .h-toggle-group-annotations
+    flex-shrink 0
+    cursor pointer
+    color #6b6b6b
+
   .h-annotation-group-legend
     width 18px
     height 18px

histomicsui/web_client/templates/panels/annotationSelector.pug

@@ -28,6 +28,7 @@ block content
       var annotations = annotationGroups[groupName];
       var expanded = expandedGroups.has(groupName);
       var expandedClass = expanded ? 'h-group-expanded' : 'h-group-collapsed';
+      var groupDisplayed = annotations.length && annotations.every((a) => a.get('displayed'));
       var samplestyle={};
       annotations.some((a) => {
         var elems = (a.get('annotation') || {}).elements;
@@ -57,6 +58,10 @@ block content
           i.icon-folder
         .h-annotation-group-text
           = groupName
+        if groupDisplayed
+          span.icon-eye.h-toggle-group-annotations(title='Hide all annotations in this group')
+        else
+          span.icon-eye-off.h-toggle-group-annotations(title='Show all annotations in this group')
         span.h-annotation-group-legend(style=samplestyle)
       if expanded
         each annotation in annotations

tests/web_client_specs/annotationSpec.js

@@ -884,6 +884,32 @@ girderTest.promise.done(function () {
                 }, 'annotation to toggle on');
             });
 
+            it('toggle visibility of all annotations in a group', function () {
+                var $group = $('.h-annotation-selector .h-annotation-group[data-group-name="Other"]');
+                var wasExpanded = $group.hasClass('h-group-expanded');
+
+                runs(function () {
+                    expect($group.find('.icon-eye.h-toggle-group-annotations').length).toBe(1);
+                    $group.find('.h-toggle-group-annotations').click();
+                });
+                waitsFor(function () {
+                    $group = $('.h-annotation-selector .h-annotation-group[data-group-name="Other"]');
+                    return $group.find('.icon-eye-off.h-toggle-group-annotations').length === 1 &&
+                           $group.find('.icon-eye.h-toggle-annotation').length === 0;
+                }, 'all annotations in group to hide');
+
+                runs(function () {
+                    // clicking the group toggle must not collapse/expand the group
+                    expect($group.hasClass('h-group-expanded')).toBe(wasExpanded);
+                    $group.find('.h-toggle-group-annotations').click();
+                });
+                waitsFor(function () {
+                    $group = $('.h-annotation-selector .h-annotation-group[data-group-name="Other"]');
+                    return $group.find('.icon-eye.h-toggle-group-annotations').length === 1 &&
+                           $group.find('.icon-eye-off.h-toggle-annotation').length === 0;
+                }, 'all annotations in group to show');
+            });
+
             it('select annotations by rect - no hits', function () {
                 var interactor = huiTest.geojsMap().interactor();
                 expect($('.h-annotation-select-by-region').length).toBe(1);