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 rmse?: number;
17 tags: string[];
18 }>;
19}
21export const DatasetContent = ({
22 dataset,
23 benchmarkData,
24 chartData,
25}: DatasetContentProps) => {
26 const containerRef = useRef<HTMLDivElement>(null);
27 const [containerWidth, setContainerWidth] = useState(1200);
29 useEffect(() => {
30 if (!containerRef.current) return;
32 const resizeObserver = new ResizeObserver((entries) => {
33 for (const entry of entries) {
34 setContainerWidth(entry.contentRect.width - 32);
35 }
36 });
38 resizeObserver.observe(containerRef.current);
40 return () => {
41 resizeObserver.disconnect();
42 };
43 }, []);
45 const downloadSection =
46 dataset.data_url_npy || dataset.data_url_raw ? (
47 <div>
48 <span className="metadata-label">Download: </span>
49 <span style={{ display: "inline-flex", gap: "0.5rem" }}>
50 {dataset.data_url_npy && (
51 <a
52 href={dataset.data_url_npy}
53 download={`${dataset.name}-${dataset.version}.npy`}
54 className="download-link"
55 >
56 NPY
57 </a>
58 )}
59 {dataset.data_url_raw && (
60 <a
61 href={dataset.data_url_raw}
62 download={`${dataset.name}-${dataset.version}.dat`}
63 className="download-link"
64 >
65 RAW
66 </a>
67 )}
68 </span>
69 </div>
70 ) : null;
72 const timeseriesSection = (
73 <div className="content-container">
74 <div
75 ref={containerRef}
76 style={{
77 width: "100%",
78 height: "300px",
79 backgroundColor: "#f5f5f5",
80 borderRadius: "4px",
81 padding: "1rem",
82 }}
83 >
84 <TimeseriesView width={containerWidth} height={250} dataset={dataset} />
85 </div>
86 </div>
87 );
89 return (
90 <BaseContent
91 item={dataset}
92 benchmarkData={benchmarkData}
93 chartData={chartData}
94 tagNavigationPrefix="/datasets"
95 filterKey="dataset"
96 downloadSection={downloadSection}
97 additionalContent={timeseriesSection}
98 showSortByCompressionRatio={true}
99 />
100 );
101};