Hello @ines! Thanks a lot! You understood the concept, the JS event and the thread you sent me are the things I was looking for!
It took me some time to figure out as I am not front-end developer. Anyways, how I did it was the following, in case anyone else is interested.
In the Prodigy's static/index.html file I included the following:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="shortcut icon" href="favicon.ico">
<style type="text/css">
#mynetwork {
width: 1520px;
height: 900px;
border: 1px solid lightgray;
}
</style>
<title>Prodigy</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js">
</script>
</body>
</html>
Essentially the CSS (<style>) #network thingy in the head to create the border for the visualisation. Then to import the VisJS lib is the second script under the default bundle.js.
Then in my custom recipe.py
, I import both the HTML template and the Javascript in the config.
...
with open('local_index.html') as f:
html_template = f.read()
with open('script.js') as f:
javascript = f.read()
...
return {
"dataset": dataset, # the dataset to save annotations to
"view_id": "blocks", # set the view_id to "blocks"
"stream": stream, # the stream of incoming examples
"config": {
"relations_span_labels": [...],
"labels": [...],
'html_template': html_template,
'javascript': javascript,
"blocks": blocks # add the blocks to the config
}
In my HTML template file local_index.html
, I just inserted the following from VisJS (you can find that in the VisJS):
<div id="mynetwork"><div class="vis-network" tabindex="...></canvas></div></div>
Lastly, in my JS scirpt.js
file, I inserted the event listener, as you suggested, and my code logic:
document.addEventListener('prodigyupdate', event => {
const eg = window.prodigy.content
// create an array with nodes
var node_list = []
for (let i = 0; i < eg.spans.length; i++) {
node_list.push({id: eg.spans[i].token_end, label:eg.spans[i].label})
}
var nodes = new vis.DataSet(node_list);
var edge_list = []
for (let i = 0; i < eg.relations.length; i++) {
edge_list.push({from: eg.relations[i].child, to: eg.relations[i].head})
}
// create an array with edges
var edges = new vis.DataSet(edge_list);
// create a network
var container = document.getElementById("mynetwork");
var data = {
nodes: nodes,
edges: edges,
};
var options = {};
var network = new vis.Network(container, data, options);
})
Voila, beneath, a simple graph emerges and changes, every time I make an annotation!
The only issue is that there is one annotation delay, either span or relation. For instance, if I span two words it will only show one in the graph, if I span three then will show two etc. I am not too bothered about it. Nonetheless, if this could be fixed, with another event listener perhaps, it would be cool.
Update:
I inserted a Refresh button, which takes successfully the latest content.