gramene-search 1.2.81 → 1.2.83

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gramene-search",
-  "version": "1.2.81",
+  "version": "1.2.83",
   "description": "search wrapper for gramene",
   "source": "src/index.js",
   "main": "dist/index.js",
@@ -27,6 +27,7 @@
     "formik": "^3.0.0-next.8",
     "gramene-bins-client": "^2.3.3",
     "gramene-dbxrefs": "^3.0.11",
+    "gramene-efp-browser": "^1.0.4",
     "gramene-genetree-vis": "^4.1.18",
     "gramene-mdview": "^2.0.6",
     "gramene-search-vis": "^4.1.12",

package/src/components/results/GeneList.js

@@ -56,7 +56,7 @@ const PanLink = (props) => {
 
 const ClosestOrthologCmp = (props) =>
 {
-  let id, taxon_id, name, desc, species, className;
+  let id, taxon_id, name, desc, species, className, identity;
   const gene = props.gene;
 
   if (gene.closest_rep_id) {
@@ -66,6 +66,7 @@ const ClosestOrthologCmp = (props) =>
     id = gene.closest_rep_id;
     taxon_id = gene.closest_rep_taxon_id;
     className = "closest-ortholog";
+    identity = gene.closest_rep_identity || 0;
   }
   else if (gene.model_rep_id) {
     name = gene.model_rep_name || gene.model_rep_id;
@@ -74,6 +75,7 @@ const ClosestOrthologCmp = (props) =>
     id = gene.model_rep_id;
     taxon_id = gene.model_rep_taxon_id;
     className = "model-ortholog";
+    identity = gene.model_rep_identity || 0;
   }
   var isZm = new RegExp(/^Zm00001e/);
   if (isZm.test(desc)) {
@@ -91,6 +93,7 @@ const ClosestOrthologCmp = (props) =>
       }))
     }}>
       <div className="gene-species">{species}</div>
+      {identity > 0 && <div className="rep-identity">{Math.round(identity*100)}</div>}
       <h3 className="gene-id">{name}</h3>
       <p>{desc}</p>
     </div>

package/src/components/results/details/Expression.js

@@ -1,66 +1,12 @@
 import React, { useState, useEffect } from 'react'
 import {connect} from "redux-bundler-react";
 import {Tabs, Tab} from 'react-bootstrap';
-
-const ImageLoader = props => {
-  const [loading, setLoading] = useState(true);
-
-  useEffect(() => {
-    const image = new Image();
-    image.src = props.url;
-    image.onload = () => {
-      setLoading(false);
-    };
-  }, []);
-
-  return (
-    <div className="BAR-container">
-      {loading && <img src="https://www.sorghumbase.org/static/images/dna_spinner.svg" alt="Loading..." />}
-      {!loading && <img style={{'max-width':'100%'}} src={props.url} />}
-    </div>
-  );
-}
+import BAR, {haveBAR} from "gramene-efp-browser";
 
 const Detail = props => {
   const gene = props.geneDocs[props.searchResult.id];
   let paralogs_url;
-  let efp_browser = {
-    show: false
-  };
   let gene_url = `/static/atlasWidget.html?reference=0&genes=${gene.atlas_id || gene._id}`;
-  if (gene.system_name === 'sorghum_bicolor') {
-    efp_browser.show = true;
-    efp_browser.options = [
-      {value: 'Developmental_Atlas', label: 'Developmental Atlas'},
-      {value: 'Stress_Atlas', label: 'Stress Atlas'}
-      // {value: 'Atlas_w_BS_Cells', label: 'Atlas w BS Cells'},
-      // {value: 'Low_Phosphorus', label: 'Low Phosphorus'},
-      // {value: 'Nitrogen_Use_Efficiency', label: 'Nitrogen Use Efficiency'},
-      // {value: 'Vascularization_and_Internode', label: 'Vascularization and Internode'}
-    ];
-    efp_browser.gene = gene._id.replace('SORBI_3','Sobic.');
-    efp_browser.path = `https://bar.utoronto.ca/api/efp_image/efp_sorghum`;
-    efp_browser.bar = 'https://bar.utoronto.ca/~asher/efp_sorghum/cgi-bin/efpWeb.cgi?';
-    // efp_browser = `https://bar.utoronto.ca/api/efp_image/efp_sorghum/Stress_Atlas/Absolute/${gene._id.replace('SORBI_3','Sobic.')}`
-    // efp_browser = `https://bar.utoronto.ca/api/efp_image/efp_sorghum/`
-    // efp_browser = `https://bar.utoronto.ca/~asher/efp_sorghum/cgi-bin/efpWeb.cgi?dataSource=Developmental_Atlas&mode=Absolute&primaryGene=${gene._id.replace('SORBI_3','Sobic.')}`
-  }
-  if (efp_browser.show) {
-    const [selectedStudy, setSelectedStudy] = useState(efp_browser.options[0].value);
-    const handleSelectChange = (event) => {
-      setSelectedStudy(event.target.value);
-    };
-    efp_browser.content = (
-      <div>
-        <label>Select a study:</label>
-        <select value={selectedStudy} onChange={handleSelectChange}>
-          {efp_browser.options.map(o => <option value={o.value}>{o.label}</option>)}
-        </select><br/>
-        <ImageLoader url={`${efp_browser.path}/${selectedStudy}/Absolute/${efp_browser.gene}`}/>
-        <a href={`${efp_browser.bar}?dataSource=${selectedStudy}&mode=Absolute&primaryGene=${efp_browser.gene}`}>Powered by <img src="https://bar.utoronto.ca/bbc_logo_small.gif"/> BAR Webservices</a>
-      </div>
-    )
-  }
 
   if (props.paralogExpression && props.paralogExpression[gene._id]) {
     let paralogs = props.paralogExpression[gene._id].map(p => p.atlas_id || p.id);
@@ -72,13 +18,13 @@ const Detail = props => {
     props.doRequestParalogExpression(gene._id)
   }
   return <Tabs>
-    <Tab eventKey="gene" title="All Studies">
+    {haveBAR(gene) && <Tab tabClassName="eFP" eventKey="eFP" title="eFP Browser"><BAR gene={gene}/></Tab>}
+    <Tab tabClassName="gxa" eventKey="gene" title="All Studies">
       <iframe src={gene_url} frameBorder="0" width="100%" height="500px"></iframe>
     </Tab>
-    {paralogs_url && <Tab eventKey="paralogs" title="Reference Study (all paralogs)">
+    {paralogs_url && <Tab tabClassName="gxa" eventKey="paralogs" title="Reference Study (all paralogs)">
       <iframe src={paralogs_url} frameBorder="0" width="100%" height="500px"></iframe>
     </Tab>}
-    {efp_browser.show && <Tab eventKey="eFP" title="eFP browser (BAR)">{efp_browser.content}</Tab>}
   </Tabs>
 };
 

package/src/components/results/genes.css

@@ -189,6 +189,37 @@
     color: darkblue;
 }
 
+.rep-identity {
+    float: right;
+    padding-right: 10px;
+    padding-top: 5px;
+    font-style: italic;
+}
+.rep-identity::after {
+    content: "% identity";
+}
+.eFP::before {
+    content: url("../../static/images/BAR-logo.png");
+    padding-right:5px;
+    position: relative;
+    top: 5px;
+}
+.eFP::after {
+    content: 'New!';
+    color: red;
+    padding-left:2px;
+    font-weight: bold;
+    font-style: italic;
+    font-size: x-small;
+    line-height: normal;
+    vertical-align: super;
+}
+.gxa::before {
+    content: url("../../static/images/expression-atlas-logo.png");
+    padding-right:5px;
+    position: relative;
+    top: 5px;
+}
 .gene-search-pic-sugg {
     width: 100%;
     height: 200px;