Hugging Face's logo

Spaces:
UlrickBL
/
benchmark_overview
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +1 -52
index.html CHANGED
@@ -19,7 +19,6 @@
19
  .table-container {
20
  overflow-x: auto;
21
  margin-top: 20px;
22
- position: relative;
23
  }
24
  table {
25
  width: 100%;
@@ -80,29 +79,6 @@
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,9 +100,6 @@
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 = [];
@@ -154,50 +127,39 @@
154
  const headers = rows.shift();
155
  return { headers, rows };
156
  }
157
-
158
  async function loadCSV(filePath) {
159
  const response = await fetch(filePath);
160
  const content = await response.text();
161
  return parseCSV(content);
162
  }
163
-
164
  const metricFilter = document.getElementById('metricFilter');
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');
173
  thElements.forEach(th => {
174
  const resizer = document.createElement('div');
175
  resizer.classList.add('resizer');
176
  th.appendChild(resizer);
177
-
178
  let startX;
179
  let startWidth;
180
-
181
  resizer.addEventListener('mousedown', (e) => {
182
  startX = e.pageX;
183
  startWidth = th.offsetWidth;
184
-
185
  document.addEventListener('mousemove', resizeColumn);
186
  document.addEventListener('mouseup', stopResize);
187
  });
188
-
189
  function resizeColumn(e) {
190
  const newWidth = startWidth + (e.pageX - startX);
191
  th.style.width = `${newWidth}px`;
192
  }
193
-
194
  function stopResize() {
195
  document.removeEventListener('mousemove', resizeColumn);
196
  document.removeEventListener('mouseup', stopResize);
197
  }
198
  });
199
  }
200
-
201
  function populateFilterOptions(data, headerIndex) {
202
  const uniqueMetricTypes = [...new Set(data.map(row => row[headerIndex]))];
203
  uniqueMetricTypes.forEach(type => {
@@ -207,11 +169,9 @@
207
  metricFilter.appendChild(option);
208
  });
209
  }
210
-
211
  function populateTable(headers, rows, filterValue, headerIndex) {
212
  tableHead.innerHTML = '';
213
  tableBody.innerHTML = '';
214
-
215
  const headerRow = document.createElement('tr');
216
  headers.forEach(header => {
217
  const th = document.createElement('th');
@@ -220,7 +180,6 @@
220
  headerRow.appendChild(th);
221
  });
222
  tableHead.appendChild(headerRow);
223
-
224
  rows
225
  .filter(row => !filterValue || row[headerIndex] === filterValue)
226
  .sort((a, b) => a[0].localeCompare(b[0]))
@@ -246,28 +205,18 @@
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);
269
  });
270
-
271
  let parsedCSV;
272
  loadCSV('benchmark_overview_data.csv').then(({ headers, rows }) => {
273
  parsedCSV = { headers, rows };
 
19
  .table-container {
20
  overflow-x: auto;
21
  margin-top: 20px;
 
22
  }
23
  table {
24
  width: 100%;
 
79
  white-space: normal;
80
  background-color: #fcebf7;
81
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
82
  </style>
83
  </head>
84
  <body>
 
100
  </table>
101
  </div>
102
 
 
 
 
103
  <script>
104
  function parseCSV(content) {
105
  const rows = [];
 
127
  const headers = rows.shift();
128
  return { headers, rows };
129
  }
 
130
  async function loadCSV(filePath) {
131
  const response = await fetch(filePath);
132
  const content = await response.text();
133
  return parseCSV(content);
134
  }
 
135
  const metricFilter = document.getElementById('metricFilter');
136
  const table = document.getElementById('csvTable');
137
  const tableHead = table.querySelector('thead');
138
  const tableBody = table.querySelector('tbody');
 
 
 
139
  function makeResizable() {
140
  const thElements = document.querySelectorAll('th');
141
  thElements.forEach(th => {
142
  const resizer = document.createElement('div');
143
  resizer.classList.add('resizer');
144
  th.appendChild(resizer);
 
145
  let startX;
146
  let startWidth;
 
147
  resizer.addEventListener('mousedown', (e) => {
148
  startX = e.pageX;
149
  startWidth = th.offsetWidth;
 
150
  document.addEventListener('mousemove', resizeColumn);
151
  document.addEventListener('mouseup', stopResize);
152
  });
 
153
  function resizeColumn(e) {
154
  const newWidth = startWidth + (e.pageX - startX);
155
  th.style.width = `${newWidth}px`;
156
  }
 
157
  function stopResize() {
158
  document.removeEventListener('mousemove', resizeColumn);
159
  document.removeEventListener('mouseup', stopResize);
160
  }
161
  });
162
  }
 
163
  function populateFilterOptions(data, headerIndex) {
164
  const uniqueMetricTypes = [...new Set(data.map(row => row[headerIndex]))];
165
  uniqueMetricTypes.forEach(type => {
 
169
  metricFilter.appendChild(option);
170
  });
171
  }
 
172
  function populateTable(headers, rows, filterValue, headerIndex) {
173
  tableHead.innerHTML = '';
174
  tableBody.innerHTML = '';
 
175
  const headerRow = document.createElement('tr');
176
  headers.forEach(header => {
177
  const th = document.createElement('th');
 
180
  headerRow.appendChild(th);
181
  });
182
  tableHead.appendChild(headerRow);
 
183
  rows
184
  .filter(row => !filterValue || row[headerIndex] === filterValue)
185
  .sort((a, b) => a[0].localeCompare(b[0]))
 
205
  td.classList.add('expandable');
206
  td.title = 'Click to expand';
207
  td.addEventListener('click', () => {
208
+ td.classList.toggle('expanded');
 
 
209
  });
210
  tr.appendChild(td);
211
  });
212
  tableBody.appendChild(tr);
213
  });
 
214
  makeResizable();
215
  }
 
 
 
 
 
 
216
  metricFilter.addEventListener('change', () => {
217
  const filterValue = metricFilter.value;
218
  populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0);
219
  });
 
220
  let parsedCSV;
221
  loadCSV('benchmark_overview_data.csv').then(({ headers, rows }) => {
222
  parsedCSV = { headers, rows };