Session. Local track file loading U/X flow

css/_localTrackFileCard.scss

@@ -22,13 +22,18 @@
       flex-wrap: nowrap;
       justify-content: space-between;
       align-items: center;
+
+      border-bottom-style: solid;
+      border-bottom-width: thin;
+
       >div {
         color: transparent;
       }
+
       >button {
         cursor: pointer;
         margin-right: 8px;
-        color: fuchsia;
+        //color: #7F7F7F;
       }
     }
     >div:first-child:hover {
@@ -37,14 +42,16 @@
     >div:first-child:active {
       cursor: grabbing;
     }
+
     >div:last-child {
       font-size: 1em;
       padding: .5rem;
-      text-transform: uppercase;
+      //text-transform: uppercase;
       text-align: left;
+      background-color: white;
     }
 
-    background-color: rgba(15, 15, 15, 0.25);
+    //background-color: rgba(15, 15, 15, 0.25);
   }
 
   li:hover {

js/app.js

@@ -392,7 +392,7 @@ function presentLocalTrackFileModal(trackFileNamesCard, trackFileNames) {
 function createLocalTrackFileCard(parentElement, id){
 
     const str =
-        `Listed below are local file names that were present in the session file and cannot be loaded automatically. Click on a file name to retrieve the associated file via the file picker.`
+        `The session file used contains these local track files. They cannot be loaded automatically. Click on a name to present the file picker to load the file.`
 
     let html =
         `<div id="${ id }" class="card">
@@ -411,15 +411,28 @@ function createLocalTrackFileCard(parentElement, id){
         </div>`
 
     let fragment = document.createRange().createContextualFragment(html)
-    let el = fragment.firstChild
-    parentElement.appendChild(el)
+    const cardElement = fragment.firstChild
+    parentElement.appendChild(cardElement)
 
-    makeDraggable(el, el.querySelector('.card-header'), undefined)
+    cardElement.querySelector('button').addEventListener('click', e => {
+        cardElement.style.left = '-1000px'
+        cardElement.style.top = '-1000px'
+    })
+
+    makeDraggable(cardElement, cardElement.querySelector('.card-header'), undefined)
 
     html = `<input type="file" id="igv-local-track-file-input" style="display: none;" />`
     fragment = document.createRange().createContextualFragment(html)
-    el = fragment.firstChild
-    parentElement.appendChild(el)
+    const fileInputElement = fragment.firstChild
+    parentElement.appendChild(fileInputElement)
+
+    fileInputElement.addEventListener('change', e => {
+
+        const {files} = fileInputElement
+        const name = files[ 0 ].name
+
+        console.log(`Local track file ${ name } will be loaded`)
+    })
 
 }