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

almost done with display_name

Browse source
This commit is contained in:
anovazzi1 2024-06-07 15:57:37 -03:00
commit fa5243970f
7 changed files with 67 additions and 37 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/frontend/src/CustomNodes/genericNode/components/OutputComponent/index.tsx
View file

@ -12,6 +12,7 @@ import { outputComponentType } from "../../../../types/components";
import { NodeDataType } from "../../../../types/flow"; import { NodeDataType } from "../../../../types/flow";
import { cn } from "../../../../utils/utils"; import { cn } from "../../../../utils/utils";
import { Button } from "../../../../components/ui/button"; import { Button } from "../../../../components/ui/button";
import ShadTooltip from "../../../../components/shadTooltipComponent";
export default function OutputComponent({ export default function OutputComponent({
selected, selected,
@ -20,6 +21,7 @@ export default function OutputComponent({
nodeId, nodeId,
idx, idx,
name, name,
proxy,
}: outputComponentType) { }: outputComponentType) {
const setNode = useFlowStore((state) => state.setNode); const setNode = useFlowStore((state) => state.setNode);
const updateNodeInternals = useUpdateNodeInternals(); const updateNodeInternals = useUpdateNodeInternals();
@ -64,7 +66,13 @@ export default function OutputComponent({
))} ))}
</DropdownMenuContent> </DropdownMenuContent>
</DropdownMenu> </DropdownMenu>
<span>{name}</span> {proxy ? (
<ShadTooltip content={<span>{proxy.id}</span>}>
<span>{name}</span>
</ShadTooltip>
) : (
<span>{name}</span>
)}
</div> </div>
); );
} }

19
src/frontend/src/CustomNodes/genericNode/components/parameterComponent/index.tsx
View file

@ -61,6 +61,7 @@ export default function ParameterComponent({
showNode, showNode,
index, index,
outputName, outputName,
outputProxy,
}: ParameterComponentType): JSX.Element { }: ParameterComponentType): JSX.Element {
const infoHtml = useRef<HTMLDivElement & ReactNode>(null); const infoHtml = useRef<HTMLDivElement & ReactNode>(null);
const nodes = useFlowStore((state) => state.nodes); const nodes = useFlowStore((state) => state.nodes);
@ -79,8 +80,7 @@ export default function ParameterComponent({
handleUpdateValues, handleUpdateValues,
debouncedHandleUpdateValues, debouncedHandleUpdateValues,
setNode, setNode,
isLoading, setIsLoading,
setIsLoading
); );
const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass( const { handleNodeClass: handleNodeClassHook } = useHandleNodeClass(
@ -88,7 +88,7 @@ export default function ParameterComponent({
name, name,
takeSnapshot, takeSnapshot,
setNode, setNode,
updateNodeInternals updateNodeInternals,
); );
const { handleRefreshButtonPress: handleRefreshButtonPressHook } = const { handleRefreshButtonPress: handleRefreshButtonPressHook } =
@ -97,7 +97,7 @@ export default function ParameterComponent({
let disabled = let disabled =
edges.some( edges.some(
(edge) => (edge) =>
edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id) edge.targetHandle === scapedJSONStringfy(proxy ? { ...id, proxy } : id),
) ?? false; ) ?? false;
const handleRefreshButtonPress = async (name, data) => { const handleRefreshButtonPress = async (name, data) => {
@ -108,7 +108,7 @@ export default function ParameterComponent({
const handleOnNewValue = async ( const handleOnNewValue = async (
newValue: string | string[] | boolean | Object[], newValue: string | string[] | boolean | Object[],
skipSnapshot: boolean | undefined = false skipSnapshot: boolean | undefined = false,
): Promise<void> => { ): Promise<void> => {
handleOnNewValueHook(newValue, skipSnapshot); handleOnNewValueHook(newValue, skipSnapshot);
}; };
@ -133,6 +133,7 @@ export default function ParameterComponent({
function renderTitle() { function renderTitle() {
return !left ? ( return !left ? (
<OutputComponent <OutputComponent
proxy={outputProxy}
idx={index} idx={index}
types={type?.split("|") ?? []} types={type?.split("|") ?? []}
selected={ selected={
@ -194,14 +195,14 @@ export default function ParameterComponent({
className={classNames( className={classNames(
left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ", left ? "my-12 -ml-0.5 " : " my-12 -mr-0.5 ",
"h-3 w-3 rounded-full border-2 bg-background", "h-3 w-3 rounded-full border-2 bg-background",
!showNode ? "mt-0" : "" !showNode ? "mt-0" : "",
)} )}
style={{ style={{
borderColor: color ?? nodeColors.unknown, borderColor: color ?? nodeColors.unknown,
}} }}
onClick={() => { onClick={() => {
setFilterEdge( setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!) groupByFamily(myData, tooltipTitle!, left, nodes!),
); );
}} }}
></Handle> ></Handle>
@ -286,12 +287,12 @@ export default function ParameterComponent({
} }
className={classNames( className={classNames(
left ? "-ml-0.5" : "-mr-0.5", left ? "-ml-0.5" : "-mr-0.5",
"h-3 w-3 rounded-full border-2 bg-background" "h-3 w-3 rounded-full border-2 bg-background",
)} )}
style={{ borderColor: color ?? nodeColors.unknown }} style={{ borderColor: color ?? nodeColors.unknown }}
onClick={() => { onClick={() => {
setFilterEdge( setFilterEdge(
groupByFamily(myData, tooltipTitle!, left, nodes!) groupByFamily(myData, tooltipTitle!, left, nodes!),
); );
}} }}
/> />

3
src/frontend/src/CustomNodes/genericNode/index.tsx
View file

@ -837,7 +837,8 @@ export default function GenericNode({
nodeColors[types[data.type]] ?? nodeColors[types[data.type]] ??
nodeColors.unknown nodeColors.unknown
} }
title={output.name} outputProxy={output.proxy}
title={output.display_name ?? output.name}
tooltipTitle={output.selected ?? output.types[0]} tooltipTitle={output.selected ?? output.types[0]}
id={{ id={{
output_types: [output.selected ?? output.types[0]], output_types: [output.selected ?? output.types[0]],

34
src/frontend/src/pages/FlowPage/components/PageComponent/index.tsx
View file

@ -11,7 +11,6 @@ import ReactFlow, {
SelectionDragHandler, SelectionDragHandler,
updateEdge, updateEdge,
} from "reactflow"; } from "reactflow";
import GenericNode from "../../../../CustomNodes/GenericNode";
import { import {
INVALID_SELECTION_ERROR_ALERT, INVALID_SELECTION_ERROR_ALERT,
UPLOAD_ALERT_LIST, UPLOAD_ALERT_LIST,
@ -38,6 +37,7 @@ import ConnectionLineComponent from "../ConnectionLineComponent";
import SelectionMenu from "../SelectionMenuComponent"; import SelectionMenu from "../SelectionMenuComponent";
import getRandomName from "./utils/get-random-name"; import getRandomName from "./utils/get-random-name";
import isWrappedWithClass from "./utils/is-wrapped-with-class"; import isWrappedWithClass from "./utils/is-wrapped-with-class";
import GenericNode from "../../../../CustomNodes/genericNode";
const nodeTypes = { const nodeTypes = {
genericNode: GenericNode, genericNode: GenericNode,
@ -52,19 +52,19 @@ export default function Page({
}): JSX.Element { }): JSX.Element {
const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow); const uploadFlow = useFlowsManagerStore((state) => state.uploadFlow);
const autoSaveCurrentFlow = useFlowsManagerStore( const autoSaveCurrentFlow = useFlowsManagerStore(
(state) => state.autoSaveCurrentFlow (state) => state.autoSaveCurrentFlow,
); );
const types = useTypesStore((state) => state.types); const types = useTypesStore((state) => state.types);
const templates = useTypesStore((state) => state.templates); const templates = useTypesStore((state) => state.templates);
const setFilterEdge = useFlowStore((state) => state.setFilterEdge); const setFilterEdge = useFlowStore((state) => state.setFilterEdge);
const reactFlowWrapper = useRef<HTMLDivElement>(null); const reactFlowWrapper = useRef<HTMLDivElement>(null);
const [showCanvas, setSHowCanvas] = useState( const [showCanvas, setSHowCanvas] = useState(
Object.keys(templates).length > 0 && Object.keys(types).length > 0 Object.keys(templates).length > 0 && Object.keys(types).length > 0,
); );
const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance); const reactFlowInstance = useFlowStore((state) => state.reactFlowInstance);
const setReactFlowInstance = useFlowStore( const setReactFlowInstance = useFlowStore(
(state) => state.setReactFlowInstance (state) => state.setReactFlowInstance,
); );
const nodes = useFlowStore((state) => state.nodes); const nodes = useFlowStore((state) => state.nodes);
const edges = useFlowStore((state) => state.edges); const edges = useFlowStore((state) => state.edges);
@ -81,10 +81,10 @@ export default function Page({
const paste = useFlowStore((state) => state.paste); const paste = useFlowStore((state) => state.paste);
const resetFlow = useFlowStore((state) => state.resetFlow); const resetFlow = useFlowStore((state) => state.resetFlow);
const lastCopiedSelection = useFlowStore( const lastCopiedSelection = useFlowStore(
(state) => state.lastCopiedSelection (state) => state.lastCopiedSelection,
); );
const setLastCopiedSelection = useFlowStore( const setLastCopiedSelection = useFlowStore(
(state) => state.setLastCopiedSelection (state) => state.setLastCopiedSelection,
); );
const onConnect = useFlowStore((state) => state.onConnect); const onConnect = useFlowStore((state) => state.onConnect);
const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId); const currentFlowId = useFlowsManagerStore((state) => state.currentFlowId);
@ -107,7 +107,7 @@ export default function Page({
clonedSelection!, clonedSelection!,
clonedNodes, clonedNodes,
clonedEdges, clonedEdges,
getRandomName() getRandomName(),
); );
const newGroupNode = generateNodeFromFlow(newFlow, getNodeId); const newGroupNode = generateNodeFromFlow(newFlow, getNodeId);
// const newEdges = reconnectEdges(newGroupNode, removedEdges); // const newEdges = reconnectEdges(newGroupNode, removedEdges);
@ -115,8 +115,8 @@ export default function Page({
...clonedNodes.filter( ...clonedNodes.filter(
(oldNodes) => (oldNodes) =>
!clonedSelection?.nodes.some( !clonedSelection?.nodes.some(
(selectionNode) => selectionNode.id === oldNodes.id (selectionNode) => selectionNode.id === oldNodes.id,
) ),
), ),
newGroupNode, newGroupNode,
]); ]);
@ -180,7 +180,7 @@ export default function Page({
{ {
x: position.current.x, x: position.current.x,
y: position.current.y, y: position.current.y,
} },
); );
} }
if (!isWrappedWithClass(event, "noundo")) { if (!isWrappedWithClass(event, "noundo")) {
@ -276,7 +276,7 @@ export default function Page({
useEffect(() => { useEffect(() => {
setSHowCanvas( setSHowCanvas(
Object.keys(templates).length > 0 && Object.keys(types).length > 0 Object.keys(templates).length > 0 && Object.keys(types).length > 0,
); );
}, [templates, types]); }, [templates, types]);
@ -285,7 +285,7 @@ export default function Page({
takeSnapshot(); takeSnapshot();
onConnect(params); onConnect(params);
}, },
[takeSnapshot, onConnect] [takeSnapshot, onConnect],
); );
const onNodeDragStart: NodeDragHandler = useCallback(() => { const onNodeDragStart: NodeDragHandler = useCallback(() => {
@ -326,7 +326,7 @@ export default function Page({
// Extract the data from the drag event and parse it as a JSON object // Extract the data from the drag event and parse it as a JSON object
const data: { type: string; node?: APIClassType } = JSON.parse( const data: { type: string; node?: APIClassType } = JSON.parse(
event.dataTransfer.getData("nodedata") event.dataTransfer.getData("nodedata"),
); );
const newId = getNodeId(data.type); const newId = getNodeId(data.type);
@ -342,7 +342,7 @@ export default function Page({
}; };
paste( paste(
{ nodes: [newNode], edges: [] }, { nodes: [newNode], edges: [] },
{ x: event.clientX, y: event.clientY } { x: event.clientX, y: event.clientY },
); );
} else if (event.dataTransfer.types.some((types) => types === "Files")) { } else if (event.dataTransfer.types.some((types) => types === "Files")) {
takeSnapshot(); takeSnapshot();
@ -371,7 +371,7 @@ export default function Page({
} }
}, },
// Specify dependencies for useCallback // Specify dependencies for useCallback
[getNodeId, setNodes, takeSnapshot, paste] [getNodeId, setNodes, takeSnapshot, paste],
); );
const onEdgeUpdateStart = useCallback(() => { const onEdgeUpdateStart = useCallback(() => {
@ -387,7 +387,7 @@ export default function Page({
setEdges((els) => updateEdge(oldEdge, newConnection, els)); setEdges((els) => updateEdge(oldEdge, newConnection, els));
} }
}, },
[setEdges] [setEdges],
); );
const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => { const onEdgeUpdateEnd = useCallback((_, edge: Edge): void => {
@ -420,7 +420,7 @@ export default function Page({
(flow: OnSelectionChangeParams): void => { (flow: OnSelectionChangeParams): void => {
setLastSelection(flow); setLastSelection(flow);
}, },
[] [],
); );
const onPaneClick = useCallback((flow) => { const onPaneClick = useCallback((flow) => {

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

@ -63,12 +63,19 @@ export type InputFieldType = {
refresh_button_text?: string; refresh_button_text?: string;
[key: string]: any; [key: string]: any;
}; };
export type OutputFieldProxyType = {
id: string;
name: string;
nodeDisplayName: string;
};
export type OutputFieldType = { export type OutputFieldType = {
types: Array<string>; types: Array<string>;
selected?: string; selected?: string;
name: string; name: string;
displayName?: string; display_name: string;
proxy?: { id: string; name: string }; proxy?: OutputFieldProxyType;
}; };
export type sendAllProps = { export type sendAllProps = {
nodes: Node[]; nodes: Node[];

17
src/frontend/src/types/components/index.ts
View file

@ -1,7 +1,12 @@
import { ReactElement, ReactNode, SetStateAction } from "react"; import { ReactElement, ReactNode, SetStateAction } from "react";
import { ReactFlowJsonObject } from "reactflow"; import { ReactFlowJsonObject } from "reactflow";
import { InputOutput } from "../../constants/enums"; import { InputOutput } from "../../constants/enums";
import { APIClassType, APITemplateType, InputFieldType } from "../api"; import {
APIClassType,
APITemplateType,
InputFieldType,
OutputFieldProxyType,
} from "../api";
import { ChatMessageType } from "../chat"; import { ChatMessageType } from "../chat";
import { FlowStyleType, FlowType, NodeDataType, NodeType } from "../flow/index"; import { FlowStyleType, FlowType, NodeDataType, NodeType } from "../flow/index";
import { sourceHandleType, targetHandleType } from "./../flow/index"; import { sourceHandleType, targetHandleType } from "./../flow/index";
@ -71,6 +76,7 @@ export type ParameterComponentType = {
index: number; index: number;
onCloseModal?: (close: boolean) => void; onCloseModal?: (close: boolean) => void;
outputName?: string; outputName?: string;
outputProxy?: OutputFieldProxyType;
}; };
export type InputListComponentType = { export type InputListComponentType = {
value: string[]; value: string[];
@ -120,6 +126,7 @@ export type outputComponentType = {
frozen?: boolean; frozen?: boolean;
idx: number; idx: number;
name: string; name: string;
proxy?: OutputFieldProxyType;
}; };
export type PromptAreaComponentType = { export type PromptAreaComponentType = {
@ -528,7 +535,7 @@ export type nodeToolbarPropsType = {
updateNodeCode?: ( updateNodeCode?: (
newNodeClass: APIClassType, newNodeClass: APIClassType,
code: string, code: string,
name: string name: string,
) => void; ) => void;
setShowState: (show: boolean | SetStateAction<boolean>) => void; setShowState: (show: boolean | SetStateAction<boolean>) => void;
isOutdated?: boolean; isOutdated?: boolean;
@ -578,7 +585,7 @@ export type chatMessagePropsType = {
updateChat: ( updateChat: (
chat: ChatMessageType, chat: ChatMessageType,
message: string, message: string,
stream_url?: string stream_url?: string,
) => void; ) => void;
}; };
@ -670,12 +677,12 @@ export type codeTabsPropsType = {
value: string, value: string,
node: NodeType, node: NodeType,
template: InputFieldType, template: InputFieldType,
tweak: tweakType tweak: tweakType,
) => string; ) => string;
buildTweakObject?: ( buildTweakObject?: (
tw: string, tw: string,
changes: string | string[] | boolean | number | Object[] | Object, changes: string | string[] | boolean | number | Object[] | Object,
template: InputFieldType template: InputFieldType,
) => Promise<string | void>; ) => Promise<string | void>;
}; };
activeTweaks?: boolean; activeTweaks?: boolean;

10
src/frontend/src/utils/reactflowUtils.ts
View file

@ -483,6 +483,7 @@ export function updateNewOutput({ nodes, edges }: updateEdgesHandleIdsType) {
types, types,
selected: selected, selected: selected,
name: types.join(" | "), name: types.join(" | "),
display_name: types.join(" | "),
}); });
} }
} }
@ -1048,9 +1049,14 @@ function generateNodeOutputs(flow: FlowType) {
outputs.push( outputs.push(
cloneDeep({ cloneDeep({
...output, ...output,
proxy: { id: node.id, name: output.name }, proxy: {
id: node.id,
name: output.name,
nodeDisplayName:
node.data.node!.display_name ?? node.data.node!.name,
},
name: node.id + "_" + output.name, name: node.id + "_" + output.name,
displayName: output.displayName, displayName: output.display_name,
}), }),
); );
} }