8a64798246e9ce75f8ce7c350096ef2f0c6532f6
kate
  Tue Oct 25 16:57:02 2016 -0700
Improve mouseover viz.  Draw tissue and highlight last so they pop to top. refs #17369

diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js
index 0be7c33..a4164b6 100644
--- src/hg/js/hgGtexTrackSettings.js
+++ src/hg/js/hgGtexTrackSettings.js
@@ -1,27 +1,29 @@
 // Module: gtexTrackSettings
 
 
 var gtexTrackSettings = (function() {
 
     // Data
     
     // SVG has its own DOM
     var _svgDoc;
     var _svgRoot;
     var _htmlDoc;
     var _htmlRoot;
+    var _topTissue;
+    var _topAura;
 
     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'
     ];
 
@@ -139,47 +141,59 @@
             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) {
             return;
         }
         el.classList.toggle('tissueHovered');
         var line = $("#" + tis + "_Lead_Hi", _svgRoot);
         var pic = $("#" + tis + "_Pic_Hi", _svgRoot);
         var white = $("#" + tis + "_Aura_Hi", _svgRoot);
         var count = el.childElementCount;
+        var hiEl = _svgDoc.getElementById(tis + '_Pic_Hi');
+        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();
             $(pic).show();
             $(white).show();
+
+            var topAura = auraEl.cloneNode(true);
+            topAura.id = "topAura";
+            _topAura = _svgRoot.appendChild(topAura);
+        
+            var topTissue = hiEl.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;
             }
             $(white).hide();
             $(pic).hide();
             $(line).hide();
+            _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) {