Enable static draw for pathways

examples/vanilla/gene-leads.html

@@ -242,6 +242,7 @@ <h1>Gene Leads<small>Enrich your gene search</small></h1>
       organism: organism,
       container: '#ideogram-container',
       // fontFamily: "'Montserrat', sans-serif",
+      showVariantInTooltip: plotGeneFromUrl,
       onLoad: plotGeneFromUrl,
       onPlotFoundGenes: reportFoundGenes,
       onHoverLegend: reportLegendMetrics,

karma.conf.js

@@ -16,10 +16,10 @@ module.exports = function(config) {
     // list of files / patterns to load in the browser
     files: [
       'src/js/index.js',
-      // 'test/offline/**.test.js',
-      // 'test/online/**.test.js',
+      'test/offline/**.test.js',
+      'test/online/**.test.js',
       // 'test/online/related-genes.test.js',
-      'test/offline/gene-structure.test.js',
+      // 'test/offline/gene-structure.test.js',
       // 'test/offline/tissue.test.js',
       {pattern: 'dist/data/**', watched: false, included: false, served: true, nocache: false}
     ],

package.json

@@ -54,7 +54,8 @@
     "fast-kde": "0.2.1",
     "fflate": "^0.7.3",
     "tippy.js": "6.3.7",
-    "workbox-range-requests": "7.0.0"
+    "workbox-range-requests": "7.0.0",
+    "snarkdown": "^2.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",

src/js/annotations/annotations.js

@@ -287,9 +287,9 @@ export function applyRankCutoff(annots, cutoff, ideo) {
 export function setAnnotRanks(annots, ideo) {
   if (annots.length === 0) return annots;
   if ('initRank' in annots[0] === false) {
-    if ('geneCache' in ideo === false) return annots;
+    if ('geneCache' in Ideogram === false) return annots;
 
-    const ranks = ideo.geneCache.interestingNames;
+    const ranks = Ideogram.geneCache.interestingNames;
 
     return annots.map(annot => {
       if (ranks.includes(annot.name)) {

src/js/ideogram.js

@@ -68,6 +68,15 @@ import {
   plotRelatedGenes, getRelatedGenesByType
 } from './kit/related-genes';
 
+import {
+  drawPathway as _drawPathway,
+  getPathwayGenes as _getPathwayGenes
+} from './kit/pathway-viewer.js';
+
+import {
+  initCaches as _initCaches
+} from './init/caches/cache';
+
 export default class Ideogram {
   constructor(config) {
 
@@ -340,4 +349,55 @@ export default class Ideogram {
   static initGeneLeads(config, annotsInList='all') {
     return _initGeneLeads(config, annotsInList);
   }
+
+  /**
+   * Wrapper for drawing biological pathways using cached WikiPathways data
+   *
+   * @param {String} pwId WikiPathways ID, e.g. "WP5109"
+   * @param {String} sourceGene Symbol of source gene, e.g. "LDLR"
+   * @param {String} destGene Symbol of destination gene, e.g. "PCSK9"
+   * @param {String} outerSelector DOM selector of container, e.g. "#my-diagram"
+   * @param {Object} dimensions Height and width of pathway diagram
+   * @param {Boolean} showClose Whether to show close button
+   * @param {Function} geneNodeHoverFn Function to call upon hovering diagram node
+  */
+  static drawPathway(
+    pwId, sourceGene, destGene,
+    outerSelector,
+    dimensions={height: 440, width: 900},
+    showClose=true,
+    geneNodeHoverFn=undefined,
+    pathwayNodeClickFn=undefined
+  ) {
+    _drawPathway(
+      pwId, sourceGene, destGene,
+      outerSelector,
+      dimensions=dimensions,
+      showClose=showClose,
+      geneNodeHoverFn=geneNodeHoverFn,
+      pathwayNodeClickFn=pathwayNodeClickFn
+    );
+  }
+
+  /**
+   * Wrapper for initializing cached data
+   *
+   * @param {Object} config Includes organism, useCache, etc.
+  */
+  static initCaches(config={
+    organism: 'homo-sapiens', useCache: true,
+    awaitCache: true,
+    showGeneStructureInTooltip: true
+  }) {
+    _initCaches(config);
+  }
+
+  /**
+   * Get list of gene names in pathway
+   *
+   * @param {Object} config Includes organism, useCache, etc.
+  */
+  static getPathwayGenes() {
+    return _getPathwayGenes();
+  }
 }

src/js/init/caches/cache.js

@@ -45,9 +45,8 @@ import {parseVariantCacheIndex} from './variant-cache-worker';
  * possible completely offline (i.e. a progressive web component) -- but only
  * once caches are populated.
  */
-export async function initCaches(ideo) {
+export async function initCaches(config) {
 
-  const config = ideo.config;
   if (!config.useCache) return;
 
   const organism = config.organism;
@@ -60,31 +59,35 @@ export async function initCaches(ideo) {
     // resolves a Promise, whereas the others return upon completing their
     // respective initializations.
     const cachePromise = Promise.all([
-      cacheFactory('gene', organism, ideo, cacheDir),
-      cacheFactory('paralog', organism, ideo, cacheDir),
-      cacheFactory('interaction', organism, ideo, cacheDir),
-      cacheFactory('synonym', organism, ideo, cacheDir),
+      cacheFactory('gene', organism, config, cacheDir),
+      cacheFactory('paralog', organism, config, cacheDir),
+      cacheFactory('interaction', organism, config, cacheDir),
+      cacheFactory('synonym', organism, config, cacheDir),
     ]);
 
     if (config.showGeneStructureInTooltip) {
-      cacheFactory('geneStructure', organism, ideo, cacheDir);
-      cacheFactory('protein', organism, ideo, cacheDir);
-      cacheFactory('tissue', organism, ideo, cacheDir);
-      cacheFactory('variant', organism, ideo, cacheDir);
+      cacheFactory('geneStructure', organism, config, cacheDir);
+      cacheFactory('protein', organism, config, cacheDir);
+      cacheFactory('tissue', organism, config, cacheDir);
+      if (config.showVariantInTooltip) {
+        cacheFactory('variant', organism, config, cacheDir);
+      }
     }
 
     return cachePromise;
 
   } else {
-    cacheFactory('gene', organism, ideo, cacheDir);
-    cacheFactory('paralog', organism, ideo, cacheDir);
-    cacheFactory('interaction', organism, ideo, cacheDir);
+    cacheFactory('gene', organism, config, cacheDir);
+    cacheFactory('paralog', organism, config, cacheDir);
+    cacheFactory('interaction', organism, config, cacheDir);
     if (config.showGeneStructureInTooltip) {
-      cacheFactory('geneStructure', organism, ideo, cacheDir);
-      cacheFactory('protein', organism, ideo, cacheDir);
-      cacheFactory('synonym', organism, ideo, cacheDir);
-      cacheFactory('tissue', organism, ideo, cacheDir);
-      cacheFactory('variant', organism, ideo, cacheDir);
+      cacheFactory('geneStructure', organism, config, cacheDir);
+      cacheFactory('protein', organism, config, cacheDir);
+      cacheFactory('synonym', organism, config, cacheDir);
+      cacheFactory('tissue', organism, config, cacheDir);
+      if (config.showVariantInTooltip) {
+        cacheFactory('variant', organism, config, cacheDir);
+      }
     }
   }
 }
@@ -140,14 +143,14 @@ const allCacheProps = {
   }
 };
 
-function setGeneCache(parsedCache, ideo) {
+function setGeneCache(parsedCache) {
   const [
     interestingNames, nameCaseMap, namesById, fullNamesById,
     idsByName, lociByName, lociById
     //, sortedAnnots
   ] = parsedCache;
 
-  ideo.geneCache = {
+  Ideogram.geneCache = {
     interestingNames, // Array ordered by general or scholarly interest
     nameCaseMap, // Maps of lowercase gene names to proper gene names
     namesById,
@@ -159,46 +162,46 @@ function setGeneCache(parsedCache, ideo) {
   };
 }
 
-function setParalogCache(parsedCache, ideo) {
+function setParalogCache(parsedCache) {
   const paralogsByName = parsedCache;
   // Array of paralog Ensembl IDs by (uppercase) gene name
-  ideo.paralogCache = {paralogsByName};
+  Ideogram.paralogCache = {paralogsByName};
 }
 
-function setInteractionCache(parsedCache, ideo) {
+function setInteractionCache(parsedCache) {
   const interactionsByName = parsedCache;
-  ideo.interactionCache = interactionsByName;
+  Ideogram.interactionCache = interactionsByName;
 }
 
-function setGeneStructureCache(parsedCache, ideo) {
+function setGeneStructureCache(parsedCache) {
   const featuresByGene = parsedCache;
-  ideo.geneStructureCache = featuresByGene;
+  Ideogram.geneStructureCache = featuresByGene;
 }
 
-function setProteinCache(parsedCache, ideo) {
-  ideo.proteinCache = parsedCache;
+function setProteinCache(parsedCache) {
+  Ideogram.proteinCache = parsedCache;
 }
 
-function setSynonymCache(parsedCache, ideo) {
-  ideo.synonymCache = parsedCache;
+function setSynonymCache(parsedCache) {
+  Ideogram.synonymCache = parsedCache;
 }
 
-function setTissueCache(parsedCache, ideo) {
-  ideo.tissueCache = parsedCache;
+function setTissueCache(parsedCache) {
+  Ideogram.tissueCache = parsedCache;
 }
 
-function setVariantCache(parsedCache, ideo) {
-  ideo.variantCache = parsedCache;
+function setVariantCache(parsedCache) {
+  Ideogram.variantCache = parsedCache;
 }
 
-async function cacheFactory(cacheName, orgName, ideo, cacheDir=null) {
+async function cacheFactory(cacheName, orgName, config, cacheDir=null) {
 
   const cacheProps = allCacheProps[cacheName];
-  const debug = ideo.config.debug;
+  const debug = config.debug;
 
   /**
- * Fetch cached gene data, transform it usefully, and set it as ideo prop
- */
+   * Fetch cached gene data, transform it usefully, and set it as Ideogram prop
+   */
   const startTime = performance.now();
   let perfTimes = {};
 
@@ -211,7 +214,6 @@ async function cacheFactory(cacheName, orgName, ideo, cacheDir=null) {
   // Skip initialization if cache is already populated
   if (Ideogram[staticProp] && Ideogram[staticProp][orgName]) {
     // Simplify chief use case, i.e. for single organism
-    ideo[staticProp] = Ideogram[staticProp][orgName];
     return;
   }
 
@@ -233,8 +235,8 @@ async function cacheFactory(cacheName, orgName, ideo, cacheDir=null) {
   //   cacheWorker.postMessage(message);
   //   cacheWorker.addEventListener('message', event => {
   //     [parsedCache, perfTimes] = event.data;
-      cacheProps.fn(parsedCache, ideo, orgName);
-      Ideogram[staticProp][orgName] = ideo[staticProp];
+      cacheProps.fn(parsedCache, orgName);
+      Ideogram[staticProp][orgName] = Ideogram[staticProp];
 
       if (debug) {
         console.timeEnd(`${cacheName}Cache total`);

src/js/init/caches/tissue-cache-worker.js

@@ -27,16 +27,15 @@ function processIds(ids) {
   return processedIds;
 }
 
-async function getTissueExpressions(gene, ideo) {
-  const cache = ideo.tissueCache;
+async function getTissueExpressions(gene, config) {
+  const cache = Ideogram.tissueCache;
   const byteRange = cache.byteRangesByName[gene];
 
   // Easier debuggability
-  if (!ideo.cacheRangeFetch) ideo.cacheRangeFetch = cacheRangeFetch;
+  if (!Ideogram.cacheRangeFetch) Ideogram.cacheRangeFetch = cacheRangeFetch;
 
   if (!byteRange) return null;
 
-  const config = ideo.config;
   let cacheDir = null;
   if (config.cacheDir) cacheDir = config.cacheDir;
   const cacheType = 'tissues';

src/js/init/caches/variant-cache-worker.js

@@ -171,11 +171,11 @@ function parseVariant(line, variantCache) {
 async function getVariants(gene, ideo) {
   const variants = [];
 
-  const cache = ideo.variantCache;
+  const cache = Ideogram.variantCache;
   const byteRange = cache.byteRangesByName[gene];
 
   // Easier debuggability
-  if (!ideo.cacheRangeFetch) ideo.cacheRangeFetch = cacheRangeFetch;
+  if (!Ideogram.cacheRangeFetch) Ideogram.cacheRangeFetch = cacheRangeFetch;
 
   if (!byteRange) return [];
 
@@ -188,7 +188,7 @@ async function getVariants(gene, ideo) {
   const orgName = 'homo-sapiens';
   const cacheUrl = getCacheUrl(orgName, cacheDir, cacheType, extension);
 
-  const geneLocus = ideo.geneCache.lociByName[gene];
+  const geneLocus = Ideogram.geneCache.lociByName[gene];
 
   // Get variant data only for the requested gene
   const data = await cacheRangeFetch(cacheUrl, byteRange);

src/js/init/finish-init.js

@@ -119,7 +119,7 @@ function finishInit(t0) {
   if (config.geometry === 'collinear') collinearizeChromosomes(ideo);
 
   if (ideo.config.debug) console.time('initCache: Ideogram');
-  initCaches(ideo).then(() => {
+  initCaches(ideo.config).then(() => {
     if (ideo.config.debug) console.timeEnd('initCache: Ideogram');
     if (ideo.onLoadCallback) ideo.onLoadCallback();
   });