Hugging Face's logo

Spaces:
UlrickBL
/
benchmark_overview
Running

App Files Community
UlrickBL commited on
Commit
ee0c90a
·
verified ·
1 Parent(s): 50f726d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +37 -9
index.html CHANGED
@@ -19,6 +19,7 @@
19
  .table-container {
20
  overflow-x: auto;
21
  margin-top: 20px;
 
22
  }
23
  table {
24
  width: 100%;
@@ -79,6 +80,29 @@
79
  white-space: normal;
80
  background-color: #fcebf7;
81
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  </style>
83
  </head>
84
  <body>
@@ -100,16 +124,17 @@
100
  </table>
101
  </div>
102
 
 
 
 
103
  <script>
104
  function parseCSV(content) {
105
  const rows = [];
106
  let currentRow = [];
107
  let currentField = '';
108
  let insideQuotes = false;
109
-
110
  for (let i = 0; i < content.length; i++) {
111
  const char = content[i];
112
-
113
  if (char === '"') {
114
  insideQuotes = !insideQuotes;
115
  } else if (char === ',' && !insideQuotes) {
@@ -124,10 +149,8 @@
124
  currentField += char;
125
  }
126
  }
127
-
128
  if (currentField) currentRow.push(currentField.trim());
129
  if (currentRow.length > 0) rows.push(currentRow);
130
-
131
  const headers = rows.shift();
132
  return { headers, rows };
133
  }
@@ -142,6 +165,8 @@
142
  const table = document.getElementById('csvTable');
143
  const tableHead = table.querySelector('thead');
144
  const tableBody = table.querySelector('tbody');
 
 
145
 
146
  function makeResizable() {
147
  const thElements = document.querySelectorAll('th');
@@ -201,10 +226,8 @@
201
  .sort((a, b) => a[0].localeCompare(b[0]))
202
  .forEach(row => {
203
  const tr = document.createElement('tr');
204
-
205
  row.forEach((value, index) => {
206
  const td = document.createElement('td');
207
-
208
  if (headers[index] === 'Paper' && value) {
209
  const link = document.createElement('a');
210
  link.href = value;
@@ -220,21 +243,26 @@
220
  } else {
221
  td.textContent = value;
222
  }
223
-
224
  td.classList.add('expandable');
225
  td.title = 'Click to expand';
226
  td.addEventListener('click', () => {
227
- td.classList.toggle('expanded');
 
 
228
  });
229
  tr.appendChild(td);
230
  });
231
-
232
  tableBody.appendChild(tr);
233
  });
234
 
235
  makeResizable();
236
  }
237
 
 
 
 
 
 
238
  metricFilter.addEventListener('change', () => {
239
  const filterValue = metricFilter.value;
240
  populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0);
 
19
  .table-container {
20
  overflow-x: auto;
21
  margin-top: 20px;
22
+ position: relative;
23
  }
24
  table {
25
  width: 100%;
 
80
  white-space: normal;
81
  background-color: #fcebf7;
82
  }
83
+ .modal {
84
+ position: fixed;
85
+ top: 50%;
86
+ left: 50%;
87
+ transform: translate(-50%, -50%);
88
+ background-color: #fff;
89
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
90
+ padding: 20px;
91
+ z-index: 1000;
92
+ border-radius: 10px;
93
+ max-width: 80%;
94
+ max-height: 80%;
95
+ overflow: auto;
96
+ }
97
+ .overlay {
98
+ position: fixed;
99
+ top: 0;
100
+ left: 0;
101
+ width: 100%;
102
+ height: 100%;
103
+ background: rgba(0, 0, 0, 0.5);
104
+ z-index: 999;
105
+ }
106
  </style>
107
  </head>
108
  <body>
 
124
  </table>
125
  </div>
126
 
127
+ <div class="overlay" id="overlay" style="display: none;"></div>
128
+ <div class="modal" id="modal" style="display: none;"></div>
129
+
130
  <script>
131
  function parseCSV(content) {
132
  const rows = [];
133
  let currentRow = [];
134
  let currentField = '';
135
  let insideQuotes = false;
 
136
  for (let i = 0; i < content.length; i++) {
137
  const char = content[i];
 
138
  if (char === '"') {
139
  insideQuotes = !insideQuotes;
140
  } else if (char === ',' && !insideQuotes) {
 
149
  currentField += char;
150
  }
151
  }
 
152
  if (currentField) currentRow.push(currentField.trim());
153
  if (currentRow.length > 0) rows.push(currentRow);
 
154
  const headers = rows.shift();
155
  return { headers, rows };
156
  }
 
165
  const table = document.getElementById('csvTable');
166
  const tableHead = table.querySelector('thead');
167
  const tableBody = table.querySelector('tbody');
168
+ const overlay = document.getElementById('overlay');
169
+ const modal = document.getElementById('modal');
170
 
171
  function makeResizable() {
172
  const thElements = document.querySelectorAll('th');
 
226
  .sort((a, b) => a[0].localeCompare(b[0]))
227
  .forEach(row => {
228
  const tr = document.createElement('tr');
 
229
  row.forEach((value, index) => {
230
  const td = document.createElement('td');
 
231
  if (headers[index] === 'Paper' && value) {
232
  const link = document.createElement('a');
233
  link.href = value;
 
243
  } else {
244
  td.textContent = value;
245
  }
 
246
  td.classList.add('expandable');
247
  td.title = 'Click to expand';
248
  td.addEventListener('click', () => {
249
+ overlay.style.display = 'block';
250
+ modal.style.display = 'block';
251
+ modal.textContent = value;
252
  });
253
  tr.appendChild(td);
254
  });
 
255
  tableBody.appendChild(tr);
256
  });
257
 
258
  makeResizable();
259
  }
260
 
261
+ overlay.addEventListener('click', () => {
262
+ overlay.style.display = 'none';
263
+ modal.style.display = 'none';
264
+ });
265
+
266
  metricFilter.addEventListener('change', () => {
267
  const filterValue = metricFilter.value;
268
  populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0);