Target profile page rewrite: Create "Chemical Probes" summary widget

opentargets / issues

Issue tracker for Open Targets Platform and Open Targets Genetics Portal

https://platform.opentargets.org https://genetics.opentargets.org

Apache License 2.0

12 stars 2 forks source link

Target profile page rewrite: Create "Chemical Probes" summary widget #333

Closed andrewhercules closed 5 years ago

andrewhercules commented 5 years ago

Use case(s)

As a user, I want to know if there are any chemical probes that have been developed for a given gene

Summary widget (showing different states depending on data)

chemical-probes

Full size version

Key design and interaction notes

Please make the checkmark the check icon from FontAwesome (e.g. <i class="fas fa-check"></i>)
Please make the X the times icon from FontAwesome (e.g. <i class="fas fa-times"></i>)
If we have any data for a given gene, please make the widget icon, widget border, and widget text dark grey (#5A5F5F)
If we have specific data for a given gene (e.g. probe data from Chemical Probes Portal), please make the background of the box purple (#7B196A) and the checkmark white (#ffffff) and likewise, if we don't have the specific data, please make the background of the box white and the X icon light grey (#E2DFDF)
If we do not have data for a given gene, please make widget icon, widget border, and widget text light grey (#E2DFDF)

Design assets

Colour codes are available on the OT Core Platform Team Google Drive

peatroot commented 5 years ago

@andrewhercules, can we drop the source list beneath the table? It breaks the pattern across widgets, but the information is duplicated in the above design.

andrewhercules commented 5 years ago

I know it's not ideal given that it's a direct duplication of content, but I'd suggest that we keep the source list to promote consistency. In the case of this widget, I've flagged it as one that I'd like to explore a bit further once we have the drug index and updated tractability data - perhaps it will no longer be needed?

@peatroot, that being said, if there's a way to configure the widgets to show/hide the source - and perhaps for our partners whether the source is internal or external - that would be useful for future widgets and future planning. What do you think?

peatroot commented 5 years ago

Ok, let's leave the sources in. We can consider adding a toggle, but I'd be in favour of only supporting toggles like that in the configuration if partners have actually asked for it. The current configuration in the webapp is quite extensive, but we don't really know how much of it is used.

peatroot commented 5 years ago

Proposed schema:

type TargetSummaryChemicalProbes {
  hasStructuralGenomicsConsortium: Boolean!
  hasChemicalProbesPortal: Boolean!
  hasOpenScienceProbes: Boolean!
  hasProbeMiner: Boolean!
}

peatroot commented 5 years ago

Now looks like the above (removed text Data on potential chemical probes available from, since this made the content overflow at some screen resolutions).

andrewhercules commented 5 years ago

I'm re-opening this as we will need to find a way around the content overflow issue. What exactly is the problem caused by smaller screen resolutions? At what resolution is the issue seen?

peatroot commented 5 years ago

@andrewhercules , at 1295px width, the text Structural Genomics Consortium wraps, making the checkbox grid take up the full widget, with reasonable margins. The text Data on potential chemical probes available from might just fit if we can avoid this happening (eg. writing SGC instead), but it looks a bit cramped. I could also reduce the font size a bit?

peatroot commented 5 years ago

(taken at 1295px width)

andrewhercules commented 5 years ago

Noted about the responsiveness issue for the text - we can possibly address in a subsequent iteration.

@MichaelaEBI, the amended widget view above, is that okay? The detail view will still provide further information about the individual probes.

MichaelaEBI commented 5 years ago

It looks great. The "Data on potential chemical probes" is not ideal anyway since the first three should be high quality probes. Only Probe Miner (with a space!) provides information on potential probes.

If it helps we could replace "Structural Genomics Consortium" with "SGC Chemical Probes" since that is what the section on their website is called.

andrewhercules commented 5 years ago

@MichaelaEBI, is it okay if we just use SGC for now, to compensate for the overflow and responsiveness issue identified above?

MichaelaEBI commented 5 years ago

SGC is fine, but "SGC Chemical Probes" is shorter than "Chemical Probes Portal" so should not cause any problem, right?

andrewhercules commented 5 years ago

True, my only concern is that we'd have:

SGC, SGC Chemical Probes ...

Since we're just listing sources - and not providing any links - I'm not that concerned about the repetition. But just want to make sure it's scientifically correct :)

MichaelaEBI commented 5 years ago

Chemical Probes Portal, Open Science Probes and Probe Miner (note the space in Probe Miner) are also repeated. I guess it doesn't really matter what we use, we should just be consistent, ie., use the same wording in the table and below. Also, we are using an acronym for the Structural Genomics Consortium but not the other ones.

andrewhercules commented 5 years ago

Okay, so let's use the following for the summary widget table, the summary widget sources, and in the detail view data table:

SGC Chemical Probes Portal Open Science Probes Probe Miner

mirandaio commented 5 years ago

@andrewhercules text has been updated (SGC, space in Probe Miner). Can you check this issue here https://platform-app.netlify.com/target/ENSG00000091831 and see if we can close this? Thanks!

andrewhercules commented 5 years ago

Looks good @mirandaio. I've updated the status to "Done" and will close this ticket.