jyapayne/langflow
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

refactor handle tooltip to it's own component

Browse source
This commit is contained in:
anovazzi1 2024-05-27 11:44:47 -03:00
commit 70a43c3947
9 changed files with 81 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/frontend/src/customNodes/genericNode/components/HandleTooltipComponent/index.tsx Normal file
View file

@ -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 <TooltipRenderComponent index={index} item={item} left={left} />;
});
} else {
//@ts-ignore
return <span data-testid={`empty-tooltip-filter`}>{TOOLTIP_EMPTY}</span>;
}
}

17
src/frontend/src/customNodes/genericNode/components/componentOutputs/index.tsx Normal file
View file

@ -0,0 +1,17 @@
import { NodeDataType } from "../../../../types/flow";
import ComponentOutput from "../ComponentOutput";
export default function ComponentOutputs({ data }: { data: NodeDataType }) {
return (
<div>
{data.node?.outputs?.map((output) => (
<ComponentOutput
nodeId={data.id}
frozen={data.node?.frozen}
types={output.types}
selected={output.selected ?? output.types[0]}
/>
))}
</div>
);
}

64
src/frontend/src/customNodes/genericNode/components/parameterComponent/index.tsx
View file

@ -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<HTMLDivElement>(null);
const refHtml = useRef<HTMLDivElement & ReactNode>(null);
const infoHtml = useRef<HTMLDivElement & ReactNode>(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 <TooltipRenderComponent index={index} item={item} left={left} />;
});
} else {
//@ts-ignore
refHtml.current = (
<span data-testid={`empty-tooltip-filter`}>{TOOLTIP_EMPTY}</span>
);
}
}
// 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({
<ShadTooltip
styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
delayDuration={1000}
content={refHtml.current}
content={
<HandleTooltips
left={left}
nodes={nodes}
tooltipTitle={tooltipTitle!}
/>
}
side={left ? "left" : "right"}
>
<Handle
@ -259,7 +233,9 @@ export default function ParameterComponent({
borderColor: color ?? nodeColors.unknown,
}}
onClick={() => {
setFilterEdge(groupedEdge.current);
setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!),
);
}}
></Handle>
</ShadTooltip>
@ -322,7 +298,13 @@ export default function ParameterComponent({
<ShadTooltip
styleClasses={"tooltip-fixed-width custom-scroll nowheel"}
delayDuration={1000}
content={refHtml.current}
content={
<HandleTooltips
left={left}
nodes={nodes}
tooltipTitle={tooltipTitle!}
/>
}
side={left ? "left" : "right"}
>
<Handle
@ -341,7 +323,11 @@ export default function ParameterComponent({
"h-3 w-3 rounded-full border-2 bg-background",
)}
style={{ borderColor: color ?? nodeColors.unknown }}
onClick={() => setFilterEdge(groupedEdge.current)}
onClick={() => {
setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!),
);
}}
/>
</ShadTooltip>
</div>

4
src/frontend/src/customNodes/genericNode/index.tsx
View file

@ -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({
>
{" "}
</div>
{data.node!.outputs && data.node!.outputs.length > 0 && (
<ComponentOutputs data={data} />
)}
{data.node!.base_classes.length > 0 && (
<ParameterComponent
key={scapedJSONStringfy({

2
src/frontend/src/customNodes/hooks/use-fetch-data-on-mount.tsx
View file

@ -8,7 +8,6 @@ const useFetchDataOnMount = (
name,
handleUpdateValues,
setNode,
renderTooltips,
setIsLoading,
) => {
const setErrorData = useAlertStore((state) => state.setErrorData);
@ -44,7 +43,6 @@ const useFetchDataOnMount = (
});
}
setIsLoading(false);
renderTooltips();
}
}
fetchData();

3
src/frontend/src/customNodes/hooks/use-handle-new-value.tsx
View file

@ -9,7 +9,6 @@ const useHandleOnNewValue = (
handleUpdateValues,
debouncedHandleUpdateValues,
setNode,
renderTooltips,
isLoading,
setIsLoading,
) => {
@ -65,8 +64,6 @@ const useHandleOnNewValue = (
return newNode;
});
renderTooltips();
};
return { handleOnNewValue };

3
src/frontend/src/customNodes/hooks/use-handle-node-class.tsx
View file

@ -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 };

3
src/frontend/src/customNodes/hooks/use-handle-refresh-buttons.tsx
View file

@ -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 };

4
src/frontend/src/types/api/index.ts
View file

@ -27,6 +27,7 @@ export type APIClassType = {
documentation: string;
error?: string;
official?: boolean;
outputs?: Array<{ types: Array<string>; selected?: string }>;
frozen?: boolean;
flow?: FlowType;
field_order?: string[];
@ -38,7 +39,8 @@ export type APIClassType = {
| FlowType
| CustomFieldsType
| boolean
| undefined;
| undefined
| Array<{ types: Array<string>; selected?: string }>;
};
export type TemplateVariableType = {