Merge pull request #177 from warelab/master

merge master into dev

Gruntfile.js

@@ -202,6 +202,9 @@ module.exports = function (grunt) {
     })();
 
     grunt.file.write('build/index.html', index);
+
+    var atlas = grunt.file.read('./static/atlasWidget.template.html')
+    grunt.file.write('build/atlasWidget.html', atlas);
   });
 
   grunt.registerTask('generateStaticFiles', ['exec:blogFeed', 'copy:assets', 'copy:icons', 'exec:generateStaticApp', 'packageIndexHtml']);

package.json

@@ -1,10 +1,10 @@
 {
   "name": "gramoogle",
-  "version": "2.3.4",
+  "version": "2.5.1",
   "description": "Gramene search interface",
   "main": "index.js",
   "gramene": {
-    "dbRelease": 51
+    "dbRelease": 52
   },
   "scripts": {
     "build": "grunt package",
@@ -26,12 +26,12 @@
     "gramene-bins-client": "^2.2.9",
     "gramene-client-cache": "1.0.0",
     "gramene-dalliance": "^0.13.2",
-    "gramene-dbxrefs": "3.0.1",
-    "gramene-genetree-vis": "^3.1.4",
+    "gramene-dbxrefs": "^3.0.2",
+    "gramene-genetree-vis": "3.1.4",
     "gramene-search-client": "^3.0.4",
     "gramene-search-vis": "^4.1.2",
     "gramene-taxonomy-with-genomes": "^3.0.8",
-    "gramene-trees-client": "^2.4.6",
+    "gramene-trees-client": "2.4.7",
     "lodash": "^4.3.0",
     "normalize.less": "^1.0.0",
     "numeral": "^1.5.3",

scripts/components/result/ResultBody.jsx

@@ -17,21 +17,25 @@ function renderMetadata(props) {
 }
 
 function renderTitle({searchResult}) {
-  let species, geneId;
+  let species, geneId, synonyms;
 
   if (searchResult.species_name) {
     species = <span className="species-name">{searchResult.species_name}</span>;
   }
   if (searchResult.id !== searchResult.name) {
     geneId = <span className="gene-id">{searchResult.id}</span>;
   }
-
+  if (searchResult.synonyms) {
+    // synonyms = searchResult.synonyms.filter(syn => syn !== searchResult.description).join(' ');
+    synonyms = searchResult.synonyms.filter(syn => /^GRMZM/.test(syn)).join(' ');
+  }
   return (
       <h3 className="gene-title">
         <span className="gene-name">{searchResult.name} </span>
         <wbr/>
-        <small className="gene-subtitle">{geneId} </small>
-        <small className="gene-species">{species}</small>
+        <small className="gene-id">{geneId} </small>
+        <small className="gene-synonyms">{synonyms}</small>
+        <small className="gene-species"> {species}</small>
       </h3>
   );
 }

scripts/components/result/details/_inventory.js

@@ -3,6 +3,7 @@
 import Location from './location.jsx';
 import Homology from './homology.jsx';
 import Xrefs from './xrefs.jsx';
+import Atlas from './expression.jsx';
 
 const inventory = [
 
@@ -19,6 +20,12 @@ const inventory = [
   //   reactClass: require('./domains.jsx')
   // },
   //
+  {
+    name: 'Expression',
+    capability: 'expression',
+    reactClass: Atlas
+  },
+
   {
     name: 'Homology',
     capability: 'homology',
@@ -31,6 +38,7 @@ const inventory = [
   //   reactClass: require('./pathways.jsx')
   // },
 
+
   {
     name: 'X-refs',
     capability: 'xrefs',

scripts/components/result/details/expression.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+export default class Atlas extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  render() {
+    const url = `./atlasWidget.html?geneQuery=${this.props.gene._id}&species=${this.props.gene.system_name.replace(/_/,'%20')}`;
+    return (
+      <iframe src={url} frameBorder="0" width="100%" height="300px">
+        <p>browser doesn't support iframes</p>
+      </iframe>
+    );
+  }
+}
+
+Atlas.propTypes = {
+  gene: React.PropTypes.object.isRequired
+};

scripts/components/result/details/xrefs/Xref.jsx

@@ -30,7 +30,7 @@ export default class Xref extends React.Component {
 
       ellipsis = (
         <li key="showMore" className="showAll">
-          <a title={ellipsisTitle} onClick={this.toggleShowAll}>{ellipsisChar}</a>
+          <a title={ellipsisTitle} onClick={this.toggleShowAll.bind(this)}>{ellipsisChar}</a>
         </li>
       );
 

scripts/components/result/result.jsx

@@ -73,6 +73,9 @@ export default class Result extends React.Component {
   }
 
   getApplicableDetails() {
+    if (this.props.searchResult.taxon_id === 29760) { // hard-coded exception for Vitis vinifera
+      this.props.searchResult.capabilities = _.filter(this.props.searchResult.capabilities, function(c) { return c !== 'expression'});
+    }
     const searchResult = this.props.searchResult;
     return _.filter(detailsInventory, function (geneDetail) {
       return _.includes(searchResult.capabilities, geneDetail.capability);

static/atlasWidget.template.html

@@ -0,0 +1,22 @@
+<!doctype html>
+<html>
+<head>
+    <script src="http://www.ebi.ac.uk/gxa/resources/js-bundles/vendorCommons.bundle.js"></script>
+    <script src="http://www.ebi.ac.uk/gxa/resources/js-bundles/expressionAtlasHeatmapHighcharts.bundle.js"></script>
+    <link rel="stylesheet" type="text/css"
+          href="style.css"/>
+    <link rel="stylesheet" type="text/css"
+          href="http://www.ebi.ac.uk/gxa/resources/css/customized-bootstrap-3.3.5.css"/>
+    <base target="_parent"/>
+</head>
+<body>
+    <div id="heatmapContainer"></div>
+    <script language="JavaScript" type="application/javascript">
+        expressionAtlasHeatmapHighcharts.render({
+            params: location.search.replace(/\?/,''),
+            isMultiExperiment: true,
+            target: "heatmapContainer"
+        });
+    </script>
+</body>
+</html>

static/index.template.html

@@ -5,6 +5,8 @@
     <title>Gramene Search</title>
     <script async src="//www.google-analytics.com/analytics.js"></script>
     <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
+    <!--<script src="//www.ebi.ac.uk/gxa/resources/js-bundles/vendorCommons.bundle.js"></script>-->
+    <!--<script src="//www.ebi.ac.uk/gxa/resources/js-bundles/expressionAtlasHeatmapHighcharts.bundle.js"></script>-->
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
     <script>
       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){

styles/main.less

@@ -33,4 +33,8 @@ body {
   body {
     padding-top: 97px;
   }
+}
+
+.expressionAtlas {
+  min-height: 260px;
 }

styles/results.less

@@ -49,9 +49,17 @@
       }
 
       /* don't wrap between, for example Arabidopsis // thaliana */
-      .gene-id, .species-name {
+      .gene-id {
         white-space: nowrap;
       }
+      .species-name {
+        white-space: nowrap;
+        font-style: italic;
+      }
+      .synonyms {
+        white-space: nowrap;
+        font-size: smaller;
+      }
 
       /* result-gene-title-body is the other flexbox'*/
       .closest-ortholog, .gene-summary-tair {