npm install @solgenomics/brapi-pedigree-viewer
The pedigree viewer exposes a minimal API for initializing and populating the tree. It relies on BrAPI to fetch the pedigree data it uses.
Use the following snippets (in order) to fully set up a tree.
var pdg = PedigreeViewer(
//REQUIRED Server: BrAPI.js handle for target endpoint
BrAPI("https://brapi.myserver.org/brapi/v1"),
//OPTIONAL a function which returns a link to a germplasm information page, returning null will create a node without a link.
function(germplasmDbId){
return "https://brapi.myserver.org/germ/"+germplasmDbId+".html";
}
);
pdg.newTree(
//REQUIRED root germplasmDbId of germplasm which should be displayed on start (highlighted in pink)
"1234"
)
pdg.drawViewer(
//REQUIRED selector for the parent node of the new viewer SVG element.
"div#pdgv-wrap",
//OPTIONAL width of viewer
800,
//OPTIONAL height of viewer
400
);
Use the pdg.data(accessor)
method to display marker or phenotype data. Data is displayed as a table to the right of each node in the tree. accessor
should be a function which takes a germplasmDbId returns an array or Promise which will resolve to an array in the following format:
// Example of data accessor return value
[
{
"name":"DS", // Unique name for data row
"values":[ // Array of data values to display in row
{
"value":"0", // Text to display as data value
"color":"#EEE" // background color of data value
},...
]
},...
]
// Source example
pdg.data(function(germplasmDbId){
return [
{name:"germplasmDbId",values:[
{value:germplasmDbId,color:"#ffb3ba"}
]}
]
})
// Source example
pdg.data(function(germplasmDbId){
return fetch(`https://mysite.com/api/marker_data/${germplasmDbId}`)
.then(resp=>resp.json())
.then(data=>data.markers);
/*
data.markers: [{
"name": "Marker:4:12202:REF",
"values": [{
"value": "REF",
"color": "#eeeeee"
}]
}, {
"name": "Marker:3:04993:GT",
"values": [{
"value": "T",
"color": "#baffc9"
}, {
"value": "A",
"color": "#ffb3ba"
}]
}, {
"name": "Marker:3:05002:GT",
"values": [{
"value": "A",
"color": "#ffb3ba"
}]
}]
*/
})