Visualization Debug Console

# 🔍 Visualization Debug Console

This page helps diagnose issues with Dagre and Circular layouts in the visualization.

### ⚠️ Instructions:

1. Open this page: `http://localhost:8089` in a new browser tab
2. Open DevTools Console (F12 or Cmd+Option+I)
3. Return to this page and click the test buttons below
4. Copy the console output and share with the QA agent

## 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: