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