/ concept-collection / benchcompress
Sign in
concept-collection / benchcompress
format code
Jeremy Magland <jmagland@flatironinstitute.org> committed commit a3cad9b0fb13 parent a10d266 Browse files
6 changed files+175−78
web-ui/src/App.tsxmodified+21−12View file
@@ -38,18 +38,27 @@ function App() {
3838
3939 return (
4040 <BrowserRouter basename="/zia">
41- <div style={{ paddingTop: "5rem", paddingLeft: "2rem", paddingRight: "2rem", paddingBottom: "2rem" }}>
42- <nav style={{
43- position: "fixed",
44- top: 0,
45- left: 0,
46- right: 0,
47- padding: "1rem 2rem",
48- backgroundColor: "white",
49- borderBottom: "1px solid #eaeaea",
50- zIndex: 1000,
51- boxShadow: "0 2px 4px rgba(0,0,0,0.1)"
52- }}>
41+ <div
42+ style={{
43+ paddingTop: "5rem",
44+ paddingLeft: "2rem",
45+ paddingRight: "2rem",
46+ paddingBottom: "2rem",
47+ }}
48+ >
49+ <nav
50+ style={{
51+ position: "fixed",
52+ top: 0,
53+ left: 0,
54+ right: 0,
55+ padding: "1rem 2rem",
56+ backgroundColor: "white",
57+ borderBottom: "1px solid #eaeaea",
58+ zIndex: 1000,
59+ boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
60+ }}
61+ >
5362 <ul
5463 style={{
5564 listStyle: "none",
web-ui/src/components/benchmark/table/BenchmarkTable.tsxmodified+17−9View file
@@ -77,15 +77,15 @@ export function BenchmarkTable({ results }: BenchmarkTableProps) {
7777 <div className="table-container">
7878 <div
7979 style={{
80- marginBottom: "20px",
80+ marginBottom: "12px",
8181 display: "flex",
8282 alignItems: "center",
83- gap: "10px",
83+ gap: "8px",
8484 justifyContent: "space-between",
8585 }}
8686 >
87- <div style={{ display: "flex", alignItems: "center", gap: "20px" }}>
88- <div style={{ display: "flex", alignItems: "center", gap: "10px" }}>
87+ <div style={{ display: "flex", alignItems: "center", gap: "12px" }}>
88+ <div style={{ display: "flex", alignItems: "center", gap: "6px" }}>
8989 <label htmlFor="dataset-select">Dataset:</label>
9090 <select
9191 id="dataset-select"
@@ -100,11 +100,12 @@ export function BenchmarkTable({ results }: BenchmarkTableProps) {
100100 }
101101 }}
102102 style={{
103- padding: "8px",
103+ padding: "4px 8px",
104104 borderRadius: "4px",
105105 border: "1px solid #ccc",
106- minWidth: "200px",
106+ minWidth: "150px",
107107 backgroundColor: "#fff",
108+ fontSize: "0.9rem",
108109 }}
109110 >
110111 <option value="">All Datasets</option>
@@ -130,11 +131,12 @@ export function BenchmarkTable({ results }: BenchmarkTableProps) {
130131 }
131132 }}
132133 style={{
133- padding: "8px",
134+ padding: "4px 8px",
134135 borderRadius: "4px",
135136 border: "1px solid #ccc",
136- minWidth: "200px",
137+ minWidth: "150px",
137138 backgroundColor: "#fff",
139+ fontSize: "0.9rem",
138140 }}
139141 >
140142 <option value="">All Algorithms</option>
@@ -189,7 +191,13 @@ export function BenchmarkTable({ results }: BenchmarkTableProps) {
189191 </tbody>
190192 </table>
191193
192- <div style={{ marginTop: "20px", display: "flex", justifyContent: "flex-end" }}>
194+ <div
195+ style={{
196+ marginTop: "12px",
197+ display: "flex",
198+ justifyContent: "flex-end",
199+ }}
200+ >
193201 <button
194202 onClick={() =>
195203 exportToCsv(filteredData, selectedDataset || selectedAlgorithm)
web-ui/src/index.cssmodified+18−4View file
@@ -18,16 +18,19 @@ table {
1818 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
1919 border-radius: 4px;
2020 overflow: hidden;
21+ font-size: 0.9rem;
22+ line-height: 1.3;
2123 }
2224
2325 th {
2426 background-color: #f8f9fa;
25- padding: 12px 16px;
27+ padding: 8px 12px;
2628 text-align: left;
2729 font-weight: 600;
2830 color: #333;
29- border-bottom: 2px solid #dee2e6;
31+ border-bottom: 1px solid #dee2e6;
3032 cursor: pointer;
33+ white-space: nowrap;
3134 }
3235
3336 th:hover {
@@ -35,7 +38,7 @@ th:hover {
3538 }
3639
3740 td {
38- padding: 12px 16px;
41+ padding: 6px 12px;
3942 border-bottom: 1px solid #dee2e6;
4043 color: #444;
4144 }
@@ -49,6 +52,17 @@ tr:last-child td {
4952 }
5053
5154 .table-container {
52- margin: 20px 0;
55+ margin: 12px 0;
5356 overflow-x: auto;
5457 }
58+
59+/* Make filter controls more compact */
60+select {
61+ padding: 4px 8px !important;
62+ font-size: 0.9rem !important;
63+ min-width: 150px !important;
64+}
65+
66+.table-container label {
67+ font-size: 0.9rem;
68+}
web-ui/src/pages/Algorithms.tsxmodified+59−19View file
@@ -24,45 +24,55 @@ function Algorithms({ algorithms }: AlgorithmsProps) {
2424 <tr style={{ backgroundColor: "#f5f5f5" }}>
2525 <th
2626 style={{
27- padding: "12px",
27+ padding: "8px 12px",
2828 textAlign: "left",
29- borderBottom: "2px solid #ddd",
29+ borderBottom: "1px solid #ddd",
30+ fontSize: "0.9rem",
31+ whiteSpace: "nowrap",
3032 }}
3133 >
3234 Name
3335 </th>
3436 <th
3537 style={{
36- padding: "12px",
38+ padding: "8px 12px",
3739 textAlign: "left",
38- borderBottom: "2px solid #ddd",
40+ borderBottom: "1px solid #ddd",
41+ fontSize: "0.9rem",
42+ whiteSpace: "nowrap",
3943 }}
4044 >
4145 Version
4246 </th>
4347 <th
4448 style={{
45- padding: "12px",
49+ padding: "8px 12px",
4650 textAlign: "left",
47- borderBottom: "2px solid #ddd",
51+ borderBottom: "1px solid #ddd",
52+ fontSize: "0.9rem",
53+ whiteSpace: "nowrap",
4854 }}
4955 >
5056 Description
5157 </th>
5258 <th
5359 style={{
54- padding: "12px",
60+ padding: "8px 12px",
5561 textAlign: "left",
56- borderBottom: "2px solid #ddd",
62+ borderBottom: "1px solid #ddd",
63+ fontSize: "0.9rem",
64+ whiteSpace: "nowrap",
5765 }}
5866 >
5967 Tags
6068 </th>
6169 <th
6270 style={{
63- padding: "12px",
71+ padding: "8px 12px",
6472 textAlign: "left",
65- borderBottom: "2px solid #ddd",
73+ borderBottom: "1px solid #ddd",
74+ fontSize: "0.9rem",
75+ whiteSpace: "nowrap",
6676 }}
6777 >
6878 Source
@@ -77,7 +87,13 @@ function Algorithms({ algorithms }: AlgorithmsProps) {
7787 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
7888 }}
7989 >
80- <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
90+ <td
91+ style={{
92+ padding: "6px 12px",
93+ borderBottom: "1px solid #ddd",
94+ fontSize: "0.9rem",
95+ }}
96+ >
8197 <Link
8298 to={`/home?algorithm=${encodeURIComponent(algorithm.name)}`}
8399 style={{
@@ -89,30 +105,54 @@ function Algorithms({ algorithms }: AlgorithmsProps) {
89105 {algorithm.name}
90106 </Link>
91107 </td>
92- <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
108+ <td
109+ style={{
110+ padding: "6px 12px",
111+ borderBottom: "1px solid #ddd",
112+ fontSize: "0.9rem",
113+ }}
114+ >
93115 {algorithm.version}
94116 </td>
95- <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
117+ <td
118+ style={{
119+ padding: "6px 12px",
120+ borderBottom: "1px solid #ddd",
121+ fontSize: "0.9rem",
122+ }}
123+ >
96124 {algorithm.description}
97125 </td>
98- <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
126+ <td
127+ style={{
128+ padding: "6px 12px",
129+ borderBottom: "1px solid #ddd",
130+ fontSize: "0.9rem",
131+ }}
132+ >
99133 {algorithm.tags.map((tag) => (
100134 <span
101135 key={tag}
102136 style={{
103137 display: "inline-block",
104138 backgroundColor: "#e1e1e1",
105- padding: "4px 8px",
106- borderRadius: "4px",
107- margin: "2px",
108- fontSize: "0.9em",
139+ padding: "2px 6px",
140+ borderRadius: "3px",
141+ margin: "1px",
142+ fontSize: "0.8rem",
109143 }}
110144 >
111145 {tag}
112146 </span>
113147 ))}
114148 </td>
115- <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
149+ <td
150+ style={{
151+ padding: "6px 12px",
152+ borderBottom: "1px solid #ddd",
153+ fontSize: "0.9rem",
154+ }}
155+ >
116156 {algorithm.source_file && (
117157 <a
118158 href={algorithm.source_file}
web-ui/src/pages/Datasets.tsxmodified+59−19View file
@@ -24,45 +24,55 @@ function Datasets({ datasets }: DatasetsProps) {
2424 <tr style={{ backgroundColor: "#f5f5f5" }}>
2525 <th
2626 style={{
27- padding: "12px",
27+ padding: "8px 12px",
2828 textAlign: "left",
29- borderBottom: "2px solid #ddd",
29+ borderBottom: "1px solid #ddd",
30+ fontSize: "0.9rem",
31+ whiteSpace: "nowrap",
3032 }}
3133 >
3234 Name
3335 </th>
3436 <th
3537 style={{
36- padding: "12px",
38+ padding: "8px 12px",
3739 textAlign: "left",
38- borderBottom: "2px solid #ddd",
40+ borderBottom: "1px solid #ddd",
41+ fontSize: "0.9rem",
42+ whiteSpace: "nowrap",
3943 }}
4044 >
4145 Version
4246 </th>
4347 <th
4448 style={{
45- padding: "12px",
49+ padding: "8px 12px",
4650 textAlign: "left",
47- borderBottom: "2px solid #ddd",
51+ borderBottom: "1px solid #ddd",
52+ fontSize: "0.9rem",
53+ whiteSpace: "nowrap",
4854 }}
4955 >
5056 Description
5157 </th>
5258 <th
5359 style={{
54- padding: "12px",
60+ padding: "8px 12px",
5561 textAlign: "left",
56- borderBottom: "2px solid #ddd",
62+ borderBottom: "1px solid #ddd",
63+ fontSize: "0.9rem",
64+ whiteSpace: "nowrap",
5765 }}
5866 >
5967 Tags
6068 </th>
6169 <th
6270 style={{
63- padding: "12px",
71+ padding: "8px 12px",
6472 textAlign: "left",
65- borderBottom: "2px solid #ddd",
73+ borderBottom: "1px solid #ddd",
74+ fontSize: "0.9rem",
75+ whiteSpace: "nowrap",
6676 }}
6777 >
6878 Source
@@ -77,7 +87,13 @@ function Datasets({ datasets }: DatasetsProps) {
7787 backgroundColor: index % 2 === 0 ? "white" : "#fafafa",
7888 }}
7989 >
80- <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
90+ <td
91+ style={{
92+ padding: "6px 12px",
93+ borderBottom: "1px solid #ddd",
94+ fontSize: "0.9rem",
95+ }}
96+ >
8197 <Link
8298 to={`/home?dataset=${encodeURIComponent(dataset.name)}`}
8399 style={{
@@ -89,30 +105,54 @@ function Datasets({ datasets }: DatasetsProps) {
89105 {dataset.name}
90106 </Link>
91107 </td>
92- <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
108+ <td
109+ style={{
110+ padding: "6px 12px",
111+ borderBottom: "1px solid #ddd",
112+ fontSize: "0.9rem",
113+ }}
114+ >
93115 {dataset.version}
94116 </td>
95- <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
117+ <td
118+ style={{
119+ padding: "6px 12px",
120+ borderBottom: "1px solid #ddd",
121+ fontSize: "0.9rem",
122+ }}
123+ >
96124 {dataset.description}
97125 </td>
98- <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
126+ <td
127+ style={{
128+ padding: "6px 12px",
129+ borderBottom: "1px solid #ddd",
130+ fontSize: "0.9rem",
131+ }}
132+ >
99133 {dataset.tags.map((tag) => (
100134 <span
101135 key={tag}
102136 style={{
103137 display: "inline-block",
104138 backgroundColor: "#e1e1e1",
105- padding: "4px 8px",
106- borderRadius: "4px",
107- margin: "2px",
108- fontSize: "0.9em",
139+ padding: "2px 6px",
140+ borderRadius: "3px",
141+ margin: "1px",
142+ fontSize: "0.8rem",
109143 }}
110144 >
111145 {tag}
112146 </span>
113147 ))}
114148 </td>
115- <td style={{ padding: "12px", borderBottom: "1px solid #ddd" }}>
149+ <td
150+ style={{
151+ padding: "6px 12px",
152+ borderBottom: "1px solid #ddd",
153+ fontSize: "0.9rem",
154+ }}
155+ >
116156 {dataset.source_file && (
117157 <a
118158 href={dataset.source_file}
web-ui/src/pages/Home.tsxmodified+1−15View file
@@ -24,22 +24,8 @@ function Home({ benchmarkData }: HomeProps) {
2424 marginTop: "0.5rem",
2525 }}
2626 >
27- Comparing different integer array compression algorithms and their
28- performance
27+ Comparing integer array compression algorithms
2928 </p>
30- <a
31- href="https://github.com/magland/zia"
32- target="_blank"
33- rel="noopener noreferrer"
34- style={{
35- color: "#0066cc",
36- textDecoration: "none",
37- display: "inline-block",
38- marginTop: "0.5rem",
39- }}
40- >
41- View source on GitHub
42- </a>
4329 </header>
4430 <main>
4531 {benchmarkData && <BenchmarkTable results={benchmarkData.results} />}