Prototype Visualization Frontend

[josiahseaman]

Gdoc Documentation
We will need a visualization capability to be able to visualize and browse our test data sets. It would be great to start with the functionality of IVG or MoMI-G. One way of doing this would be to figure out the minimum input data required for SequenceTubemap as a service to call and render objects.

Ultimately, we'd like to see a responsive React or Angular website that talks to the Django server in stateful view windows. The first prototype could simply contact /graph/ which returns a json of the whole graph and feeds it into SequenceTubemap for rendering. In the end, we will likely rewrite SequenceTubemap from scratch in order to have control of the rendering process.

[josiahseaman]

@subwaystation What do you need to get started on the front end?

[subwaystation]

@josiahseaman This is tightly connected with #20. The general aim is to untangle the current IVG implementation into back-end and front-end. IVG's front-end already makes use of React. So,
the front-end we can keep and the back-end will be replaced by a Django solution from my side.
This is the minimum aim for the hackathon, because we have a working tool doing the job we want.

The back-end will then have to be adjusted in order to visualize a calculated haplotype block.

[josiahseaman]

The good news is that everything is the exact same Node -> NodeTraversal -> Path that matches the GFA conception and should match the existing IVG conceptual model. You don't need to worry about haplotype blocks or summarization or any of that. Just get us a GFA file loaded (using GFA.load_from_gfa(); GFA.to_graph()) to the database and send it for display on the front end.

…

[subwaystation]

That sounds good.

In the following an example of a graph in JSON formatted to be put into IVG:

{"node": [{"sequence":"ACTG", "id":"1"}, ...], 
 "edge": [{"from":"1", "to":"2"}, ...],
 "path":[{"name":"_alt_0be379decfe598b898d0b1c4ccc7dedd039538fd_0","mapping":[{"position":{"node_id":"193"},"edit":[{"from_length":1,"to_length":1}],"rank":"266"}, ...]}
}

So your plan is to read from GFA (a whole graph, or just a subgraph?), extract the nodes, edges (I think IVG does not even use them) and the paths, format them as above, so that we can directly visualize the GFA with the current IVG implementation?