Merge pull request #377 from eweitz/simpler-leads-config

Simplify configuration for Gene Leads

Author: eweitz

examples/vanilla/gene-leads-lite.html

@@ -29,22 +29,24 @@ <h1>Gene Leads Lite<small>Minimal <a href="https://github.com/eweitz/ideogram/bl
     <div id="ideogram-container" style="visibility: hidden;"></div>
     <div>
       <pre>
-        /** Upon clicking a triangular annotation or tooltip, plot that gene */
+        // Setup
+        npm install ideogram
+
+        // Either use a modern import statement
+        import Ideogram from 'ideogram'
+
+        // or use a classic HTML script tag
+        &lt;script src="https://cdn.jsdelivr.net/npm/ideogram@1.50.0/dist/js/ideogram.min.js"&gt;&lt;/script&gt;
+
+        // Upon clicking a triangular annotation, plot that gene
         function onClickAnnot(annot) {
           ideogram.plotRelatedGenes(annot.name);
         }
 
-        // Ideogram configuration object
-        config = {
-          organism: 'homo-sapiens',
+        const ideogram = Ideogram.initGeneLeads({
           container: '#ideogram-container',
-          legendName: 'Gene leads',
-          showGeneStructureInTooltip: true,
-          showProteinInTooltip: true,
           onClickAnnot
-        }
-
-        const ideogram = Ideogram.initGeneLeads(config);
+        });
       </pre>
     </div>
   </div>
@@ -54,17 +56,12 @@ <h1>Gene Leads Lite<small>Minimal <a href="https://github.com/eweitz/ideogram/bl
       ideogram.plotRelatedGenes(annot.name);
     }
 
-    // Ideogram configuration object
-    config = {
+    // Instantiate Gene Leads ideogram
+    const ideogram = Ideogram.initGeneLeads({
       organism: 'homo-sapiens',
       container: '#ideogram-container',
-      legendName: 'Gene leads',
-      showGeneStructureInTooltip: true,
-      showProteinInTooltip: true,
       onClickAnnot
-    }
-
-    const ideogram = Ideogram.initGeneLeads(config);
+    });
   </script>
 </body>
 </html>

examples/vanilla/gene-leads.html

@@ -224,7 +224,6 @@ <h1>Gene Leads<small>Enrich your gene search</small></h1>
       updateUrl();
 
       ideogram.config.relatedGenesMode = 'related';
-      const selector = '#ideogram-container #_ideogramInnerWrap'
       ideogram.plotRelatedGenes(annot.name);
     }
 
@@ -246,8 +245,6 @@ <h1>Gene Leads<small>Enrich your gene search</small></h1>
       onLoad: plotGeneFromUrl,
       onPlotFoundGenes: reportFoundGenes,
       onHoverLegend: reportLegendMetrics,
-      showGeneStructureInTooltip: true,
-      showProteinInTooltip: true,
       onClickAnnot
     }
 

src/js/init/organism-metadata.js

@@ -41,7 +41,6 @@ var organismMetadata = {
       'Pan_tro 3.0': 'GCF_000001515.7'
     },
     hasGeneCache: true,
-    hasParalogCache: true,
     hasSynonymCache: true
   },
   10116: {

src/js/kit/protein-color.js

@@ -646,7 +646,8 @@ export function getColors(domainType) {
     domainType === 'Laminin domain II' ||
     domainType === 'Troponin I residues 1-32' || // e.g. TNNI3 in ACMG
     domainType === 'KI67R' || // KI67 / Chmadrin repeat
-    domainType.includes('FAD-binding')
+    domainType.includes('FAD-binding') ||
+    domainType.includes('Glucagon') // e.g. GCG, which encodes GLP-1
   ) {
     return [orange, orangeLines];
   } else if (

src/js/kit/related-genes.js

@@ -873,7 +873,8 @@ async function fetchParalogs(annot, ideo) {
     homologs = hasParalogs ? paralogsByName[nameUc] : [];
   } else {
     const params = `&format=condensed&type=paralogues&target_taxon=${taxid}`;
-    const path = `/homology/id/${annot.id}?${params}`;
+    const organismUnderscore = ideo.config.organism.replace('-', '_');
+    const path = `/homology/id/${organismUnderscore}/${annot.id}?${params}`;
     const ensemblHomologs = await Ideogram.fetchEnsembl(path);
     homologs = ensemblHomologs.data[0].homologies;
   }
@@ -1950,6 +1951,8 @@ const globalKitDefaults = {
   onDidShowAnnotTooltip,
   showTools: true,
   showAnnotLabels: true,
+  showGeneStructureInTooltip: true,
+  showProteinInTooltip: true,
   chrFillColor: {centromere: '#DAAAAA'}
 };