From 70a43c394752897e0b5ab1ab0ba12342e1115fb3 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Mon, 27 May 2024 11:44:47 -0300 Subject: [PATCH] refactor handle tooltip to it's own component --- .../HandleTooltipComponent/index.tsx | 31 +++++++++ .../components/componentOutputs/index.tsx | 17 +++++ .../components/parameterComponent/index.tsx | 64 ++++++++----------- .../src/customNodes/genericNode/index.tsx | 4 ++ .../hooks/use-fetch-data-on-mount.tsx | 2 - .../hooks/use-handle-new-value.tsx | 3 - .../hooks/use-handle-node-class.tsx | 3 - .../hooks/use-handle-refresh-buttons.tsx | 3 +- src/frontend/src/types/api/index.ts | 4 +- 9 files changed, 81 insertions(+), 50 deletions(-) create mode 100644 src/frontend/src/customNodes/genericNode/components/HandleTooltipComponent/index.tsx create mode 100644 src/frontend/src/customNodes/genericNode/components/componentOutputs/index.tsx diff --git a/src/frontend/src/customNodes/genericNode/components/HandleTooltipComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/HandleTooltipComponent/index.tsx new file mode 100644 index 000000000..2dddabbb5 --- /dev/null +++ b/src/frontend/src/customNodes/genericNode/components/HandleTooltipComponent/index.tsx @@ -0,0 +1,31 @@ +import { useRef } from "react"; +import { TOOLTIP_EMPTY } from "../../../../constants/constants"; +import { groupByFamily } from "../../../../utils/utils"; +import TooltipRenderComponent from "../tooltipRenderComponent"; +import { useTypesStore } from "../../../../stores/typesStore"; +import { NodeType } from "../../../../types/flow"; +import useFlowStore from "../../../../stores/flowStore"; + +export default function HandleTooltips({ + left, + tooltipTitle, +}: { + left: boolean; + nodes: NodeType[]; + tooltipTitle: string; +}) { + const myData = useTypesStore((state) => state.data); + const nodes = useFlowStore((state) => state.nodes); + + let groupedObj: any = groupByFamily(myData, tooltipTitle!, left, nodes!); + + if (groupedObj && groupedObj.length > 0) { + //@ts-ignore + return groupedObj.map((item, index) => { + return ; + }); + } else { + //@ts-ignore + return {TOOLTIP_EMPTY}; + } +} diff --git a/src/frontend/src/customNodes/genericNode/components/componentOutputs/index.tsx b/src/frontend/src/customNodes/genericNode/components/componentOutputs/index.tsx new file mode 100644 index 000000000..6cdc72839 --- /dev/null +++ b/src/frontend/src/customNodes/genericNode/components/componentOutputs/index.tsx @@ -0,0 +1,17 @@ +import { NodeDataType } from "../../../../types/flow"; +import ComponentOutput from "../ComponentOutput"; + +export default function ComponentOutputs({ data }: { data: NodeDataType }) { + return ( +
+ {data.node?.outputs?.map((output) => ( + + ))} +
+ ); +} diff --git a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx index 2503567fa..e1f737ad0 100644 --- a/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx +++ b/src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx @@ -54,6 +54,7 @@ import useHandleOnNewValue from "../../../hooks/use-handle-new-value"; import useHandleNodeClass from "../../../hooks/use-handle-node-class"; import useHandleRefreshButtonPress from "../../../hooks/use-handle-refresh-buttons"; import TooltipRenderComponent from "../tooltipRenderComponent"; +import HandleTooltips from "../HandleTooltipComponent"; export default function ParameterComponent({ left, @@ -72,7 +73,6 @@ export default function ParameterComponent({ index = "", }: ParameterComponentType): JSX.Element { const ref = useRef(null); - const refHtml = useRef(null); const infoHtml = useRef(null); const setErrorData = useAlertStore((state) => state.setErrorData); const currentFlow = useFlowsManagerStore((state) => state.currentFlow); @@ -84,8 +84,6 @@ export default function ParameterComponent({ const [isLoading, setIsLoading] = useState(false); const updateNodeInternals = useUpdateNodeInternals(); const [errorDuplicateKey, setErrorDuplicateKey] = useState(false); - const flow = currentFlow?.data?.nodes ?? null; - const groupedEdge = useRef(null); const setFilterEdge = useFlowStore((state) => state.setFilterEdge); const { handleOnNewValue: handleOnNewValueHook } = useHandleOnNewValue( @@ -95,7 +93,6 @@ export default function ParameterComponent({ handleUpdateValues, debouncedHandleUpdateValues, setNode, - renderTooltips, isLoading, setIsLoading, ); @@ -106,11 +103,10 @@ export default function ParameterComponent({ takeSnapshot, setNode, updateNodeInternals, - renderTooltips, ); const { handleRefreshButtonPress: handleRefreshButtonPressHook } = - useHandleRefreshButtonPress(setIsLoading, setNode, renderTooltips); + useHandleRefreshButtonPress(setIsLoading, setNode); let disabled = edges.some( @@ -122,14 +118,7 @@ export default function ParameterComponent({ handleRefreshButtonPressHook(name, data); }; - useFetchDataOnMount( - data, - name, - handleUpdateValues, - setNode, - renderTooltips, - setIsLoading, - ); + useFetchDataOnMount(data, name, handleUpdateValues, setNode, setIsLoading); const handleOnNewValue = async ( newValue: string | string[] | boolean | Object[], @@ -193,32 +182,11 @@ export default function ParameterComponent({ ); } - function renderTooltips() { - let groupedObj: any = groupByFamily(myData, tooltipTitle!, left, flow!); - groupedEdge.current = groupedObj; - - if (groupedObj && groupedObj.length > 0) { - //@ts-ignore - refHtml.current = groupedObj.map((item, index) => { - return ; - }); - } else { - //@ts-ignore - refHtml.current = ( - {TOOLTIP_EMPTY} - ); - } - } - // If optionalHandle is an empty list, then it is not an optional handle if (optionalHandle && optionalHandle.length === 0) { optionalHandle = null; } - useEffect(() => { - renderTooltips(); - }, [tooltipTitle, flow]); - return !showNode ? ( left && LANGFLOW_SUPPORTED_TYPES.has(type ?? "") && !optionalHandle ? ( <> @@ -228,7 +196,13 @@ export default function ParameterComponent({ + } side={left ? "left" : "right"} > { - setFilterEdge(groupedEdge.current); + setFilterEdge( + groupByFamily(myData, tooltipTitle!, left, nodes!), + ); }} > @@ -322,7 +298,13 @@ export default function ParameterComponent({ + } side={left ? "left" : "right"} > setFilterEdge(groupedEdge.current)} + onClick={() => { + setFilterEdge( + groupByFamily(myData, tooltipTitle!, left, nodes!), + ); + }} /> diff --git a/src/frontend/src/customNodes/genericNode/index.tsx b/src/frontend/src/customNodes/genericNode/index.tsx index ec7bbd9f5..baf5948f4 100644 --- a/src/frontend/src/customNodes/genericNode/index.tsx +++ b/src/frontend/src/customNodes/genericNode/index.tsx @@ -31,6 +31,7 @@ import { classNames, cn } from "../../utils/utils"; import ParameterComponent from "./components/parameterComponent"; import getFieldTitle from "../utils/get-field-title"; import sortFields from "../utils/sort-fields"; +import ComponentOutputs from "./components/componentOutputs"; export default function GenericNode({ data, @@ -824,6 +825,9 @@ export default function GenericNode({ > {" "} + {data.node!.outputs && data.node!.outputs.length > 0 && ( + + )} {data.node!.base_classes.length > 0 && ( { const setErrorData = useAlertStore((state) => state.setErrorData); @@ -44,7 +43,6 @@ const useFetchDataOnMount = ( }); } setIsLoading(false); - renderTooltips(); } } fetchData(); diff --git a/src/frontend/src/customNodes/hooks/use-handle-new-value.tsx b/src/frontend/src/customNodes/hooks/use-handle-new-value.tsx index 7de830eda..c6f026f51 100644 --- a/src/frontend/src/customNodes/hooks/use-handle-new-value.tsx +++ b/src/frontend/src/customNodes/hooks/use-handle-new-value.tsx @@ -9,7 +9,6 @@ const useHandleOnNewValue = ( handleUpdateValues, debouncedHandleUpdateValues, setNode, - renderTooltips, isLoading, setIsLoading, ) => { @@ -65,8 +64,6 @@ const useHandleOnNewValue = ( return newNode; }); - - renderTooltips(); }; return { handleOnNewValue }; diff --git a/src/frontend/src/customNodes/hooks/use-handle-node-class.tsx b/src/frontend/src/customNodes/hooks/use-handle-node-class.tsx index 412658d77..6fb78ce10 100644 --- a/src/frontend/src/customNodes/hooks/use-handle-node-class.tsx +++ b/src/frontend/src/customNodes/hooks/use-handle-node-class.tsx @@ -6,7 +6,6 @@ const useHandleNodeClass = ( takeSnapshot, setNode, updateNodeInternals, - renderTooltips, ) => { const handleNodeClass = (newNodeClass, code) => { if (!data.node) return; @@ -30,8 +29,6 @@ const useHandleNodeClass = ( }); updateNodeInternals(data.id); - - renderTooltips(); }; return { handleNodeClass }; diff --git a/src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx b/src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx index 19f2a3c29..0101e8ee0 100644 --- a/src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx +++ b/src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx @@ -3,7 +3,7 @@ import useAlertStore from "../../stores/alertStore"; import { ResponseErrorDetailAPI } from "../../types/api"; import { handleUpdateValues } from "../../utils/parameterUtils"; -const useHandleRefreshButtonPress = (setIsLoading, setNode, renderTooltips) => { +const useHandleRefreshButtonPress = (setIsLoading, setNode) => { const setErrorData = useAlertStore((state) => state.setErrorData); const handleRefreshButtonPress = async (name, data) => { @@ -30,7 +30,6 @@ const useHandleRefreshButtonPress = (setIsLoading, setNode, renderTooltips) => { }); } setIsLoading(false); - renderTooltips(); }; return { handleRefreshButtonPress }; diff --git a/src/frontend/src/types/api/index.ts b/src/frontend/src/types/api/index.ts index faef230a5..c9f09bd40 100644 --- a/src/frontend/src/types/api/index.ts +++ b/src/frontend/src/types/api/index.ts @@ -27,6 +27,7 @@ export type APIClassType = { documentation: string; error?: string; official?: boolean; + outputs?: Array<{ types: Array; selected?: string }>; frozen?: boolean; flow?: FlowType; field_order?: string[]; @@ -38,7 +39,8 @@ export type APIClassType = { | FlowType | CustomFieldsType | boolean - | undefined; + | undefined + | Array<{ types: Array; selected?: string }>; }; export type TemplateVariableType = {