Local session file selection U/X build out

igvteam · Jan 23, 2024 · a324b0f · a324b0f
1 parent 76c0def
commit a324b0f
Show file tree

Hide file tree

Showing 4 changed files with 63 additions and 133 deletions.
diff --git a/css/_localTrackFileCard.scss b/css/_localTrackFileCard.scss
@@ -5,57 +5,32 @@
   height: fit-content;
   width: 384px;
 
-  .card-header {
+  //.card-header {
+  //  padding: unset;
+  //  display: flex;
+  //  flex-direction: column;
+  //  flex-wrap: nowrap;
+  //  justify-content: flex-start;
+  //  align-items: center;
+  //}
+
+  li {
+    input {
+      margin-right: 8px;
+      cursor: pointer;
+    }
+  }
 
-    padding: unset;
+  //li:hover {
+  //  cursor: pointer;
+  //  background-color: rgba(15, 15, 15, 0.04);
+  //}
 
+  .card-footer {
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     flex-wrap: nowrap;
-    justify-content: flex-start;
+    justify-content: space-around;
     align-items: center;
-
-    >div:first-child {
-      width: 100%;
-      display: flex;
-      flex-direction: row;
-      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: #7F7F7F;
-      }
-    }
-    >div:first-child:hover {
-      cursor: grab;
-    }
-    >div:first-child:active {
-      cursor: grabbing;
-    }
-
-    >div:last-child {
-      font-size: 1em;
-      padding: .5rem;
-      //text-transform: uppercase;
-      text-align: left;
-      background-color: white;
-    }
-
-    //background-color: rgba(15, 15, 15, 0.25);
-  }
-
-  li:hover {
-    cursor: pointer;
-    background-color: rgba(15, 15, 15, 0.04);
   }
 }
diff --git a/css/app.css b/css/app.css
diff --git a/css/app.css.map b/css/app.css.map
diff --git a/js/sessionUtils.js b/js/sessionUtils.js
@@ -20,13 +20,8 @@ async function initializeSessionUtilities(browser, $igvMain, initializeDropbox,
     const sessionLoader = async config => {
 
         try {
-            // config.parentApp = 'igvwebapp'
-            const trackConfigurations = await browser.loadSession(config)
-
-            // const str = trackConfigurations.map(config => JSON.stringify(config, null, 2)).join('\n')
-            // console.log(str)
 
-            // const localTrackFileNames = trackConfigurations.filter((config) => undefined !== config.file).map(({filename}) => filename)
+            const trackConfigurations = await browser.loadSession(config)
 
             const localTrackFileConfigs = trackConfigurations.filter((config) => undefined !== config.file)
 
@@ -125,93 +120,83 @@ async function createSessionMenu(sessionListDivider, sessionRegistryFile, sessio
 
 function presentLocalTrackFileModal(trackFileNamesCard, trackFileNames) {
 
-    const html = trackFileNames.map(name => `<li class="list-group-item">${ name }</li>`).join('')
-    const fragment = document.createRange().createContextualFragment(html)
-
     const parent = trackFileNamesCard.querySelector('.list-group')
     parent.innerHTML = ''
-    parent.appendChild(fragment)
 
-    const rows = trackFileNamesCard.querySelectorAll('.list-group-item')
-    const fileInput = document.getElementById('igv-local-track-file-input')
+    const html = trackFileNames.map(name =>`<li class="list-group-item" data-filename="${ name }"><input type="checkbox">${ name }</li>`).join('')
+    const fragment = document.createRange().createContextualFragment(html)
+    parent.appendChild(fragment)
 
-    rows.forEach(row => row.addEventListener('click', e => {
-        fileInput.dataset.filename = e.target.innerText
-        fileInput.click()
-    }))
+    const strings = trackFileNames.map(name =>`<li class="list-group-item"><input type="checkbox">${ name }</li>`)
 
     trackFileNamesCard.style.left = `128px`
     trackFileNamesCard.style.top = `128px`
 
-    // console.log(`Session contains local files that cannot be loaded automatically:\n${ trackFileNames.join('\n')}`)
-    // alert(`Session contains local files that cannot be loaded automatically:\n${ trackFileNames.join('\n')}`)
 }
 
 function createLocalTrackFileCard(parentElement, id, browser){
 
-    const str =
-        `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.`
+    // const str =
+    //     `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.`
+    const str = 'Session Local Files'
 
     let html =
         `<div id="${ id }" class="card">
             <div class="card-header">
-                <div>
-                    <div>nadda</div>
-                    <button type="button" class="close">
-                        <span aria-hidden="true">&times;</span>
-                    </button>
-                </div>
-                <div>
-                    ${ str }
-                </div>
+                ${ str }
             </div>
             <ul class="list-group list-group-flush"></ul>
+            <div class="card-footer">
+                <button id="${ id }-cancel"         type="button" class="btn btn-sm btn-outline-secondary">Cancel</button>
+                <button id="${ id }-retrieve-files" type="button" class="btn btn-sm btn-secondary">Retrieve Files</button>
+                <button id="${ id }-load-tracks"    type="button" class="btn btn-sm btn-secondary" disabled>Load Tracks</button>
+            </div>
         </div>`
 
     let fragment = document.createRange().createContextualFragment(html)
     const cardElement = fragment.firstChild
     parentElement.appendChild(cardElement)
 
-    cardElement.querySelector('button').addEventListener('click', e => {
+    cardElement.querySelector(`#${ id }-cancel`).addEventListener('click', e => {
+        console.log('Cancel')
+        cardElement.style.left = '-1000px'
+        cardElement.style.top = '-1000px'
+    })
+
+    cardElement.querySelector(`#${ id }-retrieve-files`).addEventListener('click', e => {
+        const fileInput = document.getElementById('igv-local-track-file-input')
+        fileInput.click()
+    })
+
+    cardElement.querySelector(`#${ id }-load-tracks`).addEventListener('click', e => {
+        console.log('Load Files')
         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;" />`
+    html = `<input type="file" id="igv-local-track-file-input" style="display: none;" multiple/>`
     fragment = document.createRange().createContextualFragment(html)
     const fileInputElement = fragment.firstChild
     parentElement.appendChild(fileInputElement)
 
     fileInputElement.addEventListener('change', async e => {
 
         const {files} = fileInputElement
-        const name = files[ 0 ].name
-
-        if (fileInputElement.dataset.filename === name) {
+        const names = Array.from(files).map(({ name }) => name)
 
-            const config = sessionLocalTrackFilesDictionary[ name ]
+        if (names.length > 0) {
 
-            config.url = files[ 0 ]
-
-            if (config) {
-
-                try {
-                    await browser.loadTrackList([ config ])
-                } catch (e) {
-                    console.error(e)
-                    AlertSingleton.present(e)
+            for (const name of names) {
+                const element = document.querySelector(`[data-filename="${ name }"]`)
+                if (null !== element) {
+                    console.log(`Retrieved file named ${ element.innerText }`)
                 }
-
-            } else {
-                alert(`Could not find track file named ${ name }`)
             }
 
-        } else {
-            alert(`Retrieved file ${ name } does not match selected file ${ fileInputElement.dataset.filename }. `)
-        }
 
+        }
 
     })