UI implementation plan to support new vocabs API

[edmondchuc]

Why is this needed?

Currently, when a vocabulary request is made to the Prez API, it loads the entire vocabulary from the database and returns it to the client. This works fine for small vocabularies but becomes a scaling issue for medium to large vocabularies.

The new vocabs API allows clients such as prez-ui to load vocabularies of any size in an incremental manner. The PR for the new API is at RDFLib/prez#134.

The new API provides a way to load sibling concepts at a hierarchy level in a paginated manner. Each concept that have narrower concepts will display an "expand" button. Once expanded, the button becomes a "minimise" button. Each concepts in the vocabulary are loaded incrementally and stored in the browser memory in a tree data structure based on events triggered by the user. These events perform AJAX requests to load more concepts from the API and are triggered either from the "expand" button or the "load more" button.

How will this look?

The following image is how the current prez-ui displays the data, after it has loaded the entire vocabulary from the API.

The state of the concept hierarchy is after the user has expanded the Petroleum concept and then the Unconventional Petroleum concept.

The following image showcases the exact same state but using the new API where pagination is considered.

[jamiefeiss]

Looks good, and should fit in just fine with the current implementation.

Are you planning on implementing this @edmondchuc ? I'm happy to take on this work if you like, should be pretty straightforward to implement.

[edmondchuc]

Hi @jamiefeiss, if you have the capacity to implement it, then go for it! Otherwise, I can have a crack at it as well.