Update index.html

index.html

@@ -140,61 +140,107 @@
 </section>
 
 
+<!-- Include Bulma CSS -->
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css">
+
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/papaparse.min.js"></script>
 
-<div id="table-container"></div>
+<div class="container">
+  <div class="field is-grouped is-grouped-multiline">
+    <div class="control">
+      <div class="select">
+        <select id="task-select">
+          <option value="binary_classification">Binary Classification</option>
+          <option value="multiclass_classification">Multiclass Classification</option>
+          <option value="regression">Regression</option>
+          <option value="clustering">Clustering</option>
+        </select>
+      </div>
+    </div>
+    <div class="control">
+      <div class="select">
+        <select id="stage-select">
+          <option value="preprocessing">Preprocessing</option>
+          <option value="inprocessing">Inprocessing</option>
+          <option value="postprocessing">Postprocessing</option>
+        </select>
+      </div>
+    </div>
+  </div>
+
+  <div id="table-container"></div>
+</div>
 
 <script>
-const task = 'binary_classification';
-const stage = 'preprocessing';
-const csvUrl = `https://huggingface.co/datasets/holistic-ai/bias_mitigation_benchmark/resolve/main/benchmark_${task}_${stage}.csv`;
-
-// Function to fetch and process the CSV data
-fetch(csvUrl)
-  .then(response => response.text())
-  .then(csvData => {
-    Papa.parse(csvData, {
-      header: true,
-      complete: function(results) {
-        const data = results.data;
-
-        // Get the headers
-        const headers = results.meta.fields;
-
-        // Create table
-        const table = document.createElement('table');
-        table.border = '1';
-
-        // Create header row
-        const headerRow = document.createElement('tr');
-        headers.forEach(headerText => {
-          const th = document.createElement('th');
-          th.appendChild(document.createTextNode(headerText));
-          headerRow.appendChild(th);
-        });
-        table.appendChild(headerRow);
-
-        // Add data rows
-        data.forEach(rowData => {
-          const row = document.createElement('tr');
-          headers.forEach(header => {
-            const td = document.createElement('td');
-            td.appendChild(document.createTextNode(rowData[header]));
-            row.appendChild(td);
+function loadTable() {
+  const taskSelect = document.getElementById('task-select');
+  const stageSelect = document.getElementById('stage-select');
+  const task = taskSelect.value;
+  const stage = stageSelect.value;
+  const csvUrl = `https://huggingface.co/datasets/holistic-ai/bias_mitigation_benchmark/resolve/main/benchmark_${task}_${stage}.csv`;
+
+  // Clear previous table
+  document.getElementById('table-container').innerHTML = '';
+
+  // Fetch and process the CSV data
+  fetch(csvUrl)
+    .then(response => response.text())
+    .then(csvData => {
+      Papa.parse(csvData, {
+        header: true,
+        complete: function(results) {
+          const data = results.data;
+
+          // Get the headers
+          const headers = results.meta.fields;
+
+          // Create table
+          const table = document.createElement('table');
+          table.className = 'table is-striped is-hoverable is-fullwidth';
+
+          // Create header row
+          const thead = document.createElement('thead');
+          const headerRow = document.createElement('tr');
+          headers.forEach(headerText => {
+            const th = document.createElement('th');
+            th.appendChild(document.createTextNode(headerText));
+            headerRow.appendChild(th);
+          });
+          thead.appendChild(headerRow);
+          table.appendChild(thead);
+
+          // Add data rows
+          const tbody = document.createElement('tbody');
+          data.forEach(rowData => {
+            const row = document.createElement('tr');
+            headers.forEach(header => {
+              const td = document.createElement('td');
+              td.appendChild(document.createTextNode(rowData[header]));
+              row.appendChild(td);
+            });
+            tbody.appendChild(row);
           });
-          table.appendChild(row);
-        });
-
-        // Add table to the container
-        document.getElementById('table-container').appendChild(table);
-      }
-    });
-  })
-  .catch(error => console.error(error));
+          table.appendChild(tbody);
+
+          // Add table to the container
+          document.getElementById('table-container').appendChild(table);
+        }
+      });
+    })
+    .catch(error => console.error(error));
+}
+
+// Load table on page load
+loadTable();
+
+// Add event listeners to selectors
+document.getElementById('task-select').addEventListener('change', loadTable);
+document.getElementById('stage-select').addEventListener('change', loadTable);
 </script>
 
 
 
+
 <section class="section" id="BibTeX">
   <div class="container is-max-desktop content">
     <h2 class="title">BibTeX</h2>