<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ebi.emblstatic.net/web_guidelines/EBI-Icon-fonts/v1.2/fonts.css" type="text/css" media="all"/>
<script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/protvista-pdb-3.3.0.js"></script>
</head>
<body>
<h4>ProtVista PDB custom data demo</h4>
<div>
<protvista-pdb custom-data="true" id="pv1"></protvista-pdb>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
//Get web-component element
const pvInstance = document.getElementById('pv1');
if(!pvInstance) return;
(async () => {
// PDBe sequence conservation api data
let scFetch = await fetch('https://www.ebi.ac.uk/pdbe/graph-api/uniprot/sequence_conservation/P29373');
let scResponseData = await scFetch.json();
const seqConservationData = scResponseData;
// seqConservationData is a json array with following fields. Please refer the fetch api url for the data struture
// [
// {
// "start": 1,
// "end": 1,
// "conservation_score": 1,
// "tooltipContent": "Conservation score: 1",
// "amino": [
// {
// "end": 1,
// "letter": "P",
// "proba": 0.428,
// "start": 1,
// "color": "#c0c000",
// "tooltipContent": "Amino acid: PRO<br/>Probability: 42.80%"
// },...
// ]
// }...
// ]
// PDBe variation api data
let vrFetch = await fetch('https://www.ebi.ac.uk/pdbe/graph-api/uniprot/protvista/variation/P29373');
let vrResponseData = await vrFetch.json();
const variationData = vrResponseData;
// variationData is a json with following fields. Please refer the fetch api url for the data struture
// {
// "sequence": "PNFSGNWKIIRSENFEELLKVLGVNVMLRKIAVAAASKPAVEIKQEGDTFYIKTSTTVRTTEINFKVGEEFEEQTVDGRPCKSLVKWESENKMVCEQKLLKGEGPKTSWTRELTNDGELILTMTADDVVCTRVYVRE",
// "variants": [
// {
// "accession": "NC_000001.11:g.156705439T>C",
// "association": [],
// "clinicalSignificances": null,
// "color": "#002594",
// "end": "2",
// "polyphenScore": 0.003,
// "siftScore": 0.055,
// "sourceType": "large_scale_study",
// "start": "2",
// "tooltipContent": "XYZ Variant",
// "variant": "S",
// "xrefNames": [
// "gnomAD"
// ],
// "keywords": [ // Keywords are used to filter the variats
// "predicted",
// "large_scale_studies"
// ]
// },...
// ]
// }
//Custom data model
const customData = {
displayNavigation: true, // Set to false to hide navigation scale
displaySequence: true, // Set to false to hide sequence track
sequence: 'MPNFSGNWKIIRSENFEELLKVLGVNVMLRKIAVAAASKPAVEIKQEGDTFYIKTSTTVRTTEINFKVGEEFEEQTVDGRPCKSLVKWESENKMVCEQKLLKGEGPKTSWTRELTNDGELILTMTADDVVCTRVYVRE', //Protein sequence
length: 138, // Length of the sequence
offset: 1, // Offset navigation scale start. Example offset:10 will display the navigation start from 10 instead of default 1.
tracks: [ // Array of track objects (PDBe implementation extends core ProtVista track component. Refer - https://github.com/ebi-webcomponents/nightingale/tree/master/packages/protvista-track#data-array for all the supported track properties )
{
label: "Domains", // Track label
labelType: "text", // Supported values 'text' and 'html'
data: [
{
accession: "d1", // Some unique id
type: "UniProt range", // Displayed in tooltip title
label: "Domain 1", // Expected values 'text' and 'html'
labelTooltip: "Residues mapped to domain 1", // Label tooltip content. Support text and HTML mark-up
locations: [ // Array of sub-tracks
{
fragments : [ // Array of sub-track fragments
{
start: 1, // Track start value
end: 56, // Track end value
tooltipContent: "Type: domain 1<br>Range: XYZ1 - XYZ56", // track tooltip content. Support text and HTML mark-up
color: "rgb(135,158,247)" // track (fragment) colour, supported rgb and hex code value
},
{
start: 70,
end: 130,
tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130",
color: "rgb(160,174,232)"
}
]
}
]
},
{
accession: "d2",
type: "UniProt range",
label: "<div><i class='icon icon-generic' data-icon=';' style='color: #000;'></i> <a href='resource.xyz'>Domain 2</a></div>", //HTML strcutured label with font-icons. You can add any HTML markup.
labelTooltip: "<strong>Domain Compound</strong><br><img src='https://www.ebi.ac.uk/pdbe/static/files/pdbechem_v2/REA_200.svg'>", // labelTooltip HTML mark-up example displaying compound image in the tooltip.
locations: [
{
fragments : [
{
start: 1,
end: 20,
tooltipContent: "<strong>Type: domain 2</strong><br>Range: XY1 - XYZ20<br><a href='resource.xyz' style='color:blue'>view details</a>", // tooltipContent HTML mark-up example
color: "rgb(107,119,39)"
},
{
start: 22,
end: 137,
tooltipContent: "Type: domain 2<br>Range: XYZ22 - XYZ137",
color: "rgb(90,102,23)"
}
]
}
]
}
]
},
{
label: "Annotations",
labelType: "text",
labelColor: "rgb(128,128,128)", // Set labelColor to change label background colour
data: [
{
accession: "a1",
type: "UniProt range",
label: "Annotations 1",
labelType: "text",
labelTooltip: "Residues mapped to annotations 1",
labelColor: "rgb(211,211,211)",
color: "rgb(255,99,163)",
locations: [
{
fragments : [
{
start: 1,
end: 56,
tooltipContent: "Type: domain 1<br>Range: XYZ1 - XYZ56"
},
{
start: 70,
end: 130,
tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130"
}
]
}
]
}
]
},
{
label: "Annotation shapes",
data: [
{
accession: "s1",
type: "UniProt range",
label: "Circle",
color: "rgb(249,166,2)",
shape: 'circle', // supported shapes rectangle|bridge|diamond|chevron|catFace|triangle|wave|hexagon|pentagon|circle|arrow|doubleBar,
locations: [
{
fragments : [
{
start: 5,
end: 5,
tooltipContent: "Type: domain 1<br>Range: XYZ1 - XYZ56",
},
{
start: 9,
end: 9,
tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130"
}
]
}
]
},
{
accession: "s2",
type: "UniProt range",
label: "Diamond",
shape: 'diamond',
color: "rgb(255,99,163)", // Default colour value for all fragments in this track
locations: [
{
fragments : [
{
start: 5,
end: 5,
tooltipContent: "Type: domain 1<br>Range: XYZ1 - XYZ56"
},
{
start: 9,
end: 9,
color: "rgb(0,128,129)", // Set colour here for individual shape fragment. This will override the track default colour.
tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130"
},
{
start: 20,
end: 20,
tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130"
},
{
start: 22,
end: 22,
tooltipContent: "Type: domain 1<br>Range: XYZ70 - XYZ130"
}
]
}
]
}
]
}
],
sequenceConservation: seqConservationData, // Set this property to display your own sequence conservation data. Refer comments at the top for data structure.
variants: variationData, // Set this property to display your own variation data. Refer comments at the top for data structure.
legends: {
alignment: 'right', // expected values 'left', 'right' or 'center'
data: { // Legend Row, key is used as the row label
"Domains": [ // legends for Domains row
{
color: ["rgb(135,158,247)", "rgb(160,174,232)"], // legend color, supported rgb and hex code value
text: "Domains 1" // legend text
},
{
color: ["rgb(107,119,39)", "rgb(90,102,23)"],
text: "Domains 2"
}
],
"Annotations": [ // legends for Annotation row row
{
color: ["rgb(255,99,163)"],
text: "Custom Annotations"
}
]
}
}
};
// Assign custom data object to instance viewerdata property
pvInstance.viewerdata = customData;
})();
});
</script>
</body>
</html>