Create basic gene page

[andrewhercules]

During yesterday's meeting, we discussed two options:

1. Having a separate gene page
2. Adding summary gene data and external links to the top of the Locus View plot page and using JavaScript and conditional logic to only show when user has searched for a gene

To allow for future growth (e.g. exome data that could be available for version 2.0 of the Portal) and to keep the experience consistent across all entities (study, variant), I recommend that we create a separate gene entity page.

The key features would be:

1. HGNC gene symbol
2. Protein name
3. Link to Locus View plot
4. Uniprot description of the gene with PubMed ID hyperlinks to EuropePMC
5. Icons showing what data is available from the Open Targets Platform
6. External links to websites including Ensembl, Uniprot, and ExAC
7. Studies/traits associated with the gene (a replica of the table shown below the Locus View plot)

See below for an initial mockup:

As an interim solution, I would also recommend that we make use of the Platform API. Based on the data returned by the /platform/private/target/{target}, perhaps we could also activate/disable the icons showing the data available from the Open Targets Platform based on the length of their respective arrays?

[elipapa]

how about building an icon for the "locus view" ? would also help branding.

[andrewhercules]

Here's the updated layout of the gene page that does not require a REST call to the Open Targets Platform API. All of the icon links can be hardcoded to direct users to the relevant the target profile page section.

[andrewhercules]

@elipapa, good point about the icon. In the mockup above, I used a white version of this icon - what do you think?

[andrewhercules]

I've updated the mockup for the gene page based on feedback - see below. If the blue for the static link icons is too much, we can also make them in grey (#5a5f5f). SVGs of the icons can be found on the team's Google Drive. Also, for the "Other Links" section, I included links to platforms/portals that only require either a HGNC symbol or Ensembl ID. If there are other resources I have forgotten, please feel free to include them.

[deniseOme]

Please capitalise P for "prot" in UniProt.

What is the rationale of linking out to Gene Cards, HGNC and all those resources?

I personally would keep the linksouts to a minimum. It may be distracting, it makes the page busier than it should be.

Do we really need to link out to Ensembl and Gene Cards? Neither is willing to link out to us. What do those resources provide at their gene pages that we don't? What is the benefit for the user?

I'd have linked out to the Open Targets Platform target profile page and voila'! That page is a 'cv' of the gene and links out to UniProt, Ensembl and plenty more. The target profile page does not link out to HGNC, this has been raised by HGNC in the past. Perhaps we should create an issue in Platform to revisit this.

[andrewhercules]

Good spot - thank you. I've updated the mockup - see below.

We are including external links in an effort to replicate some of the functionality found on other popular genetics websites and to minimise the need to click through to the Platform in order to get to Ensembl, UniProt, etc. For example, on the ExAC and Varsome website, they have a variety of external links for supplementary information. On our site, these links would be a lighter grey so they aren't as noticeable on first glance.

Moving forward, we shouldn't make including external links contingent on whether those resources link back to the Platform or the Genetics Portal. Linkbacks are great, but we should be focussed on giving our users the right mix of external links and contextual information as this helps with SEO - we are seen as an authority on a topic.

[andrewhercules]

When looking at the gene page on a laptop (Macbook Air, 14-inch, 2014 model), the icons take up two lines - see below for a screenshot. Can we either fix the icon sizes so they are one line or drop a link (the mouse phenotype or pathway icon)? Also, can the links please open in a separate tab?

[mirandaio]

@andrewhercules fixed.