f16abb2f99276fcf1811ef04f4f767ce1631c4c7
kate
  Wed Nov 16 16:27:45 2016 -0800
Cleanup CSS. refs #17369

diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js
index f03064e..7396d2c 100644
--- src/hg/js/hgGtexTrackSettings.js
+++ src/hg/js/hgGtexTrackSettings.js
@@ -17,51 +17,57 @@
 //      2. highlighted shape    <path id=$tissue_Pic_Hi>
 //      3. highlight surround   <path id=$tissue_Aura_Hi>
 //      4. label                <text id=$tissue_Text_Hi>
 //      5. leader line          <line | polyline id=$tissue_Lead_Hi>
 //
 // Implementation note: jQuery is used below where effective.  Some SVG manipulation 
 //  (e.g. add/remove/toggle classes) don't work from jQuery, so code for that is raw javascript
 
 var gtexTrackSettings = (function() {
 
     // Globals
     
     var _svgDoc;        // SVG has its own DOM
     var _svgRoot;
 
-    var _topTissue;     // Highlighted tissue is drawn last so it is on top
+    // Highlighted tissue is drawn last so it is on top
+    var _topTissueId = 'topTissue';
     var _topTissueName = null;
-    var _topAura;
+    var _topTissue;     // element
+    var _topAura;       // element
 
     var TEXT_HI = '_Text_Hi';
     var LEAD_HI = '_Lead_Hi';
     var AURA_HI = '_Aura_Hi';
     var PIC_HI = '_Pic_Hi';
     var PIC_LO = '_Pic_Lo';
 
     var COLOR_BLACK = 'black';
     var COLOR_SELECTED = COLOR_BLACK;
     var COLOR_BLUE = 'blue';
     var COLOR_HIGHLIGHT = COLOR_BLUE;
     var COLOR_GRAY = '#737373';
     var COLOR_UNSELECTED = COLOR_GRAY;
     var COLOR_PINK = '#F69296';
     var COLOR_LEADER = COLOR_PINK;
 
-    var CLASS_TISSUE_SELECTED = 'tissueSelected';
-    var CLASS_TISSUE_HOVERED = 'tissueHovered';
+    var CLASS_TISSUE_SELECTED = 'gbmTissueSelected';
+    var CLASS_TISSUE_HOVERED = 'gbmTissueHovered';
+    var CLASS_TISSUE_LABEL = 'gbmTissueLabel';
+    var CLASS_TISSUE_COLOR_PATCH = 'gbmTissueColorPatch';
+    var CLASS_TISSUE_HOVERED_COLOR = 'gbmTissueHoveredColor';
+    var CLASS_TISSUE_UNSELECTED_COLOR = 'gbmTissueNotSelectedColor';
 
     // 53 tissues from GTEx, as in hgTracks.gtexTissue table
     // TODO: Consider generating this list during make, to an auxiliary .js file
     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'
@@ -97,55 +103,55 @@
             return;
         }
         el.style.fill = COLOR_UNSELECTED;
         var count = el.childElementCount;
         for (var i = 0; i < count; i++) {
             el.children[i].style.fill = COLOR_UNSELECTED;
         }
     }
 
     function setTissue(tis) {
         // Mark selected in tissue list and body map
         var $tis = $('#' + tis);
         $tis.addClass(CLASS_TISSUE_SELECTED);
 
         // Change appearance of color patch in tissue list
-        var colorPatch = $tis.prev('.tissueColor');
-        var tisColor = colorPatch.data('tissueColor');
+        var colorPatch = $tis.prev('.' + CLASS_TISSUE_COLOR_PATCH);
+        var tisColor = colorPatch.data('tissueColor');  // data function prefixes 'data-' to class
         colorPatch.css('background-color', tisColor);
-        colorPatch.removeClass('tissueNotSelectedColor'); 
+        colorPatch.removeClass(CLASS_TISSUE_UNSELECTED_COLOR); 
                 // TODO: less obfuscated approach to colored border
 
         // Set hidden input checkbox, for cart
         $('#' + tis + ' > input').attr('checked', true);
 
         // Change appearance of label in body map
         var el = _svgDoc.getElementById(tis + TEXT_HI);
         if (el !== null) {
             el.classList.add(CLASS_TISSUE_SELECTED);
             setMapTissueElColor(el);
         }
     }
 
     function clearTissue(tis) {
         // Unselect in tissue table and body map
         var $tis = $('#' + tis);
         $tis.removeClass(CLASS_TISSUE_SELECTED);
 
         // Change appearance of color patch in tissue list
-        colorPatch = $tis.prev('.tissueColor');
-        colorPatch.addClass('tissueNotSelectedColor');
+        colorPatch = $tis.prev('.' + CLASS_TISSUE_COLOR_PATCH);
+        colorPatch.addClass(CLASS_TISSUE_UNSELECTED_COLOR);
 
         // Clear hidden input checkbox
         $('#' + tis + ' > input').attr('checked', false);
 
         // Change appearance of label in body map
         var el = _svgDoc.getElementById(tis + TEXT_HI);
         if (el !== null) {
             el.classList.remove(CLASS_TISSUE_SELECTED);
             clearMapTissueElColor(el);
         }
     }
 
     function toggleTissue(tis) {
         // Select/unselect tissue in list and body map
         var $tis = $('#' + tis);
@@ -166,69 +172,69 @@
         toggleHighlightTissue(tis, false);
     }
 
     function toggleHighlightTissue(tis, isHovered) {
         // Highlight/unhighlight tissue in body map and tissue table
 
         // Highlight tissue label and color patch in tissue table
         var $tis = $('#' + tis);
         if (tis === null) {
             return;
         }
         if (isHovered && _topTissueName !== null) {
             return;
         }
         $tis.toggleClass(CLASS_TISSUE_HOVERED, isHovered);
-        var $colorPatch = $tis.prev('.tissueColor');
-        $colorPatch.toggleClass('tissueHoveredColor', isHovered);
+        var $colorPatch = $tis.prev('.' + CLASS_TISSUE_COLOR_PATCH);
+        $colorPatch.toggleClass(CLASS_TISSUE_HOVERED_COLOR, isHovered);
 
         // Highlight tissue in body map by changing text appearance, visually moving organ to top
         // and adding a white (or sometimes blue if white background) surround ('aura')
 
         // Highlight tissue label in body map
         // TODO:  Try jQuery here
-        textEl = _svgDoc.getElementById(tis + TEXT_HI);
+        var textEl = _svgDoc.getElementById(tis + TEXT_HI);
         if (textEl === null) {
             return;
         }
         // TODO: unify with text styling below.  Perhaps just add class to children will do it.
         textEl.classList.toggle(CLASS_TISSUE_HOVERED, isHovered);
 
         var lineEl = _svgDoc.getElementById(tis + LEAD_HI);
         var pic = $('#' + tis + PIC_HI, _svgRoot);
         var picEl = _svgDoc.getElementById(tis + PIC_HI);
         var aura = $('#' + tis + AURA_HI, _svgRoot);
         var auraEl = _svgDoc.getElementById(tis + AURA_HI);
         var textLineCount = textEl.childElementCount;
         var i;
 
         if (isHovered) {
             textEl.style.fill = COLOR_HIGHLIGHT;
             for (i = 0; i < textLineCount; i++) {
                 textEl.children[i].style.fill = COLOR_HIGHLIGHT;
             }
             if (lineEl !== null) {     // cell types lack leader lines
                 lineEl.style.stroke = COLOR_HIGHLIGHT;
             }
             var topAura = auraEl.cloneNode(true);
             topAura.id = 'topAura';
             _topAura = _svgRoot.appendChild(topAura);
             $(_topAura).show();
         
             var topTissue = picEl.cloneNode(true);
             topTissue.addEventListener('mouseleave', onMapLeaveTissue);
-            topTissue.id = 'topTissue';
+            topTissue.id = _topTissueId;
             _topTissueName = tis;
             _topTissue = _svgRoot.appendChild(topTissue);
             $(_topTissue).show();
         } else {
             var color = textEl.classList.contains(CLASS_TISSUE_SELECTED) ? 
                                 COLOR_SELECTED : COLOR_UNSELECTED;
             textEl.style.fill = color;
             for (i = 0; i < textLineCount; i++) {
                 textEl.children[i].style.fill = color;
             }
             if (lineEl !== null) {     // cell types lack leader lines
                 lineEl.style.stroke = COLOR_LEADER;      // pink
             }
             _svgRoot.removeChild(_topTissue);
             _topTissueName = null;
@@ -262,74 +268,74 @@
     }
 
     function onEnterTissue() {
         // Mouseover on label in tissue list
         highlightTissue(this.id);
     }
 
     function onLeaveTissue() {
         // Mouseover on label in tissue list
         unHighlightTissue(this.id);
     }
 
     function onMapEnterTissue(ev) {
         // Mouseover on tissue shape or label in illustration
         var svgId = ev.currentTarget.id;
-        var tis = (svgId === 'topTissue' ? _topTissueName :  tissueFromSvgId(svgId));
+        var tis = (svgId === _topTissueId ? _topTissueName :  tissueFromSvgId(svgId));
         highlightTissue(tis);
     }
 
     function onMapLeaveTissue(ev) {
         // Mouseover on tissue shape or label in illustration
         var toTarget = ev.relatedTarget;
         var toParent;
 
         //  Handle case where lower and upper shapes are not the same.  If leaving lower to enter upper, we are not really leaving
         if (toTarget) {
-            if (toTarget.id === 'topTissue') {
+            if (toTarget.id === _topTissueId) {
                 return;
             }
             //  Handle case where there are multiple paths for the tissue, and topTissue will be a parent
             toParent = toTarget.parentElement;
-            if (toParent && toParent.id === 'topTissue') {
+            if (toParent && toParent.id === _topTissueId) {
                 return;
             }
         }
         var svgId = ev.currentTarget.id;
-        var tis = (svgId === 'topTissue' ? _topTissueName :  tissueFromSvgId(svgId));
+        var tis = (svgId === _topTissueId ? _topTissueName :  tissueFromSvgId(svgId));
         unHighlightTissue(tis);
     }
 
     function submitForm() {
     // Submit the form (from GO button -- as in hgGateway.js)
     // Show a spinner -- sometimes it takes a while for hgTracks to start displaying.
     $('.gbGoIcon').removeClass('fa-play').addClass('fa-spinner fa-spin');
     $form = $('form');
     $form.submit();
     }
 
     // Initialization
 
     function initTissue(tis) {
         // Set tissue to unhighlighted state
         $('#' + tis + PIC_HI, _svgRoot).hide();
         $('#' + tis + AURA_HI, _svgRoot).hide();
 
         // Mark tissue labels in svg
         var textEl = _svgDoc.getElementById(tis + TEXT_HI);
         if (textEl !== null) {
-            textEl.classList.add('tissueLabel');
+            textEl.classList.add(CLASS_TISSUE_LABEL);
             if ($('#' + tis).hasClass(CLASS_TISSUE_SELECTED)) {
                 textEl.classList.add(CLASS_TISSUE_SELECTED);
                 setMapTissueElColor(textEl);
             }
         }
     }
 
     function initBodyMap() {
         // Set organs to unhighlighted state
         tissues.forEach(initTissue);
     }
 
     function animateTissue(tis) {
         // Add event handlers to body map and tissue list