b1b6338b01cffb734c6e1694f7120855d024c0fa
kate
  Wed Oct 26 15:37:55 2016 -0700
Display tweaks; 1. Leader lines visible always, highlighted on mouseover (JK request). Border highlights on tissue table color patches on mouseover. refs #17369

diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js
index a4164b6..6b6e89f 100644
--- src/hg/js/hgGtexTrackSettings.js
+++ src/hg/js/hgGtexTrackSettings.js
@@ -24,31 +24,32 @@
         '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();
+
+        // $("#" + 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();
 
         // force tissue to selected on init (till we have cart hooked up)
         //onClickSetTissue(tis);
     }
 
     function highlightTissue(tis) {
         // 
     }
@@ -122,114 +123,132 @@
         $(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 toggleHighlightTissue(tis) {
         var i;
-        var isOn = false;
+        var isHovered = false;
         var el = _htmlDoc.getElementById(tis);
+        var $tis = $("#" + tis);
         if (el !== null) {
             el.classList.toggle('tissueHovered');
+            var colorPatch = $tis.prev(".tissueColor");
+            colorPatch.toggleClass('tissueHoveredColor');
             if (el.classList.contains('tissueHovered')) {
-                isOn = true;
+                isHovered = true;
             }
         }
         // below can likely replace 3 lines after
         //this.classList.toggle('tissueSelected');
-        el = _svgDoc.getElementById(tis + '_Text_Hi');
-        if (el === null) {
+        textEl = _svgDoc.getElementById(tis + '_Text_Hi');
+        if (textEl === null) {
             return;
         }
-        el.classList.toggle('tissueHovered');
+        textEl.classList.toggle('tissueHovered');
         var line = $("#" + tis + "_Lead_Hi", _svgRoot);
+        var lineEl = _svgDoc.getElementById(tis + '_Lead_Hi');
         var pic = $("#" + tis + "_Pic_Hi", _svgRoot);
-        var white = $("#" + tis + "_Aura_Hi", _svgRoot);
-        var count = el.childElementCount;
-        var hiEl = _svgDoc.getElementById(tis + '_Pic_Hi');
+        var picEl = _svgDoc.getElementById(tis + '_Pic_Hi');
+        var aura = $("#" + tis + "_Aura_Hi", _svgRoot);
         var auraEl = _svgDoc.getElementById(tis + '_Aura_Hi');
-        if (isOn) {
-            el.style.fill = 'blue';
-            for (i = 0; i < count; i++) {
-                el.children[i].style.fill = "blue";
-            }
-            $(line).show();
+        var textLineCount = textEl.childElementCount;
+        if (isHovered) {
+            textEl.style.fill = 'blue';
+            for (i = 0; i < textLineCount; i++) {
+                textEl.children[i].style.fill = "blue";
+            }
+            //$(line).show();
+            //lineEl.style.stroke = '#EC1C24';
+            //lineEl.style.stroke = 'red';
+            if (lineEl !== null) {     // cell types lack leader lines
+            lineEl.style.stroke = 'blue';
+            }
+            //lineEl.setAttribute("style", "stroke-width: 3; stroke: red;");
+            //
             $(pic).show();
-            $(white).show();
+            $(aura).show();
 
             var topAura = auraEl.cloneNode(true);
             topAura.id = "topAura";
             _topAura = _svgRoot.appendChild(topAura);
         
-            var topTissue = hiEl.cloneNode(true);
+            var topTissue = picEl.cloneNode(true);
             topTissue.id = "topTissue";
             _topTissue = _svgRoot.appendChild(topTissue);
         } 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;
+            var color = textEl.classList.contains('tissueSelected') ? 'black' : '#737373';
+            textEl.style.fill = color;
+            for (i = 0; i < textLineCount; i++) {
+                textEl.children[i].style.fill = color;
             }
-            $(white).hide();
+            $(aura).hide();
             $(pic).hide();
-            $(line).hide();
+            //$(line).hide();
+            //lineEl.style.stroke = '#EC1C24';      // red
+            if (lineEl !== null) {     // cell types lack leader lines
+                lineEl.style.stroke = '#F69296';      // pink
+            }
+            //lineEl.setAttribute("style", "stroke-width: 1.7; stroke: #F69296;");
+            //
             _svgRoot.removeChild(_topTissue);
             _svgRoot.removeChild(_topAura);
         }
     }
 
     function onMapHoverTissue(ev) {
         var svgId = ev.target.id;
         var tis = tissueFromSvgId(svgId);
         toggleHighlightTissue(tis);
     }
 
     function onHoverTissue() {
         var tis = this.id;
         toggleHighlightTissue(tis);
     }
 
     //function animateTissue(tis, i, ignore) {
     function animateTissue(tis) {
         //console.log(tis);
         // add handlers to tissue table
-        var el;
+        var textEl;
+        var picEl;
         $('#' + tis).click(tis, onClickToggleTissue);
         $('#' + tis).hover(onHoverTissue, onHoverTissue);
 
         // add mouseover handler to tissue label
-        el = _svgDoc.getElementById(tis + "_Text_Hi");
-        if (el !== null) {
-            el.addEventListener("click", onMapClickToggleTissue);
-            el.addEventListener("mouseenter", onMapHoverTissue);
-            el.addEventListener("mouseleave", onMapHoverTissue);
+        textEl = _svgDoc.getElementById(tis + "_Text_Hi");
+        if (textEl !== null) {
+            textEl.addEventListener("click", onMapClickToggleTissue);
+            textEl.addEventListener("mouseenter", onMapHoverTissue);
+            textEl.addEventListener("mouseleave", onMapHoverTissue);
             // mouseover, mouseout ?
         }
         // add mouseover handler to tissue shape
-        el = _svgDoc.getElementById(tis + "_Pic_Lo");
-        if (el !== null) {
-            el.addEventListener("click", onMapClickToggleTissue);
-            el.addEventListener("mouseenter", onMapHoverTissue);
-            el.addEventListener("mouseleave", onMapHoverTissue);
+        picEl = _svgDoc.getElementById(tis + "_Pic_Lo");
+        if (picEl !== null) {
+            picEl.addEventListener("click", onMapClickToggleTissue);
+            picEl.addEventListener("mouseenter", onMapHoverTissue);
+            picEl.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() {