gramene-search 2.39.1 → 2.40.0

package/dist/index.js

@@ -12,6 +12,7 @@ var $gXNCa$gramenetreesclientsrctaxonomy = require("gramene-trees-client/src/tax
 var $gXNCa$gramenetaxonomywithgenomes = require("gramene-taxonomy-with-genomes");
 var $gXNCa$reactga4 = require("react-ga4");
 var $gXNCa$moneyclip = require("money-clip");
+var $gXNCa$tbrowsecore = require("tbrowse-core");
 var $gXNCa$reactbootstrap = require("react-bootstrap");
 var $gXNCa$reactswitch = require("react-switch");
 var $gXNCa$reacticonsio5 = require("react-icons/io5");
@@ -6627,6 +6628,7 @@ var $7f865ea0feda21af$export$2e2bcd8739ae039 = $7f865ea0feda21af$var$uiViewState
 // `viewState` is null until the view has been interacted with (or restored);
 // the container falls back to its built-in default and computes initial pixel
 // widths in that case.
+
 const $6048209b532f201d$var$taxTreeView = {
     name: 'taxTreeView',
     getReducer: ()=>{
@@ -6651,12 +6653,18 @@ const $6048209b532f201d$var$taxTreeView = {
                 type: 'TAXTREE_VIEW_SET',
                 payload: patch
             }),
-    // Re-apply persisted state from a saved-view snapshot.
+    // Re-apply persisted state from a saved-view snapshot. The tbrowse ViewState
+    // is run through tbrowse-core's tolerant deserialiser so a blob saved by an
+    // older viewer (missing arrays / fields added since) still restores.
     doApplyTaxTreeSnapshot: (snap)=>({ dispatch: dispatch })=>{
             if (!snap || typeof snap !== 'object') return;
+            const payload = snap.viewState && typeof snap.viewState === 'object' ? {
+                ...snap,
+                viewState: (0, $gXNCa$tbrowsecore.normalizeViewState)(snap.viewState)
+            } : snap;
             dispatch({
                 type: 'TAXTREE_VIEW_SET',
-                payload: snap
+                payload: payload
             });
         },
     selectTaxTreeView: (state)=>state.taxTreeView
@@ -6664,6 +6672,7 @@ const $6048209b532f201d$var$taxTreeView = {
 var $6048209b532f201d$export$2e2bcd8739ae039 = $6048209b532f201d$var$taxTreeView;
 
 
+
 // Serializer/deserializer for shareable gene-search views.
 //
 // `selectViewSnapshot` produces a versioned JSON-safe blob from the current
@@ -6987,10 +6996,7 @@ function $472fe3745b238881$var$buildSnapshot(state) {
             collapseEmpties: tv.collapseEmpties !== false,
             comparaOnly: tv.comparaOnly !== false,
             ...hasVS ? {
-                viewState: {
-                    ...tv.viewState,
-                    prunedNodeIds: []
-                }
+                viewState: (0, $gXNCa$tbrowsecore.stripPrunesForSnapshot)(tv.viewState)
             } : {}
         };
     }
@@ -8593,6 +8599,7 @@ var $9e29a4f60318db7a$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.conn
 
 
 
+
 const $5c2c79352d3d7b81$export$ec6b54b688be1708 = ({ fullscreen: fullscreen, onExitFullscreen: onExitFullscreen, title: title, className: className, children: children })=>{
     const [stableNode] = (0, $gXNCa$react.useState)(()=>typeof document !== 'undefined' ? document.createElement('div') : null);
     const inlineRef = (0, $gXNCa$react.useRef)(null);
@@ -8776,33 +8783,28 @@ const $5c2c79352d3d7b81$export$b2e089eb3692b073 = (props)=>/*#__PURE__*/ (0, $gX
 
 
 
+
 const $cd8bc494277e92a4$var$ORGAN_CELL_W = 16;
 const $cd8bc494277e92a4$var$MAXTPM_W = 46;
 const $cd8bc494277e92a4$var$STRESS_MIN = 120;
 function $cd8bc494277e92a4$export$965a6b1d7408d496(docs, tree) {
-    const nodeOf = {};
-    const nodeGene = {}; // leaf nodeId -> gene id, for every leaf (hover readout)
-    if (tree && tree.nodes) Object.values(tree.nodes).forEach((n)=>{
-        if (n.isLeaf && n.geneId) {
-            nodeOf[n.geneId] = n.id;
-            nodeGene[n.id] = n.geneId;
-        }
+    const hasTree = Boolean(tree && tree.nodes);
+    const nodeGene = hasTree ? (0, $gXNCa$tbrowsecore.geneIdByLeafNodeId)(tree) : {}; // leaf nodeId -> gene id (hover readout)
+    const byGeneId = {};
+    (docs || []).forEach((d)=>{
+        if (d && d.id) byGeneId[d.id] = (0, $4b8473139e48e77e$export$69fb5d19b5db1cfa)(d);
     });
+    // Docs whose gene is not a leaf of this tree are dropped (joinByLeaf's `unmatched`).
+    const byNode = hasTree ? (0, $gXNCa$tbrowsecore.joinByLeaf)(tree, byGeneId).byNode : {};
     const organSet = new Set();
-    const byNode = {};
     let tpmMin = Infinity;
     let tpmMax = -Infinity;
-    (docs || []).forEach((d)=>{
-        if (!d || !d.id) return;
-        const nodeId = nodeOf[d.id];
-        if (!nodeId) return;
-        const attrs = (0, $4b8473139e48e77e$export$69fb5d19b5db1cfa)(d);
+    Object.values(byNode).forEach((attrs)=>{
         Object.keys(attrs.organLevels).forEach((o)=>organSet.add(o));
         if (attrs.maxTpm !== null) {
             if (attrs.maxTpm < tpmMin) tpmMin = attrs.maxTpm;
             if (attrs.maxTpm > tpmMax) tpmMax = attrs.maxTpm;
         }
-        byNode[nodeId] = attrs;
     });
     return {
         organs: (0, $4b8473139e48e77e$export$65382efdcdd96f8c)(organSet),
@@ -8814,14 +8816,6 @@ function $cd8bc494277e92a4$export$965a6b1d7408d496(docs, tree) {
         }
     };
 }
-// Shared row-highlight background, matching the other zones so hovering any zone
-// lights up the same row across all of them.
-function $cd8bc494277e92a4$var$rowHighlight(isSelected, isExactHover, isInHoveredSubtree) {
-    if (isSelected) return 'var(--tbrowse-row-select-bg)';
-    if (isExactHover) return 'var(--tbrowse-row-hover-bg)';
-    if (isInHoveredSubtree) return 'var(--tbrowse-row-subtree-bg)';
-    return 'transparent';
-}
 const $cd8bc494277e92a4$var$gridBorder = '1px solid var(--tbrowse-grid-line, rgba(0,0,0,0.06))';
 const $cd8bc494277e92a4$var$stressWidth = (width, organCount)=>Math.max($cd8bc494277e92a4$var$STRESS_MIN, width - organCount * $cd8bc494277e92a4$var$ORGAN_CELL_W - $cd8bc494277e92a4$var$MAXTPM_W);
 const $cd8bc494277e92a4$var$ExprHeader = ({ zoneState: zoneState, setZoneState: setZoneState, width: width, data: data, hoveredNodeId: hoveredNodeId })=>{
@@ -9016,8 +9010,12 @@ const $cd8bc494277e92a4$var$ExprBody = ({ visibleRows: visibleRows, rowRange: ro
         max: 0
     };
     const sW = $cd8bc494277e92a4$var$stressWidth(width, organs.length);
-    const totalHeight = visibleRows.length ? visibleRows[visibleRows.length - 1].y + visibleRows[visibleRows.length - 1].height : 0;
-    const rows = visibleRows.slice(rowRange.startIndex, rowRange.endIndex);
+    const totalHeight = (0, $gXNCa$tbrowsecore.rowsTotalHeight)(visibleRows);
+    const rows = (0, $gXNCa$tbrowse.rowsWithFlags)(visibleRows, rowRange, {
+        hoveredNodeId: hoveredNodeId,
+        hoveredSubtreeIds: hoveredSubtreeIds,
+        selectedNodeId: selectedNodeId
+    });
     return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("div", {
         style: {
             position: 'relative',
@@ -9025,9 +9023,8 @@ const $cd8bc494277e92a4$var$ExprBody = ({ visibleRows: visibleRows, rowRange: ro
             height: totalHeight,
             overflow: 'hidden'
         },
-        children: rows.map((r)=>{
+        children: rows.map(({ row: r, background: background })=>{
             const gene = byNode[r.nodeId];
-            const background = $cd8bc494277e92a4$var$rowHighlight(selectedNodeId === r.nodeId, hoveredNodeId === r.nodeId, !!(hoveredSubtreeIds && hoveredSubtreeIds.has(r.nodeId)));
             const tpmFrac = gene ? (0, $4b8473139e48e77e$export$fc40d061e6c16645)(gene.maxTpm, tpmRange) : null;
             return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("div", {
                 onMouseEnter: ()=>onHoverNode(r.nodeId),
@@ -9131,17 +9128,6 @@ const $047461923b1badda$export$964d88edb00bbcaa = (suggestion)=>{
 
 
 
-const $64fad37f770d2bfe$var$genomeZone = (0, $gXNCa$tbrowse.createGenomeZone)({
-    id: 'genome'
-});
-// The genome (gene-structure) zone is gated behind the site-config flag
-// `enable_tbrowse_genome_zone` (defaults to false) — see getTbrowseZones().
-const $64fad37f770d2bfe$var$TBROWSE_BASE_ZONES = [
-    (0, $gXNCa$tbrowse.treeZone),
-    (0, $gXNCa$tbrowse.labelsZone),
-    (0, $gXNCa$tbrowse.msaZone),
-    (0, $gXNCa$tbrowse.neighborhoodZone)
-];
 // A gene's trees: the main Compara tree (homology.gene_tree) and/or trees in
 // clade-specific tree sets, homology.<tree_set> — e.g. a wheat gene may carry
 // gene_tree, homology.wheat = {id: 'EplWheatGT_…'} and homology.barley. Solr
@@ -9174,27 +9160,72 @@ const $64fad37f770d2bfe$var$treeLabel = (ref)=>{
     const set = ref.field === 'gene_tree' ? 'Compara' : ref.field.charAt(0).toUpperCase() + ref.field.slice(1);
     return ref.rootTaxonName ? `${set} \xb7 ${ref.rootTaxonName}` : set;
 };
+const $64fad37f770d2bfe$var$genomeZone = (0, $gXNCa$tbrowse.createGenomeZone)({
+    id: 'genome'
+});
+// The genome (gene-structure) zone is gated behind the site-config flag
+// `enable_tbrowse_genome_zone` (defaults to false) — see getTbrowseZones().
+const $64fad37f770d2bfe$var$TBROWSE_BASE_ZONES = [
+    (0, $gXNCa$tbrowse.treeZone),
+    (0, $gXNCa$tbrowse.labelsZone),
+    (0, $gXNCa$tbrowse.msaZone),
+    (0, $gXNCa$tbrowse.neighborhoodZone)
+];
+// The expression-attributes zone's data, as a slot on tbrowse-core's Gramene
+// gene-tree source: one tree-scoped /search for the expr_*__attr_* fields
+// (fetchGrameneExprAttrDocs), shaped by buildExprData and delivered through
+// hostData.exprAttrs — the same lifecycle as the built-in neighborhood and
+// gene-structure slots. Enabled per site via the ctx flag the component
+// derives from `enable_tbrowse_expression_zone`. Scoped by root.meta, which
+// carries the Solr field holding the tree id: gene_tree, or a clade tree set
+// such as wheat.
+const $64fad37f770d2bfe$var$exprAttrsSlot = (0, $gXNCa$tbrowsecore.defineSlot)({
+    id: 'exprAttrs',
+    enabled: (ctx)=>ctx.expression === true,
+    run: async ({ ctx: ctx, fetch: fetch, signal: signal, tree: tree, root: root })=>(0, $cd8bc494277e92a4$export$965a6b1d7408d496)(await (0, $gXNCa$tbrowsecore.fetchGrameneExprAttrDocs)(ctx.base, root.meta.treeId, {
+            treeField: root.meta.treeField,
+            fetch: fetch,
+            signal: signal
+        }), tree),
+    toHostData: (v)=>({
+            hostData: {
+                exprAttrs: v
+            }
+        })
+});
+const $64fad37f770d2bfe$var$homologySource = (0, $gXNCa$tbrowsecore.extendSource)((0, $gXNCa$tbrowsecore.grameneGeneTreeSource), {
+    id: 'gramene-homology',
+    slots: [
+        $64fad37f770d2bfe$var$exprAttrsSlot
+    ]
+});
+// Host zone id → the slot(s) feeding it, so the TBrowse toolbar shows the
+// per-zone loading / error affordances (TBrowseProps.zoneStatus).
+const $64fad37f770d2bfe$var$ZONE_SLOTS = {
+    neighborhood: [
+        'neighborhood'
+    ],
+    genome: [
+        'geneStructures'
+    ],
+    expression: [
+        'exprAttrs'
+    ]
+};
 class $64fad37f770d2bfe$var$Homology extends (0, ($parcel$interopDefault($gXNCa$react))).Component {
     constructor(props){
         super(props);
-        // Async data caches stay in local state (per mount, per tree). The
+        // The tbrowse data — tree, MSA, domains and junctions adapted from the
+        // stored genetree doc, then the neighborhood / gene-structure / expression
+        // slots — is loaded by a tbrowse-core loader kept on the instance (one per
+        // mount); its snapshot is mirrored into state so renders follow it. 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.loader = (0, $gXNCa$tbrowsecore.createLoader)($64fad37f770d2bfe$var$homologySource, {
+            zoneSlots: $64fad37f770d2bfe$var$ZONE_SLOTS
+        });
         this.state = {
-            neighborhood: null,
-            neighborhoodTreeId: null,
-            neighborhoodStatus: undefined,
-            geneStructures: null,
-            geneStructuresTreeId: null,
-            geneStructuresStatus: undefined,
-            exprAttrs: null,
-            exprAttrsTreeId: null,
-            exprAttrsStatus: undefined
+            snap: this.loader.getSnapshot()
         };
         if (!props.geneDocs.hasOwnProperty(props.searchResult.id)) props.requestGene(props.searchResult.id);
         this.taxonomy = (0, ($parcel$interopDefault($gXNCa$gramenetreesclientsrctaxonomy))).tree(Object.values(props.grameneTaxonomy));
@@ -9264,248 +9295,95 @@ class $64fad37f770d2bfe$var$Homology extends (0, ($parcel$interopDefault($gXNCa$
     // When the user has limited the search to a subset of genomes
     // (grameneGenomes.active), prune the gene tree to genes from those genomes
     // — mirroring the taxon_id filter api.js applies to the search itself, and
-    // the genomesOfInterest TreeVis already honours. Returns the ids of the
-    // highest nodes whose entire subtree lies outside the active set (maximal
-    // excluded clades), rather than individual leaves: tbrowse then sheds one
-    // stub per clade instead of one per leaf, and its single-marker count is
-    // meaningful. The gene of interest is always kept so the tree never
-    // collapses to nothing. Empty active set means "no limit" → full tree.
+    // the genomesOfInterest TreeVis already honours. tbrowse-core's
+    // maximalExcludedClades returns the ids of the highest nodes whose entire
+    // subtree lies outside the active set (maximal excluded clades), rather
+    // than individual leaves: tbrowse then sheds one stub per clade instead of
+    // one per leaf, and its single-marker count is meaningful. The gene of
+    // interest is always kept so the tree never collapses to nothing. Empty
+    // active set means "no limit" → full tree.
     getGenomePrunedIds() {
         const active = this.props.grameneGenomes && this.props.grameneGenomes.active || {};
         const activeIds = Object.keys(active);
         if (activeIds.length === 0) return [];
-        if (!this._tbrowseData) return [];
+        const snap = this.state.snap;
+        if (!snap.tree) return [];
         const activeSet = new Set(activeIds.map(String));
         const keepGeneId = this.gene && this.gene._id;
-        const nodes = this._tbrowseData.tree.nodes;
-        const children = {};
-        Object.values(nodes).forEach((n)=>{
-            if (n.parentId != null) (children[n.parentId] = children[n.parentId] || []).push(n.id);
-        });
-        // hasKept(node): does the subtree contain a leaf we must keep (its taxon
-        // is active, or it's the gene of interest)? Memoised post-order walk.
-        const memo = {};
-        const hasKept = (id)=>{
-            if (id in memo) return memo[id];
-            const n = nodes[id];
-            const v = n.isLeaf ? n.taxonomyId != null && activeSet.has(String(n.taxonomyId)) || n.geneId === keepGeneId : (children[id] || []).some(hasKept);
-            memo[id] = v;
-            return v;
-        };
-        // A node is a maximal excluded clade when it keeps nothing but its parent
-        // does (or it's the root) — i.e. the highest fully-excluded node on its
-        // path. The root always keeps the gene of interest, so it is never pruned.
-        return Object.values(nodes).filter((n)=>!hasKept(n.id) && (n.parentId == null || hasKept(n.parentId))).map((n)=>n.id);
+        return (0, $gXNCa$tbrowsecore.maximalExcludedClades)(snap.tree, (leaf)=>leaf.taxonomyId != null && activeSet.has(String(leaf.taxonomyId)) || leaf.geneId === keepGeneId);
     }
     // 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.
+    // loader has the tree and the user is actually looking at the tbrowse
+    // viewer, from lifecycle (not render) to avoid dispatching mid-render. The
+    // dispatch lands synchronously in the per-gene slice, so the slice check is
+    // the dedupe. buildInitialViewState is the same routine the chassis runs in
+    // uncontrolled mode (each zone's fr-share, initial visibility, default
+    // per-zone state); the pivot is computed for THIS gene — the loader is
+    // shared by every gene of the tree, so its own pivot may be another gene's.
     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];
-        const ref = this.selectedTreeRef(gene);
-        if (!ref) return;
-        const treeId = ref.id;
-        const raw = this.props.grameneTrees[treeId];
-        if (!raw || !raw.taxon_id) return;
-        const adapted = (0, $gXNCa$tbrowse.fromGrameneGenetree)([
-            raw
-        ]);
-        const pivot = (0, $gXNCa$tbrowse.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: this.getTbrowseZones().map((z)=>({
-                    id: z.id,
-                    width: z.defaultWidth,
-                    visible: z.defaultVisible ?? true
-                })),
-            zoneStates: {},
-            search: null
-        });
+        if (!this.gene) return;
+        // The live snapshot, not the mirrored one: right after a tree switch the
+        // loader has already restarted but state.snap still holds the old tree.
+        const snap = this.loader.getSnapshot();
+        const ref = this.selectedTreeRef(this.gene);
+        if (!ref || snap.status !== 'ready' || !snap.tree || !snap.root || snap.root.meta.treeId !== ref.id) return;
+        this.setTbrowseViewState((0, $gXNCa$tbrowsecore.applyPivot)((0, $gXNCa$tbrowsecore.buildInitialViewState)(this.getTbrowseZones()), (0, $gXNCa$tbrowsecore.computePivotState)(snap.tree, this.gene._id)));
     }
     componentDidMount() {
+        this._unsubscribe = this.loader.subscribe(()=>this.setState({
+                snap: this.loader.getSnapshot()
+            }));
+        this.maybeStartLoader();
         this.maybeSeedTbrowseViewState();
-        this.maybeFetchTbrowseData();
     }
     componentDidUpdate() {
+        this.maybeStartLoader();
         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() {
+    componentWillUnmount() {
+        if (this._unsubscribe) this._unsubscribe();
+        this.loader.dispose();
+    }
+    // Start the loader (or restart it when the gene's tree changes) from
+    // lifecycle, not render. Gated on the user actually being on the tbrowse
+    // viewer + the tree doc being loaded — otherwise we'd pay network cost for
+    // genes the user never looks at. The stored genetree doc is handed over as
+    // `rawGenetree`, so the source makes no /genes or /genetrees request of its
+    // own (docs.js's taxon-name rewrite stays upstream); the neighborhood,
+    // gene-structure and expression slots are the only fetches, and the loader
+    // retries their transient failures with backoff.
+    maybeStartLoader() {
         if (this.getViewer() !== 'tbrowse') return;
         const id = this.getGeneId();
         if (!this.props.geneDocs.hasOwnProperty(id)) return;
         const gene = this.props.geneDocs[id];
+        // The selected tree: gene_tree, or a clade tree set (homology.wheat,
+        // homology.oat, …); none for genes with homologues but no tree. A switch
+        // restarts the loader (new generation, the old slots are aborted).
         const ref = this.selectedTreeRef(gene);
         if (!ref) return;
         const treeId = ref.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 = (0, $gXNCa$tbrowse.fromGrameneGenetree)([
-                raw
-            ]);
-        }
-        this.fetchNeighborhood(treeId, ref.field);
-        // Only pay for gene-structure data when the genome zone is actually enabled.
-        if (this.isGenomeZoneEnabled()) this.fetchGeneStructures(treeId, this._tbrowseData.tree);
-        // Same for the per-gene expression attributes zone.
-        if (this.isExpressionZoneEnabled()) this.fetchExprAttrs(treeId, this._tbrowseData.tree, ref.field);
-    }
-    fetchNeighborhood(treeId, field = 'gene_tree') {
-        if (this._neighborhoodFetchedFor === treeId) return;
-        this._neighborhoodFetchedFor = treeId;
-        this.setState({
-            neighborhoodStatus: 'loading'
-        });
-        const api = this.props.grameneAPI;
-        const url = new URL(`${api}/search`);
-        const fl = 'id,name,gene_tree,gene_idx,region,start,end,strand,biotype,system_name,description';
-        url.searchParams.set('fl', field === 'gene_tree' ? fl : `${fl},${field}`);
-        // cache=false: as a cached fq the graph query caches its seed inside its own
-        // filterCache computeIfAbsent, and Solr's FastLRUCache throws "Recursive
-        // update" (HTTP 500) whenever the two keys collide — for some trees, until
-        // the seed happens to be cached by another request.
-        url.searchParams.set('fq', `{!graph from=compara_neighbors_10 to=compara_idx_multi maxDepth=1 cache=false}${field}:${treeId}`);
-        url.searchParams.set('rows', '100000');
-        url.searchParams.set('start', '0');
-        fetch(url.toString(), {
-            headers: {
-                Accept: 'application/json'
-            }
-        }).then((res)=>{
-            if (!res.ok) throw new Error(`HTTP ${res.status}`);
-            return res.json();
-        }).then((json)=>{
-            if (this._neighborhoodFetchedFor !== treeId) return;
-            // The neighborhood zone colours genes by family from doc.gene_tree; in
-            // a clade tree set the family id lives under the set's own field.
-            if (field !== 'gene_tree' && json && json.response && Array.isArray(json.response.docs)) json.response.docs.forEach((d)=>{
-                if (d[field] && !d.gene_tree) d.gene_tree = d[field];
-            });
-            this.setState({
-                neighborhood: (0, $gXNCa$tbrowse.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;
-        });
-    }
-    fetchGeneStructures(treeId, tree) {
-        if (this._geneStructuresFetchedFor === treeId) return;
-        this._geneStructuresFetchedFor = treeId;
-        const ids = Object.values(tree.nodes).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 = [];
-        for(let i = 0; i < ids.length; i += BATCH_SIZE)batches.push(ids.slice(i, i + BATCH_SIZE));
-        const fetchBatch = (batch)=>{
-            const url = new URL(`${api}/genes`);
-            url.searchParams.set('idList', batch.join(','));
-            url.searchParams.set('rows', '-1');
-            return fetch(url.toString(), {
-                headers: {
-                    Accept: 'application/json'
-                }
-            }).then((res)=>{
-                if (!res.ok) throw new Error(`HTTP ${res.status}`);
-                return res.json();
-            });
-        };
-        Promise.all(batches.map(fetchBatch)).then((results)=>{
-            if (this._geneStructuresFetchedFor !== treeId) return;
-            const combined = [].concat(...results.map((r)=>Array.isArray(r) ? r : []));
-            this.setState({
-                geneStructures: (0, $gXNCa$tbrowse.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;
-        });
-    }
-    // Fetch the expression attributes (expr_*__attr_*) for this tree's genes in a
-    // single query: scope by the tree's field and the `expression_attributes` capability
-    // so only genes that actually have the data come back (rows high enough to
-    // cover the whole tree). Uses /search (not /genes, whose trimmed docs omit the
-    // attr fields) with an fl glob so the columns are discovered from the data
-    // rather than hard-coded. `tree` is still needed to map gene ids to leaf node
-    // ids (see buildExprByNode).
-    fetchExprAttrs(treeId, tree, field = 'gene_tree') {
-        if (this._exprAttrsFetchedFor === treeId) return;
-        this._exprAttrsFetchedFor = treeId;
-        this.setState({
-            exprAttrsStatus: 'loading'
-        });
-        const api = this.props.grameneAPI;
-        const url = new URL(`${api}/search`);
-        url.searchParams.set('q', '*:*');
-        url.searchParams.append('fq', `${field}:${treeId}`);
-        url.searchParams.append('fq', 'capabilities:expression_attributes');
-        url.searchParams.set('fl', 'id,expr_*__attr_*');
-        url.searchParams.set('rows', '10000');
-        fetch(url.toString(), {
-            headers: {
-                Accept: 'application/json'
-            }
-        }).then((res)=>{
-            if (!res.ok) throw new Error(`HTTP ${res.status}`);
-            return res.json();
-        }).then((json)=>{
-            if (this._exprAttrsFetchedFor !== treeId) return;
-            const docs = json && json.response && Array.isArray(json.response.docs) ? json.response.docs : [];
-            this.setState({
-                exprAttrs: (0, $cd8bc494277e92a4$export$965a6b1d7408d496)(docs, tree),
-                exprAttrsTreeId: treeId,
-                exprAttrsStatus: 'ready'
-            });
-        }).catch((err)=>{
-            console.warn('tbrowse expression-attrs fetch failed:', err);
-            if (this._exprAttrsFetchedFor === treeId) this.setState({
-                exprAttrsStatus: 'error'
-            });
-            this._exprAttrsFetchedFor = null;
+        const key = `${ref.field}:${treeId}`;
+        if (this._loaderStartedFor === key) return;
+        this._loaderStartedFor = key;
+        this.loader.start({
+            base: this.props.grameneAPI,
+            treeId: treeId,
+            treeField: ref.field,
+            geneId: gene._id,
+            rawGenetree: raw,
+            // Only pay for gene-structure data when the genome zone is enabled; the
+            // request shape (50 ids per /genes call, no fl) is what this tab has
+            // always sent.
+            geneStructures: this.isGenomeZoneEnabled(),
+            geneStructureChunkSize: 50,
+            geneStructureFl: null,
+            // Same for the per-gene expression attributes zone.
+            expression: this.isExpressionZoneEnabled()
         });
     }
     startResize(e) {
@@ -9558,49 +9436,30 @@ class $64fad37f770d2bfe$var$Homology extends (0, ($parcel$interopDefault($gXNCa$
         });
     }
     renderTBrowse() {
-        const treeId = this.treeRef.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) {
-            this._tbrowseTreeId = treeId;
-            this._tbrowseData = (0, $gXNCa$tbrowse.fromGrameneGenetree)([
-                this.props.grameneTrees[treeId]
-            ]);
-        }
-        const neighborhood = this.state.neighborhoodTreeId === treeId ? this.state.neighborhood : undefined;
-        const geneStructures = this.state.geneStructuresTreeId === treeId ? this.state.geneStructures : undefined;
-        const exprAttrs = this.state.exprAttrsTreeId === treeId ? this.state.exprAttrs : 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,
-            expression: this.state.exprAttrsTreeId === treeId ? this.state.exprAttrsStatus : this.state.exprAttrsStatus === '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 snap = this.state.snap;
+        const hostProps = (0, $gXNCa$tbrowsecore.hostPropsFrom)(snap);
+        // Nothing to draw until the loader has adapted the tree (one tick after
+        // start(), since the stored doc needs no fetch) and the bundle slice has
+        // been seeded by maybeSeedTbrowseViewState (lifecycle, not render).
         const tbrowseVS = this.getHomologySlice().tbrowse;
-        if (!tbrowseVS) return null;
+        // Also wait until the snapshot holds the SELECTED tree, so a switch never
+        // draws the previous tree under the new selection.
+        const isSelected = snap.root && this.treeRef && snap.root.meta.treeId === this.treeRef.id;
+        if (!hostProps || !tbrowseVS || !isSelected) // Reserve the pane's height so the card doesn't jump when the tree lands.
+        return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("div", {
+            className: "gene-genetree",
+            style: {
+                height: this.getHeight(),
+                width: '100%'
+            },
+            children: /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$reactbootstrap.Spinner), {})
+        });
         // Layer the genome-limit prune set on top of the user's own prunes for the
-        // controlled view state, but persist only the user's prunes (strip the
-        // genome-derived ones in onViewStateChange) so the bundle stays free of
-        // filter-derived state and re-applies cleanly when the filter changes.
-        const genomePrunedIds = this.getGenomePrunedIds();
-        const effectiveVS = genomePrunedIds.length ? {
-            ...tbrowseVS,
-            prunedNodeIds: (0, ($parcel$interopDefault($gXNCa$lodash))).union(tbrowseVS.prunedNodeIds || [], genomePrunedIds)
-        } : tbrowseVS;
-        const onViewStateChange = genomePrunedIds.length ? (next)=>{
-            const genomeSet = new Set(genomePrunedIds);
-            this.setTbrowseViewState({
-                ...next,
-                prunedNodeIds: (next.prunedNodeIds || []).filter((id)=>!genomeSet.has(id))
-            });
-        } : (next)=>this.setTbrowseViewState(next);
+        // controlled view state, but persist only the user's prunes (the layer
+        // strips the genome-derived ones in onViewStateChange) so the bundle stays
+        // free of filter-derived state and re-applies cleanly when the filter
+        // changes.
+        const pruneLayer = (0, $gXNCa$tbrowsecore.createDerivedPruneLayer)(this.getGenomePrunedIds());
         return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)((0, $gXNCa$reactjsxruntime.Fragment), {
             children: [
                 /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("div", {
@@ -9610,27 +9469,16 @@ class $64fad37f770d2bfe$var$Homology extends (0, ($parcel$interopDefault($gXNCa$
                         width: '100%'
                     },
                     children: /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)((0, $gXNCa$tbrowse.TBrowse), {
-                        tree: this._tbrowseData.tree,
-                        taxonomy: this._tbrowseData.taxonomy,
-                        msa: this._tbrowseData.msa,
-                        geneMetadata: this._tbrowseData.geneMetadata,
-                        proteinDomains: this._tbrowseData.proteinDomains,
-                        exonJunctions: this._tbrowseData.exonJunctions,
-                        neighborhood: neighborhood,
-                        geneStructures: geneStructures,
-                        hostData: exprAttrs ? {
-                            exprAttrs: exprAttrs
-                        } : undefined,
+                        ...hostProps,
                         zones: this.getTbrowseZones(),
                         nodeOfInterest: this.gene._id,
-                        viewState: effectiveVS,
-                        onViewStateChange: onViewStateChange,
+                        viewState: pruneLayer.effective(tbrowseVS),
+                        onViewStateChange: (next)=>this.setTbrowseViewState(pruneLayer.onChange(next)),
                         densityControls: true,
                         defaultOpenSections: {
                             zones: true,
                             search: true
-                        },
-                        zoneStatus: zoneStatus
+                        }
                     })
                 }),
                 this.renderResizeHandle()
@@ -9862,7 +9710,7 @@ class $64fad37f770d2bfe$var$Homology extends (0, ($parcel$interopDefault($gXNCa$
         });
     }
 }
-var $64fad37f770d2bfe$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.connect)('selectGrameneTaxonomy', 'selectGrameneTrees', 'selectGrameneGenomes', 'selectGrameneAPI', 'selectConfiguration', 'selectCuration', 'selectUiViewState', 'doRequestGrameneTree', 'doSetHomologyViewer', 'doSetHomologyTree', 'doSetHomologyHeight', 'doSetHomologyTbrowseViewState', 'doAcceptGrameneSuggestion', 'doReplaceGrameneFilters', $64fad37f770d2bfe$var$Homology);
+var $64fad37f770d2bfe$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.connect)('selectGrameneTaxonomy', 'selectGrameneTrees', 'selectGrameneGenomes', 'selectGrameneAPI', 'selectConfiguration', 'selectCuration', 'selectUiViewState', 'doRequestGrameneTree', 'doSetHomologyViewer', 'doSetHomologyHeight', 'doSetHomologyTbrowseViewState', 'doSetHomologyTree', 'doAcceptGrameneSuggestion', 'doReplaceGrameneFilters', $64fad37f770d2bfe$var$Homology);
 
 
 
@@ -20522,69 +20370,21 @@ var $597fe213417ee6ca$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.conn
 
 
 
+
 // Adapter: gramene taxonomy-with-genomes tree  →  tbrowse `Tree` + `Taxonomy`.
 //
 // `grameneTaxDist` (from the grameneTaxDist bundle's selectGrameneTaxDist) is
-// the root node of a gramene-taxonomy-with-genomes tree. Each node exposes
-// `node.model` ({ id, name, genome?, rank?, results? }) and `node.children`.
-// Genome leaves carry `model.genome`; internal clade nodes have children.
-//
-// tbrowse wants a flat `Tree { rootId, nodes: { [id]: TreeNode } }` plus a
-// `Taxonomy { [taxonomyId]: { scientificName, commonName, rank } }` that its
-// labels zone reads to render each leaf's species name. We key tbrowse
-// NodeIds off the (unique) NCBI taxon id and set `taxonomyId` to the same id.
-//
-// Branch lengths are uniform (taxonomy carries none); the tree zone is driven
-// in 'cladogram' mode for this view, which ignores `distance` and aligns the
-// genome rows at the right edge regardless.
-/**
- * @param {object} taxDist - root node of the gramene taxDist tree
- *   (the object returned by selectGrameneTaxDist).
- * @returns {{ tree: {rootId: string, nodes: object}, taxonomy: object,
- *             leafTaxonIds: string[] } | null}
- */ function $dc4f9c952681c07f$export$5fb520c9ccc6bdef(taxDist) {
+// the root node of a gramene-taxonomy-with-genomes (tree-model) tree. The
+// conversion itself — node ids = String(NCBI taxon id), uniform branch lengths
+// (the tree zone runs in 'cladogram' mode for this view), `model.name` exposed
+// as both scientific and common name, duplicate-id guard — is
+// tbrowse-core's `fromTreeModel`, which was lifted from this file.
+
+function $dc4f9c952681c07f$export$5fb520c9ccc6bdef(taxDist) {
     if (!taxDist || !taxDist.model) return null;
-    const nodes = {};
-    const taxonomy = {};
-    const leafTaxonIds = [];
-    const rootId = String(taxDist.model.id);
-    const walk = (node, parentId)=>{
-        if (!node || !node.model) return;
-        const id = String(node.model.id);
-        // Guard against the (shouldn't-happen) cyclic / duplicate id case so a
-        // malformed taxonomy can't spin the recursion.
-        if (nodes[id]) return;
-        const kids = node.children || [];
-        const isLeaf = kids.length === 0;
-        nodes[id] = {
-            id: id,
-            parentId: parentId,
-            distance: parentId === null ? 0 : 1,
-            isLeaf: isLeaf,
-            taxonomyId: id
-        };
-        // `model.name` is the NCBI scientific name for clades and is overwritten
-        // with the genome's display_name for genome leaves upstream in
-        // selectGrameneTaxDist. Expose it as both names so the labels zone shows
-        // something whichever field the user has active.
-        const name = node.model.name;
-        taxonomy[id] = {
-            scientificName: name,
-            commonName: name,
-            rank: node.model.rank
-        };
-        if (isLeaf) leafTaxonIds.push(id);
-        for (const k of kids)walk(k, id);
-    };
-    walk(taxDist, null);
-    return {
-        tree: {
-            rootId: rootId,
-            nodes: nodes
-        },
-        taxonomy: taxonomy,
-        leafTaxonIds: leafTaxonIds
-    };
+    return (0, $gXNCa$tbrowsecore.fromTreeModel)(taxDist, {
+        taxonomyIdAs: 'string'
+    });
 }
 
 
@@ -20611,6 +20411,7 @@ var $597fe213417ee6ca$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.conn
 
 
 
+
 // ── colour model (ported from gramene-search-vis util/colors.js) ──────────
 // schemeCategory10, kept as RGB triples so we need no d3 dependency here.
 const $bfd29d54a0f0e853$var$REGION_RGB = [
@@ -21138,12 +20939,6 @@ const $bfd29d54a0f0e853$var$BinsHeader = ({ data: data, zoneState: zoneState, se
 // lets the row-highlight background (rendered in the layer beneath the canvas)
 // show as bands above/below the strip on hover/select.
 const $bfd29d54a0f0e853$var$ROW_PAD_Y = 2;
-function $bfd29d54a0f0e853$var$rowHighlight(isSelected, isExactHover, isInHoveredSubtree) {
-    if (isSelected) return 'var(--tbrowse-row-select-bg)';
-    if (isExactHover) return 'var(--tbrowse-row-hover-bg)';
-    if (isInHoveredSubtree) return 'var(--tbrowse-row-subtree-bg)';
-    return 'transparent';
-}
 const $bfd29d54a0f0e853$var$BinsBody = (props)=>{
     const { visibleRows: visibleRows, rowRange: rowRange, width: width, data: data, zoneState: zoneState, hoveredNodeId: hoveredNodeId, hoveredSubtreeIds: hoveredSubtreeIds, selectedNodeId: selectedNodeId, onHoverNode: onHoverNode, onSelectNode: onSelectNode } = props;
     const canvasRef = (0, $gXNCa$react.useRef)(null);
@@ -21157,7 +20952,7 @@ const $bfd29d54a0f0e853$var$BinsBody = (props)=>{
     const snap = (0, $gXNCa$react.useSyncExternalStore)(store ? store.subscribe : $bfd29d54a0f0e853$var$NOOP_SUB, store ? store.getState : $bfd29d54a0f0e853$var$NOOP_GET);
     const transform = snap.transform || $bfd29d54a0f0e853$var$DEFAULT_TRANSFORM;
     const mode = zoneState && zoneState.mode || 'select';
-    const totalHeight = visibleRows.length ? visibleRows[visibleRows.length - 1].y + visibleRows[visibleRows.length - 1].height : 0;
+    const totalHeight = (0, $gXNCa$tbrowsecore.rowsTotalHeight)(visibleRows);
     const bins = data.hostData && data.hostData.bins;
     const rows = visibleRows.slice(rowRange.startIndex, rowRange.endIndex);
     const w = Math.max(1, Math.floor(width));
@@ -21410,7 +21205,11 @@ const $bfd29d54a0f0e853$var$BinsBody = (props)=>{
                         left: 0,
                         right: 0,
                         height: r.height,
-                        background: $bfd29d54a0f0e853$var$rowHighlight(selectedNodeId === r.nodeId, hoveredNodeId === r.nodeId, !!(hoveredSubtreeIds && hoveredSubtreeIds.has(r.nodeId))),
+                        background: (0, $gXNCa$tbrowse.rowHighlightBackground)((0, $gXNCa$tbrowsecore.rowFlags)(r, {
+                            hoveredNodeId: hoveredNodeId,
+                            hoveredSubtreeIds: hoveredSubtreeIds,
+                            selectedNodeId: selectedNodeId
+                        })),
                         cursor: rowCursor,
                         opacity: r.opacity ?? 1
                     }
@@ -21450,37 +21249,12 @@ const $bfd29d54a0f0e853$export$d85d069f2280460c = {
 // Host-defined tbrowse zone: a narrow, right-justified text column showing the
 // number of matching genes per leaf (genome) — or, for a collapsed clade, the
 // summed count over its subtree. Counts come from the taxon_id facet; the
-// per-node sums are precomputed by computeGeneCounts and handed in via
-// hostData.geneCounts = { [nodeId]: number }.
+// per-node sums are computed by tbrowse-core's `countsFromFacet` in the
+// container and handed in via hostData.geneCounts = { [nodeId]: number }.
+
 
 
 
-function $15275c4f5939e11d$export$ce87f9041549c2e9(tree, taxonIdFacet) {
-    if (!tree || !tree.nodes) return {};
-    const leafCount = {};
-    if (Array.isArray(taxonIdFacet)) for(let i = 0; i < taxonIdFacet.length; i += 2)leafCount[String(taxonIdFacet[i])] = +taxonIdFacet[i + 1];
-    const childrenOf = {};
-    for (const id of Object.keys(tree.nodes)){
-        const p = tree.nodes[id].parentId;
-        if (p !== null && p !== undefined) (childrenOf[p] = childrenOf[p] || []).push(id);
-    }
-    const out = {};
-    const visit = (id)=>{
-        const node = tree.nodes[id];
-        if (!node) return 0;
-        if (node.isLeaf) {
-            const c = leafCount[id] || 0;
-            out[id] = c;
-            return c;
-        }
-        let sum = 0;
-        for (const k of childrenOf[id] || [])sum += visit(k);
-        out[id] = sum;
-        return sum;
-    };
-    visit(tree.rootId);
-    return out;
-}
 const $15275c4f5939e11d$var$CountsHeader = ({ zoneState: zoneState, setZoneState: setZoneState })=>/*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("div", {
         style: {
             padding: '0 10px',
@@ -21498,28 +21272,24 @@ const $15275c4f5939e11d$var$CountsHeader = ({ zoneState: zoneState, setZoneState
                     }))
         })
     });
-// Shared row-highlight background, matching the labels zone so hovering any
-// zone lights up the same row across all of them (state flows through the
-// tbrowse store's hoveredNodeId).
-function $15275c4f5939e11d$var$rowHighlight(isSelected, isExactHover, isInHoveredSubtree) {
-    if (isSelected) return 'var(--tbrowse-row-select-bg)';
-    if (isExactHover) return 'var(--tbrowse-row-hover-bg)';
-    if (isInHoveredSubtree) return 'var(--tbrowse-row-subtree-bg)';
-    return 'transparent';
-}
 const $15275c4f5939e11d$var$CountsBody = ({ visibleRows: visibleRows, rowRange: rowRange, width: width, data: data, hoveredNodeId: hoveredNodeId, hoveredSubtreeIds: hoveredSubtreeIds, selectedNodeId: selectedNodeId, onHoverNode: onHoverNode, onSelectNode: onSelectNode })=>{
-    const totalHeight = visibleRows.length ? visibleRows[visibleRows.length - 1].y + visibleRows[visibleRows.length - 1].height : 0;
+    const totalHeight = (0, $gXNCa$tbrowsecore.rowsTotalHeight)(visibleRows);
     const counts = data.hostData && data.hostData.geneCounts || {};
-    const rows = visibleRows.slice(rowRange.startIndex, rowRange.endIndex);
+    // Rows in the virtualised range with the shared hover/select background, so
+    // hovering any zone lights up the same row across all of them.
+    const rows = (0, $gXNCa$tbrowse.rowsWithFlags)(visibleRows, rowRange, {
+        hoveredNodeId: hoveredNodeId,
+        hoveredSubtreeIds: hoveredSubtreeIds,
+        selectedNodeId: selectedNodeId
+    });
     return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("div", {
         style: {
             position: 'relative',
             width: width,
             height: totalHeight
         },
-        children: rows.map((r)=>{
+        children: rows.map(({ row: r, background: background })=>{
             const n = counts[r.nodeId];
-            const background = $15275c4f5939e11d$var$rowHighlight(selectedNodeId === r.nodeId, hoveredNodeId === r.nodeId, !!(hoveredSubtreeIds && hoveredSubtreeIds.has(r.nodeId)));
             return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("div", {
                 onMouseEnter: ()=>onHoverNode(r.nodeId),
                 onMouseLeave: ()=>onHoverNode(null),
@@ -21589,56 +21359,37 @@ function $15504f5eba8e73bd$var$binIdxsToSolr(idxs) {
     }
     return parts.join(' OR ');
 }
+// The initial controlled ViewState: tbrowse-core's buildInitialViewState over
+// this view's zone list with the view's own fr-shares, and — passed through
+// `overrides` so they replace the seeded defaults verbatim — the per-zone states
+// exactly as this view has always persisted them. The tree zone tolerates a
+// partial state (reads with `?? default`); the labels zone reads `visibleFields`
+// directly, so it must be present. Drive the tree as a cladogram (taxonomy has
+// no branch lengths) and show the genome/species name in the labels column.
 function $15504f5eba8e73bd$var$baseViewState() {
-    return {
-        selectedNodeId: null,
-        collapsedNodeIds: [],
-        prunedNodeIds: [],
-        swappedNodeIds: [],
-        compressedNodeIds: [],
-        nodeOfInterestId: null,
-        zones: [
-            {
-                id: 'tree',
-                width: 30,
-                visible: true
-            },
-            {
-                id: 'labels',
-                width: 22,
-                visible: true
-            },
-            {
-                id: 'counts',
-                width: 10,
-                visible: true
-            },
-            {
-                id: 'bins',
-                width: 60,
-                visible: true
-            }
-        ],
-        // Controlled mode supplies zoneStates wholesale, so each must carry the
-        // fields its zone reads. The tree zone tolerates a partial state (reads
-        // with `?? default`); the labels zone reads `visibleFields` directly, so
-        // it must be present. Drive the tree as a cladogram (taxonomy has no
-        // branch lengths) and show the genome/species name in the labels column.
-        zoneStates: {
-            tree: {
-                layoutMode: 'cladogram',
-                showLeafExtensions: false
-            },
-            labels: {
-                visibleFields: [
-                    'taxonomy.commonName'
-                ]
-            },
-            counts: {},
-            bins: {}
+    return (0, $gXNCa$tbrowsecore.buildInitialViewState)($15504f5eba8e73bd$var$ZONES, {
+        widths: {
+            tree: 30,
+            labels: 22,
+            counts: 10,
+            bins: 60
         },
-        search: null
-    };
+        overrides: {
+            zoneStates: {
+                tree: {
+                    layoutMode: 'cladogram',
+                    showLeafExtensions: false
+                },
+                labels: {
+                    visibleFields: [
+                        'taxonomy.commonName'
+                    ]
+                },
+                counts: {},
+                bins: {}
+            }
+        }
+    });
 }
 // The set of taxa to SHOW, mirroring the legacy TaxDist.js logic.
 function $15504f5eba8e73bd$var$computeSelectedTaxa({ grameneSearch: grameneSearch, grameneGenomes: grameneGenomes, grameneMaps: grameneMaps }, treeNodes, collapseEmpties, comparaOnly, showCompara) {
@@ -21702,7 +21453,7 @@ const $15504f5eba8e73bd$var$TaxDistTbrowse = (props)=>{
         const facet = props.grameneSearch && props.grameneSearch.facet_counts && props.grameneSearch.facet_counts.facet_fields && props.grameneSearch.facet_counts.facet_fields.taxon_id;
         return {
             bins: (0, $bfd29d54a0f0e853$export$390e10a52782f018)(grameneTaxDist),
-            geneCounts: adapter ? (0, $15275c4f5939e11d$export$ce87f9041549c2e9)(adapter.tree, facet) : null,
+            geneCounts: adapter ? (0, $gXNCa$tbrowsecore.countsFromFacet)(adapter.tree, facet, 'nodeId') : null,
             binsUI: binsUiRef.current,
             onApplyBinsFilter: onApplyBinsFilter
         };
@@ -21728,7 +21479,7 @@ const $15504f5eba8e73bd$var$TaxDistTbrowse = (props)=>{
     const prunedNodeIds = (0, $gXNCa$react.useMemo)(()=>{
         if (!adapter) return [];
         const selected = $15504f5eba8e73bd$var$computeSelectedTaxa(props, adapter.tree.nodes, collapseEmpties, comparaOnly, showCompara);
-        return adapter.leafTaxonIds.filter((id)=>!selected[id]);
+        return (0, $gXNCa$tbrowsecore.leavesFailing)(adapter.tree, (leaf)=>Boolean(selected[String(leaf.taxonomyId)]));
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
         adapter,
@@ -21740,7 +21491,9 @@ const $15504f5eba8e73bd$var$TaxDistTbrowse = (props)=>{
         props.grameneMaps
     ]);
     // Effective (controlled) view state = user interactions + control-driven
-    // pruning. Memoised so the reference is stable across unrelated renders.
+    // pruning. The derived set REPLACES prunedNodeIds (this view has no user
+    // prunes of its own; the snapshot strips the field for the same reason).
+    // Memoised so the reference is stable across unrelated renders.
     const effectiveViewState = (0, $gXNCa$react.useMemo)(()=>({
             ...viewState,
             prunedNodeIds: prunedNodeIds
@@ -21761,20 +21514,18 @@ const $15504f5eba8e73bd$var$TaxDistTbrowse = (props)=>{
         const el = wrapperRef.current;
         if (!el || el.clientWidth <= 0 || window.innerWidth < 800) return;
         sizedRef.current = true;
-        const TARGET = {
+        const widths = (0, $gXNCa$tbrowsecore.pixelWidthsToFr)({
             tree: 270,
             labels: 200,
             counts: 64
-        };
-        const used = TARGET.tree + TARGET.labels + TARGET.counts;
-        const binsW = Math.max(160, el.clientWidth - used);
+        }, el.clientWidth, 'bins', 160);
         const base = $15504f5eba8e73bd$var$baseViewState();
         setTaxTreeView({
             viewState: {
                 ...base,
                 zones: base.zones.map((z)=>({
                         ...z,
-                        width: z.id === 'bins' ? binsW : TARGET[z.id] ?? z.width
+                        width: widths[z.id] ?? z.width
                     }))
             }
         });