cd093f718a105986a9433d6d99ebd51b6f296805
angie
  Mon Apr 25 15:50:51 2016 -0700
Fix watermark color-switching.  refs #15277 (note 149)
Also add commas to position.

diff --git src/hg/js/hgGateway.js src/hg/js/hgGateway.js
index f3e9801..572cd78 100644
--- src/hg/js/hgGateway.js
+++ src/hg/js/hgGateway.js
@@ -605,31 +605,31 @@
     }
 
     return { draw: draw,
              colors: stripeColors,
              hubColor: hubColor
              };
 }()); // rainbow
 
 
 ///////////////////////////// Module: autocompleteCat /////////////////////////////
 
 var autocompleteCat = (function() {
     // Customize jQuery UI autocomplete to show item categories and support html markup in labels.
     // Adapted from https://jqueryui.com/autocomplete/#categories and
     // http://forum.jquery.com/topic/using-html-in-autocomplete
-    // Also adds watermarm to input.
+    // Also adds watermark to input.
     $.widget("custom.autocompleteCat",
              $.ui.autocomplete,
              {
                _renderMenu: function(ul, items) {
                    var that = this;
                    var currentCategory = "";
                    // There's no this._super as shown in the doc, so I can't override
                    // _create as shown in the doc -- just do this every time we render...
                    this.widget().menu("option", "items", "> :not(.ui-autocomplete-category)");
                    $.each(items,
                           function(index, item) {
                               // Add a heading each time we see a new category:
                               if (item.category && item.category !== currentCategory) {
                                   ul.append("<li class='ui-autocomplete-category'>" +
                                             item.category + "</li>" );
@@ -704,30 +704,31 @@
 
         // Provide default values where necessary:
         options.onSelect = options.onSelect || console.log;
         options.enterSelectsIdentical = options.enterSelectsIdentical || false;
 
         $input.autocompleteCat({
             delay: 500,
             minLength: 2,
             source: autoCompleteSource,
             select: autoCompleteSelect,
             enterSelectsIdentical: options.enterSelectsIdentical,
             enterTerm: options.onEnterTerm
         });
 
         if (options.watermark) {
+            $input.css('color', 'black');
             $input.Watermark(options.watermark, '#686868');
         }
     }
 
     return { init: init };
 }()); // autocompleteCat
 
 
 ///////////////////////////// Module: hgGateway /////////////////////////////
 
 var hgGateway = (function() {
     // Interactive parts of the new gateway page: species autocomplete,
     // graphical species-picker, db select, and position autocomplete.
 
     // Constants
@@ -1139,45 +1140,58 @@
                 stripeTops = rainbow.draw(svg, dbDbTree,
                                           spTree.yTree, spTree.height, spTree.leafTops);
             } else {
                 $('#speciesTreeContainer').html(getBetterBrowserMessage);
             }
             $('#representedSpeciesTitle').show();
             $('#speciesGraphic').show();
             if (dbDbTree && document.createElementNS) {
                 // This needs to be done after things are visible so the slider gets the
                 // right position.
                 initRainbowSlider(spTree.height, rainbow.colors, stripeTops);
             }
         }
     }
 
+    function addCommasToPosition(pos) {
+        // Return seqName:start-end pos with commas inserted in start and end as necessary.
+        var posComma = pos;
+        var fourDigits = /(^.*:.*[0-9])([0-9]{3}\b.*)/;
+        var matches = fourDigits.exec(posComma);
+        while (matches) {
+            posComma = matches[1] + ',' + matches[2];
+            matches = fourDigits.exec(posComma);
+        }
+        return posComma;
+    }
+
     function onSelectGene(item) {
         // Set the position from an autocomplete result;
         // set hgFindMatches and make sure suggestTrack is in pack mode for highlighting the match.
         var newPos = item.id;
+        var newPosComma = addCommasToPosition(newPos);
         var settings;
-        $('#positionDisplay').text(newPos);
+        $('#positionDisplay').text(newPosComma);
         if (uiState.suggestTrack) {
             settings = { 'hgFind.matches': item.internalId };
             settings[uiState.suggestTrack] = 'pack';
             cart.send({ cgiVar: settings });
             cart.flush();
         }
         // Overwrite the selected item w/actual position after the autocomplete plugin is done:
         function overwriteWithPos() {
-            $('#positionInput').val(newPos);
+            $('#positionInput').val(newPosComma);
         }
         window.setTimeout(overwriteWithPos, 0);
     }
 
     function setAssemblyOptions(uiState) {
         var assemblySelectLabel = 'Assembly';
         if (uiState.dbOptions) {
             var html = '', option, i, selected;
             for (i = 0;  i < uiState.dbOptions.length;  i++) {
                 option = uiState.dbOptions[i];
                 selected = (option.value === uiState.db) ? 'selected ' : '';
                 html += '<option ' + selected + 'value="' + option.value + '">' +
                         option.label + '</option>';
             }
             $('#selectAssembly').html(html);
@@ -1260,31 +1274,31 @@
         var weirdDiff = posWidth - $select.outerWidth();
         if (weirdDiff) {
             $select.outerWidth(posWidth + weirdDiff);
         }
         updateGoButtonPosition();
     }
 
     function updateFindPositionSection(uiState) {
         // Update the assembly menu, positionInput and description.
         var suggestUrl = null;
         if (uiState.suggestTrack) {
             suggestUrl = 'hgSuggest?db=' + uiState.db + '&prefix=';
         }
         setAssemblyOptions(uiState);
         if (uiState.position) {
-            $('#positionDisplay').text(uiState.position);
+            $('#positionDisplay').text(addCommasToPosition(uiState.position));
         }
         autocompleteCat.init($('#positionInput'),
                              { baseUrl: suggestUrl,
                                watermark: positionWatermark,
                                onSelect: onSelectGene,
                                enterSelectsIdentical: true,
                                onEnterTerm: goToHgTracks });
         setAssemblyDescriptionTitle(uiState.db, uiState.genome);
         updateDescription(uiState.description);
         if (uiState.db && $('#findPositionContents').css('display') === 'none') {
             initFindPositionContents();
         }
     }
 
     function removeDups(inList, isDup) {
@@ -1406,31 +1420,32 @@
         // Handle the server's response to the setTaxId cartJson command.
         if (checkJsonData(jsonData, 'handleSetTaxId') && jsonData.taxId === uiState.taxId) {
             // Update uiState with new values and update the page:
             _.assign(uiState, jsonData);
             updateFindPositionSection(uiState);
         } else {
             console.log('handleSetTaxId ignoring: ' + jsonData.taxId +
                         ' !== ' + uiState.taxId);
         }
     }
 
     // UI Event Handlers
 
     function clearWatermarkInput($input, watermark) {
         // Note: it is not necessary to re-.Watermark if we upgrade the plugin to version >= 3.1
-        $input.val('').Watermark(watermark);
+        $input.css('color', 'black');
+        $input.val('').Watermark(watermark ,'#686868');
     }
 
     function clearSpeciesInput() {
         // Replace anything typed into the species input with the watermark.
         clearWatermarkInput($('#speciesSearch'), speciesWatermark);
     }
 
     function clearPositionInput() {
         // Replace anything typed into the position input with the watermark.
         clearWatermarkInput($('#positionInput'), positionWatermark);
     }
 
     function setTaxId(taxId, db, doScrollToItem, doClearSpeciesInput) {
         // The user has selected a species (and possibly even a particular database) --
         // if we're not already using it, change to it.
@@ -1516,31 +1531,31 @@
             setAssemblyDescriptionTitle(db, uiState.genome);
             cmd = { setDb: { db: db } };
             if (uiState.hubUrl) {
                 cmd.setDb.hubUrl = uiState.hubUrl;
             }
             cart.send(cmd, handleSetDb);
             cart.flush();
             uiState.db = db;
             clearPositionInput();
         }
     }
 
     function onClickCopyPosition() {
         // Copy the displayed position into the position input:
         var posDisplay = $('#positionDisplay').text();
-        $('#positionInput').val(posDisplay);
+        $('#positionInput').val(posDisplay).focus();
     }
 
     function goToHgTracks() {
         // Create and submit a form for hgTracks with hidden inputs for org, db and position.
         var position = $('#positionInput').val();
         var posDisplay = $('#positionDisplay').text();
         var pix = uiState.pix || calculateHgTracksWidth();
         var $form;
         if (! position || position === '' || position === positionWatermark) {
             position = posDisplay;
         }
         // Show a spinner -- sometimes it takes a while for hgTracks to start displaying.
         $('.jwGoIcon').removeClass('fa-play').addClass('fa-spinner fa-spin');
         // Make a form and submit it.  In order for this to work in IE, the form
         // must be appended to the body.