Target profile page rewrite: Create "Drugs" detail view

[andrewhercules]

As part of the ongoing Drug Entity project, we should consider aggregating the drugs data in the PoC project. I did some preliminary research on how to redesign the drugs data table and would recommend that we aggregate the data based on the phase and status. So for example, all Phase I - Completed records for the same drug-disease-target association would appear in a single row with relevant external links. However, because the data returned by the API is not currently aggregated, this is something we would need to implement at the GraphQL layer.

See #7 for more information

[andrewhercules]

Use case(s)

1. As a user, I want to know additional information about the known drugs that modulate a certain gene based on clinical trials, ATC, DailyMed, or FDA data.

Detail view

Full size version

Key design and interaction notes

• The summary visualisation widgets at the top are in keeping with current drugs data table design pattern
• Please make the summary visualisation widgets interactive with the DC.js library (e.g. clicking on the widget will filter the data table below)
• For the summary visualisation widgets, please allow users to download the SVG in SVG or PNG format as some users would like to use those visualisations for reports and presentations
• Please ensure that by default, the data table shows 10 records

Design assets

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

[peatroot]

Proposed schema:

enum DrugActivity {
  AGONIST
  ANTAGONIST
  UP_OR_DOWN
}
enum DrugType {
  SMALL_MOLECULE
  PROTEIN
  ENZYME
  ANTIBODY
  OLIGOSACCHARIDE
  OLIGONUCLEOTIDE
  UNKNOWN
}
enum ClinicalTrialStatus {
  ACTIVE_NOT_RECRUITING
  COMPLETED
  NOT_APPLICABLE
  NOT_YET_RECRUITING
  RECRUITING
  SUSPENDED
  TERMINATED
  UNKNOWN_STATUS
  WITHDRAWN
}
type Disease {
  id: String!
  name: String!
}
type Drug {
  id: String!
  name: String!
  type: DrugType!
  activity: DrugActivity!
}
type ClinicalTrial {
  phase: Int!
  status: ClinicalTrialStatus
  sourceUrl: String!
  sourceName: String!
}
type MechanismOfAction {
  name: String!
  sourceUrl: String
  sourceName: String
}
type EvidenceRowDrugs {
  target: Target!
  disease: Disease!
  drug: Drug!
  clinicalTrial: ClinicalTrial!
  mechanismOfAction: MechanismOfAction!
}
type TargetDetailDrugs {
  rows: [EvidenceRowDrugs!]!
}

[ElaineMcA]

Decisions from FE meeting 05Dec:

1. Change "type" from doughnut to bar chart format

2. Visual for disease info needed Options:
   a) Click on associated diseases in summary table on LHS and open up sunburst display. b) Remove activity graph and replace with disease visual if space needed to accommodate

3. Updates to table headers/ groupings required:

   • Trial info
   • Drug info
   • Target info

[andrewhercules]

Based on the feedback from yesterday's meeting, I have updated the mockup.

@MichaelaEBI: have I organised the columns correctly?

@iandunham and @peatroot: I'm still concerned about the potential complexity of showing all of the diseases due to limited space. As an interim measure, what if we had chips representing the therapeutic areas found in the table and if a user clicks on one or more therapeutic areas, the table is filtered?

[iandunham]

We can try this with the TAs. The data may lead to most entries being in just one TA, but worth seeing.

For the type vs activity plot, you currently just have a bar chart of type - is there supposed to be some representation of activity on there as well?

[MichaelaEBI]

@andrewhercules the table column organisation looks good to me. Will the other drug tables (on disease and evidence pages) have the same layout? Tiny detail, I would move the clinical trial columns next to the disease column, but that is probably a very subjective preference.

[andrewhercules]

@iandunham, I've updated the plot to show different shades for the activity, similar to what we already have in the Platform. What do you think?

@MichaelaEBI, I like your idea. I've changed the column order so that it reads something like:

For disease, there is a clinical trial in phase - status using drug to modulate target.

Is that correct?

[iandunham]

Yes, that looks right

[peatroot]

@andrewhercules, why not keep type and activity as separate bar charts? They are more intuitive individually and work better as filters that way, I think.

Therapeutic areas could also be displayed as a bar chart counting diseases within each therapeutic area, which would give a sense of where the focus is. There are around 20 therapeutic areas, but most targets won't have drug evidence hitting all of them.

[andrewhercules]

We could represent the therapeutic areas as a bar chart, but we'd only have enough space to show the areas where there is data - especially if we break the type vs. activity chart into two charts so that users can use them to filter the table.

[andrewhercules]

Just confirmed with @LucaFumis that we're okay to have the Activity data as a pie chart

[LucaFumis]

This has now been merged into master as per PR https://github.com/opentargets/platform-app/pull/31

[andrewhercules]

@LucaFumis, looks great! :)

Can we please add some code in the application to alter the case of the values to lowercase and remove the underscores? So for example, changing NOT_YET_RECRUITING to Not yet recruiting or not yet recruiting.

[LucaFumis]

This has been addressed in https://github.com/opentargets/platform-app/pull/33 and merged.

[andrewhercules]

Ticket closed as QC work completed