From 362a0fca5130a24649eaf6fc8d01ab570b029302 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Herv=C3=A9=20=20MENAGER?= <herve.menager@pasteur.fr>
Date: Wed, 22 Aug 2018 22:39:30 +0200
Subject: [PATCH] add compound structure to the biplot tooltips
fix #78
Former-commit-id: 607f0c6cf38d5ea97c3a0572ca55c9e9fe9a135b
---
ippisite/ippidb/templates/base.html | 47 ++++++++++++++++++++++++++---
1 file changed, 43 insertions(+), 4 deletions(-)
diff --git a/ippisite/ippidb/templates/base.html b/ippisite/ippidb/templates/base.html
index 403c46bb..bebd17df 100644
--- a/ippisite/ippidb/templates/base.html
+++ b/ippisite/ippidb/templates/base.html
@@ -144,11 +144,50 @@
}]
},
tooltips: {
- callbacks: {
- label: function(tooltipItem, data) {
- var dataItem = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
- return "compound " + dataItem.id + " on PPI family " + dataItem.family_name;
+ enabled: false,
+ mode: 'point',
+ custom: function(tooltipModel) {
+ // Tooltip Element
+ var tooltipEl = document.getElementById('chartjs-tooltip');
+ // Create element on first render
+ if (!tooltipEl) {
+ tooltipEl = document.createElement('div');
+ tooltipEl.id = 'chartjs-tooltip';
+ document.body.appendChild(tooltipEl);
}
+ var data = this._data;
+ var props;
+ if (tooltipModel.dataPoints && tooltipModel.dataPoints.length > 0) {
+ tooltipModel.dataPoints.forEach(function(dataPoint) {
+ var dataItem = data.datasets[dataPoint.datasetIndex].data[dataPoint.index];
+ props = {'id':dataItem.id, 'family': dataItem.family_name, 'smiles': dataItem.smiles};
+ });
+ var canvasStr = '<canvas id="canvas-'+ props.id +'" width="250" height="250" data-smiles="' + props.smiles + '"></canvas>'
+ var tooltipStr = '<div class="card" style="width:250">' + canvasStr
+ + '<div class="card-body"><h5 class="card-title">Compound ' + props.id + '</h5>'
+ + '<p class="card-text">PPI Family: ' + props.family + '</p></div></div>';
+ tooltipEl.innerHTML = tooltipStr;
+ }
+ // Hide if no tooltip
+ if (tooltipModel.opacity === 0) {
+ tooltipEl.style.opacity = 0;
+ return;
+ }
+ // Set caret Position
+ tooltipEl.classList.remove('above', 'below', 'no-transform');
+ if (tooltipModel.yAlign) {
+ tooltipEl.classList.add(tooltipModel.yAlign);
+ } else {
+ tooltipEl.classList.add('no-transform');
+ }
+ // `this` will be the overall tooltip
+ var position = this._chart.canvas.getBoundingClientRect();
+ // Display, position, and set styles for font
+ tooltipEl.style.opacity = 1;
+ tooltipEl.style.position = 'absolute';
+ tooltipEl.style.left = position.left + window.scrollX + tooltipModel.caretX + 'px';
+ tooltipEl.style.top = position.top + window.scrollY + tooltipModel.caretY + 'px';
+ drawSmiles();
}
}
}
--
GitLab