66f4a4f612d7e7cceed2353d2bff2a120d9beec8
tdreszer
  Thu Jul 21 17:10:04 2011 -0700
Support (in progress) for subtrack vis as separate control.
diff --git src/hg/js/hui.js src/hg/js/hui.js
index 73746e8..1b7ed13 100644
--- src/hg/js/hui.js
+++ src/hg/js/hui.js
@@ -1147,30 +1147,31 @@
     // 1) outside in: matrix and subtrack checkboxes to affect vis
     // 2) Non-configurable will need to show/change vis independently! (separate vis control instead of wrench?)
     // 3) SOLVED: Radio buttons work BUT they require name to keep unified set, so rely upon 'changed' class to detect changes.
     // 4) SOLVED: checkboxes: working with name = boolshad.{name}   FIXME: multishad?
     // 5) SOLVED: filterBy,filterComp working: they rely upon id, and id with '.' screwed it all up.  So replaced '.' with '_-'
     // 6) SOLVED: subCfg not matching parent: solved.
     // 7) SOLVED: OpenChromSynth: subtrack filterby needs to be updated by composite filterBy.
     // 8) Remove debug code when ready
     // NOTE:
     // Current implementation relies upon '.' delimiter in name and no '_-' in name.  Nothing breaks rule yet...
 
     //mySelf: null, // There is no need for a "mySelf" unless this object is being instantiated.
 
     // There is one instance and these vars are page wide
     compositeId: null,
+    visIndependent: false,
     viewIds: [],
 
     markChange: function (obj)
     { // Marks a control as having been changed by the user.  Naming will send value to cart.
         $(obj).addClass('changed');
         if(obj.type.indexOf("radio") != 0) {   // radios must keep their names!
             var oldName = obj.id.replace(/\_\-/g,'.');   // sanitized id replaces '.' with '_-'
             $(obj).attr('name',oldName);
         }
     },
 
     clearChange: function (obj)
     { // Mark as unchanged
         $(obj).removeClass('changed');
         if(obj.type.indexOf("radio") != 0)   // radios must keep their names!
@@ -1650,35 +1651,50 @@
         cleanHtml = cleanHtml.replace(shlurpPattern,"");
         shlurpPattern=/\<script type=\'text\/javascript\'>.*\<\/script\>/gi;
         // DEBUG -------------
             var jsEmbeded = cleanHtml.match(shlurpPattern);
             if (jsEmbeded && jsEmbeded.length > 0)
                 alert("jsEmbeded:'"+jsEmbeded+"'\n---------------\n"+cleanHtml);
         // DEBUG -------------
         cleanHtml = cleanHtml.replace(shlurpPattern,"");
         shlurpPattern=/\<LINK rel=\'STYLESHEET\' href\=\'.*\' TYPE=\'text\/css\' \/\>/gi;
         // DEBUG -------------
             var cssFiles = cleanHtml.match(shlurpPattern);
             if (cssFiles && cssFiles.length > 0)
                 alert("cssFiles:'"+cssFiles+"'\n---------------\n"+cleanHtml);
         // DEBUG -------------
         cleanHtml = cleanHtml.replace(shlurpPattern,"");
+        if (scm.visIndependent) {
+            ix = cleanHtml.indexOf('</SELECT>');
+            if (ix > 0)
+                cleanHtml = cleanHtml.substring(ix+'</SELECT>'.length);
+            while(cleanHtml.length > 0) {
+                ix = cleanHtml.search("<");
+                cleanHtml = cleanHtml.substring(ix);
+                ix = cleanHtml.search(/\<BR\>/i);
+                if (ix != 0)
+                    break; // Not found or not at start.
+                else
+                    cleanHtml = cleanHtml.substring(4); // skip past <BR> and continue
+            }
+        } else {
         var ix = cleanHtml.indexOf('<B>Display&nbsp;mode:&nbsp;</B>');
         if (ix > 0)
             cleanHtml = cleanHtml.substring(ix+'<B>Display&nbsp;mode:&nbsp;</B>'.length);
+        }
             //cleanHtml = cleanHtml.substring(ix);
-        ix = cleanHtml.indexOf('</FORM>');
+        ix = cleanHtml.indexOf('</FORM>'); // start of form already chipped off
         if (ix > 0)
             cleanHtml = cleanHtml.substring(0,ix - 1);
 
         //cleanHtml = "<div class='blueBox' style='background-color:#FFF9D2; padding:0.2em 1em 1em; float:left;'><CENTER><B>Subtrack Configuration</B></CENTER><BR>" + cleanHtml + "</div>"
         //cleanHtml = "<div class='blueBox' style='background-color:#FFF9D2; padding:0.2em 1em 1em; float:left;'><B>Subtrack visibility:</B>&nbsp;" + cleanHtml + "</div>"
         cleanHtml = "<div class='blueBox' style='background-color:#FFF9D2; padding:0.5em 1em 1em;'>" + cleanHtml + "</div>"
         $(cfg).html(cleanHtml);
         $(cfg).addClass('filled');
         var boxWithin = $(cfg).find('.blueBox');
         if (boxWithin.length > 1)
             $(boxWithin[1]).removeClass('blueBox');
 
         //$(cfg).html("<div style='font-size:.9em;'>" + cleanHtml + "</div>");
         var subObjs = $(cfg).find('input,select').filter("[name]");
         if (subObjs.length == 0) {
@@ -1705,59 +1721,95 @@
                         });
                     }
                 } else {//if (this.type == 'hidden') {
                     // Special for checkboixes with name = boolshad.{name}.
                     if ("boolshad." == this.name.substring(0,9)) {
                         scm.unnameIt(this,true);
                     }
                 }
             }
         });
         // finally show
         $(cfg).show();
         // Tricks to get this in the size and position I want
         $(cfg).css({ position: 'absolute'});
         var myWidth = $(cfg).width();
-        var shiftLeft = ($(cfg).position().left - 40) * -1;
+        var shiftLeft = -1;
+        if (scm.visIndependent)
+            shiftLeft *= ($(cfg).position().left - 125);
+        else
+            shiftLeft *= ($(cfg).position().left - 40);
         $(cfg).css({ width: myWidth+'px',position: 'relative', left: shiftLeft + 'px' });
 
         // Setting up filterBys must follow show because sizing requires visibility
         if (newJQuery) {
             $(cfg).find('.filterBy,.filterComp').each( function(i) {
                 if ($(this).hasClass('filterComp'))
                     ddcl.setup(this);
                 else
                     ddcl.setup(this, 'noneIsAll');
             });
         }
     },
+
     cfgPopulate: function (cfg,subtrack)
     { // Populates a subtrack cfg dialog via ajax and update from composite/view parents
         scm.currentCfg = cfg;
 
         $.ajax({
             type: "GET",
             url: "../cgi-bin/hgTrackUi?ajax=1&g=" + subtrack + "&hgsid=" + getHgsid() + "&db=" + getDb(),
             dataType: "html",
             trueSuccess: scm.cfgFill,
             success: catchErrorOrDispatch,
             error: errorHandler,
             cmd: "cfg",
             cache: false
         });
     },
 
+    replaceWithVis: function (obj,subtrack,open)
+    { // Replaces the current fauxVis object with a true visibility selector
+
+        var selectHtml = "<SELECT id='"+subtrack+"' class='normalText subVisDD' style='width: 70px'>";
+        var selected = $(obj).text();
+        if (selected == 'hide')
+            selectHtml += "<OPTION SELECTED>hide</OPTION><OPTION>dense</OPTION><OPTION>squish</OPTION><OPTION>pack</OPTION><OPTION>full</OPTION>";
+        else if (selected == 'dense')
+            selectHtml += "<OPTION>hide</OPTION><OPTION SELECTED>dense</OPTION><OPTION>squish</OPTION><OPTION>pack</OPTION><OPTION>full</OPTION>";
+        else if (selected == 'squish')
+            selectHtml += "<OPTION>hide</OPTION><OPTION>dense</OPTION><OPTION SELECTED>squish</OPTION><OPTION>pack</OPTION><OPTION>full</OPTION>";
+        else if (selected == 'full')
+            selectHtml += "<OPTION>hide</OPTION><OPTION>dense</OPTION><OPTION>squish</OPTION><OPTION>pack</OPTION><OPTION SELECTED>full</OPTION>";
+        else
+            selectHtml += "<OPTION>hide</OPTION><OPTION>dense</OPTION><OPTION>squish</OPTION><OPTION>pack</OPTION><OPTION>full</OPTION>";
+        selectHtml += "</SELECT>";
+        $(obj).replaceWith(selectHtml);
+        if (open) {
+            var newObj = $('select#'+subtrack);
+            $(newObj).attr('size',5)
+            $(newObj).one('blur',function (e) {
+                $(this).attr('size',1);
+                $(this).unbind()
+            });
+            $(newObj).one('change',function (e) {
+                $(this).attr('size',1);
+            });
+            $(newObj).focus();
+        }
+    },
+
     cfgToggle: function (subtrack)
     { // Opens/closes subtrack cfg dialog, populating if empty
         var cfg = $("div#div_cfg_"+subtrack);
         if (cfg == undefined || cfg.length == 0) {
             warn("Can't find div_cfg_"+subtrack);
             return false;
         }
         if (cfg.length == 1)
             cfg = cfg[0];
 
         if ($(cfg).css('display') == 'none') {
             // Don't allow if this composite is not enabled!
             // find the cb
             var tr = $(cfg).parents('tr').first();
             var subCb = $(tr).find("input[name='"+subtrack+"_sel']");
@@ -1813,30 +1865,31 @@
             warn('Did not find visibility control for view: ' + viewId);
             return;
         }
         if (visObj.length == 1)
             visObj = visObj[0];
         scm.unnameIt(visObj,true);
         $(visObj).bind('change',function (e) {
             scm.propagateVis(visObj,viewId);
         });
     },
 
     initialize: function ()
     { // unnames all composite controls and then all view controls
         // mySelf = this; // There is no need for a "mySelf" unless this object is being instantiated.
         scm.compositeId = $('.visDD').first().attr('name');
+        scm.visIndependent = ($('.subVisDD').length > 0);
 
         // Find all appropriate controls and unname
 
         // matCBs are easy, they never get named again
         var matCbs = $('input.matCB');
         $(matCbs).each(function (i) {
             scm.unnameIt(this,false);
         });
 
         // Now vis control
         var visObj = $("select[name='"+scm.compositeId+"']");
         if (visObj == undefined || visObj.length == 0) {
             warn('Did not find visibility control for composite.');
             return;
         }