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;
11 algorithm: string;
12 compression_ratio: number;
13 encode_speed: number;
14 decode_speed: number;
15 }>;
18export const DatasetContent = ({
19 dataset,
20 benchmarkData,
21 chartData,
22}: DatasetContentProps) => {
23 const containerRef = useRef<HTMLDivElement>(null);
24 const [containerWidth, setContainerWidth] = useState(1200);
26 useEffect(() => {
27 if (!containerRef.current) return;
29 const resizeObserver = new ResizeObserver((entries) => {
30 for (const entry of entries) {
31 setContainerWidth(entry.contentRect.width - 32);
32 }
33 });
35 resizeObserver.observe(containerRef.current);
37 return () => {
38 resizeObserver.disconnect();
39 };
40 }, []);
43 dataset.data_url_npy || dataset.data_url_raw ? (
44 <div>
45 <span className="metadata-label">Download: </span>
46 <span style={{ display: "inline-flex", gap: "0.5rem" }}>
47 {dataset.data_url_npy && (
48 <a
49 href={dataset.data_url_npy}
50 download={`${dataset.name}-${dataset.version}.npy`}
51 className="download-link"
54 </a>
55 )}
56 {dataset.data_url_raw && (
59 download={`${dataset.name}-${dataset.version}.dat`}
60 className="download-link"
65 </span>
69 const timeseriesSection = (
70 <div className="content-container">
71 <div
72 ref={containerRef}
73 style={{
74 width: "100%",
75 height: "300px",
76 backgroundColor: "#f5f5f5",
77 borderRadius: "4px",
78 padding: "1rem",
79 }}
80 >
81 <TimeseriesView width={containerWidth} height={250} dataset={dataset} />
83 </div>
84 );
1ac6645long descriptionsJeremy Magland 85
86 return (
87 <BaseContent
88 item={dataset}
89 benchmarkData={benchmarkData}
90 chartData={chartData}
91 tagNavigationPrefix="/datasets"
92 filterKey="dataset"
93 downloadSection={downloadSection}
94 additionalContent={timeseriesSection}
95 />
96 );