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