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