Pure HTML widgets

[cachafla]

Pull Request Description

What and why?

This PR introduces a new HTML-based rendering system that preserves interactive components (figures, tables, and progress bars) when notebooks are saved and reopened. This addresses a critical user experience issue where interactive Plotly charts and progress indicators were lost after saving notebooks.

Previously, ValidMind relied on ipywidgets for interactive components, which had two major limitations:

1. State Loss: Interactive Plotly figures and progress bars disappeared when notebooks were saved and reopened
2. Dependency Overhead: ipywidgets added unnecessary complexity and dependency management challenges
3. Limited Portability: Saved notebooks couldn't be shared with full interactivity preserved

Solution

We've implemented a self-contained HTML rendering system that:

• Embeds state directly in notebook cells - All figure data, metadata, and progress state are stored inline
• Uses vanilla JavaScript - No external widget dependencies required
• Maintains backwards compatibility - Existing code continues to work without changes
• Provides graceful fallbacks - Static images display when JavaScript is unavailable

Key Changes

New Components

1. StatefulHTMLRenderer - Core HTML rendering engine that generates self-contained HTML with embedded data
2. HTMLProgressBar - Progress bar implementation that persists state in saved notebooks
3. Interactive Plotly Support - Plotly charts render as interactive HTML with embedded JSON data

Technical Improvements

• Removed ipywidgets dependency - Replaced with lightweight HTML/JavaScript solution
• Added VALIDMIND_INTERACTIVE_FIGURES environment variable - Allows users to control interactive figure rendering (default: enabled)
• Enhanced result rendering - Test results now use HTML rendering for better persistence
• Improved test suite progress tracking - Progress bars persist across notebook saves

User Impact

Before

• Interactive Plotly charts lost interactivity after saving notebooks
• Progress bars reset when notebooks were reopened
• Required ipywidgets installation for interactive features

After

• ✅ Interactive Plotly charts persist in saved notebooks
• ✅ Progress bars maintain state across notebook saves
• ✅ No additional dependencies required
• ✅ Better portability - notebooks work in more environments
• ✅ Backwards compatible - existing code works unchanged

Testing

• Comprehensive test coverage added in tests/test_results.py
• Tests verify HTML rendering, Plotly integration, and environment variable handling
• Backwards compatibility verified with existing test suite

Migration Notes

No migration required. Existing code will automatically benefit from the new HTML rendering system. Users can optionally disable interactive figures by setting VALIDMIND_INTERACTIVE_FIGURES=false.

How to test

Open and run existing notebooks.

What needs special review?

Dependencies, breaking changes, and deployment notes

Release notes

Upgraded HTML Rendering Engine

We've upgraded ValidMind's rendering engine to use a new HTML-based system that preserves interactive components when notebooks are saved.

Key improvements:

• ✅ Interactive charts remain fully functional after saving and reopening notebooks
• ✅ Progress bars persist their state across notebook sessions
• ✅ More reliable rendering with improved state management

Upgrade

Optional: To disable interactive figures, set VALIDMIND_INTERACTIVE_FIGURES=false (default: enabled).

Checklist

• What and why
• Screenshots or videos (Frontend)
• How to test
• What needs special review
• Dependencies, breaking changes, and deployment notes
• Labels applied
• PR linked to Shortcut
• Unit tests added (Backend)
• Tested locally
• Documentation updated (if required)
• Environment variable additions/changes documented (if required)

[johnwalz97]

this looks great!

[AnilSorathiya]

great!

[github-actions]

PR Summary

This PR overhauls the rendering layer within the project, transitioning from ipywidgets-based components to an HTML-based approach. The changes include:

• Replacing methods like to_widget with to_html across results, figures, and test suite summaries. The updated methods now return self-contained HTML strings that include embedded CSS, JavaScript, and metadata. This ensures that rendered outputs persist correctly when notebooks are saved.

• Introducing the StatefulHTMLRenderer class, which centralizes rendering logic for figures (including Plotly and matplotlib), tables, accordions, and progress bars. This new renderer also manages interactive toggle behavior for Plotly figures based on an environment variable (VALIDMIND_INTERACTIVE_FIGURES).

• Updating tests to verify that HTML output is properly generated (e.g., replacing widget instance type checks with string-based HTML assertions) and that interactive figure toggles function correctly both when enabled and disabled.

• Adjusting groupby calls in some model validation tests by setting the observed parameter to True, which improves performance and suppresses warnings in pandas.

• Enhancing progress tracking in the test suite by replacing traditional progress bar widgets with HTML-based progress components (HTMLProgressBar, HTMLLabel, and HTMLBox) that seamlessly integrate with the new HTML rendering system.

The functional changes aim to improve compatibility (especially in environments like Google Colab), ease reproducibility of notebook outputs, and provide a more flexible, consistent integration of interactive content.

Test Suggestions

• Test that to_html methods of result objects return valid HTML including necessary CSS and JavaScript snippets.
• Verify that Plotly figures correctly toggle between interactive and static representations based on the VALIDMIND_INTERACTIVE_FIGURES environment variable by setting different values (true, false, etc.) and checking for presence or absence of plotly-related HTML elements.
• Check that progress bars update their state, including the description and value, both when incrementing and when completing.
• Run regression tests for grouping operations in model validation tests to ensure that setting observed=True in groupby calls does not affect the intended functionality.