Add incremental card reconciliation to prevent full DOM rebuild on auto-refresh

CardSection now diffs cards by key attributes instead of rebuilding innerHTML,
preserving DOM elements, filter input focus, scroll position, and Chart.js
instances across the 2s targets tab auto-refresh cycle.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-02-24 00:58:38 +03:00
parent 166ec351b1
commit 27720e51aa
4 changed files with 209 additions and 54 deletions

View File

@@ -55,8 +55,8 @@ export async function loadProfiles() {
function renderProfiles(profiles, runningTargetIds = new Set()) {
const container = document.getElementById('profiles-content');
const cardsHtml = profiles.map(p => createProfileCard(p, runningTargetIds)).join('');
container.innerHTML = csProfiles.render(cardsHtml, profiles.length);
const items = profiles.map(p => ({ key: p.id, html: createProfileCard(p, runningTargetIds) }));
container.innerHTML = csProfiles.render(items);
csProfiles.bind();
// Localize data-i18n elements within the profiles container only