From 47d6ee2749160bcbe2cbbc469930b81cad4fa8e0 Mon Sep 17 00:00:00 2001 From: Faton Ramadani Date: Thu, 3 Oct 2024 17:35:54 +0200 Subject: [PATCH] fix(frontend): FixDisplay result overflow with large results --- .../src/lib/components/DisplayResult.svelte | 784 +++++++++--------- 1 file changed, 399 insertions(+), 385 deletions(-) diff --git a/frontend/src/lib/components/DisplayResult.svelte b/frontend/src/lib/components/DisplayResult.svelte index 3fec8d0941..b5ce6bcc45 100644 --- a/frontend/src/lib/components/DisplayResult.svelte +++ b/frontend/src/lib/components/DisplayResult.svelte @@ -34,6 +34,7 @@ import { convertJsonToCsv } from './table/tableUtils' import Tooltip from './Tooltip.svelte' import HighlightTheme from './HighlightTheme.svelte' + import { twMerge } from 'tailwind-merge' export let result: any export let requireHtmlApproval = false @@ -394,406 +395,419 @@ /> {/each} -{:else if resultKind === 'nondisplayable'}
Non displayable object
{:else}
{#if result != undefined && length != undefined && largeObject != undefined}
- {#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'} { - forceJson = ev.detail === 'json' - }} - > - {#if ['table-col', 'table-row', 'table-row-object'].includes(resultKind ?? '')} - - {:else} - - {/if} - - - {/if} -
-
- - {#if !disableExpand && !noControls} - - - - - - The result renderer in Windmill supports rich display rendering, allowing you to - customize the display format of your results. - -
- -
- - - - {/if} -
-
{#if !forceJson && resultKind === 'table-col'} - {@const data = 'table-col' in result ? result['table-col'] : result} - - {:else if !forceJson && resultKind === 'table-row'} - {@const data = 'table-row' in result ? result['table-row'] : result} - - {:else if !forceJson && resultKind === 'table-row-object'} - {@const data = 'table-row-object' in result ? result['table-row-object'] : result} - - {:else if !forceJson && resultKind === 'html'} -
- {#if !requireHtmlApproval || enableHtml} - {@html result.html} - {:else} -
-
-
- Warning -
-

Rendering HTML can expose you to XSS attacks. Only enable it if you trust the author of the script. -

-
-
- -
-
- {/if} -
- {:else if !forceJson && resultKind === 'map'} -
- -
- {:else if !forceJson && resultKind === 'png'} -
- png rendered -
- {:else if !forceJson && resultKind === 'jpeg'} -
- jpeg rendered -
- {:else if !forceJson && resultKind === 'svg'} - -
{@html result.svg}
- {:else if !forceJson && resultKind === 'gif'} -
- gif rendered -
- {:else if !forceJson && resultKind === 'plain'}
{typeof result === 'string' ? result : result?.['result']}
{#if !noControls} -
- -
- {/if} -
- {:else if !forceJson && resultKind === 'file'} -
- Download -
- {:else if !forceJson && resultKind === 'error' && result?.error} -
- {#if result.error.name || result.error.message}{result.error.name}: {result.error - .message}{:else}{JSON.stringify(result.error, null, 4)}{/if} - 
{result.error.stack ?? ''}
- -
- {#if language === 'bun'} -
- - Bun script are bundled for performance reasons. If you see an odd error that doesn't - appear when testing (which doesn't use bundling), try putting //nobundling at the top of your script to disable bundling and feel free to mention it to the Windmill's - team. - - {/if} - {:else if !forceJson && resultKind === 'approval'}
- - -
Approval Page
-
- {:else if !forceJson && resultKind === 's3object'} -
-
- - - {#if s3FileDisplayRawMode} - - - {:else if !result?.disable_download} - - - {/if} -
- {#if typeof result?.s3 === 'string'} - {#if result?.s3?.endsWith('.parquet') || result?.s3?.endsWith('.csv')} - {#key result.s3} - - {/key} - {:else if result?.s3?.endsWith('.png') || result?.s3?.endsWith('.jpeg') || result?.s3?.endsWith('.jpg') || result?.s3?.endsWith('.webp')} -
- preview rendered -
- {/if} - {/if} -
- {:else if !forceJson && resultKind === 's3object-list'} -
-
- - {#each result as s3object} - {#if s3FileDisplayRawMode} - - - {:else if !s3object?.disable_download} - - {:else} -
{s3object?.s3} (download disabled)
- {/if} - {#if s3object?.s3?.endsWith('.parquet') || s3object?.s3?.endsWith('.csv')} - {#if seeS3PreviewFileFromList == s3object?.s3} - {:else} - - {/if} - {:else if s3object?.s3?.endsWith('.png') || s3object?.s3?.endsWith('.jpeg') || s3object?.s3?.endsWith('.jpg') || s3object?.s3?.endsWith('.webp')} - {#if seeS3PreviewFileFromList == s3object?.s3} -
- preview rendered -
- {:else} - - {/if} - {/if} - {/each} -
-
- {:else if !forceJson && resultKind === 'markdown'} -
- -
- {:else if largeObject} - {#if result && typeof result === 'object' && 'file' in result} -
DownloadNon displayable object
+{:else} +
+ {#if result != undefined && length != undefined && largeObject != undefined} +
+
+
+ {#if !hideAsJson && !['json', 's3object'].includes(resultKind ?? '') && typeof result === 'object'} + { + forceJson = ev.detail === 'json' + }} > -
- {:else} -
+ {:else} + + {/if} + + + {/if} +
+
+ + {#if !disableExpand && !noControls} + - Download {filename ? '' : 'as JSON'} + - {#if download_as_csv} - convertJsonToCsv(result)} - customText="Download as CSV" - /> + + + The result renderer in Windmill supports rich display rendering, allowing you to + customize the display format of your results. + + + + + + {/if} +
+
+
+ {#if !forceJson && resultKind === 'table-col'} + {@const data = 'table-col' in result ? result['table-col'] : result} + + {:else if !forceJson && resultKind === 'table-row'} + {@const data = 'table-row' in result ? result['table-row'] : result} + + {:else if !forceJson && resultKind === 'table-row-object'} + {@const data = 'table-row-object' in result ? result['table-row-object'] : result} + + {:else if !forceJson && resultKind === 'html'} +
+ {#if !requireHtmlApproval || enableHtml} + {@html result.html} + {:else} +
+
+
+ Warning +
+

Rendering HTML can expose you to XSS attacks. Only enable it if you trust the author of the script. +

+
+
+ +
+
{/if}
- -
- +
- {#if result && result != 'WINDMILL_TOO_BIG'} - - {/if} - {/if} - {:else if typeof result === 'string' && result.length > 0} - 
{result}
{#if !noControls}
- + {:else if !forceJson && resultKind === 'png'} +
+ png rendered
+ {:else if !forceJson && resultKind === 'jpeg'} +
+ jpeg rendered +
+ {:else if !forceJson && resultKind === 'svg'} + +
{@html result.svg}
+ {:else if !forceJson && resultKind === 'gif'} +
+ gif rendered +
+ {:else if !forceJson && resultKind === 'plain'}
{typeof result === 'string' ? result : result?.['result']}
{#if !noControls} +
+ +
+ {/if} +
+ {:else if !forceJson && resultKind === 'file'} +
+ Download +
+ {:else if !forceJson && resultKind === 'error' && result?.error} +
+ {#if result.error.name || result.error.message}{result.error.name}: {result.error + .message}{:else}{JSON.stringify(result.error, null, 4)}{/if} + 
{result.error.stack ?? ''}
+ +
+ {#if language === 'bun'} +
+ + Bun script are bundled for performance reasons. If you see an odd error that doesn't + appear when testing (which doesn't use bundling), try putting //nobundling at the top of your script to disable bundling and feel free to mention it to the Windmill's + team. + + {/if} + {:else if !forceJson && resultKind === 'approval'}
+ + +
Approval Page
+
+ {:else if !forceJson && resultKind === 's3object'} +
+
+ + + {#if s3FileDisplayRawMode} + + + {:else if !result?.disable_download} + + + {/if} +
+ {#if typeof result?.s3 === 'string'} + {#if result?.s3?.endsWith('.parquet') || result?.s3?.endsWith('.csv')} + {#key result.s3} + + {/key} + {:else if result?.s3?.endsWith('.png') || result?.s3?.endsWith('.jpeg') || result?.s3?.endsWith('.jpg') || result?.s3?.endsWith('.webp')} +
+ preview rendered +
+ {/if} + {/if} +
+ {:else if !forceJson && resultKind === 's3object-list'} +
+
+ + {#each result as s3object} + {#if s3FileDisplayRawMode} + + + {:else if !s3object?.disable_download} + + {:else} +
{s3object?.s3} (download disabled)
+ {/if} + {#if s3object?.s3?.endsWith('.parquet') || s3object?.s3?.endsWith('.csv')} + {#if seeS3PreviewFileFromList == s3object?.s3} + {:else} + + {/if} + {:else if s3object?.s3?.endsWith('.png') || s3object?.s3?.endsWith('.jpeg') || s3object?.s3?.endsWith('.jpg') || s3object?.s3?.endsWith('.webp')} + {#if seeS3PreviewFileFromList == s3object?.s3} +
+ preview rendered +
+ {:else} + + {/if} + {/if} + {/each} +
+
+ {:else if !forceJson && resultKind === 'markdown'} +
+ +
+ {:else if largeObject} + {#if result && typeof result === 'object' && 'file' in result} + + {:else} +
+ Download {filename ? '' : 'as JSON'} + + {#if download_as_csv} + convertJsonToCsv(result)} + customText="Download as CSV" + /> + {/if} +
+ +
+ +
+ {#if result && result != 'WINDMILL_TOO_BIG'} + + {/if} + {/if} + {:else if typeof result === 'string' && result.length > 0} + 
{result}
{#if !noControls}
+ +
+ {/if} + {:else} + {/if} - {:else} - - {/if} +
{:else if typeof result === 'string' && resultKind === 'plain'}