gramene-search 2.34.0 → 2.35.1

package/README.md

@@ -46,4 +46,39 @@ Run the sorghum demo against a swagger that serves <code>/primers</code>:
 PRIMERS_API=https://data.sorghumbase.org/sorghum_v11a SUBSITE=sorghum npx parcel src/sorghum.html --port 1234
 ```
 In the sorghum demo (<code>src/demo.js</code>) the tab is shown only when <code>PRIMERS_API</code> is set;
-it becomes <code>details.primers.apiBase</code>.
+it becomes <code>details.primers.apiBase</code>.
+
+## Expression tab
+The Expression gene-detail tab's "All Studies" and "Paralogs" sub-tabs draw Expression Atlas heatmaps
+(with the anatomogram) in the page using <code>ExpressionAtlasHeatmap</code> from
+<a href="https://github.com/warelab/atlas-heatmap">gramene-atlas-heatmap</a>, warelab's React 18 fork of
+EBI's atlas-heatmap; the anatomogram comes from
+<a href="https://github.com/warelab/anatomogram">gramene-anatomogram</a>. They replace the old
+iframe to <code>dev.gramene.org/static/atlasWidget.html</code>.
+
+- <code>atlasUrl</code> in the site configuration names the gramene-swagger <code>/gxa/</code> instance to query,
+  e.g. <code>'https://data.sorghumbase.org/sorghum_v11/gxa/'</code>. Unset, the tab queries
+  <code>https://data.sorghumbase.org/auth_testing/gxa/</code>, the old widget's default.
+- All Studies sends the gene's <code>atlas_id</code> (or its id); Paralogs sends the within-species paralogs
+  for the experiment picked in the selector.
+- Links open in a new tab. <code>resolveUrl</code> in <code>Expression.js</code> points row, experiment,
+  "more information", Expression Atlas and download links at EBI, because gramene-swagger returns
+  relative gene links and an empty <code>geneQuery</code>.
+- The chosen sub-tab and experiment are kept in <code>uiViewState.byGene[geneId].expression</code> and saved
+  with shared views.
+- Styles are injected at runtime; Bootstrap 5 CSS and react-bootstrap 2 come from the host.
+
+<code>gramene-atlas-heatmap</code> is a dependency (<code>^6.0.0</code>) and brings in
+<code>gramene-anatomogram</code>. To try unreleased fork changes, install packed tarballs of both packages over
+the registry versions (not <code>npm link</code> or <code>file:</code>, which load a second React); the next
+<code>npm install</code> puts the registry versions back.
+```bash
+cd ../anatomogram && npm run pack:local      # gramene-anatomogram-3.0.0.tgz
+cd ../atlas-heatmap && npm run pack:local    # gramene-atlas-heatmap-6.0.0.tgz
+cd ../gramene-search && npm install --no-save ../anatomogram/gramene-anatomogram-3.0.0.tgz \
+  ../atlas-heatmap/gramene-atlas-heatmap-6.0.0.tgz && rm -rf .parcel-cache*
+```
+Run the sorghum demo against another atlas instance:
+```bash
+ATLAS_URL=https://data.sorghumbase.org/sorghum_v11/gxa/ SUBSITE=sorghum npx parcel src/sorghum.html --port 1235
+```

package/dist/index.js

@@ -17,6 +17,7 @@ var $gXNCa$reactswitch = require("react-switch");
 var $gXNCa$reacticonsio5 = require("react-icons/io5");
 var $gXNCa$reacticonsbs = require("react-icons/bs");
 var $gXNCa$reacticonsgr = require("react-icons/gr");
+var $gXNCa$grameneatlasheatmap = require("gramene-atlas-heatmap");
 var $gXNCa$gramenegenetreevis = require("gramene-genetree-vis");
 var $gXNCa$gramenetreesclientsrcgenetree = require("gramene-trees-client/src/genetree");
 var $gXNCa$tbrowse = require("tbrowse");
@@ -7836,6 +7837,7 @@ var $541b8b0d8c5501d2$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.conn
 
 
 
+
 // eFP Browser embed — was its own package (gramene-efp-browser@1.0.11),
 // absorbed here on 2026-05-29 to drop the unmaintained nwb/webpack-4 build
 // pipeline and remove a dependency that needed --openssl-legacy-provider.
@@ -8056,156 +8058,181 @@ function $59a241f3912e631e$export$1bc0f3596ef2efe9(gene) {
 }
 
 
-function $9e29a4f60318db7a$var$DynamicIframe(props) {
-    // Create a ref for the iframe element
-    const iframeRef = (0, $gXNCa$react.useRef)(null);
-    const [iframeHeight, setIframeHeight] = (0, $gXNCa$react.useState)(500); // Default height
-    (0, $gXNCa$react.useEffect)(()=>{
-        const handleMessage = (event)=>{
-            if (event.data.type === 'heightChange') setIframeHeight(event.data.height + 44);
-        };
-        window.addEventListener("message", handleMessage);
-        return ()=>window.removeEventListener("message", handleMessage);
-    }, []);
-    return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("iframe", {
-        ref: iframeRef,
-        src: props.url,
-        title: "Dynamic Iframe",
-        style: {
-            width: '100%',
-            height: `${iframeHeight}px`,
-            border: 'none'
-        }
-    });
-}
+// "All Studies" and "Paralogs" draw Expression Atlas heatmaps in the page with
+// gramene-atlas-heatmap (warelab's React 18 fork of EBI's atlas-heatmap; the
+// anatomogram comes from gramene-anatomogram). configuration.atlasUrl names the
+// gramene-swagger /gxa/ instance to query; sites that leave it unset get the
+// instance the old dev.gramene.org iframe widget fell back to.
+const $9e29a4f60318db7a$var$DEFAULT_ATLAS_URL = 'https://data.sorghumbase.org/auth_testing/gxa/';
+const $9e29a4f60318db7a$var$EBI_GXA = 'https://www.ebi.ac.uk/gxa/';
+const $9e29a4f60318db7a$var$genesOf = (query)=>query && query.gene ? query.gene.split(' ') : [];
+const $9e29a4f60318db7a$var$editSearch = (url, edit)=>{
+    try {
+        const u = new URL(url);
+        edit(u.searchParams);
+        return u.href;
+    } catch (e) {
+        return undefined;
+    }
+};
+// gramene-swagger echoes geneQuery back as [null,...], returns relative row uris
+// (genes/<id>) that only some instances redirect to EBI, and atlasUrl itself is
+// not a browsable page, so point the heatmap's links at EBI's Expression Atlas.
+// undefined keeps the heatmap's own URL.
+const $9e29a4f60318db7a$var$resolveUrl = (kind, url, context)=>{
+    const genes = $9e29a4f60318db7a$var$genesOf(context.query);
+    const withGenes = (params)=>params.set('geneQuery', JSON.stringify(genes.map((value)=>({
+                value: value
+            }))));
+    switch(kind){
+        case 'row':
+            {
+                const uri = context.row && context.row.uri;
+                return uri && !/^https?:/i.test(uri) ? new URL(uri, $9e29a4f60318db7a$var$EBI_GXA).href : undefined;
+            }
+        case 'atlas':
+            return $9e29a4f60318db7a$var$EBI_GXA;
+        case 'experiment':
+            return $9e29a4f60318db7a$var$editSearch(url, withGenes);
+        case 'moreInformation':
+            return context.experiment ? $9e29a4f60318db7a$var$editSearch(url, withGenes) : `${$9e29a4f60318db7a$var$EBI_GXA}genes/${encodeURIComponent(genes[0])}`;
+        case 'download':
+            return $9e29a4f60318db7a$var$editSearch(url, (params)=>params.delete('geneQuery'));
+        default:
+            return undefined;
+    }
+};
+const $9e29a4f60318db7a$var$HEATMAP_OPTIONS = {
+    showAnatomogram: true,
+    isWidget: true,
+    showControlMenu: true,
+    linkTarget: '_blank',
+    resolveUrl: $9e29a4f60318db7a$var$resolveUrl
+};
+const $9e29a4f60318db7a$var$studyLabel = (e)=>`${e.type}:${e.description || e._id}`;
 const $9e29a4f60318db7a$var$Detail = (props)=>{
     const geneId = props.searchResult.id;
     const gene = props.geneDocs[geneId];
     // User-selected view state (active sub-tab, chosen GXA experiment, chosen eFP
     // study) lives in the uiViewState bundle keyed by geneId, so the shareable-
-    // views snapshot can round-trip it. Fetched data + the dev-only Local API
-    // toggle stay in local state. Defaults match the old local-state initials.
+    // views snapshot can round-trip it.
     const expr = props.uiViewState && props.uiViewState.byGene[geneId] && props.uiViewState.byGene[geneId].expression || {};
     const activeTab = expr.activeTab || 'gene';
     const atlasExperiment = expr.atlasExperiment || null;
-    const setActiveTab = (k)=>props.doSetExpressionState({
+    const setExpression = (patch)=>props.doSetExpressionState({
             geneId: geneId,
-            patch: {
-                activeTab: k
-            }
+            patch: patch
         });
-    const setAtlasExperiment = (v)=>props.doSetExpressionState({
-            geneId: geneId,
-            patch: {
-                atlasExperiment: v
-            }
-        });
-    const [atlasExperimentList, setAtlasExperimentList] = (0, $gXNCa$react.useState)([]);
-    const [atlasFacets, setAtlasFacets] = (0, $gXNCa$react.useState)(null);
-    const [isLocal, setIsLocal] = (0, $gXNCa$react.useState)(false);
-    const handleLocalAPIChange = (event)=>{
-        setIsLocal(event.target.checked);
-    };
     // The expressionStudies resource is otherwise fetched only when a top-level
     // expression view (exprViz/expression/export) is on — but this per-gene
     // Expression detail also needs it (the Paralogs sub-tab's experiment list and
-    // the atlasExperiment selection both derive from it). Self-fetch on mount so
-    // opening the detail populates the studies even when no such view is enabled.
+    // the atlasExperiment selection both derive from it). Fetch it here when it is
+    // missing or stale: it is persisted, and a browser that cached the list before
+    // studies were added to the release would otherwise keep offering the old list.
     (0, $gXNCa$react.useEffect)(()=>{
-        if (!props.expressionStudies && props.doFetchExpressionStudies) props.doFetchExpressionStudies();
+        if (props.expressionStudiesShouldUpdate && props.doFetchExpressionStudies) props.doFetchExpressionStudies();
     }, [
-        props.expressionStudies
+        props.expressionStudiesShouldUpdate
     ]);
+    const studies = props.expressionStudies && props.expressionStudies[Math.floor(gene.taxon_id / 1000)];
+    const inGxa = props.searchResult.expressed_in_gxa_attr_ss;
+    const experiments = (0, $gXNCa$react.useMemo)(()=>{
+        if (!studies) return [];
+        const inGxaSet = inGxa && new Set(inGxa);
+        // copy before sorting: the studies array belongs to the expressionStudies bundle
+        const list = inGxaSet ? studies.filter((e)=>inGxaSet.has(e._id)) : studies.slice();
+        return list.sort((a, b)=>$9e29a4f60318db7a$var$studyLabel(a) < $9e29a4f60318db7a$var$studyLabel(b) ? -1 : 1);
+    }, [
+        studies,
+        inGxa
+    ]);
+    // Only pick a default experiment when the user (or a restored snapshot)
+    // hasn't already chosen one — otherwise we'd clobber a saved selection
+    // the moment the studies list loads.
     (0, $gXNCa$react.useEffect)(()=>{
-        if (!props.expressionStudies) return;
-        const tid = Math.floor(gene.taxon_id / 1000);
-        if (props.expressionStudies[tid]) {
-            let facets = {
-                Differential: {},
-                Baseline: {}
-            };
-            let eList = props.expressionStudies[tid].sort((a, b)=>{
-                const a_name = `${a.type}:${a.description || a._id}`;
-                const b_name = `${b.type}:${b.description || b._id}`;
-                return a_name < b_name ? -1 : 1;
-            });
-            if (props.searchResult.hasOwnProperty('expressed_in_gxa_attr_ss')) {
-                const in_gxa = new Set(props.searchResult.expressed_in_gxa_attr_ss);
-                eList = eList.filter((e)=>in_gxa.has(e._id));
-            }
-            eList.forEach((e)=>{
-                e.factors.forEach((factor)=>facets[e.type][factor] = 1);
-            });
-            setAtlasExperimentList(eList);
-            setAtlasFacets(facets);
-            // Only pick a default experiment when the user (or a restored snapshot)
-            // hasn't already chosen one — otherwise we'd clobber a saved selection
-            // the moment the studies list loads.
-            if (!atlasExperiment) {
-                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);
-            }
-        }
+        if (atlasExperiment || experiments.length === 0) return;
+        const refExp = experiments.filter((e)=>e.isRef);
+        setExpression({
+            atlasExperiment: (refExp.length === 1 ? refExp[0] : experiments[0])._id
+        });
     }, [
-        props.expressionStudies
+        experiments,
+        atlasExperiment
     ]);
-    // Which Expression Atlas instance the embedded widget should query. The
-    // widget falls back to its own default when `atlasUrl` is absent, so sites
-    // that don't configure one are unaffected — only pass it when set.
-    const atlasUrl = props.configuration && props.configuration.atlasUrl || null;
-    const atlasParam = atlasUrl ? `&atlasUrl=${encodeURIComponent(atlasUrl)}` : '';
-    let paralogs_url;
-    let gene_url = `https://dev.gramene.org/static/atlasWidget.html?genes=${gene.atlas_id || gene._id}&localAPI=${isLocal}${atlasParam}`;
-    let paralogs = [];
-    const haveParalogs = props.grameneParalogs && props.grameneParalogs[gene._id];
-    if (haveParalogs) paralogs = props.grameneParalogs[gene._id];
+    const paralogs = props.grameneParalogs && props.grameneParalogs[gene._id];
     (0, $gXNCa$react.useEffect)(()=>{
-        if (!haveParalogs && gene.homology) props.doRequestParalogs(gene._id, gene.homology.supertree, gene.taxon_id);
+        if (!paralogs && gene.homology) props.doRequestParalogs(gene._id, gene.homology.supertree, gene.taxon_id);
     }, [
         gene._id,
-        haveParalogs
+        !!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 > 0 && atlasExperiment) paralogs_url = `https://dev.gramene.org/static/atlasWidget.html?genes=${paralogs.join(' ')}&experiment=${atlasExperiment}&localAPI=${isLocal}${atlasParam}`;
+    const atlasUrl = props.configuration && props.configuration.atlasUrl || $9e29a4f60318db7a$var$DEFAULT_ATLAS_URL;
+    const geneQuery = gene.atlas_id || gene._id;
+    const paralogQuery = paralogs && paralogs.length > 0 ? paralogs.join(' ') : null;
+    const allStudiesQuery = (0, $gXNCa$react.useMemo)(()=>({
+            gene: geneQuery
+        }), [
+        geneQuery
+    ]);
+    const paralogsQuery = (0, $gXNCa$react.useMemo)(()=>({
+            gene: paralogQuery
+        }), [
+        paralogQuery
+    ]);
+    const knownExperiment = experiments.some((e)=>e._id === atlasExperiment);
+    // Only the active sub-tab's heatmap is mounted; the keys give each query its
+    // own fetch, zoom and filters.
     return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactbootstrap.Tabs), {
         activeKey: activeTab,
-        onSelect: (k)=>setActiveTab(k),
+        onSelect: (k)=>setExpression({
+                activeTab: k
+            }),
         children: [
-            paralogs_url && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactbootstrap.Tab), {
+            paralogQuery && atlasExperiment && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactbootstrap.Tab), {
                 tabClassName: "gxa",
                 eventKey: "paralogs",
-                title: `Paralogs`,
+                title: "Paralogs",
                 children: [
-                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.Form).Select, {
+                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactbootstrap.Form).Select, {
+                        className: "mb-2",
                         "aria-label": "experiment selector",
-                        placeholder: "Select experiment",
-                        value: atlasExperiment || '',
-                        onChange: (e)=>setAtlasExperiment(e.target.value),
-                        children: atlasExperimentList.map((e, idx)=>/*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("option", {
-                                value: e._id,
-                                children: [
-                                    e.type,
-                                    ": ",
-                                    e.description || e._id
-                                ]
-                            }, idx))
+                        value: atlasExperiment,
+                        onChange: (e)=>setExpression({
+                                atlasExperiment: e.target.value
+                            }),
+                        children: [
+                            !knownExperiment && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("option", {
+                                value: atlasExperiment,
+                                children: atlasExperiment
+                            }),
+                            experiments.map((e)=>/*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("option", {
+                                    value: e._id,
+                                    children: [
+                                        e.type,
+                                        ": ",
+                                        e.description || e._id
+                                    ]
+                                }, e._id))
+                        ]
                     }),
-                    activeTab === "paralogs" && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)($9e29a4f60318db7a$var$DynamicIframe, {
-                        url: paralogs_url
-                    })
+                    activeTab === "paralogs" && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$grameneatlasheatmap.ExpressionAtlasHeatmap), {
+                        ...$9e29a4f60318db7a$var$HEATMAP_OPTIONS,
+                        atlasUrl: atlasUrl,
+                        query: paralogsQuery,
+                        experiment: atlasExperiment
+                    }, `${atlasUrl} ${atlasExperiment} ${paralogQuery}`)
                 ]
             }, "gxaparalogs"),
             /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.Tab), {
                 tabClassName: "gxa",
                 eventKey: "gene",
                 title: "All Studies",
-                children: activeTab === "gene" && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)($9e29a4f60318db7a$var$DynamicIframe, {
-                    url: gene_url
-                })
+                children: activeTab === "gene" && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$grameneatlasheatmap.ExpressionAtlasHeatmap), {
+                    ...$9e29a4f60318db7a$var$HEATMAP_OPTIONS,
+                    atlasUrl: atlasUrl,
+                    query: allStudiesQuery,
+                    experiment: false
+                }, `${atlasUrl} all ${geneQuery}`)
             }, "gxa"),
             (0, $59a241f3912e631e$export$1bc0f3596ef2efe9)(gene) && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.Tab), {
                 tabClassName: "eFP",
@@ -8214,19 +8241,15 @@ const $9e29a4f60318db7a$var$Detail = (props)=>{
                 children: /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $59a241f3912e631e$export$2e2bcd8739ae039), {
                     gene: gene,
                     study: expr.barStudy,
-                    onStudyChange: (v)=>props.doSetExpressionState({
-                            geneId: geneId,
-                            patch: {
-                                barStudy: v
-                            }
+                    onStudyChange: (v)=>setExpression({
+                            barStudy: v
                         })
                 })
             }, "bar")
         ]
     });
 };
-var $9e29a4f60318db7a$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.connect)('selectConfiguration', 'selectGrameneParalogs', 'selectExpressionStudies', 'selectUiViewState', 'doRequestParalogs', 'doFetchExpressionStudies', 'doSetExpressionState', //'doRequestParalogExpression',
-$9e29a4f60318db7a$var$Detail);
+var $9e29a4f60318db7a$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.connect)('selectConfiguration', 'selectGrameneParalogs', 'selectExpressionStudies', 'selectExpressionStudiesShouldUpdate', 'selectUiViewState', 'doRequestParalogs', 'doFetchExpressionStudies', 'doSetExpressionState', $9e29a4f60318db7a$var$Detail);