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 has these sub-tabs, all drawn in the page with 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.

• Paralogs: an ExpressionAtlasHeatmap of the gene's within-species paralogs in the experiment picked in the selector, which lists every study of the species (EBI and JGI; only the gene's studies when the host's search results carry expressed_in_gxa_attr_ss).
• EBI Studies (formerly "All Studies"; its saved-view key is still 'gene'): an ExpressionAtlasHeatmap of the gene across the Expression Atlas studies. The JGI studies are left out: its filterRows drops every row of a study whose source is 'JGI' in the site's /experiments list, i.e. rows whose id is the study's accession, or whose id or name is the study's name or starts with '<study name> - ' (a study split by a second factor). The heatmap waits for that list (a first visit only, since the list is persisted), so the JGI rows never flash up, and for the studies the gene is expressed in (see below); if the list cannot be fetched it is drawn unfiltered.
• JGI Studies (shown when the gene is expressed in a JGI study, e.g. the Mullet lab's JGI-SB-1..4 in sorghum_v11): a selector of the JGI studies the gene is expressed in and an ExpressionFactorGrid of the gene in the chosen study. A gene that is expressed in JGI studies but in no EBI baseline study opens on this sub-tab (its EBI Studies heatmap would be all below cutoff), unless a sub-tab was chosen or saved. The grid puts the study's factors on its rows and columns (organism part on the columns when it varies). With two varying factors a button swaps them; with more, Rows and Columns selectors pick them and the factors left over are folded into the rows; a study with one varying factor is drawn as a single row. A cell that holds several samples (groups with the same factor values that differ by sample id) is split into one band per sample, and hovering or focusing a band shows its factor values, sample id, replicates and TPM.
• eFP Browser (where BAR has the species): the eFP image for the chosen study.

Download. Paralogs and EBI Studies have a Download button among the heatmap's controls, and JGI Studies one in the grid's toolbar. It opens a dialog that asks for a file name (prefilled, focused and selected) and a format: Tab-delimited text (.tsv), selected each time the dialog opens, or JSON (.json). Download (or Enter) saves the data the widget shows under that name, with the format's extension added unless the name already has it, once however often it is clicked; Cancel saves nothing. The name is sanitised so that the browser saves the file under exactly the name the dialog shows (path separators, : * ? " < > |, control and invisible format characters and a leading ~ are removed, and it is cut to 200 bytes) and Download is disabled while it is blank. When the heatmap shows no data ("No data match your filtering criteria…"), the dialog says there is nothing to download and saves nothing.

Sub-tab	Suggested file name	Saved
Paralogs	<gene>-paralogs-<experiment>	the heatmap's rows (the paralogs) and columns as shown: after its filters and ordering, and only the columns in view while zoomed in
EBI Studies	<gene>-ebi-studies	the same, one row per study (the JGI rows are left out, as on the page)
JGI Studies	<gene>-<JGI accession>	every sample of the study for the gene, one per line, whatever the grid's axes: gene, study, the study's factors, sample id, replicates and TPM

<gene> is the id the tab queries (the gene's atlas_id, or its id). The TSV of a heatmap starts with # comment lines (page URL, time, query or experiment, unit), then a header line of column labels and a line per row; the grid's TSV is a plain table. The JSON has the same data with ids, units and null for no data, and credits the data to their source: Expression Atlas for EBI studies, phytozome-next.jgi.doe.gov for a JGI study drawn in Paralogs (see gramene-atlas-heatmap's README, Downloads). For an EBI experiment the dialog of a Paralogs heatmap also links to the Full experiment data on Expression Atlas (EBI's download, formerly the "All data" menu item); JGI studies have no such download, so it is left out for them.

Details:

• 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. The study lists come from <grameneData>/experiments. The studies a gene is expressed in are its expressed_in_gxa_attr_ss, which the search results do not carry, so the tab looks them up per gene (<grameneData>/search?q=id:"<id>"&fl=id,expressed_in_gxa_attr_ss, the grameneGeneStudies bundle). If that lookup fails, JGI Studies offers every JGI study of the species.
• EBI Studies and JGI Studies send the gene's atlas_id (or its id).
• 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; JGI studies keep their Phytozome links. For 'download' it returns null when the experiment is a JGI study (a source: 'JGI' study of the species, or a download URL at jgi.doe.gov, whose payload names Phytozome's genome page as its download), which drops the dialog's full data link.
• The chosen sub-tab, Paralogs experiment, JGI study and the grid's axes per JGI study (jgiExperiment, jgiAxes) 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.3.0: 6.2.0 added filterRows and ExpressionFactorGrid, 6.3.0 the Download dialog and downloadFileName) 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.3.0.tgz
cd ../gramene-search && npm install --no-save ../anatomogram/gramene-anatomogram-3.0.0.tgz \
  ../atlas-heatmap/gramene-atlas-heatmap-6.3.0.tgz && rm -rf .parcel-cache*

Run the sorghum demo against another atlas instance (ATLAS_URL) and data release (GRAMENE_DATA, default https://data.sorghumbase.org/sorghum_v10b); sorghum_v11 has the JGI studies:

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