drawdata icon indicating copy to clipboard operation
drawdata copied to clipboard

Add React and Radix UI components

Open koaning opened this issue 1 month ago • 0 comments

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

koaning avatar Nov 25 '25 17:11 koaning