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

fix(reactflowUtils.ts): update generated node id to include "GroupNode" prefix for better identification

Browse source 
fix(utils.ts): truncate component name and display name to 15 characters for better readability
This commit is contained in:
anovazzi1 2023-09-18 20:36:29 -03:00
commit 1a8d522236
3 changed files with 92 additions and 73 deletions
Download patch file Download diff file Expand all files Collapse all files

1
src/backend/langflow/api/v1/chat.py
View file

@ -13,7 +13,6 @@ from langflow.api.v1.schemas import BuildStatus, BuiltResponse, InitResponse, St
from langflow.graph.graph.base import Graph from langflow.graph.graph.base import Graph
from langflow.services.auth.utils import get_current_active_user, get_current_user from langflow.services.auth.utils import get_current_active_user, get_current_user
from langflow.services.utils import get_session
from loguru import logger from loguru import logger
from langflow.services.utils import get_chat_manager, get_session from langflow.services.utils import get_chat_manager, get_session
from cachetools import LRUCache from cachetools import LRUCache

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

@ -25,7 +25,7 @@ import {
unselectAllNodesType, unselectAllNodesType,
updateEdgesHandleIdsType, updateEdgesHandleIdsType,
} from "../types/utils/reactflowUtils"; } from "../types/utils/reactflowUtils";
import { extractIdFromLongId, toNormalCase, toTitleCase, truncateDisplayName, truncateLongId } from "./utils"; import { toNormalCase, toTitleCase, truncateDisplayName } from "./utils";
const uid = new ShortUniqueId({ length: 5 }); const uid = new ShortUniqueId({ length: 5 });
export function cleanEdges({ export function cleanEdges({
@ -544,7 +544,10 @@ function updateGroupNodeTemplate(template: APITemplateType) {
) { ) {
template[key].advanced = true; template[key].advanced = true;
} }
if(type==="code" && template[key].proxy?.id.includes("CustomComponent")){ if (
type === "code" &&
template[key].proxy?.id.includes("CustomComponent")
) {
template[key].show = false; template[key].show = false;
} }
}); });
@ -584,8 +587,9 @@ export function mergeNodeTemplates({
? nodeTemplate[key].display_name ? nodeTemplate[key].display_name
: nodeTemplate[key].name : nodeTemplate[key].name
? toTitleCase(nodeTemplate[key].name) ? toTitleCase(nodeTemplate[key].name)
: toTitleCase(key)) + " - "+ truncateDisplayName(node.data.node?.display_name!) : toTitleCase(key)) +
" - " +
truncateDisplayName(node.data.node?.display_name!);
} }
} }
}); });
@ -601,7 +605,7 @@ function isHandleConnected(
/* /*
this function receives a flow and a handleId and check if there is a connection with this handle this function receives a flow and a handleId and check if there is a connection with this handle
*/ */
scapedJSONStringfy({ type: field.type, fieldName: key, id: nodeId }) scapedJSONStringfy({ type: field.type, fieldName: key, id: nodeId });
if (field.proxy) { if (field.proxy) {
if ( if (
edges.some( edges.some(
@ -623,9 +627,12 @@ function isHandleConnected(
edges.some( edges.some(
(e) => (e) =>
e.targetHandle === e.targetHandle ===
scapedJSONStringfy({ type: field.type, fieldName: key, scapedJSONStringfy({
type: field.type,
fieldName: key,
id: nodeId, id: nodeId,
inputTypes:field.input_types} as targetHandleType) inputTypes: field.input_types,
} as targetHandleType)
) )
) { ) {
return true; return true;
@ -654,7 +661,7 @@ export function generateNodeFromFlow(flow: FlowType): NodeType {
let data = _.cloneDeep(flow); let data = _.cloneDeep(flow);
const newGroupNode: NodeType = { const newGroupNode: NodeType = {
data: { data: {
id: data.id, id: "GroupNode" + data.id,
type: outputNode?.data.type!, type: outputNode?.data.type!,
node: { node: {
output_types: outputNode!.data.node!.output_types, output_types: outputNode!.data.node!.output_types,
@ -666,7 +673,7 @@ export function generateNodeFromFlow(flow: FlowType): NodeType {
flow: data, flow: data,
}, },
}, },
id: data.id, id: "GroupNode" + data.id,
position, position,
type: "genericNode", type: "genericNode",
}; };
@ -735,11 +742,13 @@ export function ungroupNode(
let newTargetHandle: targetHandleType = { let newTargetHandle: targetHandleType = {
fieldName: field, fieldName: field,
type, type,
id: proxyId} id: proxyId,
};
if (node.data.node?.flow) { if (node.data.node?.flow) {
newTargetHandle.proxy = newTargetHandle.proxy = {
{field:node.data.node.template[field].proxy?.field!, field: node.data.node.template[field].proxy?.field!,
id:node.data.node.template[field].proxy?.id!} id: node.data.node.template[field].proxy?.id!,
};
} }
if (inputTypes) { if (inputTypes) {
newTargetHandle.inputTypes = inputTypes; newTargetHandle.inputTypes = inputTypes;
@ -752,7 +761,9 @@ export function ungroupNode(
if (newEdge.source === groupNode.id) { if (newEdge.source === groupNode.id) {
const lastNode = _.cloneDeep(findLastNode(flow!.data!)); const lastNode = _.cloneDeep(findLastNode(flow!.data!));
newEdge.source = lastNode!.id; newEdge.source = lastNode!.id;
let newSourceHandle: sourceHandleType = scapeJSONParse(newEdge.sourceHandle!); let newSourceHandle: sourceHandleType = scapeJSONParse(
newEdge.sourceHandle!
);
newSourceHandle.id = lastNode!.id; newSourceHandle.id = lastNode!.id;
newEdge.data.sourceHandle = newSourceHandle; newEdge.data.sourceHandle = newSourceHandle;
newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle); newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle);
@ -770,7 +781,8 @@ export function ungroupNode(
let show = gNodes[nodeIndex].data.node!.template[field].show; let show = gNodes[nodeIndex].data.node!.template[field].show;
let advanced = gNodes[nodeIndex].data.node!.template[field].advanced; let advanced = gNodes[nodeIndex].data.node!.template[field].advanced;
if (gNodes[nodeIndex].data.node!.template[field].display_name) { if (gNodes[nodeIndex].data.node!.template[field].display_name) {
display_name = gNodes[nodeIndex].data.node!.template[field].display_name; display_name =
gNodes[nodeIndex].data.node!.template[field].display_name;
} else { } else {
display_name = gNodes[nodeIndex].data.node!.template[field].name; display_name = gNodes[nodeIndex].data.node!.template[field].name;
} }
@ -798,9 +810,9 @@ export function ungroupNode(
export function expandGroupNode( export function expandGroupNode(
groupNode: NodeDataType, groupNode: NodeDataType,
ReactFlowInstance: ReactFlowInstance, ReactFlowInstance: ReactFlowInstance
) { ) {
const {template} = groupNode.node! const { template } = groupNode.node!;
const { flow } = groupNode.node!; const { flow } = groupNode.node!;
const gNodes: NodeType[] = _.cloneDeep(flow!.data!.nodes); const gNodes: NodeType[] = _.cloneDeep(flow!.data!.nodes);
const gEdges = flow!.data!.edges; const gEdges = flow!.data!.edges;
@ -821,11 +833,13 @@ export function expandGroupNode(
let newTargetHandle: targetHandleType = { let newTargetHandle: targetHandleType = {
fieldName: field, fieldName: field,
type, type,
id: proxyId} id: proxyId,
};
if (node.data.node?.flow) { if (node.data.node?.flow) {
newTargetHandle.proxy = newTargetHandle.proxy = {
{field:node.data.node.template[field].proxy?.field!, field: node.data.node.template[field].proxy?.field!,
id:node.data.node.template[field].proxy?.id!} id: node.data.node.template[field].proxy?.id!,
};
} }
if (inputTypes) { if (inputTypes) {
newTargetHandle.inputTypes = inputTypes; newTargetHandle.inputTypes = inputTypes;
@ -838,7 +852,9 @@ export function expandGroupNode(
if (newEdge.source === groupNode.id) { if (newEdge.source === groupNode.id) {
const lastNode = _.cloneDeep(findLastNode(flow!.data!)); const lastNode = _.cloneDeep(findLastNode(flow!.data!));
newEdge.source = lastNode!.id; newEdge.source = lastNode!.id;
let newSourceHandle: sourceHandleType = scapeJSONParse(newEdge.sourceHandle!); let newSourceHandle: sourceHandleType = scapeJSONParse(
newEdge.sourceHandle!
);
newSourceHandle.id = lastNode!.id; newSourceHandle.id = lastNode!.id;
newEdge.data.sourceHandle = newSourceHandle; newEdge.data.sourceHandle = newSourceHandle;
newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle); newEdge.sourceHandle = scapedJSONStringfy(newSourceHandle);
@ -856,7 +872,8 @@ export function expandGroupNode(
let show = gNodes[nodeIndex].data.node!.template[field].show; let show = gNodes[nodeIndex].data.node!.template[field].show;
let advanced = gNodes[nodeIndex].data.node!.template[field].advanced; let advanced = gNodes[nodeIndex].data.node!.template[field].advanced;
if (gNodes[nodeIndex].data.node!.template[field].display_name) { if (gNodes[nodeIndex].data.node!.template[field].display_name) {
display_name = gNodes[nodeIndex].data.node!.template[field].display_name; display_name =
gNodes[nodeIndex].data.node!.template[field].display_name;
} else { } else {
display_name = gNodes[nodeIndex].data.node!.template[field].name; display_name = gNodes[nodeIndex].data.node!.template[field].name;
} }
@ -894,7 +911,10 @@ export function processFlow(FlowObject: ReactFlowJsonObject) {
return clonedFLow; return clonedFLow;
} }
export function getGroupStatus(flow: FlowType,ssData:{[key:string]:{valid:boolean,params:string}}) { export function getGroupStatus(
flow: FlowType,
ssData: { [key: string]: { valid: boolean; params: string } }
) {
let Nodestatus: Array<string> = []; let Nodestatus: Array<string> = [];
const { nodes } = flow.data!; const { nodes } = flow.data!;
const ids = nodes.map((n: NodeType) => n.data.id); const ids = nodes.map((n: NodeType) => n.data.id);
@ -903,8 +923,8 @@ export function getGroupStatus(flow: FlowType,ssData:{[key:string]:{valid:boolea
return ssData[id]; return ssData[id];
} }
if (!ssData[id].valid) { if (!ssData[id].valid) {
return {valid:false,params:ssData[id].params} return { valid: false, params: ssData[id].params };
} }
}) });
return {valid:true,params:"Built sucessfully ✨"} return { valid: true, params: "Built sucessfully ✨" };
} }

4
src/frontend/src/utils/utils.ts
View file

@ -432,7 +432,7 @@ chat_input_field: Input key that you want the chat to send the user message with
export function truncateLongId(id: string): string { export function truncateLongId(id: string): string {
let [componentName, newId] = id.split("-"); let [componentName, newId] = id.split("-");
if (componentName.length > 15) { if (componentName.length > 15) {
componentName = componentName.slice(0,10); componentName = componentName.slice(0, 15);
componentName += "..."; componentName += "...";
return componentName + "-" + newId; return componentName + "-" + newId;
} }
@ -446,7 +446,7 @@ export function extractIdFromLongId(id: string): string {
export function truncateDisplayName(name: string): string { export function truncateDisplayName(name: string): string {
if (name.length > 15) { if (name.length > 15) {
name = name.slice(0,10); name = name.slice(0, 15);
name += "..."; name += "...";
} }
return name; return name;