gramene-search 2.1.10 → 2.2.0

package/src/components/SaveView.js

@@ -0,0 +1,157 @@
+// "Save this view" UI — sits inside the Auth sidebar panel.
+//
+// Sign-in-gated by Auth.js (we only mount this when `user` is truthy). Opens
+// a modal with label + description + visibility toggle; on save, swaps to a
+// post-save state that shows the shareable URL with a copy button.
+//
+// Talks to the savedViews bundle. The snapshot itself is built inside
+// doSaveView via selectViewSnapshot — this component doesn't know or care
+// what the snapshot looks like.
+
+import React, { useState, useEffect, useCallback } from 'react';
+import { Button, Modal, Form, InputGroup, Alert, Spinner } from 'react-bootstrap';
+import { connect } from 'redux-bundler-react';
+import { BsClipboard, BsCheck2 } from 'react-icons/bs';
+
+const SaveViewButtonCmp = ({ user, savedViews, doSaveView, doResetSavedViewState }) => {
+  const [showModal, setShowModal] = useState(false);
+  const [label, setLabel] = useState('');
+  const [description, setDescription] = useState('');
+  const [isPublic, setIsPublic] = useState(false);
+  const [shareUrl, setShareUrl] = useState(null);
+  const [copied, setCopied] = useState(false);
+
+  const reset = useCallback(() => {
+    setLabel('');
+    setDescription('');
+    setIsPublic(false);
+    setShareUrl(null);
+    setCopied(false);
+    doResetSavedViewState();
+  }, [doResetSavedViewState]);
+
+  const handleOpen = () => { reset(); setShowModal(true); };
+  const handleClose = () => { setShowModal(false); reset(); };
+
+  const handleSave = async (e) => {
+    e.preventDefault();
+    if (!label.trim()) return;
+    try {
+      const { shareUrl } = await doSaveView({
+        user,
+        label: label.trim(),
+        description: description.trim(),
+        isPublic
+      });
+      setShareUrl(shareUrl);
+    } catch (_) {
+      // savedViews.saveError is already set; modal renders it
+    }
+  };
+
+  const handleCopy = async () => {
+    if (!shareUrl) return;
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1500);
+    } catch (_) { /* fallback: user can select-all */ }
+  };
+
+  const saving = savedViews && savedViews.saving;
+  const saveError = savedViews && savedViews.saveError;
+
+  return (
+    <>
+      <Button
+        size="sm"
+        variant="outline-primary"
+        style={{ marginTop: 8 }}
+        onClick={handleOpen}
+        title="Save the current filters, views, and detail tabs as a shareable link"
+      >
+        Save this view
+      </Button>
+
+      <Modal show={showModal} onHide={handleClose} centered>
+        <Modal.Header closeButton>
+          <Modal.Title>{shareUrl ? 'View saved' : 'Save this view'}</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
+          {!shareUrl && (
+            <Form onSubmit={handleSave}>
+              <Form.Group className="mb-3">
+                <Form.Label>Name</Form.Label>
+                <Form.Control
+                  autoFocus
+                  type="text"
+                  placeholder="e.g. TAIR loci with TF binding sites"
+                  value={label}
+                  onChange={(e) => setLabel(e.target.value)}
+                  disabled={saving}
+                  required
+                />
+              </Form.Group>
+              <Form.Group className="mb-3">
+                <Form.Label>Description (optional)</Form.Label>
+                <Form.Control
+                  as="textarea"
+                  rows={2}
+                  value={description}
+                  onChange={(e) => setDescription(e.target.value)}
+                  disabled={saving}
+                />
+              </Form.Group>
+              <Form.Group className="mb-3">
+                <Form.Check
+                  type="switch"
+                  id="save-view-public"
+                  label="Make this view public (visible to anyone with the link)"
+                  checked={isPublic}
+                  onChange={(e) => setIsPublic(e.target.checked)}
+                  disabled={saving}
+                />
+              </Form.Group>
+              {saveError && <Alert variant="danger">{saveError}</Alert>}
+              <div className="d-flex justify-content-end gap-2">
+                <Button variant="secondary" onClick={handleClose} disabled={saving}>
+                  Cancel
+                </Button>
+                <Button type="submit" variant="primary" disabled={saving || !label.trim()}>
+                  {saving ? <><Spinner as="span" size="sm" animation="border" /> Saving…</> : 'Save'}
+                </Button>
+              </div>
+            </Form>
+          )}
+
+          {shareUrl && (
+            <>
+              <p>Share this link to let others open the same search and detail state:</p>
+              <InputGroup>
+                <Form.Control
+                  type="text"
+                  value={shareUrl}
+                  readOnly
+                  onFocus={(e) => e.target.select()}
+                />
+                <Button variant={copied ? 'success' : 'outline-secondary'} onClick={handleCopy}>
+                  {copied ? <><BsCheck2 /> Copied</> : <><BsClipboard /> Copy</>}
+                </Button>
+              </InputGroup>
+              <div className="mt-3 d-flex justify-content-end">
+                <Button variant="primary" onClick={handleClose}>Done</Button>
+              </div>
+            </>
+          )}
+        </Modal.Body>
+      </Modal>
+    </>
+  );
+};
+
+export default connect(
+  'selectSavedViews',
+  'doSaveView',
+  'doResetSavedViewState',
+  SaveViewButtonCmp
+);

package/src/components/exprViz/ExprVizView.js

@@ -92,6 +92,9 @@ const ExprVizViewCmp = props => {
                 onLoad={() => doFetchExprVizData(tid)}
                 onReorder={(next) => props.doReorderExprVizFields(tid, next)}
                 onAddRangeQuery={props.doAddGrameneRangeQuery}
+                onSetVizMode={(m) => props.doSetExprVizVizMode(tid, m)}
+                onSetScale={(s) => props.doSetExprVizScale(tid, s)}
+                onSetBrushes={(b) => props.doSetExprVizBrushes(tid, b)}
               />
             </Tab>
           );
@@ -248,13 +251,18 @@ function downloadTsv(filename, rows, fields, studies, expressionSamples) {
   URL.revokeObjectURL(url);
 }
 
-const TaxonPanel = ({ taxon, studies, expressionSamples, tabState, onOpenFields, onLoad, onReorder, onAddRangeQuery }) => {
+const TaxonPanel = ({ taxon, studies, expressionSamples, tabState, onOpenFields, onLoad, onReorder, onAddRangeQuery, onSetVizMode, onSetScale, onSetBrushes }) => {
   const selected = (tabState && tabState.selectedFields) || [];
   const rows = (tabState && tabState.rows) || [];
   const fetchInfo = (tabState && tabState.fetch) || { status: 'idle', total: 0 };
-  const [scale, setScale] = useState('linear');
-  const [vizMode, setVizMode] = useState('heatmap'); // 'parallel' | 'heatmap'
-  const [selections, setSelections] = useState({});
+  // View config (sub-tab, scale, brushes) is persisted in the exprViz bundle
+  // per taxon so a saved view can round-trip it. Driven controlled from here.
+  const scale = (tabState && tabState.scale) || 'linear';
+  const vizMode = (tabState && tabState.vizMode) || 'heatmap'; // 'parallel' | 'heatmap'
+  const selections = (tabState && tabState.brushes) || {};
+  const setScale = (s) => onSetScale && onSetScale(s);
+  const setVizMode = (m) => onSetVizMode && onSetVizMode(m);
+  const setSelections = (b) => onSetBrushes && onSetBrushes(b);
   const [clearVersion, setClearVersion] = useState(0);
   const [hoveredId, setHoveredId] = useState(null);
   const [plotHeight, setPlotHeight] = useState(320);
@@ -324,13 +332,6 @@ const TaxonPanel = ({ taxon, studies, expressionSamples, tabState, onOpenFields,
     [visibleFields, studies, expressionSamples]
   );
 
-  useEffect(() => {
-    if (rows.length === 0 && hasBrush) {
-      setSelections({});
-      setClearVersion(v => v + 1);
-    }
-  }, [rows.length, hasBrush]);
-
   return (
     <div className="exprviz-tab-panel">
       <div className="exprviz-toolbar">
@@ -429,6 +430,7 @@ const TaxonPanel = ({ taxon, studies, expressionSamples, tabState, onOpenFields,
               rows={rows}
               fields={visibleFields}
               scale={scale}
+              initialSelections={selections}
               onBrushChange={setSelections}
               onReorder={handleReorder}
               clearVersion={clearVersion}
@@ -472,6 +474,9 @@ export default connect(
   'doToggleExprVizFieldsModal',
   'doFetchExprVizData',
   'doReorderExprVizFields',
+  'doSetExprVizVizMode',
+  'doSetExprVizScale',
+  'doSetExprVizBrushes',
   'doAddGrameneRangeQuery',
   ExprVizViewCmp
 );

package/src/components/exprViz/ParallelCoordsPlot.js

@@ -59,6 +59,7 @@ const ParallelCoordsPlot = ({
   rows,
   fields,
   scale = 'linear',
+  initialSelections = null,
   onBrushChange,
   onReorder,
   clearVersion = 0,
@@ -70,6 +71,13 @@ const ParallelCoordsPlot = ({
   // selections in data domain: { [field]: [lo, hi] }
   const selectionsRef = useRef({});
   const lastClearRef = useRef(0);
+  // Seed brushes from a restored saved view exactly once (the first render
+  // where `initialSelections` is non-empty). Read via a ref so a change to the
+  // prop — which happens on every brush as it round-trips through the store —
+  // doesn't force an SVG rebuild; the deps below already rerun on data changes.
+  const initialSelectionsRef = useRef(initialSelections);
+  initialSelectionsRef.current = initialSelections;
+  const seededRef = useRef(false);
   // Track container size so the d3 render reruns when the user drags the
   // pane resizer (or when the window is resized). The values themselves
   // aren't read inside the effect — the effect always reads clientWidth/
@@ -96,6 +104,13 @@ const ParallelCoordsPlot = ({
   }, []);
 
   useEffect(() => {
+    if (!seededRef.current) {
+      const init = initialSelectionsRef.current;
+      if (init && Object.keys(init).length) {
+        selectionsRef.current = { ...init };
+        seededRef.current = true;
+      }
+    }
     if (clearVersion !== lastClearRef.current) {
       selectionsRef.current = {};
       lastClearRef.current = clearVersion;

package/src/components/results/GeneList.js

@@ -60,36 +60,6 @@ const PanLink = (props) => {
   </div>;
 };
 
-const CurationComponent1 = ({ curation }) => {
-  return (
-    <div className="gene-curation">
-      <span>Curated gene structure</span>
-      {curation.okay > 0 && <span className="status">✔️ {curation.okay}</span>}
-      {curation.flagged > -10 && <span className="status">⚠️ {curation.flagged}</span>}
-    </div>
-  );
-};
-const CurationComponent = ({ curation, gene }) => {
-  const total = curation.okay + curation.flagged;
-  const okayRatio = (curation.okay / total);
-  const flaggedRatio = (curation.flagged / total);
-  const tooltip = (
-    <Tooltip id="tooltip">
-      <strong>Gene structure</strong><br/>
-      Okay: {curation.okay} &nbsp;
-      Flagged: {curation.flagged}
-    </Tooltip>
-  );
-  return (
-    <OverlayTrigger placement="left" overlay={tooltip}>
-      <a className="gene-curation" target="_blank" href={`https://devdata.gramene.org/curation/curations?idList=${gene.id}`}>
-        <span className="okay" style={{opacity: okayRatio}}>☑</span>
-        <span className="flagged" style={{opacity: flaggedRatio}}>⚠</span>
-      </a>
-    </OverlayTrigger>
-  )
-};
-
 const ClosestOrthologCmp = (props) => {
   let id, taxon_id, name, desc, species, className, identity;
   const gene = props.gene;
@@ -220,10 +190,10 @@ const allDetails = [
 class Gene extends React.Component {
   constructor(props) {
     super(props);
+    // `details` is derived per-render config (which tabs the site enables,
+    // crossed with this row's `capabilities`) — keep it local.
     this.state = {
       details: allDetails.map(o => ({...o})).filter(d => props.config.details[d.id]),
-      expandedDetail: props.expandedDetail,
-      fullscreen: false,
     };
     let hasData = {};
     props.searchResult.capabilities.forEach(c => {
@@ -234,18 +204,38 @@ class Gene extends React.Component {
     });
     this.state.details.forEach(d => d.available |= hasData.hasOwnProperty(d.id));
   }
+  componentDidMount() {
+    // Seed the auto-open-homology intent (from GeneList when numFound===1) the
+    // first time this row mounts, only if the user hasn't already opened/closed
+    // a tab here. Without this, the bundle would have no entry and the prior
+    // "auto-expand homology on single-result" behavior would be lost.
+    if (this.props.expandedDetail && this.expandedDetail === undefined) {
+      this.props.doExpandGeneDetail({
+        geneId: this.props.searchResult.id,
+        detail: this.props.expandedDetail
+      });
+    }
+  }
+  get expandedDetail() {
+    const slice = this.props.uiViewState && this.props.uiViewState.byGene[this.props.searchResult.id];
+    return slice ? slice.expandedDetail : undefined;
+  }
+  get fullscreen() {
+    const slice = this.props.uiViewState && this.props.uiViewState.byGene[this.props.searchResult.id];
+    return !!(slice && slice.fullscreen);
+  }
   getDetailStatus(d) {
-    if (this.state.expandedDetail === d.id) return 'expanded';
+    if (this.expandedDetail === d.id) return 'expanded';
     if (d.available) return 'closed'
     return d.id === "pubs" ? 'empty' : 'disabled';
   }
   setExpanded(d) {
     if (d.available || d.id === "pubs") {
-      if (this.state.expandedDetail === d.id) {
-        this.setState({expandedDetail: null, fullscreen: false})
+      const geneId = this.props.searchResult.id;
+      if (this.expandedDetail === d.id) {
+        this.props.doExpandGeneDetail({geneId, detail: null});
       }
       else {
-        const geneId = this.props.searchResult.id;
         if (!(this.props.geneDocs && this.props.geneDocs.hasOwnProperty(geneId))) {
           this.props.requestGene(geneId)
         }
@@ -254,7 +244,7 @@ class Gene extends React.Component {
           action: 'Details',
           label: d.label
         });
-        this.setState({expandedDetail: d.id, fullscreen: false})
+        this.props.doExpandGeneDetail({geneId, detail: d.id});
       }
     }
   }
@@ -279,7 +269,6 @@ class Gene extends React.Component {
     const panSite = this.props.config.panSite;
     const searchResult = this.props.searchResult;
     const taxName = this.props.taxName;
-    const curation = this.props.curation;
     // let orthologs='';
     // if (this.props.orthologs && this.props.orthologs.hasOwnProperty(searchResult.id)) {
     //   orthologs = this.props.orthologs[searchResult.id].join(', ');
@@ -290,7 +279,6 @@ class Gene extends React.Component {
         <div className="result-gene-summary">
           <div className="result-gene-title-body">
             {panSite.hasOwnProperty(searchResult.system_name) && <PanLink pan={panSite[searchResult.system_name]} gene={searchResult}/>}
-            {curation && <CurationComponent curation={curation} gene={searchResult}/> }
             <div className="gene-title">
               <div className="gene-species">{taxName}</div>
               <h3 className="gene-name">{searchResult.name}
@@ -304,7 +292,7 @@ class Gene extends React.Component {
         </div>
         <div className="gene-detail-tabs">
           {this.state.details.map((d,idx) => {
-            const isExpanded = this.state.expandedDetail === d.id;
+            const isExpanded = this.expandedDetail === d.id;
             return (
               <OverlayTrigger
                 key={idx}
@@ -331,7 +319,7 @@ class Gene extends React.Component {
                       title="View full screen"
                       onClick={(e) => {
                         e.stopPropagation();
-                        this.setState({fullscreen: true});
+                        this.props.doSetGeneFullscreen({geneId: searchResult.id, fullscreen: true});
                       }}
                     />
                   )}
@@ -340,14 +328,14 @@ class Gene extends React.Component {
             );
           })}
         </div>
-        {this.state.expandedDetail && this.ensureGene(searchResult.id) && (
+        {this.expandedDetail && this.ensureGene(searchResult.id) && (
           <FullscreenContainer
             className="visible-detail"
-            fullscreen={this.state.fullscreen}
-            onExitFullscreen={() => this.setState({fullscreen: false})}
-            title={(this.state.details.find(d => d.id === this.state.expandedDetail) || {}).label}
+            fullscreen={this.fullscreen}
+            onExitFullscreen={() => this.props.doSetGeneFullscreen({geneId: searchResult.id, fullscreen: false})}
+            title={(this.state.details.find(d => d.id === this.expandedDetail) || {}).label}
           >
-            {React.createElement(inventory[this.state.expandedDetail], this.props)}
+            {React.createElement(inventory[this.expandedDetail], this.props)}
           </FullscreenContainer>
         )}
       </div>
@@ -355,6 +343,16 @@ class Gene extends React.Component {
   }
 }
 
+// Wrap Gene so each row gets uiViewState + dispatchers. (We don't pull these
+// in at the GeneList level because the slice we care about is per-geneId; the
+// component-side getters read by row id.)
+const ConnectedGene = connect(
+  'selectUiViewState',
+  'doExpandGeneDetail',
+  'doSetGeneFullscreen',
+  Gene
+);
+
 const GeneList = props => {
   if (props.grameneSearch && props.grameneSearch.response && props.grameneTaxonomy) {
     let prev,page,next;
@@ -374,7 +372,7 @@ const GeneList = props => {
     return <div>
       <div>{prev}{page}{next}</div>
       {props.grameneSearch.response.docs.map((g,idx) => (
-        <Gene key={idx}
+        <ConnectedGene key={idx}
               searchResult={g}
               config={props.configuration}
               taxName={props.grameneTaxonomy[g.taxon_id].name}
@@ -383,7 +381,6 @@ const GeneList = props => {
               requestOrthologs={props.doRequestOrthologs}
               orthologs={props.grameneOrthologs}
               taxLut={props.grameneTaxonomy}
-              curation={props.curatedGenes ? props.curatedGenes[g.id] : null}
               expandedDetail={props.grameneSearch.response.numFound === 1 && g.can_show.homology ? 'homology' : null}
         />
       ))}
@@ -401,7 +398,6 @@ export default connect(
   'selectGrameneOrthologs',
   'selectGrameneSearchOffset',
   'selectGrameneSearchRows',
-  'selectCuratedGenes',
   'doRequestGrameneGene',
   'doRequestOrthologs',
   'doRequestResultsPage',

package/src/components/results/OntologyEnrichment.js

@@ -399,7 +399,7 @@ const SortableTh = ({ label, sortKey, activeKey, activeDir, onSort, numeric, hel
   );
 };
 
-const OntologySection = ({ block, search, onAddFilter }) => {
+const OntologySection = ({ block, search, sort, onSortChange, onAddFilter }) => {
   const filtered = useMemo(() => {
     if (!search) return block.rows;
     const needle = search.toLowerCase();
@@ -410,15 +410,16 @@ const OntologySection = ({ block, search, onAddFilter }) => {
   }, [block.rows, search]);
 
   const showType = ONTS_WITH_TYPE_COLUMN.has(block.ontology);
-  const [sortKey, setSortKey] = useState('pAdj');
-  const [sortDir, setSortDir] = useState('asc');
+  // Sort state is persisted per section in the bundle ui so a saved view
+  // restores it. Defaults match the historical local-state initials.
+  const sortKey = (sort && sort.key) || 'pAdj';
+  const sortDir = (sort && sort.dir) || 'asc';
 
   const handleSort = (key) => {
     if (key === sortKey) {
-      setSortDir(d => (d === 'asc' ? 'desc' : 'asc'));
+      onSortChange(block.ontology, sortKey, sortDir === 'asc' ? 'desc' : 'asc');
     } else {
-      setSortKey(key);
-      setSortDir(SORT_DEFAULT_DIR[key] || 'asc');
+      onSortChange(block.ontology, key, SORT_DEFAULT_DIR[key] || 'asc');
     }
   };
 
@@ -512,6 +513,10 @@ const TaxonPanel = ({ taxon, ontologyEnrichment, results, ui, onUiChange, onAddF
   // Hide ontologies that aren't used in this species at all.
   const blocks = allBlocks.filter(b => b.tested > 0);
 
+  const handleSortChange = (sectionKey, key, dir) => {
+    onUiChange({ sort: { ...(ui.sort || {}), [sectionKey]: { key, dir } } });
+  };
+
   return (
     <div className="oe-panel">
       <div className="oe-summary">
@@ -525,6 +530,8 @@ const TaxonPanel = ({ taxon, ontologyEnrichment, results, ui, onUiChange, onAddF
             key={b.ontology}
             block={b}
             search={ui.search}
+            sort={ui.sort && ui.sort[b.ontology]}
+            onSortChange={handleSortChange}
             onAddFilter={onAddFilter}
           />
         ))}

package/src/components/results/TaxDist.js

@@ -49,6 +49,17 @@ class TaxDist extends React.Component {
           }
         })
       }
+      // Drop any tid the taxonomy tree doesn't know about — gramene-search-vis
+      // throws when it encounters one (nodeIndex[tid].getPath() on undefined),
+      // which silently leaves every branch expanded.
+      if (this.props.grameneTaxDist && this.props.grameneTaxDist.indices && this.props.grameneTaxDist.indices.id) {
+        const nodeIndex = this.props.grameneTaxDist.indices.id;
+        Object.keys(selectedTaxa).forEach(tid => {
+          if (!nodeIndex[tid]) {
+            delete selectedTaxa[tid];
+          }
+        });
+      }
     }
     return (
       <div className="results-vis big-vis">

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

@@ -0,0 +1,148 @@
+// 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.
+// All upstream URLs and species-specific id formatters preserved as-is.
+
+import React, { Component, useState, useEffect } from 'react';
+
+const urls = {
+  image:   (genome, study, gene) => `https://bar.utoronto.ca/api/efp_image/efp_${genome}/${study}/Absolute/${gene}`,
+  app:     (genome, study, gene) => `https://bar.utoronto.ca/efp_${genome}/cgi-bin/efpWeb.cgi?dataSource=${study}&mode=Absolute&primaryGene=${gene}`,
+  studies: genome                => `https://bar.utoronto.ca/api/efp_image/get_efp_data_source/${genome}`,
+  logo:    'https://bar.utoronto.ca/bbc_logo_small.gif',
+  spinner: 'https://www.sorghumbase.org/static/images/dna_spinner.svg'
+};
+
+const zmv4_re = /Zm00001d/;
+const browsers = {
+  sorghum_bicolor: {
+    formatGene: gene => gene._id.replace('SORBI_3', 'Sobic.'),
+    genome: 'sorghum'
+  },
+  vitis_vinifera: {
+    formatGene: gene => gene._id,
+    genome: 'grape'
+  },
+  arabidopsis_thaliana: {
+    formatGene: gene => gene._id,
+    fixStudies: studies => {
+      studies = studies.filter(s => s.value !== 'Klepikova_Atlas');
+      studies.unshift({ value: 'Klepikova_Atlas', label: 'Klepikova Atlas' });
+      return studies;
+    },
+    genome: 'arabidopsis'
+  },
+  zea_mays: {
+    formatGene: gene => {
+      let id = gene._id;
+      if (gene.synonyms) {
+        gene.synonyms.forEach(syn => {
+          if (zmv4_re.test(syn)) { id = syn; }
+        });
+      }
+      return id;
+    },
+    fixStudies: studies => {
+      studies = studies.filter(s => s.value !== 'Hoopes_et_al_Atlas' && s.value !== 'Hoopes_et_al_Stress');
+      studies.unshift({ value: 'Hoopes_et_al_Stress', label: 'Hoopes et. al., Stress' });
+      studies.unshift({ value: 'Hoopes_et_al_Atlas',  label: 'Hoopes et. al., Atlas'  });
+      return studies;
+    },
+    genome: 'maize'
+  },
+  glycine_max: {
+    formatGene: gene => gene._id.replace('GLYMA_', 'Glyma.'),
+    fixStudies: studies => studies.filter(s => s.value !== 'soybean_senescence'),
+    genome: 'soybean'
+  },
+  oryza_sativa: {
+    genome: 'rice',
+    formatGene: gene => gene.MSU_id, // TODO: lookup IRGSP → LOC_ when MSU_id absent
+    fixStudies: studies => {
+      studies = studies.filter(s => s.value !== 'rice_rma' && s.value !== 'rice_mas');
+      studies.unshift({ value: 'rice_rma', label: 'rice rma' });
+      studies.unshift({ value: 'rice_mas', label: 'rice mas' });
+      return studies;
+    }
+  }
+};
+// Subsites that refer to maize b73 as `zea_maysb73`.
+browsers.zea_maysb73 = browsers.zea_mays;
+
+const ImageLoader = ({ url }) => {
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(false);
+
+  useEffect(() => {
+    setLoading(true);
+    setError(false);
+
+    const image = new Image();
+    image.src = url;
+    image.onload  = () => setLoading(false);
+    image.onerror = () => { setLoading(false); setError(true); };
+  }, [url]);
+
+  return (
+    <div style={{ padding: 20 }}>
+      {loading && <img src={urls.spinner} alt="Loading…" />}
+      {!loading && !error && <img style={{ maxWidth: '100%' }} src={url} alt="eFP browser output" />}
+      {error && <p>Error: Failed to load image</p>}
+    </div>
+  );
+};
+
+export default class BAR extends Component {
+  constructor(props) {
+    super(props);
+    this.state = { currentStudy: null };
+  }
+  getStudies(browser) {
+    fetch(urls.studies(browser.genome))
+      .then(res => res.json())
+      .then(res => {
+        if (res.wasSuccessful) {
+          let studies = res.data.sort().map(v => ({ value: v, label: v.replace(/_/g, ' ') }));
+          if (browser.fixStudies) studies = browser.fixStudies(studies);
+          this.setState({ studies });
+        }
+      })
+      .catch(console.error);
+  }
+  render() {
+    const gene = this.props.gene;
+    const browser = browsers[gene.system_name];
+    if (!browser) {
+      return <div><h2>Can't find eFP browser for {gene.system_name}</h2></div>;
+    }
+    if (!this.state.studies) {
+      this.getStudies(browser);
+      return <img src={urls.spinner} alt="Loading…" />;
+    }
+    const efp_gene = browser.formatGene(gene);
+    // `study`/`onStudyChange` let a host drive the selection (so a saved view
+    // can restore it); fall back to local state when uncontrolled.
+    const study = this.props.study || this.state.currentStudy || this.state.studies[0].value;
+    const onSelect = e => {
+      if (this.props.onStudyChange) this.props.onStudyChange(e.target.value);
+      else this.setState({ currentStudy: e.target.value });
+    };
+    return (
+      <div style={{ paddingTop: 10 }}>
+        <label style={{ paddingLeft: 20, paddingRight: 10 }}>Select a study:</label>
+        <select value={study} onChange={onSelect}>
+          {this.state.studies.map((s, idx) => <option key={idx} value={s.value}>{s.label}</option>)}
+        </select>
+        <br />
+        <ImageLoader url={urls.image(browser.genome, study, efp_gene)} />
+        <a style={{ paddingLeft: 100 }} href={urls.app(browser.genome, study, efp_gene)} target="_blank" rel="noreferrer">
+          Powered by <img src={urls.logo} style={{ maxWidth: 40 }} alt="BBC" /> Webservices
+        </a>
+      </div>
+    );
+  }
+}
+
+export function haveBAR(gene) {
+  return browsers.hasOwnProperty(gene.system_name);
+}