1import { Dataset, BenchmarkData } from "../../types";
2import { useEffect, useRef, useState } from "react";
3import TimeseriesView from "./TimeseriesView";
4import { BaseContent } from "../shared/BaseContent";
5import "../shared/ContentStyles.css";
7interface DatasetContentProps {
8 dataset: Dataset;
9 benchmarkData: BenchmarkData | null;
10 chartData: Array<{
11 algorithmOrDataset: string;
12 compression_ratio: number;
13 reference_compression_ratio: number | null;
14 encode_speed: number;
15 decode_speed: number;
16 }>;
17}
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 }, []);
43 const downloadSection =
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"
53 >
54 NPY
55 </a>
56 )}
57 {dataset.data_url_raw && (
58 <a
59 href={dataset.data_url_raw}
60 download={`${dataset.name}-${dataset.version}.dat`}
61 className="download-link"
62 >
63 RAW
64 </a>
65 )}
66 </span>
67 </div>
68 ) : null;
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} />
83 </div>
84 </div>
85 );
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}
96 showSortByCompressionRatio={true}
97 />
98 );
99};