|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
<title>Cancer@Home v2 - Dashboard</title>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/d3@7"></script>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>
|
|
|
<style>
|
|
|
* {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
box-sizing: border-box;
|
|
|
}
|
|
|
|
|
|
body {
|
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: #333;
|
|
|
min-height: 100vh;
|
|
|
}
|
|
|
|
|
|
.header {
|
|
|
background: rgba(0, 0, 0, 0.2);
|
|
|
color: white;
|
|
|
padding: 20px;
|
|
|
text-align: center;
|
|
|
backdrop-filter: blur(10px);
|
|
|
}
|
|
|
|
|
|
.header h1 {
|
|
|
font-size: 2.5em;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.header p {
|
|
|
opacity: 0.9;
|
|
|
}
|
|
|
|
|
|
.container {
|
|
|
max-width: 1400px;
|
|
|
margin: 20px auto;
|
|
|
padding: 0 20px;
|
|
|
}
|
|
|
|
|
|
.tabs {
|
|
|
display: flex;
|
|
|
gap: 10px;
|
|
|
margin-bottom: 20px;
|
|
|
flex-wrap: wrap;
|
|
|
}
|
|
|
|
|
|
.tab-button {
|
|
|
background: rgba(255, 255, 255, 0.9);
|
|
|
border: none;
|
|
|
padding: 15px 30px;
|
|
|
border-radius: 8px;
|
|
|
cursor: pointer;
|
|
|
font-size: 16px;
|
|
|
font-weight: 500;
|
|
|
transition: all 0.3s;
|
|
|
}
|
|
|
|
|
|
.tab-button:hover {
|
|
|
background: white;
|
|
|
transform: translateY(-2px);
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
|
}
|
|
|
|
|
|
.tab-button.active {
|
|
|
background: white;
|
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
|
}
|
|
|
|
|
|
.tab-content {
|
|
|
display: none;
|
|
|
}
|
|
|
|
|
|
.tab-content.active {
|
|
|
display: block;
|
|
|
}
|
|
|
|
|
|
.cards {
|
|
|
display: grid;
|
|
|
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
|
|
gap: 20px;
|
|
|
margin-bottom: 30px;
|
|
|
}
|
|
|
|
|
|
.card {
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
padding: 25px;
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
.card h3 {
|
|
|
color: #667eea;
|
|
|
margin-bottom: 15px;
|
|
|
font-size: 1.3em;
|
|
|
}
|
|
|
|
|
|
.stat {
|
|
|
font-size: 2.5em;
|
|
|
font-weight: bold;
|
|
|
color: #764ba2;
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
|
|
|
.graph-container {
|
|
|
background: white;
|
|
|
border-radius: 12px;
|
|
|
padding: 25px;
|
|
|
margin-bottom: 20px;
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
|
|
|
#neo4j-viz {
|
|
|
width: 100%;
|
|
|
height: 600px;
|
|
|
border: 2px solid #e0e0e0;
|
|
|
border-radius: 8px;
|
|
|
}
|
|
|
|
|
|
.button {
|
|
|
background: #667eea;
|
|
|
color: white;
|
|
|
border: none;
|
|
|
padding: 12px 24px;
|
|
|
border-radius: 6px;
|
|
|
cursor: pointer;
|
|
|
font-size: 16px;
|
|
|
transition: background 0.3s;
|
|
|
}
|
|
|
|
|
|
.button:hover {
|
|
|
background: #5568d3;
|
|
|
}
|
|
|
|
|
|
.task-list {
|
|
|
list-style: none;
|
|
|
}
|
|
|
|
|
|
.task-item {
|
|
|
background: #f5f5f5;
|
|
|
padding: 15px;
|
|
|
margin: 10px 0;
|
|
|
border-radius: 6px;
|
|
|
border-left: 4px solid #667eea;
|
|
|
}
|
|
|
|
|
|
.task-item.completed {
|
|
|
border-left-color: #4caf50;
|
|
|
}
|
|
|
|
|
|
.task-item.running {
|
|
|
border-left-color: #ff9800;
|
|
|
}
|
|
|
|
|
|
.status-badge {
|
|
|
display: inline-block;
|
|
|
padding: 4px 12px;
|
|
|
border-radius: 12px;
|
|
|
font-size: 12px;
|
|
|
font-weight: 600;
|
|
|
text-transform: uppercase;
|
|
|
}
|
|
|
|
|
|
.status-pending { background: #ffc107; color: #000; }
|
|
|
.status-running { background: #2196f3; color: white; }
|
|
|
.status-completed { background: #4caf50; color: white; }
|
|
|
.status-failed { background: #f44336; color: white; }
|
|
|
|
|
|
.input-group {
|
|
|
margin: 15px 0;
|
|
|
}
|
|
|
|
|
|
.input-group label {
|
|
|
display: block;
|
|
|
margin-bottom: 5px;
|
|
|
font-weight: 500;
|
|
|
}
|
|
|
|
|
|
.input-group input, .input-group select {
|
|
|
width: 100%;
|
|
|
padding: 10px;
|
|
|
border: 1px solid #ddd;
|
|
|
border-radius: 6px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
|
|
|
.project-card {
|
|
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
color: white;
|
|
|
padding: 20px;
|
|
|
border-radius: 8px;
|
|
|
margin: 10px 0;
|
|
|
cursor: pointer;
|
|
|
transition: transform 0.2s;
|
|
|
}
|
|
|
|
|
|
.project-card:hover {
|
|
|
transform: translateY(-3px);
|
|
|
}
|
|
|
|
|
|
.loading {
|
|
|
text-align: center;
|
|
|
padding: 40px;
|
|
|
color: #667eea;
|
|
|
}
|
|
|
|
|
|
@keyframes spin {
|
|
|
to { transform: rotate(360deg); }
|
|
|
}
|
|
|
|
|
|
.spinner {
|
|
|
border: 4px solid #f3f3f3;
|
|
|
border-top: 4px solid #667eea;
|
|
|
border-radius: 50%;
|
|
|
width: 40px;
|
|
|
height: 40px;
|
|
|
animation: spin 1s linear infinite;
|
|
|
margin: 20px auto;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<div class="header">
|
|
|
<h1>🧬 Cancer@Home v2</h1>
|
|
|
<p>Distributed Cancer Genomics Research Platform</p>
|
|
|
</div>
|
|
|
|
|
|
<div class="container">
|
|
|
<div class="tabs">
|
|
|
<button class="tab-button active" onclick="showTab('dashboard')">📊 Dashboard</button>
|
|
|
<button class="tab-button" onclick="showTab('neo4j')">🔍 Neo4j Visualization</button>
|
|
|
<button class="tab-button" onclick="showTab('boinc')">⚡ BOINC Tasks</button>
|
|
|
<button class="tab-button" onclick="showTab('gdc')">📚 GDC Data</button>
|
|
|
<button class="tab-button" onclick="showTab('pipeline')">🧪 Analysis Pipeline</button>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="dashboard" class="tab-content active">
|
|
|
<div class="cards" id="stats-cards">
|
|
|
<div class="card">
|
|
|
<h3>Total Genes</h3>
|
|
|
<div class="stat" id="total-genes">-</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<h3>Total Mutations</h3>
|
|
|
<div class="stat" id="total-mutations">-</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<h3>Total Patients</h3>
|
|
|
<div class="stat" id="total-patients">-</div>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<h3>Cancer Types</h3>
|
|
|
<div class="stat" id="total-cancer-types">-</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="graph-container">
|
|
|
<h3>Mutation Distribution by Cancer Type</h3>
|
|
|
<canvas id="mutation-chart"></canvas>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="neo4j" class="tab-content">
|
|
|
<div class="graph-container">
|
|
|
<h3>Cancer Genomics Knowledge Graph</h3>
|
|
|
<div id="neo4j-viz"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="boinc" class="tab-content">
|
|
|
<div class="cards">
|
|
|
<div class="card">
|
|
|
<h3>Submit New Task</h3>
|
|
|
<div class="input-group">
|
|
|
<label>Task Type</label>
|
|
|
<select id="task-type">
|
|
|
<option value="variant_calling">Variant Calling</option>
|
|
|
<option value="blast_search">BLAST Search</option>
|
|
|
<option value="alignment">Sequence Alignment</option>
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="input-group">
|
|
|
<label>Input File</label>
|
|
|
<input type="text" id="input-file" placeholder="path/to/input.fastq">
|
|
|
</div>
|
|
|
<button class="button" onclick="submitBoincTask()">Submit Task</button>
|
|
|
</div>
|
|
|
|
|
|
<div class="card">
|
|
|
<h3>BOINC Statistics</h3>
|
|
|
<div id="boinc-stats"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<div class="card">
|
|
|
<h3>Active Tasks</h3>
|
|
|
<ul class="task-list" id="task-list"></ul>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="gdc" class="tab-content">
|
|
|
<div class="card">
|
|
|
<h3>Available GDC Projects</h3>
|
|
|
<div id="gdc-projects"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<div id="pipeline" class="tab-content">
|
|
|
<div class="cards">
|
|
|
<div class="card">
|
|
|
<h3>FASTQ Quality Control</h3>
|
|
|
<p>Run quality control analysis on sequencing data</p>
|
|
|
<button class="button" style="margin-top: 15px;">Run QC</button>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<h3>BLAST Search</h3>
|
|
|
<p>Perform sequence alignment and homology search</p>
|
|
|
<button class="button" style="margin-top: 15px;">Run BLAST</button>
|
|
|
</div>
|
|
|
<div class="card">
|
|
|
<h3>Variant Calling</h3>
|
|
|
<p>Identify genetic variants from sequencing data</p>
|
|
|
<button class="button" style="margin-top: 15px;">Call Variants</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function showTab(tabName) {
|
|
|
document.querySelectorAll('.tab-content').forEach(tab => {
|
|
|
tab.classList.remove('active');
|
|
|
});
|
|
|
document.querySelectorAll('.tab-button').forEach(btn => {
|
|
|
btn.classList.remove('active');
|
|
|
});
|
|
|
|
|
|
document.getElementById(tabName).classList.add('active');
|
|
|
event.target.classList.add('active');
|
|
|
|
|
|
if (tabName === 'dashboard') loadDashboard();
|
|
|
else if (tabName === 'neo4j') loadNeo4jViz();
|
|
|
else if (tabName === 'boinc') loadBoincTasks();
|
|
|
else if (tabName === 'gdc') loadGdcProjects();
|
|
|
}
|
|
|
|
|
|
|
|
|
async function loadDashboard() {
|
|
|
try {
|
|
|
const response = await fetch('/api/neo4j/summary');
|
|
|
const data = await response.json();
|
|
|
|
|
|
document.getElementById('total-genes').textContent = data.genes || 0;
|
|
|
document.getElementById('total-mutations').textContent = data.mutations || 0;
|
|
|
document.getElementById('total-patients').textContent = data.patients || 0;
|
|
|
document.getElementById('total-cancer-types').textContent = data.cancer_types || 0;
|
|
|
|
|
|
createMutationChart();
|
|
|
} catch (error) {
|
|
|
console.error('Error loading dashboard:', error);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
function createMutationChart() {
|
|
|
const ctx = document.getElementById('mutation-chart').getContext('2d');
|
|
|
new Chart(ctx, {
|
|
|
type: 'bar',
|
|
|
data: {
|
|
|
labels: ['Breast Cancer', 'Lung Adenocarcinoma', 'Colon Adenocarcinoma', 'Glioblastoma'],
|
|
|
datasets: [{
|
|
|
label: 'Mutations',
|
|
|
data: [245, 189, 156, 203],
|
|
|
backgroundColor: [
|
|
|
'rgba(102, 126, 234, 0.8)',
|
|
|
'rgba(118, 75, 162, 0.8)',
|
|
|
'rgba(237, 100, 166, 0.8)',
|
|
|
'rgba(255, 154, 158, 0.8)'
|
|
|
]
|
|
|
}]
|
|
|
},
|
|
|
options: {
|
|
|
responsive: true,
|
|
|
maintainAspectRatio: true,
|
|
|
plugins: {
|
|
|
legend: { display: false }
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
|
|
|
|
|
|
function loadNeo4jViz() {
|
|
|
const viz = document.getElementById('neo4j-viz');
|
|
|
viz.innerHTML = '<div class="loading"><div class="spinner"></div><p>Loading graph visualization...</p></div>';
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
const width = viz.clientWidth;
|
|
|
const height = 600;
|
|
|
|
|
|
viz.innerHTML = '';
|
|
|
const svg = d3.select('#neo4j-viz')
|
|
|
.append('svg')
|
|
|
.attr('width', width)
|
|
|
.attr('height', height);
|
|
|
|
|
|
|
|
|
const nodes = [
|
|
|
{ id: 'TP53', type: 'gene', x: width/2, y: height/2 },
|
|
|
{ id: 'BRCA1', type: 'gene', x: width/3, y: height/3 },
|
|
|
{ id: 'KRAS', type: 'gene', x: 2*width/3, y: height/3 },
|
|
|
{ id: 'Patient 1', type: 'patient', x: width/4, y: 3*height/4 },
|
|
|
{ id: 'Patient 2', type: 'patient', x: 3*width/4, y: 3*height/4 },
|
|
|
{ id: 'Breast Cancer', type: 'cancer', x: width/2, y: height/4 }
|
|
|
];
|
|
|
|
|
|
const links = [
|
|
|
{ source: 'Patient 1', target: 'TP53' },
|
|
|
{ source: 'Patient 1', target: 'Breast Cancer' },
|
|
|
{ source: 'Patient 2', target: 'KRAS' },
|
|
|
{ source: 'TP53', target: 'Breast Cancer' }
|
|
|
];
|
|
|
|
|
|
|
|
|
svg.selectAll('line')
|
|
|
.data(links)
|
|
|
.enter()
|
|
|
.append('line')
|
|
|
.attr('x1', d => nodes.find(n => n.id === d.source).x)
|
|
|
.attr('y1', d => nodes.find(n => n.id === d.source).y)
|
|
|
.attr('x2', d => nodes.find(n => n.id === d.target).x)
|
|
|
.attr('y2', d => nodes.find(n => n.id === d.target).y)
|
|
|
.attr('stroke', '#999')
|
|
|
.attr('stroke-width', 2);
|
|
|
|
|
|
|
|
|
svg.selectAll('circle')
|
|
|
.data(nodes)
|
|
|
.enter()
|
|
|
.append('circle')
|
|
|
.attr('cx', d => d.x)
|
|
|
.attr('cy', d => d.y)
|
|
|
.attr('r', 20)
|
|
|
.attr('fill', d => {
|
|
|
if (d.type === 'gene') return '#667eea';
|
|
|
if (d.type === 'patient') return '#764ba2';
|
|
|
return '#ed64a6';
|
|
|
});
|
|
|
|
|
|
|
|
|
svg.selectAll('text')
|
|
|
.data(nodes)
|
|
|
.enter()
|
|
|
.append('text')
|
|
|
.attr('x', d => d.x)
|
|
|
.attr('y', d => d.y - 25)
|
|
|
.attr('text-anchor', 'middle')
|
|
|
.text(d => d.id)
|
|
|
.attr('font-size', '12px')
|
|
|
.attr('fill', '#333');
|
|
|
}, 500);
|
|
|
}
|
|
|
|
|
|
|
|
|
async function loadBoincTasks() {
|
|
|
try {
|
|
|
const [tasksResponse, statsResponse] = await Promise.all([
|
|
|
fetch('/api/boinc/tasks'),
|
|
|
fetch('/api/boinc/statistics')
|
|
|
]);
|
|
|
|
|
|
const tasksData = await tasksResponse.json();
|
|
|
const statsData = await statsResponse.json();
|
|
|
|
|
|
|
|
|
const taskList = document.getElementById('task-list');
|
|
|
taskList.innerHTML = tasksData.tasks.map(task => `
|
|
|
<li class="task-item ${task.status}">
|
|
|
<strong>${task.name}</strong>
|
|
|
<span class="status-badge status-${task.status}">${task.status}</span>
|
|
|
<div style="margin-top: 8px; font-size: 14px; color: #666;">
|
|
|
Type: ${task.workunit_type} | Created: ${new Date(task.created_at).toLocaleString()}
|
|
|
</div>
|
|
|
</li>
|
|
|
`).join('');
|
|
|
|
|
|
|
|
|
const statsDiv = document.getElementById('boinc-stats');
|
|
|
statsDiv.innerHTML = `
|
|
|
<p><strong>Total Tasks:</strong> ${statsData.total_tasks}</p>
|
|
|
<p><strong>Completed:</strong> ${statsData.by_status?.completed || 0}</p>
|
|
|
<p><strong>Running:</strong> ${statsData.by_status?.running || 0}</p>
|
|
|
<p><strong>Pending:</strong> ${statsData.by_status?.pending || 0}</p>
|
|
|
`;
|
|
|
} catch (error) {
|
|
|
console.error('Error loading BOINC tasks:', error);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
async function submitBoincTask() {
|
|
|
const taskType = document.getElementById('task-type').value;
|
|
|
const inputFile = document.getElementById('input-file').value;
|
|
|
|
|
|
if (!inputFile) {
|
|
|
alert('Please provide an input file path');
|
|
|
return;
|
|
|
}
|
|
|
|
|
|
try {
|
|
|
const response = await fetch('/api/boinc/submit', {
|
|
|
method: 'POST',
|
|
|
headers: { 'Content-Type': 'application/json' },
|
|
|
body: JSON.stringify({ workunit_type: taskType, input_file: inputFile })
|
|
|
});
|
|
|
|
|
|
const data = await response.json();
|
|
|
alert(`Task submitted successfully! Task ID: ${data.task_id}`);
|
|
|
loadBoincTasks();
|
|
|
} catch (error) {
|
|
|
console.error('Error submitting task:', error);
|
|
|
alert('Failed to submit task');
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
async function loadGdcProjects() {
|
|
|
try {
|
|
|
const response = await fetch('/api/gdc/projects');
|
|
|
const data = await response.json();
|
|
|
|
|
|
const projectsDiv = document.getElementById('gdc-projects');
|
|
|
projectsDiv.innerHTML = data.projects.map(project => `
|
|
|
<div class="project-card">
|
|
|
<h4>${project.name}</h4>
|
|
|
<p>Project ID: ${project.id}</p>
|
|
|
<p>Cases: ${project.cases}</p>
|
|
|
</div>
|
|
|
`).join('');
|
|
|
} catch (error) {
|
|
|
console.error('Error loading GDC projects:', error);
|
|
|
}
|
|
|
}
|
|
|
|
|
|
|
|
|
window.onload = () => {
|
|
|
loadDashboard();
|
|
|
};
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|
