feat: add custom nodes selectors

web/package.json

@@ -47,6 +47,7 @@
     "@sindresorhus/slugify": "^2.2.1",
     "@tailwindcss/typography": "^0.5.10",
     "@tanstack/react-table": "^8.10.7",
+    "@tanstack/react-virtual": "beta",
     "@types/jsonwebtoken": "^9.0.5",
     "@types/react-highlight-words": "^0.16.7",
     "@types/swagger-ui-react": "^4.18.3",

web/src/components/InsertModal.tsx

@@ -17,6 +17,7 @@ import {
   TooltipContent,
   TooltipTrigger,
 } from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 import * as React from "react";
 import { useState } from "react";
 import type { UnknownKeysParam, ZodObject, ZodRawShape, z } from "zod";
@@ -30,6 +31,7 @@ export function InsertModal<
   disabled?: boolean;
   title: string;
   description: string;
+  dialogClassName?: string;
   serverAction: (data: z.infer<Z>) => Promise<unknown>;
   formSchema: Z;
   fieldConfig?: FieldConfig<z.infer<Z>>;
@@ -70,7 +72,7 @@ export function InsertModal<
         </Button>
       )}
       {/* </DialogTrigger> */}
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className={cn("sm:max-w-[425px]", props.dialogClassName)}>
         <DialogHeader>
           <DialogTitle>{props.title}</DialogTitle>
           <DialogDescription>{props.description}</DialogDescription>
@@ -108,6 +110,7 @@ export function UpdateModal<
   setOpen: (open: boolean) => void;
   title: string;
   description: string;
+  dialogClassName?: string;
   data: z.infer<Z>;
   serverAction: (
     data: z.infer<Z> & {
@@ -130,7 +133,7 @@ export function UpdateModal<
       {/* <DialogTrigger asChild>
         <DropdownMenuItem>{props.title}</DropdownMenuItem>
       </DialogTrigger> */}
-      <DialogContent className="sm:max-w-[425px]">
+      <DialogContent className={cn("sm:max-w-[425px]", props.dialogClassName)}>
         <DialogHeader>
           <DialogTitle>{props.title}</DialogTitle>
           <DialogDescription>{props.description}</DialogDescription>

web/src/components/MachineList.tsx

@@ -214,6 +214,7 @@ export const columns: ColumnDef<Machine>[] = [
           </DropdownMenuContent>
           {machine.type === "comfy-deploy-serverless" ? (
             <UpdateModal
+              dialogClassName="sm:max-w-[600px]"
               data={machine}
               open={open}
               setOpen={setOpen}
@@ -303,6 +304,7 @@ export function MachineList({ data }: { data: Machine[] }) {
         />
         <div className="ml-auto flex gap-2">
           <InsertModal
+            dialogClassName="sm:max-w-[600px]"
             disabled={data.some(
               (machine) => machine.type === "comfy-deploy-serverless"
             )}

web/src/components/VersionSelect.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { callServerPromise } from "./callServerPromise";
+import fetcher from "./fetcher";
 import { LoadingIcon } from "@/components/LoadingIcon";
 import AutoForm, { AutoFormSubmit } from "@/components/ui/auto-form";
 import { Badge } from "@/components/ui/badge";
@@ -361,14 +362,6 @@ 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,
 }: {

web/src/components/custom-form/ModelPickerView.tsx

@@ -112,7 +112,7 @@ export function ModelPickerView({
         </PopoverTrigger>
         <PopoverContent className="w-[375px] p-0" side="top">
           <Command>
-            <CommandInput placeholder="Search framework..." className="h-9" />
+            <CommandInput placeholder="Search models..." className="h-9" />
             <CommandEmpty>No framework found.</CommandEmpty>
             <CommandList className="pointer-events-auto">
               <CommandGroup>
@@ -144,7 +144,7 @@ export function ModelPickerView({
         </PopoverContent>
       </Popover>
       {field.value && (
-        <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[360px] rounded-lg mt-2">
+        <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg mt-2">
           <div className="max-h-[200px]">
             <pre className="p-2 rounded-md text-xs ">
               {JSON.stringify(field.value, null, 2)}

web/src/components/custom-form/SnapshotPickerView.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import type { AutoFormInputComponentProps } from "../ui/auto-form/types";
+import fetcher from "@/components/fetcher";
 import { Button } from "@/components/ui/button";
 import {
   Command,
@@ -8,6 +9,7 @@ import {
   CommandGroup,
   CommandInput,
   CommandItem,
+  CommandList,
 } from "@/components/ui/command";
 import {
   Popover,
@@ -19,9 +21,30 @@ import { cn } from "@/lib/utils";
 import { findAllDeployments } from "@/server/curdDeploments";
 import { Check, ChevronsUpDown } from "lucide-react";
 import * as React from "react";
+import useSWR from "swr";
 
 export function SnapshotPickerView({
   field,
+}: Pick<AutoFormInputComponentProps, "field">) {
+  return (
+    <div className="flex gap-2 flex-col">
+      <SnapshotPresetPicker field={field} />
+      <CustomNodesSelector field={field} />
+      {field.value && (
+        <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[500px] rounded-lg">
+          <div className="max-h-[200px] w-full">
+            <pre className="p-2 rounded-md text-xs w-full">
+              {JSON.stringify(field.value, null, 2)}
+            </pre>
+          </div>
+        </ScrollArea>
+      )}
+    </div>
+  );
+}
+
+function SnapshotPresetPicker({
+  field,
 }: Pick<AutoFormInputComponentProps, "field">) {
   const [open, setOpen] = React.useState(false);
   const [selected, setSelected] = React.useState<string | null>(null);
@@ -59,67 +82,168 @@ export function SnapshotPickerView({
   }, []);
 
   function findItem(value: string) {
-    // console.log(frameworks);
-
     return frameworks?.find((item) => item.id === value);
   }
 
   return (
-    <div className="">
+    <Popover open={open} onOpenChange={setOpen}>
-      <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
-        <PopoverTrigger asChild>
+        <Button
-          <Button
+          variant="outline"
-            variant="outline"
+          role="combobox"
-            role="combobox"
+          aria-expanded={open}
-            aria-expanded={open}
+          className="w-full justify-between flex"
-            className="w-full justify-between flex"
+        >
-          >
+          {selected ? findItem(selected)?.label : "Select snapshot..."}
-            {selected ? findItem(selected)?.label : "Select snapshot..."}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
-            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
-          </Button>
+      </PopoverTrigger>
-        </PopoverTrigger>
+      <PopoverContent className="w-[375px] p-0">
-        <PopoverContent className="w-[375px] p-0">
+        <Command>
-          <Command>
+          <CommandInput placeholder="Search framework..." className="h-9" />
-            <CommandInput placeholder="Search framework..." className="h-9" />
+          <CommandEmpty>No framework found.</CommandEmpty>
-            <CommandEmpty>No framework found.</CommandEmpty>
+          <CommandGroup>
-            <CommandGroup>
+            {frameworks?.map((framework) => (
-              {frameworks?.map((framework) => (
+              <CommandItem
-                <CommandItem
+                key={framework.id}
-                  key={framework.id}
+                value={framework.id}
-                  value={framework.id}
+                onSelect={(currentValue) => {
-                  onSelect={(currentValue) => {
+                  setSelected(currentValue);
-                    setSelected(currentValue);
+                  const json =
-                    const json =
+                    frameworks?.find((item) => item.id === currentValue)
-                      frameworks?.find((item) => item.id === currentValue)
+                      ?.value ?? null;
-                        ?.value ?? null;
+                  field.onChange(json ? JSON.parse(json) : null);
-                    field.onChange(json ? JSON.parse(json) : null);
+                  setOpen(false);
-                    setOpen(false);
+                }}
-                  }}
+              >
-                >
+                {framework.label}
-                  {framework.label}
+                <Check
-                  <Check
+                  className={cn(
-                    className={cn(
+                    "ml-auto h-4 w-4",
-                      "ml-auto h-4 w-4",
+                    field.value === framework.value
-                      field.value === framework.value
+                      ? "opacity-100"
-                        ? "opacity-100"
+                      : "opacity-0"
-                        : "opacity-0"
+                  )}
-                    )}
+                />
-                  />
+              </CommandItem>
-                </CommandItem>
+            ))}
-              ))}
+          </CommandGroup>
-            </CommandGroup>
+        </Command>
-          </Command>
+      </PopoverContent>
-        </PopoverContent>
+    </Popover>
-      </Popover>
+  );
-      {field.value && (
+}
-        <ScrollArea className="w-full bg-gray-100 mx-auto max-w-[360px] rounded-lg mt-2">
+
-          <div className="max-h-[200px]">
+type CustomNodeList = {
-            <pre className="p-2 rounded-md text-xs ">
+  custom_nodes: {
-              {JSON.stringify(field.value, null, 2)}
+    author: string;
-            </pre>
+    title: string;
-          </div>
+    reference: string;
-        </ScrollArea>
+    files: string[];
-      )}
+    install_type: string;
-    </div>
+    description: string;
+  }[];
+};
+
+function CustomNodesSelector({
+  field,
+}: Pick<AutoFormInputComponentProps, "field">) {
+  const [open, setOpen] = React.useState(false);
+
+  const customNodeList =
+    field.value.git_custom_nodes ??
+    ({} as Record<
+      string,
+      {
+        hash: string;
+        disabled: boolean;
+      }
+    >);
+
+  const { data, error, isLoading } = useSWR<CustomNodeList>(
+    "https://raw.githubusercontent.com/ltdrdata/ComfyUI-Manager/main/custom-node-list.json",
+    fetcher
+  );
+
+  const keys = React.useMemo(
+    () => Object.keys(customNodeList),
+    [customNodeList, data]
+  );
+
+  function findItem(value: string) {
+    // console.log(keys, value.toLowerCase());
+    const included = keys.includes(value.toLowerCase());
+    return included;
+  }
+
+  return (
+    <Popover open={open} onOpenChange={setOpen}>
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-full justify-between flex"
+        >
+          Select custom nodes... {keys.length} selected
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[375px] p-0" side="bottom">
+        <Command>
+          <CommandInput placeholder="Search custom nodes..." className="h-9" />
+          <CommandEmpty>No custom nodes found.</CommandEmpty>
+          <CommandList>
+            <CommandGroup>
+              {data &&
+                data.custom_nodes?.map((framework, index) => (
+                  <CommandItem
+                    key={index}
+                    value={framework.reference}
+                    onSelect={(currentValue) => {
+                      let nodeList: Record<
+                        string,
+                        {
+                          hash: string;
+                          disabled: boolean;
+                        }
+                      >;
+                      const x = customNodeList;
+
+                      if (x[currentValue]) {
+                        const newNodeList = { ...x };
+                        delete newNodeList[currentValue];
+                        nodeList = newNodeList;
+                      } else {
+                        nodeList = {
+                          [currentValue]: {
+                            hash: "latest",
+                            disabled: false,
+                          },
+                          ...x,
+                        };
+                      }
+                      field.onChange({
+                        ...field.value,
+                        git_custom_nodes: nodeList,
+                      });
+                    }}
+                  >
+                    {framework.title}
+                    <Check
+                      className={cn(
+                        "ml-auto h-4 w-4",
+                        findItem(framework.reference)
+                          ? "opacity-100"
+                          : "opacity-0"
+                      )}
+                    />
+                  </CommandItem>
+                ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
   );
 }

web/src/components/fetcher.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+export default async function fetcher<JSON = unknown>(
+  input: RequestInfo,
+  init?: RequestInit
+): Promise<JSON> {
+  const res = await fetch(input, init);
+  return res.json();
+}