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

add interaction bond highlight

parent ec1eadea
Pipeline #85012 passed with stages
in 46 seconds
......@@ -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));
}
......
......@@ -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