Merge pull request #244 from eweitz/hone-related-genes

Further speed up and polish UI in "Related genes"

api.md

@@ -34,9 +34,11 @@ var ideogram = new Ideogram({
 * [assembly](#assembly)
 * [barWidth](#barwidth)
 * [brush](#brush)
+* [chrBorderColor](#chrbordercolor)
 * [chrHeight](#chrheight)
 * [chrMargin](#chrmargin)
 * [chrWidth](#chrwidth)
+* [chrLabelColor](#chrlabelcolor)
 * [chrLabelSize](#chrlabelsize)
 * [chromosomes](#chromosomes)
 * [chromosomeScale](#chromosomescale)
@@ -126,6 +128,9 @@ Number.  Optional.  Default: 3.  The pixel width of bars drawn when `annotations
 ## brush
 String.  Optional.  Default: null.  Genomic coordinate range (e.g. "chr1:104325484-119977655") for a [brush](https://github.com/d3/d3-brush) on a chromosome.  Useful when ideogram consists of one chromosome and you want to be able to focus on a region within that chromosome, and create an interactive sliding window to other regions.  Example in [Brush](https://eweitz.github.io/ideogram/brush).
 
+## chrBorderColor
+String.  Optional.  Default: "#000".  The color of the border for each chromosome.
+
 ## chrHeight
 Number.  Optional.  Default: 400.  The pixel height of the tallest chromosome in the ideogram.  Examples in [Layout, small](https://eweitz.github.io/ideogram/layout_small) and [Annotations, basic](https://eweitz.github.io/ideogram/annotations-basic).
 
@@ -135,6 +140,9 @@ Number.  Optional.  Default: 10.  The pixel space of the margin between each chr
 ## chrWidth
 Number.  Optional.  Default: 10.  The pixel width of each chromosome.  Example in [Annotations, tracks](https://eweitz.github.io/ideogram/annotations-tracks).
 
+## chrLabelColor
+String. Optional.  Default: "#000".  The color of the label for each chromosome.
+
 ## chrLabelSize
 Number.  Optional.  Default: 9.  The pixel font size of chromosome labels.  Example in [Differential expression of genes](https://eweitz.github.io/ideogram/differential-expression).
 

examples/vanilla/related-genes.html

@@ -62,7 +62,7 @@ <h1>Related genes | Ideogram</h1>
   <a href="differential-expression">Next</a> |
   <a href="https://github.com/eweitz/ideogram/blob/gh-pages/related-genes.html" target="_blank">Source</a>
   <p>
-    Find interacting pathway genes and paralogs.  Uses data from
+    Search a gene and find interacting pathway genes and paralogs.  Uses data from
     <a href="https://rest.ensembl.org">Ensembl</a>,
     <a href="https://www.wikipathways.org">WikiPathways</a>, and
     <a href="https://mygene.info">MyGene.info</a>.
@@ -110,10 +110,16 @@ <h1>Related genes | Ideogram</h1>
   </div>
   <div style="float: left; width: 350px;">
     <label for="search-genes" id="search-container">
-      <input id="search-genes" autocomplete="off" placeholder="Search gene (e.g. RAD51)"/>
+      <input id="search-genes" autocomplete="off" placeholder="Search gene"/>
       <span id="search-button">
         <svg width="12" height="13"><g stroke-width="2" stroke="#FFF" fill="none"><path d="M11.29 11.71l-4-4"/><circle cx="5" cy="5" r="4"/></g></svg>
       </span>
+      <div style="font-size: 12px">
+        Examples:
+        <a href="?q=RAD51">RAD51</a>,
+        <a href="?q=CD4">CD4</a>,
+        <a href="?q=APOE">APOE</a>
+      </div>
     </label>
   </div>
   <br/><br/><br/>

src/js/annotations/legend.js

@@ -18,7 +18,7 @@ var legendStyle =
   '#_ideogramLegend li {float: none; margin: 0;}' +
   '#_ideogramLegend ul span {position: relative; left: -15px;} ';
 
-function getIcon(row) {
+function getIcon(row, ideo) {
   var icon, triangleAttrs, circleAttrs, rectAttrs,
     fill = 'fill="' + row.color + '" style="stroke: #AAA;"',
     shape = row.shape;
@@ -31,7 +31,12 @@ function getIcon(row) {
     if (shape === 'circle') {
       icon = '<path ' + circleAttrs + ' ' + fill + '></path>';
     } else if (shape === 'triangle') {
-      icon = '<path ' + triangleAttrs + ' ' + fill + '></path>';
+      var transform = '';
+      if (ideo.config.orientation === 'vertical') {
+        // Orient arrows in legend as they are in annotations
+        transform = ' transform="rotate(90, 7, 7)"';
+      }
+      icon = '<path ' + triangleAttrs + transform + ' ' + fill + '></path>';
     }
   } else {
     icon = '<rect ' + rectAttrs + ' ' + fill + '/>';
@@ -40,15 +45,17 @@ function getIcon(row) {
   return icon;
 }
 
-function getListItems(labels, svg, list, nameHeight) {
+function getListItems(labels, svg, list, nameHeight, ideo) {
   var i, icon, y, row;
+
   for (i = 0; i < list.rows.length; i++) {
     row = list.rows[i];
     labels += '<li>' + row.name + '</li>';
     y = lineHeight * i + nameHeight;
     if ('name' in list) y += lineHeight;
-    icon = getIcon(row);
-    svg += '<g transform="translate(0, ' + y + ')">' + icon + '</g>';
+    icon = getIcon(row, ideo);
+    const transform = 'translate(0, ' + y + ')';
+    svg += '<g transform="' + transform + '">' + icon + '</g>';
   }
 
   return [labels, svg];
@@ -72,7 +79,7 @@ function writeLegend(ideo) {
       labels = '<div>' + list.name + '</div>';
     }
     svg = '<svg id="_ideogramLegendSvg" width="' + lineHeight + '">';
-    [labels, svg] = getListItems(labels, svg, list, nameHeight);
+    [labels, svg] = getListItems(labels, svg, list, nameHeight, ideo);
     svg += '</svg>';
     content += svg + '<ul>' + labels + '</ul>';
   }

src/js/color.js

@@ -19,10 +19,12 @@ export class Color {
   }
 
   getBorderColor(chrSetIndex, chrIndex, armIndex) {
-    if (chrIndex < this._config.ploidy) {
-      return '#000';
+    const config = this._config;
+    const color = config.chrBorderColor ? config.chrBorderColor : '#000';
+    if (chrIndex < config.ploidy) {
+      return color;
     } else if (this._ploidy.exists(chrSetIndex, chrIndex, armIndex)) {
-      return '#000';
+      return color;
     } else {
       return '#fff';
     }

src/js/ideogram.js

@@ -196,10 +196,17 @@ export default class Ideogram {
    */
   static async fetchEnsembl(path, body = null, method = 'GET') {
     const init = {
-      method: method,
-      headers: {'Content-Type': 'application/json'}
+      method: method
     };
     if (body !== null) init.body = JSON.stringify(body);
+    if (method === 'GET') {
+      // Use HTTP parameter, not header, to avoid needless OPTIONS request
+      const delimiter = path.includes('&') ? '&' : '?';
+      path += delimiter + 'content-type=application/json';
+    } else {
+      // Method is POST, so content-type must be defined in header
+      init.headers = {'Content-Type': 'application/json'};
+    }
     const response = await fetch(`https://rest.ensembl.org${path}`, init);
     const json = await response.json();
     return json;

src/js/init/configure.js

@@ -151,13 +151,13 @@ function configureBands(ideo) {
 
 let configuredCss = staticCss;
 function configureTextStyle(ideo) {
-  if (!ideo.config.chrLabelSize) {
-    ideo.config.chrLabelSize = 9;
-    return;
-  }
+  const config = ideo.config;
+  if (!config.chrLabelSize) ideo.config.chrLabelSize = 9;
+  if (!config.chrLabelColor) ideo.config.chrLabelColor = '#000';
 
-  const size = ideo.config.chrLabelSize;
-  configuredCss += `#_ideogram text {font-size: ${size}px}`;
+  const size = `font-size: ${config.chrLabelSize}px`;
+  const color = `fill: ${config.chrLabelColor}`;
+  configuredCss += `#_ideogram text {${size}; ${color};}`;
 }
 
 /**