fix: handle csv with different separators in csv preview

backend/ee-repo-ref.txt

@@ -1 +1 @@
-76f66b0a9738d8c0f676ebf808ee82fa5073d77d
+38883ef6510db7d87d78e7f8fc74ab3e6f944447

backend/windmill-api/openapi.yaml

@@ -7949,6 +7949,10 @@ paths:
           in: query
           schema:
             type: string
+        - name: csv_separator
+          in: query
+          schema:
+            type: string
       responses:
         "200":
           description: Csv Preview

frontend/src/lib/components/ParqetCsvTableRenderer.svelte

@@ -17,11 +17,14 @@
 	export let workspaceId: string | undefined
 	export let disable_download: boolean = false
 
+	let csvSeparatorChar: string = ','
 	let datasource: IDatasource = {
 		rowCount: 0,
 		getRows: async function (params) {
 			try {
 				const searchCol = params.filterModel ? Object.keys(params.filterModel)?.[0] : undefined
+				const csv = s3resource.endsWith('.csv')
+
 				const requestBody = {
 					workspace: workspaceId ?? $workspaceStore!,
 					path: s3resource,
@@ -31,9 +34,9 @@
 					sortDesc: params.sortModel?.[0]?.sort == 'desc',
 					searchCol: searchCol,
 					searchTerm: searchCol ? params.filterModel?.[searchCol]?.filter : undefined,
-					storage: storage
+					storage: storage,
+					csvSeparator: csv ? csvSeparatorChar : undefined
 				}
-				const csv = s3resource.endsWith('.csv')
 				const res = (
 					csv
 						? await HelpersService.loadCsvPreview(requestBody)
@@ -77,59 +80,67 @@
 
 	$: eGui && mountGrid()
 
+	let error: string | undefined = undefined
 	async function mountGrid() {
 		if (eGui) {
-			const csv = s3resource.endsWith('.csv')
+			try {
+				const csv = s3resource.endsWith('.csv')
 
-			const res = csv
-				? await HelpersService.loadCsvPreview({
-						workspace: $workspaceStore!,
-						path: s3resource,
-						limit: 0,
-						storage: storage
-				  })
-				: await HelpersService.loadParquetPreview({
-						workspace: $workspaceStore!,
-						path: s3resource,
-						limit: 0,
-						storage: storage
-				  })
+				const res = csv
+					? await HelpersService.loadCsvPreview({
+							workspace: $workspaceStore!,
+							path: s3resource,
+							limit: 0,
+							storage: storage,
+							csvSeparator: csvSeparatorChar
+					  })
+					: await HelpersService.loadParquetPreview({
+							workspace: $workspaceStore!,
+							path: s3resource,
+							limit: 0,
+							storage: storage
+					  })
 
-			createGrid(
-				eGui,
-				{
-					rowModelType: 'infinite',
-					datasource,
-					// @ts-ignore
-					columnDefs: res.columns.map((c) => {
-						return {
-							field: c,
-							sortable: true,
-							filter: true,
-							filterParams: {
-								filterOptions: ['contains'],
-								maxNumConditions: 1
+				createGrid(
+					eGui,
+					{
+						rowModelType: 'infinite',
+						datasource,
+						// @ts-ignore
+						columnDefs: res.columns.map((c) => {
+							return {
+								field: c,
+								sortable: true,
+								filter: true,
+								filterParams: {
+									filterOptions: ['contains'],
+									maxNumConditions: 1
+								}
 							}
-						}
-					}),
-					pagination: false,
-					// defaultColDef: {
-					// 	flex: 1
-					// },
-					suppressColumnMoveAnimation: true,
-					rowSelection: 'multiple',
-					rowMultiSelectWithClick: true,
-					suppressRowDeselection: true,
+						}),
+						pagination: false,
+						// defaultColDef: {
+						// 	flex: 1
+						// },
+						suppressColumnMoveAnimation: true,
+						rowSelection: 'multiple',
+						rowMultiSelectWithClick: true,
+						suppressRowDeselection: true,
 
-					onSelectionChanged: (e) => {
-						onSelectionChanged(e.api)
+						onSelectionChanged: (e) => {
+							onSelectionChanged(e.api)
+						},
+						getRowId: (data) => {
+							return (data as any).data['__index']
+						}
 					},
-					getRowId: (data) => {
-						return (data as any).data['__index']
-					}
-				},
-				{}
-			)
+					{}
+				)
+				error = undefined
+			} catch (e) {
+				error = e.body
+				console.error(e)
+			}
 		}
 	}
 
@@ -146,6 +157,22 @@
 <DarkModeObserver bind:darkMode />
 
 <div class={twMerge('mt-2  flex flex-col h-full min-h-[600px]')}>
+	{#if s3resource.endsWith('.csv')}
+		<div class="flex flex-row-reverse w-full">
+			<div class="flex items-baseline">
+				<label for="csvSeparatorChar" class="text-2xs text-secondary">Separator</label>
+
+				<div class="w-12 ml-2 mr-2">
+					<select class="h-8" bind:value={csvSeparatorChar} on:change={(e) => mountGrid()}>
+						<option value=",">,</option>
+						<option value=";">;</option>
+						<option value="\t">\t</option>
+						<option value="|">|</option>
+					</select>
+				</div>
+			</div>
+		</div>
+	{/if}
 	{#if !disable_download && !s3resource.endsWith('.csv')}
 		<a
 			target="_blank"
@@ -162,6 +189,10 @@
 		class:ag-theme-alpine-dark={darkMode}
 		style="height: 600px;"
 	>
+		{#if error}
+			<div class="text-red-500">{error}</div>
+			<div>Try changing separator to fix it</div>
+		{/if}
 		<div bind:this={eGui} style="height:100%; " />
 	</div>
 </div>

frontend/src/lib/components/S3FilePicker.svelte

@@ -567,7 +567,9 @@
 											title="Download file from S3"
 											variant="border"
 											color="light"
-											href={`/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${fileMetadata?.fileKey}`}
+											href={`/api/w/${$workspaceStore}/job_helpers/download_s3_file?file_key=${
+												fileMetadata?.fileKey
+											}${storage ? `&storage=${storage}` : ''}`}
 											download={fileMetadata?.fileKey.split('/').pop() ?? 'unnamed_download.file'}
 											startIcon={{ icon: Download }}
 											iconOnly={true}