fix(files): bound wide spreadsheet previews

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/xlsx-preview-data.test.ts

@@ -5,6 +5,7 @@ import { afterEach, describe, expect, it, vi } from 'vitest'
 import * as XLSX from 'xlsx'
 import {
   readXlsxPreviewData,
+  XLSX_MAX_COLUMNS,
   XLSX_MAX_ROWS,
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer/xlsx-preview-data'
 
@@ -34,7 +35,8 @@ describe('readXlsxPreviewData', () => {
       ['row-1-a', 'row-1-b'],
       ['row-2-a', 'row-2-b'],
     ])
-    expect(result.truncated).toBe(true)
+    expect(result.rowTruncated).toBe(true)
+    expect(result.columnTruncated).toBe(false)
   })
 
   it('does not mark a sheet at the existing display boundary as truncated', () => {
@@ -46,6 +48,27 @@ describe('readXlsxPreviewData', () => {
     const result = readXlsxPreviewData(XLSX, sheet)
 
     expect(result.rows).toHaveLength(XLSX_MAX_ROWS)
-    expect(result.truncated).toBe(false)
+    expect(result.rowTruncated).toBe(false)
+    expect(result.columnTruncated).toBe(false)
+  })
+
+  it('bounds conversion for extremely wide declared ranges', () => {
+    const sheet = XLSX.utils.aoa_to_sheet([
+      ['header-a', 'header-b'],
+      ['row-1-a', 'row-1-b'],
+    ])
+    sheet['!ref'] = 'A1:XFD2'
+    const toJson = vi.spyOn(XLSX.utils, 'sheet_to_json')
+
+    const result = readXlsxPreviewData(XLSX, sheet)
+    const options = toJson.mock.calls[0][1] as {
+      range: { s: { c: number }; e: { c: number } }
+    }
+
+    expect(options.range.e.c - options.range.s.c + 1).toBe(XLSX_MAX_COLUMNS)
+    expect(result.headers).toEqual(['header-a', 'header-b'])
+    expect(result.rows).toEqual([['row-1-a', 'row-1-b']])
+    expect(result.rowTruncated).toBe(false)
+    expect(result.columnTruncated).toBe(true)
   })
 })

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/xlsx-preview-data.ts

@@ -1,6 +1,7 @@
 import type { WorkSheet } from 'xlsx'
 
 export const XLSX_MAX_ROWS = 1_000
+export const XLSX_MAX_COLUMNS = 200
 
 interface XlsxModule {
   utils: Pick<typeof import('xlsx').utils, 'decode_range' | 'sheet_to_json'>
@@ -9,23 +10,26 @@ interface XlsxModule {
 interface XlsxPreviewData {
   headers: string[]
   rows: string[][]
-  truncated: boolean
+  rowTruncated: boolean
+  columnTruncated: boolean
 }
 
 export function readXlsxPreviewData(XLSX: XlsxModule, sheet: WorkSheet): XlsxPreviewData {
   const declaredRange = XLSX.utils.decode_range(sheet['!ref'] || 'A1')
   const lastPreviewRow = Math.min(declaredRange.e.r, declaredRange.s.r + XLSX_MAX_ROWS)
+  const lastPreviewColumn = Math.min(declaredRange.e.c, declaredRange.s.c + XLSX_MAX_COLUMNS - 1)
   const previewRows = XLSX.utils.sheet_to_json<string[]>(sheet, {
     header: 1,
     range: {
       s: declaredRange.s,
-      e: { r: lastPreviewRow, c: declaredRange.e.c },
+      e: { r: lastPreviewRow, c: lastPreviewColumn },
     },
   })
 
   return {
     headers: previewRows[0] ?? [],
     rows: previewRows.slice(1),
-    truncated: declaredRange.e.r > lastPreviewRow,
+    rowTruncated: declaredRange.e.r > lastPreviewRow,
+    columnTruncated: declaredRange.e.c > lastPreviewColumn,
   }
 }

apps/sim/app/workspace/[workspaceId]/files/components/file-viewer/xlsx-preview.tsx

@@ -10,6 +10,7 @@ import type { WorkspaceFileRecord } from '@/lib/uploads/contexts/workspace'
 import { useHorizontalWheelScroll } from '@/app/workspace/[workspaceId]/files/components/file-viewer/use-horizontal-wheel-scroll'
 import {
   readXlsxPreviewData,
+  XLSX_MAX_COLUMNS,
   XLSX_MAX_ROWS,
 } from '@/app/workspace/[workspaceId]/files/components/file-viewer/xlsx-preview-data'
 import { DataTable } from './data-table'
@@ -22,7 +23,8 @@ interface XlsxSheet {
   name: string
   headers: string[]
   rows: string[][]
-  truncated: boolean
+  rowTruncated: boolean
+  columnTruncated: boolean
 }
 
 export const XlsxPreview = memo(function XlsxPreview({
@@ -85,13 +87,14 @@ export const XlsxPreview = memo(function XlsxPreview({
         const workbook = workbookRef.current!
         const name = sheetNames[activeSheet]
         const sheet = workbook.Sheets[name]
-        const { headers, rows, truncated } = readXlsxPreviewData(XLSX, sheet)
+        const { headers, rows, rowTruncated, columnTruncated } = readXlsxPreviewData(XLSX, sheet)
         if (!cancelled) {
           setCurrentSheet({
             name,
             headers,
             rows,
-            truncated,
+            rowTruncated,
+            columnTruncated,
           })
         }
       } catch (err) {
@@ -133,9 +136,14 @@ export const XlsxPreview = memo(function XlsxPreview({
       </div>
       <div ref={scrollRef} className='flex-1 overflow-auto p-6'>
         <DataTable headers={currentSheet.headers} rows={currentSheet.rows} />
-        {currentSheet.truncated && (
+        {(currentSheet.rowTruncated || currentSheet.columnTruncated) && (
           <p className='mt-3 text-center text-[12px] text-[var(--text-muted)]'>
-            Showing first {XLSX_MAX_ROWS.toLocaleString()} rows. Download the file to view all data.
+            {currentSheet.rowTruncated && currentSheet.columnTruncated
+              ? `Showing first ${XLSX_MAX_ROWS.toLocaleString()} rows and ${XLSX_MAX_COLUMNS.toLocaleString()} columns.`
+              : currentSheet.rowTruncated
+                ? `Showing first ${XLSX_MAX_ROWS.toLocaleString()} rows.`
+                : `Showing first ${XLSX_MAX_COLUMNS.toLocaleString()} columns.`}{' '}
+            Download the file to view all data.
           </p>
         )}
       </div>