From 9d510e3e4bbd6417632985165cd7125e45c4c5f9 Mon Sep 17 00:00:00 2001 From: anovazzi1 Date: Tue, 12 Sep 2023 21:00:42 -0300 Subject: [PATCH] fix output string of custom component and truncate long Ids on display name --- src/frontend/src/types/flow/index.ts | 1 + src/frontend/src/utils/reactflowUtils.ts | 65 ++++++++++++++---------- src/frontend/src/utils/utils.ts | 10 ++++ 3 files changed, 49 insertions(+), 27 deletions(-) diff --git a/src/frontend/src/types/flow/index.ts b/src/frontend/src/types/flow/index.ts index 78093af77..a3719c52f 100644 --- a/src/frontend/src/types/flow/index.ts +++ b/src/frontend/src/types/flow/index.ts @@ -19,6 +19,7 @@ export type NodeDataType = { type: string; node?: APIClassType; id: string; + output_types?: string[]; }; // FlowStyleType is the type of the style object that is used to style the // Flow card with an emoji and a color. diff --git a/src/frontend/src/utils/reactflowUtils.ts b/src/frontend/src/utils/reactflowUtils.ts index a9cd66a61..5a1923b26 100644 --- a/src/frontend/src/utils/reactflowUtils.ts +++ b/src/frontend/src/utils/reactflowUtils.ts @@ -8,6 +8,7 @@ import { ReactFlowJsonObject, XYPosition, } from "reactflow"; +import ShortUniqueId from "short-unique-id"; import { specialCharsRegex } from "../constants/constants"; import { APITemplateType, TemplateVariableType } from "../types/api"; import { @@ -23,8 +24,7 @@ import { unselectAllNodesType, updateEdgesHandleIdsType, } from "../types/utils/reactflowUtils"; -import { toNormalCase, toTitleCase } from "./utils"; -import ShortUniqueId from "short-unique-id"; +import { toNormalCase, toTitleCase, truncateLongId } from "./utils"; const uid = new ShortUniqueId({ length: 5 }); export function cleanEdges({ @@ -455,10 +455,7 @@ export function filterFlow( ); } -export function findLastNode({ - nodes, - edges, -}: findLastNodeType) { +export function findLastNode({ nodes, edges }: findLastNodeType) { /* this function receives a flow and return the last node */ @@ -531,12 +528,12 @@ function updateGroupNodeTemplate(template: APITemplateType) { type === "prompt" || type === "file" || type === "int") && - !template[key].required && !input_types + !template[key].required && + !input_types ) { template[key].advanced = true; - if(template[key].dynamic) - { - template[key].dynamic = false + if (template[key].dynamic) { + template[key].dynamic = false; } } }); @@ -571,11 +568,14 @@ export function mergeNodeTemplates({ node.data.node!.flow!.name + " - " + nodeTemplate[key].name; } else { template[key + "_" + node.id].display_name = - node.data.node!.display_name + " - " + (nodeTemplate[key].display_name - ? nodeTemplate[key].display_name - : nodeTemplate[key].name - ? toTitleCase(nodeTemplate[key].name) - : toTitleCase(key)) + //data id already has the node name on it + truncateLongId(node.data.id) + + " - " + + (nodeTemplate[key].display_name + ? nodeTemplate[key].display_name + : nodeTemplate[key].name + ? toTitleCase(nodeTemplate[key].name) + : toTitleCase(key)); } } }); @@ -596,14 +596,22 @@ function isHandleConnected( edges.some( (e) => e.targetHandle === - customStringify({type:field.type,fieldName:key,id:nodeId,proxy:{id:field.proxy!.id,field:field.proxy!.field}}) ) + customStringify({ + type: field.type, + fieldName: key, + id: nodeId, + proxy: { id: field.proxy!.id, field: field.proxy!.field }, + }) + ) ) { return true; } } else { if ( edges.some( - (e) => e.targetHandle === customStringify({type:field.type,fieldName:key,id:nodeId}) + (e) => + e.targetHandle === + customStringify({ type: field.type, fieldName: key, id: nodeId }) ) ) { return true; @@ -624,7 +632,6 @@ export function generateNodeTemplate(Flow: FlowType) { return template; } - export function generateNodeFromFlow(flow: FlowType): NodeType { const { nodes } = flow.data!; const outputNode = _.cloneDeep(findLastNode(flow.data!)); @@ -634,9 +641,10 @@ export function generateNodeFromFlow(flow: FlowType): NodeType { const newGroupNode: NodeType = { data: { id: data.id, - type: outputNode!.data.type, + type: outputNode?.data.type!, node: { - display_name:"group Node", + output_types: outputNode!.data.node!.output_types, + display_name: "group Node", documentation: "", base_classes: outputNode!.data.node!.base_classes, description: "group Node", @@ -690,11 +698,11 @@ export function connectedInputNodesOnHandle( } export function ungroupNode( - groupNode:NodeDataType, - BaseFlow: ReactFlowJsonObject, + groupNode: NodeDataType, + BaseFlow: ReactFlowJsonObject ) { - const {template} = groupNode.node - const {flow} = groupNode.node; + const { template } = groupNode.node; + const { flow } = groupNode.node; const gNodes: NodeType[] = flow.data.nodes; const gEdges = flow.data.edges; //redirect edges to correct proxy node @@ -756,7 +764,10 @@ export function ungroupNode( } }); - const nodes = [...BaseFlow.nodes.filter((n) => n.id !== groupNode.id), ...gNodes]; + const nodes = [ + ...BaseFlow.nodes.filter((n) => n.id !== groupNode.id), + ...gNodes, + ]; const edges = [ ...BaseFlow.edges.filter( (e) => e.target !== groupNode.id && e.source !== groupNode.id @@ -772,10 +783,10 @@ export function processFLow(FlowObject: ReactFlowJsonObject) { let clonedFLow = _.cloneDeep(FlowObject); clonedFLow.nodes.forEach((node: NodeType) => { if (node.type === "groupNode") { - processFLow(node.data.node.flow.data); + processFLow(node.data.node!.flow!.data!); ungroupNode(node.data, clonedFLow); } }); console.log(clonedFLow); return clonedFLow; -} \ No newline at end of file +} diff --git a/src/frontend/src/utils/utils.ts b/src/frontend/src/utils/utils.ts index 4d9c73f3d..6f97568f5 100644 --- a/src/frontend/src/utils/utils.ts +++ b/src/frontend/src/utils/utils.ts @@ -429,6 +429,16 @@ chat_input_field: Input key that you want the chat to send the user message with >`; } +export function truncateLongId(id: string): string { + let [componentName,newId] = id.split("-"); + if (componentName.length>15){ + componentName = componentName.slice(0,10); + componentName += "..."; + return componentName+"-"+newId; + } + return id; +} + export function tabsArray(codes: string[], method: number) { if (!method) return; if (method === 0) {