feat(controls): Migrate all control panels to React component functions

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>

superset-frontend/plugins/plugin-chart-word-cloud/src/plugin/controlPanel.ts

@@ -20,6 +20,14 @@ import { t, validateNonEmpty } from '@superset-ui/core';
 import {
   ControlPanelConfig,
   getStandardizedControls,
+  AdhocFiltersControl,
+  ColorSchemeControl,
+  MetricControl,
+  RowLimitControl,
+  SeriesControl,
+  SortByMetricControl,
+  InlineTextControl as TextControl,
+  InlineSelectControl as SelectControl,
 } from '@superset-ui/chart-controls';
 
 const config: ControlPanelConfig = {
@@ -28,11 +36,11 @@ const config: ControlPanelConfig = {
       label: t('Query'),
       expanded: true,
       controlSetRows: [
-        ['series'],
-        ['metric'],
-        ['adhoc_filters'],
-        ['row_limit'],
-        ['sort_by_metric'],
+        [SeriesControl()],
+        [MetricControl()],
+        [AdhocFiltersControl()],
+        [RowLimitControl()],
+        [SortByMetricControl()],
       ],
     },
     {
@@ -40,48 +48,39 @@ const config: ControlPanelConfig = {
       expanded: true,
       controlSetRows: [
         [
-          {
+          TextControl({
             name: 'size_from',
-            config: {
-              type: 'TextControl',
-              isInt: true,
-              label: t('Minimum Font Size'),
-              renderTrigger: true,
-              default: 10,
-              description: t('Font size for the smallest value in the list'),
-            },
-          },
-          {
+            isInt: true,
+            label: t('Minimum Font Size'),
+            renderTrigger: true,
+            default: 10,
+            description: t('Font size for the smallest value in the list'),
+          }),
+          TextControl({
             name: 'size_to',
-            config: {
-              type: 'TextControl',
-              isInt: true,
-              label: t('Maximum Font Size'),
-              renderTrigger: true,
-              default: 70,
-              description: t('Font size for the biggest value in the list'),
-            },
-          },
+            isInt: true,
+            label: t('Maximum Font Size'),
+            renderTrigger: true,
+            default: 70,
+            description: t('Font size for the biggest value in the list'),
+          }),
         ],
         [
-          {
+          SelectControl({
             name: 'rotation',
-            config: {
-              type: 'SelectControl',
-              label: t('Word Rotation'),
-              choices: [
-                ['random', t('random')],
-                ['flat', t('flat')],
-                ['square', t('square')],
-              ],
-              renderTrigger: true,
-              default: 'square',
-              clearable: false,
-              description: t('Rotation to apply to words in the cloud'),
-            },
-          },
+            label: t('Word Rotation'),
+            choices: [
+              ['random', t('random')],
+              ['flat', t('flat')],
+              ['square', t('square')],
+            ],
+            renderTrigger: true,
+            default: 'square',
+            clearable: false,
+            description: t('Rotation to apply to words in the cloud'),
+          }),
         ],
-        ['color_scheme'],
+        [ColorSchemeControl()],
       ],
     },
   ],