Skip to content

Commit

Permalink
Merge pull request #319 from Steinbeck-Lab/feat-charts
Browse files Browse the repository at this point in the history 
Feat charts - names in titles, axes and legends are corrected
  • Loading branch information
@CS76
CS76 authored Dec 13, 2024
2 parents e084c22 + 964bcf3 commit 152a425
Show file tree
Hide file tree
Showing 6 changed files with 21 additions and 93 deletions.
9 changes: 4 additions & 5 deletions app/Livewire/BubbleFrequencyPlot.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,20 +8,19 @@ class BubbleFrequencyPlot extends Component
{
public $chartData;

public $firstColumnName;

public $secondColumnName;
public $columnName;

public $chartId;

public $name_corrections = [

'np_classifier_class' => 'NPClassifier\'s Chemical Classes <a href="https://pubs.acs.org/doi/10.1021/acs.jnatprod.1c00399" target="_blank" rel="noopener noreferrer"><svg class="inline-block w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg></a>',
'chemical_class' => 'ClassyFire\'s Chemical Classes <a href="https://jcheminf.biomedcentral.com/articles/10.1186/s13321-016-0174-y" target="_blank" rel="noopener noreferrer"><svg class="inline-block w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg></a>',
];

public function mount($chartName, $chartData)
{
// Extract column names
[$this->firstColumnName, $this->secondColumnName] = explode('|', $chartName);
[$this->columnName] = explode('|', $chartName);

// Ensure data is properly formatted
$this->chartData = array_map(function ($item) {
Expand Down
1 change: 1 addition & 0 deletions app/Livewire/PropertiesPlot.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ class PropertiesPlot extends Component
'qed_drug_likeliness' => 'QED drug likeness',
'hydrogen_bond_acceptors_lipinski' => 'Hydrogen bond acceptors Lipinski',
'hydrogen_bond_donors_lipinski' => 'Hydrogen bond donors Lipinski',
'lipinski_rule_of_five_violations' => 'Lipinski\'s rule of 5 violations',
];

public function mount($property, $name)
Expand Down
9 changes: 6 additions & 3 deletions resources/views/livewire/annotation-score-plot.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
<div>
<div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl mb-3.5">
Annotations Score
COCONUT Annotation Score
<span class=" text-sm ">
<a class="text-sm text-blue-500 hover:text-blue-600" href="https://academic.oup.com/nar/advance-article/doi/10.1093/nar/gkae1063/7908792#supplementary-data" target="_blank"><svg class="inline-block w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg></a>
</span>
</h2>
<div class="flex flex-col md:flex-row">
<div style="height: 550px;" class="w-full md:w-4/5 md:h-full">
Expand All @@ -21,7 +24,7 @@
const data_annotation = @js($data['molecules']['annotation_level']);
const datasets_annotation = [{
label: 'COCONUT',
label: 'COCONUT Data',
data: data_annotation.overall.density_data.map(point => ({
x: point.x,
y: point.y
Expand Down Expand Up @@ -62,7 +65,7 @@
type: 'linear',
title: {
display: true,
text: 'Annotations Score'
text: 'COCONUT Annotation Score'
},
ticks: {
stepSize: 1
Expand Down
8 changes: 4 additions & 4 deletions resources/views/livewire/bubble-frequency-plot.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
{{-- resources/views/livewire/word-bubble-chart.blade.php --}}
<div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl mb-1">
{!! $name_corrections[$firstColumnName] ?? ucfirst(str_replace('_', ' ', $firstColumnName)) !!} vs {!! $name_corrections[$secondColumnName] ?? ucfirst(str_replace('_', ' ', $secondColumnName)) !!}
<div class="mb-10 ">
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl mb-5">
{!! $name_corrections[$columnName] ?? ucfirst(str_replace('_', ' ', $columnName)) !!}
</h2>
<div id="{{$chartId}}" class="chart-container border rounded-lg" style="height: 600px; position: relative;">
<div id="{{$chartId}}" class="chart-container border rounded-lg ml-10 mr-5" style="height: 600px; position: relative;">
<div class="zoom-controls" style="position: absolute; top: 10px; right: 10px; z-index: 1000; display: flex; gap: 5px;">
<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded">+</button>
<button class="bg-gray-100 hover:bg-gray-200 text-gray-800 font-bold py-2 px-4 rounded">-</button>
Expand Down
8 changes: 4 additions & 4 deletions resources/views/livewire/density-plot.blade.php
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
<div>
<div>
<h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl mb-1">
NP-Likeness
NP-Likeness Score
<span class=" text-sm ">
(<a class="text-sm text-blue-500 hover:text-blue-600" href="http://dx.doi.org/10.1021/ci700286x" target="_blank">DOI</a>)
<a class="text-sm text-blue-500 hover:text-blue-600" href="http://dx.doi.org/10.1021/ci700286x" target="_blank"><svg class="inline-block w-6 h-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M13.19 8.688a4.5 4.5 0 0 1 1.242 7.244l-4.5 4.5a4.5 4.5 0 0 1-6.364-6.364l1.757-1.757m13.35-.622 1.757-1.757a4.5 4.5 0 0 0-6.364-6.364l-4.5 4.5a4.5 4.5 0 0 0 1.242 7.244"/></svg></a>
</span>
</h2>

Expand All @@ -25,7 +25,7 @@
const data = @js($data['properties']['np_likeness']);
const datasets = [{
label: 'COCONUT',
label: 'COCONUT Data',
data: data.overall.density_data.map(point => ({
x: point.x,
y: point.y
Expand Down Expand Up @@ -66,7 +66,7 @@
type: 'linear',
title: {
display: true,
text: 'NP-likeness'
text: 'NP-Likeness Score'
}
},
y: {
Expand Down
79 changes: 2 additions & 77 deletions resources/views/livewire/properties-plot.blade.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
const plotData = @js($property);
const datasets = [{
label: 'COCONUT',
label: 'COCONUT Data',
data: plotData.overall.density_data.map(point => ({
x: point.x,
y: point.y
Expand All @@ -32,22 +32,6 @@
fill: false
}];
Object.entries(plotData.collections).forEach(([name, collection], index) => {
datasets.push({
label: name,
data: collection.density_data.map(point => ({
x: point.x,
y: point.y
})),
borderColor: `hsl(${index * 30}, 70%, 50%)`,
borderWidth: 2,
pointRadius: 0,
tension: 0.4,
fill: false,
hidden: true
});
});
const chart = new Chart(plotCanvas, {
type: 'line',
data: {
Expand All @@ -61,7 +45,7 @@
type: 'linear',
title: {
display: true,
text: '{{ ucfirst(str_replace('_', ' ', $name)) }}'
text: "{{ $name == 'van_der_walls_volume' ? 'Van der Waals volume' : $name_corrections[$name] ?? ucfirst(str_replace('_', ' ', $name)) }}"
},
ticks: {
stepSize: 1
Expand All @@ -84,67 +68,8 @@
}
}
},
// plugins: [{
// id: 'htmlLegend',
// beforeInit(chart) {
// const container = document.getElementById('legend-{{ $name }}');
// if (!container) return;
// // Clear existing legend
// container.innerHTML = '';
// const ul = document.createElement('ul');
// ul.style.listStyle = 'none';
// ul.style.padding = 0;
// ul.style.display = 'flex';
// ul.style.flexWrap = 'wrap';
// ul.style.gap = '8px';
// chart.data.datasets.forEach((dataset, i) => {
// const li = document.createElement('li');
// li.style.marginBottom = '4px';
// li.style.opacity = dataset.hidden ? '0.3' : '1';
// li.style.display = 'flex';
// li.style.alignItems = 'center';
// li.style.minWidth = '120px';
// const button = document.createElement('button');
// button.style.border = 'none';
// button.style.background = dataset.borderColor;
// button.style.width = '12px';
// button.style.height = '12px';
// button.style.marginRight = '6px';
// button.style.cursor = 'pointer';
// const label = document.createTextNode(dataset.label);
// li.onclick = () => {
// dataset.hidden = !dataset.hidden;
// chart.update();
// li.style.opacity = dataset.hidden ? '0.3' : '1';
// };
// li.style.cursor = 'pointer';
// li.appendChild(button);
// li.appendChild(label);
// ul.appendChild(li);
// });
// container.appendChild(ul);
// }
// }]
});
});
</script>

<!-- <style>
.chart-legend-container {
padding: 8px;
border-top: 1px solid #eee;
}
.chart-legend-container ul {
margin: 0;
padding: 0;
}
</style> -->
</div>

0 comments on commit 152a425

Please sign in to comment.