Refactor navbar menu dropdown loaders

js/app.js

@@ -22,6 +22,7 @@
  */
 
 import igv from '../node_modules/igv/dist/igv.esm.min.js'
+import {igvxhr} from "../node_modules/igv-utils/src/index.js"
 import * as GoogleAuth from '../node_modules/google-utils/src/googleAuth.js'
 import makeDraggable from "./widgets/utils/draggable.js"
 import AlertSingleton from "./widgets/alertSingleton.js"
@@ -46,8 +47,7 @@ import {createSaveImageWidget} from './saveImageWidget.js'
 import GtexUtils from "./gtexUtils.js"
 import version from "./version.js"
 import {createCircularViewResizeModal} from "./circularViewResizeModal.js"
-import {createSampleInfoMenu} from "./services/sampleInfoService.js"
-import {createROIMenu} from "./services/roiService.js"
+import {createLoadDropdown} from "./widgets/loadWidget.js"
 
 document.addEventListener("DOMContentLoaded", async (event) => await main(document.getElementById('igv-app-container'), igvwebConfig))
 
@@ -58,6 +58,8 @@ const googleWarningFlag = "googleWarningShown"
 
 let svgSaveImageModal
 let pngSaveImageModal
+let roiURLModal
+let sampleInfoURLModal
 
 async function main(container, config) {
 
@@ -260,9 +262,55 @@ async function initializationHelper(browser, container, options) {
 
     await initializeGenomeWidgets(options.genomes)
 
-    createSampleInfoMenu(browser, document.getElementById('igv-main'), document.getElementById('igv-app-sample-info-dropdown-local-track-file-input'), initializeDropbox, options.dropboxAPIKey ? document.getElementById('igv-app-dropdown-dropbox-sample-info-file-button') : undefined, googleEnabled, document.getElementById('igv-app-dropdown-google-drive-sample-info-file-button'), 'igv-app-sample-info-from-url-modal')
+    const sampleInfoFileLoadHandler = async configuration => {
+        try {
+            await browser.loadSampleInfo(configuration)
+        } catch (e) {
+            console.error(e)
+            AlertSingleton.present(e)
+        }
+    }
+
+    const sampleInfoDropdownConfig =
+        {
+            igvMain: document.getElementById('igv-main'),
+            localFileInput: document.getElementById('igv-app-sample-info-dropdown-local-track-file-input'),
+            initializeDropbox,
+            dropboxButton: options.dropboxAPIKey ? document.getElementById('igv-app-dropdown-dropbox-sample-info-file-button') : undefined,
+            googleEnabled: googleEnabled,
+            googleDriveButton: document.getElementById('igv-app-dropdown-google-drive-sample-info-file-button'),
+            urlModalId: 'igv-app-sample-info-from-url-modal',
+            urlModalTitle: 'Sample Info',
+            loadHandler: sampleInfoFileLoadHandler
+        };
+
+    sampleInfoURLModal = createLoadDropdown(sampleInfoDropdownConfig)
 
-    createROIMenu(browser, document.getElementById('igv-main'), document.getElementById('igv-app-roi-dropdown-local-track-file-input'), initializeDropbox, options.dropboxAPIKey ? document.getElementById('igv-app-dropdown-dropbox-roi-file-button') : undefined, googleEnabled, document.getElementById('igv-app-dropdown-google-drive-roi-file-button'), 'igv-app-roi-from-url-modal')
+    const roiFileLoadHandler = async ({ url }) => {
+        try {
+            const roi = await igvxhr.loadJson(url)
+            roi.isUserDefined = true
+            browser.roiManager.loadROI(roi)
+        } catch (e) {
+            console.error(e)
+            AlertSingleton.present(e)
+        }
+    }
+
+    const roiDropdownConfig =
+        {
+        igvMain: document.getElementById('igv-main'),
+        localFileInput: document.getElementById('igv-app-roi-dropdown-local-track-file-input'),
+        initializeDropbox,
+        dropboxButton: options.dropboxAPIKey ? document.getElementById('igv-app-dropdown-dropbox-roi-file-button') : undefined,
+        googleEnabled: googleEnabled,
+        googleDriveButton: document.getElementById('igv-app-dropdown-google-drive-roi-file-button'),
+        urlModalId: 'igv-app-roi-from-url-modal',
+        urlModalTitle: 'ROI',
+        loadHandler: roiFileLoadHandler
+    };
+
+    roiURLModal = createLoadDropdown(roiDropdownConfig)
 
     const sessionSaver = () => {
         try {

js/services/roiService.js → js/widgets/loadWidget.js

@@ -1,22 +1,20 @@
-import {igvxhr} from "../../node_modules/igv-utils/src/index.js"
-import FileLoadManager from "../widgets/fileLoadManager.js"
-import FileLoadWidget from "../widgets/fileLoadWidget.js"
-import * as Utils from "../widgets/utils.js"
-import AlertSingleton from "../widgets/alertSingleton.js"
 import * as GooglePicker from '../../node_modules/google-utils/src/googleFilePicker.js'
+import FileLoadManager from "./fileLoadManager.js"
+import FileLoadWidget from "./fileLoadWidget.js"
+import * as Utils from "./utils.js"
+import AlertSingleton from "./alertSingleton.js"
 
-let roiURLModal
-function createROIURLWidget(urlModalId, igvMain, roiFileLoadHandler) {
+function createURLWidget(igvMain, urlModalId, urlModalTitle, loadHandler) {
 
     const html =
-        `<div id="${urlModalId}" class="modal fade" tabindex="-1">
+        `<div id="${ urlModalId }" class="modal fade" tabindex="-1">
 
         <div class="modal-dialog modal-lg">
     
             <div class="modal-content">
     
                 <div class="modal-header">
-                    <div class="modal-title">ROI URL</div>
+                    <div class="modal-title">${ urlModalTitle }</div>
     
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
     
@@ -44,7 +42,7 @@ function createROIURLWidget(urlModalId, igvMain, roiFileLoadHandler) {
     const fileLoadWidgetConfig =
         {
             widgetParent: urlModalElement.querySelector('.modal-body'),
-            dataTitle: 'ROI',
+            dataTitle: urlModalTitle,
             indexTitle: 'Index',
             mode: 'url',
             fileLoadManager: new FileLoadManager(),
@@ -54,34 +52,28 @@ function createROIURLWidget(urlModalId, igvMain, roiFileLoadHandler) {
 
     const fileLoadWidget = new FileLoadWidget(fileLoadWidgetConfig)
 
-    roiURLModal = new bootstrap.Modal(urlModalElement)
-    Utils.configureModal(fileLoadWidget, roiURLModal, async fileLoadWidget => {
+    const urlModal = new bootstrap.Modal(urlModalElement)
+
+    const urlModalHandler = async fileLoadWidget => {
         const paths = fileLoadWidget.retrievePaths()
-        await roiFileLoadHandler({url: paths[0]})
+        await loadHandler({url: paths[0]})
         return true
-    })
+    }
+
+    Utils.configureModal(fileLoadWidget, urlModal, urlModalHandler)
+
+    return urlModal
 }
 
-function createROIMenu(browser,
-                       igvMain,
-                       localFileInput,
-                       initializeDropbox,
-                       dropboxButton,
-                       googleEnabled,
-                       googleDriveButton,
-                       urlModalId) {
-
-
-    const roiFileLoadHandler = async ({ url }) => {
-        try {
-            const roi = await igvxhr.loadJson(url)
-            roi.isUserDefined = true
-            browser.roiManager.loadROI(roi)
-        } catch (e) {
-            console.error(e)
-            AlertSingleton.present(e)
-        }
-    }
+function createLoadDropdown({ igvMain,
+                            localFileInput,
+                            initializeDropbox,
+                            dropboxButton,
+                            googleEnabled,
+                            googleDriveButton,
+                            urlModalId,
+                            urlModalTitle,
+                            loadHandler }) {
 
     // local file
     localFileInput.addEventListener('change', async () => {
@@ -92,7 +84,7 @@ function createROIMenu(browser,
 
         localFileInput.value = ''
 
-        await roiFileLoadHandler({url: paths[0]})
+        await loadHandler({url: paths[0]})
     })
 
     //  Dropbox
@@ -110,7 +102,7 @@ function createROIMenu(browser,
                             return {url: link}
                         })
 
-                        roiFileLoadHandler(configList[0])
+                        loadHandler(configList[0])
                     },
                     cancel: () => {
                     },
@@ -130,22 +122,20 @@ function createROIMenu(browser,
     if (!googleEnabled) {
         googleDriveButton.parentElement.style.display = 'none'
     } else {
-
         googleDriveButton.addEventListener('click', () => {
 
             const filePickerHandler = async responses => {
                 const paths = responses.map(({url}) => url)
-                await roiFileLoadHandler({url: paths[0]})
+                await loadHandler({url: paths[0]})
             }
 
             GooglePicker.createDropdownButtonPicker(false, filePickerHandler)
         })
-
     }
 
     // URL
-    createROIURLWidget(urlModalId, igvMain, roiFileLoadHandler)
+    return createURLWidget(igvMain, urlModalId, urlModalTitle, loadHandler)
 
 }
 
-export { createROIMenu }
+export { createLoadDropdown }