/
CustomTooltip.ts
120 lines (109 loc) · 3.67 KB
/
CustomTooltip.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
import {
RcsbFvBoardConfigInterface,
RcsbFvRowConfigInterface
} from "../RcsbFv/RcsbFvConfig/RcsbFvConfigInterface";
import {RcsbFv} from "../RcsbFv/RcsbFv";
import {RcsbFvDisplayTypes} from "../RcsbFv/RcsbFvConfig/RcsbFvDefaultConfigValues";
import {RcsbFvTrackDataElementInterface} from "../RcsbDataManager/RcsbDataManager";
const sequence = "MTTQAPTFTQPLQSVVVLEGSTATFEAHISGFPVPEVSWFRDGQVISTSTLPGVQISFSD" +
"GRAKLTIPAVTKANSGRYSLKATNGSGQATSTAELLVKAETAPPNFVQRLQSMTVRQGSQ" +
"VRLQVRVTGIPTPVVKFYRDGAEIQSSLDFQISQEGDLYSLLIAEAYPEDSGTYSVNATN" +
"SVGRATSTAELLVQGEEEVPAKKTKTIVSTAQISESRQTRIEKKIEAHFDARSIATVEMV";
const rowConfigData: RcsbFvRowConfigInterface[] = [
{
trackId: "compositeSequence1",
trackHeight: 20,
trackColor: "#F9F9F9",
displayType: RcsbFvDisplayTypes.COMPOSITE,
rowTitle: "ZOOM ME",
displayConfig: [
{
displayType: RcsbFvDisplayTypes.BLOCK,
displayColor: "#9999FF",
displayId:"compositeBlockSequence",
displayData: [{
begin:50,
end:80,
value: 23
}]
},
{
displayType: RcsbFvDisplayTypes.PIN,
displayColor: "#FF9999",
displayId:"compositePin",
displayData: [{
begin:55
},{
begin:75
}]
},
{
displayType: RcsbFvDisplayTypes.SEQUENCE,
displayColor: "#000000",
displayId:"compositeSeqeunce",
displayData: [{
begin:50,
label:"TCLLDELDTAGQEEYSAMRDQYMRTSEGFLC"
}]
}
]
}
];
const boardConfigData: RcsbFvBoardConfigInterface = {
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: RcsbFvRowConfigInterface[] = [
{
trackId: "sequenceTrack",
trackVisibility: false,
trackHeight: 20,
trackColor: "#F9F9F9",
displayType: RcsbFvDisplayTypes.SEQUENCE,
nonEmptyDisplay: true,
rowTitle: "SEQUENCE",
trackData: [
{
begin: 1,
label: sequence
}
]
}];
const fv = new RcsbFv({elementId:"pfv", boardConfigData, rowConfigData: [...sequenceConfigData, ...rowConfigData]});
fv.then(()=>{
console.log("Ready viewer");
});
function tooltipGenerator( ) {
return {
showTooltip: (d: RcsbFvTrackDataElementInterface) => {
const tooltipDiv = document.createElement<"div">("div");
let region: string = "Begin: "+d.begin.toString();
if(typeof d.end === "number" && d.end!=d.begin) region += " End: "+d.end.toString();
const spanRegion: HTMLSpanElement = document.createElement<"span">("span");
spanRegion.append(region);
if(typeof d.value === "number"){
const valueRegion: HTMLSpanElement = document.createElement<"span">("span");
valueRegion.append(" | value: "+d.value);
spanRegion.append(valueRegion);
}
tooltipDiv.append(spanRegion);
return tooltipDiv;
}
}
}