feat: default to expanded algorithm overview and tighten node layout

- Auto-select algorithm-overview with all steps shown on initial load
- Selecting algorithm-overview always shows it fully expanded
- Reduce node padding, spacing, and dimensions for tighter layout
- Increase label text size to 13px for better readability
- Add ResizeObserver mock for test compatibility
- Update store tests for new default state

Author: jonwiggins

src/components/FlowCanvas.tsx

@@ -19,8 +19,8 @@ const nodeTypes = {
 };
 
 // Node dimensions for layout calculation
-const NODE_WIDTH = 200;
-const NODE_HEIGHT = 60;
+const NODE_WIDTH = 180;
+const NODE_HEIGHT = 44;
 
 // Layout options for different modes
 interface LayoutOptions {
@@ -42,8 +42,8 @@ function getLayoutedElements(
     rankdir: options.direction,
     nodesep: options.nodesep,
     ranksep: options.ranksep,
-    marginx: 50,
-    marginy: 50,
+    marginx: 30,
+    marginy: 30,
     ranker: 'tight-tree', // Better for complex graphs
   });
 
@@ -207,8 +207,8 @@ export function FlowCanvas() {
 
     // Apply dagre layout with different settings for overview
     const layoutOptions: LayoutOptions = isOverview
-      ? { direction: 'TB', nodesep: 100, ranksep: 100, isOverview: true }
-      : { direction: 'TB', nodesep: 60, ranksep: 80 };
+      ? { direction: 'TB', nodesep: 60, ranksep: 60, isOverview: true }
+      : { direction: 'TB', nodesep: 40, ranksep: 50 };
 
     return getLayoutedElements(nodeArray, edgeList, layoutOptions);
   }, [executionLog, currentStep, selectedNodeId, isOverview]);

src/components/FlowNode.tsx

@@ -92,7 +92,7 @@ function FlowNode({ data, selected }: FlowNodeProps) {
   return (
     <div
       className={clsx(
-        'px-4 py-3 rounded-lg border-2 min-w-[180px] max-w-[240px] transition-all duration-300',
+        'px-3 py-2 rounded-lg border-2 min-w-[160px] max-w-[220px] transition-all duration-300',
         colorClass,
         statusClasses[data.status],
         selected && 'ring-2 ring-[#58a6ff] ring-offset-2 ring-offset-[#0d1117]',
@@ -101,26 +101,27 @@ function FlowNode({ data, selected }: FlowNodeProps) {
       <Handle
         type="target"
         position={Position.Top}
-        className="!bg-[#30363d] !border-[#58a6ff] !w-3 !h-3"
+        className="!bg-[#30363d] !border-[#58a6ff] !w-2.5 !h-2.5"
       />
       <div className="flex items-center gap-2">
         <Icon
-          size={18}
+          size={16}
           className={clsx(
+            'flex-none',
             data.status === 'active' && 'text-green-400',
             data.status === 'error' && 'text-red-400',
             data.status === 'completed' && 'text-[#c9d1d9]',
           )}
         />
-        <span className="text-sm font-medium truncate">{data.label}</span>
+        <span className="text-[13px] font-medium leading-tight">{data.label}</span>
       </div>
       {data.description && data.status === 'active' && (
         <p className="text-xs text-[#8b949e] mt-1 truncate">{data.description}</p>
       )}
       <Handle
         type="source"
         position={Position.Bottom}
-        className="!bg-[#30363d] !border-[#58a6ff] !w-3 !h-3"
+        className="!bg-[#30363d] !border-[#58a6ff] !w-2.5 !h-2.5"
       />
     </div>
   );

src/hooks/useScenarioFromUrl.ts

@@ -8,10 +8,14 @@ export function useScenarioFromUrl() {
   const selectScenario = useVisualizerStore((s) => s.selectScenario);
   const scenarios = useVisualizerStore((s) => s.scenarios);
 
-  // On mount: read scenario from URL
+  // On mount: read scenario from URL (skip if already selected)
   useEffect(() => {
     const scenarioId = searchParams.get('scenario');
-    if (scenarioId && scenarios.some((s) => s.id === scenarioId)) {
+    if (
+      scenarioId &&
+      scenarioId !== currentScenario?.id &&
+      scenarios.some((s) => s.id === scenarioId)
+    ) {
       selectScenario(scenarioId);
     }
     // Only run on mount

src/store.test.ts

@@ -5,25 +5,41 @@ describe('useVisualizerStore', () => {
     useVisualizerStore.setState(useVisualizerStore.getInitialState());
   });
 
-  it('initializes with correct defaults', () => {
+  it('initializes with algorithm-overview selected and fully expanded', () => {
     const state = useVisualizerStore.getState();
-    expect(state.currentScenario).toBeNull();
+    expect(state.currentScenario).not.toBeNull();
+    expect(state.currentScenario!.id).toBe('algorithm-overview');
     expect(state.scenarios.length).toBeGreaterThan(0);
-    expect(state.currentStep).toBe(-1);
-    expect(state.playbackState).toBe('idle');
+    expect(state.currentStep).toBe(state.currentScenario!.steps.length - 1);
+    expect(state.playbackState).toBe('finished');
     expect(state.playbackSpeed).toBe(1000);
   });
 
   it('selects a scenario by id', () => {
     const state = useVisualizerStore.getState();
-    const firstScenario = state.scenarios[0];
+    // Select a non-overview scenario
+    const scenario = state.scenarios.find((s) => s.id === 'simple-read')!;
 
-    state.selectScenario(firstScenario.id);
+    state.selectScenario(scenario.id);
 
     const updated = useVisualizerStore.getState();
     expect(updated.currentScenario).not.toBeNull();
-    expect(updated.currentScenario!.id).toBe(firstScenario.id);
+    expect(updated.currentScenario!.id).toBe('simple-read');
     expect(updated.currentStep).toBe(-1);
     expect(updated.playbackState).toBe('idle');
   });
+
+  it('selects algorithm-overview fully expanded', () => {
+    const state = useVisualizerStore.getState();
+
+    // First select a different scenario
+    state.selectScenario('simple-read');
+    // Then select overview
+    useVisualizerStore.getState().selectScenario('algorithm-overview');
+
+    const updated = useVisualizerStore.getState();
+    expect(updated.currentScenario!.id).toBe('algorithm-overview');
+    expect(updated.currentStep).toBe(updated.currentScenario!.steps.length - 1);
+    expect(updated.playbackState).toBe('finished');
+  });
 });

src/store.ts

@@ -91,13 +91,16 @@ const defaultSandbox: SandboxConfig = {
 
 const initialNodes = new Map<string, AlgorithmNode>();
 
+// Default to algorithm-overview with all steps shown
+const defaultScenario = scenarios.find((s) => s.id === 'algorithm-overview')!;
+
 export const useVisualizerStore = create<VisualizerState>((set, get) => ({
-  currentScenario: null,
+  currentScenario: defaultScenario,
   scenarios,
   nodes: initialNodes,
-  currentStep: -1,
-  executionLog: [],
-  playbackState: 'idle',
+  currentStep: defaultScenario.steps.length - 1,
+  executionLog: defaultScenario.steps,
+  playbackState: 'finished' as PlaybackState,
   playbackSpeed: 1000,
   sandbox: defaultSandbox,
   selectedNodeId: null,
@@ -115,12 +118,15 @@ export const useVisualizerStore = create<VisualizerState>((set, get) => ({
       ...scenario.sandboxOverrides,
     };
 
+    // Algorithm overview starts fully expanded
+    const isOverview = scenarioId === 'algorithm-overview';
+
     set({
       currentScenario: scenario,
       nodes,
-      currentStep: -1,
-      executionLog: [],
-      playbackState: 'idle',
+      currentStep: isOverview ? scenario.steps.length - 1 : -1,
+      executionLog: isOverview ? scenario.steps : [],
+      playbackState: isOverview ? 'finished' : 'idle',
       sandbox,
       selectedNodeId: null,
     });

src/test/setup.ts

@@ -1,5 +1,12 @@
 import '@testing-library/jest-dom/vitest';
 
+// Mock ResizeObserver for jsdom (required by @xyflow/react)
+window.ResizeObserver = class ResizeObserver {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+} as unknown as typeof ResizeObserver;
+
 // Mock window.matchMedia for jsdom
 Object.defineProperty(window, 'matchMedia', {
   writable: true,