HTML displaying live a graph whilist the user is annotating

Hi! In general, that should be possible – I guess the only concern would be that depending on the complexity of the annotations, the graph could make the UI too complex. But this could probably be solved by choosing the right layout for it so it's helpful but not distracting.

You can provide custom JavaScript via the "javascript" config setting: Custom Interfaces · Prodigy · An annotation tool for AI, Machine Learning & NLP

The prodigyupdate event is fired whenever the current example is updated. So you can do something like this to listen to it and access the current example JSON via window.prodigy.content:

document.addEventListener('prodigyupdate', event => {
    const eg = window.prodigy.content
    // Do something with the annotations here
    console.log('Updated', eg)
})

For example, if your UI contains a HTML block with the container for the visualization, you could re-generate it and update it here. I don't know how the PyVis JavaScript API works in detail but ideally, you'd want to generate the visualization (static if possible, e.g. an SVG) and then place it into a HTML container you've defined in the UI, e.g. as a html block.

If you need to include a larger JavaScript library, the easiest way is to modify the static/index.html included with Prodigy. This thread has some more background: Import HTML Template And React