diff --git a/atomizer-dashboard/frontend/src/components/ParetoPlot.tsx b/atomizer-dashboard/frontend/src/components/ParetoPlot.tsx
index ddcb4e65..a865ad35 100644
--- a/atomizer-dashboard/frontend/src/components/ParetoPlot.tsx
+++ b/atomizer-dashboard/frontend/src/components/ParetoPlot.tsx
@@ -22,14 +22,18 @@ interface Objective {
interface ParetoPlotProps {
paretoData: ParetoTrial[];
objectives: Objective[];
+ allTrials?: ParetoTrial[]; // All trials including non-Pareto
}
type NormalizationMode = 'raw' | 'minmax' | 'zscore';
-export function ParetoPlot({ paretoData, objectives }: ParetoPlotProps) {
+export function ParetoPlot({ paretoData, objectives, allTrials }: ParetoPlotProps) {
const [normMode, setNormMode] = useState
('raw');
- if (paretoData.length === 0) {
+ // Use allTrials if provided, otherwise fall back to paretoData
+ const trialsToShow = allTrials && allTrials.length > 0 ? allTrials : paretoData;
+
+ if (trialsToShow.length === 0) {
return (
Pareto Front
@@ -40,12 +44,16 @@ export function ParetoPlot({ paretoData, objectives }: ParetoPlotProps) {
);
}
- // Extract raw values
- const rawData = paretoData.map(trial => ({
+ // Create set of Pareto front trial numbers for easy lookup
+ const paretoTrialNumbers = new Set(paretoData.map(t => t.trial_number));
+
+ // Extract raw values for ALL trials
+ const rawData = trialsToShow.map(trial => ({
x: trial.values[0],
y: trial.values[1],
trial_number: trial.trial_number,
- feasible: trial.constraint_satisfied !== false
+ feasible: trial.constraint_satisfied !== false,
+ isPareto: paretoTrialNumbers.has(trial.trial_number)
}));
// Calculate statistics for normalization
@@ -89,11 +97,12 @@ export function ParetoPlot({ paretoData, objectives }: ParetoPlotProps) {
rawX: d.x,
rawY: d.y,
trial_number: d.trial_number,
- feasible: d.feasible
+ feasible: d.feasible,
+ isPareto: d.isPareto
}));
- // Sort data by x-coordinate for Pareto front line
- const sortedData = [...data].sort((a, b) => a.x - b.x);
+ // Sort ONLY Pareto front data by x-coordinate for line
+ const paretoOnlyData = data.filter(d => d.isPareto).sort((a, b) => a.x - b.x);
// Get objective labels with normalization indicator
const normSuffix = normMode === 'minmax' ? ' [0-1]' : normMode === 'zscore' ? ' [z-score]' : '';
@@ -219,24 +228,29 @@ export function ParetoPlot({ paretoData, objectives }: ParetoPlotProps) {
)}
/>
- {/* Pareto front line */}
+ {/* Pareto front line - only connects Pareto front points */}
-
+ {/* All trials as scatter points */}
+
{data.map((entry, index) => (
|
))}
diff --git a/atomizer-dashboard/frontend/src/components/StudyCard.tsx b/atomizer-dashboard/frontend/src/components/StudyCard.tsx
new file mode 100644
index 00000000..2dc04259
--- /dev/null
+++ b/atomizer-dashboard/frontend/src/components/StudyCard.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import type { Study } from '../types';
+import { Badge } from './Badge';
+
+interface StudyCardProps {
+ study: Study;
+ isActive: boolean;
+ onClick: () => void;
+}
+
+export function StudyCard({ study, isActive, onClick }: StudyCardProps) {
+ const percentage = study.progress.total > 0
+ ? (study.progress.current / study.progress.total) * 100
+ : 0;
+
+ const statusVariant = study.status === 'completed'
+ ? 'success'
+ : study.status === 'running'
+ ? 'info'
+ : 'warning';
+
+ return (
+
+
+
{study.name}
+
+ {study.status}
+
+
+
+
+ {study.progress.current} / {study.progress.total} trials
+ {study.best_value !== null && (
+ • Best: {study.best_value.toFixed(4)}
+ )}
+
+
+
+
+ {title && (
+
+
{title}
+
+ )}
+
{children}
+
+ {label && (
+
+ )}
+
+ {error &&
{error}
}
+ {helperText && !error && (
+
{helperText}
+ )}
+
+
+
+ {/* Controls Overlay */}
+
+
+ }
+ >
+ Fullscreen
+
+
+
+ {/* Legend Overlay */}
+
+
Displacement (mm)
+
+
+ 0.0
+ 5.2
+
+
+
+
{label}
+
+
{value}
+ {subtext &&
{subtext}
}
+
+
+ No data available for parallel coordinates
+
+
+ );
+ }
+
+ // Calculate min/max for each dimension for normalization
+ const ranges = dimensions.map(dim => {
+ const values = validData.map(d => d[dim]);
+ return {
+ min: Math.min(...values),
+ max: Math.max(...values)
+ };
+ });
+
+ // Normalize function
+ const normalize = (value: number, dimIdx: number): number => {
+ const range = ranges[dimIdx];
+ if (range.max === range.min) return 0.5;
+ return (value - range.min) / (range.max - range.min);
+ };
+
+ // Chart dimensions
+ const width = 800;
+ const height = 400;
+ const margin = { top: 80, right: 20, bottom: 40, left: 20 };
+ const plotWidth = width - margin.left - margin.right;
+ const plotHeight = height - margin.top - margin.bottom;
+
+ const axisSpacing = plotWidth / (dimensions.length - 1);
+
+ return (
+
+
+
+ {/* Legend */}
+
+
+ );
+};
diff --git a/atomizer-dashboard/frontend/src/components/dashboard/ParetoPlot.tsx b/atomizer-dashboard/frontend/src/components/dashboard/ParetoPlot.tsx
new file mode 100644
index 00000000..4b213ec6
--- /dev/null
+++ b/atomizer-dashboard/frontend/src/components/dashboard/ParetoPlot.tsx
@@ -0,0 +1,85 @@
+import { ResponsiveContainer, ScatterChart, Scatter, XAxis, YAxis, ZAxis, Tooltip, Cell, CartesianGrid, Line } from 'recharts';
+import { Card } from '../common/Card';
+
+interface ParetoPlotProps {
+ data: any[];
+ xKey: string;
+ yKey: string;
+ zKey?: string;
+}
+
+export const ParetoPlot = ({ data, xKey, yKey, zKey }: ParetoPlotProps) => {
+ // Filter out null/undefined data points
+ const validData = data.filter(d =>
+ d &&
+ d[xKey] !== null && d[xKey] !== undefined &&
+ d[yKey] !== null && d[yKey] !== undefined
+ );
+
+ if (validData.length === 0) {
+ return (
+
+
+ No Pareto front data yet
+
+
+ );
+ }
+
+ // Sort data by x-coordinate for Pareto front line
+ const sortedData = [...validData].sort((a, b) => a[xKey] - b[xKey]);
+
+ return (
+
+
+
+
+
+
+
+ {zKey && }
+ {
+ if (typeof value === 'number') {
+ return value.toFixed(2);
+ }
+ return value;
+ }}
+ />
+ {/* Pareto front line */}
+
+
+ {validData.map((entry, index) => (
+ |
+ ))}
+
+
+
+
+
+ );
+};
\ No newline at end of file
diff --git a/atomizer-dashboard/frontend/src/components/dashboard/ReportBuilder.tsx b/atomizer-dashboard/frontend/src/components/dashboard/ReportBuilder.tsx
new file mode 100644
index 00000000..1d64a3b7
--- /dev/null
+++ b/atomizer-dashboard/frontend/src/components/dashboard/ReportBuilder.tsx
@@ -0,0 +1,120 @@
+import { useState } from 'react';
+import { Card } from '../common/Card';
+import { Button } from '../common/Button';
+import { Input } from '../common/Input';
+import { FileText, Download, Plus, Trash2, MoveUp, MoveDown } from 'lucide-react';
+
+interface ReportSection {
+ id: string;
+ type: 'text' | 'chart' | 'table' | 'image';
+ title: string;
+ content: string;
+}
+
+export const ReportBuilder = () => {
+ const [sections, setSections] = useState([
+ { id: '1', type: 'text', title: 'Executive Summary', content: 'The optimization study successfully converged...' },
+ { id: '2', type: 'chart', title: 'Convergence Plot', content: 'convergence_plot' },
+ { id: '3', type: 'table', title: 'Top 10 Designs', content: 'top_designs_table' },
+ ]);
+
+ const addSection = (type: ReportSection['type']) => {
+ setSections([
+ ...sections,
+ { id: Date.now().toString(), type, title: 'New Section', content: '' }
+ ]);
+ };
+
+ const removeSection = (id: string) => {
+ setSections(sections.filter(s => s.id !== id));
+ };
+
+ const moveSection = (index: number, direction: 'up' | 'down') => {
+ if (direction === 'up' && index === 0) return;
+ if (direction === 'down' && index === sections.length - 1) return;
+
+ const newSections = [...sections];
+ const targetIndex = direction === 'up' ? index - 1 : index + 1;
+ [newSections[index], newSections[targetIndex]] = [newSections[targetIndex], newSections[index]];
+ setSections(newSections);
+ };
+
+ const updateSection = (id: string, field: keyof ReportSection, value: string) => {
+ setSections(sections.map(s => s.id === id ? { ...s, [field]: value } : s));
+ };
+
+ return (
+
+ {/* Editor Sidebar */}
+
+
+
+ {sections.map((section, index) => (
+
+
+
{section.type}
+
+
+
+
+
+
+
updateSection(section.id, 'title', e.target.value)}
+ className="mb-2 text-sm"
+ />
+ {section.type === 'text' && (
+