4275e302d217370b4eb756d45842f03e1ada9ae1
kate
  Tue Nov 8 11:50:38 2016 -0800
Changes to colorPatch in tissue table to better distinguish selected tissues: switch to white patch with tissue color border.   Also fix to problem with select/deselect of tissues from SVG. refs #17369

diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js
index a2194d0..91515ce 100644
--- src/hg/js/hgGtexTrackSettings.js
+++ src/hg/js/hgGtexTrackSettings.js
@@ -54,96 +54,93 @@
         // 
     }
 
     function initBodyMap(svg, doc) {
         // Set organs to unhighlighted state
         tissues.forEach(initTissue);
     }
 
 
     function onClickToggleTissue(tis) {
         // mark selected in tissue table
         tis = this.id;  // arg bad
         $(this).toggleClass('tissueSelected');
 
         // 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)
+        // May need a shim so this works on IE9 and Opera mini (as of Dec 2014)
         // https://martinwolf.org/blog/2014/12/adding-and-removing-classes-from-svg-elements-with-jquery
         var el = _svgDoc.getElementById(this.id + '_Text_Hi');
         if (el !== null) {
             el.classList.toggle('tissueSelected');
             if ($(this).hasClass('tissueSelected')) {
                 onClickSetTissue(tis);
             } else {
                 onClickClearTissue(tis);
             }
         }
     }
 
     function onMapClickToggleTissue(ev) {
-        var isOn = false;
         var svgId = ev.target.id;
-        var tis = tissueFromSvgId(svgId);
-        var el = _htmlDoc.getElementById(tis);
+        var el = _svgDoc.getElementById(svgId);
         if (el !== null) {
             el.classList.toggle('tissueSelected');
         }
+        var tis = tissueFromSvgId(svgId);
+        el = _htmlDoc.getElementById(tis);
+        if (el !== null) {
+            el.classList.toggle('tissueSelected');
             if (el.classList.contains('tissueSelected')) {
-            isOn = true;
                 onClickSetTissue(tis);
             } else {
                onClickClearTissue(tis);
             }
-        // below can likely replace 3 lines after
-        //this.classList.toggle('tissueSelected');
-        el = _svgDoc.getElementById(svgId);
-        if (el !== null) {
-            el.classList.toggle('tissueSelected');
-            if (isOn) {
-                el.style.fill = "black";
-            } else {
-                el.style.fill = "#737373";
-            }
         }
     }
 
     function setMapTissueEl(el) {
         // set label dark
         if (el !== null) {
             el.classList.add('tissueSelected');
             el.style.fill = "black";
             var count = el.childElementCount;
             for (var i = 0; i < count; i++) {
                 el.children[i].style.fill = "black";
             }
         }
     }
 
     function onClickSetTissue(tis) {
         // mark selected in tissue table
         var $tis = $('#' + tis);
         $tis.addClass('tissueSelected');
+        var colorPatch = $tis.prev(".tissueColor");
+        colorPatch.removeClass('tissueNotSelectedColor');
+        var tisColor = colorPatch.data('tissueColor');
+        colorPatch.css('background-color', tisColor);
         var $checkbox = $('#' + tis + ' > input');
         $checkbox.attr("checked", true);
         var el = _svgDoc.getElementById(tis + "_Text_Hi");
         setMapTissueEl(el);
     }
 
     function onClickClearTissue(tis) {
-        // mark selected in tissue table
+        // unselect in tissue table
         var $tis = $('#' + tis);
         $tis.removeClass('tissueSelected');
+        colorPatch = $tis.prev(".tissueColor");
+        colorPatch.addClass('tissueNotSelectedColor');
         var $checkbox = $('#' + tis + ' > input');
         $checkbox.attr("checked", false);
         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) {
@@ -224,42 +221,42 @@
 
     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 textEl;
         var picEl;
         $('#' + tis).click(tis, onClickToggleTissue);
         $('#' + tis).hover(onHoverTissue, onHoverTissue);
 
-        // add mouseover handler to tissue label
+        // add mouseover and click handlers to tissue label
         textEl = _svgDoc.getElementById(tis + "_Text_Hi");
         if (textEl !== null) {
             if ($('#' + tis).hasClass('tissueSelected')) {
                 setMapTissueEl(textEl);
             }
             textEl.addEventListener("click", onMapClickToggleTissue);
             textEl.addEventListener("mouseenter", onMapHoverTissue);
             textEl.addEventListener("mouseleave", onMapHoverTissue);
             // mouseover, mouseout ?
         }
-        // add mouseover handler to tissue shape
+        // add mouseover and click handlers to tissue shape
         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);