feat: wip

latitude-dev · Sep 7, 2024 · 1aab329 · 1aab329
1 parent 8510bd8
commit 1aab329
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 8 deletions.
diff --git a/apps/web/src/app/(private)/datasets/_components/PreviewDatasetModal/index.tsx b/apps/web/src/app/(private)/datasets/_components/PreviewDatasetModal/index.tsx
@@ -3,7 +3,9 @@ import { Dataset } from '@latitude-data/core/browser'
 import '@latitude-data/web-ui'
 
 import {
+  Button,
   Modal,
+  ModalTrigger,
   ReactStateDispatch,
   Table,
   TableBody,
@@ -23,16 +25,25 @@ function PreviewModal({
   setPreview: ReactStateDispatch<Dataset | null>
 }) {
   const { data, isLoading } = useDatasetPreview({ dataset })
-  const rows = data?.data ?? []
+  const rows = data?.rows ?? []
   return (
     <Modal
       size='large'
       open
       title={`${dataset.name} preview`}
       description='First 100 rows of the dataset'
       onOpenChange={(open: boolean) => !open && setPreview(null)}
+      footer={
+        <ModalTrigger>
+          <Button fancy variant='outline'>
+            Go back
+          </Button>
+        </ModalTrigger>
+      }
     >
-      {isLoading ? (<div>....</div>) : (
+      {isLoading ? (
+        <div>....</div>
+      ) : (
         <Table>
           <TableHeader>
             <TableRow verticalPadding>
@@ -47,7 +58,7 @@ function PreviewModal({
             {rows.map((row, rowIndex) => {
               return (
                 <TableRow key={rowIndex} verticalPadding>
-                  {row.record.map((cell, cellIndex) => (
+                  {row.map((cell, cellIndex) => (
                     <TableCell key={cellIndex}>{cell}</TableCell>
                   ))}
                 </TableRow>

diff --git a/apps/web/src/stores/datasetPreviews.ts b/apps/web/src/stores/datasetPreviews.ts
@@ -23,7 +23,7 @@ export default function useDatasetPreview(
         variant: 'destructive',
       })
 
-      return { headers: [], data: [], rowCount: 0 }
+      return { headers: [], rows: [], rowCount: 0 }
     }
 
     return data

diff --git a/packages/core/src/lib/readCsv.ts b/packages/core/src/lib/readCsv.ts
@@ -20,8 +20,8 @@ type ParseResult = {
 }
 export type CsvParsedData = {
   headers: string[]
+  rows: string[][]
   rowCount: number
-  data: ParseResult[]
 }
 export async function syncReadCsv(
   file: File | string,

diff --git a/packages/core/src/services/datasets/preview.ts b/packages/core/src/services/datasets/preview.ts
@@ -1,4 +1,5 @@
 import { Dataset } from '../../browser'
+import { Result } from '../../lib'
 import { DiskWrapper } from '../../lib/disk'
 import { syncReadCsv } from '../../lib/readCsv'
 
@@ -17,5 +18,14 @@ export async function previewDataset({
   const diskFile = disk.file(dataset.fileKey)
   const bytes = await diskFile.getBytes()
   const file = new TextDecoder().decode(bytes)
-  return syncReadCsv(file, { limit })
+  const readResult = await syncReadCsv(file, { limit })
+  if (readResult.error) readResult
+
+  const csv = readResult.value!
+  const rows = csv.data.map((row) => Object.values(row.record))
+  return Result.ok({
+    rowCount: csv.rowCount,
+    headers: csv.headers,
+    rows,
+  })
 }
diff --git a/packages/web-ui/src/ds/atoms/Icons/index.tsx b/packages/web-ui/src/ds/atoms/Icons/index.tsx
@@ -72,7 +72,7 @@ export type IconProps = {
   className?: string
 }
 
-type Size = 'normal' | 'large' | 'xlarge'
+type Size = 'normal' | 'large' | 'xlarge' | 'xxxlarge'
 
 export function Icon({
   name,
@@ -89,6 +89,7 @@ export function Icon({
         'w-4 h-4': size === 'normal',
         'w-6 h-6': size === 'large',
         'w-8 h-8': size === 'xlarge',
+        'w-14 h-14': size === 'xxxlarge',
         'animate-spin': spin,
       })}
     />

diff --git a/packages/web-ui/src/ds/molecules/ErrorComponent/index.tsx b/packages/web-ui/src/ds/molecules/ErrorComponent/index.tsx
@@ -16,7 +16,7 @@ export function ErrorComponent({
           'text-destructive': type === 'red',
         })}
       >
-        <Icon name='logoMonochrome' className='w-14 h-14' />
+        <Icon name='logoMonochrome' size='xxxlarge'/>
         <Text.H5 align='center' color='foregroundMuted'>
           {message}
         </Text.H5>