windmill-components 1.309.7 → 1.352.0

package/package/components/DisplayResult.svelte

@@ -1,9 +1,8 @@
 <script>import { Highlight } from 'svelte-highlight';
 import { json } from 'svelte-highlight/languages';
-import TableCustom from './TableCustom.svelte';
-import { copyToClipboard, roughSizeOfObject, truncate } from '../utils';
+import { copyToClipboard, roughSizeOfObject } from '../utils';
 import { Button, Drawer, DrawerContent } from './common';
-import { ClipboardCopy, Download, Expand, PanelRightOpen, Table2, Braces, Highlighter } from 'lucide-svelte';
+import { ClipboardCopy, Download, Expand, PanelRightOpen, Table2, Braces, Highlighter, InfoIcon, ArrowDownFromLine } from 'lucide-svelte';
 import Portal from 'svelte-portal';
 import ObjectViewer from './propertyPicker/ObjectViewer.svelte';
 import S3FilePicker from './S3FilePicker.svelte';
@@ -12,10 +11,14 @@ import AutoDataTable from './table/AutoDataTable.svelte';
 import Markdown from 'svelte-exmarkdown';
 import Toggle from './Toggle.svelte';
 import FileDownload from './common/fileDownload/FileDownload.svelte';
-import ParqetTableRenderer from './ParqetTableRenderer.svelte';
+import ParqetTableRenderer from './ParqetCsvTableRenderer.svelte';
 import ToggleButtonGroup from './common/toggleButton-v2/ToggleButtonGroup.svelte';
 import ToggleButton from './common/toggleButton-v2/ToggleButton.svelte';
 import MapResult from './MapResult.svelte';
+import Popover from './Popover.svelte';
+import DownloadCsv from './table/DownloadCsv.svelte';
+import { convertJsonToCsv } from './table/tableUtils';
+import Tooltip from './Tooltip.svelte';
 export let result;
 export let requireHtmlApproval = false;
 export let filename = undefined;
@@ -24,39 +27,49 @@ export let jobId = undefined;
 export let workspaceId = undefined;
 export let hideAsJson = false;
 export let noControls = false;
+export let drawerOpen = false;
+const IMG_MAX_SIZE = 10000000;
+const TABLE_MAX_SIZE = 5000000;
+const DISPLAY_MAX_SIZE = 100000;
 let resultKind;
 $: resultKind = inferResultKind(result);
 export let forceJson = false;
 let enableHtml = false;
 let s3FileDisplayRawMode = false;
-function isRectangularArray(obj) {
-    if (!Array.isArray(obj) || obj.length == 0) {
-        return false;
-    }
-    if (!Object.values(obj)
-        .map(Array.isArray)
-        .reduce((a, b) => a && b)) {
-        return false;
-    }
-    let innerSize = obj[0].length;
-    return Object.values(obj)
-        .map((x) => x.length == innerSize)
-        .reduce((a, b) => a && b);
+function isTableRow(result) {
+    return Array.isArray(result) && result.every((x) => Array.isArray(x));
 }
-function asListOfList(obj) {
-    return obj;
+function isTableCol(result, keys) {
+    return (!Array.isArray(result) &&
+        keys.map((k) => Array.isArray(result[k])).reduce((a, b) => a && b, true));
 }
-function isObjectOfArray(result, keys) {
-    return keys.map((k) => Array.isArray(result[k])).reduce((a, b) => a && b);
+function isTableRowObject(json) {
+    // check array of objects (with possible a first row of headers)
+    return (Array.isArray(json) &&
+        json.length > 0 &&
+        (json.every((item) => item && typeof item === 'object' && Object.keys(item).length > 0 && !Array.isArray(item)) ||
+            (Array.isArray(json[0]) &&
+                json[0].every((item) => typeof item === 'string') &&
+                json
+                    .slice(1)
+                    .every((item) => item &&
+                    typeof item === 'object' &&
+                    Object.keys(item).length > 0 &&
+                    !Array.isArray(item)))));
 }
 let largeObject = undefined;
+function checkIfS3(result, keys) {
+    return keys.includes('s3') && typeof result.s3 === 'string';
+}
 let is_render_all = false;
+let download_as_csv = false;
 function inferResultKind(result) {
     if (result == 'WINDMILL_TOO_BIG') {
         largeObject = true;
         return 'json';
     }
     if (result !== undefined) {
+        download_as_csv = false;
         if (typeof result === 'string') {
             length = 0;
             largeObject = false;
@@ -68,32 +81,53 @@ function inferResultKind(result) {
             is_render_all =
                 keys.length == 1 && keys.includes('render_all') && Array.isArray(result['render_all']);
             // Check if the result is an image
-            if (['png', 'svg', 'jpeg', 'html'].includes(keys[0]) && keys.length == 1) {
+            if (['png', 'svg', 'jpeg', 'html', 'gif'].includes(keys[0]) && keys.length == 1) {
                 // Check if the image is too large (10mb)
-                largeObject = roughSizeOfObject(result) > 10000000;
+                largeObject = roughSizeOfObject(result) > IMG_MAX_SIZE;
                 return keys[0];
             }
-            let length = roughSizeOfObject(result);
+            let size = roughSizeOfObject(result);
             // Otherwise, check if the result is too large (10kb) for json
-            largeObject = length > 50000;
-            if (largeObject) {
+            if (size > TABLE_MAX_SIZE) {
+                largeObject = true;
+                if (Array.isArray(result) && isTableRowObject(result)) {
+                    download_as_csv = true;
+                }
                 return 'json';
             }
-            if (keys.length != 0) {
-                if (Array.isArray(result) && result.every((elt) => inferResultKind(elt) === 's3object')) {
-                    return 's3object-list';
+            else {
+                largeObject = size > DISPLAY_MAX_SIZE;
+            }
+            if (Array.isArray(result)) {
+                if (result.length === 0) {
+                    return 'json';
                 }
-                else if (isRectangularArray(result)) {
-                    return 'table-col';
+                else if (result.every((elt) => typeof elt === 'object' && checkIfS3(elt, Object.keys(elt)))) {
+                    largeObject = result.length > 100;
+                    if (largeObject) {
+                        return 'json';
+                    }
+                    return 's3object-list';
                 }
-                else if (keys.length == 1 && keys[0] == 'table-row') {
+                else if (isTableRow(result)) {
                     return 'table-row';
                 }
-                else if ((keys.length == 1 && keys[0] == 'table-col') ||
-                    isObjectOfArray(result, keys)) {
-                    return 'table-col';
+                else if (isTableRowObject(result)) {
+                    return 'table-row-object';
+                }
+                else {
+                    return 'json';
                 }
-                else if (keys.length == 1 && keys[0] == 'html') {
+            }
+            else if (keys.length === 1 &&
+                ['table-row', 'table-row-object', 'table-col'].includes(keys[0])) {
+                return keys[0];
+            }
+            if (largeObject) {
+                return 'json';
+            }
+            if (keys.length != 0) {
+                if (keys.length == 1 && keys[0] == 'html') {
                     return 'html';
                 }
                 else if (keys.length == 1 && keys[0] == 'map') {
@@ -129,12 +163,15 @@ function inferResultKind(result) {
                     keys.includes('approvalPage')) {
                     return 'approval';
                 }
-                else if (keys.length === 1 && keys.includes('s3')) {
+                else if (checkIfS3(result, keys)) {
                     return 's3object';
                 }
                 else if (keys.length === 1 && (keys.includes('md') || keys.includes('markdown'))) {
                     return 'markdown';
                 }
+                else if (isTableCol(result, keys)) {
+                    return 'table-col';
+                }
             }
         }
         catch (err) { }
@@ -158,14 +195,29 @@ function contentOrRootString(obj) {
         return obj.content;
     }
 }
-function isArrayWithObjects(json) {
-    return (Array.isArray(json) &&
+function handleArrayOfObjectsHeaders(json) {
+    // handle possible a first row of headers
+    if (Array.isArray(json) &&
         json.length > 0 &&
-        json.every((item) => item && typeof item === 'object' && Object.keys(item).length > 0 && !Array.isArray(item)));
+        Array.isArray(json[0]) &&
+        json[0].every((item) => typeof item === 'string') &&
+        json
+            .slice(1)
+            .every((item) => item && typeof item === 'object' && Object.keys(item).length > 0 && !Array.isArray(item))) {
+        const headers = json[0];
+        const rows = json.slice(1);
+        const result = rows.map((row) => {
+            const obj = {};
+            for (const header of headers) {
+                obj[header] = row[header];
+            }
+            return obj;
+        });
+        return result;
+    }
+    return json;
 }
-$: isTableDisplay = isArrayWithObjects(result);
-let richRender = !forceJson;
-function transform(input) {
+function objectOfArraysToObjects(input) {
     const maxLength = Math.max(...Object.values(input).map((arr) => arr.length));
     const result = [];
     for (let i = 0; i < maxLength; i++) {
@@ -182,14 +234,47 @@ function transform(input) {
     }
     return result;
 }
+function arrayOfRowsToObjects(input) {
+    if (Array.isArray(input) && input.length > 0) {
+        // handle possible first row of headers
+        if (input.length > 1 &&
+            Array.isArray(input[0]) &&
+            input[0].every((item) => typeof item === 'string')) {
+            const headers = input[0];
+            const rows = input.slice(1);
+            return rows.map((row) => {
+                const obj = {};
+                for (let i = 0; i < headers.length; i++) {
+                    obj[headers[i]] = row[i];
+                }
+                return obj;
+            });
+        }
+        else {
+            return input;
+        }
+    }
+    return [];
+}
 let globalForceJson = false;
+let seeS3PreviewFileFromList = '';
 </script>
 
 {#if is_render_all}
 	<div class="flex flex-col w-full gap-6">
 		{#if !noControls}
-			<div class="mb-2 text-tertiary text-sm">
-				as JSON&nbsp;<input class="windmillapp" type="checkbox" bind:checked={globalForceJson} />
+			<div class="text-tertiary text-sm">
+				<ToggleButtonGroup
+					class="h-6"
+					selected={globalForceJson ? 'json' : 'pretty'}
+					on:selected={(ev) => {
+						globalForceJson = ev.detail === 'json'
+					}}
+				>
+					<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} />
+
+					<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} />
+				</ToggleButtonGroup>
 			</div>
 		{/if}
 		{#each result['render_all'] as res}
@@ -213,306 +298,346 @@ let globalForceJson = false;
 			: 'min-h-[200px]'}"
 	>
 		{#if result != undefined && length != undefined && largeObject != undefined}
-			<div class="flex justify-between items-center w-full pb-1">
-				<div class="text-tertiary text-sm flex items-center">
-					{#if (resultKind && typeof result == 'object' && !['json', 's3object', 's3object-list', 'table-col', 'table-row'].includes(resultKind) && !hideAsJson) || isTableDisplay}
+			<div class="flex justify-between items-center w-full">
+				<div class="text-tertiary text-sm">
+					{#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'}
 						<ToggleButtonGroup
 							class="h-6"
-							selected={isTableDisplay
-								? richRender
-									? 'table'
-									: 'json'
-								: forceJson
-								? 'json'
-								: 'pretty'}
+							selected={forceJson ? 'json' : resultKind?.startsWith('table-') ? 'table' : 'pretty'}
 							on:selected={(ev) => {
-								if (isTableDisplay) {
-									richRender = ev.detail === 'table'
-								}
 								forceJson = ev.detail === 'json'
 							}}
 						>
-							{#if resultKind && !['json', 's3object', 's3object-list', 'table-col', 'table-row'].includes(resultKind) && !hideAsJson}
-								<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} />
-							{/if}
-							{#if isTableDisplay}
+							{#if ['table-col', 'table-row', 'table-row-object'].includes(resultKind ?? '')}
 								<ToggleButton class="px-1.5" value="table" label="Table" icon={Table2} />
+							{:else}
+								<ToggleButton class="px-1.5" value="pretty" label="Pretty" icon={Highlighter} />
 							{/if}
 							<ToggleButton class="px-1.5" value="json" label="JSON" icon={Braces} />
 						</ToggleButtonGroup>
 					{/if}
 				</div>
-				<div class="text-tertiary text-xs flex gap-2 z-10 items-center">
+				<div class="text-secondary text-xs flex gap-2.5 z-10 items-center">
 					<slot name="copilot-fix" />
 					{#if !disableExpand && !noControls}
-						<button on:click={() => copyToClipboard(toJsonStr(result))}
-							><ClipboardCopy size={16} /></button
+						<Popover
+							documentationLink="https://www.windmill.dev/docs/core_concepts/rich_display_rendering"
 						>
-						<button on:click={jsonViewer.openDrawer}><Expand size={16} /></button>
+							<svelte:fragment slot="text">
+								The result renderer in Windmill supports rich display rendering, allowing you to
+								customize the display format of your results.
+							</svelte:fragment>
+							<div class="-mt-1">
+								<InfoIcon size={14} />
+							</div>
+						</Popover>
+						<button on:click={() => copyToClipboard(toJsonStr(result))} class="-mt-1">
+							<ClipboardCopy size={14} />
+						</button>
+						<button on:click={jsonViewer.openDrawer} class="-mt-1">
+							<Expand size={14} />
+						</button>
 					{/if}
 				</div>
-			</div>{#if !forceJson && resultKind == 'table-col'}
-				{@const data = 'table-col' in result ? result['table-col'] : result}
-				<AutoDataTable objects={transform(data)} />
-			{:else if !forceJson && resultKind == 'table-row'}
-				{@const data = 'table-row' in result ? result['table-row'] : result}
-				<div class="grid grid-flow-col-dense border border-gray-200 dark:border-gray-600">
-					<TableCustom>
-						<tbody slot="body">
-							{#each Array.isArray(asListOfList(data)) ? asListOfList(data) : [] as row}
-								<tr>
-									{#each row as v}
-										<td class="!text-xs">{truncate(JSON.stringify(v), 200) ?? ''}</td>
-									{/each}
-								</tr>
-							{/each}
-						</tbody>
-					</TableCustom>
-				</div>
-			{:else if !forceJson && resultKind == 'html'}
-				<div class="h-full">
-					{#if !requireHtmlApproval || enableHtml}
-						{@html result.html}
-					{:else}
-						<div class="font-main text-sm">
-							<div class="flex flex-col">
-								<div class="bg-red-400 py-1 rounded-t text-white font-bold text-center">
-									Warning
+			</div><div class="grow"
+				>{#if !forceJson && resultKind == 'table-col'}
+					{@const data = 'table-col' in result ? result['table-col'] : result}
+					<AutoDataTable objects={objectOfArraysToObjects(data)} />
+				{:else if !forceJson && resultKind == 'table-row'}
+					{@const data = 'table-row' in result ? result['table-row'] : result}
+					<AutoDataTable objects={arrayOfRowsToObjects(data)} />
+				{:else if !forceJson && resultKind == 'table-row-object'}
+					{@const data = 'table-row-object' in result ? result['table-row-object'] : result}
+					<AutoDataTable objects={handleArrayOfObjectsHeaders(data)} />
+				{:else if !forceJson && resultKind == 'html'}
+					<div class="h-full">
+						{#if !requireHtmlApproval || enableHtml}
+							{@html result.html}
+						{:else}
+							<div class="font-main text-sm">
+								<div class="flex flex-col">
+									<div class="bg-red-400 py-1 rounded-t text-white font-bold text-center">
+										Warning
+									</div>
+									<p
+										class="text-tertiary mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
+										>Rendering HTML can expose you to <a
+											href="https://owasp.org/www-community/attacks/xss/"
+											target="_blank"
+											rel="noreferrer"
+											class="hover:underline">XSS attacks</a
+										>. Only enable it if you trust the author of the script.
+									</p>
+								</div>
+								<div class="center-center">
+									<Button size="sm" color="dark" on:click={() => (enableHtml = true)}>
+										Enable HTML rendering
+									</Button>
 								</div>
-								<p
-									class="text-tertiary mb-2 text-left border-2 !border-t-0 rounded-b border-red-400 overflow-auto p-1"
-									>Rendering HTML can expose you to <a
-										href="https://owasp.org/www-community/attacks/xss/"
-										target="_blank"
-										rel="noreferrer"
-										class="hover:underline">XSS attacks</a
-									>. Only enable it if you trust the author of the script.
-								</p>
-							</div>
-							<div class="center-center">
-								<Button size="sm" color="dark" on:click={() => (enableHtml = true)}>
-									Enable HTML rendering
-								</Button>
 							</div>
-						</div>
-					{/if}
-				</div>
-			{:else if !forceJson && resultKind == 'map'}
-				<div class="h-full">
-					<MapResult
-						lat={result.map.lat}
-						lon={result.map.lon}
-						zoom={result.map.zoom}
-						markers={result.map.markers}
-					/>
-				</div>
-			{:else if !forceJson && resultKind == 'png'}
-				<div class="h-full">
-					<img
-						alt="png rendered"
-						class="w-auto h-full"
-						src="data:image/png;base64,{contentOrRootString(result.png)}"
-					/>
-				</div>
-			{:else if !forceJson && resultKind == 'jpeg'}
-				<div class="h-full">
-					<img
-						alt="jpeg rendered"
-						class="w-auto h-full"
-						src="data:image/jpeg;base64,{contentOrRootString(result.jpeg)}"
-					/>
-				</div>
-			{:else if !forceJson && resultKind == 'svg'}
-				<div
-					><a download="windmill.svg" href="data:text/plain;base64,{btoa(result.svg)}">Download</a>
-				</div>
-				<div class="h-full overflow-auto">{@html result.svg} </div>
-			{:else if !forceJson && resultKind == 'gif'}
-				<div class="h-full">
-					<img
-						alt="gif rendered"
-						class="w-auto h-full"
-						src="data:image/gif;base64,{contentOrRootString(result.gif)}"
-					/>
-				</div>
-			{:else if !forceJson && resultKind == 'plain'}<div class="h-full text-2xs"
-					><pre>{typeof result == 'string' ? result : result?.['result']}</pre>{#if !noControls}
-						<div class="flex">
-							<Button
-								on:click={() =>
-									copyToClipboard(typeof result == 'string' ? result : result?.['result'])}
-								color="light"
-								size="xs"
-							>
-								<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
-							</Button>
-						</div>
-					{/if}
-				</div>
-			{:else if !forceJson && resultKind == 'file'}
-				<div>
-					<a
-						download={result.filename ?? result.file?.filename ?? 'windmill.file'}
-						href="data:application/octet-stream;base64,{contentOrRootString(result.file)}"
-						>Download</a
-					>
-				</div>
-			{:else if !forceJson && resultKind == 'error' && result?.error}
-				<div class="flex flex-col items-start">
-					<span class="text-red-500 font-semibold text-sm whitespace-pre-wrap"
-						>{#if result.error.name || result.error.message}{result.error.name}: {result.error
-								.message}{:else}{JSON.stringify(result.error, null, 4)}{/if}</span
-					>
-					<pre class="text-sm whitespace-pre-wrap text-primary">{result.error.stack ?? ''}</pre>
-					<slot />
-				</div>
-			{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-3 mt-2 mx-4">
-					<Button
-						color="green"
-						variant="border"
-						on:click={() =>
-							fetch(result['resume'], {
-								method: 'POST',
-								body: JSON.stringify({}),
-								headers: { 'Content-Type': 'application/json' }
-							})}
-					>
-						Resume</Button
-					>
-					<Button color="red" variant="border" on:click={() => fetch(result['cancel'])}
-						>Cancel</Button
-					>
-					<div class="center-center"
-						><a rel="noreferrer" target="_blank" href={result['approvalPage']}>Approval Page</a
-						></div
-					>
-				</div>
-			{:else if !forceJson && resultKind == 's3object'}
-				<div
-					class="h-full w-full {typeof result?.s3 == 'string' && result?.s3?.endsWith('.parquet')
-						? 'h-min-[600px]'
-						: ''}"
-				>
-					<div class="flex flex-col gap-2">
-						<Toggle
-							class="flex"
-							bind:checked={s3FileDisplayRawMode}
-							size="xs"
-							options={{ right: 'Raw S3 object input' }}
+						{/if}
+					</div>
+				{:else if !forceJson && resultKind == 'map'}
+					<div class="h-full">
+						<MapResult
+							lat={result.map.lat}
+							lon={result.map.lon}
+							zoom={result.map.zoom}
+							markers={result.map.markers}
 						/>
-						{#if s3FileDisplayRawMode}
-							<Highlight class="" language={json} code={toJsonStr(result).replace(/\\n/g, '\n')} />
-							<button
-								class="text-secondary underline text-2xs whitespace-nowrap"
-								on:click={() => {
-									s3FileViewer?.open?.(result)
-								}}
-								><span class="flex items-center gap-1"
-									><PanelRightOpen size={12} />open preview</span
-								>
-							</button>
-						{:else}
-							<FileDownload s3object={result} />
-							<button
-								class="text-secondary underline text-2xs whitespace-nowrap"
-								on:click={() => {
-									s3FileViewer?.open?.(result)
-								}}
-								><span class="flex items-center gap-1"
-									><PanelRightOpen size={12} />open preview</span
+					</div>
+				{:else if !forceJson && resultKind == 'png'}
+					<div class="h-full">
+						<img
+							alt="png rendered"
+							class="w-auto h-full"
+							src="data:image/png;base64,{contentOrRootString(result.png)}"
+						/>
+					</div>
+				{:else if !forceJson && resultKind == 'jpeg'}
+					<div class="h-full">
+						<img
+							alt="jpeg rendered"
+							class="w-auto h-full"
+							src="data:image/jpeg;base64,{contentOrRootString(result.jpeg)}"
+						/>
+					</div>
+				{:else if !forceJson && resultKind == 'svg'}
+					<div
+						><a download="windmill.svg" href="data:text/plain;base64,{btoa(result.svg)}">Download</a
+						>
+					</div>
+					<div class="h-full overflow-auto">{@html result.svg} </div>
+				{:else if !forceJson && resultKind == 'gif'}
+					<div class="h-full">
+						<img
+							alt="gif rendered"
+							class="w-auto h-full"
+							src="data:image/gif;base64,{contentOrRootString(result.gif)}"
+						/>
+					</div>
+				{:else if !forceJson && resultKind == 'plain'}<div class="h-full text-2xs"
+						><pre>{typeof result == 'string' ? result : result?.['result']}</pre>{#if !noControls}
+							<div class="flex">
+								<Button
+									on:click={() =>
+										copyToClipboard(typeof result == 'string' ? result : result?.['result'])}
+									color="light"
+									size="xs"
 								>
-							</button>
+									<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
+								</Button>
+							</div>
 						{/if}
 					</div>
-					{#if typeof result?.s3 == 'string' && result?.s3?.endsWith('.parquet')}
-						<ParqetTableRenderer s3resource={result?.s3} />
-					{/if}
-				</div>
-			{:else if !forceJson && resultKind == 's3object-list'}
-				<div class="h-full w-full">
-					<div class="flex flex-col gap-2">
-						<Toggle
-							class="flex"
-							bind:checked={s3FileDisplayRawMode}
-							size="xs"
-							options={{ right: 'Raw S3 object input' }}
-						/>
-						{#each result as s3object}
+				{:else if !forceJson && resultKind == 'file'}
+					<div>
+						<a
+							download={result.filename ?? result.file?.filename ?? 'windmill.file'}
+							href="data:application/octet-stream;base64,{contentOrRootString(result.file)}"
+							>Download</a
+						>
+					</div>
+				{:else if !forceJson && resultKind == 'error' && result?.error}
+					<div class="flex flex-col items-start">
+						<span class="text-red-500 font-semibold text-sm whitespace-pre-wrap"
+							>{#if result.error.name || result.error.message}{result.error.name}: {result.error
+									.message}{:else}{JSON.stringify(result.error, null, 4)}{/if}</span
+						>
+						<pre class="text-sm whitespace-pre-wrap text-primary">{result.error.stack ?? ''}</pre>
+						<slot />
+					</div>
+				{:else if !forceJson && resultKind == 'approval'}<div class="flex flex-col gap-3 mt-2 mx-4">
+						<Button
+							color="green"
+							variant="border"
+							on:click={() =>
+								fetch(result['resume'], {
+									method: 'POST',
+									body: JSON.stringify({}),
+									headers: { 'Content-Type': 'application/json' }
+								})}
+						>
+							Resume</Button
+						>
+						<Button color="red" variant="border" on:click={() => fetch(result['cancel'])}
+							>Cancel</Button
+						>
+						<div class="center-center"
+							><a rel="noreferrer" target="_blank" href={result['approvalPage']}>Approval Page</a
+							></div
+						>
+					</div>
+				{:else if !forceJson && resultKind == 's3object'}
+					<div
+						class="h-full w-full {typeof result?.s3 == 'string' && result?.s3?.endsWith('.parquet')
+							? 'h-min-[600px]'
+							: ''}"
+					>
+						<div class="flex flex-col gap-2">
+							<Toggle
+								class="flex"
+								bind:checked={s3FileDisplayRawMode}
+								size="xs"
+								options={{ right: 'Raw S3 object' }}
+							/>
+
 							{#if s3FileDisplayRawMode}
 								<Highlight
 									class=""
 									language={json}
-									code={toJsonStr(s3object).replace(/\\n/g, '\n')}
+									code={toJsonStr(result).replace(/\\n/g, '\n')}
 								/>
 								<button
-									class="text-secondary text-2xs whitespace-nowrap"
+									class="text-secondary underline text-2xs whitespace-nowrap"
 									on:click={() => {
-										s3FileViewer?.open?.(s3object)
+										s3FileViewer?.open?.(result)
 									}}
 									><span class="flex items-center gap-1"
-										><PanelRightOpen size={12} />open preview</span
+										><PanelRightOpen size={12} />object store explorer<Tooltip
+											>Require admin privilege or "S3 resource details and content can be accessed
+											by all users of this workspace" of S3 Storage to be set in the workspace
+											settings</Tooltip
+										></span
+									>
+								</button>
+							{:else if !result?.disable_download}
+								<FileDownload s3object={result} />
+								<button
+									class="text-secondary underline text-2xs whitespace-nowrap"
+									on:click={() => {
+										s3FileViewer?.open?.(result)
+									}}
+									><span class="flex items-center gap-1"
+										><PanelRightOpen size={12} />object store explorer<Tooltip
+											>Require admin privilege or "S3 resource details and content can be accessed
+											by all users of this workspace" of S3 Storage to be set in the workspace
+											settings</Tooltip
+										></span
 									>
 								</button>
-							{:else}
-								<FileDownload {s3object} />
 							{/if}
-						{/each}
+						</div>
+						{#if typeof result?.s3 == 'string' && (result?.s3?.endsWith('.parquet') || result?.s3?.endsWith('.csv'))}
+							{#key result.s3}
+								<ParqetTableRenderer
+									disable_download={result?.disable_download}
+									{workspaceId}
+									s3resource={result?.s3}
+									storage={result?.storage}
+								/>
+							{/key}
+						{/if}
 					</div>
-				</div>
-			{:else if !forceJson && resultKind == 'markdown'}
-				<div class="prose-xs dark:prose-invert">
-					<Markdown md={result?.md ?? result?.markdown} />
-				</div>
-			{:else if !forceJson && isTableDisplay && richRender}
-				<AutoDataTable objects={result} />
-			{:else if largeObject}
-				{#if result && typeof result == 'object' && 'file' in result}
-					<div
-						><a
-							download={result.filename ?? result.file?.filename ?? 'windmill.file'}
-							href="data:application/octet-stream;base64,{contentOrRootString(result.file)}"
-							>Download</a
-						>
+				{:else if !forceJson && resultKind == 's3object-list'}
+					<div class="h-full w-full">
+						<div class="flex flex-col gap-2">
+							<Toggle
+								class="flex mt-1"
+								bind:checked={s3FileDisplayRawMode}
+								size="xs"
+								options={{ right: 'Raw S3 object' }}
+							/>
+							{#each result as s3object}
+								{#if s3FileDisplayRawMode}
+									<Highlight
+										class=""
+										language={json}
+										code={toJsonStr(s3object).replace(/\\n/g, '\n')}
+									/>
+									<button
+										class="text-secondary text-2xs whitespace-nowrap"
+										on:click={() => {
+											s3FileViewer?.open?.(s3object)
+										}}
+										><span class="flex items-center gap-1"
+											><PanelRightOpen size={12} />open preview</span
+										>
+									</button>
+								{:else if !s3object?.disable_download}
+									<FileDownload {s3object} />
+								{:else}
+									<div class="flex text-secondary pt-2">{s3object?.s3} (download disabled)</div>
+								{/if}
+								{#if s3object?.s3?.endsWith('.parquet') || s3object?.s3?.endsWith('.csv')}
+									{#if seeS3PreviewFileFromList == s3object?.s3}
+										<ParqetTableRenderer
+											disable_download={s3object?.disable_download}
+											{workspaceId}
+											s3resource={s3object?.s3}
+											storage={s3object?.storage}
+										/>{:else}
+										<button
+											class="text-secondary whitespace-nowrap flex gap-2 items-center"
+											on:click={() => {
+												seeS3PreviewFileFromList = s3object?.s3
+											}}
+											>open table preview <ArrowDownFromLine />
+										</button>
+									{/if}
+								{/if}
+							{/each}
+						</div>
 					</div>
-				{:else}
-					<div class="text-sm text-tertiary"
-						><a
-							download="{filename ?? 'result'}.json"
-							href={workspaceId && jobId
-								? `/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
-								: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
-						>
-							Download {filename ? '' : 'as JSON'}
-						</a>
+				{:else if !forceJson && resultKind == 'markdown'}
+					<div class="prose-xs dark:prose-invert !list-disc !list-outside">
+						<Markdown md={result?.md ?? result?.markdown} />
 					</div>
+				{:else if largeObject}
+					{#if result && typeof result == 'object' && 'file' in result}
+						<div
+							><a
+								download={result.filename ?? result.file?.filename ?? 'windmill.file'}
+								href="data:application/octet-stream;base64,{contentOrRootString(result.file)}"
+								>Download</a
+							>
+						</div>
+					{:else}
+						<div class="text-sm text-tertiary"
+							><a
+								download="{filename ?? 'result'}.json"
+								href={workspaceId && jobId
+									? `/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
+									: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
+							>
+								Download {filename ? '' : 'as JSON'}
+							</a>
+							{#if download_as_csv}
+								<DownloadCsv
+									getContent={() => convertJsonToCsv(result)}
+									customText="Download as CSV"
+								/>
+							{/if}
+						</div>
 
-					<div class="mt-1 mb-2">
-						<Alert
-							size="xs"
-							title="Large result detected"
-							type="warning"
-							tooltip="We recommend using persistent object storage for large result. See docs for setting up an object storage service integration using s3 or any other s3 compatible services."
-							documentationLink="https://www.windmill.dev/docs/core_concepts/persistent_storage#large-data-files-s3-r2-minio-azure-blob"
-						/>
-					</div>
-					{#if result && result != 'WINDMILL_TOO_BIG'}
-						<ObjectViewer json={result} />
+						<div class="mt-1 mb-2">
+							<Alert
+								size="xs"
+								title="Large result detected"
+								type="warning"
+								tooltip="We recommend using persistent object storage for large result. See docs for setting up an object storage service integration using s3 or any other s3 compatible services."
+								documentationLink="https://www.windmill.dev/docs/core_concepts/persistent_storage#object-storage-for-large-data-s3-r2-minio-azure-blob"
+							/>
+						</div>
+						{#if result && result != 'WINDMILL_TOO_BIG'}
+							<ObjectViewer json={result} />
+						{/if}
 					{/if}
+				{:else if typeof result == 'string' && result.length > 0}
+					<pre class="text-sm">{result}</pre>{#if !noControls}<div class="flex">
+							<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
+								<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
+							</Button>
+						</div>
+					{/if}
+				{:else}
+					<Highlight
+						class={forceJson ? '' : 'h-full w-full'}
+						language={json}
+						code={toJsonStr(result).replace(/\\n/g, '\n')}
+					/>
 				{/if}
-			{:else if typeof result == 'string' && result.length > 0}
-				<pre class="text-sm">{result}</pre>{#if !noControls}<div class="flex">
-						<Button on:click={() => copyToClipboard(result)} color="light" size="xs">
-							<div class="flex gap-2 items-center">Copy <ClipboardCopy size={12} /> </div>
-						</Button>
-					</div>
-				{/if}
-			{:else}
-				<Highlight
-					class={forceJson ? '' : 'h-full w-full'}
-					language={json}
-					code={toJsonStr(result).replace(/\\n/g, '\n')}
-				/>
-			{/if}
+			</div>
 		{:else if typeof result == 'string' && resultKind == 'plain'}
 			<div class="h-full text-xs">
 				<pre>{result}</pre>
@@ -530,46 +655,44 @@ let globalForceJson = false;
 	</div>
 
 	{#if !disableExpand && !noControls}
-		<Portal>
-			<Drawer bind:this={jsonViewer} size="900px">
-				<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
-					<svelte:fragment slot="actions">
-						<Button
-							download="{filename ?? 'result'}.json"
-							href={workspaceId && jobId
-								? `/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
-								: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
-							startIcon={{ icon: Download }}
-							color="light"
-							size="xs"
-						>
-							Download
-						</Button>
-						<Button
-							on:click={() => copyToClipboard(toJsonStr(result))}
-							color="light"
-							size="xs"
-							startIcon={{
-								icon: ClipboardCopy
-							}}
-						>
-							Copy to clipboard
-						</Button>
-					</svelte:fragment>
-					<svelte:self
-						{noControls}
-						{result}
-						{requireHtmlApproval}
-						{filename}
-						{jobId}
-						{workspaceId}
-						{hideAsJson}
-						{forceJson}
-						disableExpand={true}
-					/>
-				</DrawerContent>
-			</Drawer>
-		</Portal>
+		<Drawer bind:this={jsonViewer} bind:open={drawerOpen} size="900px">
+			<DrawerContent title="Expanded Result" on:close={jsonViewer.closeDrawer}>
+				<svelte:fragment slot="actions">
+					<Button
+						download="{filename ?? 'result'}.json"
+						href={workspaceId && jobId
+							? `/api/w/${workspaceId}/jobs_u/completed/get_result/${jobId}`
+							: `data:text/json;charset=utf-8,${encodeURIComponent(toJsonStr(result))}`}
+						startIcon={{ icon: Download }}
+						color="light"
+						size="xs"
+					>
+						Download
+					</Button>
+					<Button
+						on:click={() => copyToClipboard(toJsonStr(result))}
+						color="light"
+						size="xs"
+						startIcon={{
+							icon: ClipboardCopy
+						}}
+					>
+						Copy to clipboard
+					</Button>
+				</svelte:fragment>
+				<svelte:self
+					{noControls}
+					{result}
+					{requireHtmlApproval}
+					{filename}
+					{jobId}
+					{workspaceId}
+					{hideAsJson}
+					{forceJson}
+					disableExpand={true}
+				/>
+			</DrawerContent>
+		</Drawer>
 
 		<Portal>
 			<S3FilePicker bind:this={s3FileViewer} readOnlyMode={true} />