e0e5b9a1895ba717a40da8d979c5d917189a02a1
kate
  Fri Apr 30 09:22:25 2021 -0700
Second cut TF facelift, based on feedback from JK, Key features: 1) Short help messages in pop-ups on each step.  2) Remove step numbers and instead distinguish steps with styling 3) Save vertical space (keep 'get output' button above fold). refs #27408

diff --git src/hg/hgTables/mainPage.c src/hg/hgTables/mainPage.c
index 900ae87..ef9ce24 100644
--- src/hg/hgTables/mainPage.c
+++ src/hg/hgTables/mainPage.c
@@ -546,65 +546,87 @@
 {
 int i;
 for (i=0; i<count; ++i)
     hPrintf("&nbsp;");
 }
 
 /* Stepwise instructions to guide users */
 
 #define STEP_MAX        4       // 1-based
 #define HELP_LABEL      "Help"
 
 static char *stepLabels[] = 
 {
 "Select dataset",
 "Define region of interest",
-"Define data attributes (optional)",
+"Subset, combine, compare with another track (options)",
 "Retrieve and display data"
 };
 
+static char *stepHelp[] = 
+{
+"Specify the genome, track and data table to be used as the data source.",
+"Specify whole genome or restrict to a single or set of genomic regions, "
+        "defined by coordinates or identifiers.",
+"Press 'create' button and select parameters for desired optional operations",
+"Specify output options and press the 'get output' button"
+};
+
 static char *stepHelpLinks[] =
 {
 "https://genome.ucsc.edu/goldenPath/help/hgTablesHelp.html#GettingStarted",
 "https://genome.ucsc.edu/goldenPath/help/hgTablesHelp.html#GettingStarted",
 "https://genome.ucsc.edu/goldenPath/help/hgTablesHelp.html#Filter",
 "https://genome.ucsc.edu/goldenPath/help/hgTablesHelp.html#OutputFormats"
 };
 
 static void printStep(int num)
 /* Print user guidance via steps */
 {
 if (num > STEP_MAX)
     errAbort("Internal error: table browser help problem");
-hPrintf("<TR><TD>&nbsp;</TD></TR>");
+hPrintf("<TR height='16px'><TD></TD></TR>");
 hPrintf("<TR><TD>");
-hPrintf("<B>Step %d: %s</B> &nbsp;&nbsp <A HREF='%s'TARGET='_BLANK'>%s</A>\n", 
-                num, stepLabels[num-1], stepHelpLinks[num-1], HELP_LABEL);
+hPrintf(" <div class='tooltip'>");
+hPrintf("<span class='tooltipLabel' style='background: #EFEFEF; padding: 5px;'>"
+                "<b>%s</b></span>"
+                , stepLabels[num-1]);
+hPrintf("<span class='tooltiptext'>%s"
+    " <a target='_blank' href='%s'>%s</a>\n",
+        stepHelp[num-1], stepHelpLinks[num-1], HELP_LABEL);
+hPrintf("</span></div>");
 hPrintf("</TD></TR>");
-hPrintf("<TR><TD>&nbsp;</TD></TR>");
+hPrintf("<TR height='6px'><TD></TD></TR>");
+}
+
+static void printStyle()
+{
+hPrintf("<STYLE>");
+hPrintf("</STYLE>");
 }
 
 void showMainControlTable(struct sqlConnection *conn)
 /* Put up table with main controls for main page. */
 {
 struct grp *selGroup;
 boolean isWig = FALSE, isPositional = FALSE, isMaf = FALSE, isBedGr = FALSE,
         isChromGraphCt = FALSE, isPal = FALSE, isArray = FALSE, isBam = FALSE, isVcf = FALSE, isHalSnake = FALSE,
         isLongTabix = FALSE, isHic = FALSE;
 boolean gotClade = hGotClade();
 struct hTableInfo *hti = NULL;
 
+printStyle();
 hPrintf("<TABLE BORDER=0>\n");
 
 int stepNumber = 1;
 printStep(stepNumber++);
 
 /* Print clade, genome and assembly line. */
     {
 
     if (gotClade)
         {
         hPrintf("<TR><TD><B>clade:</B>\n");
         printCladeListHtml(hGenome(database), "change", onChangeClade());
         nbSpaces(3);
         hPrintf("<B>genome:</B>\n");
         printGenomeListForCladeHtml(database, "change", onChangeOrg());
@@ -795,31 +817,30 @@
 if (!isWig && getIdField(database, curTrack, curTable, hti) != NULL)
     {
     hPrintf("<TR><TD><B>identifiers (names/accessions):</B>\n");
     cgiMakeButton(hgtaDoPasteIdentifiers, "paste list");
     hPrintf(" ");
     cgiMakeButton(hgtaDoUploadIdentifiers, "upload list");
     if (identifierFileName() != NULL)
         {
 	hPrintf("&nbsp;");
 	cgiMakeButton(hgtaDoClearIdentifiers, "clear list");
 	}
     hPrintf("</TD></TR>\n");
     }
 }
 
-/* microarray options */
 /*   button for option page here (median/log-ratio, etc)  */
 
 printStep(stepNumber++);
 
 /* Filter line. */
 {
 hPrintf("<TR><TD><B>filter:</B>\n");
 if (anyFilter())
     {
     cgiMakeButton(hgtaDoFilterPage, "edit");
     hPrintf(" ");
     cgiMakeButton(hgtaDoClearFilter, "clear");
     if (isWig || isBedGr)
 	wigShowFilter(conn);
     }
@@ -1007,53 +1028,74 @@
     return 
   "Send data to "
   "<A HREF=\"http://www.genomespace.org\" target=_BLANK>GenomeSpace</A> for use with diverse computational tools. ";
     }
 else
     {
     return "";
     }
 }
 
 void mainPageAfterOpen(struct sqlConnection *conn)
 /* Put up main page assuming htmlOpen()/htmlClose()
  * will happen in calling routine. */
 {
 hPrintf(
-  "Use this program to retrieve the data associated with a track in text "
+  "Use this program to retrieve data associated with a track in text "
   "format, to calculate intersections between tracks, and to retrieve "
-  "DNA sequence covered by a track. For help in using this application "
+  "DNA sequence covered by a track."
+);
+hPrintf(" <span id='tbHelpMore' class='blueLink'>More...</span>");
+hPrintf(
+  "<span id='tbHelp' style='display:none'>"
+  "For help in using this application "
   "see <A HREF=\"#Help\">Using the Table Browser</A> for a description "
   "of the controls in this form, and the "
   "<A HREF=\"../goldenPath/help/hgTablesHelp.html\">User's Guide</A> for "
   "general information and sample queries. "
   "For more complex queries, you may want to use "
   "<A HREF=\""GALAXY_URL_BASE"\" target=_BLANK>Galaxy</A> or "
   "our <A HREF=\"../goldenPath/help/mysql.html\">public "
   "MySQL server</A>. "
   "To examine the biological function of your set through annotation "
   "enrichments, send the data to "
   "<A HREF=\"http://great.stanford.edu\" target=_BLANK>GREAT</A>. "
   "%s"
   "Refer to the "
   "<A HREF=\"../goldenPath/credits.html\">Credits</A> page for the list of "
   "contributors and usage restrictions associated with these data. "
   "All tables can be downloaded in their entirety from the "
   "<A HREF=\"http://hgdownload.soe.ucsc.edu/downloads.html\""
-  ">Sequence and Annotation Downloads</A> page."
+  ">Sequence and Annotation Downloads</A> page.</span>"
    , getGenomeSpaceText()
 );
+hPrintf(" <span id='tbHelpLess' class='blueLink' style='display:none'>Less...</a></span>");
+
+// Show more or less intro text
+char jsText[1024];
+safef(jsText, sizeof jsText,
+        "$('#tbHelpMore').hide();"
+        "$('#tbHelp').show();"
+        "$('#tbHelpLess').show();"
+        );
+jsOnEventById("click", "tbHelpMore", jsText);
+safef(jsText, sizeof jsText,
+        "$('#tbHelpMore').show();"
+        "$('#tbHelp').hide();"
+        "$('#tbHelpLess').hide();"
+        );
+jsOnEventById("click", "tbHelpLess", jsText);
 
 // When GREAT is selected, disable the other checkboxes and force output to BED
 jsInline(
     "function onSelectGreat() {\n"
     " document.getElementById('checkboxGalaxy').checked=false;\n");
 if (isGenomeSpaceEnabled())
     jsInline(
     " document.getElementById('checkboxGenomeSpace').checked=false;\n");
 jsInline(
     " document.getElementById('outBed').selected=true;\n"
     " return true;\n"
     "}\n");
 
 // Disable/enable noGenome tracks depending on whether region is genome.
 jsInline(
@@ -1093,19 +1135,22 @@
 
 /* Hidden form for jumping to track hub manager CGI. */
 hPrintf("<FORM ACTION='%s' NAME='trackHubForm'>", hgHubConnectName());
 cartSaveSession(cart);
 hPrintf("</FORM>\n");
 
 webNewSection("<A NAME=\"Help\"></A>Using the Table Browser\n");
 printMainHelp();
 cartFlushHubWarnings();
 }
 
 void doMainPage(struct sqlConnection *conn)
 /* Put up the first page user sees. */
 {
 htmlOpen("Table Browser");
+webIncludeResourceFile("jquery-ui.css");
 mainPageAfterOpen(conn);
 htmlClose();
 }
 
+
+