From 7d9e85fe21a07b40a4146d08fc685763ff0a109c Mon Sep 17 00:00:00 2001 From: William Moore Date: Sun, 10 Mar 2019 02:44:53 +0000 Subject: [PATCH 1/4] Create labels from map annotations On the plane back from Brisbane: BioImage Analysis Satellite Symposium at Light Microscopy Australia 2019 where this feature was requested --- omero_figure/templates/figure/index.html | 27 +++- src/js/views/figure_view.js | 1 + src/js/views/labels_from_maps_modal.js | 117 ++++++++++++++++++ src/js/views/right_panel_view.js | 9 ++ src/templates/labels_form_inner_template.html | 3 + 5 files changed, 156 insertions(+), 1 deletion(-) create mode 100644 src/js/views/labels_from_maps_modal.js diff --git a/omero_figure/templates/figure/index.html b/omero_figure/templates/figure/index.html index d3146150e..412507a26 100644 --- a/omero_figure/templates/figure/index.html +++ b/omero_figure/templates/figure/index.html @@ -584,7 +584,32 @@

Open

- + + + + + +
diff --git a/src/js/views/figure_view.js b/src/js/views/figure_view.js index 562fd207d..c8f5fef93 100644 --- a/src/js/views/figure_view.js +++ b/src/js/views/figure_view.js @@ -18,6 +18,7 @@ new RoiModalView({model: this.model}); new DpiModalView({model: this.model}); new LegendView({model: this.model}); + new LabelFromMapsModal({model: this.model}); this.figureFiles = new FileList(); new FileListView({model:this.figureFiles, figureModel: this.model}); diff --git a/src/js/views/labels_from_maps_modal.js b/src/js/views/labels_from_maps_modal.js new file mode 100644 index 000000000..74ef8069e --- /dev/null +++ b/src/js/views/labels_from_maps_modal.js @@ -0,0 +1,117 @@ + +var LabelFromMapsModal = Backbone.View.extend({ + + el: $("#labelsFromMapAnns"), + + model: FigureModel, + + // label options: position, size, color + options: {}, + + initialize: function(options) { + + // when dialog is shown, load map annotations for selected images + $("#labelsFromMapAnns").bind("show.bs.modal", function(event){ + console.log('show', event.relatedTarget); + this.options = event.relatedTarget; + this.loadMapAnns(); + }.bind(this)); + }, + + loadMapAnns() { + + let imageIds = this.model.getSelected().map(function(m){return m.get('imageId')}); + this.isLoading = true; + $('select', this.el).html(""); + + var url = WEBINDEX_URL + "api/annotations/?type=map&image="; + url += imageIds.join("&image="); + + $.getJSON(url, function(data) { + this.isLoading = false; + this.annotations = data.annotations; + this.render(); + }.bind(this) + ); + }, + + events: { + "submit .labelsFromMapAnnsForm": "handleForm", + }, + + handleForm: function(event) { + event.preventDefault(); + if (this.isLoading) return; + + var key = $('select', this.el).val(); + console.log('key', key); + + var labelSize = this.options.size || "12"; + var labelPosition = this.options.position || "top"; + var labelColor = this.options.color || "000000"; + + var imageValues = this.annotations.reduce(function(prev, t){ + var iid = t.link.parent.id; + if (!prev[iid]) { + prev[iid] = []; + } + t.values.forEach(function(kv) { + if (kv[0] === key) { + prev[iid].push(kv[1]); + } + }); + return prev; + }, {}); + console.log('imageValues', imageValues); + + this.model.getSelected().forEach(function(p){ + var iid = p.get('imageId'); + if (imageValues[iid]) { + var labels = imageValues[iid].map(function(value){ + return { + 'text': key + ': ' + value, + 'size': labelSize, + 'position': labelPosition, + 'color': labelColor, + } + }); + p.add_labels(labels); + } + }); + + $("#labelsFromMapAnns").modal('hide'); + return false; + }, + + render: function() { + // Get keys for images {'key' : {iid: true}} + var keys = {}; + this.annotations.forEach(function(ann) { + let iid = ann.link.parent.id; + ann.values.forEach(function(kv){ + var key = kv[0]; + if (!keys[key]) { + keys[key] = {}; + } + keys[key][iid] = true; + }) + }); + var keyList = []; + var keyCounts = {}; + + for (var key in keys) { + if (keys.hasOwnProperty(key)) { + keyList.push(key); + keyCounts[key] = Object.keys(keys[key]).length; + } + } + keyList.sort(function(a, b) { + return (a.toUpperCase() < b.toUpperCase()) ? -1 : 1; + }); + + var html = keyList.map(function(key) { + return ""; + }).join(""); + $('select', this.el).html(html); + } +}); diff --git a/src/js/views/right_panel_view.js b/src/js/views/right_panel_view.js index 88a65f2fb..9f5b64ea8 100644 --- a/src/js/views/right_panel_view.js +++ b/src/js/views/right_panel_view.js @@ -328,6 +328,15 @@ return false; } + if (label_text == '[key-values]') { + // Load Map Anns for this image and create labels + $("#labelsFromMapAnns").modal("show", { + position:position, + size:font_size, + color: color}); + return false; + } + if (label_text == '[tags]') { // Load Tags for this image and create labels diff --git a/src/templates/labels_form_inner_template.html b/src/templates/labels_form_inner_template.html index f739eee37..9751825f7 100644 --- a/src/templates/labels_form_inner_template.html +++ b/src/templates/labels_form_inner_template.html @@ -19,6 +19,9 @@
  • Tags
    • +
  • + Key-Value Pairs +
  • Time (index)
    • From d3990d02daab4aa5626b8f4af050f090126d053f Mon Sep 17 00:00:00 2001 From: William Moore Date: Mon, 11 Mar 2019 01:29:28 +0000 Subject: [PATCH 2/4] Fix drop-down Label Text selector from replacing drop-down button I think this bug became exposed in beae70c --- src/js/views/right_panel_view.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/js/views/right_panel_view.js b/src/js/views/right_panel_view.js index 9f5b64ea8..d6d0f567a 100644 --- a/src/js/views/right_panel_view.js +++ b/src/js/views/right_panel_view.js @@ -266,6 +266,7 @@ // For the Label Text, handle this differently... if ($a.attr('data-label')) { $('.new-label-form .label-text', this.$el).val( $a.attr('data-label') ); + return; } // All others, we take the from the and place it in the
    -

    Choose Key (brackets are numbers of images with this key-value):

    +

    Choose Key + (shows numbers of images):

    +
    + +
    +
    +
    Example Label
    +
    +
    diff --git a/src/js/views/labels_from_maps_modal.js b/src/js/views/labels_from_maps_modal.js index 74ef8069e..1ab6f891a 100644 --- a/src/js/views/labels_from_maps_modal.js +++ b/src/js/views/labels_from_maps_modal.js @@ -8,18 +8,28 @@ var LabelFromMapsModal = Backbone.View.extend({ // label options: position, size, color options: {}, - initialize: function(options) { - + /** + * Constructor - listen for dialog opening to load data and render + */ + initialize: function() { // when dialog is shown, load map annotations for selected images $("#labelsFromMapAnns").bind("show.bs.modal", function(event){ - console.log('show', event.relatedTarget); + // event options from the label form: {position: 'top', size: '12', color: '0000'} this.options = event.relatedTarget; this.loadMapAnns(); }.bind(this)); }, - loadMapAnns() { + events: { + "submit .labelsFromMapAnnsForm": "handleForm", + "change select": "renderExampleLabel", + "change input": "renderExampleLabel", + }, + /** + * Load the map annotations, then call render() + */ + loadMapAnns() { let imageIds = this.model.getSelected().map(function(m){return m.get('imageId')}); this.isLoading = true; $('select', this.el).html(""); @@ -35,17 +45,17 @@ var LabelFromMapsModal = Backbone.View.extend({ ); }, - events: { - "submit .labelsFromMapAnnsForm": "handleForm", - }, - + /** + * Handle submission of the form to create labels and close dialog + * + * @param {Object} event + */ handleForm: function(event) { event.preventDefault(); if (this.isLoading) return; var key = $('select', this.el).val(); - console.log('key', key); - + var includeKey = $("input[name='includeKey']").is(':checked'); var labelSize = this.options.size || "12"; var labelPosition = this.options.position || "top"; var labelColor = this.options.color || "000000"; @@ -62,14 +72,13 @@ var LabelFromMapsModal = Backbone.View.extend({ }); return prev; }, {}); - console.log('imageValues', imageValues); this.model.getSelected().forEach(function(p){ var iid = p.get('imageId'); if (imageValues[iid]) { var labels = imageValues[iid].map(function(value){ return { - 'text': key + ': ' + value, + 'text': includeKey ? (key + ': ' + value) : value, 'size': labelSize, 'position': labelPosition, 'color': labelColor, @@ -78,11 +87,43 @@ var LabelFromMapsModal = Backbone.View.extend({ p.add_labels(labels); } }); - $("#labelsFromMapAnns").modal('hide'); return false; }, + /** + * Renders the Example label based on currently selected Key and includeKey + */ + renderExampleLabel: function() { + var key = $('select', this.el).val(); + var includeKey = $("input[name='includeKey']").is(':checked'); + // find first annotation with this value + var label; + for (var a=0; a for choosing Key. Also calls renderExampleLabel() + */ render: function() { // Get keys for images {'key' : {iid: true}} var keys = {}; @@ -96,9 +137,10 @@ var LabelFromMapsModal = Backbone.View.extend({ keys[key][iid] = true; }) }); + + // Make a list of keys (and sort) along with counts of images for each key var keyList = []; var keyCounts = {}; - for (var key in keys) { if (keys.hasOwnProperty(key)) { keyList.push(key); @@ -112,6 +154,11 @@ var LabelFromMapsModal = Backbone.View.extend({ var html = keyList.map(function(key) { return ""; }).join(""); + if (keyList.length === 0) { + html = ""; + } $('select', this.el).html(html); + + this.renderExampleLabel(); } }); From 1020f4d36da75ea7afbeca1bb59491029c4ea6f9 Mon Sep 17 00:00:00 2001 From: William Moore Date: Fri, 12 Apr 2019 16:09:33 +0100 Subject: [PATCH 4/4] Fix comment Anns --- src/js/views/right_panel_view.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/js/views/right_panel_view.js b/src/js/views/right_panel_view.js index d6d0f567a..e510742ef 100644 --- a/src/js/views/right_panel_view.js +++ b/src/js/views/right_panel_view.js @@ -330,7 +330,7 @@ } if (label_text == '[key-values]') { - // Load Map Anns for this image and create labels + // Load Map Annotations for this image and create labels $("#labelsFromMapAnns").modal("show", { position:position, size:font_size,