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

Merge branch 'dev'

parents 736176f0 d323cd99
Pipeline #130582 passed with stages
in 1 minute and 29 seconds
......@@ -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
......
<!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
<!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
......@@ -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
This diff is collapsed.
// Import the LitElement base class and html helper function
import { LitElement, html } from 'lit-element';
import { LitElement } from 'lit-element';
import "../styles/pdb-ligand-env.css";
// Extend the LitElement base class
......@@ -26,11 +26,13 @@ class pdbLigandEnv extends LitElement {
}
async connectedCallback() {
this.highlightSubstructure = [];
let uiParams = new Config.UIParameters();
uiParams.zoom = this.zoomOn;
uiParams.menu = this.pdbId !== undefined;
let env = this.env === undefined ? "production" : this.env;
this.display = new Visualization(this, uiParams, env);
if (this.pdbId) {
......@@ -58,7 +60,7 @@ class pdbLigandEnv extends LitElement {
this.display.centerScene();
}
set ligandHighlight(data) {
set highlightSubstructure(data) {
if (!data || !this.display) {
console.log(`Argument needs to be a non empty array of strings.`);
return;
......@@ -75,8 +77,8 @@ class pdbLigandEnv extends LitElement {
this.display.addLigandHighlight(this.substructureHighlight, this.highlightColor);
}
set contourData(data) {
if (!data || !this.display || !this.display.depiction !== undefined ) return;
set contourData(data) {
if (!data || !this.display || !this.display.depiction !== undefined) return;
this.display.addContours(data);
}
......@@ -89,7 +91,7 @@ class pdbLigandEnv extends LitElement {
createRenderRoot() {
/**
* Render template in light DOM. Note that shadow DOM features like
* Render template in light DOM. Note that shadow DOM features like
* encapsulated CSS are unavailable.
*/
return this;
......
......@@ -21,7 +21,7 @@ namespace Config {
['proline', Array<string>('P')],
['aromatic', Array<string>('H', 'Y')]
]);
export const aaAbreviations = new Map<string, string>([
['ALA', 'A'],
['ARG', 'R'],
......@@ -69,6 +69,7 @@ namespace Config {
help: boolean;
residueLabel: boolean;
tooltip: boolean;
menu: boolean;
constructor() {
this.reinitialize = true;
......@@ -80,7 +81,7 @@ namespace Config {
this.help = true;
this.residueLabel = true;
this.tooltip = true;
this.menu = true;
}
}
}
\ No newline at end of file
......@@ -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
......@@ -141,110 +141,109 @@ class UI {
* Registers UI elements on the top of SVG canvas with interactions
* and ligands
*
* @param {Config.UIParameters} params Object with annotation which
* @param {Config.UIParameters} p Object with annotation which
* UI elements should be created.
* @returns
* @memberof UI
*/
public register(params: Config.UIParameters) {
if (!Object.keys(params).some(x => params[x])) {
return;
public register(p: Config.UIParameters) {
let toolbar = undefined;
let dynamicPanel = undefined;
if (p.menu) {
toolbar = d3.select(this.parent)
.append('div')
.classed('pdb-lig-env-toolbar-container', true)
.on('mouseover', () => this.displayToolbarPanel(true))
.on('mouseout', () => this.displayToolbarPanel(false));
toolbar.append('div')
.classed('pdb-lig-env-menu-panel', true)
.append('i')
.attr('title', 'Menu')
.attr('class', 'icon icon-common icon-bars');
dynamicPanel = toolbar.append('div')
.classed('pdb-lig-env-menu-panel', true)
.attr('id', 'pdb-lig-env-menu-dynamic-panel')
.style('display', 'none')
.style('opacity', 0);
if (p.help) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-help-btn')
.attr('title', 'Help')
.attr('class', 'icon icon-common icon-question-circle')
.on('click', () => this.showHelp());
let cont = d3.select(this.parent).append('div').attr('id', 'pdb-lig-env-help-container')
let navbar = cont.append('div').classed('pdb-lig-env-help-navbar', true);
navbar.append('a')
.classed('active', true)
.attr('id', 'pdb-lig-env-help-residues-btn')
.text('Ligands and residues')
.on('click', () => this.changeHelp(true));
navbar.append('a')
.attr('id', 'pdb-lig-env-help-bonds-btn')
.text('Interactions')
.on('click', () => this.changeHelp(false));
cont.append('div').attr('id', 'pdb-lig-env-help-ligands').html(helpLigands);
cont.append('div').attr('id', 'pdb-lig-env-help-bonds').html(helpBonds);
}
if (p.downloadImage) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-screenshot-btn')
.attr('title', 'Screenshot')
.attr('class', 'icon icon-common icon-camera')
.on('click', () => this.saveSVG());
}
if (p.downloadData) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-download-btn')
.attr('title', 'Download interactions')
.attr('class', 'icon icon-common icon-download')
.on('click', () => this.download());
}
if (p.center) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-center-btn')
.attr('title', 'Center screen')
.attr('class', 'icon icon-common icon-crosshairs')
.on('click', () => this.center());
}
if (p.fullScreen) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-fullscreen-btn')
.attr('title', 'Toggle Expanded')
.attr('class', 'icon icon-common icon-fullscreen')
.on('click', () => this.fullScreen());
}
if (p.reinitialize) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-home-btn')
.attr('title', 'Reinitialize')
.attr('class', 'icon icon-common icon-sync-alt')
.on('click', () => this.reinitialize());
}
}
let toolbar = d3.select(this.parent)
.append('div')
.classed('pdb-lig-env-toolbar-container', true)
.on('mouseover', () => this.displayToolbarPanel(true))
.on('mouseout', () => this.displayToolbarPanel(false));
toolbar.append('div')
.classed('pdb-lig-env-menu-panel', true)
.append('i')
.attr('title', 'Menu')
.attr('class', 'icon icon-common icon-bars');
let dynamicPanel = toolbar.append('div')
.classed('pdb-lig-env-menu-panel', true)
.attr('id', 'pdb-lig-env-menu-dynamic-panel')
.style('display', 'none')
.style('opacity', 0);
if (params.help) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-help-btn')
.attr('title', 'Help')
.attr('class', 'icon icon-common icon-question-circle')
.on('click', () => this.showHelp());
let cont = d3.select(this.parent).append('div').attr('id', 'pdb-lig-env-help-container')
let navbar = cont.append('div').classed('pdb-lig-env-help-navbar', true);
navbar.append('a')
.classed('active', true)
.attr('id', 'pdb-lig-env-help-residues-btn')
.text('Ligands and residues')
.on('click', () => this.changeHelp(true));
navbar.append('a')
.attr('id', 'pdb-lig-env-help-bonds-btn')
.text('Interactions')
.on('click', () => this.changeHelp(false));
cont.append('div').attr('id', 'pdb-lig-env-help-ligands').html(helpLigands);
cont.append('div').attr('id', 'pdb-lig-env-help-bonds').html(helpBonds);
}
if (params.downloadImage) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-screenshot-btn')
.attr('title', 'Screenshot')
.attr('class', 'icon icon-common icon-camera')
.on('click', () => this.saveSVG());
}
if (params.downloadData) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-download-btn')
.attr('title', 'Download interactions')
.attr('class', 'icon icon-common icon-download')
.on('click', () => this.download());
}
if (params.center) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-center-btn')
.attr('title', 'Center screen')
.attr('class', 'icon icon-common icon-crosshairs')
.on('click', () => this.center());
}
if (params.fullScreen) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-fullscreen-btn')
.attr('title', 'Toggle Expanded')
.attr('class', 'icon icon-common icon-fullscreen')
.on('click', () => this.fullScreen());
}
if (params.reinitialize) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-home-btn')
.attr('title', 'Reinitialize')
.attr('class', 'icon icon-common icon-sync-alt')
.on('click', () => this.reinitialize());
}
if (params.tooltip) {
if (p.tooltip) {
this.tooltip = d3.select(this.parent).append('div')
.classed('pdb-lig-env-label', true)
.attr('id', 'pdb-lig-env-tooltip')
.style('opacity', 0)
}
if (params.residueLabel) {
if (p.residueLabel) {
this.residueLabel = d3.select(this.parent).append('div')
.classed('pdb-lig-env-label', true)
.attr('id', 'pdb-lig-env-residue-label')
......@@ -261,7 +260,6 @@ class UI {
this.parent.addEventListener(Config.interactionShowLabelEvent, e => this.showLigandLabel(e));
this.parent.addEventListener(Config.interactionHideLabelEvent, () => this.hideLigandLabel());
}
}
// #region UI methods
......
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