chunzhi/comfyui-deploy
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(web): workflow details not updated when version changes

Browse Source
This commit is contained in:
BennyKok 2023-12-21 18:14:03 +08:00
parent 9d8f570b4d
commit 04ca3760ce
3 changed files with 74 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/src/app/workflows/[workflow_id]/page.tsx
View File

@ -1,12 +1,12 @@
import { DeploymentsTable, RunsTable } from "../../../components/RunsTable";
import { findFirstTableWithVersion } from "../../../server/findFirstTableWithVersion";
import { MachinesWSMain } from "@/components/MachinesWS";
import { VersionDetails } from "@/components/VersionDetails";
import {
CopyWorkflowVersion,
CreateDeploymentButton,
MachineSelect,
RunWorkflowButton,
VersionDetails,
VersionSelect,
} from "@/components/VersionSelect";
import {

72
web/src/components/VersionDetails.tsx Normal file
View File

@ -0,0 +1,72 @@
"use client";
import { getInputsFromWorkflow } from "../lib/getInputsFromWorkflow";
import { getWorkflowVersionFromVersionIndex } from "./VersionSelect";
import { customInputNodes } from "./customInputNodes";
import { Badge } from "@/components/ui/badge";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import type { findFirstTableWithVersion } from "@/server/findFirstTableWithVersion";
import { parseAsInteger, useQueryState } from "next-usequerystate";
export function VersionDetails({
workflow,
}: {
workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>;
}) {
const [version] = useQueryState("version", {
defaultValue: workflow?.versions[0].version ?? 1,
...parseAsInteger,
});
const workflow_version = getWorkflowVersionFromVersionIndex(
workflow,
version
);
const inputs = getInputsFromWorkflow(workflow_version);
return (
<div className="mt-4">
Workflow Details
<div className="border rounded-lg p-2">
{inputs && inputs.length > 0 ? (
<div className="flex flex-col gap-2">
{inputs.map((value) => {
if (!value || !value.class_type) return <> </>;
const nodeType = customInputNodes[value.class_type];
if (nodeType) {
const input_id = value.input_id;
const defaultValue = value.default_value;
return (
<div key={input_id}>
<Tooltip>
<TooltipTrigger>
<Badge variant="secondary">
<div>
{input_id}
{" : "}
<span className="text-orange-500">{nodeType}</span>
</div>
</Badge>
{/* {nodeType}{" "} */}
{/* <Button variant="outline">Hover</Button> */}
</TooltipTrigger>
<TooltipContent>
Default Value: {defaultValue}
</TooltipContent>
</Tooltip>
</div>
);
}
return <></>;
})}
</div>
) : (
<span className="text-sm">No external inputs</span>
)}
</div>
</div>
);
}

68
web/src/components/VersionSelect.tsx
View File

@ -1,10 +1,7 @@
"use client";
import { getInputsFromWorkflow } from "../lib/getInputsFromWorkflow";
import { callServerPromise } from "./callServerPromise";
import { customInputNodes } from "./customInputNodes";
import { LoadingIcon } from "@/components/LoadingIcon";
import { Badge } from "@/components/ui/badge";
import { Button } from "@/components/ui/button";
import {
DropdownMenu,
@ -21,11 +18,6 @@ import {
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/components/ui/tooltip";
import { createRun } from "@/server/createRun";
import { createDeployments } from "@/server/curdDeploments";
import type { getMachines } from "@/server/curdMachine";
@ -258,65 +250,7 @@ export function getWorkflowVersionFromVersionIndex(
workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>,
version: number
) {
const workflow_version = workflow?.versions.find(
(x) => x.version === version
);
const workflow_version = workflow?.versions.find((x) => x.version == version);
return workflow_version;
}
export function VersionDetails({
workflow,
}: {
workflow: Awaited<ReturnType<typeof findFirstTableWithVersion>>;
}) {
const [version] = useQueryState("version", {
defaultValue: workflow?.versions[0].version ?? 1,
...parseAsInteger,
});
const workflow_version = getWorkflowVersionFromVersionIndex(
workflow,
version
);
const inputs = getInputsFromWorkflow(workflow_version);
return (
<div className="mt-4">
Workflow Details
<div className="border rounded-lg p-2">
{inputs && (
<div className="flex flex-col gap-2">
{inputs.map((value) => {
if (!value || !value.class_type) return <> </>;
const nodeType = customInputNodes[value.class_type];
if (nodeType) {
const input_id = value.input_id;
const defaultValue = value.default_value;
return (
<div key={input_id}>
<Tooltip>
<TooltipTrigger>
<Badge variant="secondary">
<div>
{input_id}
{" : "}
<span className="text-orange-500">{nodeType}</span>
</div>
</Badge>
{/* {nodeType}{" "} */}
{/* <Button variant="outline">Hover</Button> */}
</TooltipTrigger>
<TooltipContent>
Default Value: {defaultValue}
</TooltipContent>
</Tooltip>
</div>
);
}
return <></>;
})}
</div>
)}
</div>
</div>
);
}