a0901833881cdac3b2d194b91ccbfa484bac3df0
kate
  Sat Oct 8 17:12:14 2016 -0700
Animate arteryAorta example mouseover ( leader line and white outline on hover ) . refs #17369

diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js
index db26e17..94413a2 100644
--- src/hg/js/hgGtexTrackSettings.js
+++ src/hg/js/hgGtexTrackSettings.js
@@ -14,50 +14,51 @@
         '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 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();
-        /*
-        line = $("#LL_arteryAorta", svg);
-        $(line).hide();
-        white = $("#WHITE_arteryAorta", svg);
-        $(white).hide();
         */
         // jQuery not working here, maybe figure this out later
         // var label = $("arteryAorta", svg);
         // $(label).css("fill", "blue");
-
-        organ = doc.getElementById('arteryAorta');
+        organ = doc.getElementById('kidneyCortex');
         organ.style.fill = "blue";
+
+        line = $("#LL_arteryAorta", svg);
+        $(line).hide();
+        white = $("#WHITE_arteryAorta", svg);
+        $(white).hide();
     }
 
+
     function onClickToggleTissue(tis) {
         // mark selected in tissue table
         $(this).toggleClass('tableTissueSelected');
 
         // 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);
         if (el !== null) {
             el.classList.toggle('tableTissueSelected');
         }
     }
 
     function onClickSetTissue(tis) {
         // mark selected in tissue table
@@ -68,35 +69,56 @@
         }
     }
 
     function onClickClearTissue(tis) {
         // mark selected in tissue table
         $(tis).removeClass('tableTissueSelected');
         var el = _svgDoc.getElementById(tis);
         if (el !== null) {
             el.classList.remove('tableTissueSelected');
         }
     }
 
     function onHoverTissue() {
         // HTML
         $(this).toggleClass('tissueHovered');
+        var isOn = $(this).hasClass('tissueHovered');
 
         // SVG
         var el = _svgDoc.getElementById(this.id);
         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) {
+                    el.classList.toggle('mapTissueHovered');
+                }
+                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);
     }
 
     function animateTissues() {
         // Add event handlers to tissue table and body map SVG
         tissues.forEach(animateTissue);