diff --git a/girder_annotation/girder_large_image_annotation/web_client/stylesheets/itemList.styl b/girder_annotation/girder_large_image_annotation/web_client/stylesheets/itemList.styl new file mode 100644 index 000000000..0a1641e80 --- /dev/null +++ b/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 diff --git a/girder_annotation/girder_large_image_annotation/web_client/views/index.js b/girder_annotation/girder_large_image_annotation/web_client/views/index.js index 30fe2dc4c..f426bf95d 100644 --- a/girder_annotation/girder_large_image_annotation/web_client/views/index.js +++ b/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 }; diff --git a/girder_annotation/girder_large_image_annotation/web_client/views/itemList.js b/girder_annotation/girder_large_image_annotation/web_client/views/itemList.js new file mode 100644 index 000000000..b64f7857e --- /dev/null +++ b/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 = $(`
`).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;