Hooking up new dendrogram order control and removing old one. Addresses

#728
sandialabs · Feb 12, 2018 · 20217b0 · 20217b0
1 parent a9dd069
commit 20217b0
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 9 deletions.
diff --git a/web-server/plugins/slycat-timeseries-model/css/ui.css b/web-server/plugins/slycat-timeseries-model/css/ui.css
@@ -64,7 +64,7 @@ rights in this software.
 }
 
 /* dendrogram styles */
-#dendrogram-pane #dendrogram-sort-control 
+/*#dendrogram-pane #dendrogram-sort-control 
 {
   position: absolute;
   bottom: 0px;
@@ -82,7 +82,7 @@ rights in this software.
   background: #7767B0 url(images/sort-dendrogram-selected.png) no-repeat center center;
   color: #FFFFFF;
   cursor: default;
-}
+}*/
 
 #dendrogram-pane #dendrogram-controls 
 {

diff --git a/web-server/plugins/slycat-timeseries-model/js/timeseries-dendrogram.js b/web-server/plugins/slycat-timeseries-model/js/timeseries-dendrogram.js
@@ -69,18 +69,20 @@ define("slycat-timeseries-dendrogram", ["d3"], function(d3)
 
   	  self.container.selectAll("g").remove();
 
-      self.sortControl = $('<div id="dendrogram-sort-control"></div>')
-        .appendTo('#dendrogram-pane')
-        .click(function() {
-          if(!$(this).hasClass("selected")){
+      self.sortButton = $('#dendrogram-controls button.sort')
+        .click(function(){
+          console.log("This button is currently active (pressed):" + $(this).hasClass("active"));
+          if(!$(this).hasClass("active")){
             self.options.dendrogram_sort_order = true;
             self._set_dendrogram_sort_order_state();
             self.element.trigger("sort-by-dendrogram-order");
           }
         })
         ;
+
       this._set_dendrogram_sort_order_state();
 
+
   	  var vis = self.container.append("svg:g")
         .attr("transform", "translate(" + padding + "," + padding + ")")
         ;
@@ -817,10 +819,13 @@ define("slycat-timeseries-dendrogram", ["d3"], function(d3)
     _set_dendrogram_sort_order_state: function()
     {
       var self = this;
-      self.sortControl
+      self.sortButton
         .attr("title", function(index, attr){return self.options.dendrogram_sort_order ? "Inputs are sorted in dendrogram order" : "Sort inputs in dendrogram order"})
-        .toggleClass("selected", self.options.dendrogram_sort_order)
+        .attr("aria-pressed", function(index, attr){return self.options.dendrogram_sort_order ? "true" : "false"})
+        .toggleClass("active", self.options.dendrogram_sort_order)
+        .prop("disabled", self.options.dendrogram_sort_order)
         ;
+      console.log("Just toggled the active class to: " + self.options.dendrogram_sort_order);
     },
 
     resize_canvas: function()

diff --git a/web-server/plugins/slycat-timeseries-model/ui.html b/web-server/plugins/slycat-timeseries-model/ui.html
@@ -54,7 +54,7 @@
     </svg>
     <div id="dendrogram-controls" class="bootstrap-styles">
       <div id="dendrogram-general-controls" class="btn-group btn-group-xs">
-        <button class="btn btn-default active" data-toggle="button" title="Inputs are sorted in dendrogram order" aria-pressed="true">         
+        <button class="sort btn btn-default active" data-toggle="button" title="Inputs are sorted in dendrogram order" aria-pressed="true" disabled="true">         
           <span class="fa fa-sort" aria-hidden="true"></span>       
         </button>
       </div>