Fix tooltip given new scroll work; make tooltip selector more unique

eweitz · Oct 28, 2018 · 5765107 · 5765107
1 parent dd86627
commit 5765107
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/src/js/annotations/events.js b/src/js/annotations/events.js
@@ -32,7 +32,7 @@ function startHideAnnotTooltipTimeout() {
   }
 
   this.hideAnnotTooltipTimeout = window.setTimeout(function () {
-    d3.select('.tooltip').transition()
+    d3.select('._ideogramTooltip').transition()
       .duration(500)
       .style('opacity', 0)
       .style('pointer-events', 'none')
@@ -42,8 +42,8 @@ function startHideAnnotTooltipTimeout() {
 function writeTooltip(tooltip, content, matrix, yOffset, ideo) {
   tooltip.html(content)
     .style('opacity', 1) // Make tooltip visible
-    .style('left', (window.pageXOffset + matrix.e) + 'px')
-    .style('top', (window.pageYOffset + matrix.f - yOffset) + 'px')
+    .style('left', matrix.e + 'px')
+    .style('top', (matrix.f - yOffset) + 'px')
     .style('pointer-events', null) // Prevent bug in clicking chromosome
     .on('mouseover', function () {
       clearTimeout(ideo.hideAnnotTooltipTimeout);
@@ -100,7 +100,7 @@ function showAnnotTooltip(annot, context) {
     annot = ideo.onWillShowAnnotTooltipCallback(annot);
   }
 
-  tooltip = d3.select('.tooltip');
+  tooltip = d3.select('._ideogramTooltip');
   tooltip.interrupt(); // Stop any in-progress disapperance
 
   matrix = context.getScreenCTM()

diff --git a/src/js/init/write-container.js b/src/js/init/write-container.js
@@ -51,9 +51,9 @@ function getContainerSvgClass(ideo) {
  * Write tooltip div setup with default styling.
  */
 function writeTooltipContainer(ideo) {
-  d3.select(ideo.config.container + ' #_ideogramOuterWrap').append("div")
-    .attr('class', 'tooltip')
-    .attr('id', 'tooltip')
+  d3.select(ideo.config.container + ' #_ideogramOuterWrap').append('div')
+    .attr('class', '_ideogramTooltip')
+    .attr('id', '_ideogramTooltip')
     .style('opacity', 0)
     .style('position', 'absolute')
     .style('text-align', 'center')
@@ -67,11 +67,13 @@ function writeTooltipContainer(ideo) {
 function writeContainerDom(taxid, ideo) {
   d3.select(ideo.config.container)
     .append('div')
-    .attr('id', '_ideogramOuterWrap')
+    .attr('id', '_ideogramOuterWrap') // contains tooltip + all else
+    .append('div')
+    .attr('id', '_ideogramMiddleWrap') // needed for overflow and scrolling
       .style('position', 'relative')
       .style('overflow-x', 'scroll')
     .append('div')
-    .attr('id', '_ideogramInnerWrap')
+    .attr('id', '_ideogramInnerWrap') // needed for overflow and scrolling
     .append('svg')
     .attr('id', '_ideogram')
     .attr('class', getContainerSvgClass(ideo))

diff --git a/src/js/views/draw-chromosomes.js b/src/js/views/draw-chromosomes.js
@@ -124,15 +124,15 @@ function rotateAndToggleDisplay(chrElement) {
 }
 
 function setOverflowScroll() {
-  var ideo, config, ideoWidth, ideoInnerWrap, ideoOuterWrap, ideoSvg,
+  var ideo, config, ideoWidth, ideoInnerWrap, ideoMiddleWrap, ideoSvg,
     ploidy, ploidyPad;
 
   ideo = this;
   config = ideo.config;
 
   ideoSvg = d3.select(config.container + ' svg#_ideogram');
   ideoInnerWrap = d3.select(config.container + ' #_ideogramInnerWrap');
-  ideoOuterWrap = d3.select(config.container + ' #_ideogramOuterWrap');
+  ideoMiddleWrap = d3.select(config.container + ' #_ideogramMiddleWrap');
 
   ploidy = config.ploidy;
   ploidyPad = (ploidy - 1);
@@ -152,7 +152,7 @@ function setOverflowScroll() {
 
   // Ensures absolutely-positioned elements, e.g. heatmap overlaps, display
   // properly if ideogram container also has position: absolute
-  ideoOuterWrap
+  ideoMiddleWrap
     .style('height', ideo._layout.getHeight() + 'px')
 
   ideoInnerWrap

diff --git a/test/web-test.js b/test/web-test.js
@@ -910,7 +910,7 @@ describe('Ideogram', function() {
 
     function callback() {
       d3.select('.annot path').dispatch('mouseover');
-      var content = d3.select('.tooltip').html();
+      var content = d3.select('._ideogramTooltip').html();
       assert.equal(content, 'BRCA1<br>chr17:43,044,294-43,125,482');
       d3.select('.annot path').dispatch('mouseout');
       done();