gramene-search 1.6.21 → 1.6.23

package/package.json

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

package/src/bundles/api.js

@@ -64,7 +64,8 @@ grameneSuggestions.selectGrameneSuggestionsStatus = createSelector(
     if (!queryString) return '';
     if (shouldUpdate) return 'update needed';
     if (isLoading) return 'loading';
-    if (suggestionsRaw) return suggestionsRaw.data.grouped.category.matches + ' terms';
+    if (suggestionsRaw.data) return suggestionsRaw.data.grouped.category.matches + ' terms';
+    console.error(suggestionsRaw)
     return 'error';
   }
 );

package/src/components/results/UserGeneLists.js

@@ -9,20 +9,44 @@ const auth = getAuth(firebaseApp);
 const MAX_GENE_IDS = 1000; // Define the maximum number of gene IDs allowed
 
 const GeneListDisplayComponent = props => {
-  const [savedGeneLists, setSavedGeneLists] = useState([]);
+  const [publicGeneLists, setPublicGeneLists] = useState([]);
+  const [privateGeneLists, setPrivateGeneLists] = useState([]);
   const [error, setError] = useState(null);
   const [user, setUser] = useState({});
   onAuthStateChanged(auth, (user) => setUser(user));
 
+  const fetchPrivateGeneLists = async () => {
+    try {
+      const token = await user.getIdToken();
+      // Replace this with actual fetch from your backend or storage
+      const response = await fetch(`${props.api}/gene_lists?site=${props.site}&isPublic=false`, {
+        method: 'GET',
+        headers: {
+          "Content-Type": "application/json",
+          "Authorization": `Bearer ${token}`
+        }
+      });
+      const result = await response.json();
+
+      if (response.ok) {
+        setError(null);
+        setPrivateGeneLists(result); // array of saved gene lists
+      } else {
+        setError('Error fetching gene lists.');
+      }
+    } catch (err) {
+      setError('Failed to fetch private gene lists. Please try again later.');
+    }
+  };
   // Fetch saved gene lists from a backend or local storage
-  const fetchSavedGeneLists = async () => {
+  const fetchPublicGeneLists = async () => {
     try {
       // Replace this with actual fetch from your backend or storage
-      const response = await fetch(`${props.api}/gene-lists`);
+      const response = await fetch(`${props.api}/gene_lists?site=${props.site}&isPublic=true`);
       const result = await response.json();
 
       if (response.ok) {
-        setSavedGeneLists(result.savedLists); // Assuming savedLists is an array of saved gene lists
+        setPublicGeneLists(result); // array of saved gene lists
       } else {
         setError('Error fetching gene lists.');
       }
@@ -33,8 +57,11 @@ const GeneListDisplayComponent = props => {
 
   // Fetch data when the component is mounted
   useEffect(() => {
-    fetchSavedGeneLists();
+    fetchPublicGeneLists();
   }, []);
+  useEffect(() => {
+    fetchPrivateGeneLists();
+  }, [user]);
 
   return (
     <div className="gene-list-display-component">
@@ -46,7 +73,35 @@ const GeneListDisplayComponent = props => {
         </Alert>
       )}
 
-      {savedGeneLists.length > 0 ? (
+      {privateGeneLists.length > 0 && (
+        <Table striped bordered hover className="mt-4">
+          <thead>
+          <tr>
+            <th>List Name</th>
+            <th>Number of Genes</th>
+            <th>Actions</th>
+          </tr>
+          </thead>
+          <tbody>
+          {privateGeneLists.map((list, index) => (
+            <tr key={index}>
+              <td>{list.label}</td>
+              <td>{list.hash}</td>
+              <td>
+                <Button variant="info" onClick={() => viewGeneList(list)}>
+                  View
+                </Button>
+                <Button variant="danger" onClick={() => deleteGeneList(props.api, list._id)} className="ml-2">
+                  Delete
+                </Button>
+              </td>
+            </tr>
+          ))}
+          </tbody>
+        </Table>
+      )}
+
+      {publicGeneLists.length > 0 ? (
         <Table striped bordered hover className="mt-4">
           <thead>
           <tr>
@@ -56,15 +111,15 @@ const GeneListDisplayComponent = props => {
           </tr>
           </thead>
           <tbody>
-          {savedGeneLists.map((list, index) => (
+          {publicGeneLists.map((list, index) => (
             <tr key={index}>
-              <td>{list.name}</td>
-              <td>{list.genes.length}</td>
+              <td>{list.label}</td>
+              <td>{list.hash}</td>
               <td>
                 <Button variant="info" onClick={() => viewGeneList(list)}>
                   View
                 </Button>
-                <Button variant="danger" onClick={() => deleteGeneList(props.api, list.id)} className="ml-2">
+                <Button variant="danger" onClick={() => deleteGeneList(props.api, list._id)} className="ml-2">
                   Delete
                 </Button>
               </td>
@@ -90,7 +145,7 @@ const deleteGeneList = async (api,listId) => {
   if (window.confirm('Are you sure you want to delete this gene list?')) {
     // Replace with the actual delete request
     try {
-      await fetch(`${api}/gene-lists/${listId}`, {
+      await fetch(`${api}/gene_lists/${listId}`, {
         method: 'DELETE',
       });
       alert('Gene list deleted!');
@@ -149,7 +204,7 @@ const GeneListComponent = props => {
         headers: {
           'Content-Type': 'application/json',
         },
-        body: JSON.stringify({ ids: geneArray }),
+        body: JSON.stringify(geneArray),
       });
 
       const result = await response.json();
@@ -181,7 +236,7 @@ const GeneListComponent = props => {
 
     const token = await user.getIdToken();
     try {
-      const response = await fetch(`${props.api}/gene_list?${queryString}`, {
+      const response = await fetch(`${props.api}/gene_lists?${queryString}`, {
         method: 'POST',
         headers: {
           "Content-Type": "application/json",

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

@@ -1,6 +1,6 @@
-import React, { useRef, useEffect } from 'react'
+import React, { useRef, useEffect, useState } from 'react'
 import {connect} from "redux-bundler-react";
-import {Tabs, Tab} from 'react-bootstrap';
+import {Tabs, Tab, Form, Row, Col} from 'react-bootstrap';
 import BAR, {haveBAR} from "gramene-efp-browser";
 
 function DynamicIframe(props) {
@@ -61,33 +61,82 @@ function DynamicIframe(props) {
 
 const Detail = props => {
   const gene = props.geneDocs[props.searchResult.id];
-  let paralogs_url;
-  let gene_url = `/static/atlasWidget.html?reference=0&genes=${gene.atlas_id || gene._id}`;
+  const [atlasExperiment, setAtlasExperiment] = useState(null);
+  const [atlasExperimentList, setAtlasExperimentList] = useState([]);
+  const [isLocal, setIsLocal] = useState(false);
+
+  const handleLocalAPIChange = (event) => {
+    setIsLocal(event.target.checked);
+  };
+  useEffect(() => {
+    const tid = Math.floor(gene.taxon_id / 1000);
+    if (props.expressionStudies[tid]) {
+      let eList = props.expressionStudies[tid].filter(e => e.type === "Baseline");
+      setAtlasExperimentList(eList);
 
-  if (props.paralogExpression && props.paralogExpression[gene._id]) {
-    let paralogs = props.paralogExpression[gene._id].map(p => p.atlas_id || p.id);
-    if (paralogs.length > 1) {
-      paralogs_url= `/static/atlasWidget.html?reference=1&genes=${paralogs.join(' ')}`;
+      let refExp = eList.filter(e => e.isRef);
+      if (refExp.length === 1) {
+        setAtlasExperiment(refExp[0]._id);
+      } else {
+        // no reference experiment - choose first
+        setAtlasExperiment(eList[0]._id);
+      }
     }
+  }, [props.expressionStudies]);
+
+  let paralogs_url;
+  let gene_url = `/static/atlasWidget.html?genes=${gene.atlas_id || gene._id}&localAPI=${isLocal}`;
+  let paralogs = [];
+  if (gene.homology && gene.homology.homologous_genes && gene.homology.homologous_genes.within_species_paralog) {
+    paralogs = gene.homology.homologous_genes.within_species_paralog;
   }
-  else {
-    props.doRequestParalogExpression(gene._id)
+  if (paralogs.length > 1 && atlasExperiment) {
+    paralogs_url= `/static/atlasWidget.html?genes=${paralogs.join(' ')}&experiment=${atlasExperiment}&localAPI=${isLocal}`;
   }
   return <Tabs>
     {paralogs_url &&
-      <Tab tabClassName="gxa" eventKey="paralogs" title="Reference Study (all paralogs)">
+      <Tab tabClassName="gxa" eventKey="paralogs" title={`Paralogs`} key="gxaparalogs">
+        <Form>
+          <Form.Check
+            type="switch"
+            id="localAPI"
+            label="Local API"
+            checked={isLocal}
+            onChange={handleLocalAPIChange}
+          />
+          <Form.Group as={Row} className="mb-3" controlId="formGroupExperiment">
+            <Form.Label column sm={1}>Experiment</Form.Label>
+            <Col sm={5}>
+              <Form.Select defaultValue={atlasExperiment} onChange={(e) => setAtlasExperiment(e.target.value)}>
+                {atlasExperimentList.map((experiment, index) => (
+                  <option key={index} value={experiment._id}>{experiment.name}</option>
+                ))}
+              </Form.Select>
+            </Col>
+          </Form.Group>
+        </Form>
         <DynamicIframe url={paralogs_url}/>
       </Tab>
     }
-    <Tab tabClassName="gxa" eventKey="gene" title="All Studies"><DynamicIframe url={gene_url}/></Tab>
+    <Tab tabClassName="gxa" eventKey="gene" title="All Studies" key="gxa">
+      <Form.Check
+        type="switch"
+        id="localAPI"
+        label="Local API"
+        checked={isLocal}
+        onChange={handleLocalAPIChange}
+      />
+      <DynamicIframe url={gene_url}/>
+    </Tab>
     {haveBAR(gene) &&
-      <Tab tabClassName="eFP" eventKey="eFP" title="eFP Browser"><BAR gene={gene}/></Tab>
+      <Tab tabClassName="eFP" eventKey="eFP" title="eFP Browser" key="bar"><BAR gene={gene}/></Tab>
     }
   </Tabs>
 };
 
 export default connect(
-  'selectParalogExpression',
+  // 'selectParalogExpression',
+  'selectExpressionStudies',
   'doRequestParalogExpression',
   Detail
 );

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

@@ -12,7 +12,8 @@ const ggURL = {
   IRRI: 'https://gringlobal.irri.org/gringlobal/accessiondetail?id=',
   ARS: 'https://npgsweb.ars-grin.gov/gringlobal/accessiondetail.aspx?id=',
   ICRISAT: 'https://genebank.icrisat.org/IND/PassportSummary?ID=',
-  sorbmutdb: 'https://www.depts.ttu.edu/igcast/sorbmutdb.php'
+  sorbmutdb: 'https://www.depts.ttu.edu/igcast/sorbmutdb.php',
+  maizeGDB: 'https://wgs.maizegdb.org/'
 };
 
 const rice_studies = {'1': {label: 'Rice 3K', type: 'NAT'}};
@@ -62,6 +63,9 @@ const AccessionLink = ({germplasm, gene_id}) => {
       </form>
     );
   }
+  if (germplasm.pop_id === '15' && germplasm.stock_center === 'NOT FOUND') {
+    return <a target="_blank" href={ggURL['maizeGDB']}>SNPVersity 2.0</a>
+  }
   return <span>{germplasm.pub_id}</span>
 }
 function group_germplasm(gene, germplasmLUT, vep_obj) {
@@ -206,7 +210,6 @@ const GridWithGroups = ({groups,gene_id}) => {
       }
     },
     { field: 'synonym', headerName: 'Synonym', filter:false, sortable:false, flex: 1, cellRenderer: (params) => {
-      console.log(params.data);
       if (params.data.accession) {
         return params.data.accession.germplasm.ens_id
       }

package/src/demo.js

@@ -137,11 +137,11 @@ const panSites = [
     ensemblURL: 'https://ensembl-dev.sorghumbase.org',
     ensemblSite: 'https://ensembl-dev.sorghumbase.org',
     ensemblRest: 'https://data.gramene.org/pansite-ensembl-108',
-    grameneData: 'https://data.sorghumbase.org/sorghum_v9',
+    grameneData: 'https://data.sorghumbase.org/auth_testing',
     ga: 'G-L5KXDCCZ16',
     targetTaxonId: 4558003,
     alertText: 'Click the search icon in the menu bar or type /',
-    showViews: false,
+    showViews: true,
     details: {
       sequences: true,
       VEP: true,
@@ -315,7 +315,7 @@ const SearchViewsCmp = props => (
           <Status/>
           <Filters/>
           {props.configuration.showViews && <Views/>}
-          {/*<Auth/>*/}
+          <Auth/>
         </div>
       </div>
       <div style={{width:"calc(100% - 250px", left:250, position:'relative'}}>

package/src/maize.html

@@ -10,6 +10,13 @@
     <script async src="./static/gramene-dalliance/dalliance-all.js"></script>
     <script async src="https://plantreactome.gramene.org/DiagramJs/diagram/diagram.nocache.js"></script>
 
+    <link rel="stylesheet" type="text/css"
+          href="//www.ebi.ac.uk/gxa/resources/css/alt-customized-bootstrap-3.3.5.css"/>
+    <script language="JavaScript" type="text/javascript"
+            src="https://www.ebi.ac.uk/gxa/resources/js-bundles/vendorCommons.bundle.js"></script>
+    <script language="JavaScript" type="text/javascript"
+            src="https://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"/>
     <link rel="stylesheet" type="text/css" href="static/style.css">
     <!-- Global site tag (gtag.js) - Google Analytics -->

package/src/static/atlasWidget.html

@@ -13,14 +13,15 @@
   const queryString = location.search;
   const urlParams = new URLSearchParams(queryString);
   const genes = urlParams.get('genes');
-  const experiment = urlParams.get('reference');
+  const experiment = urlParams.get('experiment');
+  const localAPI = urlParams.get('localAPI');
   const options = {
     target: "heatmapContainer",
-    query: { gene: genes }
+    query: { gene: genes },
+    disableGoogleAnalytics: true,
+    experiment: experiment || false,
+    atlasUrl: localAPI ? "https://data.sorghumbase.org/auth_testing/gxa/" : "https://www.ebi.ac.uk/gxa/"
   };
-  if (+experiment === 1) {
-    options["experiment"] = "reference"
-  }
   expressionAtlasHeatmapHighcharts.render(options);
 </script>
 </body>