gramene-search 1.2.38 → 1.2.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gramene-search",
-  "version": "1.2.38",
+  "version": "1.2.40",
   "description": "search wrapper for gramene",
   "main": "dist/index.js",
   "scripts": {
@@ -25,7 +25,7 @@
     "flat-to-nested": "^1.1.1",
     "formik": "^3.0.0-next.8",
     "gramene-bins-client": "^2.3.3",
-    "gramene-dbxrefs": "^3.0.4",
+    "gramene-dbxrefs": "^3.0.11",
     "gramene-genetree-vis": "^4.1.13",
     "gramene-mdview": "^1.1.8",
     "gramene-search-vis": "^4.1.10",
@@ -37,16 +37,16 @@
     "numeral": "^2.0.6",
     "querystringify": "^2.2.0",
     "react": "^17.0.2",
-    "react-bootstrap": "^1.6.3",
-    "react-debounce-input": "^3.2.3",
+    "react-bootstrap": "^2.5.0",
+    "react-debounce-input": "^3.2.5",
     "react-dom": "17.0.2",
     "react-ga": "^3.3.0",
-    "react-icons": "^4.1.0",
+    "react-icons": "^4.3.1",
     "react-markdown": "^5.0.3",
-    "react-router-dom": "^5.2.0",
+    "react-router-dom": "^5.3.0",
     "react-tree-menu": "https://github.com/ajo2995/react-tree-menu",
     "redux-bundler": "21.0.0",
-    "redux-bundler-react": "1.0.1",
+    "redux-bundler-react": "^1.2.0",
     "yup": "^0.32.9"
   },
   "prettier": {
@@ -57,9 +57,15 @@
     "@babel/core": "latest",
     "@babel/preset-env": "latest",
     "@babel/preset-react": "latest",
-    "@parcel/transformer-image": "2.0.0",
-    "@parcel/transformer-less": "2.0.0",
-    "parcel": "2.0.0"
+    "@parcel/config-default": "^2.0.0-rc.0",
+    "@parcel/core": "^2.8.0",
+    "@parcel/transformer-image": "^2.8.0",
+    "@parcel/transformer-js": "^2.8.0",
+    "@parcel/transformer-less": "^2.8.0",
+    "buffer": "^5.7.1",
+    "http-proxy-middleware": "^2.0.6",
+    "parcel": "^2.8.0",
+    "process": "^0.11.10"
   },
   "repository": {
     "type": "git",

package/src/components/results/GeneList.js

@@ -7,8 +7,9 @@ import Homology from './details/Homology'
 import Location from './details/Location'
 import Pathways from "./details/Pathways"
 import Xrefs from "./details/Xrefs"
+import Publications from "./details/Publications"
 import {GrFormPrevious, GrFormNextLink, GrFormNext, GrHpe} from 'react-icons/gr'
-import { Badge } from 'react-bootstrap'
+import { Badge, OverlayTrigger, Tooltip } from 'react-bootstrap'
 
 let external = <small title="This link opens a page from an external site"> <i className="fa fa-external-link"/></small>;
 
@@ -17,7 +18,8 @@ let inventory = {
   expression: Expression,
   homology: Homology,
   pathways: Pathways,
-  xrefs: Xrefs
+  xrefs: Xrefs,
+  pubs: Publications
 };
 
 function renderTairSummary(searchResult) {
@@ -102,31 +104,37 @@ class Gene extends React.Component {
         {
           id: 'location',
           label: 'Location',
+          popup: 'Genome Browser',
           available: false
         },
         {
           id: 'expression',
           label: 'Expression',
+          popup: 'Gene Expression Atlas',
           available: false
         },
         {
           id: 'homology',
           label: 'Homology',
+          popup: 'Gene Family Tree',
           available: false
         },
         {
           id: 'pathways',
           label: 'Pathways',
+          popup: 'Plant Reactome Pathways',
+          available: false
+        },
+        {
+          id: 'pubs',
+          label: 'Papers',
+          popup: 'Curated Publications',
           available: false
         },
-        // {
-        //   id: 'pubs',
-        //   label: 'Publications',
-        //   available: false
-        // },
         {
           id: 'xrefs',
           label: 'Xrefs',
+          popup: 'Database Cross-references',
           available: false
         }
       ],
@@ -202,10 +210,18 @@ class Gene extends React.Component {
         </div>
         <div className="gene-detail-tabs">
           {this.state.details.map((d,idx) => (
+            <OverlayTrigger
+              key={idx}
+              placement={'bottom'}
+              overlay={
+                <Tooltip id={`tooltip`}>{d.popup}</Tooltip>
+              }
+            >
             <div key={idx}
                  className={`col-md-1 text-center gene-detail-tab-${this.getDetailStatus(d)}`}
                  onClick={()=>this.setExpanded(d)}
             >{d.label}</div>
+            </OverlayTrigger>
           ))}
         </div>
         {this.state.expandedDetail && this.ensureGene(searchResult.id) && <div className="visible-detail">{React.createElement(inventory[this.state.expandedDetail], this.props)}</div>}

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

@@ -0,0 +1,145 @@
+import React from 'react'
+import ReactGA from 'react-ga'
+// import {connect} from "redux-bundler-react";
+import _ from 'lodash'
+import dbxrefs from 'gramene-dbxrefs';
+import {Detail, Title, Description, Content} from "./generic";
+
+const HOW_MANY_TO_SHOW_BY_DEFAULT = 10;
+
+class Xref extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {showAll: false};
+  }
+
+  toggleShowAll() {
+    this.setState({showAll: !this.state.showAll});
+  }
+
+  possiblyTruncateList(vals) {
+    var ellipsis, ellipsisChar, ellipsisTitle;
+
+    if (vals.length > HOW_MANY_TO_SHOW_BY_DEFAULT) {
+      if (this.state.showAll) {
+        ellipsisChar = '^ show first ' + HOW_MANY_TO_SHOW_BY_DEFAULT;
+        ellipsisTitle = 'Show less';
+      }
+      else {
+        ellipsisChar = '… show all (' + (vals.length - HOW_MANY_TO_SHOW_BY_DEFAULT) + ' more)';
+        ellipsisTitle = 'Show more';
+        vals = vals.slice(0, HOW_MANY_TO_SHOW_BY_DEFAULT);
+      }
+
+      ellipsis = (
+        <li key="showMore" className="showAll">
+          <a title={ellipsisTitle} onClick={this.toggleShowAll.bind(this)}>{ellipsisChar}</a>
+        </li>
+      );
+
+      vals.push(ellipsis);
+    }
+
+    return vals;
+  }
+
+  render() {
+    var db = this.props.xref.label;
+    var urlfcn = this.props.xref.url;
+
+    var members = this.props.members.sort();
+
+    var vals = members.map(function (item, idx) {
+        var url = urlfcn(item),
+          liClass = idx < HOW_MANY_TO_SHOW_BY_DEFAULT ? "default" : "extra";
+        let external = <small title="This link opens a page from an external site"> <i className="fa fa-external-link"/></small>;
+        return (
+          <li key={idx} className={liClass}>
+            <ReactGA.OutboundLink
+              eventLabel={db}
+              to={url}
+              target="_blank"
+            >
+              {item}{external}
+            </ReactGA.OutboundLink>
+          </li>
+        )
+      })
+
+    vals = this.possiblyTruncateList(vals);
+
+    return (
+      <tr>
+        {/*<td className="xref-name-col">{db}</td>*/}
+        <td className="xref-value-col">
+          <ol className="xref-id-list">{vals}</ol>
+        </td>
+        <td className="xref-name-col">{this.props.source}</td>
+        <td className="xref-value-col">{this.props.text}</td>
+      </tr>
+    );
+  }
+}
+
+function formatPubsForGene(gene) {
+  if(!gene || !_.isArray(gene.xrefs)) {
+    throw new Error("No xrefs for " + _.get(gene._id));
+  }
+  return gene.xrefs
+    .filter(xr => xr.db === "PUBMED") //dbxrefs.isKnown(xr.db))
+    .sort((a,b) => {
+      if (a.source) {
+        if (b.source) {
+          if (a.source < b.source) {
+            return -1;
+          }
+          if (a.source > b.source) {
+            return 1;
+          }
+        }
+        else {
+          return -1;
+        }
+      }
+      else if (b.source) {
+        return 1;
+      }
+      if (a.db < b.db) {
+        return -1;
+      }
+      if (a.db > b.db) {
+        return 1;
+      }
+      return 0;
+    })
+    .map((xr,idx) => {
+      var xref = dbxrefs.fetch(xr.db);
+      return (
+        <Xref key={idx} xref={xref} members={xr.ids} source={xr.source} text={xr.text} />
+      )
+    })
+}
+
+const Publications = ({searchResult, geneDocs}) => (
+  <Detail>
+    <Title key="title">Curated publications</Title>
+    <Description key="description">This gene has been described in the literature:</Description>
+    <Content key="content">
+      <table className="xrefs table">
+        <thead>
+        <tr>
+          <th className="xref-10-col">PubMed link</th>
+          <th className="xref-10-col">Curation source</th>
+          <th className="xref-80-col">Title/Description</th>
+        </tr>
+        </thead>
+        <tbody>
+        {formatPubsForGene(geneDocs[searchResult.id])}
+        </tbody>
+      </table>
+    </Content>
+  </Detail>
+);
+
+export default Publications;
+

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

@@ -44,20 +44,13 @@ class Xref extends React.Component {
   }
 
   render() {
-    var members, vals, db;
-    db = this.props.displayName;
+    var db = this.props.xref.label;
+    var urlfcn = this.props.xref.url;
 
-    members = this.props.members;
+    var members = this.props.members.sort();
 
-    vals = _(members)
-      .map(function (m) {
-        return m.val;
-      })
-      .flatten(true)
-      .sort()
-      .uniq(true) // TODO figure out why there are duplicates.
-      .map(function (item, idx) {
-        var url = members[0].url(item),
+    var vals = members.map(function (item, idx) {
+        var url = urlfcn(item),
           liClass = idx < HOW_MANY_TO_SHOW_BY_DEFAULT ? "default" : "extra";
         let external = <small title="This link opens a page from an external site"> <i className="fa fa-external-link"/></small>;
         return (
@@ -72,13 +65,12 @@ class Xref extends React.Component {
           </li>
         )
       })
-      .value();
 
     vals = this.possiblyTruncateList(vals);
 
     return (
       <tr>
-        <td className="xref-name-col">{this.props.displayName}</td>
+        <td className="xref-name-col">{db}</td>
         <td className="xref-value-col">
           <ol className="xref-id-list">{vals}</ol>
         </td>
@@ -91,22 +83,15 @@ function formatXrefsForGene(gene) {
   if(!gene || !_.isArray(gene.xrefs)) {
     throw new Error("No xrefs for " + _.get(gene._id));
   }
-  return _(gene.xrefs)
-    .keyBy('db')
-    .pickBy(function(val, name) {
-      return dbxrefs.isKnown(name);
-    })
-    .map(function(val, name) {
-      var xref = dbxrefs.fetch(name);
-      return {url: xref.url, label: xref.label, val: val.ids};
-    })
-    .groupBy('label')
-    .map(function(members, displayName) {
+  return gene.xrefs
+    .filter(xr => dbxrefs.isKnown(xr.db) && xr.db !== "PUBMED")
+    .sort()
+    .map((xr,idx) => {
+      var xref = dbxrefs.fetch(xr.db);
       return (
-        <Xref key={displayName} displayName={displayName} members={members} />
+        <Xref key={idx} xref={xref} members={xr.ids} source={xr.source} text={xr.text} />
       )
     })
-    .value();
 }
 
 const Xrefs = ({searchResult, geneDocs}) => (

package/src/components/results/genes.css

@@ -24,6 +24,15 @@
 .xref-value-col {
     width: 80%;
 }
+.xref-80-col {
+    width: 80%;
+}
+.xref-70-col {
+    width: 70%;
+}
+.xref-10-col {
+    width: 10%;
+}
 .xref-id-list {
     padding-left: 0;
     list-style: none;

package/src/demo.js

@@ -44,7 +44,7 @@ const panSites = [
     ensemblURL: 'https://ensembl.gramene.org',
     ensemblSite: 'https://ensembl.gramene.org',
     ensemblRest: 'https://data.gramene.org/ensembl',
-    grameneData: 'https://data.gramene.org/v64',
+    grameneData: 'https://data.gramene.org/v66',
     targetTaxonId: 3702,
     alertText: 'Main site'
   },

package/src/index.html

@@ -5,7 +5,7 @@
     <title>Gramene Search</title>
     <script>
       window.gramene = {};
-      gramene.defaultServer = 'https://data.gramene.org/v65/swagger';
+      gramene.defaultServer = 'https://data.gramene.org/v66/swagger';
     </script>
     <script async src="./static/gramene-dalliance/dalliance-all.js"></script>
     <script async src="https://plantreactome.gramene.org/DiagramJs/diagram/diagram.nocache.js"></script>

package/.parcel-cache/2b1c1cd7b577d2ca.txt

@@ -1,2 +0,0 @@
-43337522
-1663863196280298000