Merge pull request #372 from sgratzl/sgratzl/annotationbadge

add annotation badge to large image preview

girder_annotation/girder_large_image_annotation/web_client/stylesheets/itemList.styl

@@ -0,0 +1,27 @@
+.large_image_thumbnail
+  position relative
+
+.large_image_annotation_badge
+  position absolute
+  top 0
+  right 0
+  transform scale(1)translate(50%, -50%)
+  transform-origin 100% 0
+
+  height 20px
+  padding 0 6px
+  z-index 10
+  min-width 20px
+  display flex
+  align-items center
+  justify-content center
+  font-size 80%
+
+  line-height 1
+
+  background-color lightgrey
+  color black
+  border-radius 10px
+
+  &.hidden
+    display none

girder_annotation/girder_large_image_annotation/web_client/views/index.js

@@ -2,6 +2,7 @@ import * as viewers from '@girder/large_image/views/imageViewerWidget';
 
 import ConfigView from './configView';
 import ImageViewerSelectWidget from './imageViewerSelectWidget';
+import ItemListWidget from './itemList';
 import ImageViewerWidgetAnnotationExtension from './imageViewerWidget/base';
 import * as extensions from './imageViewerWidget';
 
@@ -14,5 +15,6 @@ for (var key in viewers) {
 
 export {
     ConfigView,
-    ImageViewerSelectWidget
+    ImageViewerSelectWidget,
+    ItemListWidget
 };

girder_annotation/girder_large_image_annotation/web_client/views/itemList.js

@@ -0,0 +1,58 @@
+import $ from 'jquery';
+import _ from 'underscore';
+
+import { wrap } from '@girder/core/utilities/PluginUtils';
+import ItemListWidget from '@girder/core/views/widgets/ItemListWidget';
+
+import largeImageAnnotationConfig from './configView';
+import AnnotationCollection from '../collections/AnnotationCollection';
+
+import '../stylesheets/itemList.styl';
+
+wrap(ItemListWidget, 'render', function (render) {
+    render.apply(this, _.rest(arguments));
+
+    function addLargeImageAnnotationBadge(item, parent) {
+        const collection = new AnnotationCollection([]);
+        collection.fetch({
+            itemId: item.id
+        }).done(() => {
+            const thumbnail = $('a[g-item-cid="' + item.cid + '"] .large_image_thumbnail', parent).first();
+
+            let badge = thumbnail.find('.large_image_annotation_badge');
+            if (badge.length === 0) {
+                badge = $(`<div class="large_image_annotation_badge"></div>`).appendTo(thumbnail);
+            }
+            // update badge
+            const numAnnotations = collection.length;
+            badge
+                .attr('title', `${numAnnotations} Annotation${numAnnotations === 1 ? '' : 's'}`)
+                .text(numAnnotations)
+                .toggleClass('hidden', numAnnotations === 0);
+        });
+    }
+
+    largeImageAnnotationConfig.getSettings((settings) => {
+        // don't render or already rendered
+        if (settings['large_image.show_thumbnails'] === false || this.$('.large_image_annotation_badge').length > 0) {
+            return;
+        }
+        const items = this.collection.toArray();
+        const parent = this.$el;
+        const hasAnyLargeImage = _.some(items, (item) => item.has('largeImage'));
+
+        if (!hasAnyLargeImage) {
+            return;
+        }
+
+        _.each(items, (item) => {
+            if (item.get('largeImage')) {
+                item.getAccessLevel(function () {
+                    addLargeImageAnnotationBadge(item, parent);
+                });
+            }
+        });
+    });
+});
+
+export default ItemListWidget;