Creating a Frontend UI for the Pharmacogenomics widget using the PharmGKB data

[prashantuniyal02]

We want to create a UI for the Pharmacogenomics widget where we can integrate PharmGKB data into the Platform. This ticket is for the development of the UI which will be done by the FE team

Dependencies

• [x] The JSON schema details compiled by the data team can be found here: #3110
• [x] Mapping ChEBI identifiers to ChEMBL #3116
• [x] The product and design related discussion can be found here: #3098
• [x] Process PharmGKB data #3128
• [x] Implement the required backend changes #3127

Tasks

• [x] To create a frontend for the Pharmacogenomics widget (diagram in the comments below)

Acceptance tests

1. Netlify link and tested in the development deployment

[DSuveges]

I think there are a few bits that needs to be clarified (make the epic more granular):

• Any implications on PIS
• Any implications on POS

[buniello]

Draft of Pharmacogenetics widgets below (discussed with Irene and reviewed by Ellie): Built on this Json Schema

1) Widget on target ( "Targetfromsourceid”) profile page Will be placed between the ”Safety” and "Chemical probes” widgets Datatypeid: "clinical_annotation”

2) Widget on drug ("Drugid”) page
Will be placed between the ”Drug warnings” and the “Pharmacovigilance” widgets Datatypeid: "clinical_annotation”

Please note comment from Ellie: we could choose to display just 1A and 2A values for the evidenceLevel field. This will probably enrich the data with drugs that have a Chebi/Chembl mapping as per #3116 Tagging @ireneisdoomed to this as well.

[jdhayhurst]

Hi @opentargets/fe-team. As part of ETL we will add one more field, the ChEMBL id, which is the main drug identifier used in the platform. If we exposed the data with this schema through the API, would that give you everything you need to complete the widget? Please let me know if there are any additional requirements.

[jdhayhurst]

@opentargets/fe-team I'm making the necessary API changes and wanted to double check this is what you expect.

For the target profile the api query would look like:

query PharmacogenomicsQuery($ensemblId: String!) {
  target(ensemblId: $ensemblId) {
    id
    pharmacogenomics {
      variantRsId
      genotypeId
      variantFunctionalConsequenceId
      drugId
      phenotypeText
      pgxCategory
      evidenceLevel
      studyId
      literature
    }
  }
}

The response would look like:

{
  "data": {
    "target": {
      "id": "ENSG00000001626",
      "pharmacogenomics": [
        {
          "variantRsId": "rs193922525",
          "genotypeId": "7_117664770_G_A,A",
          "variantFunctionalConsequenceId": "SO_0001583",
          "drugId": "CHEMBL2010601",
          "phenotypeText": "Cystic Fibrosis",
          "pgxCategory": "efficacy",
          "evidenceLevel": "1A",
          "studyId": "1183960790",
          "literature": [
            "25266159",
            "22293084"
          ]
        },
        {
          "variantRsId": "rs121908757",
          "genotypeId": "7_117587799_A_C,C",
          "variantFunctionalConsequenceId": "SO_0001583",
          "drugId": "CHEMBL2010601",
          "phenotypeText": "Cystic Fibrosis",
          "pgxCategory": "efficacy",
          "evidenceLevel": "1A",
          "studyId": "1183960766",
          "literature": [
            "28947035",
            "25266159",
            "26474553",
            "22293084"
          ]
        },
       ...

For the drug profile the query would be:

query pharmacogenomicsQuery($chemblId: String!) {
  drug(chemblId: $chemblId) {
    id
    pharmacogenomics {
      targetFromSourceId
      variantRsId
      genotypeId
      variantFunctionalConsequenceId
      phenotypeText
      pgxCategory
      evidenceLevel
      studyId
      literature
    }
  }
}

And the response like:

{
  "data": {
    "drug": {
      "id": "CHEMBL2010601",
      "pharmacogenomics": [
        {
          "targetFromSourceId": "ENSG00000001626",
          "variantRsId": "rs193922525",
          "genotypeId": "7_117664770_G_A,A",
          "variantFunctionalConsequenceId": "SO_0001583",
          "phenotypeText": "Cystic Fibrosis",
          "pgxCategory": "efficacy",
          "evidenceLevel": "1A",
          "studyId": "1183960790",
          "literature": [
            "25266159",
            "22293084"
          ]
        },
        {
          "targetFromSourceId": "ENSG00000001626",
          "variantRsId": "rs121908757",
          "genotypeId": "7_117587799_A_C,C",
          "variantFunctionalConsequenceId": "SO_0001583",
          "phenotypeText": "Cystic Fibrosis",
          "pgxCategory": "efficacy",
          "evidenceLevel": "1A",
          "studyId": "1183960766",
          "literature": [
            "28947035",
            "25266159",
            "26474553",
            "22293084"
          ]
        },
        ...

I've truncated the above responses because the query returns everything. If you need pagination or counts or anything else, please let me know. @opentargets/data-team - I assume returning everything is going to be ok i.e. the response size will not be enormous for any given target/drug?

[carcruz]

Thanks @jdhayhurst everything looks great!

[LucaFumis]

(edited message) Thanks @jdhayhurst. Looking at the mockups for the widgets, it seems some columns require extra info, for example tooltips and links.

Example for widget on Target page: GenotypeId: needs also a description for tooltip Variant consequence: needs variant info for tooltip, not sure which field Drugs: needs drug name and id for the link Adverse outcome: phenotypeText + phenotypeFromSourceId for the link? tooltip: genotypeAnnotationText ? Adverse Outcome Category: possibly pgxCategory ?

On Drug page: almost all fields are the same, except Gene: targetFromSourceId, but would also need target name/symbol?

[jdhayhurst]

Hi @LucaFumis, thanks for looking though it. The full schema is here https://github.com/opentargets/issues/issues/3127#issuecomment-1775078317. All those fields are available, and I think they cover everything in the widget (it looks like I missed some fields from my graphql queries above - apologies for that). Can you let me and the @opentargets/data-team know if all fields you need are there. In your comment, I think you're referring to the json-schema, which is a json-schema describing the data that we can use for validation, but the schema you probably need is the graphql schema. The graphql schema is simply as follows:

type Pharmacogenomics {
  drugId: String
  drugFromSourceId: String
  datasourceId: String
  datasourceVersion: String
  datatypeId: String
  drugFromSource: String
  evidenceLevel: String
  genotype: String
  genotypeAnnotationText: String
  genotypeId: String
  literature: [String!]
  pgxCategory: String
  phenotypeFromSourceId: String
  phenotypeText: String
  studyId: String
  targetFromSourceId: String
  variantFunctionalConsequenceId: String
  variantRsId: String
  isDirectTarget: Boolean!
}

To be clear, I've added this Pharmacogenomics object to the target and drug objects, so all of these fields are accessible. None of them expand into custom objects, i.e. the genotype is a simply a string. If this is a requirement for any field (I don't think it is), please let me know.

So, for example, on the target page, under "Genotype ID", it's my understanding that we need provide the values from pharmacogenomics.genotypeId. The tooltip is just a hard-coded description with a link ("here") to somewhere that doesn't appear to be specified (@buniello?).

I hope that helps! Please let me know if you need anything else

[ireneisdoomed]

Thank you @LucaFumis and @jdhayhurst for looking into it!

Some comments on top of @buniello 's specifications: Target and drug widgets

• variantFunctionalConsequence is nullable. This is a SO term that needs to be resolved.
• phenotypeText is still not filtered to pick out actual adverse outcomes from drug responses. @LucaFumis, can you rename "Adverse Outcome" to "Drug Response" and "Adverse Outcome Category" to "Drug Response Category"? These are more general terms.

Target widget

• Drug column:
  • The text should be drugFromSource
  • Hyperlink to drugId. Not all drugs will have a drugId.
  • @jdhayhurst we are not using drugFromSourceId anywhere. So strictly speaking you could omit this field from the API if you wanted.

Drug widget

• Gene column:
  • The text should be the name of the resolved Ensembl ID in targetFromSourceId
  • Hyperlink to targetFromSourceId
  • @LucaFumis, tooltip text is now built based on isDirectTarget
    • when True: "The variant is in the drug's primary target gene.."
    • when False: "The variant is outside the drug's primary target gene."

The rest of the fields are as pointed out in the widget prototype. Please chip in @opentargets/data-team @d0choa if you have any comments

[jdhayhurst]

Also phenotypeFromSourceId is nullable, which is used to construct the "Adverse Outcome" hyperlink

[jdhayhurst]

Here's the API as it stands (added Drug, Target and SequenceOntologyTerm objects):

type Pharmacogenomics {
  datasourceId: String
  datasourceVersion: String
  datatypeId: String
  drugId: String
  drugFromSource: String
  evidenceLevel: String
  genotype: String
  genotypeAnnotationText: String
  genotypeId: String
  literature: [String!]
  pgxCategory: String
  phenotypeFromSourceId: String
  phenotypeText: String
  studyId: String
  targetFromSourceId: String
  variantFunctionalConsequenceId: String
  variantRsId: String
  isDirectTarget: Boolean!
  variantFunctionalConsequence: SequenceOntologyTerm
  drug: Drug
  target: Target
}

If there's anything needs changing, just let me know 😉

[LucaFumis]

Thank you @ireneisdoomed and @jdhayhurst for the feedback and input. I probably won't be working on it, but let me know in case anything needed...

[carcruz]

@chinmehta is working on the UI now. By now, we will be using sample data, and as soon as the data is in dev, we change it.

[chinmehta]

@prashantuniyal02 @jdhayhurst Missing fields from mockup/api

Target and drug

• [ ] genotypeId → tooltip see here for more details, "here" link is missing
• [ ] source→ pharmgkb is missing
• [ ] literature→ link to pmid, complete link details and multiple literature id shown details if more than one id-> open in a drawer / show in same column

[jdhayhurst]

Thanks @chinmehta! We might need some clarification from @prashantuniyal02 or @buniello on these last points you've raised. 1) genotypeId → tooltip see here for more details, "here" link is missing - I agree that we need clarification on where the link "here" goes. 2) I may have this wrong, but I don't think "pharmgkb" is a field, instead I think it's the link text. The link URL is constructed from the studyId field. 3) Not sure what how multiple pmids should be displayed, but it looks like all they need is the pmid to construct the link (like in the bibliography widget to europepmc). But if that's exactly what @buniello had in mind for this part?

[prashantuniyal02]

For point 3, can we adopt the same behaviour as is present in the GEL PanelApp, UniProt literature or UniProt curated variants widget which have a Literature column?

[buniello]

Thank you @jdhayhurst @chinmehta @prashantuniyal02 Replying to James' points:

1. here link is: https://github.com/apriltuesday/opentargets-pharmgkb/tree/issue-18#variant-coordinate-computation
2. yes, you are right - text PharmGKB, linking out from the studyid field (as per my widget draft above)
3. (see Prashant's comment above)

[chinmehta]

Thank you ! Also i noticed "Genotype ID" and "Confidence (Level)" have same static tooltip text. Would it make sense to move tooltip to column header ?

[buniello]

@chinmehta that is a good idea!

[buniello]

Already discussed and benchmarked with @chinmehta - (please let me know if anything is not clear) We would like to harmonise the pharmacogenomics widget to the Clinvar one, by adding:

• [x] Chip/link to ProtVar for missense variants (requested by Ellie)
• [x] Hyperlinks to Ensembl for rsids
• [x] VEP/ProtVar chips should look exactly same as in the Clinvar widget

[buniello]

@chinmehta, as already discussed on slack, please see points below and let me know if everything is clear

• [x] The current preview position of PGx widget in both target and drug pages are good.

• [x] There is a typo in the widget header in drug page e.g.: https://deploy-preview-283--ot-platform.netlify.app/drug/CHEMBL2010601.

Header should spell: Genetic variants that are associated with the response to drugId. Source: [PharmGKB](https://www.pharmgkb.org/). thedrugId` field should expose the drug name.

[buniello]

Latest version of drug and target profile PGx widgets are in the testing phase (external and internal test included).

[ireneisdoomed]

@chinmehta Some comments on the widget on drug and target pages:

• The box for the Level 2 evidence is white, so it looks like there is no data.
• The tooltip that has a granular description of the genotype is "floating" when the drug response phenotype is null. @buniello, not sure what is the best way to show this.

[buniello]

Good catch @ireneisdoomed! will discuss these with @chinmehta on wednesday

[prashantuniyal02]

A bug in the widget:

• [x] The widget crashes when the search query is not found in the table (similar to #3084) - This will keep happening till we fix the root cause for this. @chinmehta

---

2 points raised by David:

• [x] Should the default sorting be done in the confidence level (1A > 1B > 2A > 2B)?
• [x] Are the color pallets for 1B correct? (1A and 1B are green and 2A and 2B are blue in PharmGKB)

Case in point: /target/ENSG00000167397

FYI @buniello