finish up offline instructions

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.

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",

public/README.md

@@ -0,0 +1 @@
+../README.md

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 (
 			<div className="App pb-5">
@@ -826,9 +852,10 @@ export class App extends Component {
 				{this.state.showOfflineInstructions &&
 					<div id="offline-instructions">
 						<div className="card">
-							<button type="button" class="btn-close" aria-label="Close"></button>
+							<button type="button" className="btn-close" aria-label="Close" onClick={this.hideOfflineInstructions}></button>
 							<div className="card-body">
-								<h5 className="card-title text-center mt-3">Running ViralWasm-Consensus Offline</h5>
+								<h5 className="card-title text-center mt-3 mb-4">Running ViralWasm-Consensus Offline</h5>
+								<div dangerouslySetInnerHTML={{ __html: this.state.offlineInstructions }} />
 							</div>
 						</div>
 					</div>

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;

src/constants.js

@@ -72,6 +72,8 @@ export const REF_NAMES = {
     }
 }
 
+export const OFFLINE_INSTRUCTIONS = "/README.md";
+export const OFFLINE_INSTRUCTIONS_KEYWORDS = "<h3>ViralWasm-Consensus Offline</h3>\n";
 export const BIOWASM_WORKING_DIR = "/shared/data/";
 export const OUTPUT_ID = "output-text";
 export const EXAMPLE_REF_FILE = "data/NC_045512.2.fas";