Show filename and expandable other matches in linker

Display the expected filename in the missing-item title and enable wrapping for node/category chips. Remove the duplicated filename row and make the "other matches below 100%" note expandable: clicking it toggles a hidden list of alternative matches. Each alternative now shows a confidence badge, truncated filename/path with tooltip, and a Link button that triggers the existing resolve action. These changes improve readability and UX when many matches are present.
This commit is contained in:
Dariusz L
2026-04-17 23:50:50 +02:00
parent c703a26317
commit 8f9597eb10
+20 -3
View File
@@ -1045,16 +1045,21 @@ class LinkerManagerDialog extends ComfyDialog {
const versionLabel = modelUrl ? `<a href="${modelUrl}" target="_blank" style="color: #FF9800; font-size: 14px; text-decoration: none;">${civitaiLabel}</a>` : `<span style="color: var(--ml-text-muted); font-size: 14px;">${civitaiLabel}</span>`;
titleHtml += ` ${versionLabel}`;
}
// Add filename in quotes
if (missing.civitai_info.expected_filename) {
titleHtml += ` <span style="color: var(--ml-text-muted); font-size: 12px;">"${missing.civitai_info.expected_filename}"</span>`;
}
} else if (missing.civitai_info && missing.civitai_info.model_name) {
titleHtml += ` <span style="color: var(--ml-text-muted); font-size: 14px;">(${missing.civitai_info.model_name})</span>`;
}
html += `<h3 class="ml-card-title">${titleHtml}</h3>`;
html += `<div style="display: flex; align-items: center; gap: 6px;">`;
html += `<div style="display: flex; align-items: center; gap: 6px; flex-wrap: wrap;">`;
if (missing.category) {
html += `<span class="ml-category-chip">${missing.category}</span>`;
}
html += `<span class="ml-node-chip">${nodeLabel} #${missing.node_id}</span>`;
html += `</div>`;
// Removed - filename is already shown in title
html += `</div>`;
// Two-column layout
@@ -1093,9 +1098,21 @@ class LinkerManagerDialog extends ComfyDialog {
html += `</div>`;
}
// Add note if only showing 100% matches
// Add note if only showing 100% matches - make it expandable
if (perfectMatches.length > 0 && otherMatches.length > 0) {
html += `<div class="ml-no-matches">${otherMatches.length} other match${otherMatches.length > 1 ? 'es' : ''} below 100%</div>`;
const matchId = `more-matches-${missing.node_id}-${missing.widget_index}`;
html += `<div class="ml-no-matches" style="cursor: pointer; color: #2196F3;" onclick="document.getElementById('${matchId}').style.display = document.getElementById('${matchId}').style.display === 'none' ? 'block' : 'none'; this.textContent = this.textContent === '${otherMatches.length} other matches below 100%' ? 'Hide alternatives' : '${otherMatches.length} other matches below 100%'">${otherMatches.length} other match${otherMatches.length > 1 ? 'es' : ''} below 100%</div>`;
// Hidden container with other matches
html += `<div id="${matchId}" style="display: none; flex-direction: column; gap: 4px; margin-top: 8px;">`;
for (const match of otherMatches) {
const confClass = match.confidence >= 70 ? 'ml-badge-medium' : 'ml-badge-low';
html += `<div class="ml-match-row" style="padding: 4px; background: var(--ml-bg-secondary); border-radius: 4px;">`;
html += `<span class="ml-badge ${confClass}">${match.confidence}%</span>`;
html += `<span class="ml-match-filename" title="${match.path || match.filename}" style="flex: 1; overflow: hidden; text-overflow: ellipsis;">${match.filename || match.path?.split(/[/\\]/).pop()}</span>`;
html += `<button class="ml-btn ml-btn-secondary ml-btn-sm" onclick="document.getElementById('resolve-${missing.node_id}-${missing.widget_index}').click()">🔗 Link</button>`;
html += `</div>`;
}
html += `</div>`;
}
} else if (allMatches.length > 0 && filteredMatches.length === 0) {
html += `<div class="ml-no-matches">No matches above 70% confidence</div>`;