From a324b0f52ae06288b61d719239009943643056df Mon Sep 17 00:00:00 2001 From: turner Date: Tue, 23 Jan 2024 09:56:43 -0500 Subject: [PATCH] Local session file selection U/X build out --- css/_localTrackFileCard.scss | 69 ++++++++++------------------- css/app.css | 40 +++-------------- css/app.css.map | 2 +- js/sessionUtils.js | 85 +++++++++++++++--------------------- 4 files changed, 63 insertions(+), 133 deletions(-) diff --git a/css/_localTrackFileCard.scss b/css/_localTrackFileCard.scss index f9e9f5c..0fe72e3 100644 --- a/css/_localTrackFileCard.scss +++ b/css/_localTrackFileCard.scss @@ -5,57 +5,32 @@ height: fit-content; width: 384px; - .card-header { + //.card-header { + // padding: unset; + // display: flex; + // flex-direction: column; + // flex-wrap: nowrap; + // justify-content: flex-start; + // align-items: center; + //} + + li { + input { + margin-right: 8px; + cursor: pointer; + } + } - padding: unset; + //li:hover { + // cursor: pointer; + // background-color: rgba(15, 15, 15, 0.04); + //} + .card-footer { display: flex; - flex-direction: column; + flex-direction: row; flex-wrap: nowrap; - justify-content: flex-start; + justify-content: space-around; align-items: center; - - >div:first-child { - width: 100%; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center; - - border-bottom-style: solid; - border-bottom-width: thin; - - >div { - color: transparent; - } - - >button { - cursor: pointer; - margin-right: 8px; - //color: #7F7F7F; - } - } - >div:first-child:hover { - cursor: grab; - } - >div:first-child:active { - cursor: grabbing; - } - - >div:last-child { - font-size: 1em; - padding: .5rem; - //text-transform: uppercase; - text-align: left; - background-color: white; - } - - //background-color: rgba(15, 15, 15, 0.25); - } - - li:hover { - cursor: pointer; - background-color: rgba(15, 15, 15, 0.04); } } diff --git a/css/app.css b/css/app.css index 0c5bc6a..23de7c1 100644 --- a/css/app.css +++ b/css/app.css @@ -138,46 +138,16 @@ select#igv-app-track-select-modal-select option[disabled] { height: fit-content; width: 384px; } -#igv-local-track-file-card.card .card-header { - padding: unset; - display: flex; - flex-direction: column; - flex-wrap: nowrap; - justify-content: flex-start; - align-items: center; +#igv-local-track-file-card.card li input { + margin-right: 8px; + cursor: pointer; } -#igv-local-track-file-card.card .card-header > div:first-child { - width: 100%; +#igv-local-track-file-card.card .card-footer { display: flex; flex-direction: row; flex-wrap: nowrap; - justify-content: space-between; + justify-content: space-around; align-items: center; - border-bottom-style: solid; - border-bottom-width: thin; -} -#igv-local-track-file-card.card .card-header > div:first-child > div { - color: transparent; -} -#igv-local-track-file-card.card .card-header > div:first-child > button { - cursor: pointer; - margin-right: 8px; -} -#igv-local-track-file-card.card .card-header > div:first-child:hover { - cursor: grab; -} -#igv-local-track-file-card.card .card-header > div:first-child:active { - cursor: grabbing; -} -#igv-local-track-file-card.card .card-header > div:last-child { - font-size: 1em; - padding: 0.5rem; - text-align: left; - background-color: white; -} -#igv-local-track-file-card.card li:hover { - cursor: pointer; - background-color: rgba(15, 15, 15, 0.04); } body { diff --git a/css/app.css.map b/css/app.css.map index bc29da5..be88815 100644 --- a/css/app.css.map +++ b/css/app.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["_panel.scss","_color.scss","_share-modal.scss","_encode.scss","_track-select.scss","_localTrackFileCard.scss","app.scss"],"names":[],"mappings":"AAMA;EACE;EACA;EACA;EAEA;EAEA,OAXuB;EAYvB,QAXwB;EAaxB,cCTmB;EDUnB,kBCNe;EDQf;;AAEA;EAEE;EACA;EACA;EACA;EACA;EAEA;EAEA;EACA;EAEA;;AAEA;EACE;EACA;EACA;EACA;EACA;EAEA;EACA,QAxCmC;EA0CnC,kBCrCa;EDuCb;EACA;;AAEA;EACE;EACA,OCjDU;EDkDV;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;;AE5DR;EAEE,OAJmB;;AAMnB;EACE,aAVkB;EAWlB,WAVgB;EAWhB;;;AAIJ;EACE;;;AAGF;EACE;;;AAGF;EACE,OAtBmB;EAuBnB;;;AAGF;AAAA;AAAA;EAGE;EACA;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EAEA;EAaA;;AAXA;EACE;EACA;;AAIF;EACE;EACA;;;AAMJ;EACE;;;AC3EF;EAEE;EAEA;EACA;EACA;EACA;EACA;;;ACRF;EAEE;;AAEA;EACE;;AAGF;EAGE;;;ACXJ;EACE;EACA;EAEA;EACA;;AAEA;EAEE;EAEA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAIJ;EACE;;AAEF;EACE;;AAGF;EACE;EACA;EAEA;EACA;;AAMJ;EACE;EACA;;;ACxCJ;EACE,aAHkB;;;AAQlB;EACE;;;AAKJ;EACE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAGF;EACE;;;AAIA;EACE;;;AAIJ;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE,YA3DkB;EA4DlB,kBAnEmB;;;AAyEf;EACE;EACA;EACA;;AAEF;EACE;;;AAMR;EACE;EAEA;;;AAGF;EACE;;;AAGF;EACE;EACA;EACA;;;AAGF;EACE;;;AAGF;EAEE;EACA;EACA;EACA;EACA;EAEA;EACA;EAEA;EACA;;AAEA;EACE;;AAEF;EACE;;;AAKJ;EACE;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKA;EACE;;AAEA;EACE;;;AAKN;EACE;;;AAGF;EACE;EACA;;;AAKA;EACE;;;AAOF;EACE;;;AAKJ;EAEE;EACA;EACA;EACA;EACA;EAEA;EACA;;;AAOE;EACE,OApMe;EAqMf;EACA;EACA;;;AAKN;EACE;;;AAKA;EACE,OAnNiB;EAoNjB;EAEA;;AAGF;EAEE;;;AAKJ;EACE;EACA;;;AAGF;EACE,eAjOsB;;;AAoOxB;EACE;EACA;EAEA;EACA,QAzOsB;EA0OtB,aA1OsB;EA4OtB;EACA;EACA;EACA;EACA;;AAEA;EACE,QAnPoB;EAoPpB,aApPoB;EAqPpB;EACA;;AACA;EACE,OA7Pe;EA8Pf;;AAIJ;EACE,QA9PoB;EA+PpB,aA/PoB;EAgQpB;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAMN;EACE;EAEA,QAtRkC;EAwRlC;;;AAIF;EACE,kBAjSmB;;;AAoSrB;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AAGF;EACE,OAnTqB;EAoTrB;EACA;;;AAGF;EACE,OAxTmB;EAyTnB,cA1TqB;;;AA6TvB;EACE,kBA9TqB;;;AAiUvB;EACE,kBAjUmB;;;AAoUrB;EACE;;;AAQA;EACE;EACA;EACA;EACA;EACA;EACA;;;AAKJ;EACE;;;AAIF;EACE;EACA;;;AAIF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;;;AAKA;EACE;EACA;EAEA;EACA;EAEA;EACA;EACA;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;;AAGF;EAEE;IACE;IACA;IAEA;IACA,QAzZoB;IA0ZpB,aA1ZoB;IA4ZpB;IACA;IACA;IACA;IACA;;EAEA;IACE,QAnakB;IAoalB,aApakB;IAqalB;IACA;;EACA;IACE,OA7aa;IA8ab;;EAIJ;IACE,QA9akB;IA+alB,aA/akB;IAgblB;IACA;;EAGF;IACE","file":"app.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["_panel.scss","_color.scss","_share-modal.scss","_encode.scss","_track-select.scss","_localTrackFileCard.scss","app.scss"],"names":[],"mappings":"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","file":"app.css"} \ No newline at end of file diff --git a/js/sessionUtils.js b/js/sessionUtils.js index ae8cd95..d9bc4cd 100644 --- a/js/sessionUtils.js +++ b/js/sessionUtils.js @@ -20,13 +20,8 @@ async function initializeSessionUtilities(browser, $igvMain, initializeDropbox, const sessionLoader = async config => { try { - // config.parentApp = 'igvwebapp' - const trackConfigurations = await browser.loadSession(config) - - // const str = trackConfigurations.map(config => JSON.stringify(config, null, 2)).join('\n') - // console.log(str) - // const localTrackFileNames = trackConfigurations.filter((config) => undefined !== config.file).map(({filename}) => filename) + const trackConfigurations = await browser.loadSession(config) const localTrackFileConfigs = trackConfigurations.filter((config) => undefined !== config.file) @@ -125,61 +120,63 @@ async function createSessionMenu(sessionListDivider, sessionRegistryFile, sessio function presentLocalTrackFileModal(trackFileNamesCard, trackFileNames) { - const html = trackFileNames.map(name => `
  • ${ name }
    • `).join('') - const fragment = document.createRange().createContextualFragment(html) - const parent = trackFileNamesCard.querySelector('.list-group') parent.innerHTML = '' - parent.appendChild(fragment) - const rows = trackFileNamesCard.querySelectorAll('.list-group-item') - const fileInput = document.getElementById('igv-local-track-file-input') + const html = trackFileNames.map(name =>`
  • ${ name }
    • `).join('') + const fragment = document.createRange().createContextualFragment(html) + parent.appendChild(fragment) - rows.forEach(row => row.addEventListener('click', e => { - fileInput.dataset.filename = e.target.innerText - fileInput.click() - })) + const strings = trackFileNames.map(name =>`
  • ${ name }
    • `) trackFileNamesCard.style.left = `128px` trackFileNamesCard.style.top = `128px` - // console.log(`Session contains local files that cannot be loaded automatically:\n${ trackFileNames.join('\n')}`) - // alert(`Session contains local files that cannot be loaded automatically:\n${ trackFileNames.join('\n')}`) } function createLocalTrackFileCard(parentElement, id, browser){ - const str = - `The session file used contains these local track files. They cannot be loaded automatically. Click on a name to present the file picker to load the file.` + // const str = + // `The session file used contains these local track files. They cannot be loaded automatically. Click on a name to present the file picker to load the file.` + const str = 'Session Local Files' let html = `
    -
    -
    nadda
    - -
    -
    - ${ str } -
    + ${ str }
    +
    + + + +
    ` let fragment = document.createRange().createContextualFragment(html) const cardElement = fragment.firstChild parentElement.appendChild(cardElement) - cardElement.querySelector('button').addEventListener('click', e => { + cardElement.querySelector(`#${ id }-cancel`).addEventListener('click', e => { + console.log('Cancel') + cardElement.style.left = '-1000px' + cardElement.style.top = '-1000px' + }) + + cardElement.querySelector(`#${ id }-retrieve-files`).addEventListener('click', e => { + const fileInput = document.getElementById('igv-local-track-file-input') + fileInput.click() + }) + + cardElement.querySelector(`#${ id }-load-tracks`).addEventListener('click', e => { + console.log('Load Files') cardElement.style.left = '-1000px' cardElement.style.top = '-1000px' }) makeDraggable(cardElement, cardElement.querySelector('.card-header'), undefined) - html = `` + html = `` fragment = document.createRange().createContextualFragment(html) const fileInputElement = fragment.firstChild parentElement.appendChild(fileInputElement) @@ -187,31 +184,19 @@ function createLocalTrackFileCard(parentElement, id, browser){ fileInputElement.addEventListener('change', async e => { const {files} = fileInputElement - const name = files[ 0 ].name - - if (fileInputElement.dataset.filename === name) { + const names = Array.from(files).map(({ name }) => name) - const config = sessionLocalTrackFilesDictionary[ name ] + if (names.length > 0) { - config.url = files[ 0 ] - - if (config) { - - try { - await browser.loadTrackList([ config ]) - } catch (e) { - console.error(e) - AlertSingleton.present(e) + for (const name of names) { + const element = document.querySelector(`[data-filename="${ name }"]`) + if (null !== element) { + console.log(`Retrieved file named ${ element.innerText }`) } - - } else { - alert(`Could not find track file named ${ name }`) } - } else { - alert(`Retrieved file ${ name } does not match selected file ${ fileInputElement.dataset.filename }. `) - } + } })