improve paper table

davidheineman · Jan 14, 2025 · c0c82d9 · c0c82d9
1 parent 1c1cf63
commit c0c82d9
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 4 deletions.
diff --git a/src/static/table.css b/src/static/table.css
@@ -138,7 +138,7 @@ td:has(.spinner-border) {
 }
 
 .table td {
-    z-index: -1;
+    z-index: 1;
 }
 
 .table th.dragging,
@@ -237,7 +237,7 @@ td.collapsed>div {
 
 td.expanded {
     position: relative;
-    z-index: 2;
+    z-index: 1;
 }
 
 td.collapsed:hover {
@@ -265,4 +265,18 @@ td.collapsed:hover {
 .resizing {
     cursor: col-resize;
     user-select: none;
+}
+
+td.selectable:hover {
+    background-color: rgba(0, 0, 0, 0.05);
+    cursor: pointer;
+}
+
+td a {
+    color: #0d6efd;
+    text-decoration: none;
+}
+
+td a:hover {
+    text-decoration: underline;
 }
diff --git a/src/templates/table.html b/src/templates/table.html
@@ -21,6 +21,7 @@
                     <h2 class="mb-0 me-1" style="min-width: 180px;">paper table</h2>
                     <input type="text" id="searchInput" class="form-control" placeholder="Search papers...">
                     <button class="btn btn-primary ms-2" onclick="performSearch()">search</button>
+                    <button class="btn btn-secondary ms-2" onclick="exportToCSV()">.csv</button>
                     <button class="btn btn-secondary btn-light ms-2" onclick="toggleAllCells()">➕</button>
                 </div>
             </div>
@@ -134,7 +135,9 @@ <h2 class="mb-0 me-1" style="min-width: 180px;">paper table</h2>
                                 queryLLM(paper, newQuestion)
                                     .then(answer => {
                                         const innerDiv = document.createElement('div');
-                                        innerDiv.textContent = answer;
+                                        // Check if the answer contains a URL pattern
+                                        const urlPattern = /(https?:\/\/[^\s]+)/g;
+                                        innerDiv.innerHTML = answer.replace(urlPattern, '<a href="$1" target="_blank">$1</a>');
                                         cell.innerHTML = ''; // Clear the spinner
                                         cell.appendChild(innerDiv);
                                         cell.classList.add('selectable', 'collapsed');
@@ -391,7 +394,9 @@ <h6 class="card-subtitle mb-1 text-light-authors">${paper.author.join(', ')}</h6
                             queryLLM(paper, question)
                                 .then(answer => {
                                     const innerDiv = document.createElement('div');
-                                    innerDiv.textContent = answer;
+                                    // Check if the answer contains a URL pattern
+                                    const urlPattern = /(https?:\/\/[^\s]+)/g;
+                                    innerDiv.innerHTML = answer.replace(urlPattern, '<a href="$1" target="_blank">$1</a>');
                                     cell.innerHTML = ''; // Clear the spinner
                                     cell.appendChild(innerDiv);
                                     cell.classList.add('selectable', 'collapsed');
@@ -598,6 +603,63 @@ <h6 class="card-subtitle mb-1 text-light-authors">${paper.author.join(', ')}</h6
                 }
             });
         }
+
+        function exportToCSV() {
+            // Get search query for filename
+            const searchQuery = document.getElementById('searchInput').value.trim();
+            const filename = searchQuery ? 
+                `paper_table_${searchQuery.toLowerCase().replace(/[^a-z0-9]/g, '_')}.csv` : 
+                'paper_table_export.csv';
+
+            // Create CSV header
+            let csvContent = ['Title,Authors,Year,Venue'];
+
+            // Add question columns
+            questions.forEach(question => {
+                if (question.trim()) {
+                    csvContent[0] += ',"' + question.replace(/"/g, '""') + '"';
+                }
+            });
+            csvContent[0] += '\n';
+
+            // Add data rows
+            const rows = document.querySelectorAll('#tableBody tr');
+            rows.forEach(row => {
+                const titleCard = row.querySelector('.card-paper-table');
+                const title = titleCard.querySelector('.card-title a').textContent;
+                const authors = titleCard.querySelector('.text-light-authors').textContent;
+                const metadata = titleCard.querySelector('.paper-metadata strong').textContent.split('/');
+                const year = metadata[0].trim();
+                const venue = metadata[1].trim();
+
+                // Get answers from each column
+                const answers = Array.from(row.querySelectorAll('td'))
+                    .slice(1, -1) // Skip first (title) and last (empty) columns
+                    .map(cell => cell.textContent.trim());
+
+                // Combine all fields, properly escaped
+                const rowData = [
+                    `"${title.replace(/"/g, '""')}"`,
+                    `"${authors.replace(/"/g, '""')}"`,
+                    year,
+                    `"${venue}"`,
+                    ...answers.map(answer => `"${answer.replace(/"/g, '""')}"`)
+                ].join(',');
+
+                csvContent.push(rowData + '\n');
+            });
+
+            // Create and trigger download
+            const blob = new Blob([csvContent.join('')], { type: 'text/csv;charset=utf-8;' });
+            const link = document.createElement('a');
+            const url = URL.createObjectURL(blob);
+            link.setAttribute('href', url);
+            link.setAttribute('download', filename);
+            link.style.visibility = 'hidden';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
     </script>
 
 </body>