9a3d804d4836f8508ed10a5372e3cc50c4c5ff64
kate
  Thu Nov 3 20:50:16 2016 -0700
Finish connection to hgTracks; create form and submit button, and get tissues into cart. refs #17369

diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js
index dbec966..a2194d0 100644
--- src/hg/js/hgGtexTrackSettings.js
+++ src/hg/js/hgGtexTrackSettings.js
@@ -77,66 +77,75 @@
                 onClickClearTissue(tis);
             }
         }
     }
 
     function onMapClickToggleTissue(ev) {
         var isOn = false;
         var svgId = ev.target.id;
         var tis = tissueFromSvgId(svgId);
         var el = _htmlDoc.getElementById(tis);
         if (el !== null) {
             el.classList.toggle('tissueSelected');
         }
         if (el.classList.contains('tissueSelected')) {
             isOn = true;
+            onClickSetTissue(tis);
+        } else {
+           onClickClearTissue(tis);
         }
         // below can likely replace 3 lines after
         //this.classList.toggle('tissueSelected');
         el = _svgDoc.getElementById(svgId);
         if (el !== null) {
             el.classList.toggle('tissueSelected');
             if (isOn) {
                 el.style.fill = "black";
             } else {
                 el.style.fill = "#737373";
             }
         }
     }
 
     function setMapTissueEl(el) {
         // set label dark
         if (el !== null) {
             el.classList.add('tissueSelected');
             el.style.fill = "black";
             var count = el.childElementCount;
             for (var i = 0; i < count; i++) {
                 el.children[i].style.fill = "black";
             }
         }
     }
 
     function onClickSetTissue(tis) {
         // mark selected in tissue table
-        $('#' + tis).addClass('tissueSelected');
+        var $tis = $('#' + tis);
+        $tis.addClass('tissueSelected');
+        var $checkbox = $('#' + tis + ' > input');
+        $checkbox.attr("checked", true);
         var el = _svgDoc.getElementById(tis + "_Text_Hi");
         setMapTissueEl(el);
     }
 
     function onClickClearTissue(tis) {
         // mark selected in tissue table
-        $(tis).removeClass('tissueSelected');
+        var $tis = $('#' + tis);
+        $tis.removeClass('tissueSelected');
+        var $checkbox = $('#' + tis + ' > input');
+        $checkbox.attr("checked", false);
         var el = _svgDoc.getElementById(tis + "_Text_Hi");
         if (el !== null) {
             el.classList.remove('tissueSelected');
             el.style.fill = "#737373";
             var count = el.childElementCount;
             for (var i = 0; i < count; i++) {
                 el.children[i].style.fill = "#737373";
             }
         }
     }
 
 
     function toggleHighlightTissue(tis) {
         var i;
         var isHovered = false;
@@ -264,48 +273,57 @@
         // set all on tissue table
         // NOTE: this shouldn't be needed (needs debugging in onClickSet)
         $('.tissueLabel').addClass('tissueSelected');
     }
 
     function onClickClearAll() {
         tissues.forEach(onClickClearTissue);
         $('.tissueLabel').removeClass("tissueSelected");
     }
 
     function onClickMapTissue() {
         this.style.fill = "black";
         //document.getElementById("bodyMapSvg").contentDocument.getElementById('endocervix').style.fill = "black";
     }
 
+    function submitForm() {
+    // Submit form from go button (see hgGateway.js)
+    // Show a spinner -- sometimes it takes a while for hgTracks to start displaying.
+    $('.jwGoIcon').removeClass('fa-play').addClass('fa-spinner fa-spin');
+    $form = $('form');
+    $form.submit();
+    }
+
     // Initialization
 
     function init() {
         // cart.setCgi('gtexTrackSettings');
 
         $(function() {
             // after page load, tweak layout and initialize event handlers
             var bodyMapSvg = document.getElementById("bodyMapSvg");
             globalSvg = bodyMapSvg;
 
             _htmlDoc = document;
             _htmlRoot = document.documentElement;
 
             // wait for SVG to load
             bodyMapSvg.addEventListener("load", function() {
                 var svg = bodyMapSvg.contentDocument.documentElement;
                 _svgRoot = svg;
                 _svgDoc = bodyMapSvg.contentDocument;
                 
                 initBodyMap(svg, bodyMapSvg.contentDocument);
                 animateTissues();
             }, false);
 
+            $('.goButtonContainer').click(submitForm);
         });
     }
 
     return {
             init: init
            };
     
 }()); // gtexTrackSettings
 
 gtexTrackSettings.init();