@rcsb/rcsb-saguaro
Version:
RCSB 1D Feature Viewer
108 lines (107 loc) • 3.54 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const RcsbFv_1 = require("../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,
value: 23
}]
},
{
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");
},
tooltipGenerator: tooltipGenerator()
};
const sequenceConfigData = [
{
trackId: "sequenceTrack",
trackVisibility: false,
trackHeight: 20,
trackColor: "#F9F9F9",
displayType: "sequence" /* RcsbFvDisplayTypes.SEQUENCE */,
nonEmptyDisplay: true,
rowTitle: "SEQUENCE",
trackData: [
{
begin: 1,
label: sequence
}
]
}
];
const fv = new RcsbFv_1.RcsbFv({ elementId: "pfv", boardConfigData, rowConfigData: [...sequenceConfigData, ...rowConfigData] });
fv.then(() => {
console.log("Ready viewer");
});
function tooltipGenerator() {
return {
showTooltip: (d) => {
const tooltipDiv = document.createElement("div");
let region = "Begin: " + d.begin.toString();
if (typeof d.end === "number" && d.end != d.begin)
region += " End: " + d.end.toString();
const spanRegion = document.createElement("span");
spanRegion.append(region);
if (typeof d.value === "number") {
const valueRegion = document.createElement("span");
valueRegion.append(" | value: " + d.value);
spanRegion.append(valueRegion);
}
tooltipDiv.append(spanRegion);
return tooltipDiv;
}
};
}