JSFiddle - React, Tailwind, and code Playground

by Matias Guijarro

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/3.12.0/vis.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vis/3.12.0/vis.min.js"></script>
<div id="mynetwork"></div>

CSS

#mynetwork {
        width: 100%;
        height: 600px;
        border: 1px solid lightgray;
        overflow: hidden;
    }

JavaScript

// create an array with nodes
var nodes = new vis.DataSet([{
    id: 1,
    label: 'Beamline control',
    group: 0
}, {
    id: 2,
    label: 'Positioning',
    group: 1
}, {
    id: 3,
    label: 'User Interface',
    group: 0
}, {
    id: 4,
    label: 'Components',
    group: 0
}, {
    id: 5,
    label: 'Configuration',
    group: 4
}, {
    id: 6,
    label: 'Sequences',
    group: 0
}, {
    id: 7,
    label: 'Quick realign',
    group: 0
}, {
    id: 8,
    label: 'Scanning',
    group: 0
}, {
    id: 9,
    label: 'Mono calibration',
    group: 0
}, {
    id: 10,
    label: 'Diffractometer',
    group: 0
}, {
    id: 11,
    label: 'BPM',
    group: 0
}, {
    id: 12,
    label: 'Pixel detector',
    group: 0
}, {
    id: 13,
    label: 'Attenuators',
    group: 0
}, {
    id: 14,
    label: 'Tango devices',
    group: 6
}, {
    id: 15,
    label: 'Lima',
    group: 6
}, {
    id: 16,
    label: 'Motor control',
    group: 1
}, {
    id: 17,
    label: 'Pseudo motors',
    group: 1
}, {
    id: 18,
    label: 'Keithley',
    group: 6
}, {
    id: 19,
    label: 'MXCuBE',
    group: 2
}, {
    id: 20,
    label: 'CLI',
    group: 0
}, {
    id: 21,
    label: 'IcePAP',
    group: 1
}, {
    id: 22,
    label: 'Galil DM213',
    group: 1
}, {
    id: 23,
    label: 'NF8753',
    group: 1
}, {
    id: 24,
    label: 'Slits',
    group: 1
}, {
    id: 25,
    label: 'Energy',
    group: 1
}, {
    id: 26,
    label: 'Exp.table',
    group: 1
}, {
    id: 27,
    label: 'KB',
    group: 1
}, {
    id: 28,
    label: 'Oscillation',
    group: 0
}, {
    id: 29,
    label: 'Wago',
    group: 6
}, {
    id: 30,
    label: 'Diode',
    group: 0
}]);
// create an array with edges
var edges = new vis.DataSet([{
    from: 1,
    to: 4
}, {
    from: 1,
    to: 3
}, {
    from: 1,
    to: 2
}, {
    from: 1,
    to: 5
}, {
    from: 6,
    to: 1
}, {
    from: 7,
    to: 6
}, {
    from: 9,
    to: 6
}, {
    from: 8,
    to: 1
}, {
    from: 10,
    to: 4
}, {
   ...