Local Track Files Card

igvteam · Jan 5, 2024 · 15b5d46 · 15b5d46
1 parent c71e71f
commit 15b5d46
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 4 deletions.
diff --git a/css/_localTrackFileCard.scss b/css/_localTrackFileCard.scss
@@ -0,0 +1,4 @@
+#igv-local-track-file-card.card {
+  top: 128px;
+  left: 128px;
+}
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/css/app.scss b/css/app.scss
@@ -3,7 +3,7 @@
 @import "share-modal";
 @import "encode";
 @import "track-select";
-
+@import "localTrackFileCard";
 //
 $igv-app-light-color: #f7f7f7;
 $igv-app-medium-color: #a6a6a6;

diff --git a/js/app.js b/js/app.js
@@ -254,6 +254,7 @@ async function initializationHelper(browser, container, options) {
         'igv-app-sample-info-from-url-modal',
         trackLoader)
 
+
     const sessionSaver = () => {
         try {
             return browser.toJSON()
@@ -274,8 +275,11 @@ async function initializationHelper(browser, container, options) {
             // console.log(str)
 
             const localTrackFileNames = trackConfigurations.filter((config) => undefined !== config.file).map(({filename}) => filename)
-            console.log(`Session contains local files that cannot be loaded automatically:\n${ localTrackFileNames.join('\n')}`)
-            alert(`Session contains local files that cannot be loaded automatically:\n${ localTrackFileNames.join('\n')}`)
+
+            if (localTrackFileNames.length > 0) {
+                const el = createLocalTrackFileCard('igv-local-track-file-card', localTrackFileNames)
+                document.getElementById('igv-main').appendChild(el)
+            }
 
         } catch (e) {
             console.error(e)
@@ -364,6 +368,25 @@ async function initializationHelper(browser, container, options) {
 
 }
 
+function presentLocalTrackFileModal() {
+    console.log(`Session contains local files that cannot be loaded automatically:\n${ localTrackFileNames.join('\n')}`)
+    alert(`Session contains local files that cannot be loaded automatically:\n${ localTrackFileNames.join('\n')}`)
+}
+
+function createLocalTrackFileCard(id, names){
+
+    const str = names.map(name => `<li class="list-group-item">${ name }</li>`).join('')
+    const html =
+        `<div id="${ id }" class="card" style="width: 18rem;">
+            <div class="card-header">Local Track Files</div>
+            <ul class="list-group list-group-flush">${ str }</ul>
+        </div>`
+
+    const fragment = document.createRange().createContextualFragment(html);
+
+    return fragment.firstChild;
+}
+
 function createSampleInfoMenu(igvMain,
                               localFileInput,
                               initializeDropbox,