gramene-search 2.1.11 → 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]);
@@ -91,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>
@@ -110,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>
 };
@@ -118,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,
@@ -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,7 +470,7 @@ 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();
       }
@@ -349,7 +483,7 @@ class Homology extends React.Component {
         </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()}/>
@@ -365,7 +499,11 @@ export default connect(
   'selectGrameneAPI',
   'selectConfiguration',
   'selectCuration',
+  '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/demo.js

@@ -21,6 +21,7 @@ import {
 } from "react-router-dom";
 import Feedback from './components/Feedback';
 import MDView from 'gramene-mdview';
+import bootViewFromUrl from './utils/bootView';
 
 // const subsite = 'main';
 const subsite = process.env.SUBSITE;
@@ -56,14 +57,6 @@ const panSites = [
     targetTaxonId: 3702,
     alertText: 'Main site',
     showViews: true,
-    firebaseConfig: {
-      apiKey: "AIzaSyCyTJmxfWgfuhI6-8uqocSiE9KOWUlkgkk",
-      authDomain: "gramene-auth.firebaseapp.com",
-      projectId: "gramene-auth",
-      storageBucket: "gramene-auth.appspot.com",
-      messagingSenderId: "590873346270",
-      appId: "1:590873346270:web:f76a31a93619e69439824f"
-    },
     details: {
       sequences: true,
       VEP: false,
@@ -153,20 +146,12 @@ const panSites = [
     ensemblURL: 'https://ensembl.sorghumbase.org',
     ensemblSite: 'https://ensembl.sorghumbase.org',
     ensemblRest: 'https://data.gramene.org/pansite-ensembl-108',
-    grameneData: 'https://data.sorghumbase.org/auth_testing',
+    grameneData: 'https://data.sorghumbase.org/sorghum_v10',
     ga: 'G-L5KXDCCZ16',
     targetTaxonId: 4558001,
     alertText: 'Click the search icon in the menu bar or type /',
     showViews: true,
     partialCompara: true,
-    firebaseConfig: {
-      apiKey: "AIzaSyCyTJmxfWgfuhI6-8uqocSiE9KOWUlkgkk",
-      authDomain: "gramene-auth.firebaseapp.com",
-      projectId: "gramene-auth",
-      storageBucket: "gramene-auth.appspot.com",
-      messagingSenderId: "590873346270",
-      appId: "1:590873346270:web:f76a31a93619e69439824f"
-    },
     details: {
       sequences: true,
       VEP: true,
@@ -285,6 +270,23 @@ const panSites = [
     }
   }
 ];
+
+// Firebase web config is loaded from FIREBASE_CONFIG_JSON in the build-time
+// env (.env, never committed). If unset, the Auth panel mounts but stays
+// inert. Attached to the sites that use gramene-auth.
+const firebaseConfig = (() => {
+  const raw = process.env.FIREBASE_CONFIG_JSON;
+  if (!raw) return null;
+  try { return JSON.parse(raw); }
+  catch (e) { console.warn('FIREBASE_CONFIG_JSON is not valid JSON; Auth disabled.', e); return null; }
+})();
+if (firebaseConfig) {
+  ['main', 'sorghum'].forEach(id => {
+    const site = panSites[subsitelut[id]];
+    if (site) site.firebaseConfig = firebaseConfig;
+  });
+}
+
 const initialState = Object.assign({helpIsOn:false}, panSites[subsitelut[subsite]]);
 
 const config = {
@@ -546,6 +548,9 @@ cache.getAll().then(initialData => {
   window.store = store;
   const config = store.selectConfiguration();
   ReactGA.initialize(config.ga);
+  // If the URL has ?view=<hash>, hydrate the snapshot before the user
+  // interacts. Errors are non-fatal (see utils/bootView.js).
+  bootViewFromUrl(store);
   if (initialData.hasOwnProperty('grameneMaps')) {
     // check for hidden genomes
     let notHidden = {};

package/src/index.js

@@ -3,5 +3,6 @@ import resultList from './components/resultList';
 import resultSummary from './components/resultSummary';
 import suggestions from './components/suggestions';
 import {Status, Filters, Results, Views, Auth} from './components/geneSearchUI';
+import bootViewFromUrl from './utils/bootView';
 
-export { bundles, resultList, resultSummary, suggestions, Status, Filters, Results, Views, Auth };
+export { bundles, resultList, resultSummary, suggestions, Status, Filters, Results, Views, Auth, bootViewFromUrl };

package/src/suppressDevWarnings.js

@@ -12,6 +12,19 @@ if (typeof console !== 'undefined' && typeof console.error === 'function') {
     'uses the legacy childContextTypes API',
     'uses the legacy contextTypes API',
     'findDOMNode is deprecated',
+    // Third-party libs (gramene-search-vis, gramene-mdview, Pathways, etc.)
+    // still use the pre-16.3 lifecycle methods. We can't fix them from here.
+    'componentWillReceiveProps has been renamed',
+    'componentWillMount has been renamed',
+    'componentWillUpdate has been renamed',
+    // Kept as a guard — react warns on any kebab-case inline-style property
+    // and Parcel's overlay turns that into a fatal runtime error. The known
+    // offender (BAR's max-width) was fixed when the component was absorbed
+    // from gramene-efp-browser, but the suppressor protects against any
+    // future regression in third-party libs.
+    'Unsupported style property',
+    // Stale-state setState after unmount in legacy class components.
+    "Can't perform a React state update on an unmounted component",
   ];
   console.error = function (...args) {
     const msg = typeof args[0] === 'string' ? args[0] : '';

package/src/utils/bootView.js

@@ -0,0 +1,38 @@
+// Boot-time hydration of a shared view link.
+//
+// Entry points call `bootViewFromUrl(store)` once the store is created.
+// Public views resolve anonymously. For private views, the initial call
+// will 401; the Auth panel then re-invokes with `{user}` once Firebase has
+// emitted its first signed-in state, and the fetch retries with a Bearer
+// token. On success we apply the snapshot and strip `?view=` from the URL
+// so subsequent user actions don't sit under a stale shared-state URL.
+//
+// All errors are non-fatal — they surface in state.savedViews.fetchError
+// for any UI that wants to show them.
+
+const PARAM = 'view';
+
+export default function bootViewFromUrl(store, opts = {}) {
+  if (typeof window === 'undefined') return Promise.resolve(null);
+  const url = new URL(window.location.href);
+  const hash = url.searchParams.get(PARAM);
+  if (!hash) return Promise.resolve(null);
+
+  const { user = null } = opts;
+
+  return store.doFetchView({ hash, user })
+    .then(({ snapshot }) => {
+      store.doApplyViewSnapshot(snapshot);
+      url.searchParams.delete(PARAM);
+      window.history.replaceState({}, '', url.toString());
+      return { hash, applied: true };
+    })
+    .catch((err) => {
+      // 401 here on the anonymous pass is expected for private views — the
+      // Auth panel will retry once it has a user. Other errors (404, 5xx,
+      // network) are reported and leave the param so a manual refresh can
+      // retry too.
+      console.warn('bootViewFromUrl:', err.message || err);
+      return { hash, applied: false, error: err.message || String(err) };
+    });
+}