Preview lance table in folder browser

Author: slinjhu

smoosense-gui/src/components/db/DBContent.tsx

@@ -5,7 +5,7 @@ import { ResizablePanels } from '@/components/ui/resizable-panels'
 import { Badge } from '@/components/ui/badge'
 import { AlertCircle, Database, Loader2, Table } from 'lucide-react'
 import { pathJoin } from '@/lib/utils/pathUtils'
-import TablePreview from './TablePreview'
+import LanceTablePreview from './LanceTablePreview'
 
 export interface TableInfo {
   name: string
@@ -151,7 +151,7 @@ export default function DBContent({ dbPath }: { dbPath: string }) {
         className="h-full"
       >
         <TablesList tables={tables} selectedTable={selectedTable} onTableClick={handleTableClick} onTableDoubleClick={handleTableDoubleClick} />
-        <TablePreview dbPath={dbPath} tableName={selectedTable} tableInfo={selectedTableInfo} />
+        <LanceTablePreview dbPath={dbPath} tableName={selectedTable} tableInfo={selectedTableInfo} />
       </ResizablePanels>
     </div>
   )

…e-gui/src/components/db/TablePreview.tsx …/src/components/db/LanceTablePreview.tsxsmoosense-gui/src/components/db/TablePreview.tsx renamed to smoosense-gui/src/components/db/LanceTablePreview.tsx smoosense-gui/src/components/db/TablePreview.tsx renamed to smoosense-gui/src/components/db/LanceTablePreview.tsx

@@ -3,7 +3,7 @@
 import { FileText, Download, ExternalLink, FolderOpen } from 'lucide-react'
 import { useAppSelector } from '@/lib/hooks'
 import { getFileType, FileType } from '@/lib/utils/fileTypes'
-import { pathBasename } from '@/lib/utils/pathUtils'
+import { pathBasename, pathDirname } from '@/lib/utils/pathUtils'
 import { type TreeNode } from '@/lib/features/folderTree/folderTreeSlice'
 import { getFileUrl } from '@/lib/utils/apiUtils'
 import CopyToClipboard from '@/components/ui/CopyToClipboard'
@@ -17,6 +17,7 @@ import JsonPreviewer from './previewers/JsonPreviewer'
 import YamlPreviewer from './previewers/YamlPreviewer'
 import ColumnarTablePreviewer from './previewers/ColumnarTablePreviewer'
 import RowTablePreviewer from './previewers/RowTablePreviewer'
+import LanceTablePreview from '@/components/db/LanceTablePreview'
 import AlbumPreviewer from './previewers/AlbumPreviewer'
 
 // Dynamic imports to avoid SSR issues
@@ -45,6 +46,11 @@ function findNodeById(node: TreeNode | null, targetId: string): TreeNode | null
   return null
 }
 
+// Helper function to check if a folder is a Lance table
+function isLanceFolder(folder: TreeNode): boolean {
+  return folder.isDir && folder.name.endsWith('.lance')
+}
+
 // Helper function to check if a folder likely contains media files
 function folderLikelyContainsMedia(folder: TreeNode): boolean {
   if (!folder.isDir || !folder.children) return false
@@ -102,8 +108,9 @@ export default function FSItemPreview() {
     }
   }
 
-  // Check if the file type supports table view
-  const isTableType = fileType === FileType.ColumnarTable || fileType === FileType.RowTable
+  // Check if the file type supports table view (including .lance folders)
+  const isLanceTable = viewingItem ? isLanceFolder(viewingItem) : false
+  const isTableType = fileType === FileType.ColumnarTable || fileType === FileType.RowTable || isLanceTable
 
   const renderContent = () => {
     if (!viewingItem) {
@@ -121,6 +128,13 @@ export default function FSItemPreview() {
       )
     }
 
+    // Handle .lance directories (Lance tables)
+    if (isLanceFolder(viewingItem)) {
+      const dbPath = pathDirname(viewingItem.path)
+      const tableName = viewingItem.name.replace(/\.lance$/, '')
+      return <LanceTablePreview dbPath={dbPath} tableName={tableName} tableInfo={null} />
+    }
+
     // Handle directories that contain media files
     if (viewingItem.isDir && folderLikelyContainsMedia(viewingItem)) {
       return <AlbumPreviewer item={viewingItem} />

smoosense-gui/src/components/folder-browser/FSItemPreview.tsx

@@ -90,9 +90,18 @@ export default function TreeNodeComponent({ node, style }: TreeNodeComponentProp
   const handleOpenInNewTab = useCallback((e: React.MouseEvent) => {
     e.stopPropagation()
     e.preventDefault()
+
+    // For .lance folders, open in Table view
+    if (nodeData.name.endsWith('.lance')) {
+      const url = `./Table?tablePath=${encodeURIComponent(nodeData.path)}`
+      window.open(url, '_blank')
+      return
+    }
+
+    // For other folders, open in FolderBrowser
     const url = `./FolderBrowser?rootFolder=${encodeURIComponent(nodeData.path)}`
     window.open(url, '_blank')
-  }, [nodeData.path])
+  }, [nodeData.path, nodeData.name])
 
   const handleRefresh = useCallback((e: React.MouseEvent) => {
     e.stopPropagation()