/ concept-collection / benchcompress
Sign in
concept-collection / benchcompress
7884e06
Branches
mainbenchmark-results
benchcompress / web-ui / src / pages / Algorithms.tsx
196 lines · 5.7 KBCodeBlameHistory
0968553routingJeremy Magland 1import { Algorithm } from "../types";
db4e6b9links to source codeJeremy Magland 2import { Link } from "react-router-dom";
0602a7eui improvementsJeremy Magland 3import { TagFilter } from "../components/TagFilter";
4import { useTagFilter } from "../hooks/useTagFilter";
0968553routingJeremy Magland 5
6interface AlgorithmsProps {
7 algorithms: Algorithm[];
8}
10function Algorithms({ algorithms }: AlgorithmsProps) {
0602a7eui improvementsJeremy Magland 11 const {
12 selectedTags,
13 availableTags,
14 filteredItems: filteredAlgorithms,
15 toggleTag,
16 } = useTagFilter(algorithms);
85d3449pagesJeremy Magland 18 return (
19 <div>
0602a7eui improvementsJeremy Magland 20 <div style={{ marginBottom: "2rem" }}>
21 <h1
22 style={{
23 fontSize: "2rem",
24 fontWeight: "bold",
25 color: "#333",
26 marginBottom: "1rem",
27 }}
28 >
29 Compression Algorithms
30 </h1>
31 <TagFilter
32 availableTags={availableTags}
33 selectedTags={selectedTags}
34 onTagToggle={toggleTag}
35 label="Filter algorithms"
36 />
37 </div>
0968553routingJeremy Magland 38 <div style={{ overflowX: "auto" }}>
39 <table style={{ width: "100%", borderCollapse: "collapse" }}>
40 <thead>
41 <tr style={{ backgroundColor: "#f5f5f5" }}>
42 <th
43 style={{
a3cad9bformat codeJeremy Magland 44 padding: "8px 12px",
0968553routingJeremy Magland 45 textAlign: "left",
a3cad9bformat codeJeremy Magland 46 borderBottom: "1px solid #ddd",
47 fontSize: "0.9rem",
48 whiteSpace: "nowrap",
0968553routingJeremy Magland 49 }}
50 >
51 Name
52 </th>
53 <th
54 style={{
a3cad9bformat codeJeremy Magland 55 padding: "8px 12px",
0968553routingJeremy Magland 56 textAlign: "left",
a3cad9bformat codeJeremy Magland 57 borderBottom: "1px solid #ddd",
58 fontSize: "0.9rem",
59 whiteSpace: "nowrap",
0968553routingJeremy Magland 60 }}
61 >
62 Version
63 </th>
64 <th
65 style={{
a3cad9bformat codeJeremy Magland 66 padding: "8px 12px",
0968553routingJeremy Magland 67 textAlign: "left",
a3cad9bformat codeJeremy Magland 68 borderBottom: "1px solid #ddd",
69 fontSize: "0.9rem",
70 whiteSpace: "nowrap",
0968553routingJeremy Magland 71 }}
72 >
73 Description
74 </th>
75 <th
76 style={{
a3cad9bformat codeJeremy Magland 77 padding: "8px 12px",
0968553routingJeremy Magland 78 textAlign: "left",
a3cad9bformat codeJeremy Magland 79 borderBottom: "1px solid #ddd",
80 fontSize: "0.9rem",
81 whiteSpace: "nowrap",
0968553routingJeremy Magland 82 }}
83 >
84 Tags
85 </th>
db4e6b9links to source codeJeremy Magland 86 <th
87 style={{
a3cad9bformat codeJeremy Magland 88 padding: "8px 12px",
db4e6b9links to source codeJeremy Magland 89 textAlign: "left",
a3cad9bformat codeJeremy Magland 90 borderBottom: "1px solid #ddd",
91 fontSize: "0.9rem",
92 whiteSpace: "nowrap",
db4e6b9links to source codeJeremy Magland 93 }}
94 >
95 Source
96 </th>
0968553routingJeremy Magland 97 </tr>
98 </thead>
99 <tbody>
0602a7eui improvementsJeremy Magland 100 {filteredAlgorithms.map((algorithm, index) => (
0968553routingJeremy Magland 101 <tr
102 key={`${algorithm.name}-${algorithm.version}`}
103 style={{
104 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
105 }}
106 >
a3cad9bformat codeJeremy Magland 107 <td
108 style={{
109 padding: "6px 12px",
110 borderBottom: "1px solid #ddd",
111 fontSize: "0.9rem",
112 }}
113 >
db4e6b9links to source codeJeremy Magland 114 <Link
0602a7eui improvementsJeremy Magland 115 to={`/algorithm/${encodeURIComponent(algorithm.name)}`}
db4e6b9links to source codeJeremy Magland 116 style={{
117 color: "#0066cc",
118 textDecoration: "none",
119 fontWeight: "500",
120 }}
121 >
122 {algorithm.name}
123 </Link>
0968553routingJeremy Magland 124 </td>
a3cad9bformat codeJeremy Magland 125 <td
126 style={{
127 padding: "6px 12px",
128 borderBottom: "1px solid #ddd",
129 fontSize: "0.9rem",
130 }}
131 >
0968553routingJeremy Magland 132 {algorithm.version}
133 </td>
a3cad9bformat codeJeremy Magland 134 <td
135 style={{
136 padding: "6px 12px",
137 borderBottom: "1px solid #ddd",
138 fontSize: "0.9rem",
139 }}
140 >
0968553routingJeremy Magland 141 {algorithm.description}
142 </td>
a3cad9bformat codeJeremy Magland 143 <td
144 style={{
145 padding: "6px 12px",
146 borderBottom: "1px solid #ddd",
147 fontSize: "0.9rem",
148 }}
149 >
0968553routingJeremy Magland 150 {algorithm.tags.map((tag) => (
151 <span
152 key={tag}
153 style={{
154 display: "inline-block",
155 backgroundColor: "#e1e1e1",
a3cad9bformat codeJeremy Magland 156 padding: "2px 6px",
157 borderRadius: "3px",
158 margin: "1px",
159 fontSize: "0.8rem",
0968553routingJeremy Magland 160 }}
161 >
162 {tag}
163 </span>
164 ))}
165 </td>
a3cad9bformat codeJeremy Magland 166 <td
167 style={{
168 padding: "6px 12px",
169 borderBottom: "1px solid #ddd",
170 fontSize: "0.9rem",
171 }}
172 >
db4e6b9links to source codeJeremy Magland 173 {algorithm.source_file && (
174 <a
175 href={algorithm.source_file}
176 target="_blank"
177 rel="noopener noreferrer"
178 style={{
179 color: "#0066cc",
180 textDecoration: "none",
181 }}
182 >
183 View Source
184 </a>
185 )}
186 </td>
0968553routingJeremy Magland 187 </tr>
188 ))}
189 </tbody>
190 </table>
85d3449pagesJeremy Magland 191 </div>
192 </div>
193 );
196export default Algorithms;
↑↓ move↵openescclose