1import { Dataset, BenchmarkData } from "../../types";
2import TimeseriesView from "./TimeseriesView";
3import { BenchmarkCharts } from "../benchmark/charts/BenchmarkCharts";
4import { BenchmarkTable } from "../benchmark/table/BenchmarkTable";
5import { useEffect, useRef, useState } from "react";
6type ChartData = Array<{
7 algorithm: string;
8 compression_ratio: number;
9 encode_speed: number;
10 decode_speed: number;
11}>;
13interface DatasetContentProps {
14 dataset: Dataset;
15 benchmarkData: BenchmarkData | null;
16 chartData: ChartData;
17}
19export const DatasetContent = ({
20 dataset,
21 benchmarkData,
22 chartData,
23}: DatasetContentProps) => {
24 const containerRef = useRef<HTMLDivElement>(null);
25 const [containerWidth, setContainerWidth] = useState(1200);
27 useEffect(() => {
28 if (!containerRef.current) return;
30 const resizeObserver = new ResizeObserver((entries) => {
31 for (const entry of entries) {
32 setContainerWidth(entry.contentRect.width - 32);
33 }
34 });
36 resizeObserver.observe(containerRef.current);
38 return () => {
39 resizeObserver.disconnect();
40 };
41 }, []);
43 return (
44 <div>
45 <div style={{ marginBottom: "1.5rem" }}>
46 <p style={{ fontSize: "0.9rem", lineHeight: "1.5" }}>
47 {dataset.description}
48 </p>
49 </div>
50 <div
51 style={{
52 marginBottom: "1.5rem",
53 display: "flex",
54 gap: "2rem",
55 flexWrap: "wrap",
56 }}
57 >
58 <div>
59 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>
60 Version:{" "}
61 </span>
62 <span style={{ fontSize: "0.9rem" }}>{dataset.version}</span>
63 </div>
64 <div>
65 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>Tags: </span>
66 {dataset.tags.map((tag) => (
67 <span
68 key={tag}
69 style={{
70 display: "inline-block",
71 backgroundColor: "#e1e1e1",
72 padding: "2px 6px",
73 borderRadius: "3px",
74 margin: "2px",
75 fontSize: "0.8rem",
76 }}
77 >
78 {tag}
79 </span>
80 ))}
81 </div>
82 <div>
83 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>
84 Download:{" "}
85 </span>
86 <span style={{ display: "inline-flex", gap: "0.5rem" }}>
87 {dataset.data_url_npy && (
88 <a
89 href={dataset.data_url_npy}
90 download={`${dataset.name}-${dataset.version}.npy`}
91 style={{
92 color: "#0066cc",
93 textDecoration: "none",
94 padding: "2px 6px",
95 backgroundColor: "#f0f0f0",
96 borderRadius: "4px",
97 fontSize: "0.9rem",
98 }}
99 >
100 NPY
101 </a>
102 )}
103 {dataset.data_url_raw && (
104 <a
105 href={dataset.data_url_raw}
106 download={`${dataset.name}-${dataset.version}.dat`}
107 style={{
108 color: "#0066cc",
109 textDecoration: "none",
110 padding: "2px 6px",
111 backgroundColor: "#f0f0f0",
112 borderRadius: "4px",
113 fontSize: "0.9rem",
114 }}
115 >
116 RAW
117 </a>
118 )}
119 </span>
120 </div>
121 {dataset.source_file && (
122 <div>
123 <span style={{ fontWeight: "bold", fontSize: "0.9rem" }}>
124 Source:{" "}
125 </span>
126 <a
127 href={dataset.source_file}
128 target="_blank"
129 rel="noopener noreferrer"
130 style={{
131 color: "#0066cc",
132 textDecoration: "none",
133 padding: "2px 6px",
134 backgroundColor: "#f0f0f0",
135 borderRadius: "4px",
136 fontSize: "0.9rem",
137 }}
138 >
139 View
140 </a>
141 </div>
142 )}
143 </div>
144 <div style={{ marginBottom: "1.5rem" }}>
145 <div
146 ref={containerRef}
147 style={{
148 width: "100%",
149 height: "300px",
150 backgroundColor: "#f5f5f5",
151 borderRadius: "4px",
152 padding: "1rem",
153 }}
154 >
155 <TimeseriesView
156 width={containerWidth}
157 height={250}
158 dataset={dataset}
159 />
160 </div>
161 </div>
162 {benchmarkData && (
163 <>
164 <div style={{ marginBottom: "1.5rem" }}>
165 <h2
166 style={{
167 fontSize: "1.2rem",
168 fontWeight: "bold",
169 marginBottom: "0.5rem",
170 }}
171 >
172 Benchmark Results
173 </h2>
174 <BenchmarkCharts chartData={chartData} />
175 </div>
176 <div style={{ marginBottom: "1.5rem" }}>
177 <BenchmarkTable
178 results={benchmarkData.results.filter(
179 (result) => result.dataset === dataset.name,
180 )}
181 />
182 </div>
183 </>
184 )}
185 </div>
186 );
187};