| | <!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>
|
| |
|
