Value legend

nengo_gui/components/value.py

@@ -10,8 +10,8 @@ class Value(Component):
     """The server-side system for a Value plot."""
 
     # the parameters to be stored in the .cfg file
-    config_defaults = dict(max_value=1,
-                         min_value=-1, 
+    config_defaults = dict(max_value=1, min_value=-1,
+                         show_legend=False, legend_labels=[],
                          **Component.config_defaults)
 
     def __init__(self, obj):

nengo_gui/config.py

@@ -47,7 +47,8 @@ def dumps(self, uids):
                 lines.append('%s = %s' % (uid, obj.code_python(uids)))
                 for k in obj.config_defaults.keys():
                     v = getattr(self[obj], k)
-                    if isinstance(v, bool):
+                    if(isinstance(v, bool) or isinstance(v, list)
+                        or isinstance(v, dict)):
                         val = '%s' % v
                     else:
                         val = '%g' % v

nengo_gui/static/components/netgraph_item.js

@@ -362,6 +362,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

@@ -56,6 +56,27 @@ 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 || [];
+    if(this.legend_labels.length !== this.n_lines){
+        // fill up an array with temporary labels
+        for(i=0; i<this.n_lines; i++){
+            if(this.legend_labels[i] === undefined){
+                this.legend_labels[i] = "label_".concat(String(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);
@@ -129,13 +150,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.
+        // Blank string mean do nothing
+        // Long strings okay
+        // Excissive entries get ignored
+        // Missing entries get replaced by default value
+        // Empty entries assumed to be indication to skip modification
+        // TODO: Allow escaping of commas
+        if ((label_csv !== null) && (label_csv !== '')) {
+            labels = label_csv.split(',');
+
+            for(i=0; i<self.n_lines; i++){
+                if(labels[i] !== ""){
+                     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);
+        }
+        $('#OK').attr('data-dismiss', 'modal');
+    });
+
+    // TODO: Add button so that a person can easily return to default labels
+    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;

nengo_gui/static/nengo.js

@@ -72,7 +72,6 @@ Nengo.next_zindex = function() {
 }
 
 /* draw a legend */
-// the css should probably be dealt with in here somehow
 Nengo.draw_legend = function(parent, labels, color_func){
     // "20" is around the size of the font
     legend_svg = d3.select(parent)