Commit 3fd87d2c authored by Jacob Durrant's avatar Jacob Durrant
Browse files

Code documentation and restructuring, example files from manuscript, etc.

parent db3552fd
......@@ -4,6 +4,131 @@
declare var Vue;
/** An object containing the vue-component computed functions. */
let computedFunctions = {
/** The visibility (boolean, open/closed) of the convert file modal. Can
* both get and set. */
"convertFileModalShow": {
get(): boolean {
return this.$store.state["convertFileModalShow"];
},
set(val: boolean): void {
this.$store.commit("setVar", {
name: "convertFileModalShow",
val,
});
},
},
/**
* Get the extension of the user-submitted file.
* @returns string The extension.
*/
"currentExt"(): string {
return this.$store.state["convertFileExt"].toUpperCase();
},
/**
* Get the current type of the user-submitted file. "receptor" or
* "ligand".
* @returns string The type.
*/
"currentType"(): string {
return this.$store.state["convertFileType"];
},
/**
* Determine whether 3D coordinates must be generated, given the file
* extension. If they are required regardless, don't give the user the
* option.
* @returns boolean True if generating 3D coordinates is required.
*/
"gen3DRequired"(): boolean {
if (["CAN", "SMI", "SMILES"].indexOf(this["currentExt"]) !== -1) {
// It's one of the formats that always required that 3D
// coordinates be generated.
this["gen3D"] = true;
return true;
}
return false;
}
}
/** An object containing the vue-component methods functions. */
let methodsFunctions = {
"beginConvert"(e) {
let frameWindow = document.getElementById("convert-frame")["contentWindow"];
frameWindow["startSpinner"]();
let content: string = this.$store.state["convertFile"];
while (content.substr(content.length - 1, 1) === "\n") {
content = content.substr(0, content.length - 1);
}
if (this["currentType"]!=="ligand") {
// If it's not a ligand, there's no need to generate 3D
// coordinates.
this["gen3D"] = false;
}
frameWindow["PDBQTConvert"]["convert"](
content,
this["currentExt"].toLowerCase(),
this["currentType"]==="ligand",
this["addHydrogens"],
this["gen3D"],
parseFloat(this["phVal"])
).then((out) => {
this.$store.commit("setVar", {
name: this["currentType"] + "Contents",
val: out
});
this["$refs"]["convert-modal"].hide();
// This makes it ook like it validated.
this.$store.commit("setVar", {
name: this["currentType"] + "ForceValidate",
val: true
});
// This actually sets the validation.
this.$store.commit("setValidationParam", {
name: this["currentType"],
val: true
});
}).catch((msg) => {
this["$refs"]["convert-modal"].hide();
this["$bvModal"]["msgBoxOk"]("Could not convert your file. Are you sure it is a properly formatted " + this["currentExt"] + " file?", {
"title": "Error Converting File!",
});
this.$store.commit("setVar", {
name: this["currentType"] + "ForceValidate",
val: false
});
console.log("ERROR: " + msg);
});
e.preventDefault();
},
"cancelPressed"() {
// 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("setValidationParam", {
name: this["currentType"],
val: false
});
},
"reloadIFrame"() {
document.getElementById("convert-frame")["src"] = "./pdbqt_convert/index.html?startBlank";
}
}
/**
* Setup the convert-file-modal Vue commponent.
* @returns void
......@@ -21,119 +146,8 @@ export function setup(): void {
"phVal": 7.4
};
},
"computed": {
"convertFileModalShow": {
/**
* Get the convertFileModalShow value..
* @returns boolean
*/
get(): boolean {
return this.$store.state["convertFileModalShow"];
},
/**
* Set the convertFileModalShow value.
* @param {boolean} val The new value.
* @returns void
*/
set(val: boolean): void {
this.$store.commit("setVar", {
name: "convertFileModalShow",
val,
});
},
},
/**
* Get the extension of the user-submitted file.
* @returns string The extension.
*/
"currentExt"(): string {
return this.$store.state["convertFileExt"].toUpperCase();
},
/**
* Get the current type of the user-submitted file. "receptor" or
* "ligand".
* @returns string The type.
*/
"currentType"(): string {
return this.$store.state["convertFileType"];
},
"gen3DRequired"(): boolean {
if (["CAN", "SMI", "SMILES"].indexOf(this["currentExt"]) !== -1) {
// It's one of the formats that always required that 3D
// coordinates be generated.
this["gen3D"] = true;
return true;
}
return false;
}
},
"methods": {
"beginConvert"(e) {
let frameWindow = document.getElementById("convert-frame")["contentWindow"];
frameWindow["startSpinner"]();
let content: string = this.$store.state["convertFile"];
while (content.substr(content.length - 1, 1) === "\n") {
content = content.substr(0, content.length - 1);
}
if (this["currentType"]!=="ligand") {
// If it's not a ligand, there's no need to generate 3D
// coordinates.
this["gen3D"] = false;
}
frameWindow["PDBQTConvert"]["convert"](
content,
this["currentExt"].toLowerCase(),
this["currentType"]==="ligand",
this["addHydrogens"],
this["gen3D"],
parseFloat(this["phVal"])
).then((out) => {
this.$store.commit("setVar", {
name: this["currentType"] + "Contents",
val: out
});
this["$refs"]["convert-modal"].hide();
this.$store.commit("setValidationParam", {
name: this["currentType"],
val: true
});
}).catch((msg) => {
this["$refs"]["convert-modal"].hide();
this["$bvModal"]["msgBoxOk"]("Could not convert your file. Are you sure it is a properly formatted " + this["currentExt"] + " file?", {
"title": "Error Converting File!",
});
this.$store.commit("setValidationParam", {
name: this["currentType"],
val: false
});
});
e.preventDefault();
},
"cancelPressed"() {
// 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("setValidationParam", {
name: this["currentType"],
val: false
});
},
"reloadIFrame"() {
document.getElementById("convert-frame")["src"] = "./pdbqt_convert/index.html?startBlank";
}
},
"computed": computedFunctions,
"methods": methodsFunctions,
"template": `
<b-modal
ref="convert-modal"
......@@ -142,57 +156,63 @@ export function setup(): void {
id="convert-msg-modal" title="Convert File to PDBQT"
@ok="beginConvert" @cancel="cancelPressed">
<p class="my-4">
<p>
Webina works with PDBQT files, not {{currentExt}} files. We suggest you:
<span v-if="this['currentType']==='receptor'">
<ol>
<li>Add hydrogen atoms using <a href="http://www.poissonboltzmann.org/" target="_blank">PDB2PQR</a></li>
<li>Convert the resulting PQR file to PDB using <a href="http://openbabel.org/wiki/Main_Page" target="_blank">Open Babel</a></li>
<li>Convert the PDB file to PDBQT using <a target='_blank' href='http://mgltools.scripps.edu/'>MGLTools</a></li>
</ol>
</span>
<span v-else-if="this['currentType']==='ligand'">
<ol>
<li>Add hydrogen atoms to your ligand files (SMILES or SDF format) using <a target='_blank' href='https://git.durrantlab.pitt.edu/jdurrant/gypsum_dl'>Gypsum-DL</a></li>
<li>Convert the resulting PDB or SDF file(s) to PDBQT using <a target='_blank' href='http://mgltools.scripps.edu/'>MGLTools</a></li>
</ol>
</span>
</p>
<p>Or click "Convert" below to convert with Open Babel, which should be good enough for most purposes.</p>
<b-form-checkbox
id="babel-add-hydrogens"
v-model="addHydrogens"
name="babel-add-hydrogens"
:value="true"
:unchecked-value="false"
>
Add hydrogen atoms at pH
<b-form-input
id="ph-val"
v-model="phVal"
type="text"
placeholder="7.4"
class="form-control-sm"
@click.stop.prevent
style="width: 45px; height: 23px; text-align: center; margin-left: 2px; display: inline-block;"
></b-form-input>
</b-form-checkbox>
<b-form-checkbox
v-if="(this['currentType']==='ligand') && (!gen3DRequired)"
id="babel-gen-3d"
v-model="gen3D"
name="babel-gen-3d"
:value="true"
:unchecked-value="false"
>
Generate 3D coordinates.
</b-form-checkbox>
<iframe id="convert-frame" style="border: 0; width: 100%; height: 65px;"></iframe>
Webina works with PDBQT files, not {{currentExt}} files. We suggest you:
<span v-if="this['currentType']==='receptor'">
<ol>
<li>Add hydrogen atoms using <a href="http://www.poissonboltzmann.org/" target="_blank">PDB2PQR</a></li>
<li>Convert the resulting PQR file to PDB using <a href="http://openbabel.org/wiki/Main_Page" target="_blank">Open Babel</a></li>
<li>Convert the PDB file to PDBQT using <a target='_blank' href='http://mgltools.scripps.edu/'>MGLTools</a></li>
</ol>
</span>
<span v-else-if="this['currentType']==='ligand'">
<ol>
<li>Add hydrogen atoms to your ligand files (SMILES or SDF format) using <a target='_blank' href='https://git.durrantlab.pitt.edu/jdurrant/gypsum_dl'>Gypsum-DL</a></li>
<li>Convert the resulting PDB or SDF file(s) to PDBQT using <a target='_blank' href='http://mgltools.scripps.edu/'>MGLTools</a></li>
</ol>
</span>
</p>
<p>Or click "Convert" below to convert with PDBQTConvert, which should be good enough for most purposes.</p>
<b-form-checkbox
id="babel-add-hydrogens"
v-model="addHydrogens"
name="babel-add-hydrogens"
:value="true"
:unchecked-value="false"
>
Add hydrogen atoms at pH
<b-form-input
id="ph-val"
v-model="phVal"
type="text"
placeholder="7.4"
class="form-control-sm"
@click.stop.prevent
style="width: 45px; height: 23px; text-align: center; margin-left: 2px; display: inline-block;"
></b-form-input>
</b-form-checkbox>
<b-form-checkbox
v-if="(this['currentType']==='ligand') && (!gen3DRequired)"
id="babel-gen-3d"
v-model="gen3D"
name="babel-gen-3d"
:value="true"
:unchecked-value="false"
>
Generate 3D coordinates.
</b-form-checkbox>
<iframe id="convert-frame" style="border: 0; width: 100%; height: 65px;"></iframe>
<small class="form-text text-muted">
PDBQTConvert is an optional GPL-licensed helper app
built on <a
href="https://github.com/partridgejiang/cheminfo-to-web/tree/master/OpenBabel/OpenBabel-js" target="_blank">
OpenBabel JS</a>. It communicates with Webina at "arms
length" via an iframe.
</small>
</b-modal>`,
"props": {}
});
......
......@@ -5,102 +5,74 @@
declare var Vue;
/** An object containing the vue-component computed functions. */
let computedFunctions = {
/** The visibility (boolean, open/closed) of the draw smiles modal. Can
* both get and set. */
"drawSmilesModalShow": {
get(): boolean {
return this.$store.state["drawSmilesModalShow"];
},
set(val: boolean): void {
this.$store.commit("setVar", {
name: "drawSmilesModalShow",
val
});
}
},
}
/** An object containing the vue-component methods functions. */
let methodsFunctions = {
"startConversion"() {
// Get smiles from widget
let frameWindow = document.getElementById("draw-widget")["contentWindow"];
let smiles = frameWindow["getSmiles"]();
this.$store.commit("setVar", {
name: "convertFileExt",
val: "smi"
});
this.$store.commit("setVar", {
name: "convertFileType",
val: "ligand"
});
this.$store.commit("setVar", {
name: "convertFile",
val: smiles
});
this.$store.commit("setVar", {
name: "convertFileModalShow",
val: true
});
this.$store.commit("setVar", {
name: "ligandFileName",
val: "drawn_ligand.pdbqt"
});
}
}
/**
* Setup the draw-smiles-modal Vue commponent.
* @returns void
*/
export function setup(): void {
/** Test */
Vue.component('draw-smiles-modal', {
"computed": {
"drawSmilesModalShow": {
/**
* Get the drawSmilesModalShow value..
* @returns boolean
*/
get(): boolean {
return this.$store.state["drawSmilesModalShow"];
},
/**
* Set the drawSmilesModalShow value.
* @param {boolean} val The new value.
* @returns void
*/
set(val: boolean): void {
this.$store.commit("setVar", {
name: "drawSmilesModalShow",
val
});
}
},
},
"methods": {
"startConversion"() {
this.$store.commit("setVar", {
name: "convertFileExt",
val: "smi"
});
this.$store.commit("setVar", {
name: "convertFileType",
val: "ligand"
});
this.$store.commit("setVar", {
name: "convertFile",
val: this["smiles"]
});
this.$store.commit("setVar", {
name: "convertFileModalShow",
val: true
});
},
"cancelPressed"() {
alert("cancel");
}
},
/** Computed */
"computed": computedFunctions,
"methods": methodsFunctions,
"data"(): any {
return {
"smiles": ""
}
return {}
},
"template": `
<b-modal
ok-title="Convert to PDBQT" v-model="drawSmilesModalShow"
size="xl" ok-title="Convert to PDBQT" v-model="drawSmilesModalShow"
id="draw-structure-modal" title="Draw Ligand Structure"
@ok="startConversion" @cancel="cancelPressed">
@ok="startConversion">
<p class="my-4">
<!-- <h4>Step 1: Draw Your Ligand</h4>
<p>
Draw your small-molecule ligand using <a href="https://pubchem.ncbi.nlm.nih.gov/edit3/index.html" target="_blank">PubChem Sketcher</a>, provided by the U.S. National Institute of Health:
</p> -->
<iframe style="border:0; width:100%; height:450px; margin-left:auto; margin-right:auto; display:block;" src="mol_editor/index.html"></iframe>
<!--
<br />
<h4>Step 2: Paste the SMILES String</h4>
<p>
Paste the SMILES string displayed at the top of the editor into this text field:
</p>
<form-group
id="smiles-string-group"
>
<b-form-input
id="smiles-string"
name="smiles-string"
v-model="smiles"
type="text"
:required="true"
placeholder="Paste SMILES string here (e.g., C1CCCCC1)..."
></b-form-input>
<!-- <small v-if="!isValid" alert tabindex="-1" class="text-danger form-text" v-html="invalidMsg"></small> -->
</form-group>
<h4>Step 3: Convert Your Ligand to PDBQT</h4>
<p>
Click the "Convert to PDBQT" button to open the convert-molecule dialog.
</p>-->
<iframe id="draw-widget" style="border:0; width:100%; height:350px; margin-left:auto; margin-right:auto; display:block;" src="mol_editor/index.html"></iframe>
</p>
</b-modal>`,
"props": {}
......
......@@ -5,6 +5,40 @@
declare var Vue;
/** An object containing the vue-component computed functions. */
let computedFunctions = {
/** The visibility (boolean, open/closed) of the modal. Can both get and
* set. */
"modalShow": {
get(): boolean {
return this.$store.state["modalShow"];
},
set(val: boolean): void {
this.$store.commit("setVar", {
name: "modalShow",
val
});
}
},
/**
* Gets the modal title.
* @returns string The title.
*/
"title"(): string {
return this.$store.state["modalTitle"];
},
/**
* Get's the modal body.
* @returns string The body.
*/
"body"(): string {
return this.$store.state["modalBody"];
}
}
/**
* Setup the open-modal Vue commponent.
* @returns void
......@@ -18,45 +52,7 @@ export function setup(): void {
"data": function() {
return {}
},
"computed": {
"modalShow": {
/**
* Get the modalShow value..
* @returns boolean
*/
get(): boolean {
return this.$store.state["modalShow"];
},
/**
* Set the mmodalShow value.
* @param {boolean} val The new value.
* @returns void
*/
set(val: boolean): void {
this.$store.commit("setVar", {
name: "modalShow",
val
});
}
},
/**
* Gets the modal title.
* @returns string The title.
*/
"title"(): string {
return this.$store.state["modalTitle"];
},
/**
* Get's the modal body.
* @returns string The body.
*/
"body"(): string {
return this.$store.state["modalBody"];
}
},
"computed": computedFunctions,
"template": `
<b-modal ok-only :size="size" ok-title="Close" v-model="modalShow" id="msg-modal" :title="title">