JSFiddle - React, Tailwind, and code Playground

by Wei Lin Chen

HTML

<script src="http://marvl.infotech.monash.edu/webcola/cola.v3.min.js"></script>
<div id="content"></div>

CSS

.node, .nodeHeader {
	stroke: #111;
	stroke-width: 1px;
	cursor: move;
	background:white;
}

.link {
	stroke: #555;
	stroke-width: 1.5px;
	stroke-opacity: 1;
}

.link.is_a,#is_a  {  stroke: black; }
#is_a {  fill: black; }
.link.part_of {  stroke: blue; }
#part_of {  fill: blue; }
.link.has_part {  stroke: purple;  stroke-dasharray: 4,4; }
#has_part {  fill: purple; }
.link.regulates {  stroke: orange; }
#regulates {  fill: orange; }
.link.positively_regulates { stroke: green; }
#positively_regulates {  fill: green; }
.link.negatively_regulates {  stroke: red;}
#negatively_regulates {  fill: red; }
.link.occurs_in {  stroke: cyan; }
#occurs_in {  fill: cyan; }

.nodeHeaderText {
    fill: #777;
    font-family: Helvetica;
    font-size: 11px;
    text-anchor: left;
    text-align: left;
    cursor: move;
}

.nodeTextContainer{
	text-align:center;
	margin:0;padding:0;
}

.nodeTextSpan {
    fill: #222;
    font-family: Helvetica;
    font-size: 13px;
    text-anchor: middle;
    text-align: left;
    cursor: move;
    dominant-baseline:middle;
}

.guideline {
    stroke: orangered;
    stroke-width: 4px;
}

JavaScript

var graph = {
    "nodes": [
        {
            "links": [
                {
                    "rel": "self",
                    "href": "http://localhost:8080/ars_/go_terms/20632"
                },
                {
                    "rel": "references",
                    "href": "http://localhost:8080/ars_/go_terms/20632/references"
                },
                {
                    "rel": "databases",
                    "href": "http://localhost:8080/ars_/go_terms/20632/databases"
                }
            ],
            "identifier": 20632,
            "description": "Catalysis of the reaction: ATP + H2O = ADP + phosphate, in the presence of single-stranded DNA; drives the unwinding of a DNA helix.",
            "evidence": "IDA",
            "isObsolete": true,
            "name": "single-stranded DNA-dependent ATP-dependent DNA helicase activity",
            "databaseSpecificId": "GO:0017116",
            "rootOntology": "MF",
            "link": "http://amigo.geneontology.org/cgi-bin/amigo/term_details?term=GO:0017116"
        },
        {
            "links": [
                {
                    "rel": "self",
                    "href": "http://localhost:8080/ars_/go_terms/12169"
                },
                {
                    "rel": "references",
                    "href": "http://localhost:8080/ars_/go_terms/12169/references"
                },
                {
                    "rel": "databases",
                    "href": "http://localhost:8080/ars_/go_terms/12169/databases"
                }
            ],
            "identifier": 12169,
            "description": "Catalysis of the reaction: ATP + H2O = ADP + phosphate; this reaction drives the unwinding of the DNA helix.",
            "evidence": "IDA",
            "isObsolete": true,
            "name": "ATP-dependent DNA helicase activity",
            "databaseSpecificId": "GO:0004003",
            "rootOntology": "MF",
            "link":...