gramene-search 1.2.39 → 1.2.41

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gramene-search",
-  "version": "1.2.39",
+  "version": "1.2.41",
   "description": "search wrapper for gramene",
   "main": "dist/index.js",
   "scripts": {

package/src/bundles/views.js

@@ -3,11 +3,11 @@ const grameneViews = {
   getReducer: () => {
     const initialState = {
       options: [
-        // {
-        //   id: 'help',
-        //   name: 'Help / Demo',
-        //   show: 'off'
-        // },
+        {
+          id: 'help',
+          name: 'Help / Demo',
+          show: 'off'
+        },
         {
           id: 'taxonomy',
           name: 'Taxonomic distribution',
@@ -17,12 +17,12 @@ const grameneViews = {
           id: 'list',
           name: 'Gene list',
           show: 'on'
-        }
+        // },
         // {
         //   id: 'pathways',
         //   name: 'Pathways',
         //   show: 'disabled'
-        // },
+        }
         // {
         //   id: 'domains',
         //   name: 'Domains',

package/src/components/geneSearchUI.js

@@ -178,10 +178,7 @@ const ResultsCmp = props => {
     v.idx = idx;
     return v.show === 'on'
   });
-  // if (props.grameneFilters.rightIdx === 1 || activeViews.length === 0) {
-  //   return <HelpDemo/>
-  // }
-  return props.grameneFilters.rightIdx > 1 ? (
+  return props.grameneFilters.rightIdx > 0 ? (
     <div style={{padding:'10px'}}>
       {activeViews.map(v => {
         let p = Object.assign({}, props);
@@ -209,6 +206,16 @@ const Results = connect(
 const ViewsCmp = props => (
   <div className={'gramene-view-container'}>
     <b>Views</b>
+    {/*{props.grameneViews.options.map((view,idx) => (*/}
+    {/*  <div key={idx}>*/}
+    {/*    <input type="checkbox" className='toggle-switch' id={`toggle${idx}`} onChange={(e) => {*/}
+    {/*      if (view.show !== 'disabled') {*/}
+    {/*        props.doToggleGrameneView(idx)*/}
+    {/*      }*/}
+    {/*    }} disabled={view.show === 'disabled'} checked={view.show === 'on'}/>*/}
+    {/*    <label for={`toggle${idx}`}>{view.show}</label>{view.name}*/}
+    {/*  </div>*/}
+    {/*))}*/}
     <ul className={'gramene-view'}>
       {props.grameneViews.options.map((view,idx) => (
         <li key={idx} className={`gramene-view-${view.show}`}
@@ -228,7 +235,6 @@ const ViewsCmp = props => (
     {/*    <li className='gramene-view-disabled'>Disabled</li>*/}
     {/*  </ul>*/}
     {/*</div>*/}
-    &nbsp;
   </div>
 );
 

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/HelpDemo.js

@@ -1,6 +1,6 @@
 import React from 'react'
 import {connect} from "redux-bundler-react";
-import {Alert, Container, Row, Card, CardDeck} from 'react-bootstrap'
+import {Alert, Container, Row, Card, CardGroup} from 'react-bootstrap'
 import './genes.css'
 
 const examples = [
@@ -85,7 +85,7 @@ const HelpDemo = ({configuration,doReplaceGrameneFilters}) => (
       <h3>Search Features</h3>
     </Row>
     <Row>
-      <CardDeck style={{width:'80%'}}>
+      <CardGroup style={{width:'80%'}}>
         <Card style={{'backgroundColor':'#f3f6f5', 'borderColor':'#DDE5E3'}}>
           <Card.Body>
             <Card.Title>Suggestions</Card.Title>
@@ -107,7 +107,7 @@ const HelpDemo = ({configuration,doReplaceGrameneFilters}) => (
             <div className='gene-search-pic-genetree'/>
           </Card.Body>
         </Card>
-      </CardDeck>
+      </CardGroup>
     </Row>
     <Row>
       <h4>For Example</h4>

package/src/components/results/TaxDist.js

@@ -35,7 +35,11 @@ class TaxDist extends React.Component {
     }
     return (
       <div className="results-vis big-vis">
-        <button type="button" className="btn btn-primary btn-sm" onClick={this.toggleEmpties.bind(this)}>{this.state.collapseEmpties ? 'Expand' : 'Collapse'} empty branches</button>
+        {this.props.grameneTaxDist && <button type="button"
+                                              className="btn btn-primary btn-sm"
+                                              onClick={this.toggleEmpties.bind(this)}>
+          {this.state.collapseEmpties ? 'Expand' : 'Collapse'} empty branches
+        </button>}
         {this.props.grameneTaxDist && <Vis taxonomy={this.props.grameneTaxDist}
                                            selectedTaxa={selectedTaxa}
                                            onSelection={this.handleSelection.bind(this)}

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

@@ -74,8 +74,6 @@ class Xref extends React.Component {
         <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>
     );
   }
@@ -86,32 +84,8 @@ function formatXrefsForGene(gene) {
     throw new Error("No xrefs for " + _.get(gene._id));
   }
   return gene.xrefs
-    .filter(xr => 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;
-    })
+    .filter(xr => dbxrefs.isKnown(xr.db) && xr.db !== "PUBMED")
+    .sort()
     .map((xr,idx) => {
       var xref = dbxrefs.fetch(xr.db);
       return (
@@ -128,10 +102,8 @@ const Xrefs = ({searchResult, geneDocs}) => (
       <table className="xrefs table">
         <thead>
         <tr>
-          <th className="xref-10-col">Database</th>
-          <th className="xref-10-col">IDs and links</th>
-          <th className="xref-10-col">Source</th>
-          <th className="xref-70-col">Text</th>
+          <th className="xref-name-col">Database</th>
+          <th className="xref-value-col">IDs and links</th>
         </tr>
         </thead>
         <tbody>

package/src/components/results/genes.css

@@ -24,6 +24,9 @@
 .xref-value-col {
     width: 80%;
 }
+.xref-80-col {
+    width: 80%;
+}
 .xref-70-col {
     width: 70%;
 }

package/src/components/styles.css

@@ -9,6 +9,7 @@
 .gramene-filter-container {
     background-color: #cfb5e6;
     padding-left: 4px;
+    padding-bottom: 4px;
 }
 .gramene-filter {
     padding-left: 4px;
@@ -56,11 +57,14 @@
 
 .gramene-view-container {
     background-color: lightblue;
-    padding-left: 10px;
+    padding-left: 4px;
+    padding-right: 4px;
+    padding-bottom: 4px;
 }
 .gramene-view {
-    padding-left: 5px;
-    margin: 4px;
+    padding-left: 0px;
+    padding-right: 10px;
+    margin-bottom: 0;
     background-color: white;
 }
 .gramene-view li {
@@ -68,19 +72,22 @@
     cursor: pointer;
     padding-left: 5px;
     border-left-style: inset;
-    border-left-width: 4px;
+    border-left-width: 8px;
     margin-bottom: 2px;
 }
 
 .gramene-view-on {
     border-left-color: #40a0ff;
+    font-weight: bold;
 }
 .gramene-view-off {
     border-left-color: #ff6d68;
+    color: grey;
 }
 .gramene-view-disabled {
     color: darkgray;
     border-left-color: #efefef;
+    cursor: default!important;
 }
 #gramene-suggestion button {
     border-radius: .6rem;
@@ -90,4 +97,5 @@
     color: #fff;
     background-color: #6c757d;
     border-color: #6c757d;
-}
+}
+

package/src/demo.js

@@ -159,7 +159,7 @@ const SearchViews = props => (
         <div className="gramene-sidebar">
           <Status/>
           <Filters/>
-          {/*<Views/>*/}
+          <Views/>
         </div>
       </div>
       <div className="col-md-10 no-padding">