Skip to content

Commit

Permalink
navbar - sampleInfo - save image edits
Browse files Browse the repository at this point in the history
  • Loading branch information
@turner
turner committed Nov 2, 2023
1 parent 10c8945 commit 5fa81c4
Show file tree
Hide file tree
Showing 3 changed files with 279 additions and 41 deletions.
123 changes: 119 additions & 4 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,7 @@
</button>

<div id="igv-app-navbar-navigation" class="collapse navbar-collapse">

<ul class="navbar-nav mr-auto">

<!-- Genome -->
Expand Down Expand Up @@ -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">
Expand Down Expand Up @@ -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 -->
Expand Down Expand Up @@ -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">
Expand Down
183 changes: 154 additions & 29 deletions js/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@

import igv from '../node_modules/igv/dist/igv.esm.js'
import * as GoogleAuth from '../node_modules/google-utils/src/googleAuth.js'
import * as GooglePicker from '../node_modules/google-utils/src/googleFilePicker.js'
import {makeDraggable} from "./draggable.js"
import {
AlertSingleton,
Expand All @@ -34,13 +35,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 './saveImageWidget.js'
import GtexUtils from "./gtexUtils.js"
import version from "./version.js"
import {createCircularViewResizeModal} from "./circularViewResizeModal.js"
Expand Down Expand Up @@ -226,7 +230,30 @@ async function initializationHelper(browser, container, options) {
})

await initializeGenomeWidgets(browser, options.genomes, $('#igv-app-genome-dropdown-menu'))


const trackLoader = async configurations => {
try {
// Add "searchable" attribute to non-indexed annotation tracks
for(let c of configurations) {


}
await browser.loadTrackList(configurations)
} catch (e) {
console.error(e)
AlertSingleton.present(e)
}
}

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 sessionSaver = () => {
try {
return browser.toJSON()
Expand Down Expand Up @@ -266,7 +293,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))

Expand Down Expand Up @@ -326,22 +355,131 @@ 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() {

if (true === googleEnabled) {
Expand Down Expand Up @@ -380,18 +518,6 @@ function configureGoogleSignInButton() {

}

function queryGoogleAuthenticationStatus(user) {

const name = user.name

const toggle = document.querySelector('#igv-google-drive-dropdown-toggle')
toggle.style.display = 'block'

const button = document.querySelector('#igv-google-drive-sign-out-button')
button.innerHTML = `Sign Out ${name}`

}

async function createSessionMenu(sessionListDivider, sessionRegistryFile, sessionLoader) {

let response = undefined
Expand Down Expand Up @@ -522,7 +648,6 @@ async function initializeDropbox() {
}
}


function guid () {
return ("0000" + (Math.random() * Math.pow(36, 4) << 0).toString(36)).slice(-4);
}
Expand Down
Loading

0 comments on commit 5fa81c4

Please sign in to comment.