7954dd893957d502a0e35ca36fb4f4dc55d265e6
tdreszer
  Fri May 17 15:55:44 2013 -0700
Significant changes to the UI as negotiated with Brooke, Pauline and B0b
diff --git src/hg/js/alleles.js src/hg/js/alleles.js
index 542005f..aa4347c 100644
--- src/hg/js/alleles.js
+++ src/hg/js/alleles.js
@@ -106,42 +106,30 @@
             var col = $('table#alleles').find('TH#' + persistSortColId);
             if (col != undefined && col.length != 0) {
                 var colIx = Number( $(col).attr('cellIndex') );
                 $(col).click();
                 if (persistSortReverse) {// click twice if reverse order!
                     persistSortReverse = false; // Needed so that it is set again
                     setTimeout("$('table#alleles').find('TH#" + persistSortColId + 
                                                                           "').click();", 50);
                 }
             }
         }
         
         // Make sure that sort command saves the coumn for persistence
         $('table#alleles').find('TH').click(function (e) { afterSort(this); });
         
-        /*
-        // Want to show rare haplotypes if they were seen before ajax update
-        if (persistRareHapsShown) {
-            alleles.rareAlleleToggle( $('input#' + sectionName + "_rareHaps"), false );
-        }
-        
-        // Want to show scores if they were seen before ajax update
-        if (persistScoresShown) {
-            alleles.scoresToggle( $('input#' + sectionName + "_score"), false );
-        } 
-        */
-        
         // Persist on lighlite as red
         if (hiliteId != '')
             hiliteSpecial( hiliteId );
     }
 
     function propgateTitle(obj)
     { // Adds this objects title to all other objs with the same class
       // Relies upon a span and fixed width text
         // Find pointer position within text
     
         // Is there a title?
         var theTitle = obj.title;
         if (theTitle == undefined || theTitle.length === 0)
             return;
 
@@ -157,35 +145,44 @@
         return "hilite" + xPx.toFixed(0) + "-" + widthPx.toFixed(0);
     }
     
     function hiliteAdd(xPx, widthPx, yPx, heightPx)
     {   // Adds a hilite div with the specific dimensions.
         // Returns the div for further customization
         if (xPx === 0)
             return;
     
         // make sure it doesn't already exist!
         var hId = hiliteTag(xPx,widthPx);
         if (hilites.indexOf(hId) != -1)
             return hId;
         
         var tbl = $('table#alleles');
+        var tripleView = ($(tbl).find('TD.dnaToo').length > 0);
         
-        if (yPx == undefined)
-            yPx = $(tbl).position().top + 2;
-        if (heightPx == undefined || heightPx === 0)
-            heightPx = $(tbl).height() - 8;
+        if (yPx == undefined) {
+            if (tripleView)
+                yPx = $(tbl).position().top + 2;  // span whole height of table
+            else
+                yPx = $(tbl).find('TH#seq').position().top; // skip first row of header
+        }
+        if (heightPx == undefined || heightPx === 0) {
+            if (tripleView)
+                heightPx = $(tbl).height() - 8;  // span whole height of table
+            else
+                heightPx = $(tbl).height() - (2 * $(tbl).find('TH#seq').height()) + 4;
+        }
         
         var div = $("<div class='hilite' id='"+hId+"' style='display:none' />");
         $(tbl).after(div);
         $(div).css({ width: widthPx + 'px', height: heightPx + 'px', 
                       left: xPx     + 'px',    top: yPx      + 'px'});
         $(div).show();
         
         hilites.push( hId );
 
         return div;
     }
     
     function hiliteRemove(id)
     {   // removes a specific hilite or all hilite divs if id is not supplied. 
         if (id == undefined || id === "") {
@@ -210,33 +207,30 @@
     function hilitesResize()
     {   // resizes all hilite divs based upon the table height 
         // In theory just changing height will work.  In practice, need to recalc all
         //$('div.hilite').css('height',($('table#alleles').height() - 4) + 'px');
         if (hilites.length > 0) {
             hiliteRemove();
             hiliteAllDiffs();
             if (hiliteId != '')
                 hiliteSpecial( hiliteId );
         }
     }
     
     function hiliteAllDiffs()
     {   // Adds all hilites
     
-        // TODO:
-        // - handle indels
-    
         // Don't even bother if full sequence isn't showing
         var fullSeq = $('input#'+sectionName+'_fullSeq');
         if (fullSeq.length != 0 && $(fullSeq).val().indexOf('Hide') === -1)
             return;
         
         // DNA view or AA view?
         var spans;
         var dnaView = $('input#'+sectionName+'_dnaView');
         if (dnaView != undefined && $(dnaView).val().indexOf('DNA') === -1) {
             spans = $('table#alleles').find('TH.seq').find('B');
         } else { // AA view
             spans = $('table#alleles').find('TH.seq').find('span');
         }
         // At this point, hilighting should be identical
         $(spans).each(function (ix) {
@@ -294,35 +288,41 @@
                 var counts = $(trs).filter(':visible').length + ' of ' + $(trs).length + ".";
                 $('span#alleleCounts').text( 'Common gene haplotypes shown: ' + counts );
                 $('span#alleleCounts').removeClass('textAlert'); 
                 $(btn).val('Show rare haplotypes');
                 if (setCart == undefined || setCart)
                     setCartVar(btn.id,'[]');
             }
             hilitesResize();
         },
         
         scoresToggle: function (btn,setCart)
         { // toggle the visibility of scores
             persistScoresShown = ($(btn).val().indexOf('Show') != -1);
             if (persistScoresShown) {
                 $('table#alleles').find('.score').removeClass('hidden');
+                $('table#alleles').find('.andScore').each(function (ix) { 
+                    $(this).attr('colspan',Number($(this).attr('colspan')) + 1);
+                });
                 $(btn).val('Hide scoring');
                 if (setCart == undefined || setCart)
                     setCartVar(btn.id,'1');
             } else {
                 $('table#alleles').find('.score').addClass('hidden');
+                $('table#alleles').find('.andScore').each(function (ix) { 
+                    $(this).attr('colspan',Number($(this).attr('colspan')) - 1);
+                });
                 $(btn).val('Show scoring');
                 if (setCart == undefined || setCart)
                     setCartVar(btn.id,'[]');
             }
             hilitesResize();
         },
         
         scoresShow: function (obj,val)
         { // toggle the visibility of scores
             persistScoresShown = (val == 'set');
             if (persistScoresShown) {
                 $('table#alleles').find('.score').removeClass('hidden');
                 $(obj).val('[]');
             } else {
                 $(obj).val('set');
@@ -342,65 +342,67 @@
                 //$(obj).val('[]');
             } else {
                 $(obj).val('set');
                 $('table#alleles').find('.pop').addClass('hidden');
             }
             setCartVar(obj.id,val);
             hilitesResize();
         },*/
         
         setAndRefresh: function  (varName,val)
         { // Resets all display options to defaults
             ajaxRequest(varName + '=' + val);
             return false; // Fake link
         },
         
+        delayedHilites: function ()
+        { // Delayed call of private function
+            hiliteAllDiffs();
+        },
+        
         initialize: function  (sectionId)
         { // Initialize or reinitailze (after ajax) the sortable table
         
             // This whole section could be renamed
             //if (sectionId != undefined && sectionId.length !== 0)
             //    sectionName = sectionId;
             
             initSortTable();
             
             var tbl = $('table#alleles');
             $(tbl).find('TH.var').each(function (ix) { 
                 propgateTitle(this); 
             });
             
             // Calculate some useful constants:
             seqCharsPerPos = 1; // Most cases
             var tripletButton = normed( $('input#'+sectionName+'_triplets') );
             if (tripletButton != undefined && $(tripletButton).val().indexOf('Show') === -1)
                 seqCharsPerPos = 3;
             seqPxPerPos = 7;
             var fullSeqHeader = normed( $(tbl).find('TH.seq') );
-            if (fullSeqHeader != undefined)
-                {
+            if (fullSeqHeader != undefined) {
                 var seqLen = $(fullSeqHeader).text().length;
-                if (seqCharsPerPos === 3)
-                    seqLen /= 2;
+                //if (seqCharsPerPos === 3)
+                //    seqLen /= 2;
                 seqPxPerPos = Math.round( $(fullSeqHeader).width() / (seqLen / seqCharsPerPos));
                 if ($.browser.msie) 
                     seqPxPerPos = $(fullSeqHeader).width() / (seqLen / seqCharsPerPos);
-                    //seqPxPerPos += 0.075; 
-                
                 }
             
             // Highlight variants in full sequence
-            hiliteAllDiffs();
+            setTimeout("alleles.delayedHilites()", 200);  // Delay till after page settles
             
             // Want to sort on previos column if there was a sort before ajax update
             persistThroughUpdates();
         }
         
     };
 }()); // end & invocation of function that makes alleles
 
 // The following js depends upon the jQuery library
 $(document).ready(function()
 {
     // Gene Alleles table is sortable
     alleles.initialize();
 
 });