Skip to content

Commit

Permalink
improve input ref seq ui, fix fastq file type detection
Browse files Browse the repository at this point in the history
  • Loading branch information
daniel-ji committed Sep 16, 2023
1 parent 9ab3441 commit 7aa153b
Show file tree
Hide file tree
Showing 3 changed files with 47 additions and 25 deletions.
54 changes: 36 additions & 18 deletions src/App.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 })
}
Expand Down Expand Up @@ -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) {
Expand All @@ -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;
Expand Down Expand Up @@ -670,8 +678,13 @@ export class App extends Component {
</div>
<div id="input-content">
<div className="d-flex flex-column mb-4">
<label htmlFor="alignment-files" className="form-label">Upload Input Reads File(s) (BAM, SAM, FASTQ(s)){this.state.alignmentFiles === 'EXAMPLE_DATA' && <span><strong>: Using example <a href={EXAMPLE_ALIGNMENT_FILE} target="_blank" rel="noreferrer">BAM file</a>.</strong></span>}<span className="text-danger"> *</span></label>
<label htmlFor="alignment-files" className="form-label">Upload Input Reads File(s) (BAM, SAM, FASTQ(s))<span className="text-danger"> *</span></label>
<input className={`form-control ${!this.state.alignmentFilesValid && 'is-invalid'}`} type="file" multiple accept=".sam,.bam,.fastq,.fastq.gz,.fq,.fq.gz" id="alignment-files" onChange={this.uploadAlignmentFiles} />
{this.state.alignmentFiles === 'EXAMPLE_DATA' &&
<p className="mt-2 mb-0"><strong>Using Loaded Example file: <a
href={`${import.meta.env.BASE_URL || ''}${EXAMPLE_ALIGNMENT_FILE}`}
target="_blank" rel="noreferrer">example.bam</a></strong></p>
}
</div>

{/* NOTE: we assume here that if they upload more than one file, they are intending to upload multiple FASTQ files */}
Expand Down Expand Up @@ -700,24 +713,29 @@ export class App extends Component {
</div>
}

<label htmlFor="common-sequences" className="form-label mt-2">
Select Preloaded Reference Sequence
{this.state.refFile !== undefined &&
<span className='mt-2 text-warning'>
<strong>&nbsp;(Warning: Using Uploaded Reference File)</strong>
</span>
}
</label>
<select className="form-select" aria-label="Default select example" id="common-sequences" value={this.state.preloadedRef ?? ''} onChange={this.setPreloadedRef}>
<option value="">Select a Reference Sequence</option>
{this.state.preloadRefOptions}
</select>
<div className={`${this.state.refFile !== undefined ? 'disabled-input' : ''}`}>
<label htmlFor="common-sequences" className="form-label mt-2">
Select Preloaded Reference Sequence
{this.state.refFile !== undefined &&
<span className='mt-2 text-warning'>
<strong>&nbsp;(Using Uploaded Sequence)</strong>
</span>
}
</label>
<select className="form-select" aria-label="Default select example" id="common-sequences" value={this.state.preloadedRef ?? ''} onChange={this.setPreloadedRef}>
<option value="">Select a Reference Sequence</option>
{this.state.preloadRefOptions}
</select>
</div>

<h5 className="mt-2 text-center">&#8213; OR &#8213;</h5>

<div className="d-flex flex-column mb-4">
<label htmlFor="reference-file" className="form-label">Reference File (FASTA)<span className="text-danger"> *</span></label>
<input className={`form-control ${!this.state.refFileValid && 'is-invalid'}`} type="file" id="reference-file" onChange={this.uploadRefFile} />
<div className="input-group">
<input className={`form-control ${!this.state.refFileValid && 'is-invalid'}`} type="file" id="reference-file" onChange={this.uploadRefFile} />
<button className="btn btn-outline-danger" type="button" id="reference-file-addon" onClick={this.clearRefFile}><i className="bi bi-trash"></i></button>
</div>
</div>

<div className='form-check mb-4' style={{ opacity: (typeof this.state.alignmentFiles === 'object' && (this.state.alignmentFiles.length > 1 || this.state.alignmentFilesAreFASTQ)) ? 1 : 0.5 }}>
Expand Down
8 changes: 7 additions & 1 deletion src/App.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -113,7 +119,7 @@ code {

.card {
margin-top: 10vh;
width: 70vw;
width: 70vw;
min-height: 40vh;
overflow-y: auto;
padding: 0 2rem;
Expand Down
10 changes: 4 additions & 6 deletions src/constants.js
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
Expand Down

0 comments on commit 7aa153b

Please sign in to comment.