gramene-search 2.1.11 → 2.2.0

package/src/bundles/uiViewState.js

@@ -0,0 +1,174 @@
+// Per-gene UI state lifted out of <Gene> and <Homology> class components.
+// Keyed by geneId so it survives unmount/remount (e.g. scrolling a row out
+// of view and back), and so a snapshot serializer can later round-trip it
+// for the shareable-views feature.
+//
+// What lives here:
+//   - expandedDetail: which detail tab is open in the gene-list card
+//   - fullscreen: whether the expanded detail is full-screened
+//   - homology.viewer: 'treevis' | 'tbrowse'
+//   - homology.height: drag-resize height of the homology detail pane
+//   - homology.tbrowse: the tbrowse ViewState (collapsedNodeIds, prunedNodeIds,
+//     swappedNodeIds, compressedNodeIds, nodeOfInterestId, zones, zoneStates,
+//     search, selectedNodeId). Tbrowse is driven in controlled mode from this.
+//   - sequences: the Sequences detail's internal state — tab ('dna'|'rna'|'pep'),
+//     tid (selected transcript id), upstream/downstream (flanking bp). Driven in
+//     controlled mode from this so a saved view restores the chosen sub-tab and
+//     isoform.
+//   - expression: the Expression detail's internal state — activeTab
+//     ('gene'|'paralogs'|'eFP'), atlasExperiment (selected GXA experiment id),
+//     barStudy (selected eFP/BAR study). Driven in controlled mode from this so a
+//     saved view restores the chosen sub-tab and study.
+//
+// What does NOT live here:
+//   - derived/computed state like `details` (per-render config from
+//     props.config.details + capabilities)
+//   - async-fetched data caches in <Homology> (neighborhood, geneStructures)
+
+const initialState = {
+  byGene: {}
+};
+
+const ensureGene = (state, geneId) => {
+  if (state.byGene[geneId]) return state;
+  return {
+    ...state,
+    byGene: {
+      ...state.byGene,
+      [geneId]: { homology: {} }
+    }
+  };
+};
+
+const setGene = (state, geneId, patch) => {
+  const next = ensureGene(state, geneId);
+  return {
+    ...next,
+    byGene: {
+      ...next.byGene,
+      [geneId]: { ...next.byGene[geneId], ...patch }
+    }
+  };
+};
+
+const setHomology = (state, geneId, patch) => {
+  const next = ensureGene(state, geneId);
+  const prev = next.byGene[geneId];
+  return {
+    ...next,
+    byGene: {
+      ...next.byGene,
+      [geneId]: {
+        ...prev,
+        homology: { ...(prev.homology || {}), ...patch }
+      }
+    }
+  };
+};
+
+const setSequences = (state, geneId, patch) => {
+  const next = ensureGene(state, geneId);
+  const prev = next.byGene[geneId];
+  return {
+    ...next,
+    byGene: {
+      ...next.byGene,
+      [geneId]: {
+        ...prev,
+        sequences: { ...(prev.sequences || {}), ...patch }
+      }
+    }
+  };
+};
+
+const setExpression = (state, geneId, patch) => {
+  const next = ensureGene(state, geneId);
+  const prev = next.byGene[geneId];
+  return {
+    ...next,
+    byGene: {
+      ...next.byGene,
+      [geneId]: {
+        ...prev,
+        expression: { ...(prev.expression || {}), ...patch }
+      }
+    }
+  };
+};
+
+const uiViewState = {
+  name: 'uiViewState',
+  getReducer: () => (state = initialState, { type, payload }) => {
+    switch (type) {
+      case 'UI_GENE_DETAIL_EXPANDED':
+        // payload: { geneId, detail }  (detail = null to collapse)
+        return setGene(state, payload.geneId, {
+          expandedDetail: payload.detail,
+          // collapsing also exits fullscreen
+          fullscreen: payload.detail === null ? false : state.byGene[payload.geneId]?.fullscreen || false
+        });
+
+      case 'UI_GENE_FULLSCREEN_SET':
+        // payload: { geneId, fullscreen }
+        return setGene(state, payload.geneId, { fullscreen: !!payload.fullscreen });
+
+      case 'UI_HOMOLOGY_VIEWER_SET':
+        // payload: { geneId, viewer }
+        return setHomology(state, payload.geneId, { viewer: payload.viewer });
+
+      case 'UI_HOMOLOGY_HEIGHT_SET':
+        // payload: { geneId, height }
+        return setHomology(state, payload.geneId, { height: payload.height });
+
+      case 'UI_HOMOLOGY_TBROWSE_SET':
+        // payload: { geneId, tbrowse }  -- a full ViewState object
+        return setHomology(state, payload.geneId, { tbrowse: payload.tbrowse });
+
+      case 'UI_SEQUENCES_SET':
+        // payload: { geneId, patch }  -- merges into the sequences slice
+        // (e.g. { tab }, { tid }, { upstream }, { downstream })
+        return setSequences(state, payload.geneId, payload.patch);
+
+      case 'UI_EXPRESSION_SET':
+        // payload: { geneId, patch }  -- merges into the expression slice
+        // (e.g. { activeTab }, { atlasExperiment }, { barStudy })
+        return setExpression(state, payload.geneId, payload.patch);
+
+      case 'UI_VIEW_STATE_REPLACED':
+        // payload: { byGene }  -- used by the snapshot loader in a later phase
+        return { byGene: payload.byGene || {} };
+
+      default:
+        return state;
+    }
+  },
+
+  selectUiViewState: state => state.uiViewState,
+
+  doExpandGeneDetail: ({ geneId, detail }) => ({ dispatch }) => {
+    dispatch({ type: 'UI_GENE_DETAIL_EXPANDED', payload: { geneId, detail } });
+  },
+  doSetGeneFullscreen: ({ geneId, fullscreen }) => ({ dispatch }) => {
+    dispatch({ type: 'UI_GENE_FULLSCREEN_SET', payload: { geneId, fullscreen } });
+  },
+  doSetHomologyViewer: ({ geneId, viewer }) => ({ dispatch }) => {
+    dispatch({ type: 'UI_HOMOLOGY_VIEWER_SET', payload: { geneId, viewer } });
+  },
+  doSetHomologyHeight: ({ geneId, height }) => ({ dispatch }) => {
+    dispatch({ type: 'UI_HOMOLOGY_HEIGHT_SET', payload: { geneId, height } });
+  },
+  doSetHomologyTbrowseViewState: ({ geneId, tbrowse }) => ({ dispatch }) => {
+    dispatch({ type: 'UI_HOMOLOGY_TBROWSE_SET', payload: { geneId, tbrowse } });
+  },
+  doSetSequencesState: ({ geneId, patch }) => ({ dispatch }) => {
+    dispatch({ type: 'UI_SEQUENCES_SET', payload: { geneId, patch } });
+  },
+  doSetExpressionState: ({ geneId, patch }) => ({ dispatch }) => {
+    dispatch({ type: 'UI_EXPRESSION_SET', payload: { geneId, patch } });
+  },
+  doReplaceUiViewState: byGene => ({ dispatch }) => {
+    dispatch({ type: 'UI_VIEW_STATE_REPLACED', payload: { byGene } });
+  }
+};
+
+export default uiViewState;

package/src/bundles/viewSnapshot.js

@@ -0,0 +1,313 @@
+// Serializer/deserializer for shareable gene-search views.
+//
+// `selectViewSnapshot` produces a versioned JSON-safe blob from the current
+// store state. `doApplyViewSnapshot` validates a blob and restores it via
+// existing action creators. Persistence + UI live in later phases — this
+// bundle is the pure state-shape layer they build on.
+//
+// Snapshot schema, v1:
+// {
+//   v: 1,
+//   capturedAt: <ISO 8601 string>,
+//   site: <subsite id>,
+//   filters: <grameneFilters tree, stripped of ephemeral UI flags>,
+//   views: { on: [id,...], touched: {id: true, ...} },
+//   genomeSubset: { taxonId: true, ... } | null,
+//   searchPage: { offset: number, rows: number } | null,
+//   exprViz: {                                    // Expression-visualization view
+//     activeTaxon: <taxon_id|null>,
+//     byTaxon: { [taxon_id]: { selectedFields: [field,...], vizMode, scale, brushes } }
+//   } | undefined,                                // loaded rows re-fetch on apply
+//   ontologyEnrichment: {                         // Ontology Enrichment view
+//     activeTaxon: <taxon_id|null>,
+//     ui: { pAdjCutoff, minGSSize, maxGSSize, mostSpecific, ontology, search, sort }
+//   } | undefined,                                // facets re-fetch on apply
+//   expandedDetails: [
+//     { geneId,
+//       expandedDetail: string|null,
+//       fullscreen: boolean,
+//       homology: { viewer, height, tbrowse: <ViewState> } | undefined,
+//       sequences: { tab, tid, upstream, downstream } | undefined,
+//       expression: { activeTab, atlasExperiment, barStudy } | undefined
+//     }, ...
+//   ]
+// }
+//
+// Anything not in this schema is intentionally NOT persisted — async fetch
+// caches, search-results, pagination cursors mid-flight, etc. all rehydrate
+// from the API once the snapshot is applied.
+
+const SCHEMA_VERSION = 1;
+
+// Keys on a filter node we want to keep. Everything else (showMenu, marked,
+// status flags from the root, etc.) is ephemeral UI and not meaningful in a
+// shared view.
+const FILTER_NODE_KEEP = [
+  'leftIdx', 'rightIdx', 'operation', 'negate',
+  'fq_field', 'fq_value', 'name', 'category',
+  'warning'
+];
+const FILTER_ROOT_KEEP = [
+  'operation', 'negate', 'leftIdx', 'rightIdx',
+  'children', 'searchOffset', 'rows'
+];
+
+const cleanFilterNode = (node) => {
+  const out = {};
+  for (const k of FILTER_NODE_KEEP) {
+    if (node[k] !== undefined) out[k] = node[k];
+  }
+  if (Array.isArray(node.children)) {
+    out.children = node.children.map(cleanFilterNode);
+  }
+  return out;
+};
+
+const cleanFilters = (filters) => {
+  const out = {};
+  for (const k of FILTER_ROOT_KEEP) {
+    if (filters[k] !== undefined) out[k] = filters[k];
+  }
+  if (Array.isArray(filters.children)) {
+    out.children = filters.children.map(cleanFilterNode);
+  }
+  return out;
+};
+
+// Drop bundle entries that hold no meaningful state (e.g. a row the user
+// scrolled past but never opened). Otherwise snapshots bloat with empties.
+const isMeaningfulGene = (entry) => {
+  if (!entry) return false;
+  if (entry.expandedDetail) return true;
+  if (entry.fullscreen) return true;
+  if (entry.homology && (
+    entry.homology.viewer !== undefined ||
+    entry.homology.height !== undefined ||
+    entry.homology.tbrowse !== undefined
+  )) return true;
+  if (entry.sequences && Object.keys(entry.sequences).length) return true;
+  if (entry.expression && Object.keys(entry.expression).length) return true;
+  return false;
+};
+
+const viewSnapshot = {
+  name: 'viewSnapshot',
+  // No reducer — this bundle is pure derivation + dispatch orchestration.
+  getReducer: () => (state = {}) => state,
+
+  selectViewSnapshot: createSnapshotSelector(),
+
+  // Apply a snapshot to the store. Returns an array of unresolved-id warnings
+  // so the caller can surface a non-blocking notice. The action creators we
+  // delegate to are existing ones; nothing here knows about API/UI/share-link
+  // — that's later phases.
+  doApplyViewSnapshot: (snapshot) => ({dispatch, store}) => {
+    const warnings = validateSnapshot(snapshot);
+    if (warnings.fatal) {
+      console.warn('viewSnapshot: refusing to apply', warnings.fatal);
+      return { applied: false, warnings };
+    }
+
+    // 1. Filters (also clears search; replays a fresh fetch).
+    if (snapshot.filters) {
+      dispatch({
+        type: 'BATCH_ACTIONS', actions: [
+          {type: 'GRAMENE_SEARCH_CLEARED'},
+          {type: 'GRAMENE_FILTERS_REPLACED', payload: cloneForDispatch(snapshot.filters)}
+        ]
+      });
+    }
+
+    // 2. Views.
+    if (snapshot.views) {
+      dispatch({
+        type: 'GRAMENE_VIEWS_REPLACED',
+        payload: {
+          on: snapshot.views.on || [],
+          touched: snapshot.views.touched || {}
+        }
+      });
+    }
+
+    // 3. Genome subset, if present.
+    if (snapshot.genomeSubset && Object.keys(snapshot.genomeSubset).length) {
+      dispatch({type: 'GRAMENE_GENOMES_UPDATED', payload: {...snapshot.genomeSubset}});
+    }
+
+    // 4. Per-gene UI state (expandedDetail, fullscreen, homology viewer/
+    //    height, tbrowse view state). Replace wholesale via the uiViewState
+    //    bundle's bulk action.
+    const byGene = {};
+    if (Array.isArray(snapshot.expandedDetails)) {
+      for (const e of snapshot.expandedDetails) {
+        if (!e || !e.geneId) continue;
+        byGene[e.geneId] = {
+          expandedDetail: e.expandedDetail || null,
+          fullscreen: !!e.fullscreen,
+          homology: e.homology ? {...e.homology} : {},
+          sequences: e.sequences ? {...e.sequences} : {},
+          expression: e.expression ? {...e.expression} : {}
+        };
+      }
+    }
+    dispatch({type: 'UI_VIEW_STATE_REPLACED', payload: {byGene}});
+
+    // 5. Expression-visualization view config. Delegate to the exprViz bundle,
+    //    which flags each taxon for a re-fetch now that the restored filters/
+    //    genomes are in place. Done last so the re-fetch sees the live query.
+    if (snapshot.exprViz && store.doApplyExprVizSnapshot) {
+      store.doApplyExprVizSnapshot(snapshot.exprViz);
+    }
+
+    // 6. Ontology Enrichment view config. Setting the active taxon lets that
+    //    bundle's fetch reactor re-derive the enrichment for the restored
+    //    filters/genomes.
+    if (snapshot.ontologyEnrichment && store.doApplyOntologyEnrichmentSnapshot) {
+      store.doApplyOntologyEnrichmentSnapshot(snapshot.ontologyEnrichment);
+    }
+
+    return { applied: true, warnings };
+  },
+
+  // Helper exposed for the bootstrap path that wants to read warnings without
+  // dispatching. Returns { fatal: <string|null>, unresolved: { ids/taxa/views/genes lists } }.
+  doValidateViewSnapshot: (snapshot) => () => validateSnapshot(snapshot)
+};
+
+function createSnapshotSelector() {
+  // We deliberately don't memoize with createSelector — snapshots are taken
+  // on demand (Save button click, link generation) rather than on every
+  // store tick, so a fresh build is fine and avoids stale-dep bugs.
+  return (state) => buildSnapshot(state);
+}
+
+function buildSnapshot(state) {
+  const snap = {
+    v: SCHEMA_VERSION,
+    capturedAt: new Date().toISOString(),
+    site: (state.config && state.config.id) || null,
+  };
+
+  if (state.grameneFilters) {
+    snap.filters = cleanFilters(state.grameneFilters);
+    snap.searchPage = {
+      offset: state.grameneFilters.searchOffset || 0,
+      rows: state.grameneFilters.rows || 20
+    };
+  }
+
+  if (state.grameneViews && Array.isArray(state.grameneViews.options)) {
+    snap.views = {
+      on: state.grameneViews.options
+        .filter(v => v && v.show === 'on')
+        .map(v => v.id),
+      touched: {...(state.grameneViews.touched || {})}
+    };
+  }
+
+  if (state.grameneGenomes && state.grameneGenomes.active) {
+    const keys = Object.keys(state.grameneGenomes.active);
+    if (keys.length) {
+      snap.genomeSubset = {};
+      for (const k of keys) snap.genomeSubset[k] = true;
+    } else {
+      snap.genomeSubset = null;
+    }
+  }
+
+  if (state.uiViewState && state.uiViewState.byGene) {
+    snap.expandedDetails = Object.entries(state.uiViewState.byGene)
+      .filter(([, e]) => isMeaningfulGene(e))
+      .map(([geneId, e]) => ({
+        geneId,
+        expandedDetail: e.expandedDetail || null,
+        fullscreen: !!e.fullscreen,
+        homology: e.homology && Object.keys(e.homology).length ? {...e.homology} : undefined,
+        sequences: e.sequences && Object.keys(e.sequences).length ? {...e.sequences} : undefined,
+        expression: e.expression && Object.keys(e.expression).length ? {...e.expression} : undefined
+      }));
+  } else {
+    snap.expandedDetails = [];
+  }
+
+  // Expression-visualization view config. Capture only the selection/config
+  // (active genome tab, per-taxon selected fields + column order, viz mode,
+  // scale, brush ranges) — never the bulk fetched rows, which rehydrate via
+  // the view's re-fetch on apply.
+  if (state.exprViz) {
+    const ev = state.exprViz;
+    const byTaxon = {};
+    for (const tid of Object.keys(ev.byTaxon || {})) {
+      const t = ev.byTaxon[tid];
+      if (!t) continue;
+      const selectedFields = Array.isArray(t.selectedFields) ? t.selectedFields : [];
+      const brushes = t.brushes && Object.keys(t.brushes).length ? {...t.brushes} : undefined;
+      const nonDefaultMode = t.vizMode && t.vizMode !== 'heatmap';
+      const nonDefaultScale = t.scale && t.scale !== 'linear';
+      if (selectedFields.length || brushes || nonDefaultMode || nonDefaultScale) {
+        byTaxon[tid] = {
+          selectedFields,
+          vizMode: t.vizMode || 'heatmap',
+          scale: t.scale || 'linear',
+          ...(brushes ? { brushes } : {})
+        };
+      }
+    }
+    if (ev.activeTaxon || Object.keys(byTaxon).length) {
+      snap.exprViz = { activeTaxon: ev.activeTaxon || null, byTaxon };
+    }
+  }
+
+  // Ontology Enrichment view config: active genome + the analysis knobs
+  // (significance cutoff, gene-set-size bounds, most-specific, ontology
+  // section, term search, per-section sort). The enrichment facets re-fetch
+  // on apply, so no bulk term data is carried.
+  if (state.ontologyEnrichment) {
+    const oe = state.ontologyEnrichment;
+    const ui = oe.ui || {};
+    const DEF = { pAdjCutoff: 0.05, minGSSize: 10, maxGSSize: 500, mostSpecific: false, ontology: 'all', search: '' };
+    const hasSort = ui.sort && Object.keys(ui.sort).length;
+    const uiChanged = Object.keys(DEF).some(k => ui[k] !== DEF[k]) || hasSort;
+    if (oe.activeTaxon || uiChanged) {
+      snap.ontologyEnrichment = {
+        activeTaxon: oe.activeTaxon || null,
+        ui: {
+          pAdjCutoff: ui.pAdjCutoff != null ? ui.pAdjCutoff : DEF.pAdjCutoff,
+          minGSSize: ui.minGSSize != null ? ui.minGSSize : DEF.minGSSize,
+          maxGSSize: ui.maxGSSize != null ? ui.maxGSSize : DEF.maxGSSize,
+          mostSpecific: !!ui.mostSpecific,
+          ontology: ui.ontology || DEF.ontology,
+          search: ui.search || DEF.search,
+          ...(hasSort ? { sort: {...ui.sort} } : {})
+        }
+      };
+    }
+  }
+
+  return snap;
+}
+
+function validateSnapshot(snapshot) {
+  const warnings = { fatal: null, unresolved: { views: [], genes: [], taxa: [] } };
+  if (!snapshot || typeof snapshot !== 'object') {
+    warnings.fatal = 'snapshot is not an object';
+    return warnings;
+  }
+  if (snapshot.v !== SCHEMA_VERSION) {
+    warnings.fatal = `unsupported snapshot version ${snapshot.v} (expected ${SCHEMA_VERSION})`;
+    return warnings;
+  }
+  // Strict-id checks happen later — they need the store's grameneMaps,
+  // grameneTaxonomy, etc. which are async-loaded. The boot path will call
+  // doValidateViewSnapshot again after those land. For now we just
+  // structurally validate.
+  return warnings;
+}
+
+// JSON.parse(JSON.stringify(x)) — bundles see a wholly fresh object so
+// reducers can't accidentally mutate the snapshot we're holding for retry.
+function cloneForDispatch(x) {
+  return JSON.parse(JSON.stringify(x));
+}
+
+export default viewSnapshot;

package/src/bundles/views.js

@@ -102,6 +102,21 @@ const grameneViews = {
           newState = Object.assign({}, state);
           newState.options.forEach(v => v.shouldScroll = false)
           return newState;
+        case 'GRAMENE_VIEWS_REPLACED': {
+          // Snapshot restore. payload: { on: Set|Array<id>, touched: {id: true} }
+          // Sets options[].show directly to 'on' or 'off' based on membership in
+          // `on`. Leaves 'disabled' entries untouched (site config wins).
+          const onSet = payload.on instanceof Set
+            ? payload.on
+            : new Set(payload.on || []);
+          newState = Object.assign({}, state);
+          newState.touched = { ...(payload.touched || {}) };
+          newState.options = state.options.map(v => {
+            if (v.show === 'disabled') return v;
+            return { ...v, show: onSet.has(v.id) ? 'on' : 'off', shouldScroll: false };
+          });
+          return newState;
+        }
         default:
           return state;
       }
@@ -116,6 +131,13 @@ const grameneViews = {
   doCancelShouldScroll: () => ({dispatch, getState}) => {
     dispatch({type: 'GRAMENE_VIEW_SCROLLED', payload: null})
   },
+  // Snapshot restore. `on` is an array of view ids to switch on; everything
+  // else (except disabled views) goes off. `touched` is the same map the
+  // user-toggled view bundle maintains, so the auto-default logic in
+  // selectGrameneViews respects what the user has explicitly set.
+  doReplaceGrameneViews: ({on, touched}) => ({dispatch}) => {
+    dispatch({type: 'GRAMENE_VIEWS_REPLACED', payload: {on, touched}});
+  },
   selectRawGrameneViews: state => state.grameneViews,
   selectGrameneViews: createSelector(
     'selectRawGrameneViews',

package/src/components/Auth.js

@@ -1,9 +1,10 @@
-import React, { useMemo, useState } from 'react'
+import React, { useMemo, useState, useEffect } from 'react'
 import { Button, Modal } from 'react-bootstrap'
 import { connect } from "redux-bundler-react";
 import { getFirebaseApp } from "./utils";
 import { getAuth, onAuthStateChanged, signOut, GoogleAuthProvider, signInWithPopup } from "firebase/auth";
 import { BsChevronDown, BsChevronRight } from 'react-icons/bs';
+import SaveViewButton from './SaveView';
 
 const provider = new GoogleAuthProvider();
 
@@ -13,10 +14,23 @@ const Auth = props => {
     const app = getFirebaseApp(firebaseConfig);
     return app ? getAuth(app) : null;
   }, [firebaseConfig]);
-  const [user, setUser] = useState({});
+  const [user, setUser] = useState(null);
   const [open, setOpen] = useState(true);
+
+  // Subscribe once, unsubscribe on unmount. On each auth-state emission,
+  // also poke the shared-view boot path so a `?view=<hash>` for a private
+  // view gets retried with the now-available Bearer token. bootViewFromUrl
+  // no-ops when the param isn't present, so this is cheap.
+  useEffect(() => {
+    if (!auth) return undefined;
+    const unsub = onAuthStateChanged(auth, (u) => {
+      setUser(u);
+      props.doBootSharedView({user: u});
+    });
+    return unsub;
+  }, [auth]);
+
   if (!auth) return null;
-  onAuthStateChanged(auth, (user) => setUser(user));
 
   function handleLogin() {
     signInWithPopup(auth, provider)
@@ -52,6 +66,11 @@ const Auth = props => {
               : <Button size="sm" variant="success" onClick={handleLogin}>Login</Button>
             }
           </div>
+          {user && user.uid && (
+            <div>
+              <SaveViewButton user={user}/>
+            </div>
+          )}
         </div>}
       </div>
     </div>
@@ -60,5 +79,6 @@ const Auth = props => {
 
 export default connect(
   'selectConfiguration',
+  'doBootSharedView',
   Auth
 )