1import { BenchmarkResult, Dataset } from "../../types";
2import { ReconstructedDataInfo } from "../../types/comparison";
4interface LossyAlgorithmSelectorProps {
5 dataset: Dataset;
6 benchmarkResults: BenchmarkResult[];
7 selectedAlgorithm: string | null;
8 onSelectAlgorithm: (info: ReconstructedDataInfo | null) => void;
9}
11export const LossyAlgorithmSelector = ({
12 dataset,
13 benchmarkResults,
14 selectedAlgorithm,
15 onSelectAlgorithm,
16}: LossyAlgorithmSelectorProps) => {
17 // Filter for lossy algorithms with results for this dataset
18 const lossyResults = benchmarkResults.filter(
19 (result) =>
20 result.dataset === dataset.name &&
21 result.reconstructed_url_raw != null &&
22 result.rmse != null
23 );
25 if (lossyResults.length === 0) {
26 return null;
27 }
29 const handleChange = (event: React.ChangeEvent<HTMLSelectElement>) => {
30 const value = event.target.value;
31 if (value === "") {
32 onSelectAlgorithm(null);
33 return;
34 }
36 const result = lossyResults.find((r) => r.algorithm === value);
37 if (result && result.reconstructed_url_raw) {
38 onSelectAlgorithm({
39 algorithm: result.algorithm,
40 rmse: result.rmse || 0,
41 max_error: result.max_error || 0,
42 reconstructedUrl: result.reconstructed_url_raw,
43 datasetUrl: dataset.data_url_raw || "",
44 datasetJsonUrl: dataset.data_url_json || "",
45 });
46 }
47 };
49 return (
50 <div style={{ marginBottom: "16px" }}>
51 <label
52 htmlFor="lossy-algorithm-select"
53 style={{
54 display: "block",
55 marginBottom: "8px",
56 fontSize: "14px",
57 fontWeight: "500",
58 color: "#333",
59 }}
60 >
61 Compare with lossy reconstruction:
62 </label>
63 <select
64 id="lossy-algorithm-select"
65 value={selectedAlgorithm || ""}
66 onChange={handleChange}
67 style={{
68 width: "100%",
69 padding: "8px 12px",
70 fontSize: "14px",
71 borderRadius: "4px",
72 border: "1px solid #ccc",
73 backgroundColor: "white",
74 cursor: "pointer",
75 }}
76 >
77 <option value="">Original data only</option>
78 {lossyResults.map((result) => (
79 <option key={result.algorithm} value={result.algorithm}>
80 {result.algorithm} (RMSE: {result.rmse?.toFixed(3)}, Max Error:{" "}
81 {result.max_error?.toFixed(3)}, Ratio:{" "}
82 {result.compression_ratio?.toFixed(2)})
83 </option>
84 ))}
85 </select>
86 </div>
87 );
88};