🔍 Visualization Debug Console

Manual Console Tests

Copy and paste these commands into the browser console at http://localhost:8089:

Test 1: Check Initial Data State

// Run this BEFORE switching layouts
console.log('=== INITIAL DATA STATE ===');
console.log('allLinks.length:', allLinks?.length);
console.log('allNodes.length:', allNodes?.length);
console.log('First link:', allLinks?.[0]);
console.log('First link source type:', typeof allLinks?.[0]?.source);
console.log('First link target type:', typeof allLinks?.[0]?.target);
console.log('Current layout:', currentLayout);
console.log('================================');

Test 2: Check After Switching to Dagre

// Run this AFTER switching to Dagre layout
console.log('=== AFTER DAGRE SWITCH ===');
console.log('Current layout:', currentLayout);
console.log('Cytoscape exists:', !!cy);
console.log('Cytoscape nodes:', cy?.nodes().length);
console.log('Cytoscape edges:', cy?.edges().length);
if (cy && cy.edges().length > 0) {
    console.log('First edge data:', cy.edges()[0].data());
} else {
    console.log('⚠️ NO EDGES FOUND IN CYTOSCAPE');
}
console.log('First link source after switch:', typeof allLinks?.[0]?.source);
console.log('================================');

Test 3: Check After Switching to Circular

// Run this AFTER switching to Circular layout
console.log('=== AFTER CIRCULAR SWITCH ===');
console.log('Current layout:', currentLayout);
console.log('Cytoscape exists:', !!cy);
console.log('Cytoscape nodes:', cy?.nodes().length);
console.log('Cytoscape edges:', cy?.edges().length);
if (cy && cy.edges().length > 0) {
    console.log('First edge data:', cy.edges()[0].data());
} else {
    console.log('⚠️ NO EDGES FOUND IN CYTOSCAPE');
}
console.log('================================');

Test 4: Check Visible Links

// Check what links are being passed to Cytoscape
console.log('=== VISIBLE LINKS CHECK ===');
const visibleNodesList = allNodes.filter(n => visibleNodes.has(n.id));
const filteredLinks = getFilteredLinks();
const visibleLinks = filteredLinks.filter(l =>
    visibleNodes.has(l.source.id || l.source) &&
    visibleNodes.has(l.target.id || l.target)
);
console.log('Visible nodes:', visibleNodesList.length);
console.log('Filtered links:', filteredLinks.length);
console.log('Visible links:', visibleLinks.length);
if (visibleLinks.length > 0) {
    console.log('First visible link:', visibleLinks[0]);
    console.log('Source type:', typeof visibleLinks[0].source);
    console.log('Target type:', typeof visibleLinks[0].target);
} else {
    console.log('⚠️ NO VISIBLE LINKS');
}
console.log('================================');

Test 5: Check for Errors

// Monitor for errors during layout switch
console.clear();
console.log('=== SWITCHING TO DAGRE - WATCH FOR ERRORS ===');
document.getElementById('layoutSelector').value = 'dagre';
document.getElementById('layoutSelector').dispatchEvent(new Event('change'));

Test 6: Verify Cytoscape Dagre Extension

// Check if Dagre extension is loaded
console.log('=== CYTOSCAPE EXTENSIONS ===');
console.log('Cytoscape version:', cytoscape.version);
console.log('Dagre available:', typeof dagre !== 'undefined');
console.log('Cytoscape extensions:', Object.keys(cytoscape.extensions || {}));
console.log('================================');

Expected Results

✅ When Working Correctly:

allLinks.length: 150
allNodes.length: 80
First link source type: "string" (before Force layout) OR "object" (after Force layout)
Cytoscape nodes: 80
Cytoscape edges: 150
First edge data: {source: "some-id", target: "another-id", ...}

❌ When Broken (Edges):

Cytoscape edges: 0  ← NO EDGES!
⚠️ NO EDGES FOUND IN CYTOSCAPE
OR
Error: "Cannot create edge with source [object Object]"

❌ When Broken (Dagre Extension):

Error: Layout 'dagre' not found
OR
Dagre available: false

⚠️ When Circular Layout Has Wrong Config:

Circular layout may show nodes but layout options like 'rankDir' don't apply to circle layout.
This won't cause errors but may result in unexpected layout.

Testing Sequence

Follow this exact sequence and note results:

1. Load http://localhost:8089 in browser
2. Open DevTools Console (F12)
3. Run Test 1 (initial state)
4. Click "Hierarchical (Dagre)" in layout dropdown
5. Run Test 2 (after Dagre)
6. Observe: Does graph show? Any errors?
7. Click "Circular" in layout dropdown
8. Run Test 3 (after Circular)
9. Observe: Does graph show? Any errors?
10. Click "Force-Directed" in layout dropdown
11. Click "Hierarchical (Dagre)" again
12. Run Test 2 again
13. Note any differences from first Dagre test

Copy Results Here

After running tests, paste console output here and save/screenshot: