Commit a56e3878 authored by Nurul Nadzirin's avatar Nurul Nadzirin
Browse files
parents fdb6a976 b4cb36bf
......@@ -98,10 +98,10 @@
backgroundColour: '0xFFFFFF',
//customColorList: [0xff0000, 0x0000ff],
//representationStyle: representationStyle//,
// customData: {
// url: `https://wwwdev.ebi.ac.uk/pdbe/coordinates/${params.pdbid}/ligandInteraction?&authAsymId=${params.chain}&authSeqNumber=${params.resid}&radius=5&dataSource=hydrogens`,
// format: 'cif'
// }
customData: {
url: `https://wwwdev.ebi.ac.uk/pdbe/coordinates/${params.pdbid}/ligandInteraction?&authAsymId=${params.chain}&authSeqNumber=${params.resid}&radius=5&dataSource=hydrogens`,
format: 'cif'
}
}
var pdbeMolstar = new MolStarPdbeWrapper();
pdbeMolstar.render(document.getElementById('3dViewer'), initParams);
......@@ -118,7 +118,7 @@
<div style="position: relative; float: left;">
<div id='3dViewer' style="position:relative; width: 500px;height: 500px;"></div>
</div>
<div style="position: relative; float: left;">
<!-- <div style="position: relative; float: left;">
<div id="rt 1" style="width: 500px; height: 500px; position: relative">
<pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1" zoom-on></pdb-ligand-env>
</div>
......@@ -127,7 +127,7 @@
<div id="rt 1" style="width: 500px; height: 500px; position: relative">
<pdb-ligand-env pdb-id="2aw3" bound-molecule-id="bm1" zoom-on></pdb-ligand-env>
</div>
</div>
</div> -->
<!--
Further use in the app for bound molecule interactions:
......
......@@ -108,11 +108,17 @@ class Visualization {
this.fireExternalLinkEvent(x, Config.interactionClickEvent);
}
private linkMouseOverEventHandler(x: Model.Link) {
private linkMouseOverEventHandler(x: Model.Link, index: number, group: any) {
let parent = d3.select(group[index]).node().parentNode;
d3.select(parent).classed('pdb-lig-env-svg-bond-highlighted', true);
this.fireExternalLinkEvent(x, Config.interactionMouseoverEvent);
}
private linkMouseOutEventHandler() {
private linkMouseOutEventHandler(index: number, group: any) {
let parent = d3.select(group[index]).node().parentNode;
d3.select(parent).classed('pdb-lig-env-svg-bond-highlighted', false);
this.fireExternalLinkLeaveEvent();
}
......@@ -153,7 +159,7 @@ class Visualization {
let url = Resources.boundMoleculeAPI(pdbid, bmId);
d3.json(url)
.catch(e => this.processError(e, 'No interactions to display'))
.catch(e => this.processError(e, 'No interactions data are available'))
.then((data: any) => this.addBoundMoleculeInteractions(data, bmId))
.then(() => new Promise(resolve => setTimeout(resolve, 1500)))
.then(() => this.centerScene());
......@@ -176,7 +182,7 @@ class Visualization {
let url = Resources.ligandInteractionsAPI(pdbId, chainId, resId);
d3.json(url)
.catch(e => this.processError(e, 'No interactions to display'))
.catch(e => this.processError(e, 'No interactions data are available'))
.then((data: any) => this.addLigandInteractions(data))
.then(() => new Promise(resolve => setTimeout(resolve, 1500)))
.then(() => this.centerScene());
......@@ -535,15 +541,15 @@ class Visualization {
.append('line')
.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());
.on('mouseenter', (x: Model.Link, index: number, group: any) => this.linkMouseOverEventHandler(x, index, group))
.on('mouseleave', (_, index: number, group: any) => this.linkMouseOutEventHandler(index, group));
this.links
.append('line')
.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());
.on('mouseenter', (x: Model.Link, y: any, z: any) => this.linkMouseOverEventHandler(x, y, z))
.on('mouseleave', (_, index: number, group: any) => this.linkMouseOutEventHandler(index, group));
}
......
namespace Resources {
export const apiServer: string = 'https://wwwdev.ebi.ac.uk/pdbe/graph-api';
export const apiServer: string = 'https://www.ebi.ac.uk/pdbe/graph-api';
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';
......
......@@ -9,7 +9,7 @@ let helpLigands = `
<td>
<div class="pdb-lig-env-help-residue" style="background: #C048C0;"></div>
</td>
<td>negativelly charged</td>
<td>negatively charged</td>
</tr>
<tr>
<td>
......@@ -36,7 +36,7 @@ let helpLigands = `
<td>
<div class="pdb-lig-env-help-residue" style="background: #F01505;"></div>
</td>
<td>positivelly charged</td>
<td>positively charged</td>
<td>
<div class="pdb-lig-env-help-residue" style="background: #F2F2F2;"></div>
</td>
......@@ -98,19 +98,19 @@ let helpBonds = `
</td>
<td>vdw</td>
</tr>
</table>
<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;" />
</td>
<td>covalent</td>
<td>
<hr style="border: 0 none; border-top: 5px dashed black; background: none; height: 0;" />
</td>
<td>non-covalent</td>
</tr>
</table>`
// <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;" />
// </td>
// <td>covalent</td>
// <td>
// <hr style="border: 0 none; border-top: 5px dashed black; background: none; height: 0;" />
// </td>
// <td>non-covalent</td>
// </tr>
// </table>`
// #endregion help
......@@ -232,7 +232,7 @@ class UI {
if (params.reinitialize) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-home-btn')
.attr('title', 'Reset Camera')
.attr('title', 'Reinitialize')
.attr('class', 'icon icon-common icon-sync-alt')
.on('click', () => this.reinitialize());
}
......
......@@ -78,6 +78,10 @@
stroke: black;
}
.pdb-lig-env-svg-bond-highlighted line {
stroke-width: 10px !important;
}
.pdb-lig-env-svg-node circle {
stroke-width: 3px;
}
......
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