Added spinner

css/style.css

@@ -140,4 +140,5 @@ p.color:hover {
     position: fixed;
     top: 50%;
     left: 50%;
+    z-index: 100;
 }
\ No newline at end of file

index.html

@@ -114,7 +114,7 @@
 <!-- </div> -->
 
 
-<div id="spinnerdiv"><i id="spinner" class="fa fa-spinner fa-5x"></i></div>
+<div id="spinnerdiv"><i id="spinner" class="fa fa-circle-o-notch fa-5x"></i></div>
 
 
 

js/vis_common.js

@@ -2,12 +2,16 @@
  * Created by stephen on 3/20/15.
  */
 function startSpinner() {
-    //$("#spinnerdiv").fadeIn();
+    console.log("Starting spinner...")
+    $("#spinnerdiv").show();
     $("#spinner").addClass("fa-spin");
+
+
 }
 
 function stopSpinner() {
-    //$("#spinnerdiv").fadeOut();
+    console.log("Stopping spinner...")
+    $("#spinnerdiv").hide();
     $("#spinner").removeClass("fa-spin");
 }
 

vis.js

@@ -5,6 +5,9 @@ $( document ).ready(function() {
     // This makes the info box draggable.
     $(".info").draggable();
 
+    // to make the div hide
+    stopSpinner();
+
     $("#selectDataBox").change(updateSVG);
 
     // This populates the data box from the filelist.json file
@@ -53,8 +56,6 @@ function updateSVG() {
     var strVal = e.options[e.selectedIndex].value;
     console.log(strVal);
 
-
-
     var filename;
     if (strVal === "dummy"){
         return;
@@ -180,28 +181,24 @@ function updateSVG() {
 
 
         function transitionMultiples() {
-            $("#upbutton").hide(500);
-            $("#downbutton").show(500);
             var t = svg; //.transition().duration(750),
-            g = t.selectAll(".system").attr("transform", function(d, i) { return "translate(0, " + (-y0(syslist[syslist.length - 1 - i])) + ")"; });
+            var g = t.selectAll(".system").attr("transform", function(d, i) { return "translate(0, " + (-y0(syslist[syslist.length - 1 - i])) + ")"; });
             g.selectAll("rect").attr("y", function(d) { return y1(d.y); });
             d3.selectAll(".rule").style("visibility", "hidden");
         }
 
         function transitionStacked() {
-            $("#downbutton").hide(500);
-            $("#upbutton").show(500);
             var t = svg; //.transition().duration(750),
-            g = t.selectAll(".system").attr("transform", "translate(0,0)");
+            var g = t.selectAll(".system").attr("transform", "translate(0,0)");
             g.selectAll("rect").attr("y", function (d) {
                 return -rectheight * (d.y0) - rectheight * (d.y);
             });
             d3.selectAll(".rule").style("visibility", "visible");
-
         }
 
         // this is called when the sort button is pressed.
         function update(){
+            startSpinner();
 
             d3.selectAll(".vertrule").remove();
 
@@ -257,13 +254,20 @@ function updateSVG() {
                 //.transition().duration(750) // commented out because it takes too much memory.
                 .attr("x", function(d) { return x(d.x) } );
 
+            stopSpinner();
+
         }
 
-        $("#sortbutton").on("click", update);
+        $("#sortbutton").off().on("click", update);
 
-        $("#togglebutton").on("click",
+
+        $("#togglebutton").html("<i class=\"fa fa-th\"></i> To Matrix");
+        
+        $("#togglebutton").off().on("click",
             function () {
+                startSpinner();
                 var t = $(this).text();
+                console.log(t);
                 if (t.indexOf("Matrix") > -1) {
                     transitionMultiples();
                     $(this).html("<i class=\"fa fa-bar-chart\"></i> To Histogram");
@@ -271,6 +275,8 @@ function updateSVG() {
                     transitionStacked();
                     $(this).html("<i class=\"fa fa-th\"></i> To Matrix");
                 }
+                stopSpinner();
+                $(this).blur();
             });
 
         stopSpinner();
@@ -278,6 +284,9 @@ function updateSVG() {
         $("#sortbutton").prop("disabled", false);
         $("#togglebutton").prop("disabled", false);
     });
+
+
+
 }
 
 // get the indices for the line numbers