gramene-search

This is based on the redux-bundler example application

install

npm i

This hack is necessary to get Parcel to transpile imported node modules correctly.

Edit node_modules/@parcel/core/lib/summarizeRequest.js

Change return !filePath.includes(NODE_MODULES); to return true;

build

npm run build compiles js for use in the sorghum-webapp assuming you have cloned that in the same parent directory

npm run start-maize launches the maize pangenome subsite

Primers tab

The Primers gene-detail tab embeds PrimerDesigner from gramene-primers: PCR/qPCR primer design, a genome specificity check and a pan-genome coverage check, served by the gramene-swagger /primers endpoints. It appears after Sequences only on sites that set details.primers:

• primers: true uses the site's grameneData API.
• primers: {apiBase: 'https://data.sorghumbase.org/sorghum_v11', pangenome: false} points the tab at another swagger base URL (it must serve /primers); pangenome: false hides the pan-genome check.

Leave the key unset (or false) where the API has no /primers endpoints. The designer state is kept in uiViewState.byGene[geneId].primers and saved with shared views; a restored view re-runs the design, and an expired check job shows "Re-run check". A pasted sequence stays in that store, so it survives switching detail tabs, but it is left out of saved views; design responses and check results are not saved either. Gene links in check results open in a new tab, so the design and a running check stay put. Styles are injected at runtime, so no CSS import is needed.

gramene-primers is a dependency (^0.2.0). To try unreleased gramene-primers changes, install a packed tarball over it (not npm link or file:, which load a second React); the next npm install puts the registry version back.

cd ../gramene-primers && npm run pack:local       # gramene-primers-0.2.0.tgz
cd ../gramene-search && npm install --no-save ../gramene-primers/gramene-primers-0.2.0.tgz && rm -rf .parcel-cache

Run the sorghum demo against a swagger that serves /primers:

PRIMERS_API=https://data.sorghumbase.org/sorghum_v11a SUBSITE=sorghum npx parcel src/sorghum.html --port 1234

In the sorghum demo (src/demo.js) the tab is shown only when PRIMERS_API is set; it becomes details.primers.apiBase.

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 ExpressionAtlasHeatmap from gramene-atlas-heatmap, warelab's React 18 fork of EBI's atlas-heatmap; the anatomogram comes from gramene-anatomogram. They replace the old iframe to dev.gramene.org/static/atlasWidget.html.

• atlasUrl in the site configuration names the gramene-swagger /gxa/ instance to query, e.g. 'https://data.sorghumbase.org/sorghum_v11/gxa/'. Unset, the tab queries https://data.sorghumbase.org/auth_testing/gxa/, the old widget's default.
• All Studies sends the gene's atlas_id (or its id); Paralogs sends the within-species paralogs for the experiment picked in the selector.
• Links open in a new tab. resolveUrl in Expression.js points row, experiment, "more information", Expression Atlas and download links at EBI, because gramene-swagger returns relative gene links and an empty geneQuery.
• The chosen sub-tab and experiment are kept in uiViewState.byGene[geneId].expression and saved with shared views.
• Styles are injected at runtime; Bootstrap 5 CSS and react-bootstrap 2 come from the host.

gramene-atlas-heatmap is a dependency (^6.0.0) and brings in gramene-anatomogram. To try unreleased fork changes, install packed tarballs of both packages over the registry versions (not npm link or file:, which load a second React); the next npm install puts the registry versions back.

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:

ATLAS_URL=https://data.sorghumbase.org/sorghum_v11/gxa/ SUBSITE=sorghum npx parcel src/sorghum.html --port 1235