JSFiddle - React, Tailwind, and code Playground
by vinodlouis
JavaScript
var d = [
{
"instanceName":"START_1",
"type":"START",
"category":"START",
"inputLanes":[],
"outputLanes":["START_1_OutputLane"],
"uiInfo":{
"x" : -67.4090576171875,
"y" : -103.72002410888672,
"icon":"start.svg",
"desc":"",
"label":"START_1"
}
},
{
"instanceName":"RDBMS_1",
"type":"RDBMS",
"category":"DATA_SOURCE",
"inputLanes":["START_1_OutputLane"],
"outputLanes":["RDBMS_1_OutputLane"],
"uiInfo":{
"x" : 468,
"y" : -110,
"icon":"rdbms.svg",
"desc":"",
"label":"RDBMS_1"
}
},
{
"instanceName":"RDBMS_2",
"type":"RDBMS",
"category":"DATA_SOURCE",
"inputLanes":["START_1_OutputLane"],
"outputLanes":["RDBMS_2_OutputLane"],
"uiInfo":{
"x" : 186.99998474121094,
"y" : 53.333335876464844,
"icon":"rdbms.svg",
"desc":"",
"label":"RDBMS_2"
}
},
{
"instanceName":"JOIN_DBMS_1",
"type":"JOIN_DBMS",
"category":"MERGE_DATA",
"inputLanes":["RDBMS_1_OutputLane","RDBMS_2_OutputLane"],
"outputLanes":["JOIN_DBMS_1_OutputLane"],
"uiInfo":{
"x" : 756.6666870117188,
"y" : 154.6666717529297,
"icon":"merge-data.svg",
"desc":"",
"label":"JOIN_DBMS_1"
}
},
{
"instanceName":"FIELD_FILTER_1",
"type":"FIELD_FILTER",
"category":"PROCESSOR",
"inputLanes":["JOIN_DBMS_1_OutputLane"],
"outputLanes":["FIELD_FILTER_1_OutputLane"],
"uiInfo":{
"x" : 986,
"y" : 10.666664123535156,
"icon":"field-filter.svg",
"desc":"",
"label":"JOIN_DBMS_1"
}
},
{
"instanceName":"END_1",
"type":"END",
"category":"END",
"inputLanes":["FIELD_FILTER_1_OutputLane"],
"outputLanes":[],
"uiInfo":{
"x" : 1445,
"y" : -163.33333333333334,
"icon":"end.svg",
"desc":"",
"label":"END_1"
}
}
];
var e = d.map((en)=>{
return en.inputLanes.map((ei)=>{
return{
...