Upload templates/dsa_analysis.html with huggingface_hub

templates/dsa_analysis.html

@@ -180,6 +180,16 @@
             highlightTokensInCell(tr.cells[0], ds);
             highlightTokensInCell(tr.cells[1], ds);
         });
+        ['chart1', 'chart2'].forEach(cid => {
+            const fn = window['rebuildDsaChart_' + cid];
+            if (typeof fn === 'function') fn();
+        });
+    }
+    function setDsaFilter(chartId, btn, val) {
+        btn.parentElement.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        const fn = window['updateDsaFilter_' + chartId];
+        if (typeof fn === 'function') fn(val);
     }
     function saveDonorHLA(btn) {
         const obj = {};
@@ -207,6 +217,11 @@
                 });
             } catch(e) {}
         }
+        // After donor inputs are populated, re-apply default (may switch to DSA mode)
+        ['chart1', 'chart2'].forEach(cid => {
+            const fn = window['applyDsaDefault_' + cid];
+            if (typeof fn === 'function') fn();
+        });
         highlightDSA();
     });
     </script>
@@ -234,13 +249,13 @@
     {% if comp_dates and comp_dates | length >= 2 %}
     <h5>{{ comp_label }} &mdash; MFI Trend</h5>
     <div class="mb-2">
-        <small class="text-muted">Top antibodies by Max MFI</small>
-        <select id="filter-{{ comp_id }}" class="form-select form-select-sm d-inline-block ms-2" style="width:auto;"
-                onchange="updateChart('{{ comp_id }}')">
-            <option value="10">Top 10</option>
-            <option value="20" selected>Top 20</option>
-            <option value="all">All</option>
-        </select>
+        <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="setDsaFilter('{{ comp_id }}',this,'all')">全部</button>
+            <button type="button" class="btn btn-outline-danger" onclick="setDsaFilter('{{ comp_id }}',this,'dsa')">DSA</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setDsaFilter('{{ comp_id }}',this,'10')">Top 10</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setDsaFilter('{{ comp_id }}',this,'20')">Top 20</button>
+        </div>
     </div>
     <div class="chart-container"><canvas id="{{ comp_id }}"></canvas></div>
     <script>
@@ -262,8 +277,23 @@
         }
         allData.sort((x, y) => Math.max(...y.values.filter(v=>v!==null)) - Math.max(...x.values.filter(v=>v!==null)));
         let chartInstance = null;
+        let currentFilter = '20';
+        function matchesDonor(ag, ds) {
+            if (ag.antigen && ds.has(ag.antigen)) return true;
+            if (ag.allele && ds.has(ag.allele)) return true;
+            return false;
+        }
         function buildChart(limit) {
-            const data = limit === 'all' ? allData : allData.slice(0, parseInt(limit));
+            if (limit) currentFilter = limit;
+            let data;
+            if (currentFilter === 'dsa') {
+                const ds = (typeof getDonorSet === 'function') ? getDonorSet() : new Set();
+                data = allData.filter(ag => matchesDonor(ag, ds));
+            } else if (currentFilter === 'all') {
+                data = allData;
+            } else {
+                data = allData.slice(0, parseInt(currentFilter));
+            }
             const datasets = data.map((ag, i) => ({
                 label: ag.antigen + (ag.allele && ag.allele !== ag.antigen ? ' (' + ag.allele + ')' : ''),
                 data: ag.values, borderColor: getColor(ag.antigen, i),
@@ -280,12 +310,24 @@
                               x: { title: { display: true, text: 'Report Date' } } } }
             });
         }
-        const origUpdate = window['updateChart'];
-        window['updateChart'] = function(id) {
-            if (id === '{{ comp_id }}') { const sel = document.getElementById('filter-' + id); buildChart(sel.value); }
-            else if (origUpdate) origUpdate(id);
-        };
-        buildChart(20);
+        window['rebuildDsaChart_{{ comp_id }}'] = function() { buildChart(); };
+        window['updateDsaFilter_{{ comp_id }}'] = function(val) { buildChart(val); };
+        function applyDefault() {
+            let defaultFilter = '20';
+            try {
+                const ds = (typeof getDonorSet === 'function') ? getDonorSet() : new Set();
+                if (ds.size > 0 && allData.some(ag => matchesDonor(ag, ds))) defaultFilter = 'dsa';
+            } catch (e) {}
+            buildChart(defaultFilter);
+            document.querySelectorAll('#filter-{{ comp_id }} .btn').forEach(b => {
+                b.classList.remove('active');
+                if ((defaultFilter === 'dsa' && b.textContent === 'DSA') ||
+                    (defaultFilter === '20' && b.textContent === 'Top 20'))
+                    b.classList.add('active');
+            });
+        }
+        window['applyDsaDefault_{{ comp_id }}'] = applyDefault;
+        applyDefault();
     })();
     </script>
     {% endif %}