Hugging Face's logo

Spaces:
UlrickBL
/
benchmark_overview
Running

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

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +37 -2
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,6 +124,9 @@
100
  </table>
101
  </div>
102
 
 
 
 
103
  <script>
104
  function parseCSV(content) {
105
  const rows = [];
@@ -136,6 +163,8 @@
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 => {
@@ -205,7 +234,9 @@
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
  });
@@ -213,6 +244,10 @@
213
  });
214
  makeResizable();
215
  }
 
 
 
 
216
  metricFilter.addEventListener('change', () => {
217
  const filterValue = metricFilter.value;
218
  populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0);
@@ -225,4 +260,4 @@
225
  });
226
  </script>
227
  </body>
228
- </html>
 
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 = [];
 
163
  const table = document.getElementById('csvTable');
164
  const tableHead = table.querySelector('thead');
165
  const tableBody = table.querySelector('tbody');
166
+ const overlay = document.getElementById('overlay');
167
+ const modal = document.getElementById('modal');
168
  function makeResizable() {
169
  const thElements = document.querySelectorAll('th');
170
  thElements.forEach(th => {
 
234
  td.classList.add('expandable');
235
  td.title = 'Click to expand';
236
  td.addEventListener('click', () => {
237
+ overlay.style.display = 'block';
238
+ modal.style.display = 'block';
239
+ modal.textContent = value;
240
  });
241
  tr.appendChild(td);
242
  });
 
244
  });
245
  makeResizable();
246
  }
247
+ overlay.addEventListener('click', () => {
248
+ overlay.style.display = 'none';
249
+ modal.style.display = 'none';
250
+ });
251
  metricFilter.addEventListener('change', () => {
252
  const filterValue = metricFilter.value;
253
  populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0);
 
260
  });
261
  </script>
262
  </body>
263
+ </html>