Atomizer/atomizer-dashboard/frontend/src/components/ParallelCoordinatesPlot.tsx

/**
 * Parallel Coordinates Plot - Enhanced Multi-Objective Visualization
 * Shows design variables → objectives → constraints in proper research format
 * Light theme with high visibility
 */

import { useState } from 'react';

interface ParetoTrial {
  trial_number: number;
  values: number[];
  params: Record<string, number>;
  user_attrs?: Record<string, any>;
  constraint_satisfied?: boolean;
}

interface Objective {
  name: string;
  type: 'minimize' | 'maximize';
  unit?: string;
}

interface DesignVariable {
  name: string;
  unit?: string;
  min: number;
  max: number;
}

interface Constraint {
  name: string;
  threshold: number;
  type: 'less_than' | 'greater_than';
  unit?: string;
}

interface ParallelCoordinatesPlotProps {
  paretoData: ParetoTrial[];
  objectives: Objective[];
  designVariables: DesignVariable[];
  constraints?: Constraint[];
}

export function ParallelCoordinatesPlot({
  paretoData,
  objectives,
  designVariables,
  constraints = []
}: ParallelCoordinatesPlotProps) {
  const [hoveredTrial, setHoveredTrial] = useState<number | null>(null);
  const [selectedTrials, setSelectedTrials] = useState<Set<number>>(new Set());

  // Safety checks
  if (!paretoData || paretoData.length === 0) {
    return (
      <div className="bg-white rounded-lg p-6 border border-gray-300 shadow-sm">
        <h3 className="text-lg font-semibold mb-4 text-gray-900">Parallel Coordinates Plot</h3>
        <div className="h-96 flex items-center justify-center text-gray-500">
          No Pareto front data available
        </div>
      </div>
    );
  }

  if (!objectives || objectives.length === 0 || !designVariables || designVariables.length === 0) {
    return (
      <div className="bg-white rounded-lg p-6 border border-gray-300 shadow-sm">
        <h3 className="text-lg font-semibold mb-4 text-gray-900">Parallel Coordinates Plot</h3>
        <div className="h-96 flex items-center justify-center text-gray-500">
          Missing objectives or design variables metadata
        </div>
      </div>
    );
  }

  // Structure axes: Design Variables → Objectives → Constraints
  const axes: Array<{
    name: string;
    label: string;
    type: 'design_var' | 'objective' | 'constraint';
    unit?: string;
  }> = [];

  // Add design variables
  designVariables.forEach(dv => {
    axes.push({
      name: dv.name,
      label: dv.unit ? `${dv.name}\n(${dv.unit})` : dv.name,
      type: 'design_var',
      unit: dv.unit
    });
  });

  // Add objectives
  objectives.forEach((obj, i) => {
    axes.push({
      name: `objective_${i}`,
      label: obj.unit ? `${obj.name}\n(${obj.unit})` : obj.name,
      type: 'objective',
      unit: obj.unit
    });
  });

  // Add constraints (extract from user_attrs)
  const constraintNames = new Set<string>();
  paretoData.forEach(trial => {
    if (trial.user_attrs) {
      // Common constraint metrics
      if (trial.user_attrs.max_stress !== undefined) constraintNames.add('max_stress');
      if (trial.user_attrs.max_displacement !== undefined) constraintNames.add('max_displacement');
      if (trial.user_attrs.frequency !== undefined && objectives.findIndex(obj => obj.name.toLowerCase().includes('freq')) === -1) {
        constraintNames.add('frequency');
      }
      if (trial.user_attrs.mass !== undefined && objectives.findIndex(obj => obj.name.toLowerCase().includes('mass')) === -1) {
        constraintNames.add('mass');
      }
    }
  });

  constraintNames.forEach(name => {
    const unit = name.includes('stress') ? 'MPa' :
                 name.includes('displacement') ? 'mm' :
                 name.includes('frequency') ? 'Hz' :
                 name.includes('mass') ? 'g' : '';
    axes.push({
      name: `constraint_${name}`,
      label: unit ? `${name}\n(${unit})` : name,
      type: 'constraint',
      unit
    });
  });

  // Extract values for each axis
  const trialData = paretoData.map(trial => {
    const values: number[] = [];

    // Design variables
    designVariables.forEach(dv => {
      values.push(trial.params[dv.name] ?? 0);
    });

    // Objectives
    trial.values.forEach(val => {
      values.push(val);
    });

    // Constraints
    constraintNames.forEach(name => {
      values.push(trial.user_attrs?.[name] ?? 0);
    });

    return {
      trial_number: trial.trial_number,
      values,
      feasible: trial.constraint_satisfied !== false
    };
  });

  // Calculate min/max for normalization
  const ranges = axes.map((_, axisIdx) => {
    const values = trialData.map(d => d.values[axisIdx]);
    return {
      min: Math.min(...values),
      max: Math.max(...values)
    };
  });

  // Normalize to [0, 1]
  const normalize = (value: number, axisIdx: number): number => {
    const range = ranges[axisIdx];
    if (range.max === range.min) return 0.5;
    return (value - range.min) / (range.max - range.min);
  };

  // Chart dimensions
  const width = 1400;
  const height = 500;
  const margin = { top: 100, right: 50, bottom: 60, left: 50 };
  const plotWidth = width - margin.left - margin.right;
  const plotHeight = height - margin.top - margin.bottom;

  const axisSpacing = plotWidth / (axes.length - 1);

  // Toggle trial selection
  const toggleTrial = (trialNum: number) => {
    const newSelected = new Set(selectedTrials);
    if (newSelected.has(trialNum)) {
      newSelected.delete(trialNum);
    } else {
      newSelected.add(trialNum);
    }
    setSelectedTrials(newSelected);
  };

  // Color scheme - highly visible
  const getLineColor = (trial: typeof trialData[0], isHovered: boolean, isSelected: boolean) => {
    if (isSelected) return '#FF6B00'; // Bright orange for selected
    if (!trial.feasible) return '#DC2626'; // Red for infeasible
    if (isHovered) return '#2563EB'; // Blue for hover
    return '#10B981'; // Green for feasible
  };

  return (
    <div className="bg-white rounded-lg p-6 border border-gray-300 shadow-sm">
      <div className="flex items-center justify-between mb-4">
        <div>
          <h3 className="text-lg font-semibold text-gray-900">
            Parallel Coordinates Plot ({paretoData.length} solutions)
          </h3>
          <p className="text-sm text-gray-600 mt-1">
            Design Variables → Objectives → Constraints
          </p>
        </div>
        {selectedTrials.size > 0 && (
          <button
            onClick={() => setSelectedTrials(new Set())}
            className="text-xs px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded text-gray-800 font-medium transition-colors"
          >
            Clear Selection ({selectedTrials.size})
          </button>
        )}
      </div>

      <div className="overflow-x-auto">
        <svg width={width} height={height} className="overflow-visible">
          <g transform={`translate(${margin.left}, ${margin.top})`}>
            {/* Draw axes */}
            {axes.map((axis, i) => {
              const x = i * axisSpacing;
              const bgColor = axis.type === 'design_var' ? '#EFF6FF' :
                             axis.type === 'objective' ? '#F0FDF4' : '#FEF3C7';

              return (
                <g key={axis.name} transform={`translate(${x}, 0)`}>
                  {/* Background highlight */}
                  <rect
                    x={-15}
                    y={-20}
                    width={30}
                    height={plotHeight + 40}
                    fill={bgColor}
                    opacity={0.3}
                  />

                  {/* Axis line */}
                  <line
                    y1={0}
                    y2={plotHeight}
                    stroke="#374151"
                    strokeWidth={2.5}
                  />

                  {/* Axis label */}
                  <text
                    y={-30}
                    textAnchor="middle"
                    fill="#111827"
                    fontSize={12}
                    fontWeight="600"
                    className="select-none"
                  >
                    {(axis.label || '').split('\n').map((line, idx) => (
                      <tspan key={idx} x={0} dy={idx === 0 ? 0 : 14}>{line}</tspan>
                    ))}
                  </text>

                  {/* Type badge */}
                  <text
                    y={-55}
                    textAnchor="middle"
                    fill="#6B7280"
                    fontSize={9}
                    fontWeight="500"
                    className="select-none"
                  >
                    {axis.type === 'design_var' ? 'DESIGN VAR' :
                     axis.type === 'objective' ? 'OBJECTIVE' : 'CONSTRAINT'}
                  </text>

                  {/* Min/max labels */}
                  <text
                    y={plotHeight + 20}
                    textAnchor="middle"
                    fill="#374151"
                    fontSize={10}
                    fontWeight="500"
                  >
                    {ranges[i].min.toFixed(2)}
                  </text>
                  <text
                    y={-10}
                    textAnchor="middle"
                    fill="#374151"
                    fontSize={10}
                    fontWeight="500"
                  >
                    {ranges[i].max.toFixed(2)}
                  </text>
                </g>
              );
            })}

            {/* Draw polylines for each trial */}
            {trialData.map(trial => {
              const isHovered = hoveredTrial === trial.trial_number;
              const isSelected = selectedTrials.has(trial.trial_number);
              const isHighlighted = isHovered || isSelected;

              // Build path
              const pathData = axes.map((_, i) => {
                const x = i * axisSpacing;
                const normalizedY = normalize(trial.values[i], i);
                const y = plotHeight * (1 - normalizedY);
                return i === 0 ? `M ${x} ${y}` : `L ${x} ${y}`;
              }).join(' ');

              return (
                <path
                  key={trial.trial_number}
                  d={pathData}
                  fill="none"
                  stroke={getLineColor(trial, isHovered, isSelected)}
                  strokeWidth={isHighlighted ? 3 : 1.5}
                  opacity={
                    selectedTrials.size > 0
                      ? (isSelected ? 0.95 : 0.1)
                      : (isHighlighted ? 0.95 : 0.5)
                  }
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  className="transition-all duration-150 cursor-pointer"
                  style={{
                    filter: isHighlighted ? 'drop-shadow(0 2px 4px rgba(0,0,0,0.2))' : 'none'
                  }}
                  onMouseEnter={() => setHoveredTrial(trial.trial_number)}
                  onMouseLeave={() => setHoveredTrial(null)}
                  onClick={() => toggleTrial(trial.trial_number)}
                />
              );
            })}

            {/* Hover tooltip */}
            {hoveredTrial !== null && (
              <g transform={`translate(${plotWidth + 20}, 20)`}>
                <rect
                  x={0}
                  y={0}
                  width={140}
                  height={70}
                  fill="white"
                  stroke="#D1D5DB"
                  strokeWidth={2}
                  rx={6}
                  style={{ filter: 'drop-shadow(0 4px 6px rgba(0,0,0,0.1))' }}
                />
                <text x={12} y={24} fill="#111827" fontSize={13} fontWeight="700">
                  Trial #{hoveredTrial}
                </text>
                <text x={12} y={44} fill="#6B7280" fontSize={11}>
                  Click to select/deselect
                </text>
                <text x={12} y={60} fill="#374151" fontSize={10} fontWeight="600">
                  {selectedTrials.has(hoveredTrial) ? '✓ Selected' : '○ Not selected'}
                </text>
              </g>
            )}
          </g>
        </svg>
      </div>

      {/* Legend */}
      <div className="flex gap-8 justify-center mt-6 text-sm border-t border-gray-200 pt-4">
        <div className="flex items-center gap-2">
          <div className="w-10 h-1" style={{ backgroundColor: '#10B981' }} />
          <span className="text-gray-700 font-medium">Feasible</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-10 h-1" style={{ backgroundColor: '#DC2626' }} />
          <span className="text-gray-700 font-medium">Infeasible</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-10 h-1.5" style={{ backgroundColor: '#FF6B00' }} />
          <span className="text-gray-700 font-medium">Selected</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-10 h-1" style={{ backgroundColor: '#2563EB' }} />
          <span className="text-gray-700 font-medium">Hover</span>
        </div>
      </div>

      {/* Axis type legend */}
      <div className="flex gap-6 justify-center mt-3 text-xs">
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded" style={{ backgroundColor: '#EFF6FF' }} />
          <span className="text-gray-600">Design Variables</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded" style={{ backgroundColor: '#F0FDF4' }} />
          <span className="text-gray-600">Objectives</span>
        </div>
        <div className="flex items-center gap-2">
          <div className="w-4 h-4 rounded" style={{ backgroundColor: '#FEF3C7' }} />
          <span className="text-gray-600">Constraints</span>
        </div>
      </div>
    </div>
  );
}