feat: add update failed display when the graph execution error

routes.py

@@ -162,6 +162,10 @@ async def send_json_override(self, event, data, sid=None):
     if event == 'executing' and data.get('node') is None:
         update_run(prompt_id, Status.SUCCESS)
 
+    if event == 'execution_error':
+        update_run(prompt_id, Status.FAILED)
+        asyncio.create_task(update_run_with_output(prompt_id, data))
+
     if event == 'executed' and 'node' in data and 'output' in data:
         asyncio.create_task(update_run_with_output(prompt_id, data.get('output')))
         # update_run_with_output(prompt_id, data.get('output'))
@@ -178,6 +182,11 @@ def update_run(prompt_id, status: Status):
         return
 
     if ('status' not in prompt_metadata[prompt_id] or prompt_metadata[prompt_id]['status'] != status):
+
+        # when the status is already failed, we don't want to update it to success
+        if ('status' in prompt_metadata[prompt_id] and prompt_metadata[prompt_id]['status'] == Status.FAILED):
+            return
+
         status_endpoint = prompt_metadata[prompt_id]['status_endpoint']
         body = {
             "run_id": prompt_id,

web/src/app/globals.css

@@ -75,7 +75,7 @@
 
 .shiki {
   /* @apply rounded-lg p-2 overflow-x-scroll */
-  @apply rounded-lg p-2 overflow-hidden
+  @apply  p-2 max-w-full overflow-auto w-full
 }
  
 @layer base {

web/src/components/CodeBlock.tsx

@@ -8,12 +8,12 @@ export async function CodeBlock(props: { code: string; lang: Lang }) {
   });
 
   return (
-    <div className="relative w-full max-w-full text-sm">
+    <div className="relative w-full text-sm">
       {/* max-w-[calc(32rem-1.5rem-1.5rem)] */}
       {/* <div className=""> */}
       <p
         // tabIndex={1}
-        className="[&>pre]:p-4 rounded-sm "
+        className="[&>pre]:p-4 rounded-lg max-h-96 overflow-auto w-full"
         style={{
           overflowWrap: "break-word",
         }}

web/src/components/LiveStatus.tsx

@@ -0,0 +1,41 @@
+"use client";
+
+import { useStore } from "@/components/MachinesWS";
+import { StatusBadge } from "@/components/StatusBadge";
+import { TableCell } from "@/components/ui/table";
+import { type findAllRuns } from "@/server/findAllRuns";
+
+export function LiveStatus({
+  run,
+}: {
+  run: Awaited<ReturnType<typeof findAllRuns>>[0];
+}) {
+  const data = useStore(
+    (state) =>
+      state.data
+        .filter((x) => x.id === run.id)
+        .sort((a, b) => b.timestamp - a.timestamp)?.[0]
+  );
+
+  let status = run.status;
+
+  // const [view, setView] = useState<any>();
+  if (data?.json.event == "executing" && data.json.data.node == undefined) {
+    status = "success";
+  } else if (data?.json.event == "executing") {
+    status = "running";
+  }
+
+  return (
+    <>
+      <TableCell>
+        {data && status != "success"
+          ? `${data.json.event} - ${data.json.data.node}`
+          : "-"}
+      </TableCell>
+      <TableCell className="text-right">
+        <StatusBadge status={status} />
+      </TableCell>
+    </>
+  );
+}

web/src/components/RunDisplay.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { RunOutputs } from "./RunOutputs";
+import { LiveStatus } from "./LiveStatus";
-import { useStore } from "@/components/MachinesWS";
-import { StatusBadge } from "@/components/StatusBadge";
 import {
   Dialog,
   DialogContent,
@@ -14,52 +12,44 @@ import {
 import { TableCell, TableRow } from "@/components/ui/table";
 import { getRelativeTime } from "@/lib/getRelativeTime";
 import { type findAllRuns } from "@/server/findAllRuns";
+import { getRunsOutputDisplay } from "@/server/getRunsOutput";
+import { useState } from "react";
 
 export function RunDisplay({
   run,
 }: {
   run: Awaited<ReturnType<typeof findAllRuns>>[0];
 }) {
-  const data = useStore(
+  const [view, setView] = useState<any>();
-    (state) =>
-      state.data
-        .filter((x) => x.id === run.id)
-        .sort((a, b) => b.timestamp - a.timestamp)?.[0]
-  );
-
-  let status = run.status;
-
-  if (data?.json.event == "executing" && data.json.data.node == undefined) {
-    status = "success";
-  } else if (data?.json.event == "executing") {
-    status = "running";
-  }
-
   return (
     <Dialog>
-      <DialogTrigger asChild className="appearance-none hover:cursor-pointer">
+      <DialogTrigger
+        asChild
+        className="appearance-none hover:cursor-pointer"
+        onClick={async () => {
+          if (view) return;
+          const _view = await getRunsOutputDisplay(run.id);
+          setView(_view);
+        }}
+      >
         <TableRow>
           <TableCell>{run.version?.version}</TableCell>
           <TableCell className="font-medium">{run.machine?.name}</TableCell>
           <TableCell>{getRelativeTime(run.created_at)}</TableCell>
-          <TableCell>
+          <LiveStatus run={run} />
-            {data && status != "success"
-              ? `${data.json.event} - ${data.json.data.node}`
-              : "-"}
-          </TableCell>
-          <TableCell className="text-right">
-            <StatusBadge status={status} />
-          </TableCell>
         </TableRow>
       </DialogTrigger>
-      <DialogContent>
+      <DialogContent className="max-w-3xl">
         <DialogHeader>
           <DialogTitle>Run outputs</DialogTitle>
           <DialogDescription>
             You can view your run&apos;s outputs here
           </DialogDescription>
         </DialogHeader>
+        {/* <Suspense>
           <RunOutputs run_id={run.id} />
+        </Suspense> */}
+        {view}
       </DialogContent>
     </Dialog>
   );

web/src/components/RunOutputs.tsx

@@ -1,7 +1,5 @@
-"use client";
-
 import { OutputRender } from "./RunDisplay";
-import { callServerPromise } from "@/components/MachineList";
+import { CodeBlock } from "@/components/CodeBlock";
 import {
   Table,
   TableBody,
@@ -11,22 +9,24 @@ import {
   TableRow,
 } from "@/components/ui/table";
 import { getRunsOutput } from "@/server/getRunsOutput";
-import { useEffect, useState } from "react";
 
-export function RunOutputs({ run_id }: { run_id: string }) {
+export async function RunOutputs({ run_id }: { run_id: string }) {
-  const [outputs, setOutputs] =
+  const outputs = await getRunsOutput(run_id);
-    useState<Awaited<ReturnType<typeof getRunsOutput>>>();
+  console.log("Getting runs out put");
 
-  useEffect(() => {
+  // const [outputs, setOutputs] =
-    if (!run_id) return;
+  //   useState<Awaited<ReturnType<typeof getRunsOutput>>>();
-    // fetch(`/api/run?run_id=${run_id}`)
+
-    //   .then((x) => x.json())
+  // useEffect(() => {
-    //   .then((x) => setOutputs(x));
+  //   if (!run_id) return;
-    callServerPromise(getRunsOutput(run_id).then((x) => setOutputs(x)));
+  //   // fetch(`/api/run?run_id=${run_id}`)
-  }, [run_id]);
+  //   //   .then((x) => x.json())
+  //   //   .then((x) => setOutputs(x));
+  //   callServerPromise(getRunsOutput(run_id).then((x) => setOutputs(x)));
+  // }, [run_id]);
 
   return (
-    <Table>
+    <Table className="table-fixed">
       {/* <TableCaption>A list of your recent runs.</TableCaption> */}
       <TableHeader className="bg-background top-0 sticky">
         <TableRow>
@@ -36,11 +36,25 @@ export function RunOutputs({ run_id }: { run_id: string }) {
       </TableHeader>
       <TableBody>
         {outputs?.map((run) => {
-          const fileName = run.data.images[0].filename;
+          const fileName = run.data.images?.[0].filename;
+
+          if (!fileName)
+            return (
+              <TableRow key={run.id}>
+                <TableCell>Output</TableCell>
+                <TableCell className="max-h-44">
+                  <CodeBlock
+                    code={JSON.stringify(run.data, null, 2)}
+                    lang="json"
+                  />
+                </TableCell>
+              </TableRow>
+            );
+
           // const filePath
           return (
             <TableRow key={run.id}>
-              <TableCell>{fileName}</TableCell>
+              <TableCell className="break-words">{fileName}</TableCell>
               <TableCell>
                 <OutputRender run_id={run_id} filename={fileName} />
               </TableCell>

web/src/server/createRun.ts

@@ -60,6 +60,8 @@ export async function createRun(
     }
   }
 
+  console.log(workflow_api);
+
   // Sending to comfyui
   const result = await fetch(comfyui_endpoint, {
     method: "POST",

web/src/server/getRunsOutput.tsx

@@ -1,9 +1,14 @@
 "use server";
 
+import { RunOutputs } from "@/components/RunOutputs";
 import { db } from "@/db/db";
 import { workflowRunOutputs, workflowRunsTable } from "@/db/schema";
 import { eq } from "drizzle-orm";
 
+export async function getRunsOutputDisplay(run_id: string) {
+  return <RunOutputs run_id={run_id} />;
+}
+
 export async function getRunsOutput(run_id: string) {
   // throw new Error("Not implemented");
   return await db