gramene-search 1.2.76 → 1.2.78

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gramene-search",
-  "version": "1.2.76",
+  "version": "1.2.78",
   "description": "search wrapper for gramene",
   "source": "src/index.js",
   "main": "dist/index.js",

package/src/bundles/api.js

@@ -76,6 +76,26 @@ grameneSuggestions.doFocusFirstGrameneSuggestion = arg => ({dispatch, getState})
   console.log('inside doFocusFirstGrameneSuggestion');
 };
 
+function compressLongTaxonName(node) {
+  const fullName = node.name;
+  const removedExtraineousWords = fullName.replace(/( Group$| subsp\.| ssp\.| var\.| strain)/, '');
+  let finalVersion;
+  if (removedExtraineousWords.length > 20) {
+    let words = removedExtraineousWords.split(' ');
+    if (words.length === 2) {
+      // abrreviate first word.
+      finalVersion = removedExtraineousWords.replace(/^([A-Z])[a-z]+/, '$1.')
+    }
+    if (words.length > 2) {
+      finalVersion = removedExtraineousWords.replace(/^([A-Z])[a-z]+\s([a-z])[a-z]+/, '$1$2.')
+    }
+  }
+  else {
+    finalVersion = removedExtraineousWords;
+  }
+  node.short_name = finalVersion;
+}
+
 const grameneTaxonomy = createAsyncResourceBundle({
   name: 'grameneTaxonomy',
   actionBaseType: 'GRAMENE_TAXONOMY',
@@ -87,6 +107,7 @@ const grameneTaxonomy = createAsyncResourceBundle({
         let taxonomy = _.keyBy(taxNodes, '_id');
         taxNodes.forEach(t => {
           t._id = +t._id; // ensure taxonomy id is a number
+          compressLongTaxonName(t);
           if (t.hasOwnProperty("is_a")) {
             t.is_a.forEach(p_id => {
               const p = taxonomy[p_id];

package/src/components/results/GeneList.js

@@ -44,30 +44,41 @@ function trimSummary(summary) {
     return <p>{summary}</p>
   }
 }
+const PanLink = (props) => {
+  const gene = props.gene;
+  const pan = props.pan;
+  return <div className="gene-panlink">
+    <a target="_blank" href={pan.url + gene.id}>
+      <img src={pan.svg} title={`View this gene at ${pan.name}`}/>
+    </a>
+  </div>;
+};
 
 const ClosestOrthologCmp = (props) =>
 {
-  let id, taxon_id, name, desc, species;
+  let id, taxon_id, name, desc, species, className;
   const gene = props.gene;
 
-  if (gene.model_rep_id) {
+  if (gene.closest_rep_id) {
+    name = gene.closest_rep_name || gene.closest_rep_id;
+    desc = gene.closest_rep_description;
+    species = gene.closest_rep_species_name;
+    id = gene.closest_rep_id;
+    taxon_id = gene.closest_rep_taxon_id;
+    className = "closest-ortholog";
+  }
+  else if (gene.model_rep_id) {
     name = gene.model_rep_name || gene.model_rep_id;
     desc = gene.model_rep_description;
     species = gene.model_rep_species_name;
     id = gene.model_rep_id;
     taxon_id = gene.model_rep_taxon_id;
+    className = "model-ortholog";
   }
 
-  else if (gene.closest_rep_id) {
-    name = gene.closest_rep_name || gene.closest_rep_id;
-    desc = gene.closest_rep_description;
-    species = gene.closest_rep_species_name;
-    id = gene.closest_rep_id;
-    taxon_id = gene.closest_rep_taxon_id;
-  }
 
   return (
-    <div className="closest-ortholog" onClick={() => {
+    <div className={className} onClick={() => {
       props.doEnsureGrameneGenome(taxon_id);
       props.doReplaceGrameneFilters(suggestionToFilters({
         category: 'Gene',
@@ -76,10 +87,8 @@ const ClosestOrthologCmp = (props) =>
         name: name
       }))
     }}>
-      <h4>
-        <span className="gene-id">{name}</span>
-        <small className="species-name"> {species}</small>
-      </h4>
+      <div className="gene-species">{species}</div>
+      <h3 className="gene-id">{name}</h3>
       <p>{desc}</p>
     </div>
   );
@@ -197,15 +206,15 @@ class Gene extends React.Component {
   renderMetadata() {
     let gene = this.props.searchResult;
     if (gene.model_rep_taxon_id) {
-      gene.model_rep_species_name = this.props.taxLut[gene.model_rep_taxon_id].name;
+      gene.model_rep_species_name = this.props.taxLut[gene.model_rep_taxon_id].short_name;
     }
     if (gene.closest_rep_taxon_id) {
-      gene.closest_rep_species_name = this.props.taxLut[gene.closest_rep_taxon_id].name;
+      gene.closest_rep_species_name = this.props.taxLut[gene.closest_rep_taxon_id].short_name;
     }
     return renderTairSummary(gene) || renderClosestOrtholog(gene);
   }
   render() {
-    const ensemblURL = this.props.ensemblURL;
+    const panSite = this.props.panSite;
     const searchResult = this.props.searchResult;
     const taxName = this.props.taxName;
     // let orthologs='';
@@ -217,6 +226,7 @@ class Gene extends React.Component {
       <div className="result-gene">
         <div className="result-gene-summary">
           <div className="result-gene-title-body">
+            {panSite.hasOwnProperty(searchResult.system_name) && <PanLink pan={panSite[searchResult.system_name]} gene={searchResult}/>}
             <div className="gene-title">
               <div className="gene-species">{taxName}</div>
               <h3 className="gene-name">{searchResult.name}
@@ -273,6 +283,7 @@ const GeneList = props => {
               searchResult={g}
               ensemblURL={props.configuration.ensemblURL}
               ensemblRest={props.configuration.ensemblRest}
+              panSite={props.configuration.panSite}
               taxName={props.grameneTaxonomy[g.taxon_id].name}
               geneDocs={props.grameneGenes}
               requestGene={props.doRequestGrameneGene}

package/src/components/results/genes.css

@@ -71,6 +71,14 @@
     float: right;
     border: dashed 1px blue;
 }
+.gene-panlink {
+    float:right;
+}
+.gene-panlink img {
+    height: 60px;
+    width: auto;
+    vertical-align: top;
+}
 .gene-detail-tabs {
     display: flex;
     flex-wrap: wrap;
@@ -115,7 +123,7 @@
     flex: 1 1 auto;
     width: 1036px;
 }
-.closest-ortholog, .gene-summary-tair {
+.model-ortholog, .closest-ortholog, .gene-summary-tair {
     cursor: pointer;
     flex: 1 1 auto;
     width: 500px;
@@ -126,12 +134,15 @@
     border: 1px solid darkorange;
 }
 
-.closest-ortholog {
+.model-ortholog {
     border: 1px dotted darkorange;
 }
+.closest-ortholog {
+    border: 1px dotted darkgreen;
+}
 
 .gene-summary-tair {
-    border: 1px dotted darkgreen;
+    border: 1px dotted darkblue;
 }
 .gene-summary-tair .rest {
     display: none;
@@ -152,6 +163,7 @@
 
 /* this is the "title" of the closest ortholog box */
 .closest-ortholog::before,
+.model-ortholog::before,
 .gene-summary-tair::before {
     position: relative;
     float: right;
@@ -162,15 +174,19 @@
     background: #fff;
 }
 
-.closest-ortholog::before {
+.model-ortholog::before {
     content: "Model Species Homolog";
     color: orange;
 }
+.closest-ortholog::before {
+    content: "Closest Annotated Homolog";
+    color: darkgreen;
+}
 
 /* this is the "title" of the closest ortholog box */
 .gene-summary-tair::before {
     content: "TAIR Curated Description";
-    color: darkgreen;
+    color: darkblue;
 }
 
 .gene-search-pic-sugg {

package/src/demo.js

@@ -48,7 +48,29 @@ const panSites = [
     grameneData: 'https://data.gramene.org/v68',
     ga: 'G-ZTEQBFCRXZ',
     targetTaxonId: 3702,
-    alertText: 'Main site'
+    alertText: 'Main site',
+    panSite : {
+      sorghum_bicolor : {
+        url: "https://sorghumbase.org/genes?idList=",
+        name: "SorghumBase",
+        svg: "./static/images/sorghum_logo.svg"
+      },
+      vitis_vinifera : {
+        url: "https://vitis.gramene.org?idList=",
+        name: "Gramene Grapevine",
+        svg: "./static/images/grapevine_logo.svg"
+      },
+      oryza_sativa : {
+        url: "https://oryza.gramene.org?idList=",
+        name: "Gramene Oryza",
+        svg: "./static/images/oryza_logo.svg"
+      },
+      zea_mays : {
+        url: "https://maize-pangenome.gramene.org?idList=",
+        name: "Gramene Maize",
+        svg: "./static/images/maize_logo.svg"
+      }
+    }
   },
   {
     id: 'maize',