Migrated 25 chart control panels from legacy config-based to modern React-based:
Core Charts:
- Pie, Funnel, Sankey, Treemap (already done)
- BoxPlot, Bubble, Gantt, Gauge, Graph
- Heatmap, Histogram, Radar, Sunburst, Tree, Waterfall
BigNumber Variants (3):
- BigNumberTotal
- BigNumberPeriodOverPeriod
- BigNumberWithTrendline
Timeseries Variants (7):
- Area, Step, Line, Bar, Scatter, SmoothLine
- MixedTimeseries (most complex with dual Y-axes)
Key improvements across all migrations:
- Direct React components instead of config objects
- Full TypeScript support with proper types
- Tab-based organization (Data/Customize/Options)
- Proper safety checks and validation
- Conditional rendering for dependent controls
- Single column handling where needed
- Modern control components (DndColumnSelect, etc.)
All charts compile successfully with webpack dev server.
This completes the control panel modernization effort!
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created SankeyControlPanelSimple.tsx with React-based controls
- Created TreemapControlPanelSimple.tsx with tab-based layout
- Both follow established patterns from Pie and Funnel migrations
- Added special handling for single-column selection in Sankey
- Updated migration agent with new patterns and common issues
- All charts compile successfully with webpack dev server
Key improvements:
- Direct React components instead of config objects
- Full TypeScript support with proper types
- Tab-based organization (Data/Customize)
- Proper safety checks and validation
- Consistent with modern control panel architecture
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
The @superset-ui/core package doesn't export a Tabs component, causing
'Element type is invalid' error. Fixed by importing Tabs directly from antd,
matching the pattern used in PieControlPanelSimple.tsx.
Also fixed React hooks order issue in PieControlPanelSimple.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Removed custom Tabs implementation - we don't create our own tabs
- Split into two components: PieDataPanel and PieCustomizePanel
- PieDataPanel provides content for the existing Data tab
- PieCustomizePanel provides content for the existing Customize tab
- Both components share the same props and state through common interface
- Used controlPanelSections with tabOverride to place controls in correct tabs
- Chart type selector remains above tabs (handled by Superset UI)
- Maintains all controls and conditional rendering logic
- Added Ant Design Tabs to split controls into Data and Customize tabs
- Data tab contains: Group by, Metric, Filters, Row limit, Sort by metric
- Customize tab contains: Chart Options, Labels, and Pie shape sections
- Added chart/viz type picker above the tabs showing 'Pie Chart' title and description
- Maintains all existing controls and their conditional rendering logic
- Uses useState hook to manage active tab state
- Added Filters control (adhoc_filters) to Query section
- Added Percentage threshold and Threshold for Other controls
- Added Rose Type control for Nightingale chart visualization
- Added comprehensive Labels section with:
- Label Type selector with all 8 options
- Conditional Label Template field
- Number format, Currency format, and Date format controls
- Conditional Put labels outside control
- Show Total checkbox
- Reorganized controls into logical sections: Query, Chart Options, Labels, and Pie shape
- All controls now use proper React components with conditional rendering
- Added all missing controlOverrides with proper defaults and renderTrigger flags
- Added back outer radius slider control with min/max constraints
- Added conditional inner radius control that only shows when Donut is checked
- Added color palette selector component
- Added conditional Label Line control that only shows when Show Labels is checked
- Fixed double headers on Metric and Group by controls by removing duplicate labels
- All controls now properly configured with renderTrigger where appropriate
- Remove unnecessary control panel files (controlPanel.tsx, controlPanelModern.tsx, PieControlPanel.tsx)
- Keep only the simplified working version (PieControlPanelSimple.tsx)
- Fix all linting and type-checking errors
- Remove unused imports and color literals
- Modified expandControlConfig to handle modern panel components
- Added ModernControlPanelRenderer component for bridging
- Updated ControlPanelsContainer to render modern panels directly
- Modified getAllControlsState to process controlOverrides from modern panels
- Updated getSectionsToRender to handle modern control panels
- Created PieControlPanelSimple with React-based controls, tooltips, and dynamic rendering
This sets up the foundation for migrating from config-based to React component-based control panels.
- Complete abandonment of controlPanelSections/controlSetRows architecture
- Use Ant Design Collapse and Grid for layout instead of proprietary constructs
- Import actual React control components from controlMap
- Direct component usage, no config objects
- Clean, modern React component approach with proper props
This is the actual React-based control panel we want - pure components,
no legacy structures, just React + Ant Design.
- Fix groupby and metric control configurations
- Use spread operator to properly extend shared controls
- Add proper labels and descriptions for controls
- Temporarily disable formDataOverrides to debug column issues
- Fix sort_by_metric control type definition
The 'Referenced columns not available in DataFrame' error should now be resolved.
- Create empty control panel placeholder for non-migrated charts
- Switch Bar and Line charts to empty panels temporarily
- Update Pie chart to use traditional control config structure
- Remove experimental React-based PieControlPanel component
- Fix TypeScript errors in control panel configurations
- Simplify migration path by focusing on one working chart first
This approach allows us to get one chart (Pie) working properly
before migrating others, avoiding complex dual-architecture issues.
- Create modern Pie chart control panel using React/AntD components
- Add ModernControlPanelRenderer bridge for backward compatibility
- Create ReactControlWrappers for control components
- Update ControlPanelsContainer to support both legacy and modern formats
- Add comprehensive migration documentation and plan
This establishes the foundation for migrating from controlSetRows to
modern React-based control panels while maintaining full backward
compatibility. The Pie chart serves as the proof of concept for the
phased migration approach.
Note: This is a work-in-progress implementation that demonstrates
the migration approach. TypeScript errors and linting issues will
be resolved as the migration progresses.
🤖 Generated with Claude Code
Co-Authored-By: Claude <noreply@anthropic.com>
- Delete all controlPanelModern.tsx files (JSONForms format)
- Delete controlPanelReact.tsx and other experimental variants
- Rename Word Cloud controlPanelFixed.ts to controlPanel.ts
- Update imports to use standard controlPanel files
- Verify no string references remain in control panels
All visualizations now use their standard controlPanel.ts/tsx files with
React component functions. The codebase is now consistent with the new
control panel architecture.
- Replace string-referenced control system with React components
- Add useFormData hook for direct Redux integration
- Create reusable control wrapper components (SeriesControl, MetricControl, etc.)
- Support both camelCase and snake_case for backward compatibility
- Successfully migrate Word Cloud control panel as proof of concept
- Remove JSONForms implementation in favor of simpler React approach
- Add migration guide to CLAUDE.md for other control panels
This simplifies the control panel architecture by:
1. Eliminating string references in favor of React components
2. Providing type-safe control definitions
3. Connecting controls directly to Redux state
4. Making control panels easier to understand and maintain
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major milestone in modernizing the control panel system:
## Changes Made
### Infrastructure
- Created ControlPanelsContainerWrapper to auto-detect JSON Forms vs legacy format
- Updated ExploreViewContainer to use the wrapper for automatic format detection
- Both legacy and JSON Forms control panels now work seamlessly
### Migrated Control Panels (15 total)
- 10 legacy-plugin-chart-* control panels
- 2 BigNumber ECharts control panels
- 1 Deck.gl Arc layer control panel
- 1 Word Cloud control panel (test case)
- 1 Chord diagram (previously attempted, now proper)
### Migration Pattern Established
- JSON Schema for data structure
- UI Schema for layout with collapsible groups
- Preserved all controlOverrides and formDataOverrides
- Full TypeScript support with proper types
### Benefits
- Industry-standard JSON Forms format
- Better separation of data model and UI
- Cleaner, more maintainable code
- Foundation for future enhancements
Next phase: Migrate remaining 40+ control panels and deprecate legacy format.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Major refactor to modernize control panel system:
## Changes Made
### Core Infrastructure
- Created InlineControls.tsx with helper functions for all control types
- Added SharedControlComponents for replacing string control references
- Fixed TypeScript types and imports across all control panels
- Added proper exports and type definitions
### Control Panel Migrations
- Converted 20+ control panel files from inline configurations to React components
- Eliminated all string control references (e.g., ['metric'] → MetricControl())
- Updated all legacy-plugin-chart-* plugins
- Updated all legacy-preset-chart-deckgl layers
- Fixed chord diagram control panel (was prematurely using JSON Forms)
### Type Safety Improvements
- Fixed choice array type mismatches (now supports mixed types)
- Resolved import conflicts by renaming inline control helpers
- Added proper TypeScript types for all control configurations
- Reduced TypeScript errors by 57% (44 → 19)
### Pattern Conversion
Before: { name: 'control', config: { type: 'SelectControl', ... } }
After: SelectControl({ name: 'control', ... })
This sets the foundation for the next phase: migrating to JSON Forms format.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
