Skip to content

Add choice info row to include ICL examples #34

Merged
PaulHax merged 4 commits intomainfrom
icl
Jul 31, 2025
Merged

Add choice info row to include ICL examples #34
PaulHax merged 4 commits intomainfrom
icl

Conversation

@PaulHax
Copy link
Collaborator

@PaulHax PaulHax commented Jul 31, 2025

Add Choice Info Display and Consolidate Table Formatting Code

image

Summary

This PR adds a new "Choice Info" row to the experiment results table and consolidates all table formatting logic into a dedicated module for better code organization.

Key Features

🆕 Choice Info Display (commit 90b84fd)

  • New Choice Info row in the results table that displays the choice_info section from input/output JSON
  • Expandable sections for each top-level key with "Show Details" buttons
  • Special handling for ICL responses with proper text processing for escaped characters and newlines
  • Line-based text preview showing first 3 lines of ICL prompts before "Show More"
  • Generic schema support works with any ADM's choice_info structure
  • Clean styling with proper spacing and responsive layout

🔧 Code Architecture Improvements (commits 5b031c9, 16169e5)

  • Consolidated table formatting into dedicated table-formatter.js module
  • Reduced app.js complexity from 1500+ lines with clear separation of concerns
  • ES6 module structure with direct function exports matching existing patterns
  • Proper dependency management with direct KDMAUtils import instead of parameter threading
  • Comprehensive formatting utilities for choices, KDMAs, dropdowns, and all table content

Technical Details

Choice Info Features:

  • Handles varying schemas across different ADMs
  • Special processing for "icl_example_responses" with escaped character handling
  • Preserves newlines in ICL prompts with white-space: pre-wrap
  • Unique DOM IDs per run column to prevent cross-column interference
  • State persistence for expandable content

Code Organization:

  • Moved 577+ lines of formatting code to dedicated module
  • All HTML template constants, CSS classes, and formatting functions centralized
  • Clean function signatures with proper parameter passing
  • Maintained 100% functionality - all 51 tests pass

Testing

  • ✅ All 51 tests pass including 12 comprehensive frontend tests
  • ✅ Browser automation tests verify UI loading, dropdowns, scenarios, results display
  • ✅ No console errors
  • ✅ Responsive layout verified
  • ✅ Code quality checks pass (ruff linting and formatting)

Files Changed

  • align_browser/static/index.html - Added choice_info table row
  • align_browser/static/app.js - Reduced complexity, updated imports
  • align_browser/static/table-formatter.js - New comprehensive formatting module
  • align_browser/static/style.css - Added choice_info styling

This PR significantly improves both the user experience with rich choice_info display and developer experience with cleaner, more maintainable code architecture.

PaulHax added 2 commits July 31, 2025 08:14
Allow users to point directly at a single experiment directory instead of requiring a parent directory containing experiments. The parser now checks if the given path itself is a valid experiment directory before recursively searching subdirectories.

This enables usage like:
uv run align-browser --dev ./experiment-data/icl_test/pipeline_comp_reg_icl_test/
Add comprehensive choice_info display functionality with:
- Expandable sections for each top-level key with summary and details
- Special handling for predicted_kdma_values and icl_example_responses
- Proper text processing for escaped characters in ICL prompts
- Unique section IDs per run column to prevent cross-column interference
- Positioned after justification row for logical grouping
- Generic fallback for unknown choice_info structures
@PaulHax PaulHax changed the title feat: support direct experiment directory paths in CLI Add choice info row to include ICL examples Jul 31, 2025
PaulHax added 2 commits July 31, 2025 10:04
Move all table formatting functions from app.js to table-formatter.js to create clear separation between business logic and presentation logic. This consolidation reduces app.js from 1500+ lines and creates a comprehensive formatting module.

Key changes:
- Move choice/KDMA formatting functions to table-formatter.js
- Move dropdown generation and KDMA control creation functions
- Move core value formatting and comparison utilities
- Update function signatures to properly pass dependencies (pinnedRuns, KDMAUtils)
- Fix JavaScript initialization order to prevent "Cannot access before initialization" errors
- Clean up duplicate code and unused imports

All 51 tests pass, confirming functionality is preserved while improving code organization and maintainability.
Replace awkward parameter passing of KDMAUtils with direct import from state.js. This simplifies function signatures and makes the code more maintainable by removing the need to thread KDMAUtils through multiple function calls.

All tests continue to pass, confirming the refactor preserves functionality.
@PaulHax PaulHax merged commit 545ff39 into main Jul 31, 2025
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant