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
acdc46b8
Commit
acdc46b8
authored
Sep 23, 2020
by
Lukas Pravda
Browse files
change the way highlight of selected nodes is made
parent
5cea7d9e
Pipeline
#99202
passed with stages
in 1 minute and 14 seconds
Changes
1
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
112 additions
and
82 deletions
+112
-82
src/plugin/manager.ts
src/plugin/manager.ts
+112
-82
No files found.
src/plugin/manager.ts
View file @
acdc46b8
...
...
@@ -27,6 +27,7 @@ class Visualization {
private
visualsMapper
:
VisualsMapper
;
private
interactionsData
:
any
;
private
selectedResidueHash
:
string
;
private
nodeDragged
:
boolean
;
private
rProvider
:
ResidueProvider
;
...
...
@@ -42,6 +43,7 @@ class Visualization {
this
.
rProvider
=
ResidueProvider
.
getInstance
(
this
.
environment
);
this
.
fullScreen
=
false
;
this
.
bindingSites
=
new
Array
<
Model
.
BindingSite
>
();
this
.
nodeDragged
=
false
;
if
(
uiParameters
===
undefined
)
uiParameters
=
new
Config
.
UIParameters
();
...
...
@@ -71,7 +73,7 @@ class Visualization {
this
.
addMarkers
();
}
// #region even handlers
// #region even
t
handlers
private
getZoomHandler
()
{
return
d3
.
zoom
()
.
scaleExtent
([
1
/
10
,
10
])
...
...
@@ -87,7 +89,7 @@ class Visualization {
this
.
nodes
?.
each
((
node
:
Model
.
InteractionNode
,
index
:
number
,
group
:
any
)
=>
{
this
.
nodeDim
(
node
,
index
,
group
);
if
(
node
.
id
===
hash
)
{
this
.
selectedResidueHash
=
hash
;
this
.
nodeHighlight
(
node
,
index
,
group
);
...
...
@@ -97,7 +99,6 @@ class Visualization {
}
private
nodeMouseLeaveEventHandler
()
{
if
(
this
.
fullScreen
)
return
;
...
...
@@ -109,22 +110,34 @@ class Visualization {
});
}
private
linkMouseClickEventHandler
(
x
:
Model
.
Link
)
{
this
.
fireExternalLinkEvent
(
x
,
Config
.
interactionClickEvent
);
private
linkMouseOverEventHandler
(
x
:
Model
.
Link
,
i
:
number
,
g
:
any
)
{
if
(
!
this
.
nodeDragged
)
{
this
.
linkHighlight
(
x
,
i
,
g
);
this
.
fireExternalLinkEvent
(
x
,
Config
.
interactionMouseoverEvent
);
}
}
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
);
private
linkMouseOutEventHandler
(
x
:
Model
.
Link
,
i
:
number
,
g
:
any
)
{
if
(
!
this
.
nodeDragged
)
{
this
.
linkDim
(
x
,
i
,
g
);
this
.
fireExternalNullEvent
(
Config
.
interactionMouseoutEvent
);
}
}
this
.
fireExternalLinkEvent
(
x
,
Config
.
interactionMouseoverEvent
);
//https://stackoverflow.com/questions/40722344/understanding-d3-with-an-example-mouseover-mouseup-with-multiple-arguments
private
nodeMouseoverEventHandler
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
{
if
(
!
this
.
nodeDragged
)
{
this
.
nodeHighlight
(
x
,
i
,
g
);
this
.
fireExternalNodeEvent
(
x
,
Config
.
interactionMouseoverEvent
);
}
}
private
link
Mouse
O
utEventHandler
(
index
:
number
,
g
roup
:
any
)
{
let
parent
=
d3
.
select
(
group
[
index
]).
node
().
parentNode
;
d3
.
select
(
parent
).
classed
(
'
pdb-lig-env-svg-bond-highlighted
'
,
false
);
private
node
Mouse
o
utEventHandler
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
{
if
(
!
this
.
nodeDragged
)
{
this
.
nodeDim
(
x
,
i
,
g
);
this
.
fireExternalLinkLeaveEvent
();
this
.
fireExternalNullEvent
(
Config
.
interactionMouseoutEvent
);
}
}
private
dragHandler
=
d3
.
drag
()
...
...
@@ -136,10 +149,14 @@ class Visualization {
x
.
fy
=
x
.
y
;
})
.
on
(
'
drag
'
,
(
x
:
Model
.
InteractionNode
)
=>
{
this
.
nodeDragged
=
true
;
x
.
fx
=
d3
.
event
.
x
;
x
.
fy
=
d3
.
event
.
y
;
})
.
on
(
'
end
'
,
(
x
:
Model
.
InteractionNode
)
=>
{
this
.
nodeDragged
=
false
;
if
(
!
d3
.
event
.
active
)
this
.
simulation
.
alphaTarget
(
0
);
x
.
fx
=
d3
.
event
.
x
;
x
.
fy
=
d3
.
event
.
y
;
...
...
@@ -377,18 +394,18 @@ class Visualization {
* @memberof Visualization
*/
public
reinitialize
()
{
if
(
this
.
bindingSites
.
length
>
1
&&
this
.
depiction
!==
undefined
)
{
this
.
presentBindingSite
=
this
.
bindingSites
[
0
];
this
.
bindingSites
.
pop
();
this
.
depictionRoot
.
selectAll
(
'
*
'
).
remove
();
this
.
depiction
=
undefined
;
this
.
nullNodesPositions
();
this
.
setupScene
().
then
(()
=>
this
.
centerScene
());
}
else
if
(
this
.
depiction
===
undefined
)
{
else
if
(
this
.
depiction
===
undefined
)
{
this
.
nullNodesPositions
();
this
.
setupScene
().
then
(()
=>
this
.
centerScene
());
}
...
...
@@ -397,7 +414,7 @@ class Visualization {
this
.
setupLigandScene
().
then
(()
=>
this
.
centerScene
());
}
this
.
hideLigandLabel
(
);
this
.
fireExternalNullEvent
(
Config
.
interactionHideLabelEvent
);
}
...
...
@@ -486,7 +503,7 @@ class Visualization {
return
'
blank.svg
'
;
}
private
nullNodesPositions
()
{
private
nullNodesPositions
()
{
this
.
presentBindingSite
.
interactionNodes
.
forEach
((
x
:
Model
.
InteractionNode
)
=>
{
if
(
!
x
.
static
)
{
x
.
fx
=
null
;
...
...
@@ -498,22 +515,6 @@ class Visualization {
// #region fire events
//https://stackoverflow.com/questions/40722344/understanding-d3-with-an-example-mouseover-mouseup-with-multiple-arguments
private
fireExternalNodeMouseEnterEvent
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
{
this
.
nodeHighlight
(
x
,
i
,
g
);
this
.
fireExternalNodeEvent
(
x
,
Config
.
interactionMouseoverEvent
);
}
private
fireExternalNodeMouseLeaveEvent
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
{
this
.
nodeDim
(
x
,
i
,
g
);
const
e
=
new
CustomEvent
(
Config
.
interactionMouseoutEvent
,
{
bubbles
:
true
,
detail
:
{}
});
this
.
parent
.
dispatchEvent
(
e
);
}
private
fireExternalLinkEvent
(
link
:
Model
.
Link
,
eventName
:
string
)
{
let
atomsSource
=
[];
let
atomsTarget
=
[];
...
...
@@ -568,8 +569,8 @@ class Visualization {
this
.
parent
.
dispatchEvent
(
e
);
}
private
fireExternal
LinkLeaveEvent
(
)
{
const
e
=
new
CustomEvent
(
Config
.
interactionMouseoutEvent
,
{
private
fireExternal
NullEvent
(
eventName
:
string
)
{
const
e
=
new
CustomEvent
(
eventName
,
{
bubbles
:
true
,
detail
:
{}
});
...
...
@@ -595,16 +596,15 @@ class Visualization {
this
.
links
.
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
,
index
:
number
,
group
:
any
)
=>
this
.
linkMouseOverEventHandler
(
x
,
index
,
group
))
.
on
(
'
mouseleave
'
,
(
_
,
index
:
number
,
group
:
any
)
=>
this
.
linkMouseOutEventHandler
(
index
,
group
));
.
on
(
'
mouseleave
'
,
(
x
:
Model
.
Link
,
index
:
number
,
group
:
any
)
=>
this
.
linkMouseOutEventHandler
(
x
,
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
,
y
:
any
,
z
:
any
)
=>
this
.
linkMouseOverEventHandler
(
x
,
y
,
z
))
.
on
(
'
mouseleave
'
,
(
_
,
index
:
number
,
group
:
any
)
=>
this
.
linkMouseOutEventHandler
(
index
,
group
));
.
on
(
'
mouseleave
'
,
(
x
:
Model
.
Link
,
index
:
number
,
group
:
any
)
=>
this
.
linkMouseOutEventHandler
(
x
,
index
,
group
));
}
...
...
@@ -616,7 +616,7 @@ class Visualization {
.
style
(
'
dominant-baseline
'
,
'
central
'
)
.
each
(
function
(
e
:
Model
.
InteractionNode
)
{
let
labels
=
[
e
.
residue
.
chemCompId
,
`
${
e
.
residue
.
chainId
}
${
e
.
residue
.
authorResidueNumber
}
`
];
for
(
var
i
=
0
;
i
<
labels
.
length
;
i
++
)
{
for
(
let
i
=
0
;
i
<
labels
.
length
;
i
++
)
{
d3
.
select
(
this
)
.
append
(
'
tspan
'
)
.
attr
(
'
dy
'
,
(
i
*
20
)
-
4
)
...
...
@@ -643,7 +643,7 @@ class Visualization {
if
(
!
n
.
residue
.
isLigand
)
return
;
this
.
nodeDim
(
n
,
i
,
g
);
this
.
fireExternalNodeMouseLeaveEvent
(
n
,
i
,
g
);
this
.
nodeMouseoutEventHandler
(
n
,
i
,
g
);
this
.
showLigandLabel
(
n
);
this
.
initLigandInteractions
(
this
.
pdbId
,
n
.
residue
.
authorResidueNumber
,
n
.
residue
.
chainId
);
...
...
@@ -714,10 +714,9 @@ 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
)
=>
`pdb-lig-env-svg-node pdb-lig-env-svg-
${
x
.
residue
.
getResidueType
()}
-res`
)
.
on
(
'
mouseenter
'
,
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
=>
this
.
fireExternalN
odeMouse
Ent
erEvent
(
x
,
i
,
g
))
.
on
(
'
mouseleave
'
,
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
=>
this
.
fireExternalNodeMouseLeaveEvent
(
x
,
i
,
g
));
.
on
(
'
mouseenter
'
,
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
=>
this
.
n
odeMouse
ov
erEvent
Handler
(
x
,
i
,
g
))
.
on
(
'
mouseleave
'
,
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
=>
this
.
nodeMouseoutEventHandler
(
x
,
i
,
g
));
this
.
nodes
.
filter
((
x
:
Model
.
InteractionNode
)
=>
!
x
.
residue
.
isLigand
&&
this
.
visualsMapper
.
glycanMapping
.
has
(
x
.
residue
.
chemCompId
))
.
html
((
e
:
Model
.
InteractionNode
)
=>
this
.
visualsMapper
.
getGlycanImage
(
e
.
residue
.
chemCompId
));
...
...
@@ -761,7 +760,7 @@ class Visualization {
this
.
setupLinks
();
// setup nodes; wait for resources to be ready
this
.
presentBindingSite
.
interactionNodes
.
forEach
(
x
=>
Residue
Provider
.
getInstance
(
this
.
environment
).
downloadAnnotation
(
x
.
residue
));
this
.
presentBindingSite
.
interactionNodes
.
forEach
(
x
=>
this
.
r
Provider
.
downloadAnnotation
(
x
.
residue
));
await
Promise
.
all
(
this
.
rProvider
.
downloadPromises
);
await
Promise
.
all
([
this
.
visualsMapper
.
graphicsPromise
,
this
.
visualsMapper
.
mappingPromise
]);
...
...
@@ -771,8 +770,8 @@ class Visualization {
.
enter
().
append
(
'
g
'
)
.
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
.
fireExternalN
odeMouse
Ent
erEvent
(
x
,
i
,
g
))
.
on
(
'
mouseout
'
,
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
=>
this
.
fireExternalNodeMouseLeaveEvent
(
x
,
i
,
g
));
.
on
(
'
mouseover
'
,
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
=>
this
.
n
odeMouse
ov
erEvent
Handler
(
x
,
i
,
g
))
.
on
(
'
mouseout
'
,
(
x
:
Model
.
InteractionNode
,
i
:
number
,
g
:
any
)
=>
this
.
nodeMouseoutEventHandler
(
x
,
i
,
g
));
this
.
nodes
.
filter
((
n
:
Model
.
InteractionNode
)
=>
...
...
@@ -827,8 +826,25 @@ class Visualization {
x
.
scale
=
1.5
;
if
(
x
.
residue
.
isLigand
)
d3
.
select
(
g
[
i
]).
style
(
'
cursor
'
,
'
pointer
'
);
d3
.
select
(
g
[
i
])
//.transition()
.
attr
(
'
transform
'
,
()
=>
`translate(
${
x
.
x
}
,
${
x
.
y
}
) scale(
${
x
.
scale
}
)`
);
let
otherNodes
=
[
x
];
this
.
links
.
filter
((
l
:
Model
.
Link
)
=>
l
.
containsNode
(
x
)).
each
((
lnk
:
Model
.
Link
)
=>
{
let
otherNode
=
lnk
.
getOtherNode
(
x
);
otherNodes
.
push
(
otherNode
);
});
this
.
nodes
.
filter
((
node
:
Model
.
InteractionNode
)
=>
!
otherNodes
.
includes
(
node
))
.
attr
(
'
opacity
'
,
0.4
);
this
.
links
.
filter
((
l
:
Model
.
Link
)
=>
!
l
.
containsNode
(
x
))
//.transition()
.
attr
(
'
opacity
'
,
0.4
);
}
...
...
@@ -836,12 +852,57 @@ class Visualization {
x
.
scale
=
1.0
;
if
(
x
.
residue
.
isLigand
)
d3
.
select
(
g
[
i
]).
style
(
'
cursor
'
,
'
default
'
);
d3
.
select
(
g
[
i
])
//.transition()
.
attr
(
'
transform
'
,
`translate(
${
x
.
x
}
,
${
x
.
y
}
) scale(
${
x
.
scale
}
)`
);
this
.
links
.
attr
(
'
opacity
'
,
1
);
this
.
nodes
.
attr
(
'
opacity
'
,
1
);
// g.forEach((_, index) => {
// if (i != index) {
// d3.select(g[index])//.transition()
// .attr('opacity', 1);
// }
// });
// this.links
// .filter((l: Model.Link) => !l.containsNode(x))
// //.transition()
// .attr('opacity', 1);
}
private
linkHighlight
(
x
:
Model
.
Link
,
i
:
number
,
g
:
any
)
{
let
parent
=
d3
.
select
(
g
[
i
]).
node
().
parentNode
;
d3
.
select
(
parent
).
classed
(
'
pdb-lig-env-svg-bond-highlighted
'
,
true
);
this
.
links
.
filter
((
l
:
Model
.
Link
)
=>
l
!==
x
)
//.transition()
.
attr
(
'
opacity
'
,
0.4
);
this
.
nodes
.
filter
((
l
:
Model
.
InteractionNode
)
=>
!
(
l
===
x
.
source
||
l
===
x
.
target
))
//.transition()
.
attr
(
'
opacity
'
,
0.4
);
}
private
linkDim
(
x
:
Model
.
Link
,
i
:
number
,
g
:
any
)
{
let
parent
=
d3
.
select
(
g
[
i
]).
node
().
parentNode
;
d3
.
select
(
parent
).
classed
(
'
pdb-lig-env-svg-bond-highlighted
'
,
false
);
this
.
links
.
filter
((
l
:
Model
.
Link
)
=>
l
!==
x
)
//.transition()
.
attr
(
'
opacity
'
,
1
);
this
.
nodes
.
filter
((
l
:
Model
.
InteractionNode
)
=>
!
(
l
===
x
.
source
||
l
===
x
.
target
))
//.transition()
.
attr
(
'
opacity
'
,
1
);
}
private
showLigandLabel
(
x
:
Model
.
InteractionNode
)
{
const
e
=
new
CustomEvent
(
Config
.
interactionShowLabelEvent
,
{
bubbles
:
true
,
...
...
@@ -853,34 +914,18 @@ class Visualization {
this
.
parent
.
dispatchEvent
(
e
);
}
private
hideLigandLabel
()
{
const
e
=
new
CustomEvent
(
Config
.
interactionHideLabelEvent
,
{
bubbles
:
true
,
detail
:
{}
});
this
.
parent
.
dispatchEvent
(
e
);
}
private
addMarkers
()
{
// let mapping = new Map<string, string>([
// // ["arrow-electrostatic", "#3F26BF"],
// // ["arrow-vdw", "#9B7653"],
// // ["arrow-metal", "#008080"],
// // ["arrow-aromatic", "#AD4379"],
let
defs
=
this
.
svg
.
append
(
'
defs
'
)
// proper background for depiction tspans
// gracefully cop
p
ied from: https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg
// gracefully copied from: https://stackoverflow.com/questions/15500894/background-color-of-text-in-svg
let
filter
=
defs
.
append
(
'
filter
'
)
.
attr
(
'
x
'
,
0
)
.
attr
(
'
y
'
,
0
)
.
attr
(
'
width
'
,
1
)
.
attr
(
'
height
'
,
1
)
.
attr
(
'
id
'
,
'
solid-background
'
)
filter
.
append
(
'
feFlood
'
).
attr
(
'
flood-color
'
,
'
white
'
)
filter
.
append
(
'
feComposite
'
).
attr
(
'
in
'
,
'
SourceGraphic
'
)
...
...
@@ -897,21 +942,6 @@ class Visualization {
.
append
(
'
path
'
)
.
attr
(
'
d
'
,
'
M22.245,4.015c0.313,0.313,0.313,0.826,0,1.139l-6.276,6.27c-0.313,0.312-0.313,0.826,0,1.14l6.273,6.272 c0.313,0.313,0.313,0.826,0,1.14l-2.285,2.277c-0.314,0.312-0.828,0.312-1.142,0l-6.271-6.271c-0.313-0.313-0.828-0.313-1.141,0 l-6.276,6.267c-0.313,0.313-0.828,0.313-1.141,0l-2.282-2.28c-0.313-0.313-0.313-0.826,0-1.14l6.278-6.269 c0.313-0.312,0.313-0.826,0-1.14L1.709,5.147c-0.314-0.313-0.314-0.827,0-1.14l2.284-2.278C4.308,1.417,4.821,1.417,5.135,1.73 L11.405,8c0.314,0.314,0.828,0.314,1.141,0.001l6.276-6.267c0.312-0.312,0.826-0.312,1.141,0L22.245,4.015z
'
)
.
attr
(
'
style
'
,
'
stroke:#FF5050;stroke-width:3px;
'
);
// mapping.forEach((x, y) =>
// d3.select('defs').append('marker')
// .attr('id', y)
// .attr("markerWidth", 15)
// .attr("markerHeight", 15)
// .attr("refX", 7)
// .attr("refY", 3)
// .attr("orient", "auto")
// .attr('markerUnits', 'strokeWidth')
// .attr('viewBox', '0 0 20 20')
// .append('path')
// .attr('d', 'M0,0 L0,6 L9,3 z')
// .attr('fill', x)
// );
}
private
parseEnvironment
(
env
:
string
):
Model
.
Environment
{
...
...
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