Added reference lines

There are a few bugs, but the core functionality is there.  Will fix bugs by Monday.

Author: benjaminbeer256

index.html

@@ -187,14 +187,29 @@ <h4>Composite metadata</h4>
                                     <label for="keep-nucleosome" id="keep-nucleosome-lable">Keep nucleosome on plot</label>
                                     <input type="checkbox" id="keep-nucleosome" label="Plot Nucleosome" style="margin-top: 15px;">
                                 </div>
+                                <script src="js/widgets/nucleosome_slider.js"></script>
+                                <script src="js/events/generate_3D_Button.js"></script>
                             </div>
                             <div style="display: none;" id="reference-axes-pane" class="plot-pane">
-                                <table id="reference-axes"></table>
+                                <label for="y-axis-lines" style="float: left;">Y-Axis Lines</label>
+                                <div class="reference-table-div">
+                                    <table id="y-axis-lines" class="reference-lines-table"></table>
+                                </div>
+                                <svg id="y-plus" height="30" width="30" xmlns="http://www.w3.org/2000/svg" style="margin-left:41%;margin-right:59%;margin-top:10px;">
+                                    <circle r="15" cx="15" cy="15" fill="grey" />
+                                    <path d="m 15 2 l 0 26 M 2 15 l 26 0" stroke-width="4" stroke="white" />
+                                </svg>
+                                <label for="x-axis-lines" style="float: left;">X-Axis Lines</label>
+                                <div class="reference-table-div">
+                                    <table id="x-axis-lines" class="reference-lines-table"></table>                                    </table>
+                                </div>
+                                <svg id="x-plus" height="30" width="30" xmlns="http://www.w3.org/2000/svg" style="margin-left:41%;margin-right:59%;margin-top:10px;">
+                                    <circle r="15" cx="15" cy="15" fill="grey" />
+                                    <path d="m 15 2 l 0 26 M 2 15 l 26 0" stroke-width="4" stroke="white" />
+                                </svg>
                                 <script src="js/widgets/reference_axes.js"></script>
                             </div>
                         </div>
-                    <script src="js/widgets/nucleosome_slider.js"></script>
-                    <script src="js/events/generate_3D_Button.js"></script>
                 </div>
             </div>
             <div class="row">

js/events/plot_tabs.js

@@ -4,6 +4,7 @@ $(function() {
     })
     d3.select("#reference-axes-tab").on("click", function() {
         showPane("reference-axes-pane", this);
+        $("#main-plot").main_plot("toggle_tooltip", false);
     })
     d3.select("#nucleosome-slider-tab").on("click", function() {
         showPane("nucleosome-slider-options", this);

js/widgets/main_plot.js

@@ -48,6 +48,10 @@ $(function() {
             return this.xscale;
         },
 
+        get_yscale: function(){
+            return this.yscale;
+        },
+
         get_dimensions: function(){
             return [this.height, this.width, this.margins.right, this.margins.bottom, this.margins.left, this.margins.top];
         },
@@ -172,6 +176,9 @@ $(function() {
             main_plot.append("g")
                 .attr("id", "coord-svg-layer");
 
+            main_plot.append("g")
+                .attr("id", "reference-axes-layer");
+
             main_plot.on("mousemove", function(e) {
                 $("#main-plot").main_plot("move_tooltip", e)
             });