Genome Dropdown Load refactor

igvteam · Aug 19, 2024 · 6c39a7d · 6c39a7d
1 parent 2c3404f
commit 6c39a7d
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 19 deletions.
diff --git a/js/app.js b/js/app.js
@@ -37,9 +37,8 @@ import {
     googleDriveButtonImageBase64,
     googleDriveDropdownItem
 } from "./widgets/markupFactory.js"
-import GenomeFileLoad from "./widgets/genomeFileLoad.js"
 import Globals from "./globals.js"
-import {createGenomeWidgets, initializeGenomeWidgets, loadGenome} from './widgets/genomeWidgets.js'
+import {createGenomeLoadDropdown, initializeGenomeWidgets, loadGenome} from './widgets/genomeLoadWidgets.js'
 import {createShareWidgets, shareWidgetConfigurator} from './shareWidgets.js'
 import {sessionURL} from './shareHelper.js'
 import {createSaveImageWidget} from './saveImageWidget.js'
@@ -235,30 +234,27 @@ async function initializationHelper(browser, container, options) {
 
     $('div#igv-session-dropdown-menu > :nth-child(2)').after(googleDriveDropdownItem('igv-app-dropdown-google-drive-session-file-button'))
 
-    const genomeFileLoadConfig =
+    const genomeDropdpwnConfig =
         {
+            igvMain: document.getElementById('igv-main'),
             localFileInput: document.getElementById('igv-app-dropdown-local-genome-file-input'),
             initializeDropbox,
             dropboxButton: options.dropboxAPIKey ? document.getElementById('igv-app-dropdown-dropbox-genome-file-button') : undefined,
-            googleEnabled: googleEnabled,
+            googleEnabled,
             googleDriveButton: document.getElementById('igv-app-dropdown-google-drive-genome-file-button'),
+            urlModalId: 'igv-app-genome-from-url-modal',
+            urlModalTitle: 'Genome URL',
+            genarkModalId: 'igv-app-genome-genark-modal',
+            genarkModalTitle: 'UCSC GenArk',
             loadHandler: async configuration => {
-
                 if (configuration.id !== browser.genome.id) {
                     await loadGenome(configuration)
                 }
-
             }
-
         }
 
     // Create widgets for URL and File loads.
-    createGenomeWidgets({
-        igvMain: document.getElementById('igv-main'),
-        urlModalId: 'igv-app-genome-from-url-modal',
-        genarkModalId: 'igv-app-genome-genark-modal',
-        genomeFileLoad: new GenomeFileLoad(genomeFileLoadConfig)
-    })
+    createGenomeLoadDropdown(genomeDropdpwnConfig)
 
     await initializeGenomeWidgets(options.genomes)
 

diff --git a/js/widgets/genomeWidgets.js → js/widgets/genomeLoadWidgets.js b/js/widgets/genomeWidgets.js → js/widgets/genomeLoadWidgets.js
@@ -1,13 +1,13 @@
 import {ModalTable, GenericDataSource} from '../../node_modules/data-modal/src/index.js'
+import * as Utils from './utils.js'
 import {StringUtils} from "../../node_modules/igv-utils/src/index.js"
-
 import Globals from "../globals.js"
 import AlertSingleton from "./alertSingleton.js"
 import {createURLModalElement} from "./urlModal.js"
 import FileLoadManager from "./fileLoadManager.js"
 import FileLoadWidget from "./fileLoadWidget.js"
-import * as Utils from './utils.js'
 import {genarkDatasourceConfigurator} from "./genarkDatasourceConfigurator.js"
+import GenomeFileLoad from "./genomeFileLoad.js"
 
 const MAX_CUSTOM_GENOMES = 5
 
@@ -16,12 +16,35 @@ let predefinedGenomes
 let genarkModalTable
 let genomeWidgetModal
 
-function createGenomeWidgets({igvMain, urlModalId, genarkModalId, genomeFileLoad}) {
+function createGenomeLoadDropdown({ igvMain,
+                                      localFileInput,
+                                      initializeDropbox,
+                                      dropboxButton,
+                                      googleEnabled,
+                                      googleDriveButton,
+                                      urlModalId,
+                                      urlModalTitle,
+                                      genarkModalId,
+                                      genarkModalTitle,
+                                      loadHandler }) {
+
+    const genomeFileLoadConfig =
+        {
+            localFileInput,
+            initializeDropbox,
+            dropboxButton,
+            googleEnabled,
+            googleDriveButton,
+            loadHandler
+        }
+
+    const genomeFileLoad = new GenomeFileLoad(genomeFileLoadConfig)
 
     const genarkModalTableConfig =
         {
             id: genarkModalId,
-            title: 'UCSC GenArk',
+            parent: igvMain,
+            title: genarkModalTitle,
             selectionStyle: 'single',
             pageLength: 100,
             okHandler: result => {
@@ -36,7 +59,7 @@ function createGenomeWidgets({igvMain, urlModalId, genarkModalId, genomeFileLoad
     genarkModalTable.setDatasource(dataSource)
 
     // URL modal
-    const urlModalElement = createURLModalElement(urlModalId, 'Genome URL')
+    const urlModalElement = createURLModalElement(urlModalId, urlModalTitle)
     igvMain.appendChild(urlModalElement)
 
     // File widget
@@ -62,6 +85,7 @@ function createGenomeWidgets({igvMain, urlModalId, genarkModalId, genomeFileLoad
         }
 
     })
+
 }
 
 /**
@@ -220,5 +244,5 @@ async function loadGenome(genomeConfiguration, custom = false) {
     // }
 }
 
-export {createGenomeWidgets, loadGenome, initializeGenomeWidgets}
+export {createGenomeLoadDropdown, loadGenome, initializeGenomeWidgets}
 
diff --git a/js/widgets/trackWidgets.js b/js/widgets/trackWidgets.js
@@ -81,6 +81,7 @@ function createTrackWidgetsWithTrackRegistry($igvMain,
         const encodeModalTableConfig =
             {
                 id: modalID,
+                parent: $igvMain.get(0),
                 title: 'ENCODE',
                 selectionStyle: 'multi',
                 pageLength: 100,
@@ -93,6 +94,7 @@ function createTrackWidgetsWithTrackRegistry($igvMain,
 
     customModalTable = new ModalTable({
         id: 'igv-custom-modal',
+        parent: $igvMain.get(0),
         title: 'UNTITLED',
         okHandler: trackLoadHandler, ...defaultCustomModalTableConfig
     })