Skip to content
GitLab
Commit 439736f5 authored by Hervé MENAGER's avatar 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
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 informations</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 drawCompoundsBiplotChart = function(canvasId, compoundId, compoundFamily, plotData, tabHash){
var prepareCompoundFamilyBiplotData = 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; height:600px;"></canvas>