936eb3cbf8b163d420be36aa98beccd665ded1b3
kate
  Thu Nov 17 15:55:06 2016 -0800
Add event handlers to color patches in tissue table (friendlier). refs #17369

diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js
index 6317c6f..2c87902 100644
--- src/hg/js/hgGtexTrackSettings.js
+++ src/hg/js/hgGtexTrackSettings.js
@@ -249,51 +249,51 @@
         }
     }
 
     // Event handlers
 
     function onClickSetAll() {
         // Set all on body map and tissue list
         tissues.forEach(setTissue);
     }
 
     function onClickClearAll() {
         // Clear all on body map and tissue list
         tissues.forEach(clearTissue);
     }
 
-    function onClickToggleTissue(tis) {
+    function onClickToggleTissue(ev) {
         // Select/unselect from tissue list
-        tis = this.id;  // arg bad
+        tis = ev.data;
         toggleTissue(tis);
     }
 
     function onMapClickToggleTissue(ev) {
         // Select/unselect from illustration
         var svgId = ev.currentTarget.id;
         var tis = tissueFromSvgId(svgId);
         toggleTissue(tis);
     }
 
-    function onEnterTissue() {
+    function onEnterTissue(ev) {
         // Mouseover on label in tissue list
-        highlightTissue(this.id);
+        highlightTissue(ev.data);
     }
 
-    function onLeaveTissue() {
+    function onLeaveTissue(ev) {
         // Mouseover on label in tissue list
-        unHighlightTissue(this.id);
+        unHighlightTissue(ev.data);
     }
 
     function onMapEnterTissue(ev) {
         // Mouseover on tissue shape or label in illustration
         var svgId = ev.currentTarget.id;
         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
@@ -335,32 +335,40 @@
                 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
 
         // Add click and mouseover handler to tissue label in tissue list
-        $('#' + tis).click(tis, onClickToggleTissue);
-        $('#' + tis).hover(onEnterTissue, onLeaveTissue);
+        var $tis = $('#' + tis);
+        $tis.click(tis, onClickToggleTissue);
+        $tis.mouseenter(tis, onEnterTissue);
+        $tis.mouseleave(tis, onLeaveTissue);
+
+        // Add click and mouseover handler to color patch in tissue list
+        var $colorPatch = $tis.prev('.' + CLASS_TISSUE_COLOR_PATCH);
+        $colorPatch.click(tis, onClickToggleTissue);
+        $colorPatch.mouseenter(tis, onEnterTissue);
+        $colorPatch.mouseleave(tis, onLeaveTissue);
 
         // Add mouseover and click handlers to tissue label in body map
         var textEl = _svgDoc.getElementById(tis + TEXT_HI);
         if (textEl !== null) {
             textEl.addEventListener('click', onMapClickToggleTissue);
             textEl.addEventListener('mouseenter', onMapEnterTissue);
             textEl.addEventListener('mouseleave', onMapLeaveTissue);
         }
         // add mouseover and click handlers to tissue shape
         var picEl = _svgDoc.getElementById(tis + PIC_LO);
         if (picEl !== null) {
             picEl.addEventListener('mouseenter', onMapEnterTissue);
             picEl.addEventListener('mouseleave', onMapLeaveTissue);
             picEl.addEventListener('mouseup', onMapClickToggleTissue);
         }