fix(scatter): normalize dot size range, fall back to min dot size, drop any types in tests

- normalize an inverted min/max dot size range so larger values always
  render as larger dots
- fall back to the minimum configured dot size (not the hidden fixed
  marker size control) for points missing a size value
- replace any annotations/casts in scatter control panel and
  transformProps tests with concrete test types

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: rusackas

superset-frontend/plugins/plugin-chart-echarts/src/Timeseries/transformProps.ts

@@ -423,7 +423,12 @@ export default function transformProps(
     }
     return name === matchedLabel ? '' : name.slice(matchedLabel.length + 2);
   };
-  const markerSizeRange: [number, number] = [minMarkerSize, maxMarkerSize];
+  // Normalize the configured dot size range so an inverted min/max still
+  // scales larger metric values to larger dots.
+  const markerSizeRange: [number, number] =
+    minMarkerSize <= maxMarkerSize
+      ? [minMarkerSize, maxMarkerSize]
+      : [maxMarkerSize, minMarkerSize];
 
   const showValueIndexes = extractShowValueIndexes(rawSeries, {
     stack,
@@ -571,9 +576,12 @@ export default function transformProps(
           const sizeValue = sizeIsValueMetric
             ? value[isHorizontal ? 0 : 1]
             : sizeLookup!.get(value[isHorizontal ? 1 : 0]);
+          // Points with a missing/invalid size value get the smallest
+          // configured dot size; the fixed marker size control is hidden
+          // when a size metric is set, so its value would be stale here.
           return typeof sizeValue === 'number'
             ? getAreaScaledSymbolSize(sizeValue, extent, markerSizeRange)
-            : markerSize;
+            : markerSizeRange[0];
         };
       }
     }

superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/Scatter/controlPanel.test.ts

@@ -22,7 +22,19 @@ import controlPanel from '../../../src/Timeseries/Regular/Scatter/controlPanel';
 
 const config = controlPanel;
 
-const getControl = (controlName: string) => {
+// Narrow view of a named control entry covering the config fields these
+// tests assert on, so lookups stay type-safe without resorting to `any`.
+interface TestControl {
+  name: string;
+  config: {
+    default?: unknown;
+    options?: unknown;
+    validators?: unknown;
+    visibility: (props: ControlPanelsContainerProps) => boolean;
+  };
+}
+
+const getControl = (controlName: string): TestControl | null => {
   for (const section of config.controlPanelSections) {
     if (section?.controlSetRows) {
       for (const row of section.controlSetRows) {
@@ -33,7 +45,7 @@ const getControl = (controlName: string) => {
             'name' in control &&
             control.name === controlName
           ) {
-            return control;
+            return control as unknown as TestControl;
           }
         }
       }
@@ -67,7 +79,7 @@ const mockControls = (
 };
 
 // tests for x_axis_time_format control
-const timeFormatControl: any = getControl('x_axis_time_format');
+const timeFormatControl = getControl('x_axis_time_format')!;
 
 test('scatter chart control panel should include x_axis_time_format control in the panel', () => {
   expect(timeFormatControl).toBeDefined();
@@ -108,7 +120,7 @@ test('x_axis_time_format control should be hidden for non-temporal data types',
 });
 
 // tests for x_axis_number_format control
-const numberFormatControl: any = getControl('x_axis_number_format');
+const numberFormatControl = getControl('x_axis_number_format')!;
 
 test('scatter chart control panel should include x_axis_number_format control in the panel', () => {
   expect(numberFormatControl).toBeDefined();
@@ -150,10 +162,10 @@ test('x_axis_number_format control should be hidden for non-numeric data types',
 });
 
 // tests for orientation and dot size controls
-const orientationControl: any = getControl('orientation');
-const sizeControl: any = getControl('size');
-const minMarkerSizeControl: any = getControl('minMarkerSize');
-const maxMarkerSizeControl: any = getControl('maxMarkerSize');
+const orientationControl = getControl('orientation')!;
+const sizeControl = getControl('size')!;
+const minMarkerSizeControl = getControl('minMarkerSize')!;
+const maxMarkerSizeControl = getControl('maxMarkerSize')!;
 
 test('scatter chart control panel should include an orientation control defaulting to vertical', () => {
   expect(orientationControl).toBeDefined();
@@ -196,7 +208,7 @@ test('dot size range controls should only be visible when a size metric is set',
 });
 
 test('fixed marker size control should hide when a size metric is set', () => {
-  const markerSizeControl: any = getControl('markerSize');
+  const markerSizeControl = getControl('markerSize')!;
   expect(markerSizeControl.config.visibility(mockSizeControls(null))).toBe(
     true,
   );

superset-frontend/plugins/plugin-chart-echarts/test/Timeseries/Scatter/transformProps.test.ts

@@ -32,6 +32,22 @@ import {
 } from '@superset-ui/chart-controls';
 import { supersetTheme } from '@apache-superset/core/theme';
 
+type AxisLabelFormatter = ((value: number | string) => string) & {
+  id?: string;
+};
+
+interface TestAxis {
+  type?: string;
+  axisLabel: { formatter: AxisLabelFormatter };
+}
+
+interface TestScatterSeries {
+  type?: string;
+  name?: string;
+  data: (string | number | null)[][];
+  symbolSize: (value: (string | number | null)[]) => number;
+}
+
 describe('Scatter Chart X-axis Time Formatting', () => {
   const baseFormData: EchartsTimeseriesFormData = {
     ...DEFAULT_FORM_DATA,
@@ -74,7 +90,7 @@ describe('Scatter Chart X-axis Time Formatting', () => {
     );
 
     expect(transformedProps.echartOptions.xAxis).toHaveProperty('axisLabel');
-    const xAxis = transformedProps.echartOptions.xAxis as any;
+    const xAxis = transformedProps.echartOptions.xAxis as TestAxis;
     expect(xAxis.axisLabel).toHaveProperty('formatter');
     expect(typeof xAxis.axisLabel.formatter).toBe('function');
   });
@@ -94,7 +110,7 @@ describe('Scatter Chart X-axis Time Formatting', () => {
         chartProps as EchartsTimeseriesChartProps,
       );
 
-      const xAxis = transformedProps.echartOptions.xAxis as any;
+      const xAxis = transformedProps.echartOptions.xAxis as TestAxis;
       expect(xAxis.axisLabel).toHaveProperty('formatter');
       expect(typeof xAxis.axisLabel.formatter).toBe('function');
       if (format !== SMART_DATE_ID) {
@@ -146,7 +162,7 @@ describe('Scatter Chart X-axis Number Formatting', () => {
     );
 
     expect(transformedProps.echartOptions.xAxis).toHaveProperty('axisLabel');
-    const xAxis = transformedProps.echartOptions.xAxis as any;
+    const xAxis = transformedProps.echartOptions.xAxis as TestAxis;
     expect(xAxis.axisLabel).toHaveProperty('formatter');
     expect(typeof xAxis.axisLabel.formatter).toBe('function');
     expect(xAxis.axisLabel.formatter.id).toBe('SMART_NUMBER');
@@ -168,7 +184,7 @@ describe('Scatter Chart X-axis Number Formatting', () => {
       );
 
       expect(transformedProps.echartOptions.xAxis).toHaveProperty('axisLabel');
-      const xAxis = transformedProps.echartOptions.xAxis as any;
+      const xAxis = transformedProps.echartOptions.xAxis as TestAxis;
       expect(xAxis.axisLabel).toHaveProperty('formatter');
       expect(typeof xAxis.axisLabel.formatter).toBe('function');
       expect(xAxis.axisLabel.formatter.id).toBe(format);
@@ -216,7 +232,9 @@ describe('Scatter Chart Orientation and Dot Size Metric', () => {
   };
 
   const getScatterSeries = (props: ReturnType<typeof transformProps>) =>
-    (props.echartOptions.series as any[]).filter(s => s.type === 'scatter');
+    (props.echartOptions.series as TestScatterSeries[]).filter(
+      s => s.type === 'scatter',
+    );
 
   const singleMetricData = [
     {
@@ -240,7 +258,10 @@ describe('Scatter Chart Orientation and Dot Size Metric', () => {
     const transformedProps = transformProps(
       chartProps as EchartsTimeseriesChartProps,
     );
-    const { xAxis, yAxis } = transformedProps.echartOptions as any;
+    const { xAxis, yAxis } = transformedProps.echartOptions as {
+      xAxis: TestAxis;
+      yAxis: TestAxis;
+    };
     expect(yAxis.type).toBe('category');
     expect(xAxis.type).toBe('value');
 
@@ -260,7 +281,10 @@ describe('Scatter Chart Orientation and Dot Size Metric', () => {
     const transformedProps = transformProps(
       chartProps as EchartsTimeseriesChartProps,
     );
-    const { xAxis, yAxis } = transformedProps.echartOptions as any;
+    const { xAxis, yAxis } = transformedProps.echartOptions as {
+      xAxis: TestAxis;
+      yAxis: TestAxis;
+    };
     expect(xAxis.type).toBe('category');
     expect(yAxis.type).toBe('value');
 
@@ -361,12 +385,12 @@ describe('Scatter Chart Orientation and Dot Size Metric', () => {
       chartProps as EchartsTimeseriesChartProps,
     );
     const series = getScatterSeries(transformedProps);
-    expect(series.map((s: any) => s.name).sort()).toEqual([
+    expect(series.map(s => s.name).sort()).toEqual([
       'sum_val, g1',
       'sum_val, g2',
     ]);
-    const g1 = series.find((s: any) => s.name === 'sum_val, g1');
-    const g2 = series.find((s: any) => s.name === 'sum_val, g2');
+    const g1 = series.find(s => s.name === 'sum_val, g1')!;
+    const g2 = series.find(s => s.name === 'sum_val, g2')!;
     // the size extent is global: g1's point holds the minimum (10), g2's the
     // maximum (40)
     expect(g1.symbolSize(['A', 1])).toBe(5);
@@ -396,7 +420,7 @@ describe('Scatter Chart Orientation and Dot Size Metric', () => {
     expect(series.symbolSize([3, 'C'])).toBe(30);
   });
 
-  test('points without a size value fall back to the fixed marker size', () => {
+  test('points without a size value fall back to the minimum dot size', () => {
     const chartProps = new ChartProps({
       ...baseChartPropsConfig,
       queriesData: [
@@ -409,14 +433,40 @@ describe('Scatter Chart Orientation and Dot Size Metric', () => {
           ],
         },
       ],
-      formData: { ...baseFormData, size: 'size_metric', markerSize: 7 },
+      formData: {
+        ...baseFormData,
+        size: 'size_metric',
+        minMarkerSize: 9,
+        maxMarkerSize: 30,
+      },
+    });
+
+    const transformedProps = transformProps(
+      chartProps as EchartsTimeseriesChartProps,
+    );
+    const [series] = getScatterSeries(transformedProps);
+    expect(series.symbolSize(['B', 2])).toBe(9);
+  });
+
+  test('an inverted min/max dot size range is normalized', () => {
+    const chartProps = new ChartProps({
+      ...baseChartPropsConfig,
+      queriesData: categoricalData,
+      formData: {
+        ...baseFormData,
+        size: 'size_metric',
+        minMarkerSize: 30,
+        maxMarkerSize: 5,
+      },
     });
 
     const transformedProps = transformProps(
       chartProps as EchartsTimeseriesChartProps,
     );
     const [series] = getScatterSeries(transformedProps);
-    expect(series.symbolSize(['B', 2])).toBe(7);
+    // larger metric values still render as larger dots
+    expect(series.symbolSize(['A', 1])).toBe(5);
+    expect(series.symbolSize(['C', 3])).toBe(30);
   });
 
   test('size metric equal to the value metric sizes dots by their own value', () => {