Upload templates/combined_analysis.html with huggingface_hub

templates/combined_analysis.html

@@ -183,6 +183,16 @@
             highlightTokensInCell(tr.cells[0], ds);
             highlightTokensInCell(tr.cells[1], ds);
         });
+        ['chart1', 'chart2'].forEach(cid => {
+            const fn = window['rebuildCombinedChart_' + cid];
+            if (typeof fn === 'function') fn();
+        });
+    }
+    function setCombinedFilter(chartId, btn, val) {
+        btn.parentElement.querySelectorAll('.btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+        const fn = window['updateCombinedFilter_' + chartId];
+        if (typeof fn === 'function') fn(val);
     }
     function saveDonorHLA(btn) {
         const obj = {};
@@ -210,6 +220,10 @@
                 });
             } catch(e) {}
         }
+        ['chart1', 'chart2'].forEach(cid => {
+            const fn = window['applyCombinedDefault_' + cid];
+            if (typeof fn === 'function') fn();
+        });
         highlightDSA();
     });
     </script>
@@ -237,15 +251,16 @@
     ] %}
     {% if comp_dates and comp_dates | length >= 1 %}
     <h5>{{ comp_label }} &mdash; Combined MFI Trend
-        <small class="text-muted ms-2">PRA 實線&#x25CF; / DSA 虛線&#x25B2;</small>
+        <small class="text-muted ms-2">DSA 實線&#x25B2; / PRA 虛線&#x25CF;</small>
     </h5>
     <div class="mb-2">
-        <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="setCombinedFilter('{{ comp_id }}',this,'all')">全部</button>
+            <button type="button" class="btn btn-outline-danger" onclick="setCombinedFilter('{{ comp_id }}',this,'dsa')">DSA</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setCombinedFilter('{{ comp_id }}',this,'10')">Top 10</button>
+            <button type="button" class="btn btn-outline-secondary" onclick="setCombinedFilter('{{ comp_id }}',this,'20')">Top 20</button>
+        </div>
     </div>
     <div class="chart-container"><canvas id="{{ comp_id }}"></canvas></div>
     <script>
@@ -273,8 +288,23 @@
         });
         allData.sort((x, y) => y._max - x._max);
         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.forEach((ag, i) => {
                 const col = getColor(ag.antigen || ag.allele, i);
@@ -307,12 +337,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['rebuildCombinedChart_{{ comp_id }}'] = function() { buildChart(); };
+        window['updateCombinedFilter_{{ 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['applyCombinedDefault_{{ comp_id }}'] = applyDefault;
+        applyDefault();
     })();
     </script>
     {% endif %}