Skip to content

Conversation

@koaning
Copy link
Owner

@koaning koaning commented Nov 25, 2025

Summary

Migrates JavaScript widget codebase from vanilla D3.js to React + Radix UI while maintaining esbuild as the bundler. Both scatter and bar widgets now use React components with Radix UI controls.

Changes

  • Added package.json with React, Radix UI, and D3 dependencies
  • Updated Makefile with JSX build targets (js-scatter, js-bar, js-all) and minification
  • Created js/scatter_widget.jsx with React/Radix UI controls (ToggleGroup for classes, Slider for brush size)
  • Created js/bar_widget.jsx with React/Radix UI controls (ToggleGroup for collections)
  • Added GitHub Actions CI workflow to verify JS build on push/PR
  • Bundle size reduced to ~210KB each (from 1.1MB) thanks to minification

Test plan

  • Run make install to set up dependencies
  • Run make js-all to build both widgets
  • Verify widgets render and function in Jupyter/marimo notebooks

Migrate from vanilla JavaScript to React + Radix UI with esbuild.
Includes two React components (scatter_widget.jsx, bar_widget.jsx) that
use anywidget/react for state management and D3 for visualization.
Bundle size reduced to ~210KB each with minification.

- Add package.json with React, Radix UI, and d3 dependencies
- Update Makefile with JSX build targets and minification
- Create scatter_widget.jsx with React/Radix UI controls
- Create bar_widget.jsx with React/Radix UI controls
- Add GitHub Actions CI for JS build verification
- Update .gitignore for node_modules and package-lock.json
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.

2 participants