Spaces:

UlrickBL
/

benchmark_overview

Running

App Files Files Community

UlrickBL commited on Jan 16

Commit

ff4a86a

verified ·

1 Parent(s): 39c30d4

Update index.html

Browse files

Files changed (1) hide show

index.html +37 -2

index.html CHANGED Viewed

@@ -19,6 +19,7 @@
         .table-container {
             overflow-x: auto;
             margin-top: 20px;
         }
         table {
             width: 100%;
@@ -79,6 +80,29 @@
             white-space: normal;
             background-color: #fcebf7;
         }
     </style>
 </head>
 <body>
@@ -100,6 +124,9 @@
         </table>
     </div>
     <script>
         function parseCSV(content) {
             const rows = [];
@@ -136,6 +163,8 @@
         const table = document.getElementById('csvTable');
         const tableHead = table.querySelector('thead');
         const tableBody = table.querySelector('tbody');
         function makeResizable() {
             const thElements = document.querySelectorAll('th');
             thElements.forEach(th => {
@@ -205,7 +234,9 @@
                         td.classList.add('expandable');
                         td.title = 'Click to expand';
                         td.addEventListener('click', () => {
-                            td.classList.toggle('expanded');
                         });
                         tr.appendChild(td);
                     });
@@ -213,6 +244,10 @@
                 });
             makeResizable();
         }
         metricFilter.addEventListener('change', () => {
             const filterValue = metricFilter.value;
             populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0);
@@ -225,4 +260,4 @@
         });
     </script>
 </body>
-</html>

         .table-container {
             overflow-x: auto;
             margin-top: 20px;
+            position: relative;
         }
         table {
             width: 100%;
             white-space: normal;
             background-color: #fcebf7;
         }
+        .modal {
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            background-color: #fff;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+            padding: 20px;
+            z-index: 1000;
+            border-radius: 10px;
+            max-width: 80%;
+            max-height: 80%;
+            overflow: auto;
+        }
+        .overlay {
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 999;
+        }
     </style>
 </head>
 <body>
         </table>
     </div>
+    <div class="overlay" id="overlay" style="display: none;"></div>
+    <div class="modal" id="modal" style="display: none;"></div>
     <script>
         function parseCSV(content) {
             const rows = [];
         const table = document.getElementById('csvTable');
         const tableHead = table.querySelector('thead');
         const tableBody = table.querySelector('tbody');
+        const overlay = document.getElementById('overlay');
+        const modal = document.getElementById('modal');
         function makeResizable() {
             const thElements = document.querySelectorAll('th');
             thElements.forEach(th => {
                         td.classList.add('expandable');
                         td.title = 'Click to expand';
                         td.addEventListener('click', () => {
+                            overlay.style.display = 'block';
+                            modal.style.display = 'block';
+                            modal.textContent = value;
                         });
                         tr.appendChild(td);
                     });
                 });
             makeResizable();
         }
+        overlay.addEventListener('click', () => {
+            overlay.style.display = 'none';
+            modal.style.display = 'none';
+        });
         metricFilter.addEventListener('change', () => {
             const filterValue = metricFilter.value;
             populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0);
         });
     </script>
 </body>
+</html>