Repository: apache/superset
File: superset-frontend/plugins/plugin-chart-echarts/src/Heatmap/transformProps.ts (TypeScript)

Code before:
  );
  const sortedYAxisValues = sortAxisValues(
    yAxisValues,
    data,
    sortYAxis,
    metricLabel,
    yAxisColumnName,
  );

  // Create lookup maps for axis indices
  const xAxisIndexMap = new Map<DataRecordValue, number>(
    sortedXAxisValues.map((value, index) => [value, index]),
  );
  const yAxisIndexMap = new Map<DataRecordValue, number>(
    sortedYAxisValues.map((value, index) => [value, index]),
  );

  const series: HeatmapSeriesOption[] = [
    {
      name: metricLabel,
      type: 'heatmap',
      data: data.flatMap(row => {
        const xValue = row[xAxisColumnName];
        const yValue = row[yAxisColumnName];
        const metricValue = row[metricLabel];
        const rankValue = row['rank'];

        // Convert to axis indices for ECharts when explicit axis data is provided
        const xIndex = xAxisIndexMap.get(xValue);
        const yIndex = yAxisIndexMap.get(yValue);

        if (xIndex === undefined || yIndex === undefined) {
          // Log a warning for debugging
          logging.warn(
            `Heatmap: Skipping row due to missing axis value. xValue: ${xValue}, yValue: ${yValue}, metricValue: ${metricValue}`,
            row,
          );
          return [];
        }
        // Include rank as 4th dimension when normalized is enabled
        // This allows visualMap to use dimension: 3 to color by rank percentile
        if (normalized) {
          return [[xIndex, yIndex, metricValue, rankValue]];
        }
        return [[xIndex, yIndex, metricValue]];
      }) as any,
      label: {
        show: showValues,
        formatter: (params: CallbackDataParams) => {
          const paramsValue = params.value as (string | number)[];
          return valueFormatter(paramsValue?.[2] as number | null | undefined);

Review comment (refactor):
Nit: Maybe extract `'rank'` to a constant? It would make the backend dependency clearer and easier to track if it ever changes

Code after:
    max =
      (maxBy(data, row => row[colorColumn])?.[colorColumn] as number) ||
      DEFAULT_ECHARTS_BOUNDS[1];
  }

  // Extract and sort unique axis values
  // Use colnames to get the actual column names in the data
  const xAxisColumnName = colnames[0];
  const yAxisColumnName = colnames[1];

  const xAxisValues = extractUniqueValues(data, xAxisColumnName);
  const yAxisValues = extractUniqueValues(data, yAxisColumnName);

  const sortedXAxisValues = sortAxisValues(
    xAxisValues,
    data,
    sortXAxis,
    metricLabel,
    xAxisColumnName,
  );
  const sortedYAxisValues = sortAxisValues(
    yAxisValues,
    data,
    sortYAxis,
    metricLabel,
    yAxisColumnName,
  );

  // Create lookup maps for axis indices
  const xAxisIndexMap = new Map<DataRecordValue, number>(
    sortedXAxisValues.map((value, index) => [value, index]),
  );
  const yAxisIndexMap = new Map<DataRecordValue, number>(
    sortedYAxisValues.map((value, index) => [value, index]),
  );

  const series: HeatmapSeriesOption[] = [
    {
      name: metricLabel,
      type: 'heatmap',
      data: data.flatMap(row => {
        const xValue = row[xAxisColumnName];
        const yValue = row[yAxisColumnName];
        const metricValue = row[metricLabel];
        const rankValue = row[RANK_COLUMN_NAME];

        // Convert to axis indices for ECharts when explicit axis data is provided
        const xIndex = xAxisIndexMap.get(xValue);
        const yIndex = yAxisIndexMap.get(yValue);

        if (xIndex === undefined || yIndex === undefined) {