<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="src/stylesheets/theme.css">
<script src="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.8.2-rc2/remote/drugsTone.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/AndiMajore/drugstone-releases@0.8.2-rc7/remote/styles.css">
<!-- <link rel="stylesheet" type="text/css" href="./drugsTone-build/styles.css">-->
</head>
<body>
<div style="height: 700px; width: 1300px;">
<network-expander
id='drugstOne'
config='{"nodeGroups":{"patient":{"type":"patient","color":"#000000","font":{"color":"#f0f0f0"},"groupName":"Patient","shape":"image","image":"https://static.thenounproject.com/png/22780-200.png","shadow":true},"condition":{"type":"condition","color":"#000000","font":{"color":"#f0f0f0"},"groupName":"Condition","shape":"text","shadow":false},"important":{"type":"gene","color":"#ff881f","font":{"color":"#f0f0f0"},"groupName":"Important Gene","shape":"star","shadow":true},"gene":{"type":"gene","color":"#4da300","font":{"color":"#f0f0f0"},"groupName":"Gene","shape":"circle","shadow":true}},"edgeGroups":{"genotype":{"color":"white","groupName":"Relevant Gene","shadow":false},"has-condition":{"color":"white","groupName":"Has Condition","dashes":[2,2],"shadow":false},"ggi":{"color":"#ffffff","groupName":"Interaction","dashes":[3,2],"shadow":false}},"identifier":"symbol","title":"Breast cancer example network","nodeShadow":false,"edgeShadow":false,"showLegend":true}'
network='{"nodes": [{"id": "patient-1", "group": "patient","x": 592, "y": 446},
{"id": "patient-2", "group": "patient","x": 235, "y": 87},
{"id": "patient-3", "group": "patient","x": 105, "y": 369},
{"id": "ATM","label":"ATM", "group": "gene","x": 289, "y": 242},
{"id": "BARD1","label":"BARD1", "group": "gene","x": 44, "y": 250},
{"id": "BRCA1","label":"BRCA1", "group": "gene","x": 466, "y": 576},
{"id": "BRCA2","label":"BRCA2", "group": "gene","x": 507, "y": 285},
{"id": "BRIP1","label":"BRIP1", "group": "gene","x": 54, "y": 474},
{"id": "CHEK2","label":"CHEK2", "group": "gene","x": 216, "y": 590},
{"id": "CDH1","label":"CDH1", "group": "gene","x": 320, "y": -57},
{"id": "NF1","label":"NF1", "group": "gene","x": 481, "y": 111},
{"id": "NBN","label":"NBN", "group": "gene","x": -57, "y": 314},
{"id": "PALB2","label":"PALB2", "group": "gene","x": 450, "y": 190},
{"id": "PTEN", "label":"PTEN","group": "important","x": 305, "y": 494},
{"id": "RAD51C", "label":"RAD51C", "group": "gene","x": 182, "y": -90},
{"id": "RAD51D", "label":"RAD51D", "group": "gene","x": 368, "y": 73},
{"id": "STK11", "label":"STK11", "group": "gene","x": 686, "y": 330},
{"id": "TP53", "label":"TP53","group": "important","x": 333, "y": 316},
{"id": "subtype-1","label": "Subtype 1", "group": "condition","x": 556, "y": 171},
{"id": "subtype-2","label": "Subtype 2", "group": "condition","x": -87, "y": 221}],
"edges": [{"from": "BRCA1", "to": "BRCA2", "group": "ggi"},
{"from": "ATM", "to": "BARD1", "group": "ggi"},
{"from": "BRCA1", "to": "CHEK2", "group": "ggi"},
{"from": "RAD51C", "to": "RAD51D", "group": "ggi"},
{"from": "STK11", "to": "TP53", "group": "ggi"},
{"from": "TP53", "to": "PALB2", "group": "ggi"},
{"from": "TP53", "to": "RAD51D", "group": "ggi"},
{"from": "TP53", "to": "NF1", "group": "ggi"},
{"from": "TP53", "to": "BRCA1", "group": "ggi"},
{"from": "TP53", "to": "BRCA2", "group": "ggi"},
{"from": "PTEN", "to": "BRCA1", "group": "ggi"},
{"from": "PTEN", "to": "BRCA2", "group": "ggi"},
{"from": "TP53", "to": "PTEN", "group": "ggi"},
{"from": "ATM", "to": "PTEN", "group": "ggi"},
{"from": "CDH1", "to": "RAD51D", "group": "ggi"},
{"from": "CDH1", "to": "PALB2", "group": "ggi"},
{"from": "NBN", "to": "BRIP1", "group": "ggi"},
{"from": "BRIP1", "to": "PTEN", "group": "ggi"},
{"from": "patient-1", "to": "BRCA1", "group": "genotype"},
{"from": "patient-1", "to": "TP53", "group": "genotype"},
{"from": "patient-1", "to": "BRCA2", "group": "genotype"},
{"from": "patient-1", "to": "PTEN", "group": "genotype"},
{"from": "patient-2", "to": "TP53", "group": "genotype"},
{"from": "patient-2", "to": "NF1", "group": "genotype"},
{"from": "patient-2", "to": "BARD1", "group": "genotype"},
{"from": "patient-3", "to": "TP53", "group": "genotype"},
{"from": "patient-3", "to": "PTEN", "group": "genotype"},
{"from": "patient-3", "to": "NBN", "group": "genotype"},
{"from": "patient-1", "to":"subtype-1", "group":"has-condition"},
{"from": "patient-2", "to":"subtype-1", "group":"has-condition"},
{"from": "patient-3", "to":"subtype-2", "group":"has-condition"}
]}'
task-id='EkxzkoNW7KjWc7Kq9kLQClfnCy5GI1ht'
>
</network-expander>
<script type="text/javascript">
document.getElementById("drugstOne").addEventListener("taskEvent",(event)=>{console.log(event.detail)})
</script>
</div>
</body>
</html>