starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-09-07 00:01:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: optimize object viewer to handle large data

Browse Source
This commit is contained in:
Ruben Fiszel
2023-06-04 01:45:35 +02:00
parent f476904af0
commit af17b15941
1 changed files with 81 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/propertyPicker/ObjectViewer.svelte
+81 -84
View File
@@ -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"