Navbar - Save as svg/png - Sample Info menu

igvteam · Nov 1, 2023 · a9af1c5 · a9af1c5
1 parent 34d91b7
commit a9af1c5
Show file tree

Hide file tree

Showing 3 changed files with 264 additions and 27 deletions.
diff --git a/index.html b/index.html
@@ -68,6 +68,7 @@
     </button>
 
     <div id="igv-app-navbar-navigation" class="collapse navbar-collapse">
+
         <ul class="navbar-nav mr-auto">
 
             <!-- Genome -->
@@ -188,6 +189,55 @@
                 </div>
             </li>
 
+            <!-- Sample Info File -->
+            <li class="nav-item px-3">
+                <div id="igv-app-sample-info-dropdown" class="dropdown">
+
+                    <a id="igv-app-sample-info-dropdown-button" class="dropdown-toggle" href="#" data-toggle="dropdown">
+                        Sample Info
+                    </a>
+
+                    <div id="igv-app-sample-info-dropdown-menu" class="dropdown-menu">
+
+                        <!-- local file -->
+                        <label class="dropdown-item btn btn-default btn-file">
+                            <div class="igv-app-dropdown-item-cloud-storage">
+                                <div>
+                                    Local File ...
+                                </div>
+                                <div>
+                                    <input id="igv-app-sample-info-dropdown-local-track-file-input" type="file" name="file" multiple style="display: none;">
+                                </div>
+                            </div>
+                        </label>
+
+                        <!-- Dropbox -->
+                        <div class="dropdown-item">
+                            <div id="igv-app-dropdown-dropbox-sample-info-file-button" class="igv-app-dropdown-item-cloud-storage">
+                                <div>Dropbox</div>
+                                <div><img id="igv-app-sample-info-dropbox-button-image" width="18" height="18"></div>
+                                <div>...</div>
+                            </div>
+                        </div>
+
+                        <!-- Google Drive -->
+                        <div class="dropdown-item">
+                            <div id="igv-app-dropdown-google-drive-sample-info-file-button" class="igv-app-dropdown-item-cloud-storage">
+                                <div>Google Drive</div>
+                                <div><img id="igv-app-sample-info-google-drive-button-image" width="18" height="18"></div>
+                                <div>...</div>
+                            </div>
+                        </div>
+
+                        <!-- URL -->
+                        <button class="dropdown-item" type="button" data-toggle="modal" data-target="#igv-app-sample-info-from-url-modal">
+                            URL ...
+                        </button>
+
+                    </div>
+                </div>
+            </li>
+
             <!-- Session -->
             <li class="nav-item px-3">
                 <div class="dropdown">
@@ -255,13 +305,38 @@
                 </div>
             </li>
 
-            <!-- Save SVG -->
+            <!-- Save Image. SVG or PNG -->
             <li class="nav-item px-3">
-                <div>
-                    <a id="igv-app-save-svg-button" href="#" data-toggle="modal" data-target="#igv-app-svg-save-modal">
-                        Save SVG
+                <div class="dropdown">
+
+                    <a id="igv-app-save-image-dropdown-button" href="#" data-toggle="dropdown">
+                        Save Image
                     </a>
+
+                    <div id="igv-app-save-image-dropdown-menu" class="dropdown-menu">
+
+                        <!-- SVG -->
+                        <div class="dropdown-item">
+
+                            <a id="igv-app-save-svg-button" href="#" data-toggle="modal" data-target="#igv-app-svg-save-modal">
+                                SVG
+                            </a>
+
+                        </div>
+
+                        <!-- PNG -->
+                        <div class="dropdown-item">
+
+                            <a id="igv-app-save-png-button" href="#" data-toggle="modal" data-target="#igv-app-png-save-modal">
+                                PNG
+                            </a>
+
+                        </div>
+
+                    </div>
+
                 </div>
+
             </li>
 
             <!-- Circular View -->
@@ -465,6 +540,46 @@
 
     </div>
 
+    <!-- PNG save -->
+    <div id="igv-app-png-save-modal" class="modal fade igv-app-file-save-modal">
+
+        <div class="modal-dialog modal-lg">
+
+            <div class="modal-content">
+
+                <div class="modal-header">
+
+                    <div id="igv-app-png-save-modal-label" class="modal-title">
+                        <div>
+                            Save PNG File
+                        </div>
+                    </div>
+
+                    <button type="button" class="close" data-dismiss="modal">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+
+                <div class="modal-body">
+                    <input class="form-control" type="text" placeholder="igv-app.png">
+
+                    <div>
+                        Enter filename with .png suffix
+                    </div>
+
+                </div>
+
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-sm btn-outline-secondary" data-dismiss="modal">Cancel</button>
+                    <button type="button" class="btn btn-sm btn-secondary">OK</button>
+                </div>
+
+            </div>
+
+        </div>
+
+    </div>
+
     <!-- Help - About - Modal -->
     <div id="igv-app-help-about-modal" class="modal fade" tabindex="-1">
         <div class="modal-dialog">

diff --git a/js/app.js b/js/app.js
@@ -34,13 +34,16 @@ import {
     googleDriveButtonImageBase64,
     googleDriveDropdownItem,
     getPathsWithTrackRegistryFile,
-    updateTrackMenusWithTrackConfigurations
+    updateTrackMenusWithTrackConfigurations,
+    FileLoadManager,
+    FileLoadWidget,
+    Utils
 } from '../node_modules/igv-widgets/dist/igv-widgets.js'
 import Globals from "./globals.js"
 import {createGenomeWidgets, initializeGenomeWidgets, loadGenome} from './genomeWidgets.js'
 import {createShareWidgets, shareWidgetConfigurator} from './shareWidgets.js'
 import {sessionURL} from './shareHelper.js'
-import {createSVGWidget} from './svgWidget.js'
+import {createSaveImageWidget} from './svgWidget.js'
 import GtexUtils from "./gtexUtils.js"
 import version from "./version.js"
 import {createCircularViewResizeModal} from "./circularViewResizeModal.js"
@@ -138,7 +141,7 @@ async function main(container, config) {
 
 async function initializationHelper(browser, container, options) {
 
-    ['track', 'genome'].forEach(str => {
+    ['track', 'genome', 'sample-info'].forEach(str => {
         let imgElement
 
         imgElement = document.querySelector(`img#igv-app-${str}-dropbox-button-image`)
@@ -202,6 +205,15 @@ async function initializationHelper(browser, container, options) {
         }
     }
 
+    createSampleInfoMenu(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',
+        trackLoader)
+
     const trackMenuHandler = urlList => {
 
         const urlSet = browser.getTrackURLs()
@@ -270,7 +282,9 @@ async function initializationHelper(browser, container, options) {
         document.querySelector('#igv-session-list-divider').style.display = 'none'
     }
 
-    createSVGWidget({browser, saveModal: document.getElementById('igv-app-svg-save-modal')})
+    createSaveImageWidget({ browser, saveModal: document.getElementById('igv-app-svg-save-modal'), imageType: 'svg' })
+
+    createSaveImageWidget({ browser, saveModal: document.getElementById('igv-app-png-save-modal'), imageType: 'png' })
 
     createShareWidgets(shareWidgetConfigurator(browser, container, options))
 
@@ -330,20 +344,130 @@ async function initializationHelper(browser, container, options) {
 
 }
 
-async function updateTrackMenusWithTrackHub(hub) {
-    const { id } = hub.getGenomeConfig()
-    const trackConfigs = hub.getTrackConfigurations()
-    await updateTrackMenusWithTrackConfigurations(id, undefined, trackConfigs, $('#igv-app-track-dropdown-menu'))
-}
-function parseURLParams(url) {
-    const searchParams = new URL(url).searchParams;
-    const params = {};
+function createSampleInfoMenu(igvMain,
+                              localFileInput,
+                              initializeDropbox,
+                              dropboxButton,
+                              googleEnabled,
+                              googleDriveButton,
+                              urlModalId,
+                              trackLoadHandler) {
+
+    // local file
+    localFileInput.addEventListener('change', async () => {
+
+        const {files} = localFileInput
+
+        const paths = Array.from(files)
+
+        localFileInput.value = ''
+
+        await trackLoadHandler([ { type: 'sampleinfo', url: paths[ 0 ] } ])
+    })
+
+    //  Dropbox
+    if (dropboxButton) dropboxButton.addEventListener('click', async () => {
+
+        const result = await initializeDropbox()
+
+        if (true === result) {
+
+            const obj =
+                {
+                    success: dbFiles => {
+
+                        const configList = dbFiles.map(( { link } ) => {
+                            return { type: 'sampleinfo', url: link }
+                        })
+
+                        trackLoadHandler(configList)
+                    },
+                    cancel: () => {},
+                    linkType: "preview",
+                    multiselect: false,
+                    folderselect: false,
+                }
+
+            Dropbox.choose(obj)
+
+        } else {
+            AlertSingleton.present('Cannot connect to Dropbox')
+        }
+    })
+
+    // Google Drive
+    if (!googleEnabled) {
+        googleDriveButton.parentElement.style.display = 'none'
+    } else {
+
+        googleDriveButton.addEventListener('click', () => {
+
+            const filePickerHandler = async responses => {
+                const paths = responses.map(({ url }) => url)
+                await trackLoadHandler([ { type: 'sampleinfo', url: paths[ 0 ] } ])
+            }
+
+            GooglePicker.createDropdownButtonPicker(false, filePickerHandler)
+        })
 
-    for (const [key, value] of searchParams) {
-        params[key] = value;
     }
 
-    return params;
+    // URL
+    const html =
+        `<div id="${ urlModalId }" class="modal">
+
+            <div class="modal-dialog modal-lg">
+    
+                <div class="modal-content">
+    
+                    <div class="modal-header">
+                        <div class="modal-title">Sample Info URL</div>
+    
+                        <button type="button" class="close" data-dismiss="modal">
+                            <span>&times;</span>
+                        </button>
+    
+                    </div>
+    
+                    <div class="modal-body">
+                    </div>
+    
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-sm btn-outline-secondary" data-dismiss="modal">Cancel</button>
+                        <button type="button" class="btn btn-sm btn-secondary" data-dismiss="modal">OK</button>
+                    </div>
+    
+                </div>
+    
+            </div>
+
+        </div>`
+
+    const fragment = document.createRange().createContextualFragment(html)
+
+    const urlModal = fragment.firstChild
+
+    igvMain.appendChild(urlModal)
+
+    const fileLoadWidgetConfig =
+        {
+            widgetParent: urlModal.querySelector('.modal-body'),
+            dataTitle: 'Sample Info',
+            indexTitle: 'Index',
+            mode: 'url',
+            fileLoadManager: new FileLoadManager(),
+            dataOnly: false,
+            doURL: true
+        };
+
+    const fileLoadWidget = new FileLoadWidget(fileLoadWidgetConfig)
+
+    Utils.configureModal(fileLoadWidget, urlModal, async fileLoadWidget => {
+        const paths = fileLoadWidget.retrievePaths()
+        await trackLoadHandler([ { type: 'sampleinfo', url: paths[ 0 ] } ])
+        return true
+    })
+
 }
 
 function configureGoogleSignInButton() {

diff --git a/js/svgWidget.js b/js/svgWidget.js
@@ -20,11 +20,9 @@
  * THE SOFTWARE.
  *
  */
+function createSaveImageWidget ({ browser, saveModal, imageType }) {
 
-
-function createSVGWidget ({ browser, saveModal }) {
-
-    const input_default_value = 'igv-app.svg';
+    const input_default_value = `igv-app.${imageType}`;
 
     const input = saveModal.querySelector('input');
 
@@ -38,14 +36,14 @@ function createSVGWidget ({ browser, saveModal }) {
 
         if (undefined === filename || '' === filename) {
             filename = input.getAttribute('placeholder');
-        } else if (!filename.endsWith(".svg")) {
-            filename = filename + '.svg';
+        } else if (!filename.endsWith(`.${imageType}`)) {
+            filename = `${filename}.${imageType}`
         }
 
         // dismiss modal
         $(saveModal).modal('hide');
 
-        browser.saveSVGtoFile({ filename });
+        imageType === 'svg' ? browser.saveSVGtoFile({ filename }) : browser.savePNGtoFile(filename)
     };
 
     // ok - button
@@ -69,4 +67,4 @@ function createSVGWidget ({ browser, saveModal }) {
 
 }
 
-export { createSVGWidget }
+export { createSaveImageWidget }