023b6afdcfa6fe445856a5645cccac8113a4689e
braney
  Thu Aug 3 12:50:53 2017 -0700
put all HTML in a separate include file

diff --git src/hg/hgCollection/hgCollection.c src/hg/hgCollection/hgCollection.c
index bc69c30..e468916 100644
--- src/hg/hgCollection/hgCollection.c
+++ src/hg/hgCollection/hgCollection.c
@@ -100,32 +100,32 @@
 
 static void printGroup(char *parent, struct trackDb *tdb, boolean folder, boolean user)
 // output the table rows for a group
 {
 char *userString = "";
 
 if (user)
     {
     if (tdb->parent && tdb->subtracks) 
         userString = "class='user view'";
     else
         userString = "class='user'";
     }
     
 
-printf("<tr data-tt-parent-id='%s' data-tt-id='%s' %s><td><span class='%s'>%s</span></td>",  parent, trackHubSkipHubName(tdb->track),   userString, folder ? "folder" : "file", tdb->shortLabel );
-printf("<td>%s</td></tr>\n", tdb->longLabel);
+jsInlineF("<tr data-tt-parent-id='%s' data-tt-id='%s' %s><td><span class='%s'>%s</span></td>",  parent, trackHubSkipHubName(tdb->track),   userString, folder ? "folder" : "file", tdb->shortLabel );
+jsInlineF("<td>%s</td></tr>", tdb->longLabel);
 
 
 if (tdb->subtracks)
     {
     struct trackDb *subTdb;
 
     for(subTdb = tdb->subtracks; subTdb; subTdb = subTdb->next)
         printGroup(trackHubSkipHubName(tdb->track), subTdb, user && (subTdb->subtracks != NULL), user);
     }
 }
 
 static void outHubHeader(FILE *f, char *db, char *hubName)
 // output a track hub header
 {
 char *hubFile = strrchr(hubName, '/') + 1;
@@ -220,223 +220,68 @@
 
 void addVisibleTracks()
 // add the visible tracks table rows
 {
 printf("<tr data-tt-id='visible' ><td><span class='file'>All Visible</td><td>All the tracks visible in hgTracks</td></tr>\n");
 struct trackDb *tdb;
 for(tdb = fullTrackList; tdb; tdb = tdb->next)
     {
     if (isParentVisible(tdb) &&  isSubtrackVisible(tdb))
         {
         printGroup("visible", tdb, FALSE, FALSE);
         }
     }
 }
 
-static void doHeader()
-// build the header for the main page
-{
-puts(  
-"<a name='TRACK_TOP'></a>\n"  
-"    <div class='row gbTrackTitleBanner'>\n"  
-"       <div class='col-md-10'>\n"  
-);  
-printf(  
-"           <span class='gbTrackName'>\n"  
-"               My Collections \n"  
-"           </span>"  
-"           <span class='gbTrackTitle'> Build Custom Collections of Tracks </span>\n"  );
-puts(  
-"<!-- Info icon built from stacked fa icons -->\n"  
-"           <a href='#INFO_SECTION' title='Jump to the track description'>\n"  
-"               <span class='gbIconSmall fa-stack'>\n"  
-"                   <i class='gbBlueDarkColor fa fa-circle fa-stack-2x'></i>\n" 
-"                   <i class='gbWhiteColor fa fa-info fa-stack-1x'></i>\n"  
-"               </span></a>\n"  
-"           <div class='gbButtonGoContainer text-right' title='Save Collections'>\n"
-"           </div>\n"
-
-"       </div>\n"  
-"       <div class='col-md-2 text-right'>\n"  
-"           <div class='gbButtonGoContainer text-right' title='Go to the Genome Browser'>\n"
-
-"               <div class='gbButtonGo' id='saveCollections' >Save</div>\n"
-"               <div class='gbButtonGo' id='discardChanges'>Discard Changes</div>\n"
-"       </div>\n"  );
-puts(  
-"       </div>\n"  
-"   </div>\n"  
-);  
-}
-
-static void doTable()
+void doTable()
 // output the tree table
 {
-puts(
-"        <!-- Configuration panel -->\n"
-"        <div class='row gbSectionBanner'>\n"
-"            <div class='col-md-8'>All Tracks</div>\n"
-"            <div class='col-md-4 text-right'>\n");
-
-puts(
-"           <div class='gbButtonGoContainer text-right' title='Make New Collection'>\n"
-"               <div id='newCollection' class='gbButton'>Make New Collection </div>\n"
-"           </div>\n"
-);
-puts(
-"            </div>\n"
-"        </div>\n");
-
 char *hubName = hubNameFromUrl(getHubName(database));
-printf("<table id='tracks'><tbody>\n");
+jsInlineF("$('#tracks tr:last').after(\"");
 struct grp *curGroup;
-printf("<tr data-tt-id='collections'><td><span class='file'>My Collections</td>");
-printf("<td>Your collected tracks.</td></tr>\n");
 for(curGroup = fullGroupList; curGroup;  curGroup = curGroup->next)
     {
     if ((hubName != NULL) && sameString(curGroup->name, hubName))
         break;
     }
 if (curGroup != NULL)
     {
     // print out all the tracks in this group
     struct trackDb *tdb;
     for(tdb = fullTrackList; tdb;  tdb = tdb->next)
         {
         if (sameString(tdb->grp, hubName))
             printGroup("collections", tdb, TRUE, TRUE);
         }
     }
 //addVisibleTracks();
 for(curGroup = fullGroupList; curGroup;  curGroup = curGroup->next)
     {
     if ((hubName != NULL) && sameString(curGroup->name, hubName))
         continue;
-    printf("<tr data-tt-id='%s'><td><span class='file'>%s</span></td><td></td></tr>\n", curGroup->name, curGroup->label );
+    jsInlineF("<tr data-tt-id='%s'><td><span class='file'>%s</span></td><td></td></tr>", curGroup->name, curGroup->label );
     struct trackDb *tdb;
     for(tdb = fullTrackList; tdb;  tdb = tdb->next)
         {
         if ( sameString(tdb->grp, curGroup->name))
             {
             printGroup(curGroup->name, tdb, FALSE, FALSE);
             }
         }
     }
-printf("</tbody></table>\n");
-}
-
-static void doAttributes()
-// output the attribute pane
-{
-puts(
-"        <!-- Configuration panel -->\n"
-"        <div class='row gbSectionBanner'>\n"
-"            <div class='col-md-8'>Set Attributes</div>\n"
-"            <div class='col-md-4 text-right'>\n");
-puts(
-"           <div class='gbButtonGoContainer text-right' title='Save Props'>\n"
-"               <div id='propsSave' class='gbButton'>Save</div>\n"
-"           </div>\n"
-);
-puts(
-"           <div class='gbButtonGoContainer text-right' title='Discard Changes'>\n"
-"               <div id='propsDiscard' class='gbButton'>Discard Changes</div>\n"
-"           </div>\n"
-);
-puts(
-"</div></div>\n");
-// trackDb track options (none at the moment)
-puts(
-"<div id='TrackDbOptions' style=\"display: none;\">"
-"Drag to custom composite to copy to Collections"
-"</div>"
-);
-
-// view options
-puts(
-"<div class='jwInputLabel'  id='viewOptions' style=\"display: none;\">"
-"<label for='name'>Name:</label>"
-"<input type='text' name='viewName' id='viewName' value='' class='text ui-widget-content ui-corner-all'>\n"
-"<br>"
-"<label for='description'>Description:</label>\n"
-"<input type='text' name='viewDescription' id='viewDescription' value='' class='text ui-widget-content ui-corner-all'>\n"
-"<br>"
-"<label for='viewVis'>Visibility:</label>"
-"<SELECT ID='viewVis' >\n"
-"<OPTION>hide</OPTION>\n"
-"<OPTION SELECTED>dense</OPTION>\n"
-"<OPTION>squish</OPTION>\n"
-"<OPTION>pack</OPTION>\n"
-"<OPTION>full</OPTION>\n"
-"</SELECT>\n"
-"<br>"
-"<label for='viewFunc'>Function:</label>"
-"<SELECT ID='viewFunc' >\n"
-"<OPTION SELECTED>show all</OPTION>\n"
-"<OPTION >add all</OPTION>\n"
-"<OPTION >subtract from the first</OPTION>\n"
-"</SELECT>\n"
-"<br>"
-" <p>Color: <input type='text' id='viewInput' value='0xffffff'>&nbsp;&nbsp;<input id='viewPicker'>"
-"</div>\n"
-);
-
-// custom composite options
-puts(
-"<div class='jwInputLabel'  id='CustomCompositeOptions' style=\"display: none;\">"
-"<label for='name'>Name:</label>"
-"<input type='text' name='collectionName' id='collectionName' value='' class='text ui-widget-content ui-corner-all'>\n"
-"<br>"
-"<label for='description'>Description:</label>\n"
-"<input type='text' name='collectionDescription' id='collectionDescription' value='' class='text ui-widget-content ui-corner-all'>\n"
-"<br>"
-"<label for='collectionVis'>Visibility:</label>"
-"<SELECT ID='collectionVis' style='width: 70px'>\n"
-"<OPTION>hide</OPTION>\n"
-"<OPTION SELECTED>dense</OPTION>\n"
-"<OPTION>squish</OPTION>\n"
-"<OPTION>pack</OPTION>\n"
-"<OPTION>full</OPTION>\n"
-"</SELECT>\n"
-"<br>"
-"<input type='button' value='Create View' name='createView' id='createView'>\n"
-"</div>\n"
-);
-
-// custom track  options
-puts(
-"<div class='jwInputLabel'  id='CustomTrackOptions' style=\"display: none;\">"
-"<label for='name'>Name:</label>"
-"<input type='text' name='customName' id='customName' value='' class='text ui-widget-content ui-corner-all'>\n"
-"<br>"
-"<label for='description'>Description:</label>\n"
-"<input type='text' name='customDescription' id='customDescription' value='' class='text ui-widget-content ui-corner-all'>\n"
-"<br>"
-"<label for='customVis'>Visibility:</label>"
-"<SELECT ID='customVis' style='width: 70px'>\n"
-"<OPTION>hide</OPTION>\n"
-"<OPTION SELECTED>dense</OPTION>\n"
-"<OPTION>squish</OPTION>\n"
-"<OPTION>pack</OPTION>\n"
-"<OPTION>full</OPTION>\n"
-"</SELECT>\n"
-"<br>"
-" <p>Color: <input type='text' id='trackColorInput' value='0xffffff'>&nbsp;&nbsp;<input id='trackColorPicker'>"
-"</div>\n"
-
-);
-
+jsInlineF("\");\n");
+jsInlineF("collections.init();\n");
 }
 
 static void onclickJumpToTop(char *id)
 /* CSP-safe click handler arrows that cause scroll to top */
 {
 jsOnEventById("click", id, "$('html,body').scrollTop(0);");
 }
 
 static void printHelp()
 // print out the help page
 {
 puts(
 "<a name='INFO_SECTION'></a>\n"
 "    <div class='row gbSectionBanner'>\n"
 "        <div class='col-md-11'>Help</div>\n"
@@ -454,60 +299,47 @@
 "    </div>\n"
 );
 puts(
 "    <div class='row gbTrackDescriptionPanel'>\n"
 "       <div class='gbTrackDescription'>\n");
 puts("<div class='dataInfo'>");
 puts("</div>");
 webIncludeHelpFileSubst("hgCompositeHelp", NULL, FALSE);
 
 puts("<div class='dataInfo'>");
 puts("</div>");
 
 puts(
 "     </div>\n"
 "   </div>\n");
-
-
 }
 
 void doMainPage()
 /* Print out initial HTML of control page. */
 {
 webStartGbNoBanner(cart, database, "Collections");
 webIncludeResourceFile("jquery.treetable.css");
 webIncludeResourceFile("jquery.treetable.theme.default.css");
 webIncludeResourceFile("gb.css");
-webIncludeResourceFile("jWest.css");
+//webIncludeResourceFile("jWest.css");
 webIncludeResourceFile("spectrum.min.css");
 webIncludeResourceFile("hgGtexTrackSettings.css");
 
-doHeader();
-puts(
-"<!-- Track Configuration Panels -->\n"
-"    <div class='row'>\n"
-"        <div class='col-md-6'>\n");
-doTable();
-puts(
-"        </div>\n"
-"        <div class='col-md-6'>\n");
-doAttributes();
-puts(
-"        </div>\n"
-"    </div>\n"
-);
+webIncludeFile("inc/hgCollection.html");
+
 printHelp();
+doTable();
 
 puts("<script src=\"//code.jquery.com/jquery-1.9.1.min.js\"></script>");
 puts("<script src=\"//code.jquery.com/ui/1.10.3/jquery-ui.min.js\"></script>");
 jsIncludeFile("jquery.treetable.js", NULL);
 jsIncludeFile("utils.js", NULL);
 jsIncludeFile("ajax.js", NULL);
 jsIncludeFile("spectrum.min.js", NULL);
 jsIncludeFile("hgCollection.js", NULL);
 webEndGb();
 }
 
 static char *getSqlBigWig(struct sqlConnection *conn, char *db, struct trackDb *tdb)
 // figure out the bigWig for native tables
 {
 char buffer[4096];