From 0d1bb2aaf4816cb2a554f98c2ac9de3d2b83b122 Mon Sep 17 00:00:00 2001 From: bennykok Date: Tue, 30 Jan 2024 11:14:46 +0800 Subject: [PATCH] fix: machine selections --- .../[workflow_id]/@workflow/page.tsx | 2 +- web/src/components/VersionSelect.tsx | 221 +++--------------- .../components/ViewWorkflowDetailsButton.tsx | 169 ++++++++++++++ 3 files changed, 207 insertions(+), 185 deletions(-) create mode 100644 web/src/components/ViewWorkflowDetailsButton.tsx diff --git a/web/src/app/(app)/workflows/[workflow_id]/@workflow/page.tsx b/web/src/app/(app)/workflows/[workflow_id]/@workflow/page.tsx index 414c76d..916ec87 100644 --- a/web/src/app/(app)/workflows/[workflow_id]/@workflow/page.tsx +++ b/web/src/app/(app)/workflows/[workflow_id]/@workflow/page.tsx @@ -8,8 +8,8 @@ import { OpenEditButton, RunWorkflowButton, VersionSelect, - ViewWorkflowDetailsButton, } from "@/components/VersionSelect"; +import { ViewWorkflowDetailsButton } from "@/components/ViewWorkflowDetailsButton"; import { Card, CardContent, diff --git a/web/src/components/VersionSelect.tsx b/web/src/components/VersionSelect.tsx index 350dce5..4ca0fe2 100644 --- a/web/src/components/VersionSelect.tsx +++ b/web/src/components/VersionSelect.tsx @@ -2,7 +2,6 @@ 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, @@ -28,36 +27,19 @@ import { SelectValue, } from "@/components/ui/select"; import { Skeleton } from "@/components/ui/skeleton"; -import { - Table, - TableBody, - TableCell, - TableHead, - TableHeader, - TableRow, -} from "@/components/ui/table"; -import type { showcaseMediaNullable, workflowAPINodeType } from "@/db/schema"; +import type { showcaseMediaNullable } from "@/db/schema"; import { checkStatus, createRun } from "@/server/createRun"; import { createDeployments } from "@/server/curdDeploments"; import type { getMachines } from "@/server/curdMachine"; import type { findFirstTableWithVersion } from "@/server/findFirstTableWithVersion"; -import { - Copy, - Edit, - ExternalLink, - Info, - MoreVertical, - Play, -} from "lucide-react"; +import { Copy, Edit, MoreVertical, Play } from "lucide-react"; import { parseAsInteger, useQueryState } from "next-usequerystate"; import { useCallback, useEffect, useMemo, useState } from "react"; import { toast } from "sonner"; -import useSWR from "swr"; import type { z } from "zod"; import { create } from "zustand"; import { workflowVersionInputsToZod } from "../lib/workflowVersionInputsToZod"; import { callServerPromise } from "./callServerPromise"; -import fetcher from "./fetcher"; import { ButtonAction } from "@/components/ButtonActionLoader"; import { editWorkflowOnMachine } from "@/server/editWorkflowOnMachine"; import { usePathname, useRouter, useSearchParams } from "next/navigation"; @@ -125,29 +107,47 @@ export function MachineSelect({ ); } +type SelectedMachineStore = { + selectedMachine: string; + setSelectedMachine: (machine: string) => void; +}; + +export const selectedMachineStore = create((set) => ({ + selectedMachine: "", + setSelectedMachine: (machine) => set(() => ({ selectedMachine: machine })), +})); + export function useSelectedMachine( machines: Awaited>, ): [string, (v: string) => void] { - const searchParams = useSearchParams(); - const pathname = usePathname(); - const router = useRouter(); + const { selectedMachine, setSelectedMachine } = selectedMachineStore(); + return [selectedMachine, setSelectedMachine]; + // const searchParams = useSearchParams(); + // const pathname = usePathname(); + // const router = useRouter(); - const createQueryString = useCallback( - (name: string, value: string) => { - const params = new URLSearchParams(searchParams.toString()); - params.set(name, value); + // const createQueryString = useCallback( + // (name: string, value: string) => { + // const params = new URLSearchParams(searchParams.toString()); + // params.set(name, value); - return params.toString(); - }, - [searchParams], - ); + // return params.toString(); + // }, + // [searchParams], + // ); - return [ - searchParams.get("machine") ?? machines?.[0]?.id ?? "", - (v: string) => { - router.push(pathname + "?" + createQueryString("machine", v)); - }, - ]; + // return [ + // searchParams.get("machine") ?? machines?.[0]?.id ?? "", + // (v: string) => { + // // window.history.pushState( + // // "new url", + // // "", + // // pathname + "?" + createQueryString("machine", v), + // // ); + // // router.push(pathname + "?" + createQueryString("machine", v)); + // router.replace(pathname + "?" + createQueryString("machine", v)); + // }, + // ]; } type PublicRunStore = { @@ -500,150 +500,3 @@ export function getWorkflowVersionFromVersionIndex( return workflow_version; } - -export function ViewWorkflowDetailsButton({ - workflow, -}: { - workflow: Awaited>; -}) { - 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[]; - url: string; - } - >, - ); - - // console.log(groupedByAuxName); - - return groupedByAuxName; - }, [version, data]); - - return ( - - - - - - - Workflow Details - - View your custom nodes, models, external files used in this workflow - - - -
- - - - File - Output - - - - {groupedByAuxName && - Object.entries(groupedByAuxName).map(([key, group]) => { - // const filePath - return ( - - - - {key} - - - - - {group.node.map((x) => ( - - {x.class_type} - - ))} - - - ); - })} - -
-
- -
- -
- {/* */} - {/*
{view}
*/} - - - ); -} diff --git a/web/src/components/ViewWorkflowDetailsButton.tsx b/web/src/components/ViewWorkflowDetailsButton.tsx new file mode 100644 index 0000000..c0f814c --- /dev/null +++ b/web/src/components/ViewWorkflowDetailsButton.tsx @@ -0,0 +1,169 @@ +"use client"; +import { Badge } from "@/components/ui/badge"; +import { Button } from "@/components/ui/button"; +import { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, + DialogTrigger, +} from "@/components/ui/dialog"; +import { + Table, + TableBody, + TableCell, + TableHead, + TableHeader, + TableRow, +} from "@/components/ui/table"; +import type { workflowAPINodeType } from "@/db/schema"; +import type { findFirstTableWithVersion } from "@/server/findFirstTableWithVersion"; +import { ExternalLink, Info } from "lucide-react"; +import { parseAsInteger, useQueryState } from "next-usequerystate"; +import { useMemo } from "react"; +import useSWR from "swr"; +import type { z } from "zod"; +import fetcher from "./fetcher"; +import { getWorkflowVersionFromVersionIndex } from "./VersionSelect"; + +export function ViewWorkflowDetailsButton({ + workflow, +}: { + workflow: Awaited>; +}) { + const [version] = useQueryState("version", { + defaultValue: workflow?.versions[0].version ?? 1, + ...parseAsInteger, + }); + + 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; + + 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[]; + url: string; + } + >, + ); + + // console.log(groupedByAuxName); + return groupedByAuxName; + }, [version, data]); + + return ( + + + + + + + Workflow Details + + View your custom nodes, models, external files used in this workflow + + + +
+ + + + File + Output + + + + {groupedByAuxName && + Object.entries(groupedByAuxName).map(([key, group]) => { + // const filePath + return ( + + + + {key} + + + + + {group.node.map((x) => ( + + {x.class_type} + + ))} + + + ); + })} + +
+
+ +
+ + + +
+ {/* */} + {/*
{view}
*/} + + + ); +}