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

rebrand component pdbe-interactions -> pdb-ligand-env

parent 06c36249
No related branches found
No related tags found
1 merge request!1Dev
Hide whitespace changes
Inline Side-by-side
Showing
with 174 additions and 186 deletions
CHANGELOG.md
+ 10
− 2
View file @ f9c5c549
# 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
......
README.md
+ 13
− 12
View file @ f9c5c549
# 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" />
```
......
demo_component.html
+ 2
− 2
View file @ f9c5c549
......@@ -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>
......
demo_plugin.html
+ 3
− 3
View file @ f9c5c549
......@@ -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>
......
dependencies/index.html
+ 7
− 9
View file @ f9c5c549
......@@ -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>
......
dependencies/snfg_visuals.xml → dependencies/pdb-snfg-visuals.xml
+ 0
− 0
View file @ f9c5c549
File moved
gulpfile.js
+ 4
− 4
View file @ f9c5c549
......@@ -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/'));
});
......
package-lock.json
+ 2
− 2
View file @ f9c5c549
{
"name": "pdbe-interactions",
"version": "0.1.0",
"name": "pdb-ligand-env",
"version": "0.2.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
......
package.json
+ 2
− 2
View file @ f9c5c549
{
"name": "pdbe-interactions",
"version": "0.1.0",
"name": "pdb-ligand-env",
"version": "0.2.0",
"description": "",
"main": "app.js",
"dependencies": {
......
src/component/component.js
+ 3
− 3
View file @ f9c5c549
// 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
src/plugin/manager.ts
+ 6
− 6
View file @ f9c5c549
......@@ -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));
......
src/plugin/resources.ts
+ 3
− 3
View file @ f9c5c549
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/";
......
src/plugin/ui.ts
+ 42
− 42
View file @ f9c5c549
// #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;
......
src/styles/pdbe-interactions-svg.css → src/styles/pdb-ligand-env-svg.css
+ 30
− 30
View file @ f9c5c549
.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;
stroke: #3F26BF;
}
.pdbe-int-svg-bond-stacking {
.pdb-lig-env-svg-bond-stacking {
stroke-width: 2px;
stroke: green;
}
.pdbe-int-svg-bond-atom-pi {
.pdb-lig-env-svg-bond-atom-pi {
stroke-width: 2px;
stroke: #2E8B57;
}
.pdbe-int-svg-bond-amide {
.pdb-lig-env-svg-bond-amide {
stroke-width: 2px;
stroke: green;
}
.pdbe-int-svg-bond-vdw {
.pdb-lig-env-svg-bond-vdw {
stroke-width: 2px;
stroke-dasharray: 10 10;
stroke: #9B7653;
}
.pdbe-int-svg-bond-hydrophobic {
.pdb-lig-env-svg-bond-hydrophobic {
stroke-width: 0px;
}
.pdbe-int-svg-bond-aromatic {
.pdb-lig-env-svg-bond-aromatic {
stroke-width: 4px;
stroke-dasharray: 1 10;
stroke: #AD4379;
}
.pdbe-int-svg-bond-metal {
.pdb-lig-env-svg-bond-metal {
stroke-width: 4px;
stroke: #008080;
}
.pdbe-int-svg-bond-clashes {
.pdb-lig-env-svg-bond-clashes {
stroke-width: 2px;
stroke: #FF5050;
}
.pdbe-int-svg-bond-covalent {
.pdb-lig-env-svg-bond-covalent {
stroke-width: 2px;
stroke: black;
}
.pdbe-int-svg-bond-other {
.pdb-lig-env-svg-bond-other {
stroke-width: 1px;
stroke: black;
}
.pdbe-int-svg-node circle {
.pdb-lig-env-svg-node circle {
stroke-width: 2px;
}
.pdbe-int-svg-node text {
.pdb-lig-env-svg-node text {
cursor: inherit;
font-family: Arial, Helvetica, sans-serif;
stroke: black !important;
fill: black !important;
}
.pdbe-int-svg-node text tspan:first-child {
.pdb-lig-env-svg-node text tspan:first-child {
cursor: inherit;
font-weight: 100;
font-size: 0.75em;
}
.pdbe-int-svg-node text tspan:nth-child(2) {
.pdb-lig-env-svg-node text tspan:nth-child(2) {
cursor: inherit;
font-weight: lighter;
font-size: 0.55em;
}
.pdbe-int-svg-ligand-res {
.pdb-lig-env-svg-ligand-res {
stroke: black;
fill: white;
}
.pdbe-int-svg-water-res {
.pdb-lig-env-svg-water-res {
stroke: #A9A9A9;
fill: #00BFFF;
}
.pdbe-int-svg-cystein-res {
.pdb-lig-env-svg-cystein-res {
stroke: #A9A9A9;
fill: #F08080;
}
.pdbe-int-svg-positive-res {
.pdb-lig-env-svg-positive-res {
stroke: #A9A9A9;
fill: #F01505;
}
.pdbe-int-svg-negative-res {
.pdb-lig-env-svg-negative-res {
stroke: #A9A9A9;
fill: #C048C0;
}
.pdbe-int-svg-proline-res {
.pdb-lig-env-svg-proline-res {
stroke: #A9A9A9;
fill: #C0C000;
}
.pdbe-int-svg-polar-res {
.pdb-lig-env-svg-polar-res {
stroke: #A9A9A9;
fill: #15C015;
}
.pdbe-int-svg-aromatic-res {
.pdb-lig-env-svg-aromatic-res {
stroke: #A9A9A9;
fill: #15A4A4;
}
.pdbe-int-svg-hydrophobic-res {
.pdb-lig-env-svg-hydrophobic-res {
stroke: #A9A9A9;
fill: #80A0F0;
}
.pdbe-int-svg-glycine-res {
.pdb-lig-env-svg-glycine-res {
stroke: #A9A9A9;
fill: #F09048;
}
.pdbe-int-svg-other-res {
.pdb-lig-env-svg-other-res {
stroke: #A9A9A9;
fill: #F2F2F2;
......
src/styles/pdbe-interactions.css → src/styles/pdb-ligand-env.css
+ 27
− 27
View file @ f9c5c549
#pdbe-int-root {
#pdb-lig-env-root {
cursor: default;
border-radius: 3px;
width: 100%;
height: 100%;
}
.pdbe-int-label {
.pdb-lig-env-label {
position: absolute;
height: auto;
padding: 10px;
......@@ -16,24 +16,24 @@
word-wrap: normal;
}
#pdbe-int-tooltip {
#pdb-lig-env-tooltip {
margin: 10px 0 0 10px;
bottom: 10px;
}
#pdbe-int-tooltip>ul {
#pdb-lig-env-tooltip>ul {
margin: 0;
padding: 0;
list-style-type: none;
}
#pdbe-int-tooltip>ul>li:first-of-type(span) {
#pdb-lig-env-tooltip>ul>li:first-of-type(span) {
text-align: left;
padding: 0px !important;
font-weight: 900;
}
.pdbe-int-menu-panel {
.pdb-lig-env-menu-panel {
background: #ccd4e0;
opacity: 0.9;
float: right;
......@@ -47,28 +47,28 @@
transition: .2s;
}
.pdbe-int-menu-panel>i {
.pdb-lig-env-menu-panel>i {
margin-right: 15px;
cursor: pointer;
font: 12px sans-serif;
}
.pdbe-int-menu-panel>i:last-child {
.pdb-lig-env-menu-panel>i:last-child {
margin-right: 0px;
}
.pdbe-int-menu-panel>i:hover {
.pdb-lig-env-menu-panel>i:hover {
color: #637ca0;
}
.pdbe-int-toolbar-container {
.pdb-lig-env-toolbar-container {
top: 20px;
right: 20px;
position: absolute;
overflow: hidden;
}
#pdbe-int-help-container {
#pdb-lig-env-help-container {
font-family: sans-serif;
background: #f6f5f3;
display: none;
......@@ -87,77 +87,77 @@
transition: 1s;
}
#pdbe-int-help-container:first-child {
#pdb-lig-env-help-container:first-child {
font-weight: bold;
}
#pdbe-int-residue-label {
#pdb-lig-env-residue-label {
margin: 0 0 10px 10px;
left: 10px;
top: 10px;
}
#pdbe-int-tooltip span:first-child {
#pdb-lig-env-tooltip span:first-child {
text-align: left;
padding-left: 0px !important;
font-weight: 900;
}
#pdbe-int-tooltip span:last-child {
#pdb-lig-env-tooltip span:last-child {
padding-left: 10px;
}
.pdbe-int-help-table {
.pdb-lig-env-help-table {
border: none !important;
margin: 0 !important;
background-color: #f6f5f3 !important;
}
.pdbe-int-help-table td {
.pdb-lig-env-help-table td {
border: none !important;
}
.pdbe-int-help-table tr {
.pdb-lig-env-help-table tr {
height: 25px;
}
.pdbe-int-help-table tr td:first-child {
.pdb-lig-env-help-table tr td:first-child {
width: 25px;
min-width: 25px;
max-width: 25px;
}
.pdbe-int-help-table tr td:nth-child(2) {
.pdb-lig-env-help-table tr td:nth-child(2) {
min-width: 100px;
}
.pdbe-int-help-table tr td:nth-child(3) {
.pdb-lig-env-help-table tr td:nth-child(3) {
width: 25px;
min-width: 25px;
max-width: 25px;
}
#pdbe-int-help-bonds {
#pdb-lig-env-help-bonds {
display: none;
}
.pdbe-int-btn:hover {
.pdb-lig-env-btn:hover {
color: #637ca0;
}
.pdbe-int-help-residue {
.pdb-lig-env-help-residue {
width: 20px;
height: 20px;
border-radius: 50%;
border: 1.2px solid #a9a9a9;
}
.pdbe-int-help-navbar {
.pdb-lig-env-help-navbar {
height: 20px;
margin-bottom: 10px;
}
.pdbe-int-help-navbar a {
.pdb-lig-env-help-navbar a {
width: 49%;
padding-bottom: 5px;
border: none;
......@@ -168,7 +168,7 @@
cursor: pointer;
}
.pdbe-int-help-navbar a.active {
.pdb-lig-env-help-navbar a.active {
border-bottom: 2px solid #637ca0;
color: #637ca0;
}
\ No newline at end of file
tsconfig.json
+ 1
− 1
View file @ f9c5c549
......@@ -10,7 +10,7 @@
"declaration": true,
"module": "none",
"moduleResolution": "node",
"out": "build/pdbe-interactions-plugin.js"
"out": "build/pdb-ligand-env-plugin.js"
},
"include": ["src/plugin/**/*", ],
"exclude": [
......
webpack.config.js
+ 19
− 38
View file @ f9c5c549
......@@ -4,26 +4,18 @@ const camelCase = require("camelcase");
const CleanWebpackPlugin = require("clean-webpack-plugin");
const PACKAGE_ROOT_PATH = process.cwd();
//const PKG_JSON = require(path.join(PACKAGE_ROOT_PATH, "package.json"));
const config = {
entry: ["./src/component/component.js"],
output: {
path: path.resolve(PACKAGE_ROOT_PATH, "build"),
filename: "pdbe-interactions-component-init.js"
filename: "pdb-ligand-env-component-init.js"
},
target: "web",
devtool: "source-map",
resolve: {
extensions: [".js"]
},
// externals: {
// d3: "d3",
// "protvista-track": "ProtvistaTrack",
// "protvista-sequence": "ProtvistaSequence",
// "resize-observer-polyfill": "ResizeObserver"
// },
// plugins: [new CleanWebpackPlugin([path.join(PACKAGE_ROOT_PATH, "dist")])],
module: {
rules: [
{
......@@ -39,39 +31,28 @@ const config = {
},
{
test: /\.(js)$/,
exclude: function excludeCondition(path){
const nonEs5SyntaxPackages = [
'lit-element',
'lit-html'
]
// DO transpile these packages
if (nonEs5SyntaxPackages.some( pkg => path.match(pkg))) {
return false;
}
// Ignore all other modules that are in node_modules
if (path.match(/node_modules\\/)) { return true; }
else return false;
},
exclude: function excludeCondition(path) {
const nonEs5SyntaxPackages = [
'lit-element',
'lit-html'
]
// DO transpile these packages
if (nonEs5SyntaxPackages.some(pkg => path.match(pkg))) {
return false;
}
// Ignore all other modules that are in node_modules
if (path.match(/node_modules\\/)) { return true; }
else return false;
},
use: {
loader: "babel-loader",
options: {
babelrc: false,
presets: [
// [
// "@babel/preset-env",
// {
// targets: {
// ie: 11,
// browsers: "last 2 versions"
// },
// modules: false
// }
// ]
],
presets: [],
plugins: [
[
"@babel/plugin-transform-runtime",
......
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