feat: page for external ids MA-918

[inghylt]

Originally a draft to get feedback, this PR now closes #575

This PR was created by @e0 and @inghylt

[mihai-sysbio]

This is what I'm seeing:

So my first thoughts are:

• this page should follow the left/right borders of the rest of the pages (except for the Map Viewer), so I was expecting to see the title starting at the same vertical line as the logo
• the title would be more meaningful if it's something like {{ dbname }} {{ type }} {{ id }}, where the type is the GEM component (eg reaction, metabolite), eg BiGG reaction DST_ANTIGENt
• the word "Link" should be avoided, perhaps "go to {{ dbname }}" with a link icon
• there is no value in showing the full link to the user, so it should be a redirect on-click
• the models should be listed with their "original" name instead of the raw dbname, ie Rat-GEM instead of RatGem (since this is already implemented in the codebase, perhaps this can be a shared helper function)
• the model version should also be listed
• there should be a one-line introduction like "This {{ type }} is used in the following models:"

[e0]

Great stuff and very actionable points @mihai-sysbio !

---

• the word "Link" should be avoided, perhaps "go to {{ dbname }}" with a link icon
• there is no value in showing the full link to the user, so it should be a redirect on-click

We debated this a bit during the implementation and thought it could be useful to display the full link. If we don't show the full link at all maybe we can turn the title into a link instead.

---

• the models should be listed with their "original" name instead of the raw dbname, ie Rat-GEM instead of RatGem (since this is already implemented in the codebase, perhaps this can be a shared helper function)

This could be done either in the frontend or backend. Any preferences?

---

• the model version should also be listed

Sounds good. Want to add that for implementation, we currently don't include the version in the URLs for gem browser components. So for now it would be enough to list the version but for the future we should keep in mind to update this page when we start supporting multiple versions of the same model.

[mihai-sysbio]

We debated this a bit during the implementation and thought it could be useful to display the full link. If we don't show the full link at all maybe we can turn the title into a link instead.

There is value in providing users with the link, but it doesn't have to be directly under the title. On the desktop, users can hover over to see the link. Otherwise they can right click or long press to copy the link. If you still think they should see it, could it be placed somewhere less "prime"?

This could be done either in the frontend or backend. Any preferences?

Could it be done entirely in the backend?

it would be enough to list the version

👍🏻

[e0]

Thanks again for the feedback @mihai-sysbio . @inghylt and I have made some updates. Please take another look when you have time. Here is a screenshot for convenience:

[mihai-sysbio]

Overall this is really cool 👍🏻 I've left some minor feedback, not sure if I should already approve the PR.

[mihai-sysbio]

Alright, to me there are the outstanding items to discuss before being ready to merge this in:

• the term CompartmentalizedMetabolite is unknown to the user, so it should be replaced with the more familiar Metabolite
• can we do the switch from external-db to identifier?
• the list is visually hard to dissociate from the rest of the content (first introductory line, last line with link to identifiers.org); one way to solve this would be to bring back the list, or use some Bulma styling for lists
• do you like the idea to make the tag hoverable as below (green border)?

In the meantime, I'll go ahead and approve this.

[e0]

Alright, to me there are the outstanding items to discuss before being ready to merge this in:

• the term CompartmentalizedMetabolite is unknown to the user, so it should be replaced with the more familiar Metabolite
• can we do the switch from external-db to identifier?
• the list is visually hard to dissociate from the rest of the content (first introductory line, last line with link to identifiers.org); one way to solve this would be to bring back the list, or use some Bulma styling for lists
• do you like the idea to make the tag hoverable as below (green border)?

In the meantime, I'll go ahead and approve this.

Thanks for the new feedback @mihai-sysbio ! @inghylt and I have gone through them and made some changes. We thought the tags with the link styling already make it clear that they are clickable, so we decided to not implement the green hover effect.

[nanjiangshu]

This PR looks great to me. I also think the text of the reaction with hyperlink looks better without the green hover. I have only one comment regarding the order of GEMs
e.g. for http://localhost/identifier/BiGG/PPNCL3, it shows

Reaction  PPNCL3 from Rat-GEM 1.1.0
Reaction  PPNCL3 from Mouse-GEM 1.1.0
Reaction  PPNCL3 from Human-GEM 1.6.0

I don't know in which order are the reactions listed for different GEMs. Maybe we can order it alphabetically as done in the Explore (http://localhost/explore) page?

[mihai-sysbio]

order it alphabetically as done in the Explore page?

@nanjiangshu very good observation.

Since now there are more and more places where results could/should be sorted alphabetically, how about we create an issue to revise the API and implement these were adequate? It feels like this could be a self-contained issue, without affecting the frontend at all.