Skip to content

Commit

Permalink
fix: optimize object viewer to handle large data
Browse files Browse the repository at this point in the history
  • Loading branch information
@rubenfiszel
rubenfiszel committed Jun 3, 2023
1 parent ce94426 commit ae5b11a
Showing 1 changed file with 76 additions and 79 deletions.
155 changes: 76 additions & 79 deletions frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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}
{#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}
{#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'
}`}
>
-
</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>
{#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}
<span
class="key {pureViewer
<button
class="val {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
: ''} rounded px-1 hover:bg-blue-100 {getTypeAsString(json[key])}"
on:click={() => selectProp(key, json[key])}
>
{/if}:
{#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}

{#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}
</ul>
{#if level == 0 && topBrackets}<span class="h-0">{closeBracket}</span>{/if}
</span>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span
class="border border-blue-600 rounded px-1 cursor-pointer hover:bg-gray-200"
Expand Down

0 comments on commit ae5b11a

Please sign in to comment.