1import { useNavigate } from "react-router-dom";
2import { useState } from "react";
3import ReactMarkdown from "react-markdown";
4import remarkMath from "remark-math";
5import rehypeKatex from "rehype-katex";
6import { BenchmarkData } from "../../types";
7import { BenchmarkCharts } from "../benchmark/charts/BenchmarkCharts";
8import { BenchmarkScatterPlots } from "../benchmark/charts/BenchmarkScatterPlots";
9import { BenchmarkTable } from "../benchmark/table/BenchmarkTable";
10import "./ContentStyles.css";
12export interface BaseItem {
13 name: string;
14 description: string;
15 long_description?: string;
16 version: string;
17 tags: string[];
18 source_file?: string;
19}
21interface BaseContentProps {
22 item: BaseItem;
23 benchmarkData: BenchmarkData | null;
24 chartData: Array<{
25 algorithmOrDataset: string;
26 compression_ratio: number;
27 reference_compression_ratio: number | null;
28 encode_speed: number;
29 decode_speed: number;
30 rmse?: number;
31 tags: string[];
32 }>;
33 tagNavigationPrefix: string;
34 filterKey: "dataset" | "algorithm";
35 downloadSection?: React.ReactNode;
36 additionalContent?: React.ReactNode;
37 showSortByCompressionRatio?: boolean;
38 showNormalizeByReference?: boolean;
39}
41export const BaseContent = ({
42 item,
43 benchmarkData,
44 chartData,
45 tagNavigationPrefix,
46 filterKey,
47 downloadSection,
48 additionalContent,
49 showSortByCompressionRatio,
50 showNormalizeByReference,
51}: BaseContentProps) => {
52 const navigate = useNavigate();
53 const [isExpanded, setIsExpanded] = useState(false);
55 return (
56 <div>
57 <div className="content-container">
58 <p className="content-header">
59 <strong>{item.name}</strong> | {item.description}
60 </p>
61 {item.long_description && (
62 <>
63 <button
64 className="description-toggle"
65 onClick={() => setIsExpanded(!isExpanded)}
66 >
67 {isExpanded ? "View less" : "Read more"}
68 </button>
69 {isExpanded && (
70 <div className="long-description">
71 <ReactMarkdown
72 remarkPlugins={[remarkMath]}
73 rehypePlugins={[rehypeKatex]}
74 >
75 {item.long_description}
76 </ReactMarkdown>
77 </div>
78 )}
79 </>
80 )}
81 </div>
82 <div className="metadata-section">
83 <div>
84 <span className="metadata-label">Version: </span>
85 <span className="metadata-value">{item.version}</span>
86 </div>
87 <div>
88 <span className="metadata-label">Tags: </span>
89 {item.tags.map((tag) => (
90 <span
91 key={tag}
92 className="tag"
93 onClick={() => navigate(`${tagNavigationPrefix}?tag=${tag}`)}
94 >
95 {tag}
96 </span>
97 ))}
98 </div>
99 {downloadSection}
100 {item.source_file && (
101 <div>
102 <span className="metadata-label">Source: </span>
103 <a
104 href={item.source_file}
105 target="_blank"
106 rel="noopener noreferrer"
107 className="source-link"
108 >
109 View
110 </a>
111 </div>
112 )}
113 </div>
114 {additionalContent}
115 {benchmarkData && (
116 <>
117 <div className="benchmark-section">
118 <h2 className="benchmark-title">Benchmark Results</h2>
119 <BenchmarkCharts
120 chartData={chartData}
121 showSortByCompressionRatio={showSortByCompressionRatio}
122 showNormalizeByReference={showNormalizeByReference}
123 />
124 {filterKey === "dataset" && (
125 <BenchmarkScatterPlots chartData={chartData} />
126 )}
127 </div>
128 <div className="benchmark-section">
129 <BenchmarkTable
130 results={benchmarkData.results.filter(
131 (result) => result[filterKey] === item.name,
132 )}
133 />
134 </div>
135 </>
136 )}
137 </div>
138 );
139};