use object viewer when json is too large

frontend/src/lib/components/DisplayResult.svelte

@@ -7,6 +7,7 @@
 	import autosize from 'svelte-autosize'
 	import { ClipboardCopy } from 'lucide-svelte'
 	import Portal from 'svelte-portal'
+	import ObjectViewer from './propertyPicker/ObjectViewer.svelte'
 
 	export let result: any
 	export let requireHtmlApproval = false
@@ -236,10 +237,14 @@
 		{:else}
 			{@const jsonStr = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
 			{#if jsonStr.length > 10000}
-				JSON too large. <a
-					download="{filename ?? 'result'}.json"
-					href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
-				>
+				<div class="text-sm mb-2 text-gray-600">
+					<a
+						download="{filename ?? 'result'}.json"
+						href="data:text/json;charset=utf-8,{encodeURIComponent(jsonStr)}">Download</a
+					>
+					JSON is too large to be displayed in full.
+				</div>
+				<ObjectViewer json={result} />
 			{:else}
 				<Highlight language={json} code={jsonStr} />
 			{/if}
@@ -264,10 +269,13 @@
 				</svelte:fragment>
 				{@const str = JSON.stringify(result, null, 4).replace(/\\n/g, '\n')}
 				{#if str.length > 100000}
-					JSON too large. <a
-						download="{filename ?? 'result'}.json"
-						href="data:text/json;charset=utf-8,{encodeURIComponent(str)}">Download</a
-					>
+					<div class="text-sm mb-2 text-gray-600">
+						<a
+							download="{filename ?? 'result'}.json"
+							href="data:text/json;charset=utf-8,{encodeURIComponent(str)}">Download</a
+						>
+						JSON is too large to be displayed in full.
+					</div>
 				{:else}
 					<Highlight language={json} code={JSON.stringify(result, null, 4).replace(/\\n/g, '\n')} />
 				{/if}

frontend/src/lib/components/flows/content/FlowModuleEarlyStop.svelte

@@ -4,9 +4,9 @@
 	import PropPickerWrapper from '$lib/components/flows/propPicker/PropPickerWrapper.svelte'
 	import type { FlowModule } from '$lib/gen'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import { NEVER_TESTED_THIS_FAR } from '../utils'
 	import type { FlowEditorContext } from '../types'
 	import { getContext } from 'svelte'
+	import { NEVER_TESTED_THIS_FAR } from '../models'
 
 	const { flowStateStore } = getContext<FlowEditorContext>('FlowEditorContext')
 

frontend/src/lib/components/flows/flowStateUtils.ts

@@ -14,12 +14,8 @@ import { getScriptByPath } from '$lib/utils'
 import { get, type Writable } from 'svelte/store'
 import type { FlowModuleState, FlowState } from './flowState'
 import { charsToNumber, numberToChars } from './idUtils'
-import {
-	emptyFlowModuleState,
-	findNextAvailablePath,
-	loadSchemaFromModule,
-	NEVER_TESTED_THIS_FAR
-} from './utils'
+import { emptyFlowModuleState, findNextAvailablePath, loadSchemaFromModule } from './utils'
+import { NEVER_TESTED_THIS_FAR } from './models'
 
 export async function loadFlowModuleState(flowModule: FlowModule): Promise<FlowModuleState> {
 	try {

frontend/src/lib/components/flows/map/FlowErrorHandlerItem.svelte

@@ -6,7 +6,7 @@
 	import { classNames, emptySchema } from '$lib/utils'
 	import type { FlowModuleState } from '../flowState'
 	import Toggle from '$lib/components/Toggle.svelte'
-	import { NEVER_TESTED_THIS_FAR } from '../utils'
+	import { NEVER_TESTED_THIS_FAR } from '../models'
 
 	const { selectedId, flowStateStore, flowStore } =
 		getContext<FlowEditorContext>('FlowEditorContext')

frontend/src/lib/components/flows/models.ts

@@ -0,0 +1 @@
+export const NEVER_TESTED_THIS_FAR = 'never tested this far'

frontend/src/lib/components/flows/utils.ts

@@ -14,6 +14,7 @@ import { emptySchema, sendUserToast } from '$lib/utils'
 import { get } from 'svelte/store'
 import type { FlowModuleState } from './flowState'
 import type { PickableProperties } from './previousResults'
+import { NEVER_TESTED_THIS_FAR } from './models'
 
 function create_context_function_template(eval_string: string, context: Record<string, any>) {
 	return `
@@ -95,15 +96,6 @@ export function cleanExpr(expr: string): string {
 		.filter((x) => x != '' && !x.startsWith(`import `))
 		.join('\n')
 }
-export function getTypeAsString(arg: any): string {
-	if (arg === null) {
-		return 'null'
-	}
-	if (arg === undefined) {
-		return 'undefined'
-	}
-	return typeof arg
-}
 
 export async function loadSchemaFromModule(module: FlowModule): Promise<{
 	input_transforms: Record<string, InputTransform>
@@ -215,8 +207,6 @@ export function codeToStaticTemplate(code?: string): string | undefined {
 	return undefined
 }
 
-export const NEVER_TESTED_THIS_FAR = 'never tested this far'
-
 export function emptyFlowModuleState(): FlowModuleState {
 	return {
 		schema: emptySchema(),

frontend/src/lib/components/propertyPicker/ObjectViewer.svelte

@@ -3,10 +3,9 @@
 
 	import { createEventDispatcher } from 'svelte'
 	import { Badge } from '../common'
-	import { NEVER_TESTED_THIS_FAR } from '../flows/utils'
-	import { getTypeAsString } from '../flows/utils'
 	import { computeKey } from './utils'
 	import WarningMessage from './WarningMessage.svelte'
+	import { NEVER_TESTED_THIS_FAR } from '../flows/models'
 
 	export let json: Object
 	export let level = 0
@@ -31,6 +30,16 @@
 		closeBracket = isArray ? ']' : '}'
 	}
 
+	export function getTypeAsString(arg: any): string {
+		if (arg === null) {
+			return 'null'
+		}
+		if (arg === undefined) {
+			return 'undefined'
+		}
+		return typeof arg
+	}
+
 	function collapse() {
 		collapsed = !collapsed
 	}