I would like to add spinner instead of the "Loading..." text.

Can I work on this?

This means to adopt the panel in https://github.com/intermine/bluegenes-interaction-network which shows information upon clicking a node. The key difference is that this information can be interacted with, i.e. clicking to reach a gene or GO term report page, or copying part of the text.

We could also continue to support hover and just add the clicking in addition.

On the yellow nodes that signify GO (gene ontology) terms, we should show the name instead of the symbol (ie. fatty acid binding instead of GO:0005504)

Currently, the react components are not usable if we install the npm package for the tool. This is because JSX is compiled (only under src) using webpack during the build process which is fine so we need to export the "built" react component from our package.

It probably requires to re-configure some webpack configuration. This might be a useful link.

When testing on FlyMine lists, it seems the tool crashed due to many of the genes missing a goAnnotation.

You can use the following array of IDs for testing (note that this will require #16).

[1104775, 1068742, 1039501, 1058279, 1074968, 1068367, 1008553, 1693557, 1428781, 1176763, 1025873, 1292175, 1084284, 1011037, 1375813, 1730754, 1152482, 1058717, 1048364, 1012692, 1001224, 1431791, 1543691, 1218584, 1077099, 1723360, 1016084, 1046754, 1156660, 1188938, 1517870, 1436253, 1076864, 1001037, 1051115, 1464788, 1002362]

Looking at the source code, a lacking goAnnotation is handled in many places except in RootContainer when working on the ontology list.

This used to be doable by scrolling while the cursor is above the cytoscape graph, but we disabled this as it would catch the scrolling event when the user wished to simply scroll down the page.

The optimal place to add this feature would be with a button (perhaps by adding a Cytoscape toolbar?)

From Gos:

would be good to have a key to explain that circles are GO terms and squares are Genes
(if that is what is meant); that colours are assigned randomly; that wedges of colour in
the GO term symbols helps indicate how many connected genes there are. (This is assuming
I've guessed right).

In this part of demo.html, we'll want to update format to ids and value to an array of numbers of these. Finally, make sure that entity (as passed in index.js) is used in the RootContainer, instead of the hardcoded values.

This is necessary for the visualizer to use the values passed by Bluegenes.

The field should be "Organism:" instead. It would also be useful to add a proper Name: field for the gene.

There can be a lot of noise if we display all the GO term nodes. We should default to only displaying the GO term nodes that are shared between at least 2 gene nodes (i.e. those with a pie chart) and have a button to toggle to displaying all GO term nodes.

If you switch between the ontology filters, it doesn't always update the cytoscape graph, which confuses the user on whether what they're seeing is correct.

with shared nodes 'on' and with a graph for biological_process if I click either of the
other two ontologies the graph doesn't change but in fact I think there should
be no graph, so this is potentially misleading. Again, greying out those labels that
have no results would be good

Clicking or hovering over a gene or GO term should open a tooltip (or perhaps a window adjacent to the graph) with additional data on that gene or GO term.

Check the data returned by the existing query which is used to produce the GO terms. It should contain additional data on the GO term which you can display in the tooltip.
To also get a description of the GO term, add goAnnotation.ontologyTerm.description as an additional select (see src/query.js).

For the tooltip for a gene node, the following keys can be enough to begin with: 'id','symbol','secondaryIdentifier','primaryIdentifier','organism.shortName'. They should already be present in the query.

Note: I will assign this to @Sakshisrivastava413 as she approached me about this feature first.

Perhaps with help text, or by renaming it to something more specific.

Suggestion: Rename to "only show genes with shared GO terms" with help text "if toggled off, all genes in the result set will be shown with their GO term(s) regardless of whether they share a GO term with other genes in the result set, or have no GO terms at all."

Having the GO:code label above each GO term node isn't useful, so we can hide the labels for these.
This means only Gene nodes will have a label above them.

Similar to the below image from bluegenes-GO-term-visualizer, except with only the Ontology filter, so it can probably be made more compact.

What this filter should do, is allow you to select one specific ontology, so that only the query results which have this ontology will be displayed (log the results of running the query in this repo if you're not sure what this means).