Replace Cytoscape with accordion-based layer view

- Added html.Details/Summary accordion panels for each layer
- Display plain-language headers: 'Layer L{N}: likely {token} (p={prob})'
- Added token chips showing top-3 predictions between layers
- Gated old Cytoscape graph behind USE_LEGACY_CYTOSCAPE feature flag
- Added CSS for accordion styling with ellipsis truncation
- Created extract_layer_data() utility function
- All panels closed by default for compact flow view

app.py

@@ -9,7 +9,7 @@ import dash
 from dash import html, dcc, Input, Output, State, callback, no_update
 import dash_cytoscape as cyto
 from utils import (load_model_and_get_patterns, execute_forward_pass, format_data_for_cytoscape, 
-                   categorize_single_layer_heads, format_categorization_summary,
+                   extract_layer_data, categorize_single_layer_heads, format_categorization_summary,
                    compare_attention_layers, compare_output_probabilities, format_comparison_summary,
                    get_check_token_probabilities)
 from utils.model_config import get_auto_selections, get_model_family
@@ -528,6 +528,69 @@ def update_check_token_graph(check_token_data):
     
     return figure, {'flex': '1', 'minWidth': '300px', 'display': 'block'}
 
+# Callback to create accordion panels from layer data
+@app.callback(
+    Output('layer-accordions-container', 'children'),
+    [Input('session-activation-store', 'data')],
+    [State('model-dropdown', 'value')]
+)
+def create_layer_accordions(activation_data, model_name):
+    """Create accordion panels for each layer."""
+    if not activation_data or not model_name:
+        return html.P("Run analysis to see layer-by-layer predictions.", className="placeholder-text")
+    
+    try:
+        from transformers import AutoModelForCausalLM, AutoTokenizer
+        model = AutoModelForCausalLM.from_pretrained(model_name, attn_implementation='eager')
+        tokenizer = AutoTokenizer.from_pretrained(model_name)
+        
+        # Extract layer data
+        layer_data = extract_layer_data(activation_data, model, tokenizer)
+        
+        if not layer_data:
+            return html.P("No layer data available.", className="placeholder-text")
+        
+        # Create accordion panels
+        accordions = []
+        for i, layer in enumerate(layer_data):
+            layer_num = layer['layer_num']
+            top_token = layer.get('top_token', 'N/A')
+            top_prob = layer.get('top_prob', 0.0)
+            top_3 = layer.get('top_3_tokens', [])
+            
+            # Create summary header
+            if top_token:
+                summary_text = f"Layer L{layer_num}: likely '{top_token}' (p={top_prob:.3f})"
+            else:
+                summary_text = f"Layer L{layer_num}: (no prediction)"
+            
+            # Create accordion panel
+            panel = html.Details([
+                html.Summary(summary_text, className="layer-summary"),
+                html.Div([
+                    html.P(f"Layer {layer_num} details (placeholder for future content)")
+                ], className="layer-content")
+            ], className="layer-accordion")
+            
+            accordions.append(panel)
+            
+            # Add token chips between adjacent layers (not after last layer)
+            if i < len(layer_data) - 1 and top_3:
+                chips = html.Div([
+                    html.Span("→", className="token-arrow"),
+                    *[html.Span(f"{tok} ({prob:.2f})", className="token-chip") 
+                      for tok, prob in top_3]
+                ], className="token-chips-row")
+                accordions.append(chips)
+        
+        return html.Div(accordions)
+        
+    except Exception as e:
+        print(f"Error creating accordions: {e}")
+        import traceback
+        traceback.print_exc()
+        return html.P(f"Error creating layer view: {str(e)}", className="placeholder-text")
+
 # Enable Run Analysis button when requirements are met
 @app.callback(
     Output('run-analysis-btn', 'disabled'),

assets/style.css

@@ -434,6 +434,87 @@ body {
 }
 
 
+/* Layer accordion styles */
+.layer-accordions {
+    margin-top: 1rem;
+}
+
+.layer-accordion {
+    margin-bottom: 0.5rem;
+    border: 1px solid #e9ecef;
+    border-radius: 6px;
+    overflow: hidden;
+}
+
+.layer-summary {
+    padding: 0.75rem 1rem;
+    background-color: #f8f9fa;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    color: #495057;
+    list-style: none;
+    transition: background-color 0.2s ease;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    user-select: none;
+}
+
+.layer-summary:hover {
+    background-color: #e9ecef;
+}
+
+.layer-summary::-webkit-details-marker {
+    display: none;
+}
+
+.layer-summary::before {
+    content: '▶';
+    display: inline-block;
+    margin-right: 0.5rem;
+    transition: transform 0.2s ease;
+    font-size: 0.8em;
+}
+
+details[open] .layer-summary::before {
+    transform: rotate(90deg);
+}
+
+.layer-content {
+    padding: 1rem;
+    background-color: white;
+    border-top: 1px solid #e9ecef;
+}
+
+/* Token chips between layers */
+.token-chips-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    margin: 0.25rem 0;
+    background-color: #f8f9fa;
+    border-left: 3px solid #667eea;
+}
+
+.token-arrow {
+    color: #667eea;
+    font-size: 1.2em;
+    font-weight: bold;
+}
+
+.token-chip {
+    display: inline-block;
+    padding: 0.25rem 0.5rem;
+    background-color: white;
+    border: 1px solid #dee2e6;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #495057;
+    white-space: nowrap;
+}
+
 /* Responsive design */
 @media (max-width: 768px) {
     .content-container {
@@ -453,4 +534,8 @@ body {
     .header-title {
         font-size: 2rem;
     }
+    
+    .token-chips-row {
+        flex-wrap: wrap;
+    }
 }

components/main_panel.py

@@ -1,217 +1,223 @@
-"""
-Main panel component for the dashboard.
-
-This component contains:
-- Model selector and prompt input
-- Visualization area (placeholder for now)
-- Status and results display
-"""
-
-from dash import html, dcc
-import dash_cytoscape as cyto
-from .model_selector import create_model_selector
-
-def create_main_panel():
-    """Create the main content panel."""
-    return html.Div([
-        # Model selection section
-        html.Div([
-            html.H3("Model Configuration", className="section-title"),
-            create_model_selector()
-        ], className="config-section"),
-        
-        # Analysis loading indicator
-        html.Div(id="analysis-loading-indicator", className="loading-container"),
-        
-        # Check Token input with probability graph
-        html.Div([
-            html.Div([
-                html.Label("Check Token (optional):", className="input-label"),
-                dcc.Input(
-                    id='check-token-input',
-                    type='text',
-                    placeholder="Enter a token to track its probability...",
-                    value="",
-                    style={"width": "300px"},
-                    className="prompt-input"
-                )
-            ], style={"flex": "0 0 auto"}),
-            html.Div([
-                dcc.Graph(
-                    id='check-token-graph',
-                    figure={},
-                    style={'height': '450px', 'width': '100%'},
-                    config={'displayModeBar': False}
-                )
-            ], id='check-token-graph-container', style={'flex': '1', 'minWidth': '300px', 'display': 'none'})
-        ], className="input-container", style={"marginBottom": "1.5rem", "display": "flex", "gap": "1.5rem", "alignItems": "flex-start"}),
-        
-        # Visualization section (first prompt)
-        html.Div([
-            html.H3("Model Flow Visualization", className="section-title"),
-            html.Div([
-                cyto.Cytoscape(
-                    id='model-flow-graph',
-                    elements=[],
-                    layout={'name': 'preset'},
-                    style={'width': '100%', 'height': '400px'},
-                    zoom=1.0,
-                    pan={'x': 100, 'y': 200},
-                stylesheet=[
-                    # Node styles
-                    {
-                        'selector': 'node',
-                        'style': {
-                            'width': '60px',
-                            'height': '60px',
-                            'background-color': '#667eea',
-                            'border-color': '#5a67d8',
-                            'border-width': '2px',
-                            'label': 'data(label)',
-                            'text-valign': 'center',
-                            'color': 'white',
-                            'font-size': '10px',
-                            'text-wrap': 'wrap'
-                        }
-                    },
-                    # Divergent layer node style (red border for different prompts)
-                    {
-                        'selector': 'node.divergent-layer',
-                        'style': {
-                            'border-color': '#e53e3e',
-                            'border-width': '4px'
-                        }
-                    },
-                    # Output node style (distinct from layer nodes)
-                    {
-                        'selector': 'node[id="output_node"]',
-                        'style': {
-                            'width': '80px',
-                            'height': '80px',
-                            'background-color': '#48bb78',
-                            'border-color': '#38a169',
-                            'border-width': '3px',
-                            'label': 'data(label)',
-                            'text-valign': 'center',
-                            'color': 'white',
-                            'font-size': '11px',
-                            'font-weight': 'bold',
-                            'text-wrap': 'wrap',
-                            'shape': 'round-rectangle'
-                        }
-                    },
-                    # Edge styles
-                    {
-                        'selector': 'edge',
-                        'style': {
-                            'width': 'data(width)',
-                            'opacity': 'data(opacity)',
-                            'line-color': 'data(color)',
-                            'target-arrow-color': 'data(color)',
-                            'target-arrow-shape': 'triangle',
-                            'curve-style': 'bezier'
-                        }
-                    }
-                ]
-                ),
-                # Tooltip for edge hover
-                html.Div(id='edge-tooltip', style={'display': 'none'})
-            ], style={'position': 'relative'})
-        ], className="visualization-section"),
-        
-        # Second visualization (for comparison - initially hidden)
-        html.Div([
-            html.H3("Model Flow Visualization (Prompt 2)", className="section-title"),
-            html.Div([
-                cyto.Cytoscape(
-                    id='model-flow-graph-2',
-                    elements=[],
-                    layout={'name': 'preset'},
-                    style={'width': '100%', 'height': '400px'},
-                    zoom=1.0,
-                    pan={'x': 100, 'y': 200},
-                stylesheet=[
-                    # Node styles
-                    {
-                        'selector': 'node',
-                        'style': {
-                            'width': '60px',
-                            'height': '60px',
-                            'background-color': '#667eea',
-                            'border-color': '#5a67d8',
-                            'border-width': '2px',
-                            'label': 'data(label)',
-                            'text-valign': 'center',
-                            'color': 'white',
-                            'font-size': '10px',
-                            'text-wrap': 'wrap'
-                        }
-                    },
-                    # Divergent layer node style (red border for different prompts)
-                    {
-                        'selector': 'node.divergent-layer',
-                        'style': {
-                            'border-color': '#e53e3e',
-                            'border-width': '4px'
-                        }
-                    },
-                    # Output node style (distinct from layer nodes)
-                    {
-                        'selector': 'node[id="output_node"]',
-                        'style': {
-                            'width': '80px',
-                            'height': '80px',
-                            'background-color': '#48bb78',
-                            'border-color': '#38a169',
-                            'border-width': '3px',
-                            'label': 'data(label)',
-                            'text-valign': 'center',
-                            'color': 'white',
-                            'font-size': '11px',
-                            'font-weight': 'bold',
-                            'text-wrap': 'wrap',
-                            'shape': 'round-rectangle'
-                        }
-                    },
-                    # Edge styles
-                    {
-                        'selector': 'edge',
-                        'style': {
-                            'width': 'data(width)',
-                            'opacity': 'data(opacity)',
-                            'line-color': 'data(color)',
-                            'target-arrow-color': 'data(color)',
-                            'target-arrow-shape': 'triangle',
-                            'curve-style': 'bezier'
-                        }
-                    }
-                ]
-                ),
-                # Tooltip for edge hover
-                html.Div(id='edge-tooltip-2', style={'display': 'none'})
-            ], style={'position': 'relative'})
-        ], id="second-visualization-section", className="visualization-section", style={'display': 'none'}),
-        
-        # Two-Prompt Comparison section (shown when comparing)
-        html.Div([
-            html.H3("Two-Prompt Comparison Analysis", className="section-title"),
-            html.Div([
-                html.P(
-                    "Comparison analysis will appear here when two prompts are provided.",
-                    className="placeholder-text"
-                )
-            ], id="comparison-container", className="results-area")
-        ], id="comparison-section", className="results-section", style={'display': 'none'}),
-        
-        # Analysis Results section (layer-specific analysis on node click)
-        html.Div([
-            html.H3("Analysis Results", className="section-title"),
-            html.Div([
-                html.P(
-                    "Click a layer node to see detailed attention analysis and head categorization.",
-                    className="placeholder-text"
-                )
-            ], id="results-container", className="results-area")
-        ], className="results-section")
-        
-    ], className="main-panel-content")
+"""
+Main panel component for the dashboard.
+
+This component contains:
+- Model selector and prompt input
+- Visualization area (placeholder for now)
+- Status and results display
+"""
+
+from dash import html, dcc
+import dash_cytoscape as cyto
+from .model_selector import create_model_selector
+
+# Feature flag: set to True to show legacy Cytoscape graph
+USE_LEGACY_CYTOSCAPE = False
+
+def create_main_panel():
+    """Create the main content panel."""
+    return html.Div([
+        # Model selection section
+        html.Div([
+            html.H3("Model Configuration", className="section-title"),
+            create_model_selector()
+        ], className="config-section"),
+        
+        # Analysis loading indicator
+        html.Div(id="analysis-loading-indicator", className="loading-container"),
+        
+        # Check Token input with probability graph
+        html.Div([
+            html.Div([
+                html.Label("Check Token (optional):", className="input-label"),
+                dcc.Input(
+                    id='check-token-input',
+                    type='text',
+                    placeholder="Enter a token to track its probability...",
+                    value="",
+                    style={"width": "300px"},
+                    className="prompt-input"
+                )
+            ], style={"flex": "0 0 auto"}),
+            html.Div([
+                dcc.Graph(
+                    id='check-token-graph',
+                    figure={},
+                    style={'height': '450px', 'width': '100%'},
+                    config={'displayModeBar': False}
+                )
+            ], id='check-token-graph-container', style={'flex': '1', 'minWidth': '300px', 'display': 'none'})
+        ], className="input-container", style={"marginBottom": "1.5rem", "display": "flex", "gap": "1.5rem", "alignItems": "flex-start"}),
+        
+        # Visualization section (first prompt)
+        html.Div([
+            html.H3("Model Flow Visualization", className="section-title"),
+            # New accordion-based layer view
+            html.Div(id='layer-accordions-container', className="layer-accordions"),
+            # Legacy Cytoscape graph (gated by feature flag)
+            html.Div([
+                cyto.Cytoscape(
+                    id='model-flow-graph',
+                    elements=[],
+                    layout={'name': 'preset'},
+                    style={'width': '100%', 'height': '400px'},
+                    zoom=1.0,
+                    pan={'x': 100, 'y': 200},
+                stylesheet=[
+                    # Node styles
+                    {
+                        'selector': 'node',
+                        'style': {
+                            'width': '60px',
+                            'height': '60px',
+                            'background-color': '#667eea',
+                            'border-color': '#5a67d8',
+                            'border-width': '2px',
+                            'label': 'data(label)',
+                            'text-valign': 'center',
+                            'color': 'white',
+                            'font-size': '10px',
+                            'text-wrap': 'wrap'
+                        }
+                    },
+                    # Divergent layer node style (red border for different prompts)
+                    {
+                        'selector': 'node.divergent-layer',
+                        'style': {
+                            'border-color': '#e53e3e',
+                            'border-width': '4px'
+                        }
+                    },
+                    # Output node style (distinct from layer nodes)
+                    {
+                        'selector': 'node[id="output_node"]',
+                        'style': {
+                            'width': '80px',
+                            'height': '80px',
+                            'background-color': '#48bb78',
+                            'border-color': '#38a169',
+                            'border-width': '3px',
+                            'label': 'data(label)',
+                            'text-valign': 'center',
+                            'color': 'white',
+                            'font-size': '11px',
+                            'font-weight': 'bold',
+                            'text-wrap': 'wrap',
+                            'shape': 'round-rectangle'
+                        }
+                    },
+                    # Edge styles
+                    {
+                        'selector': 'edge',
+                        'style': {
+                            'width': 'data(width)',
+                            'opacity': 'data(opacity)',
+                            'line-color': 'data(color)',
+                            'target-arrow-color': 'data(color)',
+                            'target-arrow-shape': 'triangle',
+                            'curve-style': 'bezier'
+                        }
+                    }
+                ]
+                ),
+                # Tooltip for edge hover
+                html.Div(id='edge-tooltip', style={'display': 'none'})
+            ], id='legacy-cytoscape-container', style={'position': 'relative', 'display': 'block' if USE_LEGACY_CYTOSCAPE else 'none'})
+        ], className="visualization-section"),
+        
+        # Second visualization (for comparison - initially hidden, gated by feature flag)
+        html.Div([
+            html.H3("Model Flow Visualization (Prompt 2)", className="section-title"),
+            html.Div([
+                cyto.Cytoscape(
+                    id='model-flow-graph-2',
+                    elements=[],
+                    layout={'name': 'preset'},
+                    style={'width': '100%', 'height': '400px'},
+                    zoom=1.0,
+                    pan={'x': 100, 'y': 200},
+                stylesheet=[
+                    # Node styles
+                    {
+                        'selector': 'node',
+                        'style': {
+                            'width': '60px',
+                            'height': '60px',
+                            'background-color': '#667eea',
+                            'border-color': '#5a67d8',
+                            'border-width': '2px',
+                            'label': 'data(label)',
+                            'text-valign': 'center',
+                            'color': 'white',
+                            'font-size': '10px',
+                            'text-wrap': 'wrap'
+                        }
+                    },
+                    # Divergent layer node style (red border for different prompts)
+                    {
+                        'selector': 'node.divergent-layer',
+                        'style': {
+                            'border-color': '#e53e3e',
+                            'border-width': '4px'
+                        }
+                    },
+                    # Output node style (distinct from layer nodes)
+                    {
+                        'selector': 'node[id="output_node"]',
+                        'style': {
+                            'width': '80px',
+                            'height': '80px',
+                            'background-color': '#48bb78',
+                            'border-color': '#38a169',
+                            'border-width': '3px',
+                            'label': 'data(label)',
+                            'text-valign': 'center',
+                            'color': 'white',
+                            'font-size': '11px',
+                            'font-weight': 'bold',
+                            'text-wrap': 'wrap',
+                            'shape': 'round-rectangle'
+                        }
+                    },
+                    # Edge styles
+                    {
+                        'selector': 'edge',
+                        'style': {
+                            'width': 'data(width)',
+                            'opacity': 'data(opacity)',
+                            'line-color': 'data(color)',
+                            'target-arrow-color': 'data(color)',
+                            'target-arrow-shape': 'triangle',
+                            'curve-style': 'bezier'
+                        }
+                    }
+                ]
+                ),
+                # Tooltip for edge hover
+                html.Div(id='edge-tooltip-2', style={'display': 'none'})
+            ], style={'position': 'relative'})
+        ], id="second-visualization-section", className="visualization-section", style={'display': 'none' if not USE_LEGACY_CYTOSCAPE else 'none'}),
+        
+        # Two-Prompt Comparison section (shown when comparing)
+        html.Div([
+            html.H3("Two-Prompt Comparison Analysis", className="section-title"),
+            html.Div([
+                html.P(
+                    "Comparison analysis will appear here when two prompts are provided.",
+                    className="placeholder-text"
+                )
+            ], id="comparison-container", className="results-area")
+        ], id="comparison-section", className="results-section", style={'display': 'none'}),
+        
+        # Analysis Results section (layer-specific analysis on node click)
+        html.Div([
+            html.H3("Analysis Results", className="section-title"),
+            html.Div([
+                html.P(
+                    "Click a layer node to see detailed attention analysis and head categorization.",
+                    className="placeholder-text"
+                )
+            ], id="results-container", className="results-area")
+        ], className="results-section")
+        
+    ], className="main-panel-content")

todo.md

@@ -3,11 +3,11 @@
 Note: Minimal-change approach. Reuse existing files (`app.py`, `components/main_panel.py`, `utils/*`). Avoid new dependencies; use native `html.Details`/`html.Summary`, existing `dcc.Graph`, and current BertViz integration.
 
 ## Feature: Switch to panels with plain-language headers
-- [ ] Replace per-layer node display with `html.Details` (accordion) per layer in `components/main_panel.py`
-- [ ] Use `html.Summary` as header: `Layer L{N}: likely '{token}' (p={prob})`
-- [ ] Truncate long tokens in header with CSS (ellipsis); keep one-line summary
-- [ ] Add lightweight top-3 tokens “chips/arrows” between adjacent panel headers (no Cytoscape)
-- [ ] Gate old Cytoscape graph behind a feature flag (keep code path but hidden by default)
+- [x] Replace per-layer node display with `html.Details` (accordion) per layer in `components/main_panel.py`
+- [x] Use `html.Summary` as header: `Layer L{N}: likely '{token}' (p={prob})`
+- [x] Truncate long tokens in header with CSS (ellipsis); keep one-line summary
+- [x] Add lightweight top-3 tokens "chips/arrows" between adjacent panel headers (no Cytoscape)
+- [x] Gate old Cytoscape graph behind a feature flag (keep code path but hidden by default)
 
 ## Feature: Keep initial panels small to preserve flow view
 - [ ] Style summary rows compactly (single-line, small font, consistent height)

utils/__init__.py

@@ -1,4 +1,4 @@
-from .model_patterns import load_model_and_get_patterns, execute_forward_pass, logit_lens_transformation, format_data_for_cytoscape, generate_bertviz_html, generate_category_bertviz_html, get_check_token_probabilities
+from .model_patterns import load_model_and_get_patterns, execute_forward_pass, logit_lens_transformation, format_data_for_cytoscape, extract_layer_data, generate_bertviz_html, generate_category_bertviz_html, get_check_token_probabilities
 from .model_config import get_model_family, get_family_config, get_auto_selections, MODEL_TO_FAMILY, MODEL_FAMILIES
 from .head_detection import categorize_all_heads, categorize_single_layer_heads, format_categorization_summary, HeadCategorizationConfig
 from .prompt_comparison import compare_attention_layers, compare_output_probabilities, format_comparison_summary, ComparisonConfig
@@ -7,7 +7,8 @@ __all__ = [
     'load_model_and_get_patterns', 
     'execute_forward_pass', 
     'logit_lens_transformation', 
-    'format_data_for_cytoscape', 
+    'format_data_for_cytoscape',
+    'extract_layer_data',
     'generate_bertviz_html',
     'generate_category_bertviz_html',
     'get_check_token_probabilities',

utils/model_patterns.py

@@ -486,6 +486,50 @@ def format_data_for_cytoscape(activation_data: Dict[str, Any], model, tokenizer)
     return elements
 
 
+def extract_layer_data(activation_data: Dict[str, Any], model, tokenizer) -> List[Dict[str, Any]]:
+    """
+    Extract layer-by-layer data for accordion display.
+    
+    Returns:
+        List of dicts with: layer_num, top_token, top_prob, top_3_tokens (list of (token, prob))
+    """
+    layer_modules = activation_data.get('block_modules', [])
+    if not layer_modules:
+        return []
+    
+    # Extract and sort layers by layer number
+    layer_info = sorted(
+        [(int(re.findall(r'\d+', name)[0]), name) 
+         for name in layer_modules if re.findall(r'\d+', name)]
+    )
+    
+    logit_lens_enabled = activation_data.get('logit_lens_parameter') is not None
+    layer_data = []
+    
+    for layer_num, module_name in layer_info:
+        top_tokens = _get_top_tokens(activation_data, module_name, model, tokenizer) if logit_lens_enabled else None
+        
+        if top_tokens:
+            top_token, top_prob = top_tokens[0]
+            layer_data.append({
+                'layer_num': layer_num,
+                'module_name': module_name,
+                'top_token': top_token,
+                'top_prob': top_prob,
+                'top_3_tokens': top_tokens[:3]  # Get top 3 for chips
+            })
+        else:
+            layer_data.append({
+                'layer_num': layer_num,
+                'module_name': module_name,
+                'top_token': None,
+                'top_prob': None,
+                'top_3_tokens': []
+            })
+    
+    return layer_data
+
+
 def generate_bertviz_html(activation_data: Dict[str, Any], layer_index: int, view_type: str = 'full') -> str:
     """
     Generate BertViz attention visualization HTML using model_view.