Enhance heat map with additional token probability, add storybook

[jon-bell]

Add Storybook Support for Heatmap Components

Overview

This PR introduces Storybook integration to the project, enabling isolated development and testing of UI components. The initial focus is on the Heatmap visualization components used by Logit Lens, with comprehensive stories and mock providers to support interactive development.

Key Changes

Storybook Setup

• Configuration: Added .storybook/ directory with:

  • main.ts: Storybook configuration using @storybook/nextjs-vite framework
  • preview.tsx: Global decorators and parameters for all stories
  • vitest.setup.ts: Test setup for Storybook integration
  • Mock utilities for server-side dependencies (db-client.ts, dotenv.ts)

• Addons: Integrated essential Storybook addons:

  • @chromatic-com/storybook - Visual testing
  • @storybook/addon-vitest - Component testing
  • @storybook/addon-a11y - Accessibility testing
  • @storybook/addon-docs - Documentation
  • @storybook/addon-onboarding - Getting started guide

• Vite Configuration: Custom Vite plugin to mock server-side dependencies (better-sqlite3, postgres, dotenv) that aren't compatible with browser environments

Heatmap Component Stories

• Heatmap.stories.tsx: Standalone Heatmap component stories with various data configurations

• HeatmapCard.stories.tsx: Full HeatmapCard stories with all context providers

• Mock Providers: Created Storybook-specific mock providers:

  • MockHeatmapDataProvider - Provides mock heatmap data
  • MockHeatmapCanvasProvider - Handles canvas overlay functionality
  • MockHeatmapHoverProvider - Manages hover state
  • MockViewProvider - Mocks view persistence (no backend required)
  • StorybookHeatmapCard - Wrapper component for Storybook stories
  • StorybookTokenPopover - Storybook version of TokenPopover

• Mock Data: Comprehensive mock data generator (mockData.ts) for testing various heatmap scenarios

• Mock Hooks: Custom hooks for Storybook (useMockSelection.tsx, useMockAnnotationSelection.ts)

Component Updates

• TokenPopover: New component replacing the simpler Tooltip component

  • Displays top N tokens with probability bars
  • Smart positioning to avoid screen edges
  • Color-coded probability visualization using d3-scale-chromatic
  • Configurable maxTokens prop (default: 10)

• Heatmap.tsx: Minor updates to support Storybook integration

Testing Infrastructure

• Vitest Configuration: Added vitest.config.ts with Storybook test integration
  • Browser-based testing using Playwright
  • Storybook test plugin configuration
  • Setup files for test environment

Scripts

• npm run storybook - Start Storybook dev server on port 6006
• npm run build-storybook - Build static Storybook site

Other Changes

• Updated .gitignore to exclude Storybook build artifacts
• Updated ESLint configuration to include Storybook plugin
• Added example stories (Button, Header, Page) from Storybook onboarding

Next steps

• Further enhance the heat map visualization
• Integrate with API to retrieve real data

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
workbench	Error			Dec 8, 2025 2:32pm