components/sidebar.py

"""
Sidebar component with module and parameter selection dropdowns.

This component provides the left sidebar interface for selecting:
- Attention modules
- Layer blocks (residual stream outputs)
- Normalization parameters
- Logit lens parameters
"""

from dash import html, dcc

def create_sidebar():
    """Create the left sidebar with selection dropdowns."""
    return html.Div([
        # Toggle button for collapsing/expanding sidebar
        html.Button(
            html.I(className="fas fa-chevron-right"),  # Start with right chevron (collapsed)
            id="sidebar-toggle-btn",
            className="sidebar-toggle-button",
            title="Toggle sidebar"
        ),
        
        # Sidebar content (hidden when collapsed)
        html.Div([
            # Help / Glossary Button
            html.Div([
                html.Button(
                    [html.I(className="fas fa-book", style={'marginRight': '8px'}), "Glossary"],
                    id="open-glossary-btn",
                    className="action-button secondary-button",
                    style={'marginBottom': '1rem', 'width': '100%'}
                )
            ]),

            html.H3("Module Selection", className="sidebar-title"),
            html.P("Advanced: Select which model components to inspect. "
                   "The defaults work well for most explorations.",
                   style={'color': '#6c757d', 'fontSize': '11px', 'marginBottom': '12px', 'lineHeight': '1.4'}),
        
        # Loading/status indicator
        html.Div(id="loading-indicator", className="loading-container"),
        
        # Attention modules dropdown
        html.Div([
            html.Label("Attention Modules:", className="dropdown-label"),
            dcc.Dropdown(
                id='attention-modules-dropdown',
                options=[],
                value=None,
                placeholder="Select attention modules...",
                multi=True,
                className="module-dropdown"
            )
        ], className="dropdown-container"),
        
        # Layer blocks dropdown (residual stream outputs)
        html.Div([
            html.Label("Layer Blocks:", className="dropdown-label"),
            dcc.Dropdown(
                id='block-modules-dropdown',
                options=[],
                value=None,
                placeholder="Select layer blocks...",
                multi=True,
                className="module-dropdown"
            )
        ], className="dropdown-container"),
        
        # Normalization parameters dropdown
        html.Div([
            html.Label("Normalization Parameters:", className="dropdown-label"),
            dcc.Dropdown(
                id='norm-params-dropdown',
                options=[],
                value=None,
                placeholder="Select norm parameters...",
                multi=True,
                className="module-dropdown"
            )
        ], className="dropdown-container"),
        
            # Action buttons
            html.Div([
                html.Button(
                    "Clear Selections", 
                    id="clear-selections-btn",
                    className="action-button secondary-button",
                    title="Reset all module selections to default"
                )
            ], className="button-container"),
            
            # Reset Ablation button (hidden by default, shown when in ablation mode)
            html.Div([
                html.Button(
                    [
                        html.I(className="fas fa-undo", style={'marginRight': '8px'}),
                        "Reset Ablation"
                    ],
                    id="reset-ablation-btn",
                    className="action-button warning-button",
                    style={'marginTop': '10px'}
                )
            ], id="reset-ablation-container", style={'display': 'none'})
        ], id="sidebar-content", className="sidebar-content")
        
    ])