feat(web): workflow details page, showing custom node dependencies

web/package.json

@@ -56,6 +56,7 @@
     "react-use-websocket": "^4.5.0",
     "shikiji": "^0.9.3",
     "sonner": "^1.2.4",
+    "swr": "^2.2.4",
     "tailwind-merge": "^2.1.0",
     "tailwindcss-animate": "^1.0.7",
     "uuid": "^9.0.1",

web/src/app/workflows/[workflow_id]/page.tsx

@@ -8,6 +8,7 @@ import {
   MachineSelect,
   RunWorkflowButton,
   VersionSelect,
+  ViewWorkflowDetailsButton,
 } from "@/components/VersionSelect";
 import {
   Card,
@@ -47,6 +48,7 @@ export default async function Page({
               <RunWorkflowButton workflow={workflow} machines={machines} />
               <CreateDeploymentButton workflow={workflow} machines={machines} />
               <CopyWorkflowVersion workflow={workflow} />
+              <ViewWorkflowDetailsButton workflow={workflow} />
             </div>
 
             <VersionDetails workflow={workflow} />

web/src/components/VersionSelect.tsx

@@ -3,6 +3,7 @@
 import { callServerPromise } from "./callServerPromise";
 import { LoadingIcon } from "@/components/LoadingIcon";
 import AutoForm, { AutoFormSubmit } from "@/components/ui/auto-form";
+import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
 import {
   Dialog,
@@ -27,15 +28,25 @@ import {
   SelectTrigger,
   SelectValue,
 } from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import type { workflowAPINodeType } from "@/db/schema";
 import { getInputsFromWorkflow } from "@/lib/getInputsFromWorkflow";
 import { createRun } from "@/server/createRun";
 import { createDeployments } from "@/server/curdDeploments";
 import type { getMachines } from "@/server/curdMachine";
 import type { findFirstTableWithVersion } from "@/server/findFirstTableWithVersion";
-import { Copy, MoreVertical, Play } from "lucide-react";
+import { Copy, ExternalLink, Info, MoreVertical, Play } from "lucide-react";
 import { parseAsInteger, useQueryState } from "next-usequerystate";
 import { useMemo, useState } from "react";
 import { toast } from "sonner";
+import useSWR from "swr";
 import { z } from "zod";
 
 export function VersionSelect({
@@ -329,3 +340,157 @@ export function getWorkflowVersionFromVersionIndex(
 
   return workflow_version;
 }
+
+export default async function fetcher<JSON = unknown>(
+  input: RequestInfo,
+  init?: RequestInit
+): Promise<JSON> {
+  const res = await fetch(input, init);
+  return res.json();
+}
+
+export function ViewWorkflowDetailsButton({
+  workflow,
+}: {
+  workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>;
+}) {
+  const [version] = useQueryState("version", {
+    defaultValue: workflow?.versions[0].version ?? 1,
+    ...parseAsInteger,
+  });
+  const [isLoading, setIsLoading] = useState(false);
+
+  const [open, setOpen] = useState(false);
+
+  const {
+    data,
+    error,
+    isLoading: isNodesIndexLoading,
+  } = useSWR(
+    "https://raw.githubusercontent.com/ltdrdata/ComfyUI-Manager/main/extension-node-map.json",
+    fetcher
+  );
+
+  const groupedByAuxName = useMemo(() => {
+    if (!data) return null;
+
+    console.log(data);
+
+    const workflow_version = getWorkflowVersionFromVersionIndex(
+      workflow,
+      version
+    );
+
+    const api = workflow_version?.workflow_api;
+
+    if (!api) return null;
+
+    const crossCheckedApi = Object.entries(api)
+      .map(([_, value]) => {
+        const classType = value.class_type;
+        const classTypeData = Object.entries(data).find(([_, nodeArray]) =>
+          nodeArray[0].includes(classType)
+        );
+        return classTypeData ? { node: value, classTypeData } : null;
+      })
+      .filter((item) => item !== null);
+
+    console.log(crossCheckedApi);
+
+    const groupedByAuxName = crossCheckedApi.reduce(
+      (acc, data) => {
+        if (!data) return acc;
+
+        const { node, classTypeData } = data;
+        const auxName = classTypeData[1][1].title_aux;
+        console.log(auxName);
+        if (!acc[auxName]) {
+          acc[auxName] = {
+            url: classTypeData[0],
+            node: [],
+          };
+        }
+        acc[auxName].node.push(node);
+        return acc;
+      },
+      {} as Record<
+        string,
+        {
+          node: z.infer<typeof workflowAPINodeType>[];
+          url: string;
+        }
+      >
+    );
+
+    console.log(groupedByAuxName);
+
+    return groupedByAuxName;
+  }, [version, data]);
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild className="appearance-none hover:cursor-pointer">
+        <Button className="gap-2" variant="outline">
+          Details <Info size={14} />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-w-xl">
+        <DialogHeader>
+          <DialogTitle>Workflow Details</DialogTitle>
+          <DialogDescription>
+            View your custom nodes, models, external files used in this workflow
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="overflow-auto max-h-[400px] w-full">
+          <Table>
+            <TableHeader className="bg-background top-0 sticky">
+              <TableRow>
+                <TableHead className="w-[200px]">File</TableHead>
+                <TableHead className="">Output</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {groupedByAuxName &&
+                Object.entries(groupedByAuxName).map(([key, group]) => {
+                  // const filePath
+                  return (
+                    <TableRow key={key}>
+                      <TableCell className="break-words">
+                        <a
+                          href={group.url}
+                          target="_blank"
+                          className="hover:underline"
+                        >
+                          {key}
+                          <ExternalLink
+                            className="inline-block ml-1"
+                            size={12}
+                          />
+                        </a>
+                      </TableCell>
+                      <TableCell className="flex flex-wrap gap-2">
+                        {group.node.map((x) => (
+                          <Badge key={x.class_type} variant="outline">
+                            {x.class_type}
+                          </Badge>
+                        ))}
+                      </TableCell>
+                    </TableRow>
+                  );
+                })}
+            </TableBody>
+          </Table>
+        </div>
+
+        <div className="flex justify-end">
+          <Button className="w-fit" onClick={() => setOpen(false)}>
+            Close
+          </Button>
+        </div>
+        {/* </div> */}
+        {/* <div className="max-h-96 overflow-y-scroll">{view}</div> */}
+      </DialogContent>
+    </Dialog>
+  );
+}

web/src/db/schema.ts

@@ -51,12 +51,12 @@ export const workflowType = z.any();
 //   ),
 // });
 
-export const workflowAPIType = z.record(
-  z.object({
-    inputs: z.record(z.any()),
-    class_type: z.string().optional(),
-  })
-);
+export const workflowAPINodeType = z.object({
+  inputs: z.record(z.any()),
+  class_type: z.string().optional(),
+});
+
+export const workflowAPIType = z.record(workflowAPINodeType);
 
 export const workflowVersionTable = dbSchema.table("workflow_versions", {
   workflow_id: uuid("workflow_id")