gramene-search 2.1.10 → 2.2.0

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

@@ -1,7 +1,7 @@
 import React, { useRef, useEffect, useState } from 'react'
 import {connect} from "redux-bundler-react";
 import {Tabs, Tab, Form, Row, Col} from 'react-bootstrap';
-import BAR, {haveBAR} from "gramene-efp-browser";
+import BAR, {haveBAR} from "./BAR";
 
 function DynamicIframe(props) {
   // Create a ref for the iframe element
@@ -31,16 +31,35 @@ function DynamicIframe(props) {
 }
 
 const Detail = props => {
-  const gene = props.geneDocs[props.searchResult.id];
-  const [atlasExperiment, setAtlasExperiment] = useState(null);
+  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.
+  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({geneId, patch: {activeTab: k}});
+  const setAtlasExperiment = (v) => props.doSetExpressionState({geneId, patch: {atlasExperiment: v}});
   const [atlasExperimentList, setAtlasExperimentList] = useState([]);
   const [atlasFacets, setAtlasFacets] = useState(null);
   const [isLocal, setIsLocal] = useState(false);
-  const [activeTab, setActiveTab] = useState('gene');
 
   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.
+  useEffect(() => {
+    if (!props.expressionStudies && props.doFetchExpressionStudies) {
+      props.doFetchExpressionStudies();
+    }
+  }, [props.expressionStudies]);
   useEffect(() => {
     if (!props.expressionStudies) return;
     const tid = Math.floor(gene.taxon_id / 1000);
@@ -58,12 +77,17 @@ const Detail = props => {
       eList.forEach(e => {e.factors.forEach(factor => facets[e.type][factor] = 1);});
       setAtlasExperimentList(eList);
       setAtlasFacets(facets);
-      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);
+      // 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);
+        }
       }
     }
   }, [props.expressionStudies]);
@@ -71,11 +95,15 @@ const Detail = props => {
   let paralogs_url;
   let gene_url = `https://dev.gramene.org/static/atlasWidget.html?genes=${gene.atlas_id || gene._id}&localAPI=${isLocal}`;
   let paralogs = [];
-  if (props.grameneParalogs && props.grameneParalogs[gene._id]) {
+  const haveParalogs = props.grameneParalogs && props.grameneParalogs[gene._id];
+  if (haveParalogs) {
     paralogs = props.grameneParalogs[gene._id];
-  } else if (gene.homology) {
-    props.doRequestParalogs(gene._id, gene.homology.supertree, gene.taxon_id);
   }
+  useEffect(() => {
+    if (!haveParalogs && gene.homology) {
+      props.doRequestParalogs(gene._id, gene.homology.supertree, gene.taxon_id);
+    }
+  }, [gene._id, haveParalogs]);
   // if (gene.homology && gene.homology.homologous_genes && gene.homology.homologous_genes.within_species_paralog) {
   //   paralogs = gene.homology.homologous_genes.within_species_paralog;
   // }
@@ -87,6 +115,7 @@ const Detail = props => {
       <Tab tabClassName="gxa" eventKey="paralogs" title={`Paralogs`} key="gxaparalogs">
         <Form.Select aria-label='experiment selector'
                      placeholder='Select experiment'
+                     value={atlasExperiment || ''}
                      onChange={(e) => setAtlasExperiment(e.target.value)}>
           { atlasExperimentList.map((e,idx) =>
             <option key={idx} value={e._id}>{e.type}: {e.description || e._id}</option>
@@ -106,7 +135,11 @@ const Detail = props => {
       {activeTab === "gene" && <DynamicIframe url={gene_url}/> }
     </Tab>
     {haveBAR(gene) &&
-      <Tab tabClassName="eFP" eventKey="eFP" title="eFP Browser" key="bar"><BAR gene={gene}/></Tab>
+      <Tab tabClassName="eFP" eventKey="eFP" title="eFP Browser" key="bar">
+        <BAR gene={gene}
+             study={expr.barStudy}
+             onStudyChange={v => props.doSetExpressionState({geneId, patch: {barStudy: v}})}/>
+      </Tab>
     }
   </Tabs>
 };
@@ -114,7 +147,10 @@ const Detail = props => {
 export default connect(
   'selectGrameneParalogs',
   'selectExpressionStudies',
+  'selectUiViewState',
   'doRequestParalogs',
+  'doFetchExpressionStudies',
+  'doSetExpressionState',
   //'doRequestParalogExpression',
   Detail
 );

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

@@ -2,7 +2,10 @@ import React from 'react'
 import _ from 'lodash';
 import {connect} from "redux-bundler-react";
 import TreeVis from "gramene-genetree-vis";
-import treesClient from "gramene-trees-client";
+// Subpath imports avoid gramene-trees-client/index.js, whose require chain
+// fires a /swagger fetch at module load (see comment in bundles/api.js).
+import taxonomy from "gramene-trees-client/src/taxonomy";
+import genetree from "gramene-trees-client/src/genetree";
 import {
   TBrowse,
   computePivotState,
@@ -17,7 +20,7 @@ import {
 } from "tbrowse";
 import {Detail, Title, Description, Content, Explore, Links} from "./generic";
 import {suggestionToFilters} from "../../utils";
-import {Spinner, Alert} from "react-bootstrap";
+import {Spinner} from "react-bootstrap";
 import '../../../../node_modules/gramene-genetree-vis/src/styles/msa.less';
 import '../../../../node_modules/gramene-genetree-vis/src/styles/tree.less';
 import './tree-view.css';
@@ -28,15 +31,123 @@ const TBROWSE_ZONES = [treeZone, labelsZone, msaZone, neighborhoodZone, genomeZo
 class Homology extends React.Component {
   constructor(props) {
     super(props);
-    this.state = {viewer: 'treevis', neighborhood: null, neighborhoodTreeId: null, geneStructures: null, geneStructuresTreeId: null, height: 600};
+    // Async data caches stay in local state (per mount, per tree). The
+    // user-controlled view state (viewer toggle, resize height, tbrowse
+    // ViewState) is lifted into the uiViewState bundle, keyed by geneId.
+    //
+    // `*Status` fields track per-zone load lifecycle so the TBrowse
+    // toolbar can render loading/error affordances via its zoneStatus
+    // prop. They start `undefined` (no signal); flipped to 'loading'
+    // when the fetch kicks off and 'ready' / 'error' on settle.
+    this.state = {
+      neighborhood: null,
+      neighborhoodTreeId: null,
+      neighborhoodStatus: undefined,
+      geneStructures: null,
+      geneStructuresTreeId: null,
+      geneStructuresStatus: undefined,
+    };
     if (!props.geneDocs.hasOwnProperty(props.searchResult.id)) {
       props.requestGene(props.searchResult.id)
     }
-    this.taxonomy = treesClient.taxonomy.tree(Object.values(props.grameneTaxonomy))
+    this.taxonomy = taxonomy.tree(Object.values(props.grameneTaxonomy))
+  }
+  // ----- uiViewState accessors (with sensible defaults) -----
+  getGeneId() { return this.props.searchResult.id; }
+  getHomologySlice() {
+    const slice = this.props.uiViewState && this.props.uiViewState.byGene[this.getGeneId()];
+    return (slice && slice.homology) || {};
+  }
+  getViewer() { return this.getHomologySlice().viewer || 'treevis'; }
+  getHeight() {
+    const h = this.getHomologySlice().height;
+    return typeof h === 'number' ? h : 600;
+  }
+  setViewer(viewer) {
+    this.props.doSetHomologyViewer({geneId: this.getGeneId(), viewer});
+  }
+  setHeight(height) {
+    this.props.doSetHomologyHeight({geneId: this.getGeneId(), height});
+  }
+  setTbrowseViewState(viewState) {
+    this.props.doSetHomologyTbrowseViewState({geneId: this.getGeneId(), tbrowse: viewState});
+  }
+  // Seed the bundle with a pivot-computed initial tbrowse view state once the
+  // tree data is available and the user is actually looking at the tbrowse
+  // viewer. Called from lifecycle (not render) to avoid dispatching mid-render.
+  maybeSeedTbrowseViewState() {
+    if (this.getViewer() !== 'tbrowse') return;
+    if (this.getHomologySlice().tbrowse) return;
+    const id = this.getGeneId();
+    if (!this.props.geneDocs.hasOwnProperty(id)) return;
+    const gene = this.props.geneDocs[id];
+    if (!gene.homology) return;
+    const treeId = gene.homology.gene_tree.id;
+    const raw = this.props.grameneTrees[treeId];
+    if (!raw || !raw.taxon_id) return;
+    const adapted = fromGrameneGenetree([raw]);
+    const pivot = computePivotState(adapted.tree, gene._id);
+    this.setTbrowseViewState({
+      selectedNodeId: null,
+      collapsedNodeIds: pivot ? pivot.collapsedNodeIds : [],
+      prunedNodeIds: [],
+      swappedNodeIds: pivot ? pivot.swappedNodeIds : [],
+      compressedNodeIds: [],
+      nodeOfInterestId: pivot ? pivot.targetId : null,
+      // Use each zone's intended fr-share + initial visibility from its
+      // definition (tree:30 / labels:20 / msa:50 / neighborhood:30 /
+      // genome:32) instead of uniform 25 across the board. Gives the MSA
+      // a wider initial pane and the tree a narrower one.
+      //
+      // `defaultVisible ?? true` matches tbrowse's own buildInitialViewState
+      // logic — zones default to visible unless their definition opts out
+      // (e.g. neighborhood and genome opt out so they only appear once
+      // their async data lands; tbrowse's Layout auto-flips them on then).
+      zones: TBROWSE_ZONES.map(z => ({
+        id: z.id,
+        width: z.defaultWidth,
+        visible: z.defaultVisible ?? true
+      })),
+      zoneStates: {},
+      search: null,
+    });
+  }
+  componentDidMount() {
+    this.maybeSeedTbrowseViewState();
+    this.maybeFetchTbrowseData();
+  }
+  componentDidUpdate() {
+    this.maybeSeedTbrowseViewState();
+    this.maybeFetchTbrowseData();
+  }
+  // Kick off the neighborhood + gene-structure fetches from lifecycle,
+  // not render. Each fetch internally dedupes on `_*FetchedFor === treeId`
+  // so calling on every commit is cheap. Gated on the user actually being
+  // on the tbrowse viewer + the tree data being loaded — otherwise we'd
+  // pay network cost for genes the user never looks at.
+  maybeFetchTbrowseData() {
+    if (this.getViewer() !== 'tbrowse') return;
+    const id = this.getGeneId();
+    if (!this.props.geneDocs.hasOwnProperty(id)) return;
+    const gene = this.props.geneDocs[id];
+    if (!gene.homology) return;
+    const treeId = gene.homology.gene_tree.id;
+    const raw = this.props.grameneTrees[treeId];
+    if (!raw || !raw.taxon_id) return;
+    // Lazily compute the adapted tbrowse data the same way renderTBrowse
+    // does, so fetchGeneStructures has the leaf ids without rerunning
+    // fromGrameneGenetree on every commit.
+    if (this._tbrowseTreeId !== treeId) {
+      this._tbrowseTreeId = treeId;
+      this._tbrowseData = fromGrameneGenetree([raw]);
+    }
+    this.fetchNeighborhood(treeId);
+    this.fetchGeneStructures(treeId, this._tbrowseData.tree);
   }
   fetchNeighborhood(treeId) {
     if (this._neighborhoodFetchedFor === treeId) return;
     this._neighborhoodFetchedFor = treeId;
+    this.setState({neighborhoodStatus: 'loading'});
     const api = this.props.grameneAPI;
     const url = new URL(`${api}/search`);
     url.searchParams.set('fl', 'id,name,gene_tree,gene_idx,region,start,end,strand,biotype,system_name,description');
@@ -50,10 +161,19 @@ class Homology extends React.Component {
       })
       .then(json => {
         if (this._neighborhoodFetchedFor !== treeId) return;
-        this.setState({neighborhood: fromGrameneNeighborhood(json), neighborhoodTreeId: treeId});
+        this.setState({
+          neighborhood: fromGrameneNeighborhood(json),
+          neighborhoodTreeId: treeId,
+          neighborhoodStatus: 'ready',
+        });
       })
       .catch(err => {
         console.warn('tbrowse neighborhood fetch failed:', err);
+        // Surface the failure via the zoneStatus prop. Reset the
+        // dedupe key so a re-mount or tree-change can retry.
+        if (this._neighborhoodFetchedFor === treeId) {
+          this.setState({neighborhoodStatus: 'error'});
+        }
         this._neighborhoodFetchedFor = null;
       });
   }
@@ -64,6 +184,7 @@ class Homology extends React.Component {
       .filter(n => n.isLeaf && n.geneId)
       .map(n => n.geneId);
     if (ids.length === 0) return;
+    this.setState({geneStructuresStatus: 'loading'});
     const api = this.props.grameneAPI;
     const BATCH_SIZE = 50;
     const batches = [];
@@ -84,21 +205,28 @@ class Homology extends React.Component {
       .then(results => {
         if (this._geneStructuresFetchedFor !== treeId) return;
         const combined = [].concat(...results.map(r => Array.isArray(r) ? r : []));
-        this.setState({geneStructures: fromGrameneGeneStructures(combined), geneStructuresTreeId: treeId});
+        this.setState({
+          geneStructures: fromGrameneGeneStructures(combined),
+          geneStructuresTreeId: treeId,
+          geneStructuresStatus: 'ready',
+        });
       })
       .catch(err => {
         console.warn('tbrowse gene-structures fetch failed:', err);
+        if (this._geneStructuresFetchedFor === treeId) {
+          this.setState({geneStructuresStatus: 'error'});
+        }
         this._geneStructuresFetchedFor = null;
       });
   }
   startResize(e) {
     e.preventDefault();
     const startY = e.clientY;
-    const startHeight = this.state.height;
+    const startHeight = this.getHeight();
 
     const onMouseMove = (moveEvent) => {
       const newHeight = Math.max(200, startHeight + (moveEvent.clientY - startY));
-      this.setState({ height: newHeight });
+      this.setHeight(newHeight);
     };
 
     const onMouseUp = () => {
@@ -122,7 +250,7 @@ class Homology extends React.Component {
   renderTreeVis() {
     return (
       <>
-        <div className="gene-genetree" style={{height: this.state.height, width: '100%'}}>
+        <div className="gene-genetree" style={{height: this.getHeight(), width: '100%'}}>
           <TreeVis genetree={this.tree}
                    initialGeneOfInterest={this.gene}
                    genomesOfInterest={this.props.grameneGenomes.active}
@@ -140,32 +268,35 @@ class Homology extends React.Component {
   }
   renderTBrowse() {
     const treeId = this.gene.homology.gene_tree.id;
+    // Adapted tbrowse data is computed lazily in maybeFetchTbrowseData
+    // (called from lifecycle). If the user just flipped to tbrowse and
+    // the lifecycle hasn't fired yet, compute it once here without
+    // calling any fetches — those will fire from componentDidUpdate.
     if (this._tbrowseTreeId !== treeId) {
-      const raw = this.props.grameneTrees[treeId];
-      const adapted = fromGrameneGenetree([raw]);
       this._tbrowseTreeId = treeId;
-      this._tbrowseData = adapted;
-      const pivot = computePivotState(adapted.tree, this.gene._id);
-      const zoneIds = TBROWSE_ZONES.map(z => z.id);
-      this._tbrowseInitialViewState = {
-        selectedNodeId: null,
-        collapsedNodeIds: pivot ? pivot.collapsedNodeIds : [],
-        prunedNodeIds: [],
-        swappedNodeIds: pivot ? pivot.swappedNodeIds : [],
-        compressedNodeIds: [],
-        nodeOfInterestId: pivot ? pivot.targetId : null,
-        zones: zoneIds.map(id => ({id, width: 25, visible: true})),
-        zoneStates: {},
-        search: null,
-      };
+      this._tbrowseData = fromGrameneGenetree([this.props.grameneTrees[treeId]]);
     }
-    this.fetchNeighborhood(treeId);
-    this.fetchGeneStructures(treeId, this._tbrowseData.tree);
     const neighborhood = this.state.neighborhoodTreeId === treeId ? this.state.neighborhood : undefined;
     const geneStructures = this.state.geneStructuresTreeId === treeId ? this.state.geneStructures : undefined;
+    // Per-zone status for the TBrowse toolbar — pulses while a fetch
+    // is in flight, turns red on failure. Tracked per-tree so a
+    // tree-change resets any stale 'ready'/'error' from the prior gene.
+    const zoneStatus = {
+      neighborhood: this.state.neighborhoodTreeId === treeId
+        ? this.state.neighborhoodStatus
+        : (this.state.neighborhoodStatus === 'loading' ? 'loading' : undefined),
+      genome: this.state.geneStructuresTreeId === treeId
+        ? this.state.geneStructuresStatus
+        : (this.state.geneStructuresStatus === 'loading' ? 'loading' : undefined),
+    };
+    // Bundle-driven (controlled) view state. If we're rendering tbrowse before
+    // componentDidMount/Update has seeded the bundle slice, skip this turn and
+    // let the re-render with the seeded state do the work.
+    const tbrowseVS = this.getHomologySlice().tbrowse;
+    if (!tbrowseVS) return null;
     return (
       <>
-        <div className="gene-genetree" style={{height: this.state.height, width: '100%'}}>
+        <div className="gene-genetree" style={{height: this.getHeight(), width: '100%'}}>
           <TBrowse
             tree={this._tbrowseData.tree}
             taxonomy={this._tbrowseData.taxonomy}
@@ -177,7 +308,10 @@ class Homology extends React.Component {
             geneStructures={geneStructures}
             zones={TBROWSE_ZONES}
             nodeOfInterest={this.gene._id}
-            initialViewState={this._tbrowseInitialViewState}
+            viewState={tbrowseVS}
+            onViewStateChange={next => this.setTbrowseViewState(next)}
+            defaultOpenSections={{ zones: true, search: true }}
+            zoneStatus={zoneStatus}
           />
         </div>
         {this.renderResizeHandle()}
@@ -185,12 +319,12 @@ class Homology extends React.Component {
     )
   }
   renderViewerToggle() {
-    const {viewer} = this.state;
+    const viewer = this.getViewer();
     const btn = (id, label) => (
       <button
         key={id}
         type="button"
-        onClick={() => this.setState({viewer: id})}
+        onClick={() => this.setViewer(id)}
         style={{
           padding: '4px 10px',
           marginRight: 4,
@@ -336,25 +470,20 @@ class Homology extends React.Component {
     else {
       const tree = this.props.grameneTrees[treeId];
       if (tree.hasOwnProperty('taxon_id')) {
-        this.tree = treesClient.genetree.tree([this.props.grameneTrees[treeId]]);
+        this.tree = genetree.tree([this.props.grameneTrees[treeId]]);
         this.orthologs = this.orthologList();
         this.paralogs = this.paralogList();
       }
     }
-    let flagged=0;
-    // if (this.props.curation && this.props.curation.taxa.hasOwnProperty(this.gene.taxon_id)) {
-    //   flagged = this.props.curatedGenes && this.props.curatedGenes[id] ? this.props.curatedGenes[id].flagged : 0;
-    // }
     return (
       <Detail>
         {/*<Title key="title">Compara Gene Tree</Title>*/}
         <Description key="description">
           This phylogram shows the relationships between this gene and others similar to it, as determined by Ensembl Compara.
-          {flagged > 1 && <Alert variant={'warning'}>This gene was flagged for potential gene structural annotation issues by {flagged} curators</Alert>}
         </Description>
         {this.tree && <Content key="content">
           {this.renderViewerToggle()}
-          {this.state.viewer === 'tbrowse' ? this.renderTBrowse() : this.renderTreeVis()}
+          {this.getViewer() === 'tbrowse' ? this.renderTBrowse() : this.renderTreeVis()}
         </Content>}
         {this.tree && <Explore key="explore" explorations={this.explorations()}/>}
         <Links key="links" links={this.links()}/>
@@ -370,8 +499,11 @@ export default connect(
   'selectGrameneAPI',
   'selectConfiguration',
   'selectCuration',
-  'selectCuratedGenes',
+  'selectUiViewState',
   'doRequestGrameneTree',
+  'doSetHomologyViewer',
+  'doSetHomologyHeight',
+  'doSetHomologyTbrowseViewState',
   'doAcceptGrameneSuggestion',
   'doReplaceGrameneFilters',
   Homology

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

@@ -2,7 +2,9 @@ import React from 'react'
 import {connect} from "redux-bundler-react";
 import FlatToNested from 'flat-to-nested';
 import {Explore, Links} from "./generic";
-import treesClient from "gramene-trees-client";
+// Subpath import avoids gramene-trees-client/index.js, whose require chain
+// fires a /swagger fetch at module load (see comment in bundles/api.js).
+import taxonomy from "gramene-trees-client/src/taxonomy";
 import TreeMenu from "react-simple-tree-menu";
 import '../../../../node_modules/react-simple-tree-menu/dist/main.css';
 
@@ -101,7 +103,7 @@ function buildIframeSrcDoc() {
 class Pathways extends React.Component {
   constructor(props) {
     super(props);
-    this.taxonomy = treesClient.taxonomy.tree(Object.values(props.grameneTaxonomy))
+    this.taxonomy = taxonomy.tree(Object.values(props.grameneTaxonomy))
     this.gene = props.geneDocs[props.searchResult.id];
     this.iframeRef = React.createRef();
     // srcDoc is constant — the per-instance pathway/reaction state is

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

@@ -169,22 +169,36 @@ const buildId = (gene, geneSeq, up, down) => {
   return `${geneSeq.genome}|${gene._id}|${gene.location.region}:${gs}..${ge} ${extras.join('|')}`
 };
 const Detail = props => {
-  const gene = props.geneDocs[props.searchResult.id];
-  const [tab, setTab] = useState('dna');
-  const [upstream, setUpstream] = useState(0);
-  const [downstream, setDownstream] = useState(0);
-  const [tid, setTid] = useState(gene.gene_structure.canonical_transcript);
+  const geneId = props.searchResult.id;
+  const gene = props.geneDocs[geneId];
+  // Sub-tab + selected isoform + flanking lengths live in the uiViewState
+  // bundle (keyed by geneId) so the shareable-views snapshot can round-trip
+  // them. Defaults match the old local-state initial values.
+  const slice = (props.uiViewState && props.uiViewState.byGene[geneId]
+    && props.uiViewState.byGene[geneId].sequences) || {};
+  const tab = slice.tab || 'dna';
+  const tid = slice.tid || gene.gene_structure.canonical_transcript;
+  const upstream = slice.upstream || 0;
+  const downstream = slice.downstream || 0;
+  const setTab = (k) => props.doSetSequencesState({geneId, patch: {tab: k}});
+  const setTid = (v) => props.doSetSequencesState({geneId, patch: {tid: v}});
+  const setUpstream = (v) => props.doSetSequencesState({geneId, patch: {upstream: +v}});
+  const setDownstream = (v) => props.doSetSequencesState({geneId, patch: {downstream: +v}});
   let geneSeq;
   let rnaSeq;
   let pepSeq;
-  if (props.geneSequences && props.geneSequences[gene._id]) {
+  // The *_SEQUENCE_REQUESTED reducer inserts a `{}` placeholder before the
+  // fetch resolves, so a key-only existence check passes while the body is
+  // still empty — leading to `seq.substring` of undefined downstream. Gate
+  // on the actual payload field instead.
+  if (props.geneSequences && props.geneSequences[gene._id] && props.geneSequences[gene._id].seq) {
     geneSeq = props.geneSequences[gene._id];
   }
   else {
     props.doRequestGeneSequence(gene)
     return <pre>loading</pre>;
   }
-  if (props.rnaSequences && props.rnaSequences[tid]) {
+  if (props.rnaSequences && props.rnaSequences[tid] && props.rnaSequences[tid].seq) {
     rnaSeq = props.rnaSequences[tid]
   }
   else {
@@ -197,7 +211,7 @@ const Detail = props => {
   let tl_id;
   if (transcript.translation) {
     tl_id = transcript.translation.id;
-    if (props.pepSequences && props.pepSequences[tl_id]) {
+    if (props.pepSequences && props.pepSequences[tl_id] && props.pepSequences[tl_id].seq) {
       pepSeq = props.pepSequences[tl_id];
     }
     else {
@@ -329,9 +343,11 @@ export default connect(
   'selectGeneSequences',
   'selectRnaSequences',
   'selectPepSequences',
+  'selectUiViewState',
   'doRequestGeneSequence',
   'doRequestRnaSequence',
   'doRequestPepSequence',
+  'doSetSequencesState',
   Detail
 );
 

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

@@ -56,21 +56,40 @@ function compareGermplasm(a, b) {
 }
 function group_germplasm(gene, germplasmLUT, vep_obj) {
   let accessionTable = [];
+  let missingMetadata = 0;
   Object.entries(vep_obj).forEach(([key,accessions]) => {
     const parts = key.split("__");
     if (parts[0] === "VEP") {
       if (parts[1] !== "merged") {
-        accessions.filter(ens_id => germplasmLUT.hasOwnProperty(ens_id)).forEach(ens_id => {
-          const germplasm = germplasmLUT[ens_id][0];
-          const pop = study_info[parts[3]][parts[4]];
-          const conseq = parts[1].replaceAll("_"," ");
-          const status = parts[2] === "het" ? "heterozygous" : "homozygous";
-          const accInfo = {
+        const studyForSystem = study_info[parts[3]];
+        const pop = (studyForSystem && studyForSystem[parts[4]]) || {
+          label: `${parts[3]}/${parts[4]}`,
+          type: parts[4]
+        };
+        const conseq = parts[1].replaceAll("_"," ");
+        const status = parts[2] === "het" ? "heterozygous" : "homozygous";
+        accessions.forEach(ens_id => {
+          let germplasm;
+          if (germplasmLUT && germplasmLUT.hasOwnProperty(ens_id)) {
+            germplasm = germplasmLUT[ens_id][0];
+          } else {
+            // Fall back to a minimal record so the row is still rendered with
+            // whatever info we have from the VEP fields alone.
+            missingMetadata++;
+            germplasm = {
+              ens_id: ens_id,
+              pub_id: ens_id,
+              subpop: '?',
+              stock_center: null,
+              germplasm_dbid: null,
+              pop_id: null
+            };
+          }
+          accessionTable.push({
             key: [pop.label,conseq,status].join('%%%'),
             germplasm: germplasm,
             pop: pop
-          };
-          accessionTable.push(accInfo);
+          });
         });
       }
     }
@@ -106,6 +125,8 @@ function group_germplasm(gene, germplasmLUT, vep_obj) {
       })
     })
   })
+  grouped.missingMetadata = missingMetadata;
+  grouped.totalAccessions = accessionTable.length;
   return grouped;
 }
 const THRESHOLD = 5;
@@ -259,20 +280,45 @@ const GridWithGroups = ({groups,gene_id,doGrin}) => {
 
 const Detail = props => {
   const gene = props.geneDocs[props.searchResult.id];
-  if (props.grameneConsequences && props.grameneConsequences[gene._id] && props.grameneGermplasm) {
-    const groups = group_germplasm(gene, props.grameneGermplasm, props.grameneConsequences[gene._id]);
+  const haveConsequences = props.grameneConsequences && props.grameneConsequences[gene._id];
+  useEffect(() => {
+    if (!haveConsequences) {
+      props.doRequestVEP(gene._id);
+    }
+  }, [gene._id, haveConsequences]);
 
-    return <div>
-      <h5>Predicted loss-of-function alleles were detected in these germplasm.</h5>
-      <div >Explore other variants within this gene in the <a target="_blank"
-         href={`${props.configuration.ensemblURL}/${gene.system_name}/Gene/Variation_Gene/Image?db=core;g=${props.searchResult.id}`}>
-        Variant image</a> page in the Ensembl genome browser.</div>
-      <GridWithGroups groups={...groups} gene_id={gene._id} doGrin={!props.configuration.hasOwnProperty('noGRIN')}/>
-    </div>
-  } else {
-    props.doRequestVEP(gene._id);
+  if (!haveConsequences) {
     return <pre>loading</pre>;
   }
+
+  // Render even if grameneGermplasm hasn't loaded — we'll fall back to
+  // VEP-only rows so the user sees something instead of a silent empty table.
+  const germplasmLUT = props.grameneGermplasm || {};
+  const groups = group_germplasm(gene, germplasmLUT, props.grameneConsequences[gene._id]);
+  const { missingMetadata, totalAccessions } = groups;
+
+  let notice = null;
+  if (totalAccessions === 0) {
+    notice = <div className="alert alert-warning" style={{padding: '8px', marginTop: '8px'}}>
+      VEP results were found for this gene but could not be grouped into accession-level rows.
+    </div>;
+  } else if (missingMetadata > 0) {
+    notice = <div className="alert alert-info" style={{padding: '8px', marginTop: '8px'}}>
+      Germplasm metadata could not be found for {missingMetadata} of {totalAccessions} accession{totalAccessions === 1 ? '' : 's'}.
+      Affected rows show the raw accession id without stock-center links or subpopulation info.
+    </div>;
+  }
+
+  return <div>
+    <h5>Predicted loss-of-function alleles were detected in these germplasm.</h5>
+    <div>Explore other variants within this gene in the <a target="_blank"
+       href={`${props.configuration.ensemblURL}/${gene.system_name}/Gene/Variation_Gene/Image?db=core;g=${props.searchResult.id}`}>
+      Variant image</a> page in the Ensembl genome browser.</div>
+    {notice}
+    {totalAccessions > 0 && (
+      <GridWithGroups groups={groups} gene_id={gene._id} doGrin={!props.configuration.hasOwnProperty('noGRIN')}/>
+    )}
+  </div>
 };
 
 export default connect(