fix: limit auto data tables to tables of col < 100

Author: rubenfiszel

frontend/src/lib/components/DisplayResult.svelte

@@ -36,7 +36,7 @@
 	import Tooltip from './Tooltip.svelte'
 	import HighlightTheme from './HighlightTheme.svelte'
 	import type { DisplayResultUi } from './custom_ui'
-	import { getContext, hasContext, createEventDispatcher, onDestroy } from 'svelte'
+	import { getContext, hasContext, createEventDispatcher, onDestroy, untrack } from 'svelte'
 	import { toJsonStr } from '$lib/utils'
 	import { userStore } from '$lib/stores'
 	import ResultStreamDisplay from './ResultStreamDisplay.svelte'
@@ -139,24 +139,25 @@
 
 	function isTableRowObject(json) {
 		// check array of objects (with possible a first row of headers)
+		return (
+			isTableRowObjectWithoutHeaders(json, true) ||
+			(Array.isArray(json[0]) &&
+				json[0].length > 0 &&
+				json[0].length <= 100 &&
+				json[0].every((item) => typeof item === 'string') &&
+				isTableRowObjectWithoutHeaders(json.slice(1), false))
+		)
+	}
+
+	function isTableRowObjectWithoutHeaders(json: any, checkFirst) {
 		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)
-						)))
+			(!checkFirst ||
+				(json[0] && typeof json[0] === 'object' && Object.keys(json[0]).length <= 100)) &&
+			json.every((item) => {
+				return typeof item === 'object' && Object.keys(item).length > 0 && !Array.isArray(item)
+			})
 		)
 	}
 
@@ -200,6 +201,7 @@
 				}
 
 				let size = roughSizeOfObject(result)
+				console.debug('size of object', size)
 				// Otherwise, check if the result is too large (10kb) for json
 
 				if (size > TABLE_MAX_SIZE) {
@@ -479,7 +481,9 @@
 
 	$effect(() => {
 		;[result]
-		resultKind = inferResultKind(result)
+		untrack(() => {
+			resultKind = inferResultKind(result)
+		})
 	})
 	$effect(() => {
 		chooseToolbarLocation(

frontend/src/lib/components/table/Cell.svelte

@@ -3,25 +3,42 @@
 	import { twMerge } from 'tailwind-merge'
 	import type { DatatableContext } from './DataTable.svelte'
 
-	export let first: boolean = false
-	export let last: boolean = false
-	export let numeric: boolean = false
-	export let head: boolean = false
-	export let shouldStopPropagation: boolean = false
-	export let selected = false
-	export let sticky: boolean = false
-	export let wrap: boolean = false
+	interface Props {
+		first?: boolean
+		last?: boolean
+		numeric?: boolean
+		head?: boolean
+		shouldStopPropagation?: boolean
+		selected?: boolean
+		sticky?: boolean
+		wrap?: boolean
+		children?: import('svelte').Snippet
+		[key: string]: any
+	}
+
+	let {
+		first = false,
+		last = false,
+		numeric = false,
+		head = false,
+		shouldStopPropagation = false,
+		selected = false,
+		sticky = false,
+		wrap = false,
+		children,
+		...rest
+	}: Props = $props()
 
 	let Tag = head ? 'th' : 'td'
 
 	const { size } = getContext<DatatableContext>('datatable')
 </script>
 
-<!-- svelte-ignore a11y-no-static-element-interactions -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
 <svelte:element
 	this={Tag}
-	{...$$restProps}
-	on:click={(e) => {
+	{...rest}
+	onclick={(e) => {
 		if (shouldStopPropagation) e.stopPropagation()
 	}}
 	class={twMerge(
@@ -41,14 +58,14 @@
 		size === 'xs' ? 'px-1 py-1.5' : '',
 		selected ? 'bg-blue-50 dark:bg-blue-900/50' : '',
 		'transition-all',
-		$$restProps.class
+		rest.class
 	)}
 >
 	{#if sticky}
 		<div class={twMerge(first ? 'border-r' : ' border-l ')}>
-			<slot />
+			{@render children?.()}
 		</div>
 	{:else}
-		<slot />
+		{@render children?.()}
 	{/if}
 </svelte:element>

frontend/src/lib/utils.ts

@@ -172,9 +172,9 @@ export function displayDate(
 		}
 		const dateChoices: Intl.DateTimeFormatOptions = displayDate
 			? {
-					day: 'numeric',
-					month: 'numeric'
-				}
+				day: 'numeric',
+				month: 'numeric'
+			}
 			: {}
 		return date.toLocaleString(undefined, {
 			...timeChoices,
@@ -1065,38 +1065,37 @@ export async function tryEvery({
 		try {
 			await tryCode()
 			break
-		} catch (err) {}
+		} catch (err) { }
 		i++
 	}
 	if (i >= times) {
 		timeoutCode()
 	}
 }
-
-export function roughSizeOfObject(object: object | string) {
-	if (typeof object == 'string') {
+export function roughSizeOfObject(object: object | string | any) {
+	if (typeof object === 'string') {
 		return object.length * 2
 	}
 
-	var objectList: any[] = []
-	var stack = [object]
-	var bytes = 0
+	const visited = new Set<object>()
+	const stack = [object]
+	let bytes = 0
 
 	while (stack.length) {
-		let value: any = stack.pop()
+		const value = stack.pop()
 
 		if (typeof value === 'boolean') {
 			bytes += 4
 		} else if (typeof value === 'string') {
 			bytes += value.length * 2
 		} else if (typeof value === 'number') {
 			bytes += 8
-		} else if (typeof value === 'object' && objectList.indexOf(value) === -1) {
-			objectList.push(value)
+		} else if (typeof value === 'object' && value !== null && !visited.has(value)) {
+			visited.add(value)
 
-			for (var i in value) {
-				bytes += 2 * i.length
-				stack.push(value[i])
+			for (const key in value) {
+				bytes += 2 * key.length
+				stack.push(value[key])
 			}
 		}
 	}
@@ -1332,7 +1331,7 @@ export function conditionalMelt(node: HTMLElement, meltItem: AnyMeltElement | un
 	if (meltItem) {
 		return meltItem(node)
 	}
-	return { destroy: () => {} }
+	return { destroy: () => { } }
 }
 
 export type Item = {
@@ -1538,9 +1537,9 @@ export type S3Uri = `s3://${string}/${string}`
 export type S3Object =
 	| S3Uri
 	| {
-			s3: string
-			storage?: string
-	  }
+		s3: string
+		storage?: string
+	}
 
 export function parseS3Object(s3Object: S3Object): { s3: string; storage?: string } {
 	if (typeof s3Object === 'object') return s3Object