Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
iPPIDB
ippidb-web
Commits
439736f5
Commit
439736f5
authored
Sep 17, 2019
by
Hervé MENAGER
Browse files
create a first draft of the global stats pages (/about-*)
WIP on #107
parent
7fa36fb5
Pipeline
#14636
canceled with stages
in 2 minutes and 2 seconds
Changes
11
Pipelines
1
Hide whitespace changes
Inline
Side-by-side
ippisite/ippidb/templates/about-general.html
0 → 100644
View file @
439736f5
{% extends "about.html" %}
{% block title %}inhibitors of Protein-Protein Interaction Database{% endblock %}
{% block pagetitle %}GENERAL INFORMATION{% endblock%}
{% block view_content %}
<ul>
<li>
Number of compounds: {{ compounds_count }}
</li>
<li>
Total number of binding data: {{ car_count }}
</li>
<li>
Total number of biochemical binding data: {{ bioch_car_count }}
</li>
<li>
Total number of cellular binding data: {{ cell_car_count }}
</li>
<li>
Number of proteins: {{ proteins_count }}
</li>
<li>
Number of families: {{ families_count }}
</li>
<li>
Number of PPI targets: {{ ppis_count }}
</li>
<li>
Number of bibliographic sources: {{ biblio_count }}
</li>
</ul>
{% endblock %}
ippisite/ippidb/templates/about-pharmacology.html
0 → 100644
View file @
439736f5
{% extends "about.html" %}
{% block title %}inhibitors of Protein-Protein Interaction Database{% endblock %}
{% block pagetitle %}PHARMACOLOGY{% endblock%}
{% block view_content %}
<div
class=
"row"
>
<div
class=
"card col-sm-12 col-md-6"
>
<canvas
id=
"pxc_by_test_type"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-6"
>
<canvas
id=
"bioch_tests_histo"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-6"
>
<canvas
id=
"data_per_ppi_family"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-6"
>
<canvas
id=
"cell_tests_histo"
style=
"width:300px; height:200px;"
></canvas>
</div>
</div>
<div
class=
"row"
>
<div
class=
"card col-md-12"
>
<canvas
id=
"le_lle_biplot"
style=
"width:300px; height:200px;"
></canvas>
</div>
</div>
<script>
var
biochTestData
=
{
labels
:
{{
biochemical_tests_count_by_name
.
labels
|
safe
}},
datasets
:
[{
label
:
'
Number of activity test results
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
biochemical_tests_count_by_name
.
values
}}
}]
};
drawBarChart
(
'
bioch_tests_histo
'
,
biochTestData
,
'
Biochemical Tests
'
,
'
biochtest
'
);
var
cellTestData
=
{
labels
:
{{
cellular_tests_count_by_name
.
labels
|
safe
}},
datasets
:
[{
label
:
'
Number of activity test results
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
cellular_tests_count_by_name
.
values
}}
}]
};
drawBarChart
(
'
cell_tests_histo
'
,
cellTestData
,
'
Cellular Tests
'
,
'
celltest
'
);
var
bindingDataPerPPIFamily
=
{
labels
:
{{
compounds_per_ppi_family
.
labels
|
safe
}},
datasets
:
[
{
label
:
'
Number of binding data
'
,
backgroundColor
:
"
rgba(46,87,139,0.6)
"
,
borderColor
:
"
rgba(46,87,139,1)
"
,
borderWidth
:
1
,
data
:
{{
binding_data_per_ppi_family
.
values
}}
},
{
label
:
'
Number of unique compounds
'
,
backgroundColor
:
"
rgba(185,45,92,1)
"
,
borderColor
:
"
rgba(185,45,92,0.6)
"
,
borderWidth
:
1
,
data
:
{{
compounds_per_ppi_family
.
values
}}
},
]
};
drawBarChart
(
'
data_per_ppi_family
'
,
bindingDataPerPPIFamily
,
'
Compounds and binding data available in iPPI-DB per PPI target
'
);
var
bindingDataPerPXC50Bins
=
{
labels
:
[
'
Biochemical
'
,
'
Cellular
'
],
datasets
:
[
{
label
:
'
pXC50>=8
'
,
backgroundColor
:
"
rgba(46,87,139,1)
"
,
borderColor
:
"
rgba(46,87,139,1)
"
,
borderWidth
:
1
,
data
:
[{{
cell_tests_pxc50_gte8
}},{{
bioch_tests_pxc50_gte8
}}],
},
{
label
:
'
8>pXC50>=7
'
,
backgroundColor
:
"
rgba(185,45,92,1)
"
,
borderColor
:
"
rgba(185,45,92,1)
"
,
borderWidth
:
1
,
data
:
[{{
cell_tests_pxc50_gte7_lt8
}},{{
bioch_tests_pxc50_gte7_lt8
}}],
},
{
label
:
'
7>pXC50>=6
'
,
backgroundColor
:
"
rgba(209,224,253,1)
"
,
borderColor
:
"
rgba(209,224,253,1)
"
,
borderWidth
:
1
,
data
:
[{{
cell_tests_pxc50_gte6_lt7
}},{{
bioch_tests_pxc50_gte6_lt7
}}],
},
{
label
:
'
6>pXC50
'
,
backgroundColor
:
"
rgba(242,202,255,1)
"
,
borderColor
:
"
rgba(242,202,255,1)
"
,
borderWidth
:
1
,
data
:
[{{
cell_tests_pxc50_lt6
}},{{
bioch_tests_pxc50_lt6
}}],
}
]
};
drawHorizontalStackedBarChart
(
'
pxc_by_test_type
'
,
bindingDataPerPXC50Bins
,
'
Distribution of the binding data across bins of activity in pXC50 units
'
);
drawCompoundsBiplotChart
(
'
le_lle_biplot
'
,
preparePerFamilyBiplotData
({{
le_lle_biplot_data
|
safe
}}),
'
pharmacology
'
);
</script>
{% endblock %}
ippisite/ippidb/templates/about-physicochemistry.html
0 → 100644
View file @
439736f5
{% extends "about.html" %}
{% block title %}inhibitors of Protein-Protein Interaction Database{% endblock %}
{% block pagetitle %}PHYSICOCHEMISTRY{% endblock%}
{% block view_content %}
<div
class=
"row"
>
<div
class=
"card col-sm-12 col-md-4"
>
<canvas
id=
"fsp3_dist"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-4"
>
<canvas
id=
"mw_dist"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-4"
>
<canvas
id=
"chiral_dist"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-4"
>
<canvas
id=
"arom_dist"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-4"
>
<canvas
id=
"rotbonds_dist"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-4"
>
<canvas
id=
"haccept_dist"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-4"
>
<canvas
id=
"hdon_dist"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-4"
>
<canvas
id=
"tpsa_dist"
style=
"width:300px; height:200px;"
></canvas>
</div>
<div
class=
"card col-sm-12 col-md-4"
>
<canvas
id=
"alogp_dist"
style=
"width:300px; height:200px;"
></canvas>
</div>
</div>
<script>
var
fsp3Data
=
{
labels
:
{{
fsp3_dist
.
labels
|
safe
}},
datasets
:
[{
label
:
'
Compounds in FSP3 range
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
fsp3_dist
.
values
}}
}]
};
drawBarChart
(
'
fsp3_dist
'
,
fsp3Data
,
'
Fsp3
'
,
null
,
'
bar
'
);
var
mwData
=
{
labels
:
{{
mw_dist
.
labels
|
safe
}},
datasets
:
[{
label
:
'
Molecular Weight
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
mw_dist
.
values
}}
}]
};
drawBarChart
(
'
mw_dist
'
,
mwData
,
'
Molecular Weight
'
,
null
,
'
bar
'
);
var
chiralData
=
{
labels
:
{{
chiral_dist
.
labels
|
safe
}},
datasets
:
[{
label
:
'
Number of chiral centers
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
chiral_dist
.
values
}}
}]
};
drawBarChart
(
'
chiral_dist
'
,
chiralData
,
'
Number of chiral centers
'
,
null
,
'
bar
'
);
var
aromData
=
{
labels
:
{{
arom_dist
.
labels
|
safe
}},
datasets
:
[{
label
:
'
Number of aromatic rings
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
arom_dist
.
values
}}
}]
};
drawBarChart
(
'
arom_dist
'
,
aromData
,
'
Number of aromatic rings
'
,
null
,
'
bar
'
);
var
rotbondsData
=
{
labels
:
{{
rotbonds_dist
.
labels
|
safe
}},
datasets
:
[{
label
:
'
Number of rotatable bonds
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
rotbonds_dist
.
values
}}
}]
};
drawBarChart
(
'
rotbonds_dist
'
,
rotbondsData
,
'
Number of rotatable bonds
'
,
null
,
'
bar
'
);
var
hacceptData
=
{
labels
:
{{
haccept_dist
.
labels
|
safe
}},
datasets
:
[{
label
:
'
Number of H acceptors
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
haccept_dist
.
values
}}
}]
};
drawBarChart
(
'
haccept_dist
'
,
hacceptData
,
'
Number of H acceptors
'
,
null
,
'
bar
'
);
var
hdonData
=
{
labels
:
{{
hdon_dist
.
labels
|
safe
}},
datasets
:
[{
label
:
'
Number of H donors
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
hdon_dist
.
values
}}
}]
};
drawBarChart
(
'
hdon_dist
'
,
hdonData
,
'
Number of H donors
'
,
null
,
'
bar
'
);
var
tpsaData
=
{
labels
:
{{
tpsa_dist
.
labels
|
safe
}},
datasets
:
[{
label
:
'
TPSA
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
tpsa_dist
.
values
}}
}]
};
drawBarChart
(
'
tpsa_dist
'
,
tpsaData
,
'
TPSA
'
,
null
,
'
bar
'
);
var
alogpData
=
{
labels
:
{{
alogp_dist
.
labels
|
safe
}},
datasets
:
[{
label
:
'
ALogP
'
,
backgroundColor
:
"
rgba(70,130,180,0.6)
"
,
borderColor
:
"
rgba(70,130,180,1)
"
,
borderWidth
:
1
,
data
:
{{
alogp_dist
.
values
}}
}]
};
drawBarChart
(
'
alogp_dist
'
,
alogpData
,
'
ALogP
'
,
null
,
'
bar
'
);
</script>
{% endblock %}
ippisite/ippidb/templates/about.html
View file @
439736f5
...
...
@@ -4,42 +4,31 @@
{% block title %}inhibitors of Protein-Protein Interaction Database{% endblock %}
{% block content %}
{% block secondarynav %}
<div
id=
"mainnav"
>
<nav
class=
"secondary-nav"
>
<div
class=
"inner-wrap"
>
<ul>
<li>
<a
href=
"/about
/
general"
>
General information
s
</a>
<a
href=
"/about
-
general"
>
General information
</a>
</li>
<li>
<a
href=
"/about
/
pharmacology"
>
Pharmacology
</a>
<a
href=
"/about
-
pharmacology"
>
Pharmacology
</a>
</li>
<li>
<a
href=
"/about/physicochemistry"
>
Physicochemistry
</a>
</li>
<li>
<a
href=
"/about/drug-candidate"
>
Drug candidate
</a>
<a
href=
"/about-physicochemistry"
>
Physicochemistry
</a>
</li>
</ul>
</div>
</nav>
</div>
{% endblock %}
<div
class=
"inner-wrap"
>
<nav
class=
"breadcrumb breadNav"
role=
"navigation"
>
<div
class=
"breadNav-label"
>
You are here
</div>
<div
aria-labelledby=
"breadcrumb-label"
>
{% block breadcrumb %} {{block.super}}About{% endblock %}
</div>
</nav>
<div
id=
"main-wrapper"
class=
"page"
>
<div
id=
"main"
>
<div
id=
"content"
class=
"main-content"
>
<div
class=
"section"
>
<main
role=
"main"
>
<h1
class=
"page-title"
>
ABOUT
</h1>
<h1
class=
"page-title"
>
{% block pagetitle %}ABOUT{% endblock%}
</h1>
<div
class=
"tabs"
></div>
<div
class=
"main__inner"
>
<div
class=
"region region-content"
>
...
...
@@ -50,7 +39,8 @@
<div
class=
"block block-system block-system-main"
>
<div
class=
"content"
>
<div
class=
"view-content"
>
{% block view_content %}
{% endblock %}
</div>
</div>
</div>
...
...
ippisite/ippidb/templates/base.html
View file @
439736f5
...
...
@@ -51,16 +51,19 @@
window
.
location
=
modifiedUrl
;
$
(
'
#loadingModal
'
).
modal
();
};
var
changeSelection
=
function
(
paramName
){
var
selectedFields
=
$
(
'
input[name=
'
+
paramName
+
'
]:checked
'
).
map
(
function
(
_
,
el
)
{
return
$
(
el
).
val
();
}).
get
();
modifyUrl
(
paramName
,
selectedFields
);
}
var
removeFromSelection
=
function
(
paramName
,
value
){
var
url
=
new
URL
(
location
.
href
);
var
selectedValues
=
url
.
searchParams
.
getAll
(
paramName
);
selectedValues
.
splice
(
selectedValues
.
indexOf
(
value
),
1
);
modifyUrl
(
paramName
,
selectedValues
);
}
var
multiselectTypeAhead
=
function
(
idSearch
,
selection
,
onSelect
){
var
bh
=
new
Bloodhound
({
datumTokenizer
:
Bloodhound
.
tokenizers
.
obj
.
whitespace
(
'
name
'
),
...
...
@@ -130,7 +133,7 @@
maintainAspectRatio
:
false
}});
};
var
draw
Compound
s
Biplot
Chart
=
function
(
canvasId
,
compoundId
,
compoundFamily
,
plotData
,
tabHash
){
var
prepare
Compound
Family
Biplot
Data
=
function
(
compoundId
,
compoundFamily
,
plotData
){
var
currentCompoundData
=
[];
var
currentFamilyData
=
[];
var
otherFamiliesData
=
[];
...
...
@@ -162,6 +165,55 @@
data
:
currentCompoundData
}
]};
return
scatterData
;
}
var
getPpiFamilyColor
=
function
(
ppiName
){
return
{
'
BCL2-Like / BAX
'
:
'
#0E5C97
'
,
'
Beta-catenin / TCF-4
'
:
'
#FAB362
'
,
'
Bromodomain / Histone
'
:
'
#C9862D
'
,
'
CD4 / gp120
'
:
'
#FE8E85
'
,
'
CD80 / CD28
'
:
'
#DB0016
'
,
'
E2 / E1
'
:
'
#C4ADD1
'
,
'
FAK / VEGFR3
'
:
'
#6700FF
'
,
'
IL2 / IL2R
'
:
'
#FE6C00
'
,
'
LEDGF / IN
'
:
'
#971D19
'
,
'
LFA / ICAM
'
:
'
#9DD87E
'
,
'
MDM2-Like / P53
'
:
'
#96C5DC
'
,
'
MENIN / MLL
'
:
'
#EDBBFF
'
,
'
Myc / Max
'
:
'
#C04DC4
'
,
'
NRP / VEGF
'
:
'
#A8184B
'
,
'
UPAR / UPA
'
:
'
#CBDCFF
'
,
'
VEGF / VEGFR
'
:
'
#FED215
'
,
'
WDR5/MLL
'
:
'
#F5F6F7
'
,
'
XIAP / Smac
'
:
'
#128C6D
'
,
'
ZipA / ftsZ
'
:
'
#FEFE01
'
,
}[
ppiName
];
}
var
preparePerFamilyBiplotData
=
function
(
plotData
){
var
property
=
'
family_name
'
;
var
datasets
=
plotData
.
reduce
(
function
(
acc
,
obj
)
{
var
family
=
obj
[
property
];
if
(
!
acc
[
family
]){
acc
[
family
]
=
{
label
:
family
,
borderColor
:
getPpiFamilyColor
(
family
),
backgroundColor
:
getPpiFamilyColor
(
family
),
data
:
[]
};
}
acc
[
family
].
data
.
push
(
obj
);
return
acc
;
},
{});
var
scatterData
=
{
'
datasets
'
:
Object
.
values
(
datasets
)
};
return
scatterData
;
}
var
drawCompoundsBiplotChart
=
function
(
canvasId
,
scatterData
,
tabHash
){
var
ctx
=
document
.
getElementById
(
canvasId
).
getContext
(
'
2d
'
);
var
scatterChart
=
new
Chart
(
ctx
,
{
type
:
'
scatter
'
,
...
...
@@ -231,6 +283,7 @@
window
.
location
=
'
/compounds/
'
+
id
+
'
#
'
+
tabHash
;
};
};
var
setUpSliderForModal
=
function
(
paramName
){
$
(
'
#
'
+
paramName
).
slider
();
$
(
'
#
'
+
paramName
).
on
(
'
slide
'
,
function
(
slideEvt
)
{
...
...
@@ -238,6 +291,7 @@
$
(
'
#
'
+
paramName
+
'
_textvalue_max
'
).
text
(
slideEvt
.
value
[
1
]);
});
}
var
toggleCheckBox
=
function
(
id
){
var
cb
=
$
(
'
#
'
+
id
);
if
(
cb
.
prop
(
'
checked
'
)
==
true
){
...
...
@@ -246,6 +300,82 @@
modifyUrl
(
id
,
null
);
}
}
var
drawBarChart
=
function
(
elementId
,
data
,
caption
,
queryFilter
,
orientation
){
var
ctx
=
document
.
getElementById
(
elementId
).
getContext
(
'
2d
'
);
if
(
orientation
==
null
){
orientation
=
'
horizontalBar
'
}
var
myHorizontalBar
=
new
Chart
(
ctx
,
{
type
:
orientation
,
data
:
data
,
options
:
{
elements
:
{
rectangle
:
{
borderWidth
:
20
,
}
},
responsive
:
true
,
legend
:
{
position
:
'
bottom
'
,
},
title
:
{
display
:
true
,
text
:
caption
}
}
});
if
(
queryFilter
!=
null
){
document
.
getElementById
(
elementId
).
onclick
=
function
(
evt
){
var
activePoints
=
myHorizontalBar
.
getElementAtEvent
(
evt
);
var
datasetIndex
=
activePoints
[
0
].
_datasetIndex
;
var
selectedIndex
=
activePoints
[
0
].
_index
;
var
id
=
myHorizontalBar
.
data
.
labels
[
datasetIndex
];
window
.
location
=
'
/compounds/?
'
+
queryFilter
+
'
=
'
+
id
;
};
}
}
var
drawHorizontalStackedBarChart
=
function
(
elementId
,
data
,
caption
,
queryFilter
){
var
ctx
=
document
.
getElementById
(
elementId
).
getContext
(
'
2d
'
);
var
myHorizontalBar
=
new
Chart
(
ctx
,
{
type
:
'
horizontalBar
'
,
data
:
data
,
options
:
{
elements
:
{
rectangle
:
{
borderWidth
:
20
,
}
},
responsive
:
true
,
legend
:
{
position
:
'
bottom
'
,
},
title
:
{
display
:
true
,
text
:
caption
},
scales
:
{
xAxes
:
[{
stacked
:
true
}],
yAxes
:
[{
stacked
:
true
}]
}
}
});
if
(
queryFilter
!=
null
){
document
.
getElementById
(
elementId
).
onclick
=
function
(
evt
){
var
activePoints
=
myHorizontalBar
.
getElementAtEvent
(
evt
);
var
datasetIndex
=
activePoints
[
0
].
_datasetIndex
;
var
selectedIndex
=
activePoints
[
0
].
_index
;
var
id
=
myHorizontalBar
.
data
.
labels
[
datasetIndex
];
window
.
location
=
'
/compounds/?
'
+
queryFilter
+
'
=
'
+
id
;
};
}
}
</script>
</head>
...
...
@@ -277,7 +407,7 @@
<a
href=
"/"
>
Home
</a>
</li>
<li>
<a
href=
"/about"
>
About
</a>
<a
href=
"/about
-general
"
>
About
</a>
</li>
<li>
<a
href=
"/compounds"
>
Query compounds
</a>
...
...
@@ -323,7 +453,7 @@
<nav>
<ul>
<li>
<a
href=
"/about"
>
About Us
</a>
<a
href=
"/about
-general
"
>
About Us
</a>
</li>
<li>
<a
href=
"/query"
>
Query
</a>
...
...
ippisite/ippidb/templates/compound_card.html
View file @
439736f5
...
...
@@ -125,7 +125,7 @@
<canvas
id=
"pca_biplot"
style=
"width:600px; heigh