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(" "); } /* 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> </TD></TR>"); +hPrintf("<TR height='16px'><TD></TD></TR>"); hPrintf("<TR><TD>"); -hPrintf("<B>Step %d: %s</B>   <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> </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(" "); 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(); } + +