Added show legend checkbox

Author: jcha40

index.html

@@ -140,6 +140,11 @@ <h4>Composite metadata</h4>
                                 <input id="tooltip-checkbox" type="checkbox" checked>
                                 <script src="js/events/tooltip_checkbox.js"></script>
                             </div>
+                            <div>
+                                <label for="show-legend-checkbox">Show legend</label>
+                                <input id="show-legend-checkbox" type="checkbox" checked>
+                                <script src="js/events/show_legend_checkbox.js"></script>
+                            </div>
                             <div>
                                 <input type="button" id="download-svg-button" value="Download as SVG">
                                 <script src="js/events/download_svg_button.js"></script>

js/events/show_legend_checkbox.js

@@ -0,0 +1,5 @@
+$(function() {
+  $('#show-legend-checkbox').change(function() {
+    $("#main-plot").main_plot("toggle_legend", this.checked)
+  })
+})

js/widgets/main_plot.js

@@ -19,6 +19,7 @@ $(function() {
         color_trace: false,
         locked: false,
         enable_tooltip: true,
+        show_legend: true,
 
         _elements: {
             main_plot: null,
@@ -497,6 +498,11 @@ $(function() {
                     .style("display", d => d[1])
         },
 
+        toggle_legend: function(show) {
+            this.show_legend = show;
+            this._elements.legend.style("display", show ? null : "none")
+        },
+
         change_label: function(label, text) {
             this[label] = text
         },
@@ -709,7 +715,8 @@ $(function() {
         export: function() {
             return {title: this.title, xlabel: this.xlabel, ylabel: this.ylabel, opacity: this.opacity,
                 smoothing: this.smoothing, bp_shift: this.bp_shift, xmin: this.xmin, xmax: this.xmax,
-                ymax: this.ymax, combined: this.combined, locked: this.locked, color_trace: this.color_trace}
+                ymax: this.ymax, combined: this.combined, locked: this.locked, color_trace: this.color_trace,
+                show_legend: this.show_legend}
         },
 
         import: function(data) {
@@ -752,6 +759,11 @@ $(function() {
             if ("color_trace" in data) {
                 this.toggle_color_trace(data.color_trace);
                 d3.select("#color-trace-checkbox").property("checked", data.color_trace)
+            };
+
+            if ("show_legend") {
+                this.toggle_legend(data.show_legend);
+                d3.select("#show-legend-checkbox").property("checked", data.show_legend)
             }
         },