Create labels from map annotations

omero_figure/templates/figure/index.html

@@ -584,7 +584,44 @@ <h4 class="modal-title">Open</h4>
                     </div>
             </div>
         </div>
-    </div><!-- /.modal -->
+    </div>
+    <!-- Labels from Map Annotations Modal -->
+    <div class="modal" id="labelsFromMapAnns" tabindex="-1" role="dialog" aria-hidden="true">
+        <div class="modal-dialog" style="width:400px">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
+                    <h4 class="modal-title" id="addImagesLabel">Labels from Key-Value Pairs</h4>
+                </div>
+                <form class="labelsFromMapAnnsForm" role="form">
+                    <div class="modal-body">
+                        <p>Choose Key
+                            <small class="text-muted">(shows numbers of images)</small>:</p>
+                        <select>
+                        </select>
+                        <div class="checkbox">
+                            <label>
+                                Include Key in Label
+                                <input name="includeKey" type="checkbox" checked>
+                            </label>
+                        </div>
+                        <hr>
+                        <h5>Example Label</h5>
+                        <div id="exampleLabelFromMap" class="well"
+                            style="background-color: transparent; margin: 0">
+                        </div>
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+                        <button type="submit" class="btn btn-primary">OK</button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+
+
+<!-- -- END OF MODAL DIALOGS -- -->
 
     <div class="navbar navbar-inverse navbar-fixed-top">
         <div class="container">

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});

src/js/views/labels_from_maps_modal.js

@@ -0,0 +1,164 @@
+
+var LabelFromMapsModal = Backbone.View.extend({
+
+    el: $("#labelsFromMapAnns"),
+
+    model: FigureModel,
+
+    // label options: position, size, color
+    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){
+            // event options from the label form: {position: 'top', size: '12', color: '0000'}
+            this.options = event.relatedTarget;
+            this.loadMapAnns();
+        }.bind(this));
+    },
+
+    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("<option>Loading data...</option>");
+
+        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)
+        );
+    },
+
+    /**
+     * 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();
+        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";
+
+        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;
+        }, {});
+
+        this.model.getSelected().forEach(function(p){
+            var iid = p.get('imageId');
+            if (imageValues[iid]) {
+                var labels = imageValues[iid].map(function(value){
+                    return {
+                        'text': includeKey ? (key + ': ' + value) : value,
+                        'size': labelSize,
+                        'position': labelPosition,
+                        'color': labelColor,
+                    }
+                });
+                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<this.annotations.length; a++) {
+            this.annotations[a].values.forEach(function(kv) {
+                if (kv[0] === key) {
+                    label = kv[1];
+                }
+            });
+            if (label) {
+                break;
+            }
+        }
+
+        if (includeKey) {
+            label = key + ": " + label;
+        }
+        // Handle no annotations on images
+        if (this.annotations.length == 0) {
+            label = ""
+        }
+
+        $("#exampleLabelFromMap").html(label);
+    },
+
+    /**
+     * Renders the <select> for choosing Key. Also calls renderExampleLabel()
+     */
+    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;
+            })
+        });
+
+        // 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);
+                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 "<option value='" + key + "'>" + key + " (" + keyCounts[key] + ")</option>";
+        }).join("");
+        if (keyList.length === 0) {
+            html = "<option>No Key-Value Pairs found</option>";
+        }
+        $('select', this.el).html(html);
+
+        this.renderExampleLabel();
+    }
+});

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 <span> from the <a> and place it in the <button>
             if ($span.length === 0) $span = $a;  // in case we clicked on <span>
@@ -328,6 +329,15 @@
                 return false;
             }
 
+            if (label_text == '[key-values]') {
+                // Load Map Annotations 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
 

src/templates/labels_form_inner_template.html

@@ -19,6 +19,9 @@
                     <li title="Create labels from Tags on this Image in OMERO">
                         <a href="#" data-label="[tags]">Tags</a>
                     </li>
+                    <li title="Create labels from Map Annotations on this Image in OMERO">
+                        <a href="#" data-label="[key-values]">Key-Value Pairs</a>
+                    </li>
                     <li title="Add a label that shows the current T-index">
                         <a href="#" data-label="[time-index]">Time (index)</a>
                     </li>