JSFiddle - React, Tailwind, and code Playground

by Ben Noble

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<html>
<head>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css" rel="stylesheet" type="text/css"/>

    <style type="text/css">
        #mynetwork {
            width: 1200px;
            height: 380px;
            border: 1px solid lightgray;
        }
    </style>
</head>
<body>
<div id='output'></div>
<div id="mynetwork"></div>


</body>
</html>

JavaScript

var inJSON = {
  "employee": [{
      "seq": "1",
      "sourceTable": "SOURCE_TABLE1",
      "targetTable": "TARGET_TABLE"
    },
    {
      "seq": "1",
      "sourceTable": "SOURCE_TABLE11",
      "targetTable": "SOURCE_TABLE1"
    },
       {
      "seq": "1",
      "sourceTable": "SOURCE_TABLE22",
      "targetTable": "SOURCE_TABLE2"
    },
       {
      "seq": "1",
      "sourceTable": "SOURCE_TABLE2",
      "targetTable": "TARGET_TABLE"
    }
  ]
};

inJSON = inJSON.employee;

var color1 = 'green'
var color2 = 'red'
var color = color1

var tempNodesArray = [];
var tempNodesJSON = {
  "id": null,
  "label": null,
  "color":{border:color}
  //"font":{color:'black'}
};

var tempLinksArray = [];
var tempLinksJSON = {
  "from": null,
  "to": null
};

function searchArray(table_name){
for(var i = 0; i < tempNodesArray.length; i++) {
   if(tempNodesArray[i].id == table_name) {
     return i;
   }
}
}

for (itms of inJSON) {
  tempLinksJSON["from"] = itms['sourceTable'];
  tempLinksJSON["to"] = itms['targetTable'];
  tempLinksArray.push(tempLinksJSON);

  if (typeof searchArray(tempLinksJSON["from"]) == 'undefined')
  {
    tempNodesJSON["id"] = tempLinksJSON["from"];
    tempNodesJSON["label"] = tempLinksJSON["from"];
    tempNodesArray.push(tempNodesJSON);
    
   if (color==color1)
   color=color2
   else
   color=color1
   tempNodesJSON = {
   "id": null,
   "label": null,
   "color":{border:color}
  };
   }

   
  if (typeof searchArray(tempLinksJSON["to"]) == 'undefined')
  {
    tempNodesJSON["id"] = tempLinksJSON["to"];
    tempNodesJSON["label"] = tempLinksJSON["to"];
    tempNodesArray.push(tempNodesJSON);
    
   if (color==color1)
   color=color2
   else
   color=color1
   tempNodesJSON = {
   "id": null,
   "label": null,
   "color":{border:color}
  };
   } 
   
 //tempLinksArray = [];
 tempLinksJSON = {
    "from": null,
    "to": null
  };
    
}
  // create an array with nodes
    var nodes = new vis.DataSet(tempNodesArray);

    // create an...