2import { BenchmarkCharts } from "../benchmark/charts/BenchmarkCharts";
3import { BenchmarkTable } from "../benchmark/table/BenchmarkTable";
5type ChartData = Array<{
6 algorithm: string;
7 compression_ratio: number;
8 encode_speed: number;
9 decode_speed: number;
10}>;
12interface AlgorithmContentProps {
13 algorithm: Algorithm;
14 benchmarkData: BenchmarkData | null;
15 chartData: ChartData;
16}
18export const AlgorithmContent = ({
19 algorithm,
20 benchmarkData,
21 chartData,
22}: AlgorithmContentProps) => {
23 return (
24 <div>
25 <div style={{ marginBottom: "1.5rem" }}>
26 <p style={{ fontSize: "0.9rem", lineHeight: "1.5" }}>
27 {algorithm.description}
28 </p>
29 </div>
30 <div
31 style={{
32 marginBottom: "1.5rem",
33 display: "flex",
34 gap: "2rem",
35 flexWrap: "wrap",
36 }}
37 >
38 <div>
39 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>
40 Version:{" "}
41 </span>
42 <span style={{ fontSize: "0.9rem" }}>{algorithm.version}</span>
43 </div>
44 <div>
45 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>Tags: </span>
46 {algorithm.tags.map((tag) => (
47 <span
48 key={tag}
49 style={{
50 display: "inline-block",
51 backgroundColor: "#e1e1e1",
52 padding: "2px 6px",
53 borderRadius: "3px",
54 margin: "2px",
55 fontSize: "0.8rem",
56 }}
57 >
58 {tag}
59 </span>
60 ))}
61 </div>
62 {algorithm.source_file && (
63 <div>
64 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>
65 Source:{" "}
66 </span>
67 <a
68 href={algorithm.source_file}
69 target="_blank"
70 rel="noopener noreferrer"
71 style={{
72 color: "#0066cc",
73 textDecoration: "none",
74 padding: "2px 6px",
75 backgroundColor: "#f0f0f0",
76 borderRadius: "4px",
77 fontSize: "0.9rem",
78 }}
79 >
80 View
81 </a>
82 </div>
83 )}
84 </div>
85 {benchmarkData && (
86 <>
87 <div style={{ marginBottom: "1.5rem" }}>
88 <h2
89 style={{
90 fontSize: "1.2rem",
91 fontWeight: "bold",
92 marginBottom: "0.5rem",
93 }}
94 >
95 Benchmark Results
96 </h2>
97 <BenchmarkCharts chartData={chartData} />
98 </div>
99 <div style={{ marginBottom: "1.5rem" }}>
100 <BenchmarkTable
101 results={benchmarkData.results.filter(
102 (result) => result.algorithm === algorithm.name,
103 )}
104 />
105 </div>
106 </>
107 )}
108 </div>
109 );
110};