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

update json stringy and parse procces to scape some characters

Browse source
This commit is contained in:
anovazzi1 2023-08-04 15:22:30 -03:00
commit d7516e17e4
5 changed files with 64 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/frontend/src/CustomNodes/GenericNode/components/parameterComponent/index.tsx
View file

@ -17,7 +17,10 @@ import { TOOLTIP_EMPTY } from "../../../../constants/constants";
import { TabsContext } from "../../../../contexts/tabsContext"; import { TabsContext } from "../../../../contexts/tabsContext";
import { typesContext } from "../../../../contexts/typesContext"; import { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components"; import { ParameterComponentType } from "../../../../types/components";
import { isValidConnection } from "../../../../utils/reactflowUtils"; import {
isValidConnection,
scapedJSONStringfy,
} from "../../../../utils/reactflowUtils";
import { import {
nodeColors, nodeColors,
nodeIconsLucide, nodeIconsLucide,
@ -64,7 +67,7 @@ export default function ParameterComponent({
let disabled = let disabled =
reactFlowInstance reactFlowInstance
?.getEdges() ?.getEdges()
.some((e) => e.targetHandle === JSON.stringify(id)) ?? false; .some((e) => e.targetHandle === scapedJSONStringfy(id)) ?? false;
const { data: myData } = useContext(typesContext); const { data: myData } = useContext(typesContext);
@ -207,7 +210,7 @@ export default function ParameterComponent({
<Handle <Handle
type={left ? "target" : "source"} type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right} position={left ? Position.Left : Position.Right}
id={JSON.stringify(id)} id={scapedJSONStringfy(id)}
isValidConnection={(connection) => isValidConnection={(connection) =>
isValidConnection(connection, reactFlowInstance) isValidConnection(connection, reactFlowInstance)
} }

6
src/frontend/src/CustomNodes/GenericNode/index.tsx
View file

@ -9,7 +9,7 @@ import { TabsContext } from "../../contexts/tabsContext";
import { typesContext } from "../../contexts/typesContext"; import { typesContext } from "../../contexts/typesContext";
import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent"; import NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import { NodeDataType } from "../../types/flow"; import { NodeDataType } from "../../types/flow";
import { cleanEdges } from "../../utils/reactflowUtils"; import { cleanEdges, scapedJSONStringfy } from "../../utils/reactflowUtils";
import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils"; import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
import { classNames, toTitleCase } from "../../utils/utils"; import { classNames, toTitleCase } from "../../utils/utils";
import ParameterComponent from "./components/parameterComponent"; import ParameterComponent from "./components/parameterComponent";
@ -165,7 +165,7 @@ export default function GenericNode({
{data.node.template[t].show && {data.node.template[t].show &&
!data.node.template[t].advanced ? ( !data.node.template[t].advanced ? (
<ParameterComponent <ParameterComponent
key={JSON.stringify({ key={scapedJSONStringfy({
inputTypes: data.node.template[t].input_types, inputTypes: data.node.template[t].input_types,
type: data.node.template[t].type, type: data.node.template[t].type,
id: data.id, id: data.id,
@ -216,7 +216,7 @@ export default function GenericNode({
{" "} {" "}
</div> </div>
<ParameterComponent <ParameterComponent
key={JSON.stringify({ key={scapedJSONStringfy({
baseClasses: data.node.base_classes, baseClasses: data.node.base_classes,
id: data.id, id: data.id,
dataType: data.type, dataType: data.type,

24
src/frontend/src/contexts/tabsContext.tsx
View file

@ -27,6 +27,8 @@ import {
import { TabsContextType, TabsState } from "../types/tabs"; import { TabsContextType, TabsState } from "../types/tabs";
import { import {
addVersionToDuplicates, addVersionToDuplicates,
scapeJSONParse,
scapedJSONStringfy,
updateEdgesHandleIds, updateEdgesHandleIds,
updateIds, updateIds,
updateTemplate, updateTemplate,
@ -198,13 +200,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
) { ) {
flow.data.edges.forEach((edge) => { flow.data.edges.forEach((edge) => {
if (edge.source === node.id) { if (edge.source === node.id) {
let sourceHandleObject: sourceHandleType = JSON.parse( let sourceHandleObject: sourceHandleType = scapeJSONParse(
edge.sourceHandle edge.sourceHandle
); );
sourceHandleObject.baseClasses = sourceHandleObject.baseClasses.concat( sourceHandleObject.baseClasses = sourceHandleObject.baseClasses.concat(
template["base_classes"] template["base_classes"]
); );
edge.sourceHandle = JSON.stringify(sourceHandleObject); edge.sourceHandle = scapedJSONStringfy(sourceHandleObject);
} }
}); });
} }
@ -411,13 +413,17 @@ export function TabsProvider({ children }: { children: ReactNode }) {
selectionInstance.edges.forEach((e: Edge) => { selectionInstance.edges.forEach((e: Edge) => {
let source = idsMap[e.source]; let source = idsMap[e.source];
let target = idsMap[e.target]; let target = idsMap[e.target];
const sourceHandleObject: sourceHandleType = JSON.parse(e.sourceHandle); const sourceHandleObject: sourceHandleType = scapeJSONParse(
let sourceHandle = JSON.stringify({ e.sourceHandle
);
let sourceHandle = scapedJSONStringfy({
...sourceHandleObject, ...sourceHandleObject,
id: e.source, id: e.source,
}); });
const targetHandleObject: targetHandleType = JSON.parse(e.targetHandle); const targetHandleObject: targetHandleType = scapeJSONParse(
let targetHandle = JSON.stringify({ e.targetHandle
);
let targetHandle = scapedJSONStringfy({
...targetHandleObject, ...targetHandleObject,
id: e.target, id: e.target,
}); });
@ -506,7 +512,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
const updateEdges = (edges: Edge[]) => { const updateEdges = (edges: Edge[]) => {
edges.forEach((edge) => { edges.forEach((edge) => {
const targetHandleObject: targetHandleType = JSON.parse( const targetHandleObject: targetHandleType = scapeJSONParse(
edge.targetHandle edge.targetHandle
); );
edge.className = edge.className =
@ -527,13 +533,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
if (Object.keys(template["template"]).length > 0) { if (Object.keys(template["template"]).length > 0) {
node.data.node.base_classes = template["base_classes"]; node.data.node.base_classes = template["base_classes"];
edges.forEach((edge) => { edges.forEach((edge) => {
let sourceHandleObject: sourceHandleType = JSON.parse( let sourceHandleObject: sourceHandleType = scapeJSONParse(
edge.sourceHandle edge.sourceHandle
); );
if (edge.source === node.id) { if (edge.source === node.id) {
let newSourceHandle = sourceHandleObject; let newSourceHandle = sourceHandleObject;
newSourceHandle.baseClasses.concat(template["base_classes"]); newSourceHandle.baseClasses.concat(template["base_classes"]);
edge.sourceHandle = JSON.stringify(newSourceHandle); edge.sourceHandle = scapedJSONStringfy(newSourceHandle);
} }
}); });
node.data.node.description = template["description"]; node.data.node.description = template["description"];

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

@ -26,7 +26,10 @@ import { typesContext } from "../../../../contexts/typesContext";
import { undoRedoContext } from "../../../../contexts/undoRedoContext"; import { undoRedoContext } from "../../../../contexts/undoRedoContext";
import { APIClassType } from "../../../../types/api"; import { APIClassType } from "../../../../types/api";
import { FlowType, NodeType, targetHandleType } from "../../../../types/flow"; import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
import { isValidConnection } from "../../../../utils/reactflowUtils"; import {
isValidConnection,
scapeJSONParse,
} from "../../../../utils/reactflowUtils";
import { isWrappedWithClass } from "../../../../utils/utils"; import { isWrappedWithClass } from "../../../../utils/utils";
import ConnectionLineComponent from "../ConnectionLineComponent"; import ConnectionLineComponent from "../ConnectionLineComponent";
import ExtraSidebar from "../extraSidebarComponent"; import ExtraSidebar from "../extraSidebarComponent";
@ -185,12 +188,12 @@ export default function Page({ flow }: { flow: FlowType }) {
...params, ...params,
style: { stroke: "#555" }, style: { stroke: "#555" },
className: className:
((JSON.parse(params.targetHandle) as targetHandleType).type === ((scapeJSONParse(params.targetHandle) as targetHandleType)
"Text" .type === "Text"
? "stroke-foreground " ? "stroke-foreground "
: "stroke-foreground ") + " stroke-connection", : "stroke-foreground ") + " stroke-connection",
animated: animated:
(JSON.parse(params.targetHandle) as targetHandleType).type === (scapeJSONParse(params.targetHandle) as targetHandleType).type ===
"Text", "Text",
}, },
eds eds

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

@ -30,7 +30,8 @@ export function cleanEdges({
const sourceHandle = edge.sourceHandle; //right const sourceHandle = edge.sourceHandle; //right
const targetHandle = edge.targetHandle; //left const targetHandle = edge.targetHandle; //left
if (targetHandle) { if (targetHandle) {
const targetHandleObject: targetHandleType = JSON.parse(targetHandle); const targetHandleObject: targetHandleType =
scapeJSONParse(targetHandle);
const field = targetHandleObject.fieldName; const field = targetHandleObject.fieldName;
const id: targetHandleType = { const id: targetHandleType = {
type: targetNode.data.node.template[field]?.type, type: targetNode.data.node.template[field]?.type,
@ -38,7 +39,7 @@ export function cleanEdges({
id: targetNode.data.id, id: targetNode.data.id,
inputTypes: targetNode.data.node.template[field]?.input_types, inputTypes: targetNode.data.node.template[field]?.input_types,
}; };
if (JSON.stringify(id) !== targetHandle) { if (scapedJSONStringfy(id) !== targetHandle) {
newEdges = newEdges.filter((e) => e.id !== edge.id); newEdges = newEdges.filter((e) => e.id !== edge.id);
} }
} }
@ -48,7 +49,7 @@ export function cleanEdges({
baseClasses: sourceNode.data.node.base_classes, baseClasses: sourceNode.data.node.base_classes,
dataType: sourceNode.data.type, dataType: sourceNode.data.type,
}; };
if (JSON.stringify(id) !== sourceHandle) { if (scapedJSONStringfy(id) !== sourceHandle) {
newEdges = newEdges.filter((e) => e.id !== edge.id); newEdges = newEdges.filter((e) => e.id !== edge.id);
} }
} }
@ -62,14 +63,17 @@ export function isValidConnection(
{ source, target, sourceHandle, targetHandle }: Connection, { source, target, sourceHandle, targetHandle }: Connection,
reactFlowInstance: ReactFlowInstance reactFlowInstance: ReactFlowInstance
) { ) {
const targetHandleObject: targetHandleType = JSON.parse(targetHandle); const targetHandleObject: targetHandleType = scapeJSONParse(targetHandle);
const sourceHandleObject: sourceHandleType = JSON.parse(sourceHandle); const sourceHandleObject: sourceHandleType = scapeJSONParse(sourceHandle);
console.log(sourceHandleObject, targetHandleObject);
if ( if (
targetHandleObject.inputTypes?.some( targetHandleObject.inputTypes?.some(
(n) => n === sourceHandleObject.dataType (n) => n === sourceHandleObject.dataType
) || ) ||
sourceHandleObject.baseClasses.some((t) => sourceHandleObject.baseClasses.some(
targetHandleObject.inputTypes?.some((n) => n === t) (t) =>
targetHandleObject.inputTypes?.some((n) => n === t) ||
t === targetHandleObject.type
) || ) ||
targetHandleObject.type === "str" targetHandleObject.type === "str"
) { ) {
@ -145,10 +149,16 @@ export function updateIds(newFlow, getNodeId) {
newFlow.edges.forEach((e: Edge) => { newFlow.edges.forEach((e: Edge) => {
e.source = idsMap[e.source]; e.source = idsMap[e.source];
e.target = idsMap[e.target]; e.target = idsMap[e.target];
const sourceHandleObject: sourceHandleType = JSON.parse(e.sourceHandle); const sourceHandleObject: sourceHandleType = scapeJSONParse(e.sourceHandle);
e.sourceHandle = JSON.stringify({ ...sourceHandleObject, id: e.source }); e.sourceHandle = scapedJSONStringfy({
const targetHandleObject: targetHandleType = JSON.parse(e.targetHandle); ...sourceHandleObject,
e.targetHandle = JSON.stringify({ ...targetHandleObject, id: e.target }); id: e.source,
});
const targetHandleObject: targetHandleType = scapeJSONParse(e.targetHandle);
e.targetHandle = scapedJSONStringfy({
...targetHandleObject,
id: e.target,
});
e.id = e.id =
"reactflow__edge-" + "reactflow__edge-" +
e.source + e.source +
@ -193,9 +203,9 @@ export function validateNode(
.getEdges() .getEdges()
.some( .some(
(e) => (e) =>
(JSON.parse(e.targetHandle) as targetHandleType).fieldName === (scapeJSONParse(e.targetHandle) as targetHandleType)
t && .fieldName === t &&
(JSON.parse(e.targetHandle) as targetHandleType).id === n.id (scapeJSONParse(e.targetHandle) as targetHandleType).id === n.id
) )
? [ ? [
`${type} is missing ${ `${type} is missing ${
@ -264,8 +274,8 @@ export function updateEdgesHandleIds({
baseClasses: sourceNode.data.node.base_classes, baseClasses: sourceNode.data.node.base_classes,
}; };
} }
edge.sourceHandle = JSON.stringify(newSource); edge.sourceHandle = scapedJSONStringfy(newSource);
edge.targetHandle = JSON.stringify(newTarget); edge.targetHandle = scapedJSONStringfy(newTarget);
}); });
return newEdges; return newEdges;
} }
@ -278,3 +288,10 @@ export function getConnectedNodes(
const targetId = edge.target; const targetId = edge.target;
return nodes.filter((node) => node.id === targetId || node.id === sourceId); return nodes.filter((node) => node.id === targetId || node.id === sourceId);
} }
export function scapedJSONStringfy(json: object): string {
return JSON.stringify(json).replace(/"/g, '\\"');
}
export function scapeJSONParse(json: string): any {
return JSON.parse(json.replace(/\\"/g, '"'));
}