From af17b159410c2c4c075dabc140f4aad61dad8949 Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Sun, 4 Jun 2023 01:45:35 +0200
Subject: [PATCH] fix: optimize object viewer to handle large data

---
 .../propertyPicker/ObjectViewer.svelte        | 165 +++++++++---------
 1 file changed, 81 insertions(+), 84 deletions(-)

diff --git a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
index 5e760c91f6..9a89332e34 100644
--- a/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+++ b/frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
@@ -11,24 +11,17 @@
 	export let level = 0
 	export let currentPath: string = ''
 	export let pureViewer = false
-	export let collapsed = level == 3 || Array.isArray(json)
+	export let collapsed = level % 3 == 0 || Array.isArray(json)
 	export let rawKey = false
 	export let topBrackets = false
 	export let topLevelNode = false
 	export let allowCopy = true
 
 	const collapsedSymbol = '...'
-	let keys: string | any[]
-	let isArray: boolean
-	let openBracket: string
-	let closeBracket: string
-
-	$: {
-		keys = getTypeAsString(json) === 'object' ? Object.keys(json) : []
-		isArray = Array.isArray(json)
-		openBracket = isArray ? '[' : '{'
-		closeBracket = isArray ? ']' : '}'
-	}
+	$: keys = getTypeAsString(json) === 'object' ? Object.keys(json) : []
+	$: isArray = Array.isArray(json)
+	$: openBracket = isArray ? '[' : '{'
+	$: closeBracket = isArray ? ']' : '}'
 
 	export function getTypeAsString(arg: any): string {
 		if (arg === null) {
@@ -53,82 +46,86 @@
 		dispatch('select', rawKey ? key : computeKey(key, isArray, currentPath))
 	}
 
-	let keyLimit = 100
+	$: keyLimit = isArray ? 1 : 100
 </script>
 
 {#if keys.length > 0}
-	<span class:hidden={collapsed}>
-		{#if level != 0}
-			<!-- svelte-ignore a11y-click-events-have-key-events -->
-			<span
-				class="cursor-pointer border border-gray-300 hover:bg-gray-200 px-1 rounded"
-				on:click={collapse}
-			>
-				-
-			</span>
-		{/if}
-		{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
-		<ul
-			class={`w-full pl-2 ${
-				level === 0 ? 'border-none' : 'border-l border-dotted border-gray-200'
-			}`}
-		>
-			{#each keys.length > keyLimit ? keys.slice(0, keyLimit) : keys as key, index (key)}
-				<li>
-					<button on:click={() => selectProp(key, key)} class="whitespace-nowrap">
-						{#if topLevelNode}
-							<Badge baseClass="border border-blue-600" color="indigo">{key}</Badge>
-						{:else}
-							<span
-								class="key {pureViewer
-									? 'cursor-auto'
-									: 'border border-gray-300'} font-semibold rounded px-1 hover:bg-blue-100 text-2xs text-gray-800"
-							>
-								{!isArray ? key : index}</span
-							>
-						{/if}:
-					</button>
-
-					{#if getTypeAsString(json[key]) === 'object'}
-						<svelte:self
-							json={json[key]}
-							level={level + 1}
-							currentPath={computeKey(key, isArray, currentPath)}
-							{pureViewer}
-							on:select
-						/>
-					{:else}
-						<button
-							class="val {pureViewer
-								? 'cursor-auto'
-								: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
-							on:click={() => selectProp(key, json[key])}
-						>
-							{#if json[key] === NEVER_TESTED_THIS_FAR}
-								<WarningMessage />
-							{:else if json[key] == undefined}
-								<span class="text-2xs">undefined</span>
-							{:else if json[key] == null}
-								<span class="text-2xs">null</span>
-							{:else if typeof json[key] == 'string'}
-								<span title={json[key]} class="text-2xs">"{truncate(json[key], 200)}"</span>
-							{:else}
-								<span title={JSON.stringify(json[key])} class="text-2xs">
-									{truncate(JSON.stringify(json[key]), 200)}
-								</span>
-							{/if}
-						</button>
-					{/if}
-				</li>
-			{/each}
-			{#if keys.length > keyLimit}
-				<button on:click={() => (keyLimit += 100)} class="text-xs py-2 text-blue-600">
-					{keyLimit}/{keys.length}: Load 100 more...
-				</button>
+	{#if !collapsed}
+		<span>
+			{#if level != 0}
+				<!-- svelte-ignore a11y-click-events-have-key-events -->
+				<span
+					class="cursor-pointer border border-gray-300 hover:bg-gray-200 px-1 rounded"
+					on:click={collapse}
+				>
+					-
+				</span>
 			{/if}
-		</ul>
-		{#if level == 0 && topBrackets}<span class="h-0">{closeBracket}</span>{/if}
-	</span>
+			{#if level == 0 && topBrackets}<span class="h-0">{openBracket}</span>{/if}
+			<ul
+				class={`w-full pl-2 ${
+					level === 0 ? 'border-none' : 'border-l border-dotted border-gray-200'
+				}`}
+			>
+				{#each keys.length > keyLimit ? keys.slice(0, keyLimit) : keys as key, index (key)}
+					<li>
+						<button on:click={() => selectProp(key, key)} class="whitespace-nowrap">
+							{#if topLevelNode}
+								<Badge baseClass="border border-blue-600" color="indigo">{key}</Badge>
+							{:else}
+								<span
+									class="key {pureViewer
+										? 'cursor-auto'
+										: 'border border-gray-300'} font-semibold rounded px-1 hover:bg-blue-100 text-2xs text-gray-800"
+								>
+									{!isArray ? key : index}</span
+								>
+							{/if}:
+						</button>
+
+						{#if getTypeAsString(json[key]) === 'object'}
+							<svelte:self
+								json={json[key]}
+								level={level + 1}
+								currentPath={computeKey(key, isArray, currentPath)}
+								{pureViewer}
+								on:select
+							/>
+						{:else}
+							<button
+								class="val {pureViewer
+									? 'cursor-auto'
+									: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
+								on:click={() => selectProp(key, json[key])}
+							>
+								{#if json[key] === NEVER_TESTED_THIS_FAR}
+									<WarningMessage />
+								{:else if json[key] == undefined}
+									<span class="text-2xs">undefined</span>
+								{:else if json[key] == null}
+									<span class="text-2xs">null</span>
+								{:else if typeof json[key] == 'string'}
+									<span title={json[key]} class="text-2xs">"{truncate(json[key], 200)}"</span>
+								{:else}
+									<span title={JSON.stringify(json[key])} class="text-2xs">
+										{truncate(JSON.stringify(json[key]), 200)}
+									</span>
+								{/if}
+							</button>
+						{/if}
+					</li>
+				{/each}
+				{#if keys.length > keyLimit}
+					{@const increment = Math.min(100, keys.length - keyLimit)}
+					<button on:click={() => (keyLimit += increment)} class="text-xs py-2 text-blue-600">
+						{keyLimit}/{keys.length}: Load {increment} more...
+					</button>
+				{/if}
+			</ul>
+			{#if level == 0 && topBrackets}<span class="h-0">{closeBracket}</span>{/if}
+		</span>
+	{/if}
+
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<span
 		class="border border-blue-600 rounded px-1 cursor-pointer hover:bg-gray-200"