03880f57ab6b355ea905067c7e4662eb657e44a0
chmalee
  Mon Aug 26 15:45:07 2024 -0700
Make sub-config hgTrackUi controls not force the schema link outside the web browser window, refs #28083

diff --git src/hg/js/subCfg.js src/hg/js/subCfg.js
index 641e8a8..e7e843d 100644
--- src/hg/js/subCfg.js
+++ src/hg/js/subCfg.js
@@ -542,31 +542,31 @@
                 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 {
             ix = cleanHtml.indexOf('<B>Display&nbsp;mode:&nbsp;</B>');
             if (ix > 0)                            // Excludes vis!
                 cleanHtml = cleanHtml.substring(ix+'<B>Display&nbsp;mode:&nbsp;</B>'.length);
         }
         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.5em 1em 1em;'>"
+        cleanHtml = "<div class='blueBox' style='background-color:#FFF9D2; padding:0.5em 1em 1em; overflow: scroll'>"
                     + cleanHtml + "</div>";
 
         $(cfg).html(cleanHtml);
 
 	appendNonceJsToPage(nonceJs);
 
         $(cfg).addClass('filled');
         var boxWithin = $(cfg).find('.blueBox');
         if (boxWithin.length > 1)
             $(boxWithin[1]).removeClass('blueBox');
 
         var subObjs = $(cfg).find('input,select').filter("[name]");
         if (subObjs.length === 0) {
             warn('DEBUG: Did not find controls for cfg: ' + cfg.id);
             return;
@@ -575,72 +575,52 @@
             if (this.name) { // The filter("[name]") above didn't do it!
                 if (this.type !== 'hidden') {
                     subCfg.inheritSetting(this,false); // updates any values that have been changed
                     var suffix = subCfg.objSuffixGet(this);                         // on this page
                     if (suffix && suffix.length > 0)
                         $(this).change( subCfg.markChange );
                     else
                         warn("DEBUG: couldn't find suffix for subtrack control: "+this.name);
                 }
             }
         });
         // finally show
         $(cfg).show();
         // Tricks to get this in the size and position I want
         $(cfg).css({ position: 'absolute'});
-        var myWidth = $(cfg).width();
+        var maxWidth = $(cfg).parents('table').first()[0].clientWidth;
+        var schemaLink = $(cfg).parents('td').first().next();
+        var schemaLinkWidth = schemaLink !== null ? schemaLink[0].clientWidth : 0;
         var shiftLeft = -1;
         if (subCfg.visIndependent) {
             shiftLeft *= ($(cfg).position().left - 125);
             var subVis = normed($('div#' + subCfg.currentSub+'_faux'));
             if (subVis)
                 subCfg.replaceWithVis(subVis,subCfg.currentSub,false);
         }
         else
             shiftLeft *= ($(cfg).position().left - 40);
-        $(cfg).css({ width: myWidth+'px',position: 'relative', left: shiftLeft + 'px' });
+        // width: set to the config box size - (but shiftLeft is negative so +) the left shift
+        // margin-right: the negative number forces the schema links to stay near where they
+        //     are when the sub-config isn't open
+        $(cfg).css({ width: (maxWidth + shiftLeft) +'px',position: 'relative', left: shiftLeft + 'px', "margin-right": shiftLeft + 'px'});
 
         // Setting up filterBys must follow show because sizing requires visibility
         $(cfg).find('.filterBy').each( function(i) { // Should never be filterComp
             this.id = this.name.replace(/\./g,'_-'); // Must have id unique to page!
             ddcl.setup(this, 'noneIsAll');
         });
-
-        // Adjust cfg box size?
-        // Especially needed for filterBys, but generic in case some other overrun occurs
-        var curRight = $(cfg).offset().left + $(cfg).width();
-        var calcRight = curRight;
-        $(cfg).find(':visible').each( function(i) { // All visible, including labels, etc.
-            var childRight = $(this).offset().left + $(this).width();
-            if (calcRight < childRight)
-                calcRight = childRight;
-        });
-        if (curRight < calcRight) {                       // clip offset but add some for border
-            var cfgWidth = calcRight - $(cfg).offset().left + 16;
-            $(cfg).css({ width: cfgWidth + 'px' });
-
-            // Now containing tables may need adjustment
-            var tables = $(cfg).parents('table');
-            var maxWidth = 0;
-            $(tables).each(function(i) {
-                var myWidth = $(this).width();
-                if (maxWidth < myWidth)
-                    maxWidth = myWidth;
-                else if (maxWidth > myWidth)
-                    $(this).css('width',maxWidth + 'px');
-            });
-        }
     },
 
     cfgPopulate: function (cfg,subtrack)
     { // Populates a subtrack cfg dialog via ajax and update from composite/view parents
         subCfg.currentCfg = cfg;
         subCfg.currentSub = subtrack;
 
         $.ajax({
             type: "GET",
             url: "../cgi-bin/hgTrackUi?ajax=1&g="+subtrack+"&hgsid="+getHgsid()+"&db="+getDb(),
             dataType: "html",
             trueSuccess: subCfg.cfgFill,
             success: catchErrorOrDispatch,
             error: errorHandler,
             cmd: "cfg",