2import { useEffect, useRef, useState } from "react";
4import { BaseContent } from "../shared/BaseContent";
5import "../shared/ContentStyles.css";
104f442improve layoutJeremy Magland 6
7interface DatasetContentProps {
8 dataset: Dataset;
9 benchmarkData: BenchmarkData | null;
15 decode_speed: number;
16 }>;
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 }, []);
44 dataset.data_url_npy || dataset.data_url_raw ? (
45 <div>
46 <span className="metadata-label">Download: </span>
47 <span style={{ display: "inline-flex", gap: "0.5rem" }}>
48 {dataset.data_url_npy && (
49 <a
50 href={dataset.data_url_npy}
51 download={`${dataset.name}-${dataset.version}.npy`}
52 className="download-link"
55 </a>
56 )}
57 {dataset.data_url_raw && (
60 download={`${dataset.name}-${dataset.version}.dat`}
61 className="download-link"
66 </span>
70 const timeseriesSection = (
71 <div className="content-container">
72 <div
73 ref={containerRef}
74 style={{
75 width: "100%",
76 height: "300px",
77 backgroundColor: "#f5f5f5",
78 borderRadius: "4px",
79 padding: "1rem",
80 }}
81 >
82 <TimeseriesView width={containerWidth} height={250} dataset={dataset} />
84 </div>
85 );
1ac6645long descriptionsJeremy Magland 86
87 return (
88 <BaseContent
89 item={dataset}
90 benchmarkData={benchmarkData}
91 chartData={chartData}
92 tagNavigationPrefix="/datasets"
93 filterKey="dataset"
94 downloadSection={downloadSection}
95 additionalContent={timeseriesSection}
98 );