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