2import { Dataset as DatasetType } from "../types";
3import TimeseriesView from "../components/dataset/TimeseriesView";
a09013dupload dataset .jsonJeremy Magland 4
5interface DatasetProps {
6 datasets: DatasetType[];
7}
9function Dataset({ datasets }: DatasetProps) {
10 const { datasetName } = useParams<{ datasetName: string }>();
be099efview dataset dataJeremy Magland 11 const dataset = datasets.find((d) => d.name === datasetName);
a09013dupload dataset .jsonJeremy Magland 12
13 if (!dataset) {
14 return <div>Dataset not found</div>;
15 }
17 return (
18 <div>
19 <h1
20 style={{
21 fontSize: "2rem",
22 fontWeight: "bold",
23 color: "#333",
24 marginBottom: "1rem",
25 }}
26 >
27 {dataset.name}
28 </h1>
29 <div style={{ maxWidth: "800px", margin: "0 auto" }}>
30 <div style={{ marginBottom: "1.5rem" }}>
32 style={{
33 fontSize: "1.2rem",
34 fontWeight: "bold",
35 marginBottom: "0.5rem",
36 }}
37 >
38 Description
39 </h2>
40 <p style={{ fontSize: "0.9rem", lineHeight: "1.5" }}>
41 {dataset.description}
42 </p>
44 <div style={{ marginBottom: "1.5rem" }}>
46 style={{
47 width: "100%",
48 height: "300px",
49 backgroundColor: "#f5f5f5",
50 borderRadius: "4px",
51 padding: "1rem",
52 }}
53 >
54 <TimeseriesView width={700} height={250} dataset={dataset} />
55 </div>
56 </div>
57 <div style={{ marginBottom: "1.5rem" }}>
58 <h2
59 style={{
60 fontSize: "1.2rem",
61 fontWeight: "bold",
62 marginBottom: "0.5rem",
63 }}
64 >
65 Version
66 </h2>
a09013dupload dataset .jsonJeremy Magland 67 <p style={{ fontSize: "0.9rem" }}>{dataset.version}</p>
68 </div>
69 <div style={{ marginBottom: "1.5rem" }}>
71 style={{
72 fontSize: "1.2rem",
73 fontWeight: "bold",
74 marginBottom: "0.5rem",
75 }}
76 >
77 Tags
78 </h2>
80 {dataset.tags.map((tag) => (
81 <span
82 key={tag}
83 style={{
84 display: "inline-block",
85 backgroundColor: "#e1e1e1",
86 padding: "2px 6px",
87 borderRadius: "3px",
88 margin: "2px",
89 fontSize: "0.8rem",
90 }}
91 >
92 {tag}
93 </span>
94 ))}
95 </div>
96 </div>
97 <div style={{ marginBottom: "1.5rem" }}>
99 style={{
100 fontSize: "1.2rem",
101 fontWeight: "bold",
102 marginBottom: "0.5rem",
103 }}
104 >
105 Downloads
106 </h2>
108 {dataset.data_url_npy && (
109 <a
110 href={dataset.data_url_npy}
111 download={`${dataset.name}-${dataset.version}.npy`}
112 style={{
113 color: "#0066cc",
114 textDecoration: "none",
115 padding: "4px 8px",
116 backgroundColor: "#f0f0f0",
117 borderRadius: "4px",
118 fontSize: "0.9rem",
119 }}
120 >
121 Download NPY
122 </a>
123 )}
124 {dataset.data_url_raw && (
125 <a
126 href={dataset.data_url_raw}
127 download={`${dataset.name}-${dataset.version}.dat`}
128 style={{
129 color: "#0066cc",
130 textDecoration: "none",
131 padding: "4px 8px",
132 backgroundColor: "#f0f0f0",
133 borderRadius: "4px",
134 fontSize: "0.9rem",
135 }}
136 >
137 Download RAW
138 </a>
139 )}
140 </div>
141 </div>
142 {dataset.source_file && (
143 <div style={{ marginBottom: "1.5rem" }}>
145 style={{
146 fontSize: "1.2rem",
147 fontWeight: "bold",
148 marginBottom: "0.5rem",
149 }}
150 >
151 Source
152 </h2>
154 href={dataset.source_file}
155 target="_blank"
156 rel="noopener noreferrer"
157 style={{
158 color: "#0066cc",
159 textDecoration: "none",
160 padding: "4px 8px",
161 backgroundColor: "#f0f0f0",
162 borderRadius: "4px",
163 fontSize: "0.9rem",
164 }}
165 >
166 View Source
167 </a>
168 </div>
169 )}
170 </div>
171 </div>
172 );
173}
175export default Dataset;