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 { typesContext } from "../../../../contexts/typesContext";
import { ParameterComponentType } from "../../../../types/components";
import { isValidConnection } from "../../../../utils/reactflowUtils";
import {
isValidConnection,
scapedJSONStringfy,
} from "../../../../utils/reactflowUtils";
import {
nodeColors,
nodeIconsLucide,
@ -64,7 +67,7 @@ export default function ParameterComponent({
let disabled =
reactFlowInstance
?.getEdges()
.some((e) => e.targetHandle === JSON.stringify(id)) ?? false;
.some((e) => e.targetHandle === scapedJSONStringfy(id)) ?? false;
const { data: myData } = useContext(typesContext);
@ -207,7 +210,7 @@ export default function ParameterComponent({
<Handle
type={left ? "target" : "source"}
position={left ? Position.Left : Position.Right}
id={JSON.stringify(id)}
id={scapedJSONStringfy(id)}
isValidConnection={(connection) =>
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 NodeToolbarComponent from "../../pages/FlowPage/components/nodeToolbarComponent";
import { NodeDataType } from "../../types/flow";
import { cleanEdges } from "../../utils/reactflowUtils";
import { cleanEdges, scapedJSONStringfy } from "../../utils/reactflowUtils";
import { nodeColors, nodeIconsLucide } from "../../utils/styleUtils";
import { classNames, toTitleCase } from "../../utils/utils";
import ParameterComponent from "./components/parameterComponent";
@ -165,7 +165,7 @@ export default function GenericNode({
{data.node.template[t].show &&
!data.node.template[t].advanced ? (
<ParameterComponent
key={JSON.stringify({
key={scapedJSONStringfy({
inputTypes: data.node.template[t].input_types,
type: data.node.template[t].type,
id: data.id,
@ -216,7 +216,7 @@ export default function GenericNode({
{" "}
</div>
<ParameterComponent
key={JSON.stringify({
key={scapedJSONStringfy({
baseClasses: data.node.base_classes,
id: data.id,
dataType: data.type,

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

@ -27,6 +27,8 @@ import {
import { TabsContextType, TabsState } from "../types/tabs";
import {
addVersionToDuplicates,
scapeJSONParse,
scapedJSONStringfy,
updateEdgesHandleIds,
updateIds,
updateTemplate,
@ -198,13 +200,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
) {
flow.data.edges.forEach((edge) => {
if (edge.source === node.id) {
let sourceHandleObject: sourceHandleType = JSON.parse(
let sourceHandleObject: sourceHandleType = scapeJSONParse(
edge.sourceHandle
);
sourceHandleObject.baseClasses = sourceHandleObject.baseClasses.concat(
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) => {
let source = idsMap[e.source];
let target = idsMap[e.target];
const sourceHandleObject: sourceHandleType = JSON.parse(e.sourceHandle);
let sourceHandle = JSON.stringify({
const sourceHandleObject: sourceHandleType = scapeJSONParse(
e.sourceHandle
);
let sourceHandle = scapedJSONStringfy({
...sourceHandleObject,
id: e.source,
});
const targetHandleObject: targetHandleType = JSON.parse(e.targetHandle);
let targetHandle = JSON.stringify({
const targetHandleObject: targetHandleType = scapeJSONParse(
e.targetHandle
);
let targetHandle = scapedJSONStringfy({
...targetHandleObject,
id: e.target,
});
@ -506,7 +512,7 @@ export function TabsProvider({ children }: { children: ReactNode }) {
const updateEdges = (edges: Edge[]) => {
edges.forEach((edge) => {
const targetHandleObject: targetHandleType = JSON.parse(
const targetHandleObject: targetHandleType = scapeJSONParse(
edge.targetHandle
);
edge.className =
@ -527,13 +533,13 @@ export function TabsProvider({ children }: { children: ReactNode }) {
if (Object.keys(template["template"]).length > 0) {
node.data.node.base_classes = template["base_classes"];
edges.forEach((edge) => {
let sourceHandleObject: sourceHandleType = JSON.parse(
let sourceHandleObject: sourceHandleType = scapeJSONParse(
edge.sourceHandle
);
if (edge.source === node.id) {
let newSourceHandle = sourceHandleObject;
newSourceHandle.baseClasses.concat(template["base_classes"]);
edge.sourceHandle = JSON.stringify(newSourceHandle);
edge.sourceHandle = scapedJSONStringfy(newSourceHandle);
}
});
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 { APIClassType } from "../../../../types/api";
import { FlowType, NodeType, targetHandleType } from "../../../../types/flow";
import { isValidConnection } from "../../../../utils/reactflowUtils";
import {
isValidConnection,
scapeJSONParse,
} from "../../../../utils/reactflowUtils";
import { isWrappedWithClass } from "../../../../utils/utils";
import ConnectionLineComponent from "../ConnectionLineComponent";
import ExtraSidebar from "../extraSidebarComponent";
@ -185,12 +188,12 @@ export default function Page({ flow }: { flow: FlowType }) {
...params,
style: { stroke: "#555" },
className:
((JSON.parse(params.targetHandle) as targetHandleType).type ===
"Text"
((scapeJSONParse(params.targetHandle) as targetHandleType)
.type === "Text"
? "stroke-foreground "
: "stroke-foreground ") + " stroke-connection",
animated:
(JSON.parse(params.targetHandle) as targetHandleType).type ===
(scapeJSONParse(params.targetHandle) as targetHandleType).type ===
"Text",
},
eds

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

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