gramene-search 1.6.25 → 1.6.27

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gramene-search",
-  "version": "1.6.25",
+  "version": "1.6.27",
   "description": "search wrapper for gramene",
   "source": "src/index.js",
   "main": "dist/index.js",
@@ -43,6 +43,7 @@
     "querystringify": "^2.2.0",
     "react": "^17.0.2",
     "react-bootstrap": "^2.7.2",
+    "react-bootstrap-typeahead": "^6.4.1",
     "react-debounce-input": "^3.2.5",
     "react-dom": "17.0.2",
     "react-ga4": "^2.1.0",

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

@@ -1,52 +1,26 @@
 import React, { useRef, useEffect, useState } from 'react'
 import {connect} from "redux-bundler-react";
 import {Tabs, Tab, Form, Row, Col} from 'react-bootstrap';
+import { Typeahead } from 'react-bootstrap-typeahead'; // ES2015
+// Import as a module in your JS
+import 'react-bootstrap-typeahead/css/Typeahead.css';
 import BAR, {haveBAR} from "gramene-efp-browser";
 
 function DynamicIframe(props) {
   // Create a ref for the iframe element
   const iframeRef = useRef(null);
+  const [iframeHeight, setIframeHeight] = useState(500); // Default height
 
-  // Function to resize iframe height
-  const resizeIframe = () => {
-    if (iframeRef.current) {
-      const iframe = iframeRef.current;
-      const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
-      iframe.style.height = 44 + innerDoc.body.scrollHeight + 'px';
-    }
-  };
-
-  // Resize iframe when content loads
-  useEffect(() => {
-    resizeIframe();
-  }, []); // Empty dependency array ensures it only runs once after initial render
-
-  // Optional: Resize iframe when window is resized
-  useEffect(() => {
-    window.addEventListener('resize', resizeIframe);
-    return () => {
-      window.removeEventListener('resize', resizeIframe);
-    };
-  }, []); // Empty dependency array ensures it only runs once after initial render
-
-  // Resize iframe when content changes
   useEffect(() => {
-    const iframe = iframeRef.current;
-    if (!iframe) return;
-
-    const observer = new MutationObserver(resizeIframe);
-    const checkElement = () => {
-      const innerDoc = iframe.contentDocument || iframe.contentWindow.document;
-      const targetElement = innerDoc.querySelector('#heatmapContainer');
-      if (targetElement) {
-        observer.observe(targetElement, { attributes: true, childList: true, subtree: true });
-      } else {
-        setTimeout(checkElement, 200); // Check again after 100 milliseconds
+    const handleMessage = (event) => {
+      if (event.data.type === 'heightChange') {
+        setIframeHeight(event.data.height + 44);
       }
     };
-    checkElement();
 
-    return () => observer.disconnect();
+    window.addEventListener("message", handleMessage);
+
+    return () => window.removeEventListener("message", handleMessage);
   }, []);
 
   return (
@@ -54,7 +28,7 @@ function DynamicIframe(props) {
       ref={iframeRef}
       src={props.url}
       title="Dynamic Iframe"
-      style={{ width: '100%', border: 'none' }}
+      style={{ width: '100%', height: `${iframeHeight}px`, border: 'none' }}
     />
   );
 }
@@ -71,7 +45,11 @@ const Detail = props => {
   useEffect(() => {
     const tid = Math.floor(gene.taxon_id / 1000);
     if (props.expressionStudies[tid]) {
-      let eList = props.expressionStudies[tid].filter(e => e.type === "Baseline");
+      let eList = props.expressionStudies[tid];
+      if (props.searchResult.hasOwnProperty('expressed_in_gxa_attr_ss')) {
+        const in_gxa = new Set(props.searchResult.expressed_in_gxa_attr_ss);
+        eList = props.expressionStudies[tid].filter(e => in_gxa.has(e._id));
+      }
       setAtlasExperimentList(eList);
 
       let refExp = eList.filter(e => e.isRef);
@@ -85,46 +63,47 @@ const Detail = props => {
   }, [props.expressionStudies]);
 
   let paralogs_url;
-  let gene_url = `/static/atlasWidget.html?genes=${gene.atlas_id || gene._id}&localAPI=${isLocal}`;
+  let gene_url = `https://dev.gramene.org/static/atlasWidget.html?genes=${gene.atlas_id || gene._id}&experiment=${atlasExperiment}&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;
   }
   if (paralogs.length > 1 && atlasExperiment) {
-    paralogs_url= `/static/atlasWidget.html?genes=${paralogs.join(' ')}&experiment=${atlasExperiment}&localAPI=${isLocal}`;
+    paralogs_url= `https://dev.gramene.org/static/atlasWidget.html?genes=${paralogs.join(' ')}&experiment=${atlasExperiment}&localAPI=${isLocal}`;
   }
+  const ref = useRef(null);
+  const ref2 = useRef(null);
   return <Tabs>
     {paralogs_url &&
       <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.description || experiment._id}</option>
-                ))}
-              </Form.Select>
-            </Col>
-          </Form.Group>
-        </Form>
+        <Typeahead clearButton size='sm'
+          id="experiment-selector"
+          ref={ref}
+          labelKey="experiment"
+          onChange={(exps) => {if (exps.length > 0) {setAtlasExperiment(exps[0]._id);setTimeout(() => ref.current?.clear(), 2000)}}}
+          placeholder="Choose an experiment..."
+          options={atlasExperimentList}
+          labelKey={(experiment) => `${experiment.type}: ${experiment.description || experiment._id}`}
+        />
         <DynamicIframe url={paralogs_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}
+      {/*<Form.Check*/}
+      {/*  type="switch"*/}
+      {/*  id="localAPI"*/}
+      {/*  label="Local API"*/}
+      {/*  checked={isLocal}*/}
+      {/*  onChange={handleLocalAPIChange}*/}
+      {/*/>*/}
+      <Typeahead clearButton size='sm'
+                 id="experiment-selector2"
+                 ref={ref}
+                 labelKey="experiment"
+                 onChange={(exps) => {if (exps.length > 0) {setAtlasExperiment(exps[0]._id);setTimeout(() => ref.current?.clear(), 2000)}}}
+                 placeholder="Choose an experiment..."
+                 options={atlasExperimentList}
+                 labelKey={(experiment) => `${experiment.type}: ${experiment.description || experiment._id}`}
       />
       <DynamicIframe url={gene_url}/>
     </Tab>
@@ -135,9 +114,9 @@ const Detail = props => {
 };
 
 export default connect(
-  // 'selectParalogExpression',
+  //'selectParalogExpression',
   'selectExpressionStudies',
-  'doRequestParalogExpression',
+  //'doRequestParalogExpression',
   Detail
 );
 

package/src/demo.js

@@ -44,8 +44,8 @@ const panSites = [
     url: 'https://www.gramene.org',
     ensemblURL: 'https://ensembl.gramene.org',
     ensemblSite: 'https://ensembl.gramene.org',
-    ensemblRest: 'https://data.gramene.org/ensembl68',
-    grameneData: 'https://data.gramene.org/v68',
+    ensemblRest: 'https://data.gramene.org/ensembl69',
+    grameneData: 'https://data.gramene.org/v69',
     ga: 'G-ZTEQBFCRXZ',
     targetTaxonId: 3702,
     alertText: 'Main site',
@@ -89,10 +89,10 @@ const panSites = [
     ensemblURL: 'https://test.gramene.org',
     ensemblSite: 'https://test.gramene.org',
     ensemblRest: 'https://data.gramene.org/pansite-ensembl-108',
-    grameneData: 'https://data.gramene.org/maize_v5',
+    grameneData: 'https://data.sorghumbase.org/auth_testing',
     targetTaxonId: 4577,
     ga: "G-Y7ZYG1R8QT",
-    showViews: false,
+    showViews: true,
     not_downtime: 'The search interface will be undergoing maintenance on Tuesday, July 20 from 3:00 - 4:00 PM EDT',
     details: {
       sequences: true,