Value legend

nengo_gui/components/value.py

@@ -11,6 +11,7 @@ class Value(Component):
 
     # the parameters to be stored in the .cfg file
     config_defaults = dict(max_value=1, min_value=-1,
+                           show_legend=False, legend_labels=[],
                            **Component.config_defaults)
 
     def __init__(self, obj):

nengo_gui/static/components/netgraph_item.js

@@ -367,6 +367,7 @@ Nengo.NetGraphItem.prototype.generate_menu = function () {
         items.push(['Semantic pointer plot',
             function() {self.create_graph('SpaSimilarity', self.sp_targets[0]);}]);
     }
+    // TODO: Enable input and output value plots for basal ganglia network
     items.push(['Details ...', function() {self.create_modal();}]);
     return items;
 };

nengo_gui/static/components/value.js

@@ -114,6 +114,26 @@ Nengo.Value = function(parent, sim, args) {
     this.on_resize(this.get_screen_width(), this.get_screen_height());
     this.axes2d.axis_y.tickValues([args.min_value, args.max_value]);
     this.axes2d.fit_ticks(this);
+
+    this.colors = Nengo.make_colors(6);
+    this.color_func = function(d, i) {return self.colors[i % 6]};
+    this.legend = document.createElement('div');
+    this.legend.classList.add('legend');
+    this.div.appendChild(this.legend);
+
+    this.legend_labels = args.legend_labels || [];
+    console.log(this.legend_labels);
+    if (this.legend_labels.length !== this.n_lines) {
+        // fill up the array with temporary labels
+        for (var i=this.legend_labels.length; i<this.n_lines; i++) {
+            this.legend_labels[i] = "label_" + i;
+        }
+    }
+
+    this.show_legend = args.show_legend || false;
+    if (this.show_legend === true) {
+        Nengo.draw_legend(this.legend, this.legend_labels, this.color_func);
+    }
 };
 
 Nengo.Value.prototype = Object.create(Nengo.Component.prototype);
@@ -231,13 +251,76 @@ Nengo.Value.prototype.generate_menu = function() {
     var items = [];
     items.push(['Set range...', function() {self.set_range();}]);
 
+    if (this.show_legend) {
+        items.push(['Hide legend', function() {self.set_show_legend(false);}]);
+    } else {
+        items.push(['Show legend', function() {self.set_show_legend(true);}]);
+    }
+
+    // TODO: give the legend it's own context menu
+    items.push(['Set legend labels', function () {self.set_legend_labels();}])
+
     // add the parent's menu items to this
     return $.merge(items, Nengo.Component.prototype.generate_menu.call(this));
 };
 
+Nengo.Value.prototype.set_show_legend = function(value){
+    if (this.show_legend !== value) {
+        this.show_legend = value;
+        this.save_layout();
+
+        if (this.show_legend === true) {
+            Nengo.draw_legend(this.legend, this.legend_labels, this.color_func);
+        } else {
+            // delete the legend's children
+            while (this.legend.lastChild) {
+                this.legend.removeChild(this.legend.lastChild);
+            }
+        }
+    }
+}
+
+Nengo.Value.prototype.set_legend_labels = function() {
+    var self = this;
+
+    Nengo.modal.title('Enter comma seperated legend label values');
+    Nengo.modal.single_input_body('Legend label', 'New value');
+    Nengo.modal.footer('ok_cancel', function(e) {
+        var label_csv = $('#singleInput').val();
+        var modal = $('#myModalForm').data('bs.validator');
+
+        // No validation to do.
+        // Empty entries assumed to be indication to skip modification
+        // Long strings okay
+        // Excissive entries get ignored
+        // TODO: Allow escaping of commas
+        if ((label_csv !== null) && (label_csv !== '')) {
+            labels = label_csv.split(',');
+
+            for (var i=0; i<self.n_lines; i++) {
+                if (labels[i] !== "" && labels[i] !== undefined) {
+                     self.legend_labels[i] = labels[i];
+                }
+            }
+
+            // redraw the legend with the updated label values
+            while (self.legend.lastChild) {
+                self.legend.removeChild(self.legend.lastChild);
+            }
+
+            Nengo.draw_legend(self.legend, self.legend_labels, self.color_func);
+            self.save_layout();
+        }
+        $('#OK').attr('data-dismiss', 'modal');
+    });
+
+    Nengo.modal.show();
+}
 
 Nengo.Value.prototype.layout_info = function () {
     var info = Nengo.Component.prototype.layout_info.call(this);
+    info.show_legend = this.show_legend;
+    info.legend_labels = this.legend_labels;
     info.min_value = this.axes2d.scale_y.domain()[0];
     info.max_value = this.axes2d.scale_y.domain()[1];
     return info;