Spaces:
Running
Running
Update index.html
Browse files- index.html +27 -5
index.html
CHANGED
|
@@ -3,7 +3,7 @@
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
-
<title>
|
| 7 |
<style>
|
| 8 |
body {
|
| 9 |
font-family: Arial, sans-serif;
|
|
@@ -44,6 +44,9 @@
|
|
| 44 |
td.expandable {
|
| 45 |
cursor: pointer;
|
| 46 |
}
|
|
|
|
|
|
|
|
|
|
| 47 |
.filter {
|
| 48 |
margin-bottom: 20px;
|
| 49 |
text-align: center;
|
|
@@ -66,9 +69,9 @@
|
|
| 66 |
</style>
|
| 67 |
</head>
|
| 68 |
<body>
|
| 69 |
-
<h1>
|
| 70 |
<div class="filter">
|
| 71 |
-
<label for="metricFilter">Filter by
|
| 72 |
<select id="metricFilter">
|
| 73 |
<option value="">All</option>
|
| 74 |
</select>
|
|
@@ -156,13 +159,32 @@
|
|
| 156 |
tableHead.appendChild(headerRow);
|
| 157 |
|
| 158 |
// Add rows dynamically
|
| 159 |
-
rows
|
|
|
|
|
|
|
| 160 |
.forEach(row => {
|
| 161 |
const tr = document.createElement('tr');
|
| 162 |
|
| 163 |
row.forEach((value, index) => {
|
| 164 |
const td = document.createElement('td');
|
| 165 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 166 |
td.classList.add('expandable');
|
| 167 |
td.title = 'Click to expand';
|
| 168 |
td.addEventListener('click', () => {
|
|
|
|
| 3 |
<head>
|
| 4 |
<meta charset="UTF-8">
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>CSV Table Viewer</title>
|
| 7 |
<style>
|
| 8 |
body {
|
| 9 |
font-family: Arial, sans-serif;
|
|
|
|
| 44 |
td.expandable {
|
| 45 |
cursor: pointer;
|
| 46 |
}
|
| 47 |
+
td:nth-child(2) {
|
| 48 |
+
background-color: #fcebf7;
|
| 49 |
+
}
|
| 50 |
.filter {
|
| 51 |
margin-bottom: 20px;
|
| 52 |
text-align: center;
|
|
|
|
| 69 |
</style>
|
| 70 |
</head>
|
| 71 |
<body>
|
| 72 |
+
<h1>CSV Table Viewer</h1>
|
| 73 |
<div class="filter">
|
| 74 |
+
<label for="metricFilter">Filter by Metric Type:</label>
|
| 75 |
<select id="metricFilter">
|
| 76 |
<option value="">All</option>
|
| 77 |
</select>
|
|
|
|
| 159 |
tableHead.appendChild(headerRow);
|
| 160 |
|
| 161 |
// Add rows dynamically
|
| 162 |
+
rows
|
| 163 |
+
.filter(row => !filterValue || row[headerIndex] === filterValue)
|
| 164 |
+
.sort((a, b) => a[0].localeCompare(b[0])) // Sort by the first column
|
| 165 |
.forEach(row => {
|
| 166 |
const tr = document.createElement('tr');
|
| 167 |
|
| 168 |
row.forEach((value, index) => {
|
| 169 |
const td = document.createElement('td');
|
| 170 |
+
|
| 171 |
+
// Handle clickable links for specific columns
|
| 172 |
+
if (headers[index] === 'Paper' && value) {
|
| 173 |
+
const link = document.createElement('a');
|
| 174 |
+
link.href = value;
|
| 175 |
+
link.textContent = 'paper link';
|
| 176 |
+
link.target = '_blank';
|
| 177 |
+
td.appendChild(link);
|
| 178 |
+
} else if (headers[index] === 'HF or Git link' && value) {
|
| 179 |
+
const link = document.createElement('a');
|
| 180 |
+
link.href = value;
|
| 181 |
+
link.textContent = 'dataset link';
|
| 182 |
+
link.target = '_blank';
|
| 183 |
+
td.appendChild(link);
|
| 184 |
+
} else {
|
| 185 |
+
td.textContent = value;
|
| 186 |
+
}
|
| 187 |
+
|
| 188 |
td.classList.add('expandable');
|
| 189 |
td.title = 'Click to expand';
|
| 190 |
td.addEventListener('click', () => {
|