Implement dynamic dependent filters

[eboileau]

Aims/objectives.

For the Search and the Compare view, the TreeSelect and MultiSelect components require dynamic dependent options coming in JSON format from the API. Ideally, I would've like to have a dynamic dependence across all components, but this may be simpler to start with some hierarchy e.g. RNA modification -> Technology -> Organism.

For simplicity, I start working with "ready-to-use" JSON tables.

A clear and concise description of todo items.

• [x] Set up a mock database (JSON) and Axios (see #19)

• [x] (Search) Implement dynamic dependent filters: the TreeSelect uses TreeNode API, how do we deal with this?

• [x] (Compare) Display list of available dataset according to filters

[eboileau]

After a few failed attempts, this appear to be more complicated than I thought. Part of the problem is the TreeSelect component. We're currently using a JSON server which fits our purpose, but in the end that may not be the way we interact with the server. So I'm not sure if it's worth to start implementing JS functions to prune trees, etc., and/or learn how to use libraries e.g. Primefaces TreeNode API?!

Maybe it would be time to have a better idea of the data model and start implementing a DB?

Harald thinks MySQL might work, but he also has some reservations in general. Thiago think operations on file was actually good.

Check https://github.com/orgs/dieterich-lab/projects/6/views/1?pane=issue&itemId=28639623. Next week we need to get going with the data model...

[eboileau]

Ok, data wrangling and transfer between DB (MySQL table/JSON) to FE (in particular PrimeVue components) is a challenge, I need to get my head around this.

In summary, we need hierarchical data for selected filters. This is to improve user experience and quality standards e.g. classify technologies according to a given nomenclature, or select cell, tissue, organism via a simplified taxonomic tree.

1. How to format tabular to hierarchical data? One option is to "split" existing tables into multiple, e.g. one table for tech_name, one for tech_class, and one for tech_method, with PK of a given table as FK of the other, to reconstruct the relationships. Another option is to write the tree in the table, and use recursive common table expressions. There are probably other approaches...

2. In Search and Compare views, how do we know if we've selected a branch node, a leaf node, or both? We currently use TreeSelect. Can we use related libraries?

3. How to update the choices dynamically? It probably does not make sense to communicate with the DB for each change of filter, so this has to be done in Vue (see also #21 Other questions that we can answer best at a later stage). A given tree needs to be update constantly based on prior choices: RNA type/mod > technology > organism/cto.

[eboileau]

I found a solution, and this seems to be working. I still need to implement filters set 2 (region, gene, coordinates), customize the table, etc.

[eboileau]

All done, but there is a lot of boilerplate, see #38