94ae7e1c166c598a2e7ea7659eff36efd332fbfe kate Wed Nov 9 17:09:23 2016 -0800 Prune long lines. refs #17369 diff --git src/hg/js/hgGtexTrackSettings.js src/hg/js/hgGtexTrackSettings.js index e78edc4..33ab0ce 100644 --- src/hg/js/hgGtexTrackSettings.js +++ src/hg/js/hgGtexTrackSettings.js @@ -7,32 +7,32 @@ // The page contains an SVG format illustration of a human body with tissues, // and a companion list of the same tissues. The tissues are based on the GTEx Project, and total 53. // // Users can interact with either the illustration or the list, and any selections they make will be // reflected in the other. The interactions are click (select/unselect) or hover (highlight the tissue // in the body map). There are 53 total tissues -- the GTEx Consortium set. Tissue abbreviations and // colors used in the UI are from the hgFixed.gtexTissue table. // // Each tissue is represented in the SVG by: // 1. shape <path id=$tissue_Pic_Lo> // 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 +// 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 var _topAura; var TEXT_HI = '_Text_Hi'; var LEAD_HI = '_Lead_Hi'; var AURA_HI = '_Aura_Hi'; var PIC_HI = '_Pic_Hi'; @@ -99,31 +99,32 @@ 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'); colorPatch.css('background-color', tisColor); - colorPatch.removeClass('tissueNotSelectedColor'); // TODO: less obfuscated approach to colored border + colorPatch.removeClass('tissueNotSelectedColor'); + // 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); @@ -196,31 +197,32 @@ if (lineEl !== null) { // cell types lack leader lines lineEl.style.stroke = COLOR_HIGHLIGHT; } $(pic).show(); $(aura).show(); var topAura = auraEl.cloneNode(true); topAura.id = 'topAura'; _topAura = _svgRoot.appendChild(topAura); var topTissue = picEl.cloneNode(true); topTissue.id = 'topTissue'; topTissue.classList.add(tis); _topTissue = _svgRoot.appendChild(topTissue); } else { - var color = textEl.classList.contains(CLASS_TISSUE_SELECTED) ? COLOR_SELECTED : COLOR_UNSELECTED; + 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; } $(aura).hide(); $(pic).hide(); if (lineEl !== null) { // cell types lack leader lines lineEl.style.stroke = COLOR_LEADER; // pink } _svgRoot.removeChild(_topTissue); _svgRoot.removeChild(_topAura); } } // Event handlers