e04944e2ed12d0ad5a722755bb9a7fd0f2a3ba2d
kate
  Thu Oct 20 17:02:39 2016 -0700
Click handling on individual tissues and set all/clear all now works with DRAFT 04. refs #17369

diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js
index 868eb98..443342e 100644
--- src/hg/js/hgGtexTrackSettings.js
+++ src/hg/js/hgGtexTrackSettings.js
@@ -1,148 +1,173 @@
 // Module: gtexTrackSettings
 
+
 var gtexTrackSettings = (function() {
 
     // Data
     
-    // SVG has it's own DOM
+    // SVG has its own DOM
     var _svgDoc;
     var _svgRoot;
     var _htmlDoc;
     var _htmlRoot;
 
     var tissues = [
         'adiposeSubcut', 'adiposeVisceral', 'adrenalGland', 'arteryAorta', 'arteryCoronary', 
         'arteryTibial', 'bladder', 'brainAmygdala', 'brainAnCinCortex', 'brainCaudate', 
         'brainCerebelHemi', 'brainCerebellum', 'brainCortex', 'brainFrontCortex', 
         'brainHippocampus', 'brainHypothalamus', 'brainNucAccumbens', 'brainPutamen', 
         'brainSpinalcord', 'brainSubstanNigra', 'breastMamTissue', 'xformedlymphocytes',
         'xformedfibroblasts', 'ectocervix', 'endocervix', 'colonSigmoid', 'colonTransverse',
         'esophagusJunction', 'esophagusMucosa', 'esophagusMuscular', 'fallopianTube', 
         'heartAtrialAppend', 'heartLeftVentricl', 'kidneyCortex', 'liver', 'lung', 
         'minorSalivGland', 'muscleSkeletal', 'nerveTibial', 'ovary', 'pancreas', 'pituitary', 
         'prostate', 'skinNotExposed', 'skinExposed', 'smallIntestine', 'spleen', 'stomach', 
         'testis', 'thyroid', 'uterus', 'vagina', 'wholeBlood'
     ];
 
     // Convenience functions
+    function tissueFromSvgId(svgId) {
+    // Get tissue name from an SVG id. Convention here is <tis>_*
+            return svgId.split('_')[0];
+    }
+
+    function initTissue(tis) {
+        // Set tissue to unhighlighted state
+        $("#" + tis + "_Pic_Hi", _svgRoot).hide();
+        $("#" + tis + "_Lead_Hi", _svgRoot).hide();
+
+        // mark tissue labels in svg
+        var el = _svgDoc.getElementById(tis + "_Text_Hi");
+        if (el !== null) {
+            el.classList.add('tissueLabel');
+        }
+        $("#" + tis + "_Aura_Hi", _svgRoot).hide();
+    }
+
+    function highlightTissue(tis) {
+        // 
+    }
 
     function initBodyMap(svg, doc) {
         // Set organs to unhighlighted state
-        /*
-        var line = $("#LL_kidneyCortex", svg)[0];
-        $(line).hide();
-        var white = $("#WHITE_kidneyCortex", svg);
-        $(white).hide();
-        var organ = $("#RO_kidneyCortex", svg);
-        $(organ).hide();
-        */
-        // jQuery not working here, maybe figure this out later
-        // var label = $("arteryAorta", svg);
-        // $(label).css("fill", "blue");
-        organ = doc.getElementById('kidneyCortex');
-        organ.style.fill = "blue";
-
-        line = $("#LL_arteryAorta", svg);
-        $(line).hide();
-        white = $("#WHITE_arteryAorta", svg);
-        $(white).hide();
+        tissues.forEach(initTissue);
     }
 
 
     function onClickToggleTissue(tis) {
         // mark selected in tissue table
-        $(this).toggleClass('tableTissueSelected');
+        $(this).toggleClass('tissueSelected');
 
         // jQuery addClass doesn't work on SVG elements, using classList
         // May need a shim so this works on IE9 and Opera mini (as if Dec 2014)
         // https://martinwolf.org/blog/2014/12/adding-and-removing-classes-from-svg-elements-with-jquery
-        var el = _svgDoc.getElementById(this.id);
+        var el = _svgDoc.getElementById(this.id + '_Text_Hi');
         if (el !== null) {
-            el.classList.toggle('tableTissueSelected');
+            el.classList.toggle('tissueSelected');
         }
     }
 
     function onMapClickToggleTissue(ev) {
-        var tis = ev.target.id;
+        var isOn = false;
+        var svgId = ev.target.id;
+        var tis = tissueFromSvgId(svgId);
         var el = _htmlDoc.getElementById(tis);
         if (el !== null) {
-            el.classList.toggle('tableTissueSelected');
+            el.classList.toggle('tissueSelected');
+        }
+        if (el.classList.contains('tissueSelected')) {
+            isOn = true;
         }
         // below can likely replace 3 lines after
-        //this.classList.toggle('tableTissueSelected');
-        el = _svgDoc.getElementById(tis);
+        //this.classList.toggle('tissueSelected');
+        el = _svgDoc.getElementById(svgId);
         if (el !== null) {
-            el.classList.toggle('tableTissueSelected');
+            el.classList.toggle('tissueSelected');
+            if (isOn) {
+                el.style.fill = "black";
+            } else {
+                el.style.fill = "#737373";
+            }
         }
     }
 
     function onClickSetTissue(tis) {
         // mark selected in tissue table
-        $(tis).addClass('tableTissueSelected');
-        var el = _svgDoc.getElementById(tis);
+        $(tis).addClass('tissueSelected');
+        var el = _svgDoc.getElementById(tis + "_Text_Hi");
         if (el !== null) {
-            el.classList.add('tableTissueSelected');
+            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 onClickClearTissue(tis) {
         // mark selected in tissue table
-        $(tis).removeClass('tableTissueSelected');
-        var el = _svgDoc.getElementById(tis);
+        $(tis).removeClass('tissueSelected');
+        var el = _svgDoc.getElementById(tis + "_Text_Hi");
         if (el !== null) {
-            el.classList.remove('tableTissueSelected');
+            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 onMapHoverTissue(ev) {
         var isOn = false;
         var tis = ev.target.id;
         var el = _htmlDoc.getElementById(tis);
         if (el !== null) {
             el.classList.toggle('tissueHovered');
             if (el.classList.contains('tissueHovered')) {
                 isOn = true;
             }
         }
 
         // below can likely replace 3 lines after
-        //this.classList.toggle('tableTissueSelected');
-        el = _svgDoc.getElementById(tis);
+        //this.classList.toggle('tissueSelected');
+        el = _svgDoc.getElementById(tis + '_Text_Hi');
         if (el !== null) {
             el.classList.toggle('tissueHovered');
             if (this.id === "arteryAorta") {
                 var line = $("#LL_arteryAorta", _svgRoot);
                 var white = $("#WHITE_arteryAorta", _svgRoot);
                 if (isOn) {
                     $(line).show();
                     $(white).show();
                 } else {
                     $(white).hide();
                     $(line).hide();
                 }
             }
         }
     }
 
     function onHoverTissue() {
         // HTML
         $(this).toggleClass('tissueHovered');
         var isOn = $(this).hasClass('tissueHovered');
 
         // SVG
-        var el = _svgDoc.getElementById(this.id);
+        var el = _svgDoc.getElementById(this.id + '_Text_Hi');
         if (el !== null) {
             el.classList.toggle('tissueHovered');
             if (this.id === "arteryAorta") {
                 var line = $("#LL_arteryAorta", _svgRoot);
                 var white = $("#WHITE_arteryAorta", _svgRoot);
                 if (isOn) {
                     $(line).show();
                     $(white).show();
                 } else {
                     $(white).hide();
                     $(line).hide();
                 }
 /*
                 el = _svgDoc.getElementById("LL_arteryAorta");
                 if (el !== null) {
@@ -151,61 +176,62 @@
                 el = _svgDoc.getElementById("WHITE_arteryAorta");
                 if (el !== null) {
                     el.classList.toggle('mapTissueHovered');
 */
             }
         }
     }
 
     //function animateTissue(tis, i, ignore) {
     function animateTissue(tis) {
         //console.log(tis);
         // add handlers to tissue table
         $('#' + tis).click(tis, onClickToggleTissue);
         $('#' + tis).hover(onHoverTissue, onHoverTissue);
 
-        var el = _svgDoc.getElementById(tis);
+        var el = _svgDoc.getElementById(tis + "_Text_Hi");
         if (el !== null) {
             el.addEventListener("click", onMapClickToggleTissue);
             el.addEventListener("mouseenter", onMapHoverTissue);
             el.addEventListener("mouseleave", onMapHoverTissue);
             // mouseover, mouseout ?
         }
 
         
     }
 
     function animateTissues() {
         // Add event handlers to tissue table and body map SVG
         tissues.forEach(animateTissue);
 
         $('#setAll').click(onClickSetAll);
         $('#clearAll').click(onClickClearAll);
     }
 
     // UI event handlers
 
     function onClickSetAll() {
-        // set font-weight: bold on table, set text fill: black on svg
-        // NOTE: this shouldn't be needed (needs debugging in onClickSet)
+        // set all on body map
         tissues.forEach(onClickSetTissue);
-        $('.tissueLabel').addClass('tableTissueSelected');
+        // 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("tableTissueSelected");
+        $('.tissueLabel').removeClass("tissueSelected");
     }
 
     function onClickMapTissue() {
         this.style.fill = "black";
         //document.getElementById("bodyMapSvg").contentDocument.getElementById('endocervix').style.fill = "black";
     }
 
     // Initialization
 
     function init() {
         // cart.setCgi('gtexTrackSettings');
 
         $(function() {
             // after page load, tweak layout and initialize event handlers
             var bodyMapSvg = document.getElementById("bodyMapSvg");