Mermaid diagrams Pt 1

[matentzn]

Seems @manulera came up with https://github.com/manulera/ontology_viewer which looks like its doing a subset of obographviz, outputting pretty github embeddable mermaid graphics:

https://github.com/pombase/fypo/issues/4166#issue-1275033122

@manulera obographviz is the tool we generally use for making the graphic of the kind you made on the issue above. @cmungall @manulera is the new PomBase curator!

[cmungall]

sorry just saw this! Nice to meet you @manulera!

This is a really nice viewer! I think it's really important to show other relationship types to use this for ontologies like GO, CL, Uberon, ..

My understanding of the architecture is:

• javascript to generate mermaid embedded in the html
• logic to generate a JSON object in a flask app

Some recommendations, take or leave!

• Use obo graph as the standard json form for communicating graphs
• use kgviz as a standard for communicating a stylesheet
  • this may seem like massive overkill here as there is not a lot of styling available in mermaid compared to e.g. graphviz
  • it's still useful as a standard for configuring some things:
    • should ID be included in the box or just label?
    • any other info in the box?
    • how should edges be labeled? e.g. "p" for part-of. See https://github.com/oborel/obo-relations/issues/613

It's quite likely we will add mermaid generation to OAK. I am not sure yet if this will be implemented in javascript in this repo, or in Python in OAK -- or both

I like the simple Dockerized web app you have here - we are currently exploring a simple FastAPI and UI layer on top of OAK for supporting OAK commands like tree and graph visualization

I also note you have arrows going in the reverse direction than is standard for ontology views

[manulera]

Hi @cmungall and @matentzn thanks for checking it out, and sorry again for the super late reply.

I think a javascript-only website would be best for this, reading the json files instead of the obo. I just didn't have much time for it, and I could not find a simple js library that would load the json network and had easy functions to access all children of a term, like the function term.subclasses() and term.superclasses() in pronto. It was just easier like that.

If you point me to a javascript library like that, even within this repo, I could use that. Also, because so far it only shows asserted relationships, and only is_a relationships.

[manulera]

Sometimes it's easier done that said! I think I made it, using the library bbop graph from the obographviz repo.

• Arrows in the right direction
• Frontend only
• Reads json files
• Plus bug fix (I thikn) of bbop graph https://github.com/berkeleybop/bbop-graph/issues/6

This is the repo: https://github.com/manulera/ontology_map_maker And hosted in netlify: https://ontologynetwork.netlify.app/

You have to wait a bit for it to load the ontologies. As is, you can't request multiple terms, just one, even if you enter a list it will only return the first one. I will add that at some point, but for now it does what it should. It also puts the name of the relationship in the arrow.

It works with GO locally, but the problem is that I could not find an https link to the go ontology in json (☺️ oops!) so netlify complains about safety, so I commented it out. It reuses most of the code from the other repo, but does this instead of the python API call (much simpler).

https://github.com/manulera/ontology_map_maker/blob/61d35660fb6dd2790c011d9f59f095b7c8df45dc/src/index.js#L33-L55