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