...
 
Commits (2)
......@@ -8,15 +8,15 @@ WIP
* Fixed a minor bug that sometimes caused malformed example command lines.
* Added links so users can save the receptor/ligand PDBQT input files
generated within the app.
* Created a separate, independent helper app called PDBQTConvert that can
convert files in many other formats (e.g., PDB, XYZ, CAN, SMI) to PDBQT (see
* Created a separate, independent web app called PDBQTConvert that can convert
files in many other formats (e.g., PDB, XYZ, CAN, SMI) to PDBQT (see
`pdbqt_convert/`). This app uses
[openbabel.js](https://github.com/partridgejiang/cheminfo-to-web/)
and is GNU GPL licensed. We distribute it alongside Webina, but as a
separate program.
[openbabel.js](https://github.com/partridgejiang/cheminfo-to-web/) and is
GNU GPL licensed. We distribute it alongside Webina, but as a separate
program.
* Added ways to provide/process input PDBQT files.
* Modified Webina so users can optionally use PDBQTConvert to convert their
input files. Webina communicates with PDBQTConvert at "arms length," via
input files. Webina communicates with PDBQTConvert at "arm's length," via
an iframe.
* Added the ability to draw small-molecule ligands.
* Added a link to optionally remove non-protein residues from the receptor.
......
......@@ -38,13 +38,14 @@ Additional browsers are likely to enable SharedArrayBuffer soon.
## Description of Use ##
### Preparing Receptor/Ligand PDBQT Input Files ###
### Receptor/Ligand PDBQT Input Files ###
As is the case with command-line Vina, Webina accepts input receptor and
ligand files in the PDBQT format. The latest version of the Webina app
interfaces with the PDBQTConvert app (included in the git repository) to
convert these files from other formats (e.g., PDB) to PDBQT. But some advanced
users may wish to provide their own PDBQT files. Such users include:
optionally interfaces with the PDBQTConvert app (included in the git
repository) to convert these files from other formats (e.g., PDB) to PDBQT.
But some advanced users may wish to provide their own PDBQT files. Such users
include:
* Users who wish to have more fine-grained control over the input. For
example, users who wish to specify protonation states, ring-conformational
......@@ -74,7 +75,7 @@ receptor PDBQT files:
Here is an example command: `obabel -xr -ipqr my_receptor.pqr -O
my_receptor.pdbqt`
##### Preparing the Ligand PDBQT File #####
#### Preparing the Ligand PDBQT File ####
We recommend the following steps for those who wish to provide their own
ligand PDBQT files:
......@@ -126,18 +127,32 @@ results. On first visiting the Webina web app, the user encounters the "Input
Parameters" tab. This tab includes several subsections that are useful for
setting up a Webina run.
__Input PDBQT Files.__ The "Input PDBQT Files" subsection allows the user to
select their receptor and ligand files. As is the case with command-line Vina,
these files must be in the PDBQT format. The user can also optionally specify
a known-pose PDB or PDBQT ligand file. This file includes the ligand in its
__Input PDBQT Files.__ The "Input (PDBQT) Files" subsection allows the user to
select their receptor and ligand files. The user can also optionally specify a
known-pose PDB or PDBQT ligand file. This file includes the ligand in its
experimentally determined, correct bound pose (e.g., per X-ray crystallography
or NMR). The known-pose file plays no role in the docking calculation; rather,
it serves as a positive-control reference for evaluating Webina-predicted
ligand poses.
Some users may wish to test Webina without having to provide their own input
files. The optional "Use Example Files" button automatically loads in example
receptor, ligand, and known-pose files.
ligand poses. In our experience, it is often helpful to first benchmark Webina
(or Vina) against a known ligand before using the program to evaluate
compounds with unknown poses and binding affinities.
The "Input (PDBQT) Files" subsection also includes several options to simplify
the process of preparing/testing protein/ligand input files.
* If users wish only to test Webina without having to provide their own files,
they can click the "Use Example Files" button to automatically load example
receptor, ligand, and known-pose files.
* If users specify receptor/ligand input files that are not in the required
PDBQT format, the Webina web app will optionally attempt to convert them to
PDBQT using the PDBQTConvert app. Interactions between the Webina and
PDBQTConvert apps occur at "arm's length" via an iframe.
* If users' receptor files include non-protein residues that might interfere
with docking (e.g., a co-crystallized ligand), they can remove all
non-protein atoms.
* If users do not have a ligand file, they can use a web-based 2D molecular
editor to draw their ligand by hand. PDBQTConvert then converts that 2D
ligand representation to a 3D PDBQT file for docking.
__Docking Box.__ The "Docking Box" subsection allows users to specify the
region of the receptor where Webina should attempt to pose the ligand. This
......@@ -170,16 +185,18 @@ will wish to adjust these parameters to avoid impacting the performance of
other programs and browser tabs.
__Advanced Parameters.__ The "Advanced Parameters" subsection allows users to
specify any of the many additional parameters that are also available via
command-line Vina. In our experience, it is rarely necessary to adjust these
parameters, so they are hidden by default.
specify many additional parameters that are also available via command-line
Vina. In our experience, it is rarely necessary to adjust these parameters, so
they are hidden by default.
__Run Vina from Command Line.__ The "Run Vina from Command Line" subsection
aims to help Vina users who wish to use the Webina web app to setup their
docking boxes and user parameters. A text field provides a mock example of how
to use command-line Vina with the specified parameters. Users can copy this
example, modify it as needed, and paste it into their command-line terminals
to run the desired calculation with the standard Vina executable.
to run the desired calculation with the standard Vina executable. This
subsection also includes links that allow the user to download the
receptor/ligand PDBQT files for command-line use.
__Starting the Webina Calculation.__ Once users click the "Start Webina"
button, the Webina app will switch to the "Running Webina" tab while Webina
......@@ -217,8 +234,8 @@ Webina output files. An associated "Download" button allows users to easily
save those files.
__Run Vina from Command Line.__ Similar to the "Input Parameters" tab, the
"Output" Tab also includes a "Run Vina from Command Line" Subsection. This
section makes it easy for users to reproduce Webina's results using
"Output" tab also includes a "Run Vina from Command Line" subsection. This
subsection makes it easy for users to reproduce Webina's results using
stand-alone Vina. It also reminds users what parameters they selected to
generate the displayed Webina output.
......@@ -239,10 +256,16 @@ these instructions:
1. Download the `webina.zip` file
2. Uncompress the file: `unzip webina.zip`
3. Change to the new `webina/` directory: `cd webina`
4. Start a local server. Python provides one out of the box: `python -m
SimpleHTTPServer 8000`
5. Access the server from your web-browser: `http://localhost:8000/` or
perhaps `http://0.0.0.0:8000/`
4. Start a local server.
* You can use `Node.js` and `npm`:
* `npm install -g http-server`
* `http-server`
* [With some
coding](https://curiousprog.com/2018/10/08/serving-webassembly-files-with-a-development-web-server/),
you can also use Python 2.7's built-in server:
* `python -m SimpleHTTPServer 8000`
5. Access the server from your web-browser (e.g., `http://localhost:8000/`,
`http://0.0.0.0:8000/`, etc.)
Running Webina on other operating systems (e.g., Windows) should be similar.
......
......@@ -10,7 +10,7 @@
<meta charset="utf-8">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Webina</title>
<link rel="shortcut icon" href="favicon.ico"><link href="vendors.0e5b3fc3dceab82cde6c.css" rel="stylesheet"><link href="styles.css.0e5b3fc3dceab82cde6c.css" rel="stylesheet"></head>
<link rel="shortcut icon" href="favicon.ico"><link href="vendors.e79089af6fca69f502b9.css" rel="stylesheet"><link href="styles.css.e79089af6fca69f502b9.css" rel="stylesheet"></head>
<body>
<div id="app"></div>
......@@ -24,6 +24,6 @@
<script src="vue.min.js"></script>
<script src="vuex.min.js"></script>
<script src="bootstrap-vue.min.js"></script>
<script type="text/javascript" src="runtime.0e5b3fc3dceab82cde6c.js"></script><script type="text/javascript" src="vendors.0e5b3fc3dceab82cde6c.js"></script><script type="text/javascript" src="app.0e5b3fc3dceab82cde6c.js"></script><script type="text/javascript" src="styles.css.0e5b3fc3dceab82cde6c.js"></script></body>
<script type="text/javascript" src="runtime.e79089af6fca69f502b9.js"></script><script type="text/javascript" src="vendors.e79089af6fca69f502b9.js"></script><script type="text/javascript" src="app.e79089af6fca69f502b9.js"></script><script type="text/javascript" src="styles.css.e79089af6fca69f502b9.js"></script></body>
</html>
......@@ -110,14 +110,15 @@
<a href="#description-of-use" id="description-of-use" style="color: inherit; text-decoration: none;">
<h2>Description of Use</h2>
</a>
<a href="#preparing-receptorligand-pdbqt-input-files" id="preparing-receptorligand-pdbqt-input-files" style="color: inherit; text-decoration: none;">
<h3>Preparing Receptor/Ligand PDBQT Input Files</h3>
<a href="#receptorligand-pdbqt-input-files" id="receptorligand-pdbqt-input-files" style="color: inherit; text-decoration: none;">
<h3>Receptor/Ligand PDBQT Input Files</h3>
</a>
<p>As is the case with command-line Vina, Webina accepts input receptor and
ligand files in the PDBQT format. The latest version of the Webina app
interfaces with the PDBQTConvert app (included in the git repository) to
convert these files from other formats (e.g., PDB) to PDBQT. But some advanced
users may wish to provide their own PDBQT files. Such users include:</p>
optionally interfaces with the PDBQTConvert app (included in the git
repository) to convert these files from other formats (e.g., PDB) to PDBQT.
But some advanced users may wish to provide their own PDBQT files. Such users
include:</p>
<ul>
<li>Users who wish to have more fine-grained control over the input. For
example, users who wish to specify protonation states, ring-conformational
......@@ -149,7 +150,7 @@
my_receptor.pdbqt</code></li>
</ul>
<a href="#preparing-the-ligand-pdbqt-file" id="preparing-the-ligand-pdbqt-file" style="color: inherit; text-decoration: none;">
<h5>Preparing the Ligand PDBQT File</h5>
<h4>Preparing the Ligand PDBQT File</h4>
</a>
<p>We recommend the following steps for those who wish to provide their own
ligand PDBQT files:</p>
......@@ -201,17 +202,33 @@ ligand.pdbqt</code></li>
results. On first visiting the Webina web app, the user encounters the &quot;Input
Parameters&quot; tab. This tab includes several subsections that are useful for
setting up a Webina run.</p>
<p><strong>Input PDBQT Files.</strong> The &quot;Input PDBQT Files&quot; subsection allows the user to
<p><strong>Input PDBQT Files.</strong> The &quot;Input (PDBQT) Files&quot; subsection allows the user to
select their receptor and ligand files. As is the case with command-line Vina,
these files must be in the PDBQT format. The user can also optionally specify
a known-pose PDB or PDBQT ligand file. This file includes the ligand in its
experimentally determined, correct bound pose (e.g., per X-ray crystallography
or NMR). The known-pose file plays no role in the docking calculation; rather,
it serves as a positive-control reference for evaluating Webina-predicted
ligand poses.</p>
<p>Some users may wish to test Webina without having to provide their own input
files. The optional &quot;Use Example Files&quot; button automatically loads in example
receptor, ligand, and known-pose files.</p>
ligand poses. In our experience, it is often helpful to first benchmark Webina
(or Vina) against a known ligand before using the program to evaluate
compounds with unknown poses and binding affinities.</p>
<p>The &quot;Input (PDBQT) Files&quot; subsection also includes several options to simplify
the process of preparing/testing protein/ligand input files.</p>
<ul>
<li>If users wish only to test Webina without having to provide their own files,
they can click the &quot;Use Example Files&quot; button to automatically load example
receptor, ligand, and known-pose files.</li>
<li>If users specify receptor/ligand input files that are not in the required
PDBQT format, the Webina web app will optionally attempt to convert them to
PDBQT using the PDBQTConvert app. Interactions between the Webina and
PDBQTConvert apps occur at &quot;arm&#39;s length&quot; via an iframe.</li>
<li>If users&#39; receptor files include non-protein residues that might interfere
with docking (e.g., a co-crystallized ligand), they can remove all
non-protein atoms.</li>
<li>If users do not have a ligand file, they can use a web-based 2D molecular
editor to draw their ligand by hand. PDBQTConvert then converts that 2D
ligand representation to a 3D PDBQT file for docking.</li>
</ul>
<p><strong>Docking Box.</strong> The &quot;Docking Box&quot; subsection allows users to specify the
region of the receptor where Webina should attempt to pose the ligand. This
box-shaped volume is typically centered on a known protein pocket or cavity
......@@ -247,7 +264,9 @@ ligand.pdbqt</code></li>
docking boxes and user parameters. A text field provides a mock example of how
to use command-line Vina with the specified parameters. Users can copy this
example, modify it as needed, and paste it into their command-line terminals
to run the desired calculation with the standard Vina executable.</p>
to run the desired calculation with the standard Vina executable. This
subsection also includes links that allow the user to download the
receptor/ligand PDBQT files for command-line use.</p>
<p><strong>Starting the Webina Calculation.</strong> Once users click the &quot;Start Webina&quot;
button, the Webina app will switch to the &quot;Running Webina&quot; tab while Webina
executes. When the calculation is complete, the Webina web app will switch to
......@@ -303,10 +322,22 @@ ligand.pdbqt</code></li>
<li>Download the <code>webina.zip</code> file</li>
<li>Uncompress the file: <code>unzip webina.zip</code></li>
<li>Change to the new <code>webina/</code> directory: <code>cd webina</code></li>
<li>Start a local server. Python provides one out of the box: <code>python -m
SimpleHTTPServer 8000</code></li>
<li>Access the server from your web-browser: <code>http://localhost:8000/</code> or
perhaps <code>http://0.0.0.0:8000/</code></li>
<li>Start a local server.<ul>
<li>You can use <code>Node.js</code> and <code>npm</code>:<ul>
<li><code>npm install -g http-server</code></li>
<li><code>http-server</code></li>
</ul>
</li>
<li><a href="https://curiousprog.com/2018/10/08/serving-webassembly-files-with-a-development-web-server/">With some
coding</a>,
you can also use Python 2.7&#39;s built-in server:<ul>
<li><code>python -m SimpleHTTPServer 8000</code></li>
</ul>
</li>
</ul>
</li>
<li>Access the server from your web-browser (e.g., <code>http://localhost:8000/</code>,
<code>http://0.0.0.0:8000/</code>, etc.)</li>
</ol>
<p>Running Webina on other operating systems (e.g., Windows) should be similar.</p>
<a href="#compiling-the-webina-web-app" id="compiling-the-webina-web-app" style="color: inherit; text-decoration: none;">
......
This diff is collapsed.
......@@ -59,7 +59,19 @@ let computedFunctions = {
/** An object containing the vue-component methods functions. */
let methodsFunctions = {
"beginConvert"(e) {
/**
* Begin to convert the file to PDBQT.
* @param {*} e The click event.
* @param {number=1} currentPDBOptimizationLevel To what extent the PDB
* file should be
* optimized (to keep size
* low for converting).
* @param {string=""} successMsg The message to display
* to the user on success
* (if any).
* @returns void
*/
"beginConvert"(e, currentPDBOptimizationLevel=1, successMsg=""): void {
let frameWindow = document.getElementById("convert-frame")["contentWindow"];
frameWindow["startSpinner"]();
let content: string = this.$store.state["convertFile"];
......@@ -67,6 +79,10 @@ let methodsFunctions = {
content = content.substr(0, content.length - 1);
}
if (this["currentExt"].toUpperCase() === "PDB") {
successMsg += this.pdbOptimization(currentPDBOptimizationLevel);
}
if (this["currentType"]!=="ligand") {
// If it's not a ligand, there's no need to generate 3D
// coordinates.
......@@ -103,9 +119,22 @@ let methodsFunctions = {
// 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 (successMsg !== "") {
this["$bvModal"]["msgBoxOk"]("To convert your file, Webina had to make the following modifications: " + successMsg, {
"title": "Warning: File Too Big!",
});
}
}).catch((msg) => {
// The conversion failed. But if it's a PDB file, it might be
// worth trying to optimize it further.
if (currentPDBOptimizationLevel <= 3) {
this["beginConvert"](e, currentPDBOptimizationLevel + 1, successMsg);
return;
}
this["$refs"]["convert-modal"].hide();
this["$bvModal"]["msgBoxOk"]("Could not convert your file. Are you sure it is a properly formatted " + this["currentExt"] + " file?", {
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!",
});
this.$store.commit("setVar", {
......@@ -119,7 +148,52 @@ let methodsFunctions = {
e.preventDefault();
},
"cancelPressed"() {
/**
* PDB files are very common, yet openbabel.js cannot convert them if they
* are too large. Here we make efforts to "optimize" the PDB file to
* maximize the changes that openbabel.js will succeed.
* @param {number} level The optimization level.
* @returns string A message to show the user re. any modifications made
* to the PDB file.
*/
pdbOptimization(level: number): string {
let pdbTxt = this.$store.state["convertFile"];
let msg = "";
switch (level) {
case 1:
// Always run this optimization. Just removes lines that don't
// start with ATOM and HETATM.
pdbTxt = pdbTxt.split("\n").filter(l => l.slice(0, 5) === "ATOM " || l.slice(0, 7) === "HETATM ").join("\n");
break;
case 2:
// Try removing everything but protein atoms.
pdbTxt = Utils.keepOnlyProteinAtoms(pdbTxt);
msg += " (1) Discard non-protein atoms."
break;
case 3:
// Keep only the first chain.
let chain = pdbTxt.slice(21,22);
pdbTxt = pdbTxt.split("\n").filter(l => l.slice(21,22) === chain).join("\n");
msg += " (1) Keep only the first chain (chain " + chain + ").";
break;
}
this.$store.commit("setVar", {
name: "convertFile",
val: pdbTxt
});
return msg;
},
/**
* The cancel button is pressed.
* @returns void
*/
"cancelPressed"(): void {
// Not sure the below is really necessary, but let's just make
// sure.
this.$store.commit("setVar", {
......@@ -134,7 +208,12 @@ let methodsFunctions = {
this.$store.commit("updateFileName", { type: this["currentType"], filename: "" });
},
"reloadIFrame"() {
/**
* Reload the iframe containing the PDBConvert app.
* @returns void
*/
"reloadIFrame"(): void {
document.getElementById("convert-frame")["src"] = "./pdbqt_convert/index.html?startBlank";
}
}
......@@ -182,7 +261,7 @@ export function setup(): void {
</span>
</p>
<p>Or click "Convert" below to convert with PDBQTConvert, which should be good enough for most purposes.</p>
<p>Or click "Convert" below to convert with the PDBQTConvert app, which should be good enough for most purposes.</p>
<b-form-checkbox
id="babel-add-hydrogens"
......
......@@ -186,25 +186,7 @@ let methodsFunctions = {
* @returns void
*/
"onShowKeepProteinOnlyClick"(e: any): void {
let proteinResidues = [
"ALA", "ARG", "ASH", "ASN", "ASP", "ASX", "CYM", "CYS", "CYX",
"GLH", "GLN", "GLU", "GLX", "GLY", "HID", "HIE", "HIP", "HIS",
"HSD", "HSE", "HSP", "ILE", "LEU", "LYN", "LYS", "MET", "MSE",
"PHE", "PRO", "SER", "THR", "TRP", "TYR", "VAL"
];
let lines: string[] = this.$store.state["receptorContents"].split("\n");
let l = lines.length;
let linesToKeep = "";
for (let i = 0; i < l; i++) {
if ((lines[i].substr(0, 5) !== "ATOM ") && (lines[i].substr(0, 7) !== "HETATM ")) {
// Not an atom line.
continue;
}
if (proteinResidues.indexOf(lines[i].substr(17,3)) !== -1) {
linesToKeep += lines[i] + "\n";
}
}
let linesToKeep = Utils.keepOnlyProteinAtoms(this.$store.state["receptorContents"]);
this.$store.commit("setVar", {
name: "receptorContents",
......
......@@ -80,3 +80,32 @@ export function replaceExt(filename: string, newExt: string): string {
}
return filename + "." + newExt;
}
/**
* Given some PDB text, keep only those lines that describe protein atoms.
* @param {string} pdbTxt The original PDB text.
* @returns string the PDB text containing only the protein atoms.
*/
export function keepOnlyProteinAtoms(pdbTxt: string): string {
let proteinResidues = [
"ALA", "ARG", "ASH", "ASN", "ASP", "ASX", "CYM", "CYS", "CYX",
"GLH", "GLN", "GLU", "GLX", "GLY", "HID", "HIE", "HIP", "HIS",
"HSD", "HSE", "HSP", "ILE", "LEU", "LYN", "LYS", "MET", "MSE",
"PHE", "PRO", "SER", "THR", "TRP", "TYR", "VAL"
];
let lines: string[] = pdbTxt.split("\n");
let l = lines.length;
let linesToKeep = "";
for (let i = 0; i < l; i++) {
if ((lines[i].substr(0, 5) !== "ATOM ") && (lines[i].substr(0, 7) !== "HETATM ")) {
// Not an atom line.
continue;
}
if (proteinResidues.indexOf(lines[i].substr(17,3)) !== -1) {
linesToKeep += lines[i] + "\n";
}
}
return linesToKeep;
}
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -28,35 +28,8 @@
<meta name="description" content="PDBQT Convert" />
<meta name="author" content="Jacob D. Durrant" />
<!-- Latest compiled and minified CSS -->
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
crossorigin="anonymous"
/>
<!-- Optional theme -->
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous"
/>
<!-- <script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous"
></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"
></script> -->
<!-- <link rel="stylesheet" href="css/styles.css?v=1.0" /> -->
<link rel="stylesheet" href="bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap-theme.min.css" />
</head>
<body>
......
No preview for this file type