Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
pdbe
web-components
pdb-ligand-env
Commits
3cc4c357
Commit
3cc4c357
authored
Mar 23, 2021
by
Lukas Pravda
Browse files
allow atom names to be displayed
parent
d323cd99
Changes
4
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
79 additions
and
31 deletions
+79
-31
src/plugin/config.ts
src/plugin/config.ts
+2
-0
src/plugin/depiction.ts
src/plugin/depiction.ts
+35
-16
src/plugin/manager.ts
src/plugin/manager.ts
+18
-15
src/plugin/ui.ts
src/plugin/ui.ts
+24
-0
No files found.
src/plugin/config.ts
View file @
3cc4c357
...
...
@@ -70,6 +70,7 @@ namespace Config {
residueLabel
:
boolean
;
tooltip
:
boolean
;
menu
:
boolean
;
names
:
boolean
;
constructor
()
{
this
.
reinitialize
=
true
;
...
...
@@ -82,6 +83,7 @@ namespace Config {
this
.
residueLabel
=
true
;
this
.
tooltip
=
true
;
this
.
menu
=
true
;
this
.
names
=
true
;
}
}
}
\ No newline at end of file
src/plugin/depiction.ts
View file @
3cc4c357
...
...
@@ -8,10 +8,10 @@
* @class Depiction
* @param {string} ccdId PDB CCD id.
* @param {Atom[]} atoms List of atoms.
* @param {Bond[]} bonds Visual representation of bonds.
* @param {Bond[]} bonds Visual representation of bonds.
* They do not correlate 1:1 with a number of bonds!
* @param {Vector2D} resolution x,y dimension of the image. Needs to be used
* for a scene shift, so it is centered.
* for a scene shift, so it is centered.
*/
class
Depiction
{
ccdId
:
string
;
...
...
@@ -39,7 +39,7 @@ class Depiction {
this
.
bonds
=
new
Array
<
Bond
>
();
let
bds
=
new
Set
<
string
>
();
data
.
bonds
.
forEach
(
x
=>
{
let
atomA
=
this
.
atoms
.
find
(
e
=>
e
.
name
==
x
.
bgn
);
let
atomB
=
this
.
atoms
.
find
(
e
=>
e
.
name
==
x
.
end
);
...
...
@@ -58,14 +58,14 @@ class Depiction {
/**
* Returns an initial position of Residue node bound to a list of
* Returns an initial position of Residue node bound to a list of
* atom.
*
*
* Present implementation sorts all the partners based on the atom
* degree and then gets the one with the lovest degree and places
* degree and then gets the one with the lovest degree and places
* the initial residue position along the vector pointing from it.
*
* @param {string[]} atomNames list of atom names the bound residue
* @param {string[]} atomNames list of atom names the bound residue
* has a contact with.
* @returns {Vector2D} Returns an initial placement of the residue in contact.
* @memberof Depiction
...
...
@@ -90,11 +90,13 @@ class Depiction {
return
new
Vector2D
(
x
,
y
);
}
public
draw
()
{
public
draw
(
atom_names
:
boolean
=
false
)
{
this
.
structure
.
selectAll
(
"
*
"
).
remove
();
this
.
appendBondVisuals
();
this
.
appendTexts
();
if
(
atom_names
)
this
.
appendAtomNames
();
else
this
.
appendLabels
();
}
public
highlightSubgraph
(
atoms
:
Array
<
string
>
,
color
:
string
=
undefined
)
{
...
...
@@ -145,17 +147,35 @@ class Depiction {
.
attr
(
'
d
'
,
(
y
:
Bond
)
=>
y
.
coords
);
}
/**
* Append atom name labels to the visualization.
*
* @memberof Depiction
*/
private
appendAtomNames
()
{
this
.
structure
.
selectAll
()
.
data
(
this
.
atoms
)
.
enter
()
.
append
(
'
text
'
)
.
attr
(
'
filter
'
,
"
url(#solid-background)
"
)
.
attr
(
'
style
'
,
'
font-size:21px;font-style:normal;font-weight:normal;fill-opacity:1;stroke:none;font-family:sans-serif;fill:#000000
'
)
.
attr
(
'
x
'
,
x
=>
x
.
position
.
x
)
.
attr
(
'
y
'
,
x
=>
x
.
position
.
y
)
.
attr
(
'
dominant-baseline
'
,
'
central
'
)
.
attr
(
'
text-anchor
'
,
'
middle
'
)
.
text
(
x
=>
x
.
name
);
}
/**
* Append depiction labels to the visualization. Because RDKIt places
* the labels slightly differently this information needs to be
* consumed too, because we cannot use just atom position directly.
* Also there are all sorts of colorful subscripts and superscripts,
* Also there are all sorts of colorful subscripts and superscripts,
* so it is much easier to use it this way.
*
* @memberof Depiction
*/
private
appendTexts
():
void
{
private
appendLabels
()
{
let
data
=
this
.
atoms
.
filter
(
x
=>
x
.
labels
.
length
>
0
)
?.
map
(
x
=>
x
.
labels
)
...
...
@@ -172,7 +192,6 @@ class Depiction {
.
attr
(
'
dominant-baseline
'
,
(
x
:
any
)
=>
x
[
'
dominant-baseline
'
])
.
attr
(
'
text-anchor
'
,
(
x
:
any
)
=>
x
[
'
text-anchor
'
])
.
each
(
function
(
x
:
any
)
{
for
(
var
i
=
0
;
i
<
x
.
tspans
.
length
;
i
++
)
{
d3
.
select
(
this
)
.
append
(
'
tspan
'
)
...
...
@@ -243,7 +262,7 @@ class Atom {
}
/**
*
*
*
* @param {Atom} other
* @returns true if the atoms are equal
...
...
@@ -310,7 +329,7 @@ class Vector2D {
/**
* Composes vectors to a single one. This is used in infering the
* Composes vectors to a single one. This is used in infering the
* original placement of the residue nodes.
*
* @static
...
...
@@ -359,7 +378,7 @@ class Bond {
/**
* Get the other atom for a given bond.
*
* @param {Atom} other
* @param {Atom} other
* @returns {Atom} The other atom from the bond.
* @throws {Error} if the atom is not part of that bond at all.
* @memberof Bond
...
...
src/plugin/manager.ts
View file @
3cc4c357
...
...
@@ -17,7 +17,7 @@ class Visualization {
private
links
:
any
;
// #endregion
// #region data properties
// #region data properties
private
environment
:
Model
.
Environment
;
private
pdbId
:
string
;
private
bindingSites
:
Model
.
BindingSite
[];
...
...
@@ -190,7 +190,7 @@ class Visualization {
/**
* Download bound molecule interactions data from PDBe Graph API end point
* /pdb/bound_molecule_interactions
*
*
* Correct parameters can be obtained using API call:
* /pdb/bound_molecules
*
...
...
@@ -212,7 +212,7 @@ class Visualization {
/**
* Download carbohydrate interactions data from PDBe Graph API end point
* /pdb/carbohydrate_polymer_interactions
*
*
* Correct parameters can be obtained using API call:
* /pdb/bound_molecules
*
...
...
@@ -235,10 +235,10 @@ class Visualization {
/**
* Download ligand interactions data from PDBe Graph API end point
* /pdb/bound_ligand_interactions.
*
*
* Correct parameters can be obtained using API call:
* /pdb/bound_molecules
*
*
* @param {string} pdbId pdb id
* @param {number} resId residue number aka: auth_seq_id
* @param {string} chainId chain id aka: auth_asym_id
...
...
@@ -256,7 +256,7 @@ class Visualization {
}
/**
* Download ligand structure given the anotation generated by the
* Download ligand structure given the anotation generated by the
* PDBeChem process.
*
* @param {string} ligandId
...
...
@@ -285,6 +285,10 @@ class Visualization {
this
.
depiction
.
draw
();
}
public
toggleDepiction
(
atomNames
:
boolean
)
{
this
.
depiction
.
draw
(
atomNames
);
}
/**
* Add atom highlight to the ligand structure. The previous highlight
...
...
@@ -318,7 +322,7 @@ class Visualization {
/**
* Add ligand interactions to the canvas
*
* @param {*} data Data content of the API end point
* @param {*} data Data content of the API end point
* /pdb/bound_ligand_interactions
* @memberof Visualization
*/
...
...
@@ -344,7 +348,7 @@ class Visualization {
/**
* Add bound molecule interactions to the canvas.
*
* @param {*} data Data content of the API end point
* @param {*} data Data content of the API end point
* /pdb/bound_molecule_interactions
* @param {string} bmId Bound molecule id
* @memberof Visualization
...
...
@@ -472,8 +476,8 @@ class Visualization {
private
computeBoundingBox
(
minX
:
number
,
maxX
:
number
,
minY
:
number
,
maxY
:
number
)
{
// The width and the height of the graph
let
molWidth
=
(
maxX
-
minX
)
+
1
;
// +1 to avoid 0 division
let
molHeight
=
(
maxY
-
minY
)
+
1
;
let
molWidth
=
Math
.
max
(
(
maxX
-
minX
)
,
this
.
parent
.
offsetWidth
);
let
molHeight
=
Math
.
max
(
(
maxY
-
minY
)
,
this
.
parent
.
offsetHeight
)
;
// how much larger the drawing area is than the width and the height
let
widthRatio
=
this
.
parent
.
offsetWidth
/
molWidth
;
...
...
@@ -495,8 +499,7 @@ class Visualization {
this
.
canvas
.
attr
(
'
transform
'
,
`translate(
${
xTrans
}
,
${
yTrans
}
) scale(
${
minRatio
}
)`
);
// tell the zoomer what we did so that next we zoom, it uses the
// transformation we entered here
// transformation we entered here
let
translation
=
d3
.
zoomIdentity
.
translate
(
xTrans
,
yTrans
).
scale
(
minRatio
);
this
.
zoomHandler
?.
transform
(
this
.
svg
,
translation
);
}
...
...
@@ -761,7 +764,7 @@ class Visualization {
this
.
simulation
=
d3
.
forceSimulation
(
this
.
presentBindingSite
.
interactionNodes
)
.
force
(
'
link
'
,
forceLink
)
.
force
(
'
charge
'
,
charge
)
//strength
.
force
(
'
charge
'
,
charge
)
//strength
.
force
(
'
collision
'
,
collision
)
.
on
(
'
tick
'
,
()
=>
this
.
simulationStep
());
...
...
@@ -771,7 +774,7 @@ class Visualization {
/**
* Setup display of interactions for bound molecule.
* Setup display of interactions for bound molecule.
* * This includes: setup of links, nodes, simulation and subscribing to relevant events.
* No depiction is required for this step.
*
...
...
@@ -818,7 +821,7 @@ class Visualization {
this
.
simulation
=
d3
.
forceSimulation
(
this
.
presentBindingSite
.
interactionNodes
)
.
force
(
'
link
'
,
forceLink
)
.
force
(
'
charge
'
,
charge
)
//strength
.
force
(
'
charge
'
,
charge
)
//strength
.
force
(
'
collision
'
,
collision
)
.
force
(
'
center
'
,
center
)
.
on
(
'
tick
'
,
()
=>
this
.
simulationStep
());
...
...
src/plugin/ui.ts
View file @
3cc4c357
...
...
@@ -234,6 +234,15 @@ class UI {
.
attr
(
'
class
'
,
'
icon icon-common icon-sync-alt
'
)
.
on
(
'
click
'
,
()
=>
this
.
reinitialize
());
}
if
(
p
.
reinitialize
)
{
dynamicPanel
.
append
(
'
i
'
)
.
attr
(
'
id
'
,
'
pdb-lig-env-names-btn
'
)
.
attr
(
'
title
'
,
'
Show/hide atom names
'
)
.
attr
(
'
class
'
,
'
icon icon-common icon-font
'
)
.
classed
(
'
active
'
,
false
)
.
on
(
'
click
'
,
()
=>
this
.
showNames
());
}
}
if
(
p
.
tooltip
)
{
...
...
@@ -299,6 +308,21 @@ class UI {
}
}
private
showNames
()
{
let
btn
=
d3
.
select
(
this
.
parent
).
select
(
'
#pdb-lig-env-names-btn
'
);
let
isActive
=
btn
.
classed
(
'
active
'
);
if
(
isActive
)
{
this
.
display
.
toggleDepiction
(
true
);
btn
.
style
(
'
color
'
,
'
#637ca0
'
);
btn
.
classed
(
'
active
'
,
false
);
}
else
{
this
.
display
.
toggleDepiction
(
false
);
btn
.
style
(
'
color
'
,
''
);
btn
.
classed
(
'
active
'
,
true
);
}
}
private
showHelp
()
{
let
el
=
d3
.
select
(
this
.
parent
).
select
(
'
#pdb-lig-env-help-container
'
);
let
btn
=
d3
.
select
(
this
.
parent
).
select
(
'
#pdb-lig-env-help-btn
'
);
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment