New Homepage, separating Epi and Bio views

[YohannParis]

Why

• close #206 and fix #205
• based on DARPA requirement to separate computational models and knowledge graphs.

How

• Exploded the views/Models folder into three different folders:
  1. view/Models which includes computational models
  2. view/Graphs which includes knowledge graphs
  3. view/Comparison for comparison between computational models and knowledge graphs.
• Move the card list off the view/Home into view/Models/ModelsList and view/Graphs/GraphsList filtered based on the folder.
• Update the view/Home to display three links to Knowledge, Models, and Graphs.
• Update the router to allow Models metadata id in the URL, which help load the model on refresh.

Screenshot and Video

https://user-images.githubusercontent.com/636801/119735542-7d102700-be4a-11eb-8c8d-ba027b65020a.mov

Testing

• Make sure that the previous functions worked as expected.

[YohannParis]

It seems we should clean up the selectedModel store variable between views (Graphs and Models) because if I selected one graph within Graphs and then, I switch to Models and I selected a model there, I get the comparison button. I think the rule should be that every time you switch views, you clean that up.

Yes! That's exactly what I am working on right now while debugging, I was fighting with Vue.js about it, but I like your idea of splitting the store as well. That will simplify my life.

[YohannParis]

@RosaRomeroGomez all your comments have been taken care of, finally! I tried to monkey break it, but it works as expected. This has become a big PR...

[mj3cheun]

Up to you if you want to address this now or later, but the comparison page headers seem to be a bit off

[YohannParis]

Up to you if you want to address this now or later, but the comparison page headers seem to be a bit off

I think this PR is too big already, this will be best addressed as a new issue.