neuro_llc/ComfyBox
2
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Improve error list

Browse Source
This commit is contained in:
space-nuko
2023-05-28 20:39:21 -05:00
parent fe736232a9
commit ce6f3b1273
1 changed files with 83 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/lib/components/ComfyGraphErrorList.svelte
View File

@@ -68,88 +68,91 @@
<div class="error-list-header"> <div class="error-list-header">
<button class="error-list-close" on:click={closeList}>✕</button> <button class="error-list-close" on:click={closeList}>✕</button>
</div> </div>
{#each Object.entries(errors.errorsByID) as [nodeID, nodeErrors]} <div class="error-list-scroll-container">
{@const first = nodeErrors[0]} {#each Object.entries(errors.errorsByID) as [nodeID, nodeErrors], i}
{@const parent = getParentNode(first)} {@const first = nodeErrors[0]}
<div class="error-group"> {@const parent = getParentNode(first)}
<div class="error-node-details"> {@const last = i === Object.keys(errors.errorsByID).length - 1}
<span class="error-node-type">{first.comfyNodeType}</span> <div class="error-group">
{#if parent} <div class="error-node-details">
<span class="error-node-parent">({parent.title})</span> <span class="error-node-type">{first.comfyNodeType}</span>
{/if} {#if parent}
</div> <span class="error-node-parent">({parent.title})</span>
<div class="error-entries"> {/if}
{#each nodeErrors as error} </div>
{@const isExecutionError = error.errorType === "execution"} <div class="error-entries" class:last>
<div class="error-entry"> {#each nodeErrors as error}
<div> {@const isExecutionError = error.errorType === "execution"}
<div class="error-details"> <div class="error-entry">
<button class="jump-to-error" class:execution-error={isExecutionError} on:click={() => jumpToError(error)}><span>⮎</span></button> <div>
<div class="error-details-wrapper"> <div class="error-details">
<span class="error-message" class:execution-error={isExecutionError}>{error.message}</span> <button class="jump-to-error" class:execution-error={isExecutionError} on:click={() => jumpToError(error)}><span>⮎</span></button>
{#if error.exceptionType} <div class="error-details-wrapper">
<span>({error.exceptionType})</span> <span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
{/if} {#if error.exceptionType}
{#if error.exceptionMessage && !isExecutionError} <span>({error.exceptionType})</span>
<div style:text-decoration="underline">{error.exceptionMessage}</div> {/if}
{/if} {#if error.exceptionMessage && !isExecutionError}
{#if error.input} <div style:text-decoration="underline">{error.exceptionMessage}</div>
<div class="error-input"> {/if}
<span>Input: <b>{error.input.name}</b></span> {#if error.input}
{#if error.input.config} <div class="error-input">
<span>({getInputTypeName(error.input.config[0])})</span> <span>Input: <b>{error.input.name}</b></span>
{#if error.input.config}
<span>({getInputTypeName(error.input.config[0])})</span>
{/if}
</div>
{#if canJumpToDisconnectedInput(error)}
<div style:display="flex" style:flex-direction="row">
<button class="jump-to-error locate" on:click={() => jumpToDisconnectedInput(error)}><span>⮎</span></button>
<span>Find disconnected input</span>
</div>
{/if} {/if}
</div>
{#if canJumpToDisconnectedInput(error)}
<div style:display="flex" style:flex-direction="row">
<button class="jump-to-error locate" on:click={() => jumpToDisconnectedInput(error)}><span>⮎</span></button>
<span>Find disconnected input</span>
</div>
{/if}
{#if error.input.receivedValue} {#if error.input.receivedValue}
<div> <div>
<span>Received value: <b>{error.input.receivedValue}</b></span> <span>Received value: <b>{error.input.receivedValue}</b></span>
</div> </div>
{/if} {/if}
{#if error.input.receivedType} {#if error.input.receivedType}
<div> <div>
<span>Received type: <b>{error.input.receivedType}</b></span> <span>Received type: <b>{error.input.receivedType}</b></span>
</div> </div>
{/if} {/if}
{#if error.input.config} {#if error.input.config}
<div class="error-traceback-wrapper"> <div class="error-traceback-wrapper">
<Accordion label="Input Config" open={true}> <Accordion label="Input Config" open={true}>
<div class="error-traceback"> <div class="error-traceback">
<div class="error-traceback-contents"> <div class="error-traceback-contents">
<JsonView json={error.input.config[1]} /> <JsonView json={error.input.config[1]} />
</div>
</div> </div>
</div> </Accordion>
</Accordion> </div>
</div> {/if}
{/if} {/if}
{/if} </div>
</div> </div>
</div> </div>
</div> {#if error.traceback}
{#if error.traceback} <div class="error-traceback-wrapper">
<div class="error-traceback-wrapper"> <Accordion label="Traceback" open={false}>
<Accordion label="Traceback" open={false}> <div class="error-traceback">
<div class="error-traceback"> <div class="error-traceback-contents">
<div class="error-traceback-contents"> {#each error.traceback as line}
{#each error.traceback as line} <pre>{line}</pre>
<pre>{line}</pre> {/each}
{/each} </div>
</div> </div>
</div> </Accordion>
</Accordion> </div>
</div> {/if}
{/if} </div>
</div> {/each}
{/each} </div>
</div> </div>
</div> {/each}
{/each} </div>
</div> </div>
<style lang="scss"> <style lang="scss">
@@ -158,7 +161,6 @@
width: 30%; width: 30%;
height: 70%; height: 70%;
margin: 1.0rem; margin: 1.0rem;
overflow-y: auto;
position: absolute; position: absolute;
right: 0; right: 0;
bottom: 0; bottom: 0;
@@ -186,6 +188,11 @@
} }
} }
.error-list-scroll-container {
height: calc(100% - 24px);
overflow-y: auto;
}
.error-node-details { .error-node-details {
font-size: 14pt; font-size: 14pt;
color: #ddd; color: #ddd;
@@ -200,7 +207,7 @@
font-weight: initial; font-weight: initial;
} }
.error-entries:last-child { .error-entries:not(.last):last-child {
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
} }