diff --git a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx index 9720a9862..7201bba3b 100644 --- a/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx @@ -57,7 +57,6 @@ export default function ParameterComponent({ proxy, showNode, index = "", - isMinimized, }: ParameterComponentType): JSX.Element { const ref = useRef(null); const refHtml = useRef(null); @@ -289,7 +288,7 @@ export default function ParameterComponent({ className={classNames( left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ", "h-3 w-3 rounded-full border-2 bg-background", - isMinimized ? "mt-0" : "" + !showNode ? "mt-0" : "" )} style={{ borderColor: color, diff --git a/src/frontend/src/CustomNodes/GenericNode/index.tsx b/src/frontend/src/CustomNodes/GenericNode/index.tsx index c8f2d2349..28ce8fc88 100644 --- a/src/frontend/src/CustomNodes/GenericNode/index.tsx +++ b/src/frontend/src/CustomNodes/GenericNode/index.tsx @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { NodeToolbar, useUpdateNodeInternals } from "reactflow"; +import { NodeToolbar } from "reactflow"; import ShadTooltip from "../../components/ShadTooltipComponent"; import Tooltip from "../../components/TooltipComponent"; import IconComponent from "../../components/genericIconComponent"; @@ -40,15 +40,12 @@ export default function GenericNode({ ); const [validationStatus, setValidationStatus] = useState(null); - const [handles, setHandles] = useState([]); - const [isMinimized, setIsMinimized] = useState(false); - let numberOfInputs: boolean[] = []; - const updateNodeInternals = useUpdateNodeInternals(); + const [handles, setHandles] = useState(0); const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); function countHandles(): void { - numberOfInputs = Object.keys(data.node!.template) + let count = Object.keys(data.node!.template) .filter((templateField) => templateField.charAt(0) !== "_") .map((templateCamp) => { const { template } = data.node!; @@ -56,24 +53,20 @@ export default function GenericNode({ if (!template[templateCamp].show) return false; switch (template[templateCamp].type) { case "str": - return false; case "bool": - return false; case "float": - return false; case "code": - return false; case "prompt": - return false; case "file": - return false; case "int": return false; default: return true; } - }); - setHandles(numberOfInputs); + }) + .reduce((total, value) => total + (value ? 1 : 0), 0); + + setHandles(count); } useEffect(() => { @@ -114,10 +107,6 @@ export default function GenericNode({ const nameEditable = data.node?.flow || data.type === "CustomComponent"; - useEffect(() => { - updateNodeInternals(data.id); - }, [isMinimized]); - return ( <> @@ -136,7 +125,6 @@ export default function GenericNode({ }} numberOfHandles={handles} showNode={showNode} - setIsMinimized={setIsMinimized} > @@ -290,7 +278,6 @@ export default function GenericNode({ } proxy={data.node?.template[templateField].proxy} showNode={showNode} - isMinimized={isMinimized} /> ) )} @@ -317,7 +304,6 @@ export default function GenericNode({ type={data.node?.base_classes.join("|")} left={false} showNode={showNode} - isMinimized={isMinimized} /> )} @@ -522,7 +508,6 @@ export default function GenericNode({ } proxy={data.node?.template[templateField].proxy} showNode={showNode} - isMinimized={isMinimized} /> ) : ( <> @@ -566,7 +551,6 @@ export default function GenericNode({ type={data.node?.base_classes.join("|")} left={false} showNode={showNode} - isMinimized={isMinimized} /> )} diff --git a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx index cf1adf925..ec07193b8 100644 --- a/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx +++ b/src/frontend/src/pages/FlowPage/components/nodeToolbarComponent/index.tsx @@ -32,7 +32,6 @@ export default function NodeToolbarComponent({ setShowNode, numberOfHandles, showNode, - setIsMinimized, }: nodeToolbarPropsType): JSX.Element { const nodeLength = Object.keys(data.node!.template).filter( (templateField) => @@ -54,22 +53,13 @@ export default function NodeToolbarComponent({ const hasApiKey = useStoreStore((state) => state.hasApiKey); const validApiKey = useStoreStore((state) => state.validApiKey); - function canMinimize() { - let countHandles: number = 0; - numberOfHandles.forEach((bool) => { - if (bool) countHandles += 1; - }); - if (countHandles > 1) return false; - return true; - } - const isMinimal = canMinimize(); + const isMinimal = numberOfHandles <= 1; const isGroup = data.node?.flow ? true : false; const paste = useFlowStore((state) => state.paste); const nodes = useFlowStore((state) => state.nodes); const edges = useFlowStore((state) => state.edges); const setNodes = useFlowStore((state) => state.setNodes); - const setNode = useFlowStore((state) => state.setNode); const setEdges = useFlowStore((state) => state.setEdges); const saveComponent = useFlowsManagerStore((state) => state.saveComponent); @@ -78,7 +68,6 @@ export default function NodeToolbarComponent({ const takeSnapshot = useFlowsManagerStore((state) => state.takeSnapshot); const [showModalAdvanced, setShowModalAdvanced] = useState(false); const [showconfirmShare, setShowconfirmShare] = useState(false); - const [selectedValue, setSelectedValue] = useState(""); const [showOverrideModal, setShowOverrideModal] = useState(false); const [flowComponent, setFlowComponent] = useState(); @@ -99,10 +88,6 @@ export default function NodeToolbarComponent({ showconfirmShare, ]); - useEffect(() => { - setIsMinimized(!showNode); - }, [showNode]); - const handleSelectChange = (event) => { switch (event) { case "advanced": @@ -196,7 +181,7 @@ export default function NodeToolbarComponent({ )} -
diff --git a/src/frontend/src/types/components/index.ts b/src/frontend/src/types/components/index.ts index 6ed102590..d78ce867c 100644 --- a/src/frontend/src/types/components/index.ts +++ b/src/frontend/src/types/components/index.ts @@ -53,7 +53,6 @@ export type ParameterComponentType = { showNode?: boolean; index?: string; onCloseModal?: (close: boolean) => void; - isMinimized?: boolean; }; export type InputListComponentType = { value: string[]; @@ -478,9 +477,8 @@ export type nodeToolbarPropsType = { deleteNode: (idx: string) => void; position: XYPosition; setShowNode: (boolean: any) => void; - numberOfHandles: boolean[] | []; + numberOfHandles: number; showNode: boolean; - setIsMinimized: (boolean: boolean) => void; }; export type parsedDataType = {