00a364772e6004ac5d9d221c0594121063791471
chmalee
  Mon Oct 7 09:50:38 2024 -0700
After meeting with QA, start small redesign to emphasize getting a track uploaded. Change the file selector to be in a modal, make the newest files sort to top and be highlighted, add a batch change file type and db, auto-detect the db from the cart

diff --git src/hg/htdocs/inc/hgMyData.html src/hg/htdocs/inc/hgMyData.html
index 4211e85..87a8801 100755
--- src/hg/htdocs/inc/hgMyData.html
+++ src/hg/htdocs/inc/hgMyData.html
@@ -1,43 +1,53 @@
 <div id='hubUpload'>
 
     <div id='titleDiv' class='gbTrackTitleBanner'>
         Manage my data
         &nbsp;&nbsp;&nbsp;
         <a href='#INFO_SECTION' title='Jump to help section'>
             <span class='gbIconSmall fa-stack'>
                 <i class='gbBlueDarkColor fa fa-circle fa-stack-2x'></i>
                 <i class='gbWhiteColor fa fa-info fa-stack-1x'></i>
             </span>
         </a>
     </div>
 
     <div id='fileTableInfoDiv' class='tabSection'>
-        <p>THIS IS JUST EXAMPLE COPY. Below are all uploaded track data files associated with your current browsing
-        session that have not been saved yet. Note that if you reset your browsing session
-        you will lose access to these data. Please click the save button below or create a
-        browsing save these files to your account.</p>
+        <p>THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. 
+THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. 
+        </p>
     </div>
 
+    <div id='filePickerModal' style="display: none">
         <!-- The actual input to add files, this gets majorly worked up by the javascript -->
-    <div id='filePicker' class='hubList tabSection'>
+        <div id='filePicker'>
             <h4>Create your own hub</h4>
-        <p>After choosing files, click &quot;Submit&quot; to begin uploading the files to our server</p>
+            <p>Example copy, is it even needed here?</p>
             <div class='buttonDiv' id='chooseAndSendFilesRow'>
                 <button  id='btnForInput' class='button' for="chosenFiles">Choose files</button>
             </div>
-        <div id='fileList' style="clear: right"></div>
+            <!-- css grid of selected files, with some controls at the top and bottom, populated
+                by the javascript  -->
+            <div id='fileList'>
+                <!-- Headers -->
+                <div class="fileListHeader"></div>
+                <div class="fileListHeader">File Name</div>
+                <div class="fileListHeader">File Type</div>
+                <div class="fileListHeader">Database</div>
+                <div class="fileListHeader">File Size</div>
+            </div>
+        </div>
     </div>
 
     <div id='filesDiv' class='tabSection'>
         <table id="filesTable" class="sessionTable stripe hover row-border compact" borderwidth=0>
         </table>
     </div>
 
 
     <div>
         For information on making track hubs, see the following pages:
         <ul>
             <li><a href='../goldenPath/help/hubQuickStart.html' style='color:#121E9A' target=_blank>Quick Start Guide</a></li>
             <li><a href=\"../goldenPath/help/hgTrackHubHelp.html\" style='color:#121E9A' TARGET=_blank>Track Hub User's Guide</a></li>
             <li><a href=\"../goldenPath/help/hgTrackHubHelp#Hosting\" style='color:#121E9A' target=_blank>Where to Host Your Track Hub</a></li>
             <li><a href=\"../goldenPath/help/trackDb/trackDbHub.html\" style='color:#121E9A' target=_blank>Track Hub Settings Reference</a></li>