Update index.html

index.html

@@ -143,84 +143,82 @@
 <section class="section">
   <div class="container is-max-desktop">
     <div class="columns is-centered">
-      <!-- Table and Filters Section -->
       <div class="column">
         <div class="content">
           <h2 class="title is-3">Filtered Dataset Table</h2>
           <p>
-            Use the filters below to select a dataset view by task and stage. Each combination returns a filtered Hugging Face dataset.
+            Use the filters below to load the dataset based on task and stage.
           </p>
           <!-- Filters -->
           <div class="filters">
             <label for="task">Task:</label>
             <select id="task" onchange="updateTable()">
               <option value="binary_classification">Binary Classification</option>
-              <!-- Add more task options if needed -->
             </select>
             <label for="stage">Stage:</label>
             <select id="stage" onchange="updateTable()">
               <option value="preprocessing">Preprocessing</option>
-              <!-- Add more stage options if needed -->
             </select>
           </div>
-          <!--/ Filters -->
 
           <!-- Table -->
           <table id="datasetTable" class="table is-striped">
             <thead>
-              <tr id="tableHeader">
-                <!-- Table headers will be dynamically populated -->
-              </tr>
+              <tr id="tableHeader"></tr>
             </thead>
-            <tbody id="tableBody">
-              <!-- Table rows will be dynamically populated -->
-            </tbody>
+            <tbody id="tableBody"></tbody>
           </table>
-          <!--/ Table -->
         </div>
       </div>
     </div>
   </div>
 </section>
 
+<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>
 <script>
   async function fetchDataset(task, stage) {
-    // Create URL based on the selected task and stage
     const datasetURL = `https://huggingface.co/datasets/holistic-ai/bias_mitigation_benchmark/resolve/main/benchmark_${task}_${stage}.csv`;
-
-    const response = await fetch(datasetURL);
-    const text = await response.text();
-    
-    // Parse CSV text into a format suitable for the table
-    const data = Papa.parse(text, { header: true }); // Use PapaParse library for CSV parsing
-    return data.data;
+    try {
+      const response = await fetch(datasetURL);
+      if (!response.ok) {
+        throw new Error(`HTTP error! Status: ${response.status}`);
+      }
+      const text = await response.text();
+      return Papa.parse(text, { header: true }).data;
+    } catch (error) {
+      console.error("Failed to fetch dataset:", error);
+      alert("Failed to load dataset. Please check the console for details.");
+      return [];
+    }
   }
 
   async function updateTable() {
     const task = document.getElementById('task').value;
     const stage = document.getElementById('stage').value;
-
-    // Fetch dataset based on current filter values
     const dataset = await fetchDataset(task, stage);
 
-    // Populate table headers
+    if (dataset.length === 0) {
+      document.getElementById('tableHeader').innerHTML = "<th>No data available</th>";
+      document.getElementById('tableBody').innerHTML = "<tr><td>No data</td></tr>";
+      return;
+    }
+
+    const headers = Object.keys(dataset[0]);
     const tableHeader = document.getElementById('tableHeader');
-    tableHeader.innerHTML = ''; // Clear existing headers
-    const headers = Object.keys(dataset[0] || {});
-    headers.forEach(column => {
+    tableHeader.innerHTML = ""; // Clear existing headers
+    headers.forEach(header => {
       const th = document.createElement('th');
-      th.textContent = column;
+      th.textContent = header;
       tableHeader.appendChild(th);
     });
 
-    // Populate table rows
     const tableBody = document.getElementById('tableBody');
-    tableBody.innerHTML = ''; // Clear existing rows
+    tableBody.innerHTML = ""; // Clear existing rows
     dataset.forEach(row => {
       const tr = document.createElement('tr');
-      headers.forEach(column => {
+      headers.forEach(header => {
         const td = document.createElement('td');
-        td.textContent = row[column];
+        td.textContent = row[header];
         tr.appendChild(td);
       });
       tableBody.appendChild(tr);
@@ -228,7 +226,6 @@
   }
 </script>
 
-<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.3.0/papaparse.min.js"></script>