Skip to content
Snippets Groups Projects
Commit 8e460b10 authored by Lukas Pravda's avatar Lukas Pravda
Browse files

make demo working

parent 766cfbcd
No related branches found
No related tags found
No related merge requests found
Expand all Hide whitespace changes
Inline Side-by-side
README.md
+ 5
− 4
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
+ 38
− 37
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
+ 45
− 45
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
+ 7
− 1
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
+ 13101
− 19
View file @ 8e460b10
This diff is collapsed.
src/plugin/ui.ts
+ 6
− 6
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
......
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