From 2789c585bfb6cda79a341653db96db231a184846 Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Thu, 26 Sep 2019 12:42:39 -0400 Subject: [PATCH 1/4] add annotation badge to large image preview --- .../web_client/stylesheets/itemList.styl | 27 +++++++++ .../web_client/views/index.js | 4 +- .../web_client/views/itemList.js | 60 +++++++++++++++++++ 3 files changed, 90 insertions(+), 1 deletion(-) create mode 100644 girder_annotation/girder_large_image_annotation/web_client/stylesheets/itemList.styl create mode 100644 girder_annotation/girder_large_image_annotation/web_client/views/itemList.js 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..178466367 --- /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 1 + 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..87c8d571d --- /dev/null +++ b/girder_annotation/girder_large_image_annotation/web_client/views/itemList.js @@ -0,0 +1,60 @@ +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); + + 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; From 6fa3eac935c84bb78033fd0f4dab5eecea84085f Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Mon, 30 Sep 2019 14:35:48 -0400 Subject: [PATCH 2/4] just apply to first found one --- .../girder_large_image_annotation/web_client/views/itemList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 index 87c8d571d..822e0af30 100644 --- a/girder_annotation/girder_large_image_annotation/web_client/views/itemList.js +++ b/girder_annotation/girder_large_image_annotation/web_client/views/itemList.js @@ -18,7 +18,7 @@ wrap(ItemListWidget, 'render', function (render) { collection.fetch({ itemId: item.id }).done(() => { - const thumbnail = $('a[g-item-cid="' + item.cid + '"] .large_image_thumbnail', parent); + 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) { From 14c6f41126fbdd4938ee4ac51caea1831535be4f Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Tue, 1 Oct 2019 08:17:41 -0400 Subject: [PATCH 3/4] fix linting --- .../girder_large_image_annotation/web_client/views/itemList.js | 2 -- 1 file changed, 2 deletions(-) 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 index 822e0af30..b64f7857e 100644 --- a/girder_annotation/girder_large_image_annotation/web_client/views/itemList.js +++ b/girder_annotation/girder_large_image_annotation/web_client/views/itemList.js @@ -9,7 +9,6 @@ import AnnotationCollection from '../collections/AnnotationCollection'; import '../stylesheets/itemList.styl'; - wrap(ItemListWidget, 'render', function (render) { render.apply(this, _.rest(arguments)); @@ -56,5 +55,4 @@ wrap(ItemListWidget, 'render', function (render) { }); }); - export default ItemListWidget; From 1d75b3db2b7473e2e2be0dd9b8e3b46bcf2f9c0a Mon Sep 17 00:00:00 2001 From: Samuel Gratzl Date: Thu, 3 Oct 2019 14:06:33 -0400 Subject: [PATCH 4/4] fix stylus linting --- .../web_client/stylesheets/itemList.styl | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) 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 index 178466367..0a1641e80 100644 --- a/girder_annotation/girder_large_image_annotation/web_client/stylesheets/itemList.styl +++ b/girder_annotation/girder_large_image_annotation/web_client/stylesheets/itemList.styl @@ -1,16 +1,16 @@ .large_image_thumbnail - position: relative + position relative .large_image_annotation_badge position absolute top 0 right 0 transform scale(1)translate(50%, -50%) - transform-origin 100% 0% + transform-origin 100% 0 height 20px padding 0 6px - z-index 1 + z-index 10 min-width 20px display flex align-items center @@ -24,4 +24,4 @@ border-radius 10px &.hidden - display: none + display none