From 88d99d2bcb19a95856091b69f50f21024cd7f629 Mon Sep 17 00:00:00 2001
From: space-nuko <24979496+space-nuko@users.noreply.github.com>
Date: Sat, 27 May 2023 09:35:19 -0500
Subject: [PATCH] Improve

---
 src/lib/components/ComfyGraphErrorList.svelte | 41 ++++++++++++++++---
 1 file changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ComfyGraphErrorList.svelte b/src/lib/components/ComfyGraphErrorList.svelte
index fdb6cc8..ad68d26 100644
--- a/src/lib/components/ComfyGraphErrorList.svelte
+++ b/src/lib/components/ComfyGraphErrorList.svelte
@@ -4,8 +4,9 @@
  import Accordion from "./gradio/app/Accordion.svelte";
  import uiState from '$lib/stores/uiState';
  import type { ComfyNodeDefInputType } from "$lib/ComfyNodeDef";
-	import type { INodeInputSlot, LGraphNode, Subgraph } from "@litegraph-ts/core";
-	import { UpstreamNodeLocator } from "./ComfyPromptSerializer";
+ import type { INodeInputSlot, LGraphNode, Subgraph } from "@litegraph-ts/core";
+ import { UpstreamNodeLocator } from "./ComfyPromptSerializer";
+ import JsonView from "./JsonView.svelte";
 
  export let app: ComfyApp;
  export let errors: ComfyGraphErrors;
@@ -84,7 +85,7 @@
                         <div>
                             <div class="error-details">
                                 <button class="jump-to-error" class:execution-error={isExecutionError} on:click={() => jumpToError(error)}><span>⮎</span></button>
-                                <div>
+                                <div class="error-details-wrapper">
                                     <span class="error-message" class:execution-error={isExecutionError}>{error.message}</span>
                                     {#if error.exceptionType}
                                         <span>({error.exceptionType})</span>
@@ -94,7 +95,7 @@
                                     {/if}
                                     {#if error.input}
                                         <div class="error-input">
-                                            <span>Input: `{error.input.name}`</span>
+                                            <span>Input: <b>{error.input.name}</b></span>
                                             {#if error.input.config}
                                                 <span>({getInputTypeName(error.input.config[0])})</span>
                                             {/if}
@@ -105,6 +106,28 @@
                                                 <span>Find disconnected input</span>
                                             </div>
                                         {/if}
+
+                                        {#if error.input.receivedValue}
+                                            <div>
+                                                <span>Received value: <b>{error.input.receivedValue}</b></span>
+                                            </div>
+                                        {/if}
+                                        {#if error.input.receivedType}
+                                            <div>
+                                                <span>Received type: <b>{error.input.receivedType}</b></span>
+                                            </div>
+                                        {/if}
+                                        {#if error.input.config}
+                                            <div class="error-traceback-wrapper">
+                                                <Accordion label="Input Config" open={true}>
+                                                    <div class="error-traceback">
+                                                        <div class="error-traceback-contents">
+                                                            <JsonView json={error.input.config[1]} />
+                                                        </div>
+                                                    </div>
+                                                </Accordion>
+                                            </div>
+                                        {/if}
                                     {/if}
                                 </div>
                             </div>
@@ -188,6 +211,7 @@
  }
 
  .error-details {
+     width: 100%;
      display: flex;
      flex-direction: row;
      gap: var(--spacing-md);
@@ -202,6 +226,10 @@
      }
  }
 
+ .error-details-wrapper {
+     flex: 5 1 0%;
+ }
+
  .error-message {
      color: #F66;
      &.execution-error {
@@ -246,19 +274,20 @@
  }
 
  .error-traceback-wrapper {
+     width: 100%;
      margin-top: 1.0rem;
      padding: 0.5rem;
      border: 1px solid #888;
 
      .error-traceback {
-         font-size: 11pt;
+         font-size: 10pt;
          overflow: auto;
          white-space: nowrap;
          background: #333;
 
          .error-traceback-contents {
              width: 100%;
-             font-family: monospace;
+             font-family: monospace !important;
              padding: 1.0rem;
 
              > div {