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 }>;
31 tagNavigationPrefix: string;
32 filterKey: "dataset" | "algorithm";
33 downloadSection?: React.ReactNode;
34 additionalContent?: React.ReactNode;
35 showSortByCompressionRatio?: boolean;
36 showNormalizeByReference?: boolean;
37}
39export const BaseContent = ({
40 item,
41 benchmarkData,
42 chartData,
43 tagNavigationPrefix,
44 filterKey,
45 downloadSection,
46 additionalContent,
47 showSortByCompressionRatio,
48 showNormalizeByReference,
49}: BaseContentProps) => {
50 const navigate = useNavigate();
51 const [isExpanded, setIsExpanded] = useState(false);
53 return (
54 <div>
55 <div className="content-container">
56 <p className="content-header">
57 <strong>{item.name}</strong> | {item.description}
58 </p>
59 {item.long_description && (
60 <>
61 <button
62 className="description-toggle"
63 onClick={() => setIsExpanded(!isExpanded)}
64 >
65 {isExpanded ? "View less" : "Read more"}
66 </button>
67 {isExpanded && (
68 <div className="long-description">
69 <ReactMarkdown
70 remarkPlugins={[remarkMath]}
71 rehypePlugins={[rehypeKatex]}
72 >
73 {item.long_description}
74 </ReactMarkdown>
75 </div>
76 )}
77 </>
78 )}
79 </div>
80 <div className="metadata-section">
81 <div>
82 <span className="metadata-label">Version: </span>
83 <span className="metadata-value">{item.version}</span>
84 </div>
85 <div>
86 <span className="metadata-label">Tags: </span>
87 {item.tags.map((tag) => (
88 <span
89 key={tag}
90 className="tag"
91 onClick={() => navigate(`${tagNavigationPrefix}?tag=${tag}`)}
92 >
93 {tag}
94 </span>
95 ))}
96 </div>
97 {downloadSection}
98 {item.source_file && (
99 <div>
100 <span className="metadata-label">Source: </span>
101 <a
102 href={item.source_file}
103 target="_blank"
104 rel="noopener noreferrer"
105 className="source-link"
106 >
107 View
108 </a>
109 </div>
110 )}
111 </div>
112 {additionalContent}
113 {benchmarkData && (
114 <>
115 <div className="benchmark-section">
116 <h2 className="benchmark-title">Benchmark Results</h2>
117 <BenchmarkCharts
118 chartData={chartData}
119 showSortByCompressionRatio={showSortByCompressionRatio}
120 showNormalizeByReference={showNormalizeByReference}
121 />
122 {filterKey === "dataset" && (
123 <BenchmarkScatterPlots chartData={chartData} />
124 )}
125 </div>
126 <div className="benchmark-section">
127 <BenchmarkTable
128 results={benchmarkData.results.filter(
129 (result) => result[filterKey] === item.name,
130 )}
131 />
132 </div>
133 </>
134 )}
135 </div>
136 );
137};