Spaces:

plokmii
/

pradsa

Sleeping

App Files Files Community

plokmii commited on Apr 12

Commit

8ea4c48

verified ·

1 Parent(s): be2aef7

Upload templates/analysis.html with huggingface_hub

Browse files

Files changed (1) hide show

templates/analysis.html +385 -0

templates/analysis.html ADDED Viewed

	@@ -0,0 +1,385 @@

+<!DOCTYPE html>
+<html lang="zh-TW">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>PRA 統計分析</title>
+<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+<script src="https://cdn.jsdelivr.net/npm/chart.js@4"></script>
+<style>
+.chart-container { position: relative; height: 420px; background: #fff; border: 1px solid #dee2e6; border-radius: 6px; padding: 1rem; margin-bottom: 1.5rem; }
+.ab-table { font-size: .82rem; }
+.mfi-up { color: #dc3545; }
+.mfi-down { color: #198754; }
+.mfi-new { color: #0d6efd; font-weight: bold; }
+.mfi-gone { color: #adb5bd; text-decoration: line-through; }
+</style>
+</head>
+<body>
+<div class="container py-4" style="max-width: 1200px;">
+    <div class="d-flex justify-content-between align-items-center mb-3">
+        <div>
+            <h2 class="mb-0">PRA 統計分析</h2>
+            <small class="text-danger">病患需有兩筆以上不同日期的紀錄才會顯示趨勢圖表</small>
+        </div>
+        <div>
+            <a href="/" class="btn btn-dark btn-sm me-1">首頁</a>
+            <a href="/history" class="btn btn-outline-secondary btn-sm me-1">歷史紀錄</a>
+            <a href="/new" class="btn btn-outline-primary btn-sm">新增資料</a>
+        </div>
+    </div>
+    <!-- Patient selector -->
+    <form class="row g-2 mb-4" method="get" action="/analysis">
+        <div class="col-sm-4">
+            <select class="form-select" id="patientSelect" onchange="selectPatient(this.value)">
+                <option value="">-- 選擇病人 --</option>
+                {% for p in patients %}
+                <option value="{{ p.chart_no }}" {{ 'selected' if p.chart_no == chart_no else '' }}>
+                    {{ p.patient_name }} ({{ p.chart_no }})
+                </option>
+                {% endfor %}
+            </select>
+        </div>
+        <div class="col-sm-5">
+            <input type="text" class="form-control" id="patientSearch" list="patientList"
+                   placeholder="搜尋病患姓名或病歷號" autocomplete="off"
+                   onchange="selectPatient(this.value)">
+            <datalist id="patientList">
+                {% for p in patients %}
+                <option value="{{ p.chart_no }}" label="{{ p.patient_name }} ({{ p.chart_no }})">
+                {% endfor %}
+            </datalist>
+            <input type="hidden" name="chart_no" id="chartNoInput" value="{{ chart_no }}">
+        </div>
+    </form>
+    <script>
+    function selectPatient(val) {
+        if (!val) return;
+        document.getElementById('chartNoInput').value = val;
+        document.getElementById('chartNoInput').form.submit();
+    }
+    {% if chart_no %}
+    document.getElementById('patientSearch').value = '{{ chart_no }}';
+    {% endif %}
+    </script>
+    {% if patient %}
+    <!-- Donor HLA Input -->
+    <div class="card mb-3">
+        <div class="card-header fw-bold">Donor HLA</div>
+        <div class="card-body">
+            <div class="row g-2">
+                <div class="col-md-6">
+                    <div class="small fw-bold mb-1">Class I</div>
+                    <div class="row g-1">
+                        <div class="col-4"><div class="input-group input-group-sm"><span class="input-group-text">A</span><input type="text" class="form-control donor-hla" id="donor-A" placeholder="2,24" oninput="highlightDSA()"></div></div>
+                        <div class="col-4"><div class="input-group input-group-sm"><span class="input-group-text">B</span><input type="text" class="form-control donor-hla" id="donor-B" placeholder="7,46" oninput="highlightDSA()"></div></div>
+                        <div class="col-4"><div class="input-group input-group-sm"><span class="input-group-text">Cw</span><input type="text" class="form-control donor-hla" id="donor-Cw" placeholder="1,7" oninput="highlightDSA()"></div></div>
+                    </div>
+                </div>
+                <div class="col-md-6">
+                    <div class="small fw-bold mb-1">Class II</div>
+                    <div class="row g-1">
+                        <div class="col-3"><div class="input-group input-group-sm"><span class="input-group-text">DR</span><input type="text" class="form-control donor-hla" id="donor-DR" placeholder="4,7" oninput="highlightDSA()"></div></div>
+                        <div class="col-3"><div class="input-group input-group-sm"><span class="input-group-text">DQ</span><input type="text" class="form-control donor-hla" id="donor-DQ" placeholder="7,9" oninput="highlightDSA()"></div></div>
+                        <div class="col-3"><div class="input-group input-group-sm"><span class="input-group-text">DP</span><input type="text" class="form-control donor-hla" id="donor-DP" placeholder="2,4" oninput="highlightDSA()"></div></div>
+                        <div class="col-3 d-flex align-items-end"><button class="btn btn-sm btn-outline-danger w-100" onclick="dsaCheckAndSave()">DSA確認</button></div>
+                    </div>
+                </div>
+            </div>
+            <div class="small text-muted mt-1">輸入數字，多個用逗號分隔（如 2,24）。符合的抗體會標紅。</div>
+        </div>
+    </div>
+    <div class="mb-3">
+        <h4>{{ patient.patient_name }} <span class="text-muted fs-6">({{ patient.chart_no }})</span></h4>
+    </div>
+    <!-- Reports summary -->
+    <table class="table table-bordered table-sm bg-white mb-4" style="font-size:.9rem;">
+        <thead class="table-light">
+            <tr><th>報告日期</th><th>Class</th><th>PRA%</th><th>Overall</th><th>Specificity</th></tr>
+        </thead>
+        <tbody>
+        {% for r in reports %}
+        <tr>
+            <td>{{ r.report_date }}</td>
+            <td>{{ r.pra_class }}</td>
+            <td class="fw-bold">{{ r.pra_percent }}%</td>
+            <td><span class="badge {{ 'bg-danger' if r.overall == 'Positive' else 'bg-success' }}">{{ r.overall }}</span></td>
+            <td class="small spec-cell" style="max-width:300px;">{{ r.specificity or '(-)' }}</td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+    <!-- MFI Trend Charts -->
+    {% for comp_label, comp_id, comp_dates, comp_antigens, comp_pra in [
+        ('PRA Class I', 'chart1', comparison_class1.dates if comparison_class1 else [],
+         comparison_class1.antigens if comparison_class1 else [],
+         comparison_class1.pra_by_date if comparison_class1 else {}),
+        ('PRA Class II', 'chart2', comparison_class2.dates if comparison_class2 else [],
+         comparison_class2.antigens if comparison_class2 else [],
+         comparison_class2.pra_by_date if comparison_class2 else {})
+    ] %}
+    {% if comp_dates and comp_dates | length >= 1 %}
+    <h5>{{ comp_label }} — MFI 趨勢圖</h5>
+    {% if comp_dates | length >= 2 %}
+    <div class="mb-2">
+        <small class="text-muted me-2">點圖例可顯示/隱藏抗體</small>
+        <div class="btn-group btn-group-sm" id="filter-{{ comp_id }}">
+            <button type="button" class="btn btn-outline-secondary" onclick="setFilter('{{ comp_id }}',this,'all')">全部</button>
+            <button type="button" class="btn btn-outline-danger" onclick="setFilter('{{ comp_id }}',this,'dsa')">DSA</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setFilter('{{ comp_id }}',this,'10')">Top 10</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setFilter('{{ comp_id }}',this,'20')">Top 20</button>
+        </div>
+    </div>
+    <div class="chart-container">
+        <canvas id="{{ comp_id }}"></canvas>
+    </div>
+    <script>
+    (function() {
+        const dates = {{ comp_dates | tojson }};
+        const allData = [
+        {% for ag in comp_antigens %}
+            { antigen: '{{ ag.antigen }}', allele: '{{ ag.allele }}',
+              values: [{% for d in comp_dates %}{{ ag.mfi_by_date.get(d, {}).get('max_mfi', 'null') }}{% if not loop.last %},{% endif %}{% endfor %}] },
+        {% endfor %}
+        ];
+        function getColor(ag, i) {
+            const ca = ['#e53935','#d81b60','#8e24aa','#5e35b1','#3949ab','#1e88e5','#ef5350','#ec407a'];
+            const cb = ['#00897b','#43a047','#7cb342','#c0ca33','#26a69a','#66bb6a','#9ccc65','#d4e157','#2e7d32','#558b2f'];
+            const cc = ['#ff8f00','#ff6f00','#f57f17','#ffb300','#ffa000'];
+            if (ag.startsWith('A') || ag.startsWith('DR')) return ca[i % ca.length];
+            if (ag.startsWith('B') || ag.startsWith('DQ')) return cb[i % cb.length];
+            return cc[i % cc.length];
+        }
+        allData.sort((a, b) => Math.max(...b.values.filter(v=>v!==null)) - Math.max(...a.values.filter(v=>v!==null)));
+        let chartInst = null;
+        function getDonorSet() {
+            const s = new Set();
+            ['A','B','Cw','DR','DQ','DP'].forEach(l => {
+                const el = document.getElementById('donor-' + l);
+                if (!el) return;
+                el.value.split(',').forEach(v => { v=v.trim(); if(v) s.add(l+v); });
+            });
+            return s;
+        }
+        function build(limit) {
+            let data;
+            if (limit === 'dsa') {
+                const ds = getDonorSet();
+                data = allData.filter(ag => ds.has(ag.antigen));
+            } else {
+                data = limit === 'all' ? allData : allData.slice(0, parseInt(limit));
+            }
+            const datasets = data.map((ag, i) => ({
+                label: ag.antigen + (ag.allele ? ' (' + ag.allele.split(',')[0].trim() + ')' : ''),
+                data: ag.values, borderColor: getColor(ag.antigen, i),
+                backgroundColor: getColor(ag.antigen, i) + '33',
+                borderWidth: 2, pointRadius: 5, pointHoverRadius: 7, tension: 0.3, spanGaps: true,
+            }));
+            if (chartInst) chartInst.destroy();
+            chartInst = new Chart(document.getElementById('{{ comp_id }}'), {
+                type: 'line',
+                data: { labels: dates, datasets },
+                options: {
+                    responsive: true, maintainAspectRatio: false,
+                    interaction: { mode: 'nearest', intersect: false },
+                    plugins: {
+                        legend: { position: 'right', labels: { font: { size: 11 }, boxWidth: 12, padding: 6 } },
+                        tooltip: { callbacks: { label: c => c.dataset.label + ': ' + (c.parsed.y !== null ? c.parsed.y.toLocaleString() : '-') } }
+                    },
+                    scales: {
+                        y: { title: { display: true, text: 'Max MFI' }, beginAtZero: true },
+                        x: { title: { display: true, text: '報告日期' } }
+                    }
+                }
+            });
+        }
+        window['updateChart_{{ comp_id }}'] = function(val) { build(val || 'all'); highlightDSA(); };
+        // Default: DSA if donor HLA exists, otherwise all
+        var defaultFilter = 'all';
+        if (getDonorSet().size > 0) {
+            var dsaData = allData.filter(ag => getDonorSet().has(ag.antigen));
+            if (dsaData.length > 0) defaultFilter = 'dsa';
+        }
+        build(defaultFilter);
+        // Set active button
+        document.querySelectorAll('#filter-{{ comp_id }} .btn').forEach(b => {
+            b.classList.remove('active');
+            if ((defaultFilter === 'dsa' && b.textContent === 'DSA') ||
+                (defaultFilter === 'all' && b.textContent === '全部'))
+                b.classList.add('active');
+        });
+    })();
+    </script>
+    {% endif %}
+    <!-- MFI Comparison Table -->
+    {% if comp_dates | length >= 2 %}
+    <h6 class="mt-3">MFI 比較表</h6>
+    <div class="small text-muted mb-1">
+        <span class="mfi-up">&#9650; 上升</span>
+        <span class="mfi-down ms-2">&#9660; 下降</span>
+        <span class="mfi-new ms-2">新增</span>
+        <span class="mfi-gone ms-2">消失</span>
+    </div>
+    <div style="overflow-x:auto;">
+    <table class="table table-bordered table-sm ab-table bg-white mb-4">
+        <thead class="table-light">
+            <tr>
+                <th>Antigen</th><th>Allele</th>
+                {% for d in comp_dates %}
+                <th class="text-center" colspan="2">{{ d }}<br><small>PRA {{ comp_pra.get(d,'?') }}%</small></th>
+                {% endfor %}
+                <th class="text-center">趨勢</th>
+            </tr>
+            <tr><th></th><th></th>
+                {% for d in comp_dates %}<th class="text-end small">Max</th><th class="text-end small">Mean</th>{% endfor %}
+                <th></th>
+            </tr>
+        </thead>
+        <tbody>
+        {% for ag in comp_antigens %}
+        <tr>
+            <td class="fw-bold ag-cell" data-ag="{{ ag.antigen }}">{{ ag.antigen }}</td><td class="small">{{ ag.allele }}</td>
+            {% for d in comp_dates %}
+            {% set val = ag.mfi_by_date.get(d) %}
+            {% if val %}
+            <td class="text-end {% if val.max_mfi >= 10000 %}text-danger fw-bold{% elif val.max_mfi >= 5000 %}text-warning{% endif %}">{{ val.max_mfi|int }}</td>
+            <td class="text-end">{{ val.mean_mfi|int }}</td>
+            {% else %}<td class="text-center text-muted">-</td><td class="text-center text-muted">-</td>{% endif %}
+            {% endfor %}
+            <td class="text-center">
+                {% set first_val = ag.mfi_by_date.get(comp_dates[0]) %}
+                {% set last_val = ag.mfi_by_date.get(comp_dates[-1]) %}
+                {% if first_val and last_val %}
+                    {% set diff = last_val.max_mfi - first_val.max_mfi %}
+                    {% if diff > 500 %}<span class="mfi-up">&#9650; +{{ diff|int }}</span>
+                    {% elif diff < -500 %}<span class="mfi-down">&#9660; {{ diff|int }}</span>
+                    {% else %}<span class="text-muted">&ndash;</span>{% endif %}
+                {% elif last_val and not first_val %}<span class="mfi-new">新增</span>
+                {% elif first_val and not last_val %}<span class="mfi-gone">消失</span>
+                {% endif %}
+            </td>
+        </tr>
+        {% endfor %}
+        </tbody>
+    </table>
+    </div>
+    {% endif %}
+    {% endif %}
+    {% endfor %}
+    {% elif chart_no %}
+    <div class="alert alert-warning">找不到病歷號 {{ chart_no }}</div>
+    {% else %}
+    <div class="text-center text-muted py-5">請選擇病人查看統計分析</div>
+    {% endif %}
+</div>
+<script>
+// Load saved donor HLA on page load
+window.addEventListener('DOMContentLoaded', function() {
+    const saved = {{ donor_hla | default("", true) | tojson }};
+    if (saved) {
+        try {
+            const obj = JSON.parse(saved);
+            ['A','B','Cw','DR','DQ','DP'].forEach(l => {
+                const el = document.getElementById('donor-' + l);
+                if (el && obj[l]) el.value = obj[l];
+            });
+            // delay to wait for charts to render
+            setTimeout(highlightDSA, 1000);
+        } catch(e) { console.log('donor_hla parse error', e); }
+    }
+});
+function setFilter(chartId, btn, val) {
+    // Toggle active state
+    btn.parentElement.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
+    btn.classList.add('active');
+    window['updateChart_' + chartId](val);
+}
+function dsaCheckAndSave() {
+    highlightDSA();
+    // Save to DB
+    const obj = {};
+    ['A','B','Cw','DR','DQ','DP'].forEach(l => {
+        const el = document.getElementById('donor-' + l);
+        if (el && el.value.trim()) obj[l] = el.value.trim();
+    });
+    fetch('/save_donor_hla', {
+        method: 'POST',
+        headers: {'Content-Type': 'application/json'},
+        body: JSON.stringify({ chart_no: '{{ chart_no }}', donor_hla: JSON.stringify(obj) })
+    }).then(r => r.json()).then(d => {
+        if (d.ok) {
+            const btn = document.querySelector('[onclick="dsaCheckAndSave()"]');
+            btn.textContent = 'Saved!';
+            setTimeout(() => btn.textContent = 'DSA確認', 1500);
+        }
+    });
+}
+function highlightDSA() {
+    // Build donor HLA set: {A2, A24, B7, B46, Cw1, DR4, DQ7, DP2, ...}
+    const donorSet = new Set();
+    const loci = ['A','B','Cw','DR','DQ','DP'];
+    loci.forEach(locus => {
+        const el = document.getElementById('donor-' + locus);
+        if (!el) return;
+        el.value.split(',').forEach(v => {
+            v = v.trim();
+            if (v) donorSet.add(locus + v);
+        });
+    });
+    if (donorSet.size === 0) return;
+    // 1. Highlight ag-cell (MFI comparison table antigen column)
+    document.querySelectorAll('.ag-cell').forEach(td => {
+        const ag = td.dataset.ag;
+        const match = donorSet.has(ag);
+        td.style.color = match ? '#dc3545' : '';
+        td.style.background = match ? '#fff0f0' : '';
+        td.parentElement.style.background = match ? '#fff0f0' : '';
+    });
+    // 2. Highlight Specificity text in reports table
+    document.querySelectorAll('.spec-cell').forEach(td => {
+        const orig = td.dataset.orig || td.textContent;
+        td.dataset.orig = orig;
+        const words = orig.split(/\s+/);
+        td.innerHTML = words.map(w => {
+            // Extract sero name: "A24" from "A24" or "A11(A*11:02)"
+            const m = w.match(/^(A\d+|B\d+|Cw\d+|DR\d+|DQ\d+|DP\d+)/);
+            if (m && donorSet.has(m[1])) {
+                return '<span style="color:#dc3545;font-weight:bold;background:#fff0f0;padding:0 2px;border-radius:2px;">' + w + '</span>';
+            }
+            return w;
+        }).join(' ');
+    });
+    // 3. Highlight chart legend labels
+    document.querySelectorAll('canvas').forEach(canvas => {
+        const chart = Chart.getChart(canvas);
+        if (!chart) return;
+        chart.data.datasets.forEach(ds => {
+            // Remove existing ★ first
+            const cleanLabel = ds.label.replace(/ ★$/, '');
+            const m = cleanLabel.match(/^(A\d+|B\d+|Cw\d+|DR\d+|DQ\d+|DP\d+)/);
+            ds.label = (m && donorSet.has(m[1])) ? cleanLabel + ' ★' : cleanLabel;
+        });
+        chart.update();
+    });
+}
+</script>
+</body>
+</html>