Update index.html

index.html

@@ -77,15 +77,7 @@
     <div class="table-container">
         <table id="csvTable">
             <thead>
-                <tr>
-                    <th>Metric Type</th>
-                    <th>Benchmark</th>
-                    <th>Output Type</th>
-                    <th>Details</th>
-                    <th>Metric Example</th>
-                    <th>Question + Context Example</th>
-                    <th>Answer Example</th>
-                </tr>
+                <!-- Headers will be dynamically added -->
             </thead>
             <tbody>
                 <!-- Rows will be dynamically added here -->
@@ -98,14 +90,10 @@
         function parseCSV(content) {
             const rows = content.split("\n").filter(row => row.trim() !== "");
             const headers = rows.shift().split(",");
-            return rows.map(row => {
-                const values = row.split(",");
-                const obj = {};
-                headers.forEach((header, index) => {
-                    obj[header.trim()] = values[index]?.trim() || "";
-                });
-                return obj;
-            });
+            return { 
+                headers, 
+                rows: rows.map(row => row.split(",")) 
+            };
         }
 
         // Load CSV file
@@ -117,10 +105,12 @@
 
         // Populate filter options
         const metricFilter = document.getElementById('metricFilter');
-        const tableBody = document.getElementById('csvTable').querySelector('tbody');
+        const table = document.getElementById('csvTable');
+        const tableHead = table.querySelector('thead');
+        const tableBody = table.querySelector('tbody');
 
-        function populateFilterOptions(data) {
-            const uniqueMetricTypes = [...new Set(data.map(row => row["Metric Type"]))];
+        function populateFilterOptions(data, headerIndex) {
+            const uniqueMetricTypes = [...new Set(data.map(row => row[headerIndex]))];
             uniqueMetricTypes.forEach(type => {
                 const option = document.createElement('option');
                 option.value = type;
@@ -130,39 +120,50 @@
         }
 
         // Populate table
-        function populateTable(filteredData) {
+        function populateTable(headers, rows, filterValue, headerIndex) {
+            tableHead.innerHTML = '';
             tableBody.innerHTML = '';
-            filteredData.forEach(row => {
-                const tr = document.createElement('tr');
 
-                Object.values(row).forEach((value, index) => {
-                    const td = document.createElement('td');
-                    td.textContent = value;
-                    if (index >= 4) { // Long content
+            // Add headers dynamically
+            const headerRow = document.createElement('tr');
+            headers.forEach(header => {
+                const th = document.createElement('th');
+                th.textContent = header;
+                headerRow.appendChild(th);
+            });
+            tableHead.appendChild(headerRow);
+
+            // Add rows dynamically
+            rows.filter(row => !filterValue || row[headerIndex] === filterValue)
+                .forEach(row => {
+                    const tr = document.createElement('tr');
+
+                    row.forEach((value, index) => {
+                        const td = document.createElement('td');
+                        td.textContent = value;
                         td.classList.add('expandable');
                         td.title = 'Click to expand';
                         td.addEventListener('click', () => {
                             td.classList.toggle('expanded');
                         });
-                    }
-                    tr.appendChild(td);
+                        tr.appendChild(td);
+                    });
+
+                    tableBody.appendChild(tr);
                 });
-                tableBody.appendChild(tr);
-            });
         }
 
         metricFilter.addEventListener('change', () => {
             const filterValue = metricFilter.value;
-            const filteredData = filterValue ? tableData.filter(row => row["Metric Type"] === filterValue) : tableData;
-            populateTable(filteredData);
+            populateTable(parsedCSV.headers, parsedCSV.rows, filterValue, 0); // Assuming Metric Type is the first column
         });
 
         // Initial load
-        let tableData = [];
-        loadCSV('benchmark_overview_data.csv').then(data => {
-            tableData = data;
-            populateFilterOptions(data);
-            populateTable(data);
+        let parsedCSV;
+        loadCSV('benchmark_overview_data.csv').then(({ headers, rows }) => {
+            parsedCSV = { headers, rows };
+            populateFilterOptions(rows, 0); // Assuming Metric Type is the first column
+            populateTable(headers, rows, '', 0);
         });
     </script>
 </body>