From 7aa153b4eb796db66c33afaccbde993647e08cbe Mon Sep 17 00:00:00 2001 From: Daniel Ji Date: Fri, 15 Sep 2023 22:32:27 -0700 Subject: [PATCH] improve input ref seq ui, fix fastq file type detection --- src/App.jsx | 54 ++++++++++++++++++++++++++++++++---------------- src/App.scss | 8 ++++++- src/constants.js | 10 ++++----- 3 files changed, 47 insertions(+), 25 deletions(-) diff --git a/src/App.jsx b/src/App.jsx index 3997dfb..1afebfb 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -184,6 +184,14 @@ export class App extends Component { this.setState({ refFile: e.target.files[0], refFileValid: true, inputChanged: true }) } + clearRefFile = () => { + if (this.state.refFile !== undefined) { + this.setState({ inputChanged: true }) + } + this.setState({ refFile: undefined }) + document.getElementById('reference-file').value = null; + } + setPreloadedRef = (event) => { this.setState({ preloadedRef: event.target.value === 'undefined' ? undefined : event.target.value, inputChanged: true, refFileValid: true }) } @@ -421,10 +429,6 @@ export class App extends Component { return; } - const startTime = performance.now(); - LOG("Starting job...") - this.setState({ done: false, timeElapsed: undefined, loading: true, inputChanged: false, consensusExists: false, posCountsExists: false, insCountsExists: false, fastpOutputExists: false, minimapOutputExists: false }) - const CLI = this.state.CLI; if (CLI === undefined) { @@ -434,6 +438,10 @@ export class App extends Component { return; } + const startTime = performance.now(); + LOG("Starting job...") + this.setState({ done: false, timeElapsed: undefined, loading: true, inputChanged: false, consensusExists: false, posCountsExists: false, insCountsExists: false, fastpOutputExists: false, minimapOutputExists: false }) + const refFileName = DEFAULT_REF_FILE_NAME; const alignmentFileName = (this.state.alignmentFiles[0]?.name?.endsWith('.bam') || this.state.alignmentFiles === 'EXAMPLE_DATA') ? DEFAULT_ALIGNMENT_BAM_FILE_NAME : DEFAULT_ALIGNMENT_SAM_FILE_NAME; @@ -670,8 +678,13 @@ export class App extends Component {
- + + {this.state.alignmentFiles === 'EXAMPLE_DATA' && +

Using Loaded Example file: example.bam

+ }
{/* NOTE: we assume here that if they upload more than one file, they are intending to upload multiple FASTQ files */} @@ -700,24 +713,29 @@ export class App extends Component {
} - - +
+ + +
― OR ―
- +
+ + +
1 || this.state.alignmentFilesAreFASTQ)) ? 1 : 0.5 }}> diff --git a/src/App.scss b/src/App.scss index 29591f6..e3daafb 100644 --- a/src/App.scss +++ b/src/App.scss @@ -19,6 +19,12 @@ code { font-size: 1em; } +.disabled-input { + opacity: 0.6; + user-select: none; + pointer-events: none; +} + #container { display: flex; align-items: stretch; @@ -113,7 +119,7 @@ code { .card { margin-top: 10vh; - width: 70vw; + width: 70vw; min-height: 40vh; overflow-y: auto; padding: 0 2rem; diff --git a/src/constants.js b/src/constants.js index ff4efb8..6471e72 100644 --- a/src/constants.js +++ b/src/constants.js @@ -161,12 +161,10 @@ export const ARE_FASTQ = (files) => { for (const file of files) { const name = file.name; - if (!(name !== undefined && ( - name.endsWith('.fastq') || - name.endsWith('.fq') || - name.endsWith('.fastq.gz') || - name.endsWith('.fq.gz') - ))) { + const extensionIndex = name.indexOf('.') === -1 ? name.length : name.indexOf('.'); + const extension = name.slice(extensionIndex); + + if (!(extension.includes('fastq') || extension.includes('fq'))) { return false; } }