Spaces:
Running
Running
File size: 2,778 Bytes
e85a399 b9bbaec e85a399 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 | import Plot from "react-plotly.js";
import type { SettingsUi, TrajectoryValues } from "./types.ts";
interface IterationHistoryPlotProps {
mode: SettingsUi["mode"];
trajectoryValues?: TrajectoryValues | null;
currentIteration: number;
}
export default function IterationHistoryPlot({ mode, trajectoryValues, currentIteration }: IterationHistoryPlotProps) {
const xValues = trajectoryValues?.x ?? [];
const yValues = trajectoryValues?.y ?? [];
const objectiveValues = mode === "Bivariate" ? trajectoryValues?.z ?? [] : yValues;
const iterations = xValues.map((_, index) => index);
const traces = mode === "Bivariate"
? [
{ name: "x", values: xValues, color: "#2563eb" },
{ name: "y", values: yValues, color: "#16a34a" },
{ name: "Objective", values: objectiveValues, color: "#dc2626" },
]
: [
{ name: "x", values: xValues, color: "#2563eb" },
{ name: "Objective", values: objectiveValues, color: "#dc2626" },
];
return (
<div className="h-64 min-h-64 w-full rounded border border-stone-200 bg-white">
<Plot
data={[
...traces.map((trace) => ({
x: iterations.slice(0, trace.values.length),
y: trace.values,
name: trace.name,
type: "scatter" as const,
mode: "lines+markers" as const,
line: { color: trace.color, width: 2 },
marker: { color: trace.color, size: 5 },
hovertemplate: `${trace.name}: %{y:.5g}<extra></extra>`,
})),
...traces.map((trace) => ({
x: trace.values[currentIteration] !== undefined ? [currentIteration] : [],
y: trace.values[currentIteration] !== undefined ? [trace.values[currentIteration]] : [],
name: `${trace.name} selected`,
type: "scatter" as const,
mode: "markers" as const,
marker: { color: trace.color, size: 11, line: { color: "white", width: 2 } },
hoverinfo: "skip" as const,
showlegend: false,
})),
]}
layout={{
title: { text: "Optimization history", font: { size: 14 } },
xaxis: {
title: { text: "Iteration" },
showticklabels: false,
ticks: "",
rangemode: "tozero",
},
yaxis: { title: { text: "Value" }, automargin: true },
legend: { orientation: "h", x: 0.5, xanchor: "center", y: 1.12 },
margin: { t: 58, r: 18, b: 45, l: 55 },
hovermode: "x unified",
paper_bgcolor: "transparent",
plot_bgcolor: "transparent",
}}
style={{ width: "100%", height: "100%" }}
config={{ responsive: true, displayModeBar: false }}
/>
</div>
);
}
|