Commit 918c1b39 authored by Lukas Pravda's avatar Lukas Pravda
Browse files

changes in the web-component

parent 7fe27e56
Pipeline #151264 passed with stages
in 1 minute and 17 seconds
......@@ -14,7 +14,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="http://127.0.0.1:8080/pdb-ligand-env-component-0.3.0-min.js"></script>
<script type="module" src="http://127.0.0.1:8080/pdb-ligand-env-component-1.0.0-min.js"></script>
</head>
......@@ -37,7 +37,7 @@
<!--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>
<pdb-ligand-env pdb-res-name="CLR" zoom-on names-on></pdb-ligand-env>
</div>
</div>
......
......@@ -18,7 +18,7 @@
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"
charset="utf-8"></script>
<script type="module" src="pdb-ligand-env-component-0.3.0-min.js"></script>
<script type="module" src="pdb-ligand-env-component-1.0.0-min.js"></script>
<script>
var renderBmInteractions = function (id, bmId) {
var int =
......@@ -126,9 +126,9 @@
<!--
Further use in the app for bound molecule interactions:
<pdb-ligand-env pdb-id="3d12" bound-molecule-id="bm1"></pdb-ligand-env>
for ligand interactions:
<pdb-ligand-env pdb-id="3d12" pdb-chain-id="A" pdb-res-id="200"></pdb-ligand-env>
-->
......
This diff is collapsed.
{
"name": "pdb-ligand-env",
"version": "0.3.0",
"version": "1.0.0",
"description": "",
"main": "app.js",
"dependencies": {
......
......@@ -17,6 +17,7 @@ class pdbLigandEnv extends LitElement {
substructureHighlight: { type: Array, attribute: 'substructure' },
substructureColor: { type: String, attribute: 'color' },
zoomOn: { type: Boolean, attribute: 'zoom-on' },
namesOn: { type: Boolean, attribute: 'names-on' },
env: { type: String, attribute: 'environment' },
};
}
......@@ -32,9 +33,9 @@ class pdbLigandEnv extends LitElement {
uiParams.menu = this.pdbId !== undefined;
let env = this.env === undefined ? "production" : this.env;
let names = this.namesOn === undefined ? false : this.namesOn;
this.display = new Visualization(this, uiParams, env);
if (this.pdbId) {
if (this.entityId) {
this.display.initCarbohydratePolymerInteractions(this.pdbId, this.bmId, this.entityId);
......@@ -47,7 +48,7 @@ class pdbLigandEnv extends LitElement {
}
}
else if (this.resName) {
this.display.initLigandDisplay(this.resName).then(() => this.display.centerScene());
this.display.initLigandDisplay(this.resName, names).then(() => this.display.centerScene());
}
}
......@@ -84,7 +85,11 @@ class pdbLigandEnv extends LitElement {
}
set zoom(data) {
if (this.display !== undefined) this.display.toogleZoom(data);
if (this.display !== undefined) this.display.toggleZoom(data);
}
set atomNames(data) {
this.display.toggleDepiction(data);
}
//#endregion properties
......
......@@ -90,12 +90,12 @@ class Depiction {
return new Vector2D(x, y);
}
public draw(atom_names: boolean = false) {
public draw(atomNames: boolean = false) {
this.structure.selectAll("*").remove();
this.appendBondVisuals();
if (atom_names) this.appendAtomNames();
if (atomNames) this.appendAtomNames();
else this.appendLabels();
}
......
......@@ -41,8 +41,9 @@ class Visualization {
this.visualsMapper = new VisualsMapper(this.environment);
this.rProvider = ResidueProvider.getInstance(this.environment);
this.fullScreen = false;
this.bindingSites = new Array<Model.BindingSite>();
this.fullScreen = false;
this.nodeDragged = false;
if (uiParameters === undefined) uiParameters = new Config.UIParameters();
......@@ -126,7 +127,6 @@ class Visualization {
});
this.links?.attr('opacity', 1);
this.nodes?.attr('opacity', 1);
}
private linkMouseOverEventHandler(x: Model.Link, i: number, g: any) {
......@@ -244,13 +244,13 @@ class Visualization {
* @param {string} chainId chain id aka: auth_asym_id
* @memberof Visualization
*/
public initLigandInteractions(pdbId: string, resId: number, chainId: string) {
public initLigandInteractions(pdbId: string, resId: number, chainId: string, withNames: boolean = false) {
this.pdbId = pdbId;
let url = Resources.ligandInteractionsAPI(pdbId, chainId, resId, this.environment);
d3.json(url)
.catch(e => this.processError(e, 'No interactions data are available.'))
.then((data: any) => this.addLigandInteractions(data))
.then((data: any) => this.addLigandInteractions(data, withNames))
.then(() => new Promise(resolve => setTimeout(resolve, 1500)))
.then(() => this.centerScene());
}
......@@ -263,12 +263,12 @@ class Visualization {
* @returns
* @memberof Visualization
*/
public async initLigandDisplay(ligandId: string) {
public async initLigandDisplay(ligandId: string, withNames: boolean = false) {
const ligandUrl = Resources.ligandAnnotationAPI(ligandId, this.environment);
return d3.json(ligandUrl)
.catch(e => this.processError(e, `Component ${ligandId} was not found.`))
.then((d: any) => this.addDepiction(d))
.then((d: any) => this.addDepiction(d, withNames))
.then(() => this.centerScene());
}
......@@ -280,13 +280,26 @@ class Visualization {
* the PDBeChem process.
* @memberof Visualization
*/
public addDepiction(depiction: any) {
public addDepiction(depiction: any, withNames: boolean) {
this.depiction = new Depiction(this.depictionRoot, depiction);
this.depiction.draw();
this.depiction.draw(withNames);
}
public toggleDepiction(atomNames: boolean) {
this.depiction.draw(atomNames);
/**
* Show depiction with/without atom names
*
* @param {boolean} withNames Controls atom labels to be displayed
* @memberof Visualization
*/
public toggleDepiction(withNames: boolean) {
if (!this.depiction) return;
this.depiction.draw(withNames);
}
public toggleZoom(active: boolean) {
this.zoomHandler = active ? this.getZoomHandler() : undefined;
}
......@@ -314,11 +327,6 @@ class Visualization {
}
public toogleZoom(active: boolean) {
this.zoomHandler = active ? this.getZoomHandler() : undefined;
}
/**
* Add ligand interactions to the canvas
*
......@@ -326,13 +334,13 @@ class Visualization {
* /pdb/bound_ligand_interactions
* @memberof Visualization
*/
public addLigandInteractions(data: any) {
public addLigandInteractions(data: any, withNames: boolean = false) {
let key = Object.keys(data)[0];
let body = data[key][0];
this.interactionsData = data;
if (this.depiction === undefined || this.depiction.ccdId !== body.ligand.chem_comp_id) {
this.initLigandDisplay(body.ligand.chem_comp_id).then(() => {
this.initLigandDisplay(body.ligand.chem_comp_id, withNames).then(() => {
this.presentBindingSite = new Model.BindingSite().fromLigand(key, body, this.depiction);
this.bindingSites.push(this.presentBindingSite);
this.setupLigandScene();
......
......@@ -235,7 +235,7 @@ class UI {
.on('click', () => this.reinitialize());
}
if (p.reinitialize) {
if (p.names) {
dynamicPanel.append('i')
.attr('id', 'pdb-lig-env-names-btn')
.attr('title', 'Show/hide atom names')
......@@ -313,11 +313,11 @@ class UI {
let isActive = btn.classed('active');
if (isActive) {
this.display.toggleDepiction(true);
this.display.toggleDepiction(false);
btn.style('color', '#637ca0');
btn.classed('active', false);
} else {
this.display.toggleDepiction(false);
this.display.toggleDepiction(true);
btn.style('color', '');
btn.classed('active', true);
}
......
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