diff --git a/protein_feature_view/templates/protein_feature_view/index.html b/protein_feature_view/templates/protein_feature_view/index.html
index e384427..9ba3419 100644
--- a/protein_feature_view/templates/protein_feature_view/index.html
+++ b/protein_feature_view/templates/protein_feature_view/index.html
@@ -45,6 +45,57 @@
document.getElementById('pfv').innerHTML = '
No features available for ' + geneUniquename + '
';
}
+const tooltips = {};
+
+const tippyProps = {
+ theme: 'light-border', maxWidth: '550px', allowHTML: true,
+ followCursor: 'horizontal',
+};
+
+const trackWidth = scope == 'full' ? 970 : 650;
+
+const elementEnterCallBack = (obj, e) => {
+ if (obj.displayName) {
+ const tip = tippy(e.target);
+ let props = { ... tippyProps };
+ let content = '' + obj.displayName.replaceAll(',', ',​') + '
';
+
+ if (obj.annotated_terms && obj.annotated_terms.length > 0) {
+ for (annotated_term of obj.annotated_terms) {
+ content += '' + annotated_term.name + '
';
+ }
+ }
+
+ if (obj.display_extension) {
+ for (ext of obj.display_extension) {
+ content += '' + ext + '
';
+ }
+ }
+
+ if (obj.popupExtraContent) {
+ content += obj.popupExtraContent;
+ }
+
+ tip.setContent(content);
+
+ if (e.offsetX > trackWidth - 100 ||
+ obj.displayName.length > 60 && e.offsetX > trackWidth - 300) {
+ // avoid ovelapping the right hand controls
+ props.placement = 'left';
+ }
+ tip.setProps(props);
+ tip.show();
+ tooltips[obj.id] = tip;
+ }
+};
+
+const elementLeaveCallBack = (obj, e) => {
+ if (obj.id && tooltips[obj.id]) {
+ const tip = tooltips[obj.id];
+ tip.destroy();
+ }
+};
+
window.onload = (event) => {
fetch("/api/v1/dataset/latest/protein_features/" + scope + "/" + geneUniquename)
@@ -592,15 +643,6 @@
return;
}
- const tippyProps = {
- theme: 'light-border', maxWidth: '550px', allowHTML: true,
- followCursor: 'horizontal',
- };
-
- const tooltips = {};
-
- const trackWidth = scope == 'full' ? 970 : 650;
-
const boardConfigData = {
length: data.sequence.length,
trackWidth,
@@ -614,48 +656,14 @@
window.top.postMessage({selectedProteinFeatureId: obj.matchId}, '*');
}
- if (obj.displayName) {
- const tip = tippy(e.target);
- let props = { ... tippyProps };
- let content = '' + obj.displayName.replaceAll(',', ',​') + '
';
-
- if (obj.annotated_terms && obj.annotated_terms.length > 0) {
- for (annotated_term of obj.annotated_terms) {
- content += '' + annotated_term.name + '
';
- }
- }
-
- if (obj.display_extension) {
- for (ext of obj.display_extension) {
- content += '' + ext + '
';
- }
- }
-
- if (obj.popupExtraContent) {
- content += obj.popupExtraContent;
- }
-
- tip.setContent(content);
-
- if (e.offsetX > trackWidth - 100 ||
- obj.displayName.length > 60 && e.offsetX > trackWidth - 300) {
- // avoid ovelapping the right hand controls
- props.placement = 'left';
- }
- tip.setProps(props);
- tip.show();
- tooltips[obj.id] = tip;
- }
+ elementEnterCallBack(obj, e);
},
elementLeaveCallBack: function(obj, e) {
if (obj.matchId) {
window.top.postMessage({selectedProteinFeatureId: null}, '*');
}
- if (obj.id && tooltips[obj.id]) {
- const tip = tooltips[obj.id];
- tip.destroy();
- }
+ elementLeaveCallBack(obj, e);
},
};