Skip to content

GitLab

Commit 8e460b10 authored by Lukas Pravda's avatar Lukas Pravda
Browse files

make demo working

parent 766cfbcd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 13202 additions and 112 deletions
README.md
View file @ 8e460b10
......@@ -5,10 +5,11 @@ This is a web-component to display ligand structure in 2D along with its interac
## Step after cloning (use local server to see demo pages)
```shell
npm run-script build
cp demo/demo* build/ (this copies demo_component.html and demo_plugin.html to build folder)
cd build
python3 -m http.server
npm run install
npm run build
npm run start
open any of the *.html pages in the demo directory
```
## Component modes
......
demo/demo_component.html
View file @ 8e460b10
<!doctype html>
<html lang="en">
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
<link rel="stylesheet" href="pdb-ligand-env-svg.css" />
<!-- UI icons -->
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />
<!-- Web component polyfill (only loads what it needs) -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset="utf-8"></script>
<!--PDBe interactions component-->
<script type="module" src="pdb-ligand-env-component-0.3.0-min.js"></script>
</head>
<body>
<!--Mode A-->
<div style="position: relative; float: left;">
<div style="width: 500px; height: 500px; position: relative">
<pdb-ligand-env pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-ligand-env>
</div>
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
<link rel="stylesheet" href="http://127.0.0.1:8080/pdb-ligand-env-svg.css" />
<!-- UI icons -->
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />
<!-- Web component polyfill (only loads what it needs) -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js" charset="utf-8">
</script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset="utf-8"></script>
<!--PDBe interactions component-->
<script type="module" src="http://127.0.0.1:8080/pdb-ligand-env-component-0.3.0-min.js"></script>
</head>
<body>
<!--Mode A-->
<div style="position: relative; float: left;">
<div style="width: 500px; height: 500px; position: relative">
<pdb-ligand-env pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-ligand-env>
</div>
</div>
<!--Mode B-->
<div style="position: relative; float: left;">
<div style="width: 500px; height: 500px; position: relative">
<pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
</div>
</div>
<!--Mode B-->
<div style="position: relative; float: left;">
<div style="width: 500px; height: 500px; position: relative">
<pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
</div>
<!--Mode C-->
<div style="position: relative; float: left;">
<div style="width: 500px; height: 500px; position: relative">
<pdb-ligand-env pdb-res-name="CLR" zoom-on></pdb-ligand-env>
</div>
</div>
<!--Mode C-->
<div style="position: relative; float: left;">
<div style="width: 500px; height: 500px; position: relative">
<pdb-ligand-env pdb-res-name="CLR" zoom-on></pdb-ligand-env>
</div>
</div>
</body>
</body>
</html>
\ No newline at end of file
demo/demo_plugin.html
View file @ 8e460b10
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="pdb-ligand-env.css" />
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
<link rel="stylesheet" href="pdb-ligand-env-svg.css" />
<!-- UI icons -->
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />
<!-- Web component polyfill (only loads what it needs) -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js"
charset="utf-8"></script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset="utf-8"></script>
<!--PDBe interactions plugin-->
<script src="pdb-ligand-env-plugin-min.js"></script>
<!--Initialize Visualization-->
<script>
document.addEventListener("DOMContentLoaded", function (event) {
//<!--Mode A-->
var eleLigInteraction = document.getElementById('ligand-interaction');
this.lidisplay = new Visualization(eleLigInteraction, undefined);
this.lidisplay.initLigandInteractions('1cbs', 200, 'A');
<head>
<script src="https://d3js.org/d3.v5.min.js"></script>
<!-- CSS style to be used for scene drawing (required for saving SVGs.) -->
<link rel="stylesheet" href="http://127.0.0.1:8080/pdb-ligand-env-svg.css" />
<link rel="stylesheet" href="http://127.0.0.1:8080/pdb-ligand-env.css" />
<!-- UI icons -->
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />
<!-- Web component polyfill (only loads what it needs) -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js" charset="utf-8">
</script>
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset="utf-8"></script>
//<!--Mode B-->
var eleBoundInteraction = document.getElementById('boundmolecule-interaction');
this.bmdisplay = new Visualization(eleBoundInteraction, undefined);
this.bmdisplay.initBoundMoleculeInteractions('3d12', 'bm1');
<!--PDBe interactions plugin-->
<script src="http://127.0.0.1:8080/pdb-ligand-env-plugin.js"></script>
//<!--Mode C-->
var eleChemComp = document.getElementById('chem-comp');
this.ccdisplay = new Visualization(eleChemComp, undefined);
this.ccdisplay.initLigandDisplay('HEM');
});
</script>
<!--Initialize Visualization-->
<script>
document.addEventListener("DOMContentLoaded", function (event) {
//<!--Mode A-->
var eleLigInteraction = document.getElementById('ligand-interaction');
this.lidisplay = new Visualization(eleLigInteraction, undefined);
this.lidisplay.initLigandInteractions('1cbs', 200, 'A');
</head>
<body>
<!--Mode A-->
<div style="position: relative; float: left;">
<div style="width: 600px; height: 600px; position: relative">
//<!--Mode B-->
var eleBoundInteraction = document.getElementById('boundmolecule-interaction');
this.bmdisplay = new Visualization(eleBoundInteraction, undefined);
this.bmdisplay.initBoundMoleculeInteractions('3d12', 'bm1');
//<!--Mode C-->
var eleChemComp = document.getElementById('chem-comp');
this.ccdisplay = new Visualization(eleChemComp, undefined);
this.ccdisplay.initLigandDisplay('HEM');
});
</script>
</head>
<body>
<!--Mode A-->
<div style="position: relative; float: left;">
<div style="width: 600px; height: 600px; position: relative">
<div id='ligand-interaction'></div>
</div>
</div>
</div>
<!--Mode B-->
<div style="position: relative; float: left;">
<div style="width: 600px; height: 600px; position: relative">
<!--Mode B-->
<div style="position: relative; float: left;">
<div style="width: 600px; height: 600px; position: relative">
<div id='boundmolecule-interaction'></div>
</div>
......@@ -60,6 +60,6 @@
</div>
</div>
</body>
</body>
</html>
\ No newline at end of file
gulpfile.js
View file @ 8e460b10
......@@ -54,6 +54,12 @@ gulp.task('copyIndex', () => {
.pipe(gulp.dest('build/'));
});
gulp.task('copyAppCSS', () => {
return gulp.src(['src/styles/pdb-ligand-env.css'])
.pipe(concat(`pdb-ligand-env.css`))
.pipe(gulp.dest('build/'));
});
gulp.task('copyMapping', () => {
return gulp.src(['dependencies/het_mapping.json'])
.pipe(concat(`het_mapping.json`))
......@@ -88,5 +94,5 @@ gulp.task('minifyPlugin', () => {
.pipe(gulp.dest('build/'));
});
gulp.task('default', gulp.series('clean', 'concat', 'concatCSS',
gulp.task('default', gulp.series('clean', 'copyAppCSS', 'concat', 'concatCSS',
'copyXML', 'copyIndex', 'copyMapping', 'minifyPlugin'));
\ No newline at end of file
package-lock.json
View file @ 8e460b10
This diff is collapsed.
src/plugin/ui.ts
View file @ 8e460b10
......@@ -26,11 +26,11 @@ let helpLigands = `
<td>
<div class="pdb-lig-env-help-residue" style="background: #F08080;"></div>
</td>
<td>cystein</td>
<td>cystein</td>
<td>
<div class="pdb-lig-env-help-residue" style="background: #00BFFF;"></div>
</td>
<td>water</td>
<td>water</td>
</tr>
<tr>
<td>
......@@ -40,13 +40,13 @@ let helpLigands = `
<td>
<div class="pdb-lig-env-help-residue" style="background: #F2F2F2;"></div>
</td>
<td>other</td>
<td>other</td>
</tr>
<tr>
<td>
<div class="pdb-lig-env-help-residue" style="background: #F09048;"></div>
</td>
<td>glycine</td>
<td>glycine</td>
<td>
<div class="pdb-lig-env-help-residue" style="background: white; border: 1.2px solid black;"></div>
</td>
......@@ -85,7 +85,7 @@ let helpBonds = `
</tr>
<tr>
<td>
<hr style="border: 0 none; border-top: 5px solid #008080; background: none; height: 0;" />
<hr style="border: 0 none; border-top: 5px solid #008080; background: none; height: 0;" />
</td>
<td>metal</td>
<td></td>
......@@ -109,7 +109,7 @@ let helpBonds = `
// <hr style="border: 0 none; border-top: 5px dashed black; background: none; height: 0;" />
// </td>
// <td>non-covalent</td>
// </tr>
// </tr>
// </table>`
// #endregion help
......
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