@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
89 lines (88 loc) • 2.74 kB
JavaScript
import { RcsbFv } from "../RcsbFv/RcsbFv";
const sequence = "MTTQAPTFTQPLQSVVVLEGSTATFEAHISGFPVPEVSWFRDGQVISTSTLPGVQISFSD" +
"GRAKLTIPAVTKANSGRYSLKATNGSGQATSTAELLVKAETAPPNFVQRLQSMTVRQGSQ" +
"VRLQVRVTGIPTPVVKFYRDGAEIQSSLDFQISQEGDLYSLLIAEAYPEDSGTYSVNATN" +
"SVGRATSTAELLVQGEEEVPAKKTKTIVSTAQISESRQTRIEKKIEAHFDARSIATVEMV";
const rowConfigData = [
{
trackId: "compositeSequence1",
trackHeight: 20,
trackColor: "#F9F9F9",
displayType: "composite" /* RcsbFvDisplayTypes.COMPOSITE */,
rowTitle: "ZOOM ME",
displayConfig: [
{
displayType: "block" /* RcsbFvDisplayTypes.BLOCK */,
displayColor: "#9999FF",
displayId: "compositeBlockSequence",
displayData: [{
begin: 50,
end: 80
}]
},
{
displayType: "pin" /* RcsbFvDisplayTypes.PIN */,
displayColor: "#FF9999",
displayId: "compositePin",
displayData: [{
begin: 55
}, {
begin: 75
}]
},
{
displayType: "sequence" /* RcsbFvDisplayTypes.SEQUENCE */,
displayColor: "#000000",
displayId: "compositeSeqeunce",
displayData: [{
begin: 50,
label: "TCLLDELDTAGQEEYSAMRDQYMRTSEGFLC"
}]
}
]
}
];
const boardConfigData = {
length: sequence.length,
trackWidth: 940,
includeAxis: false,
includeTooltip: true,
//disableMenu: true,
highlightHoverElement: true,
hideInnerBorder: true,
hideRowGlow: false,
elementClickCallback: (e) => {
console.log(e);
},
selectionChangeCallback: (e) => {
console.log(">>> ", e);
},
onFvRenderStartsCallback: () => {
console.log("Fv starts");
}
};
const sequenceConfigData = [
{
trackId: "sequenceTrack",
trackVisibility: false,
trackHeight: 20,
trackColor: "#F9F9F9",
displayType: "sequence" /* RcsbFvDisplayTypes.SEQUENCE */,
nonEmptyDisplay: true,
rowTitle: "SEQUENCE",
trackData: [
{
begin: 1,
label: sequence
}
]
}
];
const element = document.getElementById("pfv");
if (element == null) {
throw "Unable to locate element";
}
const fv = new RcsbFv({ elementId: element, boardConfigData, rowConfigData: [...sequenceConfigData, ...rowConfigData] });
fv.then(() => {
console.log("Ready viewer");
});