diff --git a/README.md b/README.md deleted file mode 120000 index f10b203..0000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -public/README.md \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..0701372 --- /dev/null +++ b/README.md @@ -0,0 +1,12 @@ +## ViralWasm-Consensus + +A client-side WebAssembly pipeline for viral consensus sequence calling. + +Visit: https://niema-lab.github.io/ViralWasm-Consensus/ to run the pipeline. + +### ViralWasm-Consensus Offline +**Prerequisites**: Python (Can be downloaded here: https://www.python.org/downloads/) + +To run the pipeline locally without internet, download the latest release of ViralWasm-Consensus: https://github.com/Niema-Lab/ViralWasm-Consensus/archive/master.zip. After, extract the folder, and click on the `run_website.py` file. + +Note: When starting the website for the first time offline, you may be prompted with a firewall warning. Click "Allow Access" to run the pipeline. diff --git a/package-lock.json b/package-lock.json index 7f6f607..2ed292e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@biowasm/aioli": "^3.1.0", "bootstrap": "^5.3.1", "bootstrap-icons": "^1.10.5", + "marked": "^9.0.0", "pako": "^2.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", @@ -4645,6 +4646,17 @@ "sourcemap-codec": "^1.4.8" } }, + "node_modules/marked": { + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/marked/-/marked-9.0.0.tgz", + "integrity": "sha512-37yoTpjU+TSXb9OBYY5n78z/CqXh76KiQj9xsKxEdztzU9fRLmbWO5YqKxgCVGKlNdexppnbKTkwB3RipVri8w==", + "bin": { + "marked": "bin/marked.js" + }, + "engines": { + "node": ">= 16" + } + }, "node_modules/merge-stream": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz", diff --git a/package.json b/package.json index 2aaffb1..b697ee4 100644 --- a/package.json +++ b/package.json @@ -13,6 +13,7 @@ "@biowasm/aioli": "^3.1.0", "bootstrap": "^5.3.1", "bootstrap-icons": "^1.10.5", + "marked": "^9.0.0", "pako": "^2.1.0", "react": "^18.2.0", "react-dom": "^18.2.0", diff --git a/public/README.md b/public/README.md deleted file mode 100644 index e5dcb95..0000000 --- a/public/README.md +++ /dev/null @@ -1,9 +0,0 @@ -## ViralWasm-Consensus - -A client-side WebAssembly pipeline for viral consensus sequence calling. - -Visit: https://niema-lab.github.io/ViralWasm-Consensus/ to run the pipeline. - -To run the pipeline locally without internet, download the **offline** version of ViralWasm-Consensus. To do so, download the latest release / repository (https://github.com/Niema-Lab/ViralWasm-Consensus/archive/master.zip), extract the folder, and click on the `run_website.py` file. Please ensure that you have Python installed. - -Note: When starting the website for the first time offline, you may be prompted with a firewall warning. Click "Allow Access" to run the pipeline. diff --git a/public/README.md b/public/README.md new file mode 120000 index 0000000..32d46ee --- /dev/null +++ b/public/README.md @@ -0,0 +1 @@ +../README.md \ No newline at end of file diff --git a/src/App.jsx b/src/App.jsx index d753b75..e284553 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -2,16 +2,19 @@ // TODO: PWA? import React, { Component } from 'react' import Pako from 'pako'; +import { marked } from 'marked'; +import Aioli from "@biowasm/aioli/dist/aioli"; import 'bootstrap/dist/css/bootstrap.min.css'; import "bootstrap-icons/font/bootstrap-icons.css"; -import Aioli from "@biowasm/aioli/dist/aioli"; import { VIRAL_CONSENSUS_VERSION, MINIMAP2_VERSION, FASTP_VERSION, + OFFLINE_INSTRUCTIONS, + OFFLINE_INSTRUCTIONS_KEYWORDS, REFS, REF_NAMES, REF_GENOMES_DIR, @@ -49,7 +52,8 @@ export class App extends Component { this.state = { expandedContainer: undefined, additionalArgsOpen: false, - showOfflineInstructions: true, + showOfflineInstructions: false, + offlineInstructions: undefined, refGenomes: undefined, @@ -108,6 +112,8 @@ export class App extends Component { this.fetchExampleFiles(); this.fetchRefGenomes(); this.initRefGenomes(); + this.fetchOfflineInstructions(); + this.addOfflineInstructionsListener(); } preventNumberInputScrolling = () => { @@ -161,6 +167,22 @@ export class App extends Component { }, 250) } + fetchOfflineInstructions = async () => { + const res = await fetch(`${window.location.origin}${import.meta.env.BASE_URL || ''}${OFFLINE_INSTRUCTIONS}`); + const text = await res.text(); + const html = marked(text); + const offlineInstructions = html.slice(html.indexOf(OFFLINE_INSTRUCTIONS_KEYWORDS) + OFFLINE_INSTRUCTIONS_KEYWORDS.length) + this.setState({ offlineInstructions }); + } + + addOfflineInstructionsListener = () => { + document.addEventListener('keydown', (e) => { + if (e.key === 'Escape') { + this.hideOfflineInstructions(); + } + }) + } + uploadRefFile = (e) => { this.setState({ refFile: e.target.files[0], refFileValid: true, inputChanged: true }) } @@ -626,6 +648,10 @@ export class App extends Component { this.setState({ showOfflineInstructions: true }) } + hideOfflineInstructions = () => { + this.setState({ showOfflineInstructions: false }) + } + render() { return (
@@ -826,9 +852,10 @@ export class App extends Component { {this.state.showOfflineInstructions &&
- +
-
Running ViralWasm-Consensus Offline
+
Running ViralWasm-Consensus Offline
+
diff --git a/src/App.scss b/src/App.scss index 6698a1e..29591f6 100644 --- a/src/App.scss +++ b/src/App.scss @@ -15,6 +15,10 @@ opacity: 1; } +code { + font-size: 1em; +} + #container { display: flex; align-items: stretch; @@ -53,7 +57,7 @@ #output-text { width: 100%; height: 100%; - max-height: 100vh; + max-height: 150vh; min-height: 30vh; font-size: 0.9rem; border: 2px solid black; @@ -109,9 +113,11 @@ .card { margin-top: 10vh; - min-width: 60vw; + width: 70vw; min-height: 40vh; overflow-y: auto; + padding: 0 2rem; + box-sizing: border-box; .btn-close { position: absolute; diff --git a/src/constants.js b/src/constants.js index b290d6b..9dd7c70 100644 --- a/src/constants.js +++ b/src/constants.js @@ -72,6 +72,8 @@ export const REF_NAMES = { } } +export const OFFLINE_INSTRUCTIONS = "/README.md"; +export const OFFLINE_INSTRUCTIONS_KEYWORDS = "

ViralWasm-Consensus Offline

\n"; export const BIOWASM_WORKING_DIR = "/shared/data/"; export const OUTPUT_ID = "output-text"; export const EXAMPLE_REF_FILE = "data/NC_045512.2.fas";