Simplify toggling DE section

eweitz · Oct 19, 2022 · 2c66ae5 · 2c66ae5
1 parent 9290ee7
commit 2c66ae5
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 19 deletions.
diff --git a/src/js/ideogram.js b/src/js/ideogram.js
@@ -68,8 +68,6 @@ import {
   plotRelatedGenes, getRelatedGenesByType
 } from './kit/related-genes';
 
-import {_toggleDEDetail} from './kit/gene-leads';
-
 export default class Ideogram {
   constructor(config) {
 
@@ -342,21 +340,12 @@ export default class Ideogram {
     return _initGeneHints(config, annotsInList);
   }
 
-    /**
+  /**
    * Wrapper for Ideogram constructor, with generic "Related genes" options
    *
    * @param {Object} config Ideogram configuration object
    */
-     static initGeneLeads(config, annotsInList='all') {
-      return _initGeneLeads(config, annotsInList);
-    }
-
-  /**
-   * Toggle differential expression detail view in gene leads kit
-   *
-   * @param {Boolean} showDetail Whether to show detail view
-   */
-  static toggleDEDetail(showDetail) {
-    return _toggleDEDetail(showDetail);
+  static initGeneLeads(config, annotsInList='all') {
+    return _initGeneLeads(config, annotsInList);
   }
 }
diff --git a/src/js/kit/gene-leads.js b/src/js/kit/gene-leads.js
@@ -1,4 +1,4 @@
-export function _toggleDEDetail(showDetail) {
+export function toggleDEDetail(showDetail) {
   const detailDisplay = showDetail ? '' : 'none';
   const summaryDisplay = showDetail ? 'none' : '';
   document.querySelector('._ideoDEDetail').style.display = detailDisplay;
@@ -34,8 +34,6 @@ function parseDE(items) {
   // '"';
   // const moreAttrs = `${moreStyle} class="_ideoDifferentialExpressionMore"`;
   // const more = `<span ${moreAttrs}>...</span>`;
-  const onMouseEnterDE = `onMouseEnter="Ideogram.toggleDEDetail(true);"`;
-  const onMouseLeaveDE = `onMouseLeave="Ideogram.toggleDEDetail(false);"`;
   const summary = `<div class="_ideoDESummary">${prettyGroups}</div>`;
 
   const detailStyle = 'style="display: none; margin-top: 15px;"';
@@ -45,7 +43,7 @@ function parseDE(items) {
     `</div>`;
   const result =
     `<br/><br/>` +
-    `<div class="_ideoDESection" ${onMouseEnterDE} ${onMouseLeaveDE}>` +
+    `<div class="_ideoDESection">` +
       preamble + summary + detail +
       '<style>' +
         '._ideoDEDetail table { width: 375px; margin: 0 auto;}' +
@@ -57,6 +55,13 @@ function parseDE(items) {
   return result;
 }
 
+export function onDidShowGeneLeadsAnnotTooltip() {
+  const deSection = document.querySelector('._ideoDESection');
+  if (!deSection) return;
+  deSection.addEventListener('mouseenter', () => toggleDEDetail(true));
+  deSection.addEventListener('mouseleave', () => toggleDEDetail(false));
+}
+
 /** Called immediately before displaying features along chromosomes */
 export function onDrawGeneLeadsAnnots(ideo) {
   if (ideo.config.relatedGenesMode !== 'leads') return;

diff --git a/src/js/kit/related-genes.js b/src/js/kit/related-genes.js
@@ -40,7 +40,9 @@ import {
 } from './wikipathways';
 // import {drawAnnotsByLayoutType} from '../annotations/draw';
 // import {organismMetadata} from '../init/organism-metadata';
-import {onDrawGeneLeadsAnnots} from './gene-leads'
+import {
+  onDrawGeneLeadsAnnots, onDidShowGeneLeadsAnnotTooltip
+} from './gene-leads'
 
 /** Sets DOM IDs for ideo.relatedAnnots; needed to associate labels */
 function setRelatedAnnotDomIds(ideo) {
@@ -1582,6 +1584,7 @@ function _initGeneHints(config, annotsInList) {
   config.legend = citedLegend;
 
   config.onDrawAnnots = plotGeneLeads;
+  config.onDidShowAnnotTooltip = onDidShowGeneLeadsAnnotTooltip;
 
   const kitDefaults = Object.assign({
     relatedGenesMode: 'leads',