Commit ad3b3f99 authored by Lukas Pravda's avatar Lukas Pravda
Browse files

Merge branch 'rename' into dev

parents 06c36249 f9c5c549
Pipeline #61871 passed with stages
in 1 minute and 17 seconds
# RELEASE 0.1 - 28 January 2019
## RELEASE 0.2 - 24 February 2020
Component rembranded to `pdb-ligand-env`
### Features
* A lot of bug fixes and under the hood improvements
## RELEASE 0.1 - 28 January 2019
First release for public testing.
## Features
### Features
* Bound molecule interactions view
* Residue-level interactions view
......
# PDBe interactions component
# PDB ligand environment component
This is a web-component to display ligand structure in 2D along with its interactions. Ligand can be perceived as a set of covalently linked pdb residues (refered to as bound molecule) or a single pdb residue. This depiction can be enriched with a substructure highlight and binding site interactions.
......@@ -36,10 +36,10 @@ A few files needs to be imported in the page before the component is attempted t
<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="pdbe-interactions-svg.css" />
<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" />
<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>
......@@ -47,31 +47,32 @@ A few files needs to be imported in the page before the component is attempted t
charset="utf-8"></script>
<!--PDBe interactions component-->
<script type="module" src="pdbe-interactions-component-0.1.0.js"></script>
<script type="module" src="pdb-ligand-env-component-0.1.0.js"></script>
```
#### A) Ligand interactions
```html
<pdb-interactions pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-interactions>
<pdb-ligand-env pdb-id="1cbs" pdb-res-id="200" pdb-chain-id="A"></pdb-ligand-env>
```
#### B) Bound molecule interactions
```html
<pdb-interactions pdb-id="3d12" bound-molecule-id="bm1"></pdb-interactions>
<pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
```
#### C) Ligand/chemical component
```html
<pdb-interactions pdb-res-name="CLR" zoom-on ></pdb-interactions>
<pdb-ligand-env pdb-res-name="CLR" zoom-on ></pdb-ligand-env>
```
The component contains a number of properties that can be set, in order to change data that are being displayed. First you need to define a component on the page:
```html
<ligand-display id='SIA-component'></ligand-display>
<pdb-ligand-env id='SIA-component'></pdb-ligand-env>
```
and then inject data you want to display e.g.:
......@@ -100,14 +101,14 @@ The component can be also added to DOM directly from JavaScript. There are some
<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="pdbe-interactions-svg.css" />
<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" />
<!--PDBe interactions plugin-->
<script src="pdbe-interactions-plugin.js"></script>
<link rel="stylesheet" href="pdbe-interactions.css" />
<!--PDB ligand environment plugin-->
<script src="pdb-ligand-env-plugin.js"></script>
<link rel="stylesheet" href="pdb-ligand-env.css" />
```
......
......@@ -4,7 +4,7 @@
<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="pdbe-interactions-svg.css" />
<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) -->
......@@ -13,7 +13,7 @@
<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="pdbe-interactions-component-0.1.0.js"></script>
<script type="module" src="pdb-ligand-env-component-0.2.0.js"></script>
</head>
......
......@@ -2,11 +2,11 @@
<html lang="en">
<head>
<link rel="stylesheet" href="pdbe-interactions.css" />
<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="pdbe-interactions-svg.css" />
<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) -->
......@@ -16,7 +16,7 @@
charset="utf-8"></script>
<!--PDBe interactions plugin-->
<script src="pdbe-interactions-plugin.js"></script>
<script src="pdb-ligand-env-plugin.js"></script>
<!--Initialize Visualization-->
<script>
......
......@@ -3,7 +3,7 @@
<script src="https://d3js.org/d3.v5.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<!--testing purposes only-->
<link rel="stylesheet" href="pdbe-interactions-svg.css" />
<link rel="stylesheet" href="pdb-ligand-env-svg.css" />
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.3/fonts.css" />
<!-- MOL* -->
......@@ -11,8 +11,6 @@
href="https://wwwdev.ebi.ac.uk/pdbe/pdb-component-library/v1.0/css/molstar-light-0.0.1.css">
<script src="https://wwwdev.ebi.ac.uk/pdbe/pdb-component-library/v1.0/js/molstar-0.0.1.js"></script>
<!-- <script src="pdbe-interactions-plugin.js"></script> -->
<!-- Web component polyfill (only loads what it needs) -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js" charset="utf-8">
</script>
......@@ -20,17 +18,17 @@
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset="utf-8"></script>
<script type="module" src="pdbe-interactions-component-0.1.0.js"></script>
<script type="module" src="pdb-ligand-env-component-0.2.0.js"></script>
<script>
var renderBmInteractions = function (id, bmId) {
var int =
`<pdb-interactions style="border: 1px solid black" pdb-id="${id}" bound-molecule-id="${bmId}"></pdb-interactions>`
`<pdb-ligand-env style="border: 1px solid black" pdb-id="${id}" bound-molecule-id="${bmId}"></pdb-ligand-env>`
document.getElementById('rt').innerHTML = int;
};
var renderLigandInteractions = function (id, chain, resId) {
var int =
`<pdb-interactions style="border: 1px solid black" pdb-id="${id}" pdb-chain-id="${chain}" pdb-res-id="${resId}" zoom-on></pdb-interactions>`
`<pdb-ligand-env style="border: 1px solid black" pdb-id="${id}" pdb-chain-id="${chain}" pdb-res-id="${resId}" zoom-on></pdb-ligand-env>`
document.getElementById('rt').innerHTML = int;
};
......@@ -122,17 +120,17 @@
</div>
<div style="position: relative; float: left;">
<div id="rt 1" style="width: 500px; height: 500px; position: relative">
<pdb-interactions pdb-id="3d12" bound-molecule-id="bm1" zoom-on></pdb-interactions>
<pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1" zoom-on></pdb-ligand-env>
</div>
</div>
<!--
Further use in the app for bound molecule interactions:
<pdbe-interactions pdb-id="3d12" bound-molecule-id="bm1"></pdbe-interactions>
<pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
for ligand interactions:
<pdbe-interactions pdb-id="3d12" pdb-chain-id="A" pdb-res-id="200"></pdbe-interactions>
<pdb-ligand-env pdb-id="3d12" pdb-chain-id="A" pdb-res-id="200"></pdb-ligand-env>
-->
<script>
......
......@@ -10,7 +10,7 @@ const PKG_JSON = require(path.join(PACKAGE_ROOT_PATH, "package.json"));
const banner = ['/**',
` * ${PKG_JSON.name}`,
` * @version ${PKG_JSON.version}`,
' * @link https://gitlab.ebi.ac.uk/pdbe/web-components/interactions',
' * @link https://gitlab.ebi.ac.uk/pdbe/web-components/ligand-env',
' * @license Apache 2.0',
' */',
''].join('\n');
......@@ -38,7 +38,7 @@ gulp.task('clean', function() {
});
gulp.task('concatCSS', function () {
return gulp.src(['src/styles/pdbe-interactions-svg.css'])
return gulp.src(['src/styles/pdb-ligand-env-svg.css'])
.pipe(concat(`${PKG_JSON.name}-svg.css`))
.pipe(header(license, {} ))
.pipe(header(banner, {} ))
......@@ -58,8 +58,8 @@ gulp.task('copyMapping', function () {
});
gulp.task('copyXML', function () {
return gulp.src(['dependencies/snfg_visuals.xml'])
.pipe(concat(`snfg_visuals.xml`))
return gulp.src(['dependencies/pdb-snfg-visuals.xml'])
.pipe(concat(`pdb-snfg-visuals.xml`))
.pipe(gulp.dest('build/'));
});
......
{
"name": "pdbe-interactions",
"version": "0.1.0",
"name": "pdb-ligand-env",
"version": "0.2.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......
{
"name": "pdbe-interactions",
"version": "0.1.0",
"name": "pdb-ligand-env",
"version": "0.2.0",
"description": "",
"main": "app.js",
"dependencies": {
......
// Import the LitElement base class and html helper function
import { LitElement, html } from 'lit-element';
import "../styles/pdbe-interactions.css";
import "../styles/pdb-ligand-env.css";
// Extend the LitElement base class
class pdbeLigandEnv extends LitElement {
class pdbLigandEnv extends LitElement {
//Get properties / attribute values
static get properties() {
......@@ -90,4 +90,4 @@ class pdbeLigandEnv extends LitElement {
}
// Register the new element with the browser.
customElements.define('pdb-interactions', pdbeLigandEnv);
\ No newline at end of file
customElements.define('pdb-ligand-env', pdbLigandEnv);
\ No newline at end of file
......@@ -46,7 +46,7 @@ class Visualization {
this.svg = d3.select(this.parent)
.append('div')
.attr('id', 'pdbe-int-root')
.attr('id', 'pdb-lig-env-root')
.append('svg')
.style('background-color', 'white')
.attr('xmlns', 'http://www.w3.org/2000/svg')
......@@ -533,14 +533,14 @@ class Visualization {
this.links
.append('line')
.classed('pdbe-int-svg-shadow-bond', (x: Model.Link) => x.getLinkClass() !== 'hydrophobic')
.classed('pdb-lig-env-svg-shadow-bond', (x: Model.Link) => x.getLinkClass() !== 'hydrophobic')
.on('click', (x: Model.Link) => this.linkMouseClickEventHandler(x))
.on('mouseenter', (x: Model.Link) => this.linkMouseOverEventHandler(x))
.on('mouseleave', () => this.linkMouseOutEventHandler());
this.links
.append('line')
.attr('class', (e: Model.Link) => `pdbe-int-svg-bond pdbe-int-svg-bond-${e.getLinkClass()}`)
.attr('class', (e: Model.Link) => `pdb-lig-env-svg-bond pdb-lig-env-svg-bond-${e.getLinkClass()}`)
.attr('marker-mid', (e: Model.Link) => e.hasClash() ? 'url(#clash)' : '')
.on('mouseenter', (x: Model.Link) => this.linkMouseOverEventHandler(x))
.on('mouseleave', () => this.linkMouseOutEventHandler());
......@@ -598,7 +598,7 @@ class Visualization {
*/
private processError(e: any, msg: string) {
this.canvas.append('text')
.classed('pdbe-int-svg-node', true)
.classed('pdb-lig-env-svg-node', true)
.attr('x', this.parent.clientWidth / 3)
.attr('y', this.parent.clientHeight / 2)
.text(msg)
......@@ -649,7 +649,7 @@ class Visualization {
this.nodes.filter((x: Model.InteractionNode) => !x.residue.isLigand)
.on('click', (x: Model.InteractionNode) => this.fireExternalNodeEvent(x, Config.interactionClickEvent))
.attr('class', (x: Model.InteractionNode) => `pdbe-int-svg-node pdbe-int-svg-${x.residue.getResidueType()}-res`)
.attr('class', (x: Model.InteractionNode) => `pdb-lig-env-svg-node pdb-lig-env-svg-${x.residue.getResidueType()}-res`)
.on('mouseenter', (x: Model.InteractionNode, i: number, g: any) => this.fireExternalNodeMouseEnterEvent(x, i, g))
.on('mouseleave', (x: Model.InteractionNode, i: number, g: any) => this.fireExternalNodeMouseLeaveEvent(x, i, g));
......@@ -704,7 +704,7 @@ class Visualization {
.selectAll()
.data(this.bindingSite.interactionNodes)
.enter().append('g')
.attr('class', (e: Model.InteractionNode) => `pdbe-int-svg-node pdbe-int-svg-${e.residue.getResidueType()}-res`)
.attr('class', (e: Model.InteractionNode) => `pdb-lig-env-svg-node pdb-lig-env-svg-${e.residue.getResidueType()}-res`)
.on('click', (x: Model.InteractionNode, i: number, g: any) => this.selectLigand(x, i, g))
.on('mouseover', (x: Model.InteractionNode, i: number, g: any) => this.fireExternalNodeMouseEnterEvent(x, i, g))
.on('mouseout', (x: Model.InteractionNode, i: number, g: any) => this.fireExternalNodeMouseLeaveEvent(x, i, g));
......
namespace Resources {
export const apiServer: string = 'https://wwwdev.ebi.ac.uk/pdbe/graph-api';
export const glycanSymbols: string = 'https://pdbe.gitdocs.ebi.ac.uk/web-components/interactions/snfg_visuals.xml';
export const glycanMapping: string = 'https://pdbe.gitdocs.ebi.ac.uk/web-components/interactions/het_mapping.json';
export const componentSvgCss: string = 'https://pdbe.gitdocs.ebi.ac.uk/web-components/interactions/pdbe-interactions-svg.css';
export const glycanSymbols: string = 'https://pdbe.gitdocs.ebi.ac.uk/web-components/ligand-env/pdb-snfg-visuals.xml';
export const glycanMapping: string = 'https://pdbe.gitdocs.ebi.ac.uk/web-components/ligand-env/het_mapping.json';
export const componentSvgCss: string = 'https://pdbe.gitdocs.ebi.ac.uk/web-components/ligand-env/pdb-ligand-env-svg.css';
export const residueTypeURL: string = "https://www.ebi.ac.uk/pdbe/api/pdb/compound/summary/";
......
// #region help
let helpLigands = `
<table class='pdbe-int-help-table'>
<table class='pdb-lig-env-help-table'>
<tr>
<td>
<div class="pdbe-int-help-residue" style="background: #80A0F0; "></div>
<div class="pdb-lig-env-help-residue" style="background: #80A0F0; "></div>
</td>
<td>hydrophobic</td>
<td>
<div class="pdbe-int-help-residue" style="background: #C048C0;"></div>
<div class="pdb-lig-env-help-residue" style="background: #C048C0;"></div>
</td>
<td>negativelly charged</td>
</tr>
<tr>
<td>
<div class="pdbe-int-help-residue" style="background: #15A4A4;"></div>
<div class="pdb-lig-env-help-residue" style="background: #15A4A4;"></div>
</td>
<td>aromatic</td>
<td>
<div class="pdbe-int-help-residue" style="background: #15C015;"></div>
<div class="pdb-lig-env-help-residue" style="background: #15C015;"></div>
</td>
<td>polar</td>
<td>
</tr>
<tr>
<td>
<div class="pdbe-int-help-residue" style="background: #F08080;"></div>
<div class="pdb-lig-env-help-residue" style="background: #F08080;"></div>
</td>
<td>cystein</td>
<td>
<div class="pdbe-int-help-residue" style="background: #00BFFF;"></div>
<div class="pdb-lig-env-help-residue" style="background: #00BFFF;"></div>
</td>
<td>water</td>
</tr>
<tr>
<td>
<div class="pdbe-int-help-residue" style="background: #F01505;"></div>
<div class="pdb-lig-env-help-residue" style="background: #F01505;"></div>
</td>
<td>positivelly charged</td>
<td>
<div class="pdbe-int-help-residue" style="background: #F2F2F2;"></div>
<div class="pdb-lig-env-help-residue" style="background: #F2F2F2;"></div>
</td>
<td>other</td>
</tr>
<tr>
<td>
<div class="pdbe-int-help-residue" style="background: #F09048;"></div>
<div class="pdb-lig-env-help-residue" style="background: #F09048;"></div>
</td>
<td>glycine</td>
<td>
<div class="pdbe-int-help-residue" style="background: white; border: 1.2px solid black;"></div>
<div class="pdb-lig-env-help-residue" style="background: white; border: 1.2px solid black;"></div>
</td>
<td>bound molecule</td>
</tr>
......@@ -61,7 +61,7 @@ let helpLigands = `
</table>
`
let helpBonds = `
<table class='pdbe-int-help-table' style="border-bottom: 0.5px solid black; padding-bottom: 10px;">
<table class='pdb-lig-env-help-table' style="border-bottom: 0.5px solid black; padding-bottom: 10px;">
<tr>
<td>
<hr style="border: 0 none; border-top: 5px solid #AD4379; background: none; height: 0;" />
......@@ -99,7 +99,7 @@ let helpBonds = `
<td>vdw</td>
</tr>
</table>
<table class="pdbe-int-help-table" style="margin-top: 5px;">
<table class="pdb-lig-env-help-table" style="margin-top: 5px;">
<tr>
<td>
<hr style="border: 0 none; border-top: 5px solid black; background: none; height: 0;" />
......@@ -153,50 +153,50 @@ class UI {
let toolbar = d3.select(this.parent)
.append('div')
.classed('pdbe-int-toolbar-container', true)
.classed('pdb-lig-env-toolbar-container', true)
.on('mouseover', () => this.displayToolbarPanel(true))
.on('mouseout', () => this.displayToolbarPanel(false));
toolbar.append('div')
.classed('pdbe-int-menu-panel', true)
.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('pdbe-int-menu-panel', true)
.attr('id', 'pdbe-int-menu-dynamic-panel')
.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', 'pdbe-int-help-btn')
.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', 'pdbe-int-help-container')
let navbar = cont.append('div').classed('pdbe-int-help-navbar', true);
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', 'pdbe-int-help-residues-btn')
.attr('id', 'pdb-lig-env-help-residues-btn')
.text('Ligands and residues')
.on('click', () => this.changeHelp(true));
navbar.append('a')
.attr('id', 'pdbe-int-help-bonds-btn')
.attr('id', 'pdb-lig-env-help-bonds-btn')
.text('Interactions')
.on('click', () => this.changeHelp(false));
cont.append('div').attr('id', 'pdbe-int-help-ligands').html(helpLigands);
cont.append('div').attr('id', 'pdbe-int-help-bonds').html(helpBonds);
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', 'pdbe-int-screenshot-btn')
.attr('id', 'pdb-lig-env-screenshot-btn')
.attr('title', 'Screenshot')
.attr('class', 'icon icon-common icon-camera')
.on('click', () => this.saveSVG());
......@@ -204,7 +204,7 @@ class UI {
if (params.downloadData) {
dynamicPanel.append('i')
.attr('id', 'pdbe-int-download-btn')
.attr('id', 'pdb-lig-env-download-btn')
.attr('title', 'Download interactions')
.attr('class', 'icon icon-common icon-download')
.on('click', () => this.download());
......@@ -215,7 +215,7 @@ class UI {
if (params.center) {
dynamicPanel.append('i')
.attr('id', 'pdbe-int-center-btn')
.attr('id', 'pdb-lig-env-center-btn')
.attr('title', 'Center screen')
.attr('class', 'icon icon-common icon-crosshairs')
.on('click', () => this.center());
......@@ -223,7 +223,7 @@ class UI {
if (params.fullScreen) {
dynamicPanel.append('i')
.attr('id', 'pdbe-int-fullscreen-btn')
.attr('id', 'pdb-lig-env-fullscreen-btn')
.attr('title', 'Toggle Expanded')
.attr('class', 'icon icon-common icon-fullscreen')
.on('click', () => this.fullScreen());
......@@ -231,7 +231,7 @@ class UI {
if (params.reinitialize) {
dynamicPanel.append('i')
.attr('id', 'pdbe-int-home-btn')
.attr('id', 'pdb-lig-env-home-btn')
.attr('title', 'Reset Camera')
.attr('class', 'icon icon-common icon-sync-alt')
.on('click', () => this.reinitialize());
......@@ -239,15 +239,15 @@ class UI {
if (params.tooltip) {
this.tooltip = d3.select(this.parent).append('div')
.classed('pdbe-int-label', true)
.attr('id', 'pdbe-int-tooltip')
.classed('pdb-lig-env-label', true)
.attr('id', 'pdb-lig-env-tooltip')
.style('opacity', 0)
}
if (params.residueLabel) {
this.residueLabel = d3.select(this.parent).append('div')
.classed('pdbe-int-label', true)
.attr('id', 'pdbe-int-residue-label')
.classed('pdb-lig-env-label', true)
.attr('id', 'pdb-lig-env-residue-label')
.style('opacity', 0)
}
......@@ -282,10 +282,10 @@ class UI {
}
private changeHelp(showResidues: boolean) {
let ligHelpBtn = d3.select(this.parent).select('#pdbe-int-help-residues-btn');
let bondHelpBtn = d3.select(this.parent).select('#pdbe-int-help-bonds-btn');
let bondHelpSection = d3.select(this.parent).select('#pdbe-int-help-bonds');
let ligHelpSection = d3.select(this.parent).select('#pdbe-int-help-ligands');
let ligHelpBtn = d3.select(this.parent).select('#pdb-lig-env-help-residues-btn');
let bondHelpBtn = d3.select(this.parent).select('#pdb-lig-env-help-bonds-btn');
let bondHelpSection = d3.select(this.parent).select('#pdb-lig-env-help-bonds');
let ligHelpSection = d3.select(this.parent).select('#pdb-lig-env-help-ligands');
if (showResidues) {
bondHelpBtn.classed('active', false);
......@@ -302,8 +302,8 @@ class UI {
}
private showHelp() {
let el = d3.select(this.parent).select('#pdbe-int-help-container');
let btn = d3.select(this.parent).select('#pdbe-int-help-btn');
let el = d3.select(this.parent).select('#pdb-lig-env-help-container');
let btn = d3.select(this.parent).select('#pdb-lig-env-help-btn');
if (el.style('display') === 'block') {
el.style('display', 'none');
......@@ -317,8 +317,8 @@ class UI {
}
private displayToolbarPanel(show: boolean) {
let dynPanel = d3.select(this.parent).select('#pdbe-int-menu-dynamic-panel');
let el = d3.select(this.parent).select('#pdbe-int-help-container');
let dynPanel = d3.select(this.parent).select('#pdb-lig-env-menu-dynamic-panel');
let el = d3.select(this.parent).select('#pdb-lig-env-help-container');
if (!dynPanel && !el) return;
......@@ -339,7 +339,7 @@ class UI {
* @memberof UI
*/
private fullScreen() {
let btn = d3.select(this.parent).select('#pdbe-int-fullscreen-btn');
let btn = d3.select(this.parent).select('#pdb-lig-env-fullscreen-btn');
if (btn.attr('class') === 'icon icon-common icon-fullscreen') {
this.display.fullScreen = true;
......
.pdbe-int-svg-shadow-node {
.pdb-lig-env-svg-shadow-node {
stroke-width: 0;
fill: white;
}
.pdbe-int-svg-shadow-bond {
.pdb-lig-env-svg-shadow-bond {
stroke-width: 15px;
stroke: transparent;
}
.pdbe-int-svg-bond {
.pdb-lig-env-svg-bond {
fill: none;
fill-rule: evenodd;
stroke-linecap: butt;
......@@ -16,142 +16,142 @@
stroke-opacity: 1;
}
.pdbe-int-svg-bond-ligand {
.pdb-lig-env-svg-bond-ligand {
stroke-width: 4px;
stroke: black;
}
.pdbe-int-svg-bond-electrostatic {
.pdb-lig-env-svg-bond-electrostatic {
stroke-width: 2px;
stroke-dasharray: 10 10;