Enable tooltip on hover over ideogram bands

html/template.html

@@ -49,6 +49,7 @@
     main {
         grid-area: main;
         height: calc(100vh - 24px - 40px);
+        width: 100%;
     }
     aside {
         display: hidden;
@@ -180,7 +181,7 @@
     </div>
 </header>
 
-<main style="width: 100%;">
+<main>
 <div class="tab-bar">
     <span class="tab-name">
         <i class="tab-viewer-icon">
@@ -276,7 +277,7 @@
     // Then adding the application's canvas to the DOM body.
     main.appendChild(app.canvas);
 
-    // Listen for window resize events
+    // Listen for window resize events.
     window.addEventListener('resize', resize);
 
     resize();
@@ -308,42 +309,83 @@
     const ideoX = 15;
     const ideoY = 40;
 
+    graphics.interactive = true;
+    graphics.buttonMode = true;
+
+    const tooltip = new Text('', {
+        fontFamily: 'monospace',
+        fontSize: 9,
+        fill: 0x000000,
+        align: 'center'
+    });
+
+    tooltip.visible = false;
+    app.stage.addChild(tooltip);
+
+    graphics.on('mousemove', (event) => {
+        if (tooltip.visible) {
+            tooltip.position.set(event.data.global.x + 10, event.data.global.y + 10);
+        }
+    });
+
+    graphics.on('mouseout', () => {
+        tooltip.visible = false;
+    });
+
     graphics.rect(ideoX, ideoY, ideoWidth, ideoHeight);
     graphics.stroke({ width: 1, color: 0x333333 });
     graphics.fill(0xffffff);
 
     let bandY = ideoY;
     let acenSeen = false;
     for (let i = ideogramData.columns[0].values.length - 1; i >= 0; i--) {
-        let bandHeight = (ideogramData.columns[2].values[i] - ideogramData.columns[1].values[i])*ideoHeight/ideoLength;
+        let bandHeight = (ideogramData.columns[2].values[i] - ideogramData.columns[1].values[i]) * ideoHeight / ideoLength;
         let bandColor = ideogramData.columns[5].values[i];
+        let stain = ideogramData.columns[4].values[i];
+
+        const band = new Graphics();
+
+        band.interactive = true;
+        band.buttonMode = true;
 
-        if (ideogramData.columns[4].values[i] == 'acen') {
-            graphics.rect(ideoX, bandY, ideoWidth, bandHeight);
-            graphics.stroke({ width: 1, color: 0xffffff });
+        band.on('mouseover', () => {
+            tooltip.text = stain;
+            tooltip.visible = true;
+        });
+
+        band.on('mouseout', () => {
+            tooltip.visible = false;
+        });
+
+        if (stain == 'acen') {
+            const blank = new Graphics();
+            blank.rect(ideoX, bandY, ideoWidth, bandHeight);
+            blank.stroke({ width: 2, color: 0xffffff });
+            blank.fill("#ffffff");
+            graphics.addChild(blank);
 
             if (!acenSeen) {
-                graphics.moveTo(ideoX, bandY);
-                graphics.lineTo(ideoX + ideoWidth - 0.5, bandY);
-                graphics.lineTo(ideoX + (ideoWidth/2), bandY + bandHeight);
-                graphics.lineTo(ideoX, bandY);
+                band.moveTo(ideoX, bandY);
+                band.lineTo(ideoX + ideoWidth - 0.5, bandY);
+                band.lineTo(ideoX + (ideoWidth / 2), bandY + bandHeight);
+                band.lineTo(ideoX, bandY);
             } else {
-                graphics.moveTo(ideoX, bandY + bandHeight);
-                graphics.lineTo(ideoX + ideoWidth - 0.5, bandY + bandHeight);
-                graphics.lineTo(ideoX + (ideoWidth/2), bandY);
-                graphics.lineTo(ideoX, bandY + bandHeight);
+                band.moveTo(ideoX, bandY + bandHeight);
+                band.lineTo(ideoX + ideoWidth - 0.5, bandY + bandHeight);
+                band.lineTo(ideoX + (ideoWidth / 2), bandY);
+                band.lineTo(ideoX, bandY + bandHeight);
             }
 
-            graphics.stroke({ width: 1, color: 0x333333 });
-            graphics.fill(bandColor);
-
+            band.stroke({ width: 1, color: 0x333333 });
+            band.fill(bandColor);
             acenSeen = true;
         } else {
-            graphics.rect(ideoX, bandY, ideoWidth, bandHeight);
-            graphics.stroke({ width: 0, color: 0x333333 });
-            graphics.fill(bandColor);
+            band.rect(ideoX, bandY, ideoWidth, bandHeight);
+            band.stroke({ width: 0, color: 0x333333 });
+            band.fill(bandColor);
         }
 
+        graphics.addChild(band);
         bandY += bandHeight;
     }