Merge pull request #1 from nickmelnikov82/allow-users-to-set-hoverinf…

…o-config Allow user to specify hoverinfo
plotly · Sep 24, 2021 · 794ebd4 · 794ebd4
2 parents 6b1b847 + f32b3e8
commit 794ebd4
Show file tree

Hide file tree

Showing 4 changed files with 475 additions and 417 deletions.
diff --git a/app/scripts/fornac.js b/app/scripts/fornac.js
@@ -33,6 +33,7 @@ export function FornaContainer(element, passedOptions) {
         'layout': 'standard-polygonal',
         'allowPanningAndZooming': true,
         'transitionDuration': 500,
+        'hoverPattern': '',
         'resizeSvgOnResize': true   //change the size of the svg when resizing the container
                                     //sometimes its beneficial to turn this off, especially when
                                     //performance is an issue
@@ -760,6 +761,10 @@ export function FornaContainer(element, passedOptions) {
         }
     };
 
+    self.setHoverPattern = function(newPattern) {
+        self.options['hoverPattern'] = newPattern || '';
+    }
+
     function mousedown() {
 
     }
@@ -1511,7 +1516,7 @@ export function FornaContainer(element, passedOptions) {
         .append('svg:title')
         .text(function(d) {
             if (d.nodeType == 'nucleotide') {
-                return d.structName + ':' + d.num;
+                return self.getTitleText(d)
             } else {
                 return '';
             }
@@ -1524,7 +1529,7 @@ export function FornaContainer(element, passedOptions) {
         .append('svg:title')
         .text(function(d) {
             if (d.nodeType == 'nucleotide') {
-                return d.structName + ':' + d.num;
+                return self.getTitleText(d)
             } else {
                 return '';
             }
@@ -1549,7 +1554,7 @@ export function FornaContainer(element, passedOptions) {
         labelsEnter.append('svg:title')
         .text(function(d) {
             if (d.nodeType == 'nucleotide') {
-                return d.structName + ':' + d.num;
+                return self.getTitleText(d)
             } else {
                 return '';
             }
@@ -1561,13 +1566,11 @@ export function FornaContainer(element, passedOptions) {
 
     var nodeTooltip = function(d) {
         nodeTooltips = {};
-
         nodeTooltips.nucleotide = d.num;
         nodeTooltips.label = '';
         nodeTooltips.pseudo = '';
         nodeTooltips.middle = '';
         nodeTooltips.protein = d.structName;
-
         return nodeTooltips[d.nodeType];
     };
 
@@ -1654,6 +1657,31 @@ export function FornaContainer(element, passedOptions) {
         self.updateStyle();
     };
 
+    self.getTitleText = function (d) {
+        var pattern = self.getHoverPattern(d)
+        var result = pattern;
+
+        var keys = pattern.split('${').slice(1).map(elem => elem.split('}')[0])
+
+        keys.forEach(key => {
+            var fieldValue = d[key];
+
+            if (!fieldValue) {
+                console.warn(`The property ${key} isn't correct node property`)
+                fieldValue = ''
+            }
+            result = result.replace(`\${${key}}`, fieldValue);
+        });
+        return result;
+    };
+
+    self.getHoverPattern = function(d) {
+        var structNameIsPresent = d['structName'] && d['structName'] !== 'empty'
+        var defaultPattern = structNameIsPresent ? '${structName}:${num}' : '${nodeType}:${num}'
+        var patternIsPresent = self.options['hoverPattern'] && self.options['hoverPattern'].length > 0
+        return patternIsPresent ? self.options['hoverPattern'] : defaultPattern;
+    }
+
     self.setSize();
 }