JSFiddle - React, Tailwind, and code Playground

by zuzzy

JavaScript

//Settings:
//width, height and the default radius of the circles
var w = 1024,
    h = 768,
    r = 10;




//test data - usually this is recieved via ajax
//Initial Data:
var hosts = eval({
    "ITEM003": {
        "name": "ITEM003",
            "parents": [],
            "status": 0,
            "hostgroup": "Secure"
    },
        "ITEM004": {
        "name": "ITEM004",
            "parents": [],
            "status": 0,
            "hostgroup": "Secure"
    },
        "CORE": {
        "name": "CORE",
            "parents": ["ITEM004", "ITEM003"],
            "status": 0,
            "hostgroup": "DMZ"
    }
});

var mylinks = eval({
    "0": ["CORE", "ITEM004"],
        "1": ["CORE", "ITEM003"]
});

//Data after update
var updated_hosts = eval({
    "ITEM003": {
        "name": "ITEM003",
            "parents": [],
            "status": 0,
            "hostgroup": "Secure"
    },
        "ITEM004": {
        "name": "ITEM004",
            "parents": [],
            "status": 0,
            "hostgroup": "Secure"
    },
        "CORE": {
        "name": "CORE",
            "parents": ["ITEM004", "ITEM003"],
            "status": 0,
            "hostgroup": "DMZ"
    },
        "REMOTE": {
        "name": "REMOTE",
            "parents": [],
            "status": 0,
            "hostgroup": ""
    }
});

var updated_mylinks = eval({
    "0": ["CORE", "ITEM004"],
        "1": ["CORE", "ITEM003"],
        "2": ["CORE", "REMOTE"]
});



//I define these here so they carry between functions - not really necessary in this jsfiddle probably
window.link = undefined;
window.node = undefined;




//make up my node object
window.nodeArray = [];
window.node_hash = [];

for (var key in hosts) {
    var a = {
        id: "node_" + hosts[key].name,
        labelText: hosts[key].name,
        status: hosts[key].status,
        hostgroup: hosts[key].hostgroup,
        class: "node realnode",
        iconimage: hosts[key].iconimage,
        added: true
    };
   ...