This visualization should support both id and ids, for one or multiple genes.
It should have a filter panel similar to the one in bluegenes-GO-term-visualizer, except with only the Ontology filter, so it can probably be made more compact.
Below the filter panel is the main visualization. The design is based on a graph generated by the InterMineR package, (but hopefully prettier!) which you can see by opening this and scrolling down to Go structure network.
Using imjs we can acquire the data required for this visualization by using the query (you'll have to translate this XML query to a JSON query used by imjs)
<query model="genomic" view="Gene.id Gene.symbol Gene.secondaryIdentifier Gene.primaryIdentifier Gene.organism.shortName Gene.organism.taxonId Gene.goAnnotation.evidence.code.code Gene.goAnnotation.ontologyTerm.identifier Gene.goAnnotation.ontologyTerm.name Gene.goAnnotation.ontologyTerm.namespace" sortOrder="Gene.symbol ASC" constraintLogic="B and C and D and E and F and A" name="intermod_go" > <join path="Gene.goAnnotation" style="OUTER"/> <constraint path="Gene.goAnnotation.qualifier" op="IS NULL" code="B" /> <constraint path="Gene.goAnnotation.ontologyTerm.obsolete" op="=" value="false" code="C" /> <constraint path="Gene" code="A" op="LOOKUP" value="2623,128" extraValue="H. sapiens"/> <constraint path="Gene.goAnnotation.evidence.code.code" op="ONE OF" code="E"><value>EXP</value><value>IDA</value><value>IPI</value><value>IMP</value><value>IGI</value><value>IEP</value><value>TAS</value><value>IC</value></constraint> </query>
where the LOOKUP Gene value (2623,128 in this example) should be replaced with the object ID of one or multiple genes (passed from BlueGenes). This should return GO terms as results, which you pass on into the query,
<query model="genomic" view="GOTerm.identifier GOTerm.name GOTerm.parents.identifier GOTerm.parents.name GOTerm.parents.parents.identifier GOTerm.parents.parents.name" sortOrder="GOTerm.parents.parents.name ASC" constraintLogic="A and B"><constraint path="GOTerm.identifier" op="ONE OF" code="A"><value>GO:0005504</value><value>GO:0008270</value><value>GO:0051775</value><value>GO:0018467</value><value>GO:0005829</value><value>GO:0009055</value><value>GO:0006069</value><value>GO:0051903</value></constraint><constraint path="GOTerm.namespace" code="B" op="=" value="molecular_function"/></query>
replacing the GO:* values with the ones you received from the previous query. Make sure to replace the GOTerm.namespace constraint value (molecular_function in this example) with the currently active Ontology filter. You should now get the parents for each GO term.
For an example of these queries at work, open the InterMOD GO Tool, deselect all output species other than H. sapiens and search for ADH5. Then select Ontology Diagram and then Molecular Function in the menu to the left. If you check your network panel, you can see the responses to these queries. (It would also be useful to copy the design of this Ontology graph, as it is much prettier than the InterMineR graph.)
Using this data, you can build a tree of all the GO terms and their parents, while marking the ontologies (GO terms returned by the first query) with their gene, similarly to how it's done in the InterMOD GO Tool. I think using Cytoscape.js with Dagre would be suitable for this, although we welcome any other library (or DIY) which you feel may be more suitable.
Feel free to rename this file to PLAN.md once you have a proper README.md.