1import { Dataset, BenchmarkData } from "../../types";
2import { useEffect, useRef, useState } from "react";
3import TimeseriesView from "./TimeseriesView";
4import { BaseContent } from "../shared/BaseContent";
5import { LossyAlgorithmSelector } from "./LossyAlgorithmSelector";
6import { ComparisonModeSelector } from "./ComparisonModeSelector";
7import { ReconstructedDataInfo, ComparisonMode } from "../../types/comparison";
8import "../shared/ContentStyles.css";
10interface DatasetContentProps {
11 dataset: Dataset;
12 benchmarkData: BenchmarkData | null;
13 chartData: Array<{
14 algorithmOrDataset: string;
15 compression_ratio: number;
16 reference_compression_ratio: number | null;
17 encode_speed: number;
18 decode_speed: number;
19 rmse?: number;
20 tags: string[];
21 }>;
22}
24export const DatasetContent = ({
25 dataset,
26 benchmarkData,
27 chartData,
28}: DatasetContentProps) => {
29 const containerRef = useRef<HTMLDivElement>(null);
30 const [containerWidth, setContainerWidth] = useState(1200);
31 const [reconstructedInfo, setReconstructedInfo] = useState<ReconstructedDataInfo | null>(null);
32 const [comparisonMode, setComparisonMode] = useState<ComparisonMode>("original");
34 useEffect(() => {
35 if (!containerRef.current) return;
37 const resizeObserver = new ResizeObserver((entries) => {
38 for (const entry of entries) {
39 setContainerWidth(entry.contentRect.width - 32);
40 }
41 });
43 resizeObserver.observe(containerRef.current);
45 return () => {
46 resizeObserver.disconnect();
47 };
48 }, []);
50 const downloadSection =
51 dataset.data_url_npy || dataset.data_url_raw ? (
52 <div>
53 <span className="metadata-label">Download: </span>
54 <span style={{ display: "inline-flex", gap: "0.5rem" }}>
55 {dataset.data_url_npy && (
56 <a
57 href={dataset.data_url_npy}
58 download={`${dataset.name}-${dataset.version}.npy`}
59 className="download-link"
60 >
61 NPY
62 </a>
63 )}
64 {dataset.data_url_raw && (
65 <a
66 href={dataset.data_url_raw}
67 download={`${dataset.name}-${dataset.version}.dat`}
68 className="download-link"
69 >
70 RAW
71 </a>
72 )}
73 </span>
74 </div>
75 ) : null;
77 const timeseriesSection = (
78 <div className="content-container">
79 {benchmarkData && (
80 <>
81 <LossyAlgorithmSelector
82 dataset={dataset}
83 benchmarkResults={benchmarkData.results}
84 selectedAlgorithm={reconstructedInfo?.algorithm || null}
85 onSelectAlgorithm={(info) => {
86 setReconstructedInfo(info);
87 if (info === null) {
88 setComparisonMode("original");
89 }
90 }}
91 />
92 {reconstructedInfo && (
93 <ComparisonModeSelector
94 mode={comparisonMode}
95 onModeChange={setComparisonMode}
96 />
97 )}
98 </>
99 )}
100 <div
101 ref={containerRef}
102 style={{
103 width: "100%",
104 height: "300px",
105 backgroundColor: "#f5f5f5",
106 borderRadius: "4px",
107 padding: "1rem",
108 }}
109 >
110 <TimeseriesView
111 width={containerWidth}
112 height={250}
113 dataset={dataset}
114 comparisonMode={comparisonMode}
115 reconstructedInfo={reconstructedInfo}
116 />
117 </div>
118 </div>
119 );
121 return (
122 <BaseContent
123 item={dataset}
124 benchmarkData={benchmarkData}
125 chartData={chartData}
126 tagNavigationPrefix="/datasets"
127 filterKey="dataset"
128 downloadSection={downloadSection}
129 additionalContent={timeseriesSection}
130 showSortByCompressionRatio={true}
131 />
132 );
133};