chore(frontend): comprehensive TypeScript quality improvements (#37625)

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ParallelCoordinates.ts

@@ -18,26 +18,46 @@
  */
 /* eslint-disable react/sort-prop-types */
 import * as d3 from 'd3v3';
-import PropTypes from 'prop-types';
 import { getSequentialSchemeRegistry } from '@superset-ui/core';
 
 import parcoords from './vendor/parcoords/d3.parcoords';
 import divgrid from './vendor/parcoords/divgrid';
 
-const propTypes = {
-  // Standard tabular data [{ fieldName1: value1, fieldName2: value2 }]
-  data: PropTypes.arrayOf(PropTypes.object),
-  width: PropTypes.number,
-  height: PropTypes.number,
-  colorMetric: PropTypes.string,
-  includeSeries: PropTypes.bool,
-  linearColorScheme: PropTypes.string,
-  metrics: PropTypes.arrayOf(PropTypes.string),
-  series: PropTypes.string,
-  showDatatable: PropTypes.bool,
-};
+interface ParcoordChart {
+  width(w: number): ParcoordChart;
+  height(h: number): ParcoordChart;
+  color(c: Function): ParcoordChart;
+  alpha(a: number): ParcoordChart;
+  composite(c: string): ParcoordChart;
+  data(d: Record<string, unknown>[]): ParcoordChart;
+  dimensions(cols: string[]): ParcoordChart;
+  types(t: Record<string, string>): ParcoordChart;
+  render(): ParcoordChart;
+  createAxes(): ParcoordChart;
+  shadows(): ParcoordChart;
+  reorderable(): ParcoordChart;
+  brushMode(mode: string): ParcoordChart;
+  highlight(d: Record<string, unknown>[]): void;
+  unhighlight(): void;
+  on(event: string, callback: Function): void;
+}
 
-function ParallelCoordinates(element, props) {
+interface ParallelCoordinatesProps {
+  data: Record<string, unknown>[];
+  width: number;
+  height: number;
+  colorMetric: string;
+  includeSeries: boolean;
+  linearColorScheme: string;
+  metrics: string[];
+  series: string;
+  showDatatable: boolean;
+}
+
+function ParallelCoordinates(
+  element: HTMLElement,
+  props: ParallelCoordinatesProps,
+) {
   const {
     data,
     width,
@@ -52,7 +72,7 @@ function ParallelCoordinates(element, props) {
 
   const cols = includeSeries ? [series].concat(metrics) : metrics;
 
-  const ttypes = {};
+  const ttypes: Record<string, string> = {};
   ttypes[series] = 'string';
   metrics.forEach(v => {
     ttypes[v] = 'number';
@@ -61,9 +81,15 @@ function ParallelCoordinates(element, props) {
   const colorScale = colorMetric
     ? getSequentialSchemeRegistry()
         .get(linearColorScheme)
-        .createLinearScale(d3.extent(data, d => d[colorMetric]))
+        ?.createLinearScale(
+          d3.extent(
+            data,
+            (d: Record<string, unknown>) => d[colorMetric] as number,
+          ),
+        )
     : () => 'grey';
-  const color = d => colorScale(d[colorMetric]);
+  const color = (d: Record<string, unknown>) =>
+    (colorScale as Function)(d[colorMetric]);
   const container = d3
     .select(element)
     .classed('superset-legacy-chart-parallel-coordinates', true);
@@ -75,7 +101,7 @@ function ParallelCoordinates(element, props) {
     .style('height', `${effHeight}px`)
     .classed('parcoords', true);
 
-  const chart = parcoords()(div.node())
+  const chart = (parcoords()(div.node()) as unknown as ParcoordChart)
     .width(width)
     .color(color)
     .alpha(0.5)
@@ -101,19 +127,19 @@ function ParallelCoordinates(element, props) {
       .classed('parcoords grid', true)
       .selectAll('.row')
       .on({
-        mouseover(d) {
+        mouseover(d: Record<string, unknown>) {
           chart.highlight([d]);
         },
         mouseout: chart.unhighlight,
       });
     // update data table on brush event
-    chart.on('brush', d => {
+    chart.on('brush', (d: Record<string, unknown>[]) => {
       d3.select('.grid')
         .datum(d)
         .call(grid)
         .selectAll('.row')
         .on({
-          mouseover(dd) {
+          mouseover(dd: Record<string, unknown>) {
             chart.highlight([dd]);
           },
           mouseout: chart.unhighlight,
@@ -123,6 +149,5 @@ function ParallelCoordinates(element, props) {
 }
 
 ParallelCoordinates.displayName = 'ParallelCoordinates';
-ParallelCoordinates.propTypes = propTypes;
 
 export default ParallelCoordinates;

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/ReactParallelCoordinates.tsx

@@ -16,23 +16,30 @@
  * specific language governing permissions and limitations
  * under the License.
  */
+import { type ComponentProps } from 'react';
 import { reactify, addAlpha } from '@superset-ui/core';
 import { styled } from '@apache-superset/core/ui';
-import PropTypes from 'prop-types';
 import Component from './ParallelCoordinates';
 
 const ReactComponent = reactify(Component);
 
-const ParallelCoordinates = ({ className, ...otherProps }) => (
+interface ParallelCoordinatesWrapperProps {
+  className?: string;
+  [key: string]: unknown;
+}
+
+const ParallelCoordinates = ({
+  className,
+  ...otherProps
+}: ParallelCoordinatesWrapperProps) => (
   <div className={className}>
-    <ReactComponent {...otherProps} />
+    {/* Props are injected by the chart framework at runtime */}
+    <ReactComponent
+      {...(otherProps as unknown as ComponentProps<typeof ReactComponent>)}
+    />
   </div>
 );
 
-ParallelCoordinates.propTypes = {
-  className: PropTypes.string.isRequired,
-};
-
 export default styled(ParallelCoordinates)`
   ${({ theme }) => `
     .superset-legacy-chart-parallel-coordinates {

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/transformProps.ts

@@ -16,7 +16,9 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-export default function transformProps(chartProps) {
+import { ChartProps } from '@superset-ui/core';
+
+export default function transformProps(chartProps: ChartProps) {
   const { width, height, formData, queriesData } = chartProps;
   const {
     includeSeries,
@@ -33,7 +35,9 @@ export default function transformProps(chartProps) {
     data: queriesData[0].data,
     includeSeries,
     linearColorScheme,
-    metrics: metrics.map(m => m.label || m),
+    metrics: metrics.map((m: { label?: string } | string) =>
+      typeof m === 'string' ? m : m.label || m,
+    ),
     colorMetric:
       secondaryMetric && secondaryMetric.label
         ? secondaryMetric.label

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/vendor/parcoords/d3.parcoords.ts

@@ -1,6 +1,7 @@
 /* [LICENSE TBD] */
+// @ts-nocheck
 /* eslint-disable */
-export default function (config) {
+export default function (config?) {
   var __ = {
     data: [],
     highlighted: [],

superset-frontend/plugins/legacy-plugin-chart-parallel-coordinates/src/vendor/parcoords/divgrid.ts

@@ -1,7 +1,8 @@
 /* [LICENSE TBD] */
+// @ts-nocheck
 /* eslint-disable */
 // from http://bl.ocks.org/3687826
-export default function (config) {
+export default function (config?) {
   var columns = [];
 
   var dg = function (selection) {