No selections queued.
';
+ return;
+ }
+
+ let html = '';
+ for (let i = 0; i < list.length; i++) {
+ const r = list[i];
+ const label = (r.resolved_model?.relative_path || r.resolved_model?.filename || r.resolved_path || '').toString();
+ const nodeLabel = r.node_label || r.node_type || (r.subgraph_id ? 'Subgraph' : 'Node');
+ const orig = (r.original_path || '').toString();
+ const rmId = `queue-remove-${i}`;
+ html += `
`;
+ html += `
${nodeLabel} #${r.node_id}
`;
+ html += `
Original: ${orig}
`;
+ html += `
Selected: ${label}
`;
+ html += `
`;
+ }
+ html += '
';
+ this.queueList.innerHTML = html;
+
+ // Wire remove buttons
+ for (let i = 0; i < list.length; i++) {
+ const rmId = `queue-remove-${i}`;
+ const btn = this.queueList.querySelector(`#${rmId}`);
+ if (btn) {
+ btn.addEventListener('click', () => this.removeQueuedByIndex(i));
+ }
+ }
+ }
+
+ // Remove queued by index
+ removeQueuedByIndex(i) {
+ const list = Array.isArray(this.pendingResolutions) ? this.pendingResolutions : [];
+ if (i < 0 || i >= list.length) return;
+ const r = list[i];
+ // Remove
+ this.pendingResolutions.splice(i, 1);
+ this.rebuildPendingIndex();
+ // Update per-item selected bar
+ const m = { node_id: r.node_id, widget_index: r.widget_index, subgraph_id: r.subgraph_id, is_top_level: r.is_top_level };
+ this.updateSelectedBarForMissing?.(m);
+ this.updateApplyPendingButton?.();
+ this.updateQueuePanel();
+ }
+
+ // Clear all queued selections
+ clearAllQueued() {
+ this.pendingResolutions = [];
+ this.pendingIndex = new Map();
+ this.updateApplyPendingButton?.();
+ this.updateQueuePanel();
+ try {
+ document.querySelectorAll('.model-linker-selected').forEach(el => { el.style.display = 'none'; el.innerHTML = ''; });
+ } catch (e) { /* ignore */ }
+ }
+
+ // Rebuild pending index after modification
+ rebuildPendingIndex() {
+ this.pendingIndex = new Map();
+ for (let i = 0; i < this.pendingResolutions.length; i++) {
+ const r = this.pendingResolutions[i];
+ const key = `${r.node_id}:${r.widget_index}:${r.subgraph_id || ''}:${r.is_top_level ? 'T' : 'F'}`;
+ this.pendingIndex.set(key, i);
+ }
+ }
+
+ // Collapse/expand queue panel
+ toggleQueueCollapsed() {
+ this.setQueueCollapsed(!this.queueCollapsed);
+ }
+
+ setQueueCollapsed(collapsed) {
+ this.queueCollapsed = !!collapsed;
+ if (!this.queueElement || !this.splitterElement) return;
+ if (this.queueCollapsed) {
+ this.queueElement.style.display = 'none';
+ this.splitterElement.style.display = 'none';
+ try { localStorage.setItem('model_linker_queue_collapsed', '1'); } catch (e) { }
+ } else {
+ this.queueElement.style.display = '';
+ this.splitterElement.style.display = '';
+ try { localStorage.setItem('model_linker_queue_collapsed', '0'); } catch (e) { }
+ }
+ this.updateQueuePanel();
+ this.updateQueueToggleIcon();
+ }
+
+ updateQueueToggleIcon() {
+ if (!this.queueToggleIcon) return;
+ if (this.queueCollapsed) {
+ this.queueToggleIcon.textContent = '⮞';
+ this.queueToggleIcon.title = 'Expand queue';
+ } else {
+ this.queueToggleIcon.textContent = '⮜';
+ this.queueToggleIcon.title = 'Collapse queue';
+ }
+ }
+
+ // Begin split drag for resizable panels
+ startSplitDrag(e) {
+ try {
+ if (!this.queueElement) return;
+ const rect = this.queueElement.getBoundingClientRect();
+ const body = document.getElementById('model-linker-body');
+ const bodyRect = body ? body.getBoundingClientRect() : { width: window.innerWidth };
+ this._splitDragging = true;
+ this._splitStart = {
+ x: e.clientX,
+ startWidth: rect.width,
+ containerWidth: bodyRect.width
+ };
+ this._prevUserSelect = document.body.style.userSelect;
+ document.body.style.userSelect = 'none';
+ this._onSplitMove = (ev) => this.onSplitDrag(ev);
+ this._onSplitUp = () => this.endSplitDrag();
+ document.addEventListener('mousemove', this._onSplitMove);
+ document.addEventListener('mouseup', this._onSplitUp, { once: true });
+ } catch (err) { /* ignore */ }
+ }
+
+ onSplitDrag(e) {
+ if (!this._splitDragging || !this._splitStart || !this.queueElement) return;
+ const dx = e.clientX - this._splitStart.x;
+ let newW = this._splitStart.startWidth - dx;
+ const minW = 240;
+ const maxW = Math.max(minW, Math.floor(this._splitStart.containerWidth - 360));
+ if (newW < minW) newW = minW;
+ if (newW > maxW) newW = maxW;
+ this.queueElement.style.width = `${Math.round(newW)}px`;
+ }
+
+ endSplitDrag() {
+ if (!this._splitDragging) return;
+ this._splitDragging = false;
+ document.removeEventListener('mousemove', this._onSplitMove);
+ try {
+ const rect = this.queueElement.getBoundingClientRect();
+ localStorage.setItem('model_linker_split_w', String(Math.round(rect.width)));
+ } catch (e) { }
+ try { document.body.style.userSelect = this._prevUserSelect || ''; } catch (e) { }
+ }
+
+ /**
+ * Queue a resolution for later batch apply
+ */
+ queueResolution(missing, resolvedModel) {
+ if (!resolvedModel) {
+ this.showNotification('No model selected', 'error');
+ return;
+ }
+
+ const resolution = {
+ node_id: missing.node_id,
+ widget_index: missing.widget_index,
+ resolved_path: resolvedModel.path,
+ category: missing.category,
+ resolved_model: resolvedModel,
+ original_path: missing.original_path,
+ subgraph_id: missing.subgraph_id,
+ is_top_level: missing.is_top_level,
+ node_type: missing.node_type,
+ node_label: missing.subgraph_name || missing.node_type
+ };
+
+ const key = `${resolution.node_id}:${resolution.widget_index}:${resolution.subgraph_id || ''}:${resolution.is_top_level ? 'T' : 'F'}`;
+ if (this.pendingIndex.has(key)) {
+ // replace existing selection for this slot
+ const idx = this.pendingIndex.get(key);
+ this.pendingResolutions[idx] = resolution;
+ } else {
+ this.pendingIndex.set(key, this.pendingResolutions.length);
+ this.pendingResolutions.push(resolution);
+ }
+
+ // Update selected bar UI
+ this.updateSelectedBarForMissing?.(missing);
+ this.updateQueuePanel();
+ this.updateApplyPendingButton();
+ }
+
+ /**
+ * Apply all pending resolutions in batch
+ */
+ async applyPendingResolutions() {
+ const list = this.pendingResolutions || [];
+ if (!list.length) {
+ this.showNotification('No selections queued', 'error');
+ return;
+ }
+
+ try {
+ const workflow = this.getCurrentWorkflow();
+ if (!workflow) {
+ this.showNotification('No workflow loaded', 'error');
+ return;
+ }
+
+ const response = await api.fetchApi('/model_linker/resolve', {
+ method: 'POST',
+ headers: { 'Content-Type': 'application/json' },
+ body: JSON.stringify({ workflow, resolutions: list })
+ });
+
+ if (!response.ok) throw new Error(`API error: ${response.status}`);
+
+ const data = await response.json();
+ if (data.success) {
+ await this.updateWorkflowInComfyUI(data.workflow);
+ this.showNotification(`✓ Linked ${list.length} selection${list.length>1?'s':''}`, 'success');
+ // Clear queue and refresh analysis
+ this.pendingResolutions = [];
+ this.pendingIndex = new Map();
+ this.updateApplyPendingButton();
+ this.updateQueuePanel();
+ await this.loadWorkflowData(data.workflow);
+ } else {
+ this.showNotification('Failed to apply selections: ' + (data.error || 'Unknown error'), 'error');
+ }
+ } catch (e) {
+ console.error('Model Linker: applyPendingResolutions error', e);
+ this.showNotification('Error applying selections: ' + e.message, 'error');
+ }
+ }
+
+ updateApplyPendingButton() {
+ if (!this.applyPendingBtn) return;
+ const count = this.pendingResolutions?.length || 0;
+ this.applyPendingBtn.textContent = `Apply Selected (${count})`;
+ this.applyPendingBtn.disabled = count === 0;
}
createFooter() {
@@ -999,6 +1613,17 @@ class LinkerManagerDialog extends ComfyDialog {
$el("span", { textContent: " Auto-Link 100%" })
]);
+ // Apply pending resolutions button
+ this.applyPendingBtn = $el("button.ml-btn.ml-btn-primary", {
+ id: "apply-pending-resolutions",
+ textContent: "Apply Selected (0)",
+ onclick: () => this.applyPendingResolutions(),
+ style: {
+ padding: "10px 20px",
+ fontSize: "13px"
+ }
+ });
+
return $el("div.ml-footer", {
style: {
position: "sticky",
@@ -1009,6 +1634,7 @@ class LinkerManagerDialog extends ComfyDialog {
}
}, [
this.autoResolveButton,
+ this.applyPendingBtn,
this.downloadAllButton
]);
}
@@ -1071,6 +1697,9 @@ class LinkerManagerDialog extends ComfyDialog {
// Update button state in case there are active downloads
this.updateDownloadAllButtonState();
+ // Ensure all models are loaded for dropdown
+ await this.ensureAllModelsLoaded();
+
// Always default to Missing Models tab when opening dialog
if (this.activeTab !== 'missing') {
// Manually switch tab without loading
@@ -1081,11 +1710,18 @@ class LinkerManagerDialog extends ComfyDialog {
this.autoResolveButton.style.display = 'inline-flex';
}
+ // Restore fullscreen state if enabled
+ try {
+ const fs = localStorage.getItem('model_linker_modal_fullscreen');
+ if (fs === '1') this.setFullScreen(true);
+ } catch (e) { }
+
// Use provided workflow or fetch from current graph
await this.loadWorkflowData(workflow);
}
close() {
+ this._hidePreview?.();
this.backdrop.style.display = "none";
this.element.style.display = "none";
}
@@ -1356,6 +1992,59 @@ class LinkerManagerDialog extends ComfyDialog {
this.searchOnline(missing);
});
}
+
+ // Wire up all-models search + dropdown
+ const allSearchId = `search-all-${missing.node_id}-${missing.widget_index}`;
+ const selectAllId = `select-all-${missing.node_id}-${missing.widget_index}`;
+ const resolveAllId = `resolve-all-${missing.node_id}-${missing.widget_index}`;
+ const searchEl = container.querySelector(`#${allSearchId}`);
+ const selectAllEl = container.querySelector(`#${selectAllId}`);
+ const resolveAllBtn = container.querySelector(`#${resolveAllId}`);
+
+ const allModels = Array.isArray(this.allModels) ? this.allModels : [];
+ const buildLabel = (m) => `${m.category ? m.category + ': ' : ''}${m.relative_path || m.filename || ''}`;
+
+ const populateAllOptions = (filterText) => {
+ if (!selectAllEl) return;
+ const f = (filterText || '').toLowerCase();
+ const filtered = f
+ ? allModels.filter(m => buildLabel(m).toLowerCase().includes(f))
+ : allModels;
+ // Build options HTML
+ let opts = '';
+ for (let i = 0; i < filtered.length; i++) {
+ const m = filtered[i];
+ const label = buildLabel(m);
+ // use index in allModels for value; keep stable mapping
+ const valueIndex = allModels.indexOf(m);
+ if (valueIndex >= 0) {
+ opts += `
`;
+ }
+ }
+ selectAllEl.innerHTML = opts;
+ };
+
+ if (selectAllEl) {
+ populateAllOptions('');
+ }
+ if (searchEl) {
+ const debouncedFilter = this.debounce(() => {
+ populateAllOptions(searchEl.value);
+ }, 250);
+ searchEl.addEventListener('input', debouncedFilter);
+ }
+ if (resolveAllBtn && selectAllEl) {
+ resolveAllBtn.addEventListener('click', () => {
+ const idx = parseInt(selectAllEl.value, 10);
+ if (!isNaN(idx) && idx >= 0 && idx < allModels.length) {
+ const chosenModel = allModels[idx];
+ if (chosenModel) {
+ // Queue the resolution instead of direct apply
+ this.queueResolution(missing, chosenModel);
+ }
+ }
+ });
+ }
});
}
@@ -1483,6 +2172,17 @@ class LinkerManagerDialog extends ComfyDialog {
html += `
No local matches found
`;
}
+ // Add all-models search picker
+ const searchId = `search-all-${missing.node_id}-${missing.widget_index}`;
+ const selectAllId = `select-all-${missing.node_id}-${missing.widget_index}`;
+ const resolveAllId = `resolve-all-${missing.node_id}-${missing.widget_index}`;
+ html += `
`;
+ html += `
Search all models:
`;
+ html += `
`;
+ html += `
`;
+ html += `
`;
+ html += `
`;
+
html += `