-
Notifications
You must be signed in to change notification settings - Fork 43
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Show auxiliary images and metadata on item pages.
- Loading branch information
Showing
14 changed files
with
275 additions
and
41 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
22 changes: 22 additions & 0 deletions
22
girder/girder_large_image/web_client/stylesheets/itemView.styl
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| .g-item-view-large-image | ||
| margin-top 20px | ||
|
|
||
| .li-metadata-tabs | ||
| margin-top 10px | ||
| .yaml | ||
| display block | ||
| unicode-bidi embed | ||
| font-family monospace | ||
| white-space pre-wrap | ||
| td | ||
| max-width 50vw | ||
| td | ||
| max-width 33vw | ||
|
|
||
| a.g-widget-auximage | ||
| display inline-block | ||
| padding 5px | ||
| .g-widget-auximage-title | ||
| color black | ||
| font-weight bold | ||
| font-size 1.2em |
81 changes: 81 additions & 0 deletions
81
girder/girder_large_image/web_client/templates/itemView.pug
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| mixin maketable(info, depth) | ||
| table.table.table-hover.table-condensed | ||
| thead | ||
| th Property | ||
| th Value | ||
| each value, key in info | ||
| tr | ||
| if Array.isArray(value) && value.length <= 100 | ||
| td(scope="row", key=key, rowspan=value.length || 1) #{key} | ||
| for rowvalue, rowidx in value | ||
| if rowidx | ||
| tr | ||
| +tableentry(rowvalue, depth) | ||
| else | ||
| +tableentry(rowvalue, depth) | ||
| else | ||
| td(scope="row", key=key) #{key} | ||
| +tableentry(value, depth) | ||
|
|
||
| mixin tableentry(value, depth) | ||
| //- each value, if an array or object, convert to yaml or json | ||
| and add a class to show it differently | ||
| if value === null | ||
| td.null <null> | ||
| else if value && value.constructor.name === 'Object' && (depth || 0) < 3 | ||
| td.subtable | ||
| +maketable(value, (depth || 0) + 1) | ||
| else if Array.isArray(value) || (value && value.constructor.name === 'Object') | ||
| if yaml.dump(value).split('\n').length <= 100 | ||
| td.yaml #{yaml.dump(value)} | ||
| else | ||
| td.json #{JSON.stringify(value)} | ||
| else | ||
| td #{value} | ||
|
|
||
| //- check what metadata we have that we want to list | ||
| - var metadataList = []; | ||
| if Array.isArray(extra.metadata) | ||
| for mkey in extra.metadata | ||
| if largeImageMetadata[mkey] | ||
| - metadataList.push(mkey); | ||
|
|
||
| if metadataList.length | ||
| .g-widget-metadata-header | ||
| i.icon-tags | ||
| | Large Image Metadata | ||
| .g-widget-metadata-container.li-metadata-tabs | ||
| ul.nav.nav-tabs(role="tablist") | ||
| for mkey, midx in metadataList | ||
| - title = mkey.substr(0, 1).toUpperCase() + mkey.substr(1); | ||
| li(role="presentation", class=midx ? "" : "active") | ||
| a(href="#li-metadata-" + mkey, role="tab", data-toggle="tab") #{title} | ||
| .tab-content | ||
| for mkey, midx in metadataList | ||
| .tab-pane(id="li-metadata-" + mkey, role="tabpanel", class=midx ? "" : "active") | ||
| +maketable(largeImageMetadata[mkey]) | ||
|
|
||
| //- check what images we have that we want to list | ||
| - var imageList = [] | ||
| if Array.isArray(extra.images) | ||
| for ikey in extra.images | ||
| if ikey === '*' | ||
| for likey in largeImageMetadata.images | ||
| if imageList.indexOf(likey) < 0 | ||
| - imageList.push(likey); | ||
| else if largeImageMetadata.images.indexOf(ikey) >= 0 && imageList.indexOf(ikey) < 0 | ||
| - imageList.push(ikey); | ||
| - var imageWidth = 400, imageHeight = 400; | ||
|
|
||
| if imageList.length | ||
| .g-widget-metadata-header.auximage | ||
| i.icon-picture | ||
| | Associated Images | ||
| .g-widget-metadata-container.auximage | ||
| for ikey in imageList | ||
| - title = ikey.substr(0, 1).toUpperCase() + ikey.substr(1); | ||
| a.g-widget-auximage(href=`${imageUrl}${ikey}`, target="_blank") | ||
| .g-widget-auximage-title | ||
| | #{title} | ||
| .g-widget-auximage-image | ||
| img(src=`${imageUrl}${ikey}?width=${imageWidth}&height=${imageHeight}`) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,73 @@ | ||
| import $ from 'jquery'; | ||
| import yaml from 'js-yaml'; | ||
| import { AccessType } from '@girder/core/constants'; | ||
| import { restRequest, getApiRoot } from '@girder/core/rest'; | ||
| import { wrap } from '@girder/core/utilities/PluginUtils'; | ||
| import ItemView from '@girder/core/views/body/ItemView'; | ||
| import View from '@girder/core/views/View'; | ||
|
|
||
| import largeImageConfig from './configView'; | ||
| import itemViewWidget from '../templates/itemView.pug'; | ||
| import '../stylesheets/itemView.styl'; | ||
|
|
||
| wrap(ItemView, 'render', function (render) { | ||
| // ItemView is a special case in which rendering is done asynchronously, | ||
| // so we must listen for a render event. | ||
| this.once('g:rendered', function () { | ||
| if (this.model.get('largeImage') && this.model.get('largeImage').fileId) { | ||
| largeImageConfig.getSettings((settings) => { | ||
| var access = this.model.getAccessLevel(); | ||
| var extra = settings.extraItemInfo[access] || settings.extraItemInfo[AccessType.READ] || {}; | ||
| var largeImageMetadata = {}; | ||
| var promises = []; | ||
| var needed = { | ||
| tile: extra.metadata && extra.metadata.indexOf('tile') >= 0 ? '' : undefined, | ||
| internal: extra.metadata && extra.metadata.indexOf('internal') >= 0 ? '/internal_metadata' : undefined, | ||
| images: extra.images && extra.images.length ? '/images' : undefined | ||
| }; | ||
| Object.entries(needed).forEach(([key, url]) => { | ||
| if (url !== undefined) { | ||
| promises.push(restRequest({ | ||
| url: `item/${this.model.id}/tiles${url}`, | ||
| error: null | ||
| }).done((resp) => { | ||
| largeImageMetadata[key] = resp; | ||
| })); | ||
| } | ||
| }); | ||
| $.when.apply($, promises).then(() => { | ||
| this.itemViewWidget = new ItemViewWidget({ | ||
| el: $('<div>', {class: 'g-item-view-large-image'}) | ||
| .insertAfter(this.$('.g-item-metadata')), | ||
| parentView: this, | ||
| imageModel: this.model, | ||
| extra: extra, | ||
| metadata: largeImageMetadata | ||
| }); | ||
| this.itemViewWidget.render(); | ||
| return null; | ||
| }); | ||
| }); | ||
| } | ||
| }, this); | ||
| render.call(this); | ||
| }); | ||
|
|
||
| var ItemViewWidget = View.extend({ | ||
| initialize: function (settings) { | ||
| this.itemId = settings.imageModel.id; | ||
| this.model = settings.imageModel; | ||
| this.extra = settings.extra; | ||
| this.metadata = settings.metadata; | ||
| }, | ||
|
|
||
| render: function () { | ||
| this.$el.html(itemViewWidget({ | ||
| extra: this.extra, | ||
| largeImageMetadata: this.metadata, | ||
| yaml: yaml, | ||
| imageUrl: `${getApiRoot()}/item/${this.itemId}/tiles/images/` | ||
| })); | ||
| return this; | ||
| } | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.