1import { useParams } from "react-router-dom";
2import { Algorithm as AlgorithmType, BenchmarkData } from "../types";
3import { BenchmarkCharts } from "../components/benchmark/charts/BenchmarkCharts";
4import { useBenchmarkChartData } from "../hooks/useBenchmarkChartData";
5import { BenchmarkTable } from "../components/benchmark/table/BenchmarkTable";
7interface AlgorithmProps {
8 algorithms: AlgorithmType[];
9 benchmarkData: BenchmarkData | null;
10}
12function Algorithm({ algorithms, benchmarkData }: AlgorithmProps) {
13 const { algorithmName } = useParams<{ algorithmName: string }>();
14 const algorithm = algorithms.find((a) => a.name === algorithmName);
15 const chartData = useBenchmarkChartData(
16 benchmarkData?.results || [],
17 null,
18 algorithm?.name || null,
19 );
21 if (!algorithm) {
22 return <div>Algorithm not found</div>;
23 }
25 return (
26 <div>
27 <h1
28 style={{
29 fontSize: "2rem",
30 fontWeight: "bold",
31 color: "#333",
32 marginBottom: "1rem",
33 }}
34 >
35 {algorithm.name}
36 </h1>
37 <div>
38 <div style={{ marginBottom: "1.5rem" }}>
39 <p style={{ fontSize: "0.9rem", lineHeight: "1.5" }}>
40 {algorithm.description}
41 </p>
42 </div>
43 <div
44 style={{
45 marginBottom: "1.5rem",
46 display: "flex",
47 gap: "2rem",
48 flexWrap: "wrap",
49 }}
50 >
51 <div>
52 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>
53 Version:{" "}
54 </span>
55 <span style={{ fontSize: "0.9rem" }}>{algorithm.version}</span>
56 </div>
57 <div>
58 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>
59 Tags:{" "}
60 </span>
61 {algorithm.tags.map((tag) => (
62 <span
63 key={tag}
64 style={{
65 display: "inline-block",
66 backgroundColor: "#e1e1e1",
67 padding: "2px 6px",
68 borderRadius: "3px",
69 margin: "2px",
70 fontSize: "0.8rem",
71 }}
72 >
73 {tag}
74 </span>
75 ))}
76 </div>
77 {algorithm.source_file && (
78 <div>
79 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>
80 Source:{" "}
81 </span>
82 <a
83 href={algorithm.source_file}
84 target="_blank"
85 rel="noopener noreferrer"
86 style={{
87 color: "#0066cc",
88 textDecoration: "none",
89 padding: "2px 6px",
90 backgroundColor: "#f0f0f0",
91 borderRadius: "4px",
92 fontSize: "0.9rem",
93 }}
94 >
95 View
96 </a>
97 </div>
98 )}
99 </div>
100 {benchmarkData && (
101 <>
102 <div style={{ marginBottom: "1.5rem" }}>
103 <h2
104 style={{
105 fontSize: "1.2rem",
106 fontWeight: "bold",
107 marginBottom: "0.5rem",
108 }}
109 >
110 Benchmark Results
111 </h2>
112 <BenchmarkCharts chartData={chartData} />
113 </div>
114 <div style={{ marginBottom: "1.5rem" }}>
115 <BenchmarkTable
116 results={benchmarkData.results.filter(
117 (result) => result.algorithm === algorithm.name,
118 )}
119 />
120 </div>
121 </>
122 )}
123 </div>
124 </div>
125 );
126}
128export default Algorithm;