Skip to content

GitLab

webina
webina
Commit 6c93c406 authored by jdurrant's avatar jdurrant
Browse files
Options

Updating with new file management system.

parent c735bc5d
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 348 additions and 156 deletions
.gitignore
View file @ 6c93c406
......@@ -10,5 +10,5 @@ src/Webina/src/new/
src/Webina/src/orig/
src/example/small/
src/example/src/
dist
./dist
webina.zip
CHANGELOG.md
View file @ 6c93c406
Changes
=======
1.0.4 WIP
---------
Need to update README.md explaining webina.zip now in releases.
Need to add grant info, and to update citation.
add Grant number and citation to all web apps. Also licenses?
Good to mmention that all errors interpreted as file not found. For exampmle, when ligand was B (from commmand line):
Output will be ligand_final_out.pdbqt
WARNING: at low exhaustiveness, it may be impossible to utilize all CPUs
Reading input ...
Parse error on line 45 in file "ligand_final.pdbqt": ATOM syntax incorrect: "B" is not a valid AutoDock type. Note that AutoDock atom types are case-sensitive.
But in browser:
No such file or directory.
Would be good to be able to catch errors better:
Uncaught 5347440 - Exception catching is disabled, this exception cannot be caught. Compile with -s DISABLE_EXCEPTION_CATCHING=0 or DISABLE_EXCEPTION_CATCHING=2 to catch.
1.0.3
-----
......
src/UI/Modal/ConvertFileModal.ts
View file @ 6c93c406
......@@ -101,13 +101,23 @@ let methodsFunctions = {
this["gen3D"],
parseFloat(this["phVal"])
).then((out) => {
this.$store.commit("setVar", {
name: this["currentType"] + "Contents",
val: out
});
this["$refs"]["convert-modal"].hide();
// Update the filename to end in pdbqt.
let newFilename = Utils.replaceExt(
this.$store.state[this["currentType"] + "FileName"],
"converted.pdbqt"
);
// this.$store.commit("updateFileName", { type: this["currentType"], filename: newFilename });
let onConvertDone = this.$store.state["onConvertDone"];
onConvertDone(newFilename, out);
// this.$store.commit("setVar", {
// name: this["currentType"] + "Contents",
// val: out
// });
// This makes it look like it validated.
this.$store.commit("setVar", {
name: this["currentType"] + "ForceValidate",
......@@ -120,10 +130,6 @@ let methodsFunctions = {
val: true
});
// Update the filename to end in pdbqt.
let newFilename = Utils.replaceExt(this.$store.state[this["currentType"] + "FileName"], "converted.pdbqt");
this.$store.commit("updateFileName", { type: this["currentType"], filename: newFilename });
if (successMsgs.length !== 0) {
let overallMsg = successMsgs.map((m, i) => { return "(" + (i + 1).toString() + ") " + m; }).join(" ");
this["$bvModal"]["msgBoxOk"]("To convert your file to PDBQT, Webina had to make the following modifications: " + overallMsg, {
......@@ -138,6 +144,8 @@ let methodsFunctions = {
return;
}
// All attempts have failed...
this["$refs"]["convert-modal"].hide();
this["$bvModal"]["msgBoxOk"]("Could not convert your file. Are you sure it is a properly formatted " + this["currentExt"] + " file? If so, it may be too large to convert in the browser.", {
"title": "Error Converting File!",
......@@ -146,7 +154,7 @@ let methodsFunctions = {
name: this["currentType"] + "ForceValidate",
val: false
});
this.$store.commit("updateFileName", { type: this["currentType"], filename: "" });
// this.$store.commit("updateFileName", { type: this["currentType"], filename: "" });
console.log("ERROR: " + msg);
});
......@@ -221,17 +229,20 @@ let methodsFunctions = {
"cancelPressed"(): void {
// Not sure the below is really necessary, but let's just make
// sure.
this.$store.commit("setVar", {
name: this["currentType"] + "FileName",
val: undefined
});
// this.$store.commit("setVar", {
// name: this["currentType"] + "FileName",
// val: undefined
// });
this.$store.commit("setValidationParam", {
name: this["currentType"],
val: false
});
this.$store.commit("updateFileName", { type: this["currentType"], filename: "" });
// this.$store.commit("updateFileName", { type: this["currentType"], filename: "" });
let onConvertCancel = this.$store.state["onConvertCancel"];
onConvertCancel();
},
/**
......@@ -262,7 +273,7 @@ export function setup(): void {
},
"computed": computedFunctions,
"methods": methodsFunctions,
"template": `
"template": /* html */ `
<b-modal
ref="convert-modal"
@shown="reloadIFrame"
......
src/UI/Tabs/VinaExistingOutput.ts
View file @ 6c93c406
......@@ -118,7 +118,7 @@ let methodsFunctions = {
*/
export function setup(): void {
Vue.component('vina-existing-output', {
"template": `
"template": /* html */ `
<b-form>
<b-card
class="mb-2 text-center"
......@@ -131,27 +131,49 @@ export function setup(): void {
</b-card>
<sub-section title="Existing Output Files">
<file-input
<!-- TODO: attention here -->
<file-loader-main
label="Receptor"
id="receptor"
description="The rigid part of the receptor (PDBQT or PDB)."
accept=".pdbqt, .pdb"
></file-input>
></file-loader-main>
<!-- <file-input
label="Receptor"
id="receptor"
description="The rigid part of the receptor (PDBQT or PDB)."
accept=".pdbqt, .pdb"
></file-input> -->
<file-input
<!-- TODO: attention here -->
<file-loader-main
label="Docked Output"
id="output"
description="The Webina/Vina output file (PDBQT, OUT, VINA, or TXT) containing docked ligand poses."
accept=".pdbqt, .out, .vina, .txt"
></file-input>
></file-loader-main>
<!-- <file-input
label="Docked Output"
id="output"
description="The Webina/Vina output file (PDBQT, OUT, VINA, or TXT) containing docked ligand poses."
accept=".pdbqt, .out, .vina, .txt"
></file-input> -->
<file-input
<!-- TODO: attention here -->
<file-loader-main
label="Correct Pose"
id="crystal"
:required="false"
description="The correct ligand pose, if known from experiment. This PDBQT or PDB file is optional."
accept=".pdbqt, .pdb"
></file-loader-main>
<!-- <file-input
label="Correct Pose"
id="crystal"
:required="false"
description="The correct ligand pose, if known from experiment. This PDBQT or PDB file is optional."
accept=".pdbqt, .pdb"
></file-input>
></file-input> -->
</sub-section>
<form-button cls="float-right mb-4" @click.native="onSubmitClick" variant="primary">Load Files</form-button>
......
src/UI/Tabs/VinaParams.ts
View file @ 6c93c406
......@@ -4,6 +4,8 @@
import * as Utils from "../../Utils";
import { IConvert, IFileLoaded, IFileLoadError } from "../Forms/FileLoader/Common/Interfaces";
import { getExt } from "../Forms/FileLoader/Common/Utils";
declare var Vue;
declare var Webina;
......@@ -238,10 +240,12 @@ let methodsFunctions = {
if (pass === false) {
if (modalWarning === true) {
this.$store.commit("openModal", {
title: "Invalid Parameters!",
body: "<p>Please correct the following parameter(s) before continuing: <code>" + badParams.join(" ") + "</code></p>"
});
this.onError(
"Invalid Parameters!",
"Please correct the following parameter(s) before continuing: <code>"
+ badParams.join(" ")
+ "</code>"
);
}
}
......@@ -253,6 +257,61 @@ let methodsFunctions = {
return pass;
},
onError(title: string, msg: string): void {
this.$store.commit("openModal", {
title: title,
body: `<p>${msg}</p>`
});
},
"onFileLoaded"(fileInfo: IFileLoaded): void {
this.$store.commit("updateFileName", {
type: this["id"],
filename: fileInfo.filename,
});
// this.getModelFileContents(this["file"]).then((text: string) => {
this.$store.commit("setVar", {
name: fileInfo.id + "Contents",
val: fileInfo.fileContents,
});
// Reset the show non-protein atom's link.
if (fileInfo.id === "receptor") {
this.$store.commit("setVar", {
name: "showKeepProteinOnlyLink",
val: true,
});
}
// });
},
"onConvertNeeded"(convertInfo: IConvert): void {
// Set the filename.
this.$store.commit("updateFileName", {
type: convertInfo.id,
filename: convertInfo.filename,
});
let ext = getExt(convertInfo.filename);
// this.getModelFileContents(val).then((text: string) => {
this.$store.commit("openConvertFileModal", {
ext: ext,
type: convertInfo.id,
file: convertInfo.fileContents,
onConvertCancel: convertInfo.onConvertCancel,
onConvertDone: convertInfo.onConvertDone,
});
// });
alert("");
// Handle below!!!
// convertInfo.onConvertCancel
// convertInfo.onConvertDone
},
/**
* Runs after the Vina WASM file is complete.
* @param {string} outPdbqtFileTxt The contents of the Vina output pdbqt file.
......@@ -302,10 +361,17 @@ let methodsFunctions = {
* @returns void
*/
showWebinaError(message: string): void {
this.$store.commit("openModal", {
title: "Webina Error!",
body: "<p>Webina returned the following error: <code>" + message + "</code></p>"
});
this.onError(
"Webina Error!",
"Webina returned the following error: <code>" + message + "</code>"
);
},
"showFileLoaderError"(error: IFileLoadError): void {
this.onError(
error.title,
error.body
);
}
}
......@@ -323,7 +389,7 @@ function mountedFunction(): void {
*/
export function setup(): void {
Vue.component('vina-params', {
"template": `
"template": /* html */ `
<div>
<b-form v-if="webAssemblyAvaialble">
<b-card
......@@ -337,12 +403,23 @@ export function setup(): void {
</b-card>
<sub-section title="Input (PDBQT) Files" v-if="showFileInputs">
<file-input
<!-- TODO: Attention here -->
<file-loader
label="Receptor"
id="receptor"
description="Formats: PDBQT (best), PDB, ENT, XYZ, PQR, MCIF, MMCIF. If PDB, be sure to add polar hydrogen atoms."
accept=".pdbqt" convert=".pdb, .ent, .xyz, .pqr, .mcif, .mmcif"
:required="true"
:allowUrlInput="false"
:multipleFiles="false"
:countDownToNextInput="-1"
@onError="showFileLoaderError"
@onFileLoaded="onFileLoaded"
@onConvertNeeded="onConvertNeeded"
>
<!--
@onFileNameChange="fileNameChanged"
@onTimeUp="timeUp" -->
<template v-slot:extraDescription>
<span v-if="showKeepProteinOnlyLink">
<a href='' @click="onShowKeepProteinOnlyClick($event);">Automatically remove all non-protein atoms?</a>
......@@ -351,24 +428,46 @@ export function setup(): void {
<b>(Removed all non-protein atoms!)</b>
</span>
</template>
</file-input>
</file-loader>
<file-input
label="Ligand"
<!-- TODO: Attention here -->
<file-loader
label="Ligand(s)"
id="ligand"
description="Formats: PDBQT (best), CAN, MDL, MOL, MOL2, PDB, SD, SDF, SMI, SMILES, XYZ,"
accept=".pdbqt" convert=".can, .mdl, .mol, .mol2, .pdb, .sd, .sdf, .smi, .smiles, .xyz"
:required="true"
:allowUrlInput="false"
:multipleFiles="true"
:countDownToNextInput="-1"
@onError="showFileLoaderError"
@onFileLoaded="onFileLoaded"
>
<!--
@onFileNameChange="fileNameChanged"
@onConvertNeeded="convertNeeded"
@onTimeUp="timeUp" -->
<template v-slot:extraDescription>or <a href='' @click="onDrawLigClick($event);">draw your ligand</a>. We recommend preparing ligand files separately with <a target='_blank' href='https://git.durrantlab.pitt.edu/jdurrant/gypsum_dl'>Gypsum-DL</a>.</template>
</file-input>
</file-loader>
<file-input
<!-- TODO: Attention here -->
<file-loader
label="Correct Pose"
id="crystal"
:required="false"
description="The correct ligand pose, if known from experiment. This PDBQT or PDB file is optional."
accept=".pdbqt, .pdb"
></file-input>
:required="false"
:allowUrlInput="false"
:multipleFiles="false"
:countDownToNextInput="-1"
@onError="showFileLoaderError"
@onFileLoaded="onFileLoaded"
>
<!--
@onFileNameChange="fileNameChanged"
@onConvertNeeded="convertNeeded"
@onTimeUp="timeUp" -->
</file-loader>
<form-button @click.native="useExampleVinaInputFiles" cls="float-right">Use Example Files</form-button> <!-- variant="default" -->
</sub-section>
......
src/UI/UI.ts
View file @ 6c93c406
......@@ -17,7 +17,7 @@ export function setup(): void {
new Vue({
"el": '#app',
"store": Store.store,
"template": `
"template": /* html */ `
<div class="container-fluid">
<open-modal></open-modal>
<convert-file-modal></convert-file-modal>
......
src/Vue/Setup.ts
View file @ 6c93c406
......@@ -5,7 +5,8 @@
import * as NumericInput from "../UI/Forms/NumericInput";
import * as CheckBox from "../UI/Forms/CheckBox";
import * as FileInput from "../UI/Forms/FileInput";
import * as FileInputSetup from "../UI/Forms/FileLoader/Setup";
import * as FileInputMain from "../UI/Forms/FileLoaderMain.Vue";
import * as VinaParams from "../UI/Tabs/VinaParams";
import * as VinaRunning from "../UI/Tabs/VinaRunning";
import * as VinaOutput from "../UI/Tabs/VinaOutput";
......@@ -46,7 +47,8 @@ export function setup(): void {
NumericInput.setup();
TripleNumeric.setup();
CheckBox.setup();
FileInput.setup();
FileInputSetup.setupFileLoader();
FileInputMain.setup();
ResultsTable.setup();
VinaParams.setup();
VinaRunning.setup();
......
src/Vue/Store.ts
View file @ 6c93c406
......@@ -42,6 +42,8 @@ interface IFileConvertModal {
ext: string;
type: string;
file: string;
onConvertCancel: Function;
onConvertDone: Function;
}
interface IInputFileNames {
......@@ -78,6 +80,8 @@ export const store = new Vuex.Store({
"convertFileExt": "PDB",
"convertFileType": "receptor",
"convertFile": null,
"onConvertCancel": undefined,
"onConvertDone": undefined,
"receptorForceValidate": false,
"ligandForceValidate": false,
"drawSmilesModalShow": false,
......@@ -225,6 +229,8 @@ export const store = new Vuex.Store({
state["convertFileExt"] = payload.ext;
state["convertFileType"] = payload.type;
state["convertFile"] = payload.file;
state["onConvertCancel"] = payload.onConvertCancel;
state["onConvertDone"] = payload.onConvertDone;
jQuery("body").removeClass("waiting");
},
......
src/Webina/dist/Webina.js
View file @ 6c93c406
......@@ -18,7 +18,7 @@
// details. Copyright 2020 Jacob D. Durrant.
// There are a few variables and functions from vina.js that I want to easily
// access from here.
var VERSION = "1.0.2"; // Replaced by compile script.
var VERSION = "1.0.3"; // Replaced by compile script.
console.log("Webina Library " + VERSION);
console.log(" Compiled from Vina 1.1.2 codebase:");
console.log(" http://vina.scripps.edu/");
......
src/Webina/dist/Webina.min.js
View file @ 6c93c406
This diff is collapsed.
src/Webina/dist/vina.min.js
View file @ 6c93c406
This source diff could not be displayed because it is too large. You can view the blob instead.
src/index.html
View file @ 6c93c406
......@@ -21,7 +21,11 @@
<!-- <script src="https://cdn.jsdelivr.net/npm/streamsaver@2.0.3/StreamSaver.min.js"></script> -->
<script src="Webina/Webina.min.js"></script>
<script src="vue.min.js"></script>
<!-- <script src="vue.min.js"></script> -->
<!-- Use below for debugging -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="vuex.min.js"></script>
<script src="bootstrap-vue.min.js"></script>
</body>
......
src/index.ts
View file @ 6c93c406
......@@ -6,12 +6,28 @@
import * as UI from "./UI/UI";
import * as VueSetup from "./Vue/Setup";
import { VERSION } from "./Version";
import { hasNextLigandUrlParam } from "./URLParams";
import { clearAllInDatabase } from "./UI/Forms/FileLoader/DataBase";
import { setupDatabase } from "./UI/Forms/FileLoader/DataBase/Internal";
declare var ga;
console.log("Webina Web App " + VERSION);
VueSetup.setup();
UI.setup();
// Setup the database if necessary.
setupDatabase(["receptor", "ligand", "crystal", "output"]);
// Clear the database unles nextLigand is in URL param.
let prom: Promise<any> = hasNextLigandUrlParam()
? clearAllInDatabase()
: Promise.resolve(undefined);
prom.then(() => {
// Setup Vue
VueSetup.setup();
// Setup UI
UI.setup();
});
// If the url has "durrantlab" in it, contact google analytics. Logging all
// usage would be ideal for grant reporting, but some users may wish to run
......
tsconfig.json
View file @ 6c93c406
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"noImplicitAny": false,
"module": "es6",
"module": "esnext", // "es6",
"target": "es5",
"jsx": "react",
"allowJs": true
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment