4830cdd0baa82503411b2c3e2828cd65b6704c73
kate
  Thu Oct 20 17:53:30 2016 -0700
Mouseover to highlight tissues on DRAFT 04 bodyMap largely working.  Some tissues aren't popping up properly and tissue table not yet connected up fully. refs #17369

diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js
index 443342e..e459e19 100644
--- src/hg/js/hgGtexTrackSettings.js
+++ src/hg/js/hgGtexTrackSettings.js
@@ -107,59 +107,72 @@
 
     function onClickClearTissue(tis) {
         // mark selected in tissue table
         $(tis).removeClass('tissueSelected');
         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 onMapHoverTissue(ev) {
+        var i;
         var isOn = false;
-        var tis = ev.target.id;
+        var svgId = ev.target.id;
+        var tis = tissueFromSvgId(svgId);
         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('tissueSelected');
         el = _svgDoc.getElementById(tis + '_Text_Hi');
-        if (el !== null) {
+        if (el === null)
+            return;
         el.classList.toggle('tissueHovered');
-            if (this.id === "arteryAorta") {
-                var line = $("#LL_arteryAorta", _svgRoot);
-                var white = $("#WHITE_arteryAorta", _svgRoot);
+        var line = $("#" + tis + "_Lead_Hi", _svgRoot);
+        var pic = $("#" + tis + "_Pic_Hi", _svgRoot);
+        var white = $("#" + tis + "_Aura_Hi", _svgRoot);
+        var count = el.childElementCount;
         if (isOn) {
+            el.style.fill = 'blue';
+            for (i = 0; i < count; i++) {
+                el.children[i].style.fill = "blue";
+            }
             $(line).show();
+            $(pic).show();
             $(white).show();
         } else {
+            var color = el.classList.contains('tissueSelected') ? 'black' : '#737373';
+            el.style.fill = color;
+            for (i = 0; i < count; i++) {
+                el.children[i].style.fill = color;
+            }
             $(white).hide();
+            $(pic).hide();
             $(line).hide();
         }
     }
-        }
-    }
 
     function onHoverTissue() {
         // HTML
         $(this).toggleClass('tissueHovered');
         var isOn = $(this).hasClass('tissueHovered');
 
         // SVG
         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();