gramene-search 1.6.46 → 1.6.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gramene-search",
-  "version": "1.6.46",
+  "version": "1.6.47",
   "description": "search wrapper for gramene",
   "source": "src/index.js",
   "main": "dist/index.js",
@@ -23,6 +23,7 @@
   "license": "MIT",
   "dependencies": {
     "@fortawesome/fontawesome-free": "^6.6.0",
+    "@parcel/watcher": "^2.5.1",
     "ag-grid-community": "^31.1.1",
     "ag-grid-react": "^31.0.3",
     "axios": "^1.6.8",

package/src/bundles/api.js

@@ -6,10 +6,11 @@ import {build} from "gramene-taxonomy-with-genomes";
 
 const facets = [
   "{!facet.limit='300' facet.mincount='1' key='taxon_id'}taxon_id",
-  "{!facet.limit='100' facet.mincount='1' key='genetree'}gene_tree",
-  "{!facet.limit='100' facet.mincount='1' key='pathways'}pathways__ancestors",
-  "{!facet.limit='100' facet.mincount='1' key='domains'}domain_roots",
-  "{!facet.limit='-1' facet.mincount='1' key='fixed_1000__bin'}fixed_1000__bin"
+  // "{!facet.limit='100' facet.mincount='1' key='genetree'}gene_tree",
+  // "{!facet.limit='100' facet.mincount='1' key='pathways'}pathways__ancestors",
+  // "{!facet.limit='100' facet.mincount='1' key='domains'}domain_roots",
+  "{!facet.limit='-1' facet.mincount='1' key='fixed_1000__bin'}fixed_1000__bin",
+  "{!facet.limit='100' facet.mincount='0' key='AED' type='range' start=0 end=1.0 gap=0.01}MAKER__AED__attr_f"
 ];
 const genomesOfInterest = '(taxon_id:2769) OR (taxon_id:3055) OR (taxon_id:3218) OR (taxon_id:3702) OR (taxon_id:3847) OR (taxon_id:4555) OR (taxon_id:4558) OR (taxon_id:4577) OR (taxon_id:13333) OR (taxon_id:15368) OR (taxon_id:29760) OR (taxon_id:39947) OR (taxon_id:55577) OR (taxon_id:88036) OR (taxon_id:214687)';
 const sites = ['main','oryza','maize','sorghum','grapevine'];
@@ -291,54 +292,43 @@ grameneGermplasm.reactGrameneGermplasm = createSelector(
 //   }
 // );
 
-const attribFacetFields = [
-  "{!facet.limit='10' facet.mincount='1' key='age'}panset_age_attr_s",
-  "{!facet.limit='100' facet.mincount='1' key='taxa'}panset_ntaxa_attr_i",
-  "{!facet.limit='100' facet.mincount='1' key='AED' type='range' start=0 end=1.0 gap=0.25}MAKER_AED_attr_f",
-  "{!facet.limit='100' facet.mincount='1' key='QI2' type='range' start=0 end=1.0 gap=0.25}MAKER_QI2_attr_f",
-  "{!facet.limit='100' facet.mincount='1' key='QI3' type='range' start=0 end=1.0 gap=0.25}MAKER_QI3_attr_f",
-  "{!facet.limit='100' facet.mincount='1' key='QI4' type='range' start=0 end=1.0 gap=0.25}MAKER_QI4_attr_f",
-  "{!facet.limit='100' facet.mincount='1' key='QI5' type='range' start=0 end=1.0 gap=0.25}MAKER_QI5_attr_f",
-  "{!facet.limit='100' facet.mincount='1' key='QI6' type='range' start=0 end=1.0 gap=0.25}MAKER_QI6_attr_f"
+const MAKERAttribs = [
+  'MAKER__AED__attr_f',
+  'MAKER__QI1__attr_i',
+  'MAKER__QI2__attr_f',
+  'MAKER__QI3__attr_f',
+  'MAKER__QI4__attr_f',
+  'MAKER__QI5__attr_f',
+  'MAKER__QI6__attr_f',
+  'MAKER__QI7__attr_i',
+  'MAKER__QI8__attr_i',
+  'MAKER__QI9__attr_i'
 ];
-const attribFacets = {
-  "age":{ "type": "terms", "field": "panset_age_attr_s" },
-  "nTaxa": { "type": "terms", "field": "panset_ntaxa_attr_i", "limit": 100 },
-  "AED":{ "type": "range", "field": "MAKER_AED_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-  "QI2":{ "type": "range", "field": "MAKER_QI2_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-  "QI3":{ "type": "range", "field": "MAKER_QI3_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-  "QI4":{ "type": "range", "field": "MAKER_QI4_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-  "QI5":{ "type": "range", "field": "MAKER_QI5_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-  "QI6":{ "type": "range", "field": "MAKER_QI6_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-  "byAge":{ "type": "terms", "field": "panset_age_attr_s", "facet": {
-      "nTaxa": { "type": "terms", "field": "panset_ntaxa_attr_i", "limit": 100 },
-      "AED":{ "type": "range", "field": "MAKER_AED_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-      "QI2":{ "type": "range", "field": "MAKER_QI2_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-      "QI3":{ "type": "range", "field": "MAKER_QI3_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-      "QI4":{ "type": "range", "field": "MAKER_QI4_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-      "QI5":{ "type": "range", "field": "MAKER_QI5_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 },
-      "QI6":{ "type": "range", "field": "MAKER_QI6_attr_f", "start": 0.0, "end": 1.0, "gap": 0.25 }
-    }
-  }
+const geneAttribs = {
+  "MAKER transcript metrics" : [
+    { name: "AED", description: "Annotation Edit Distance", dtype: "f", fieldName: "MAKER__AED__attr_f" },
+    { name: "QI1", description: "Length of the 5' UTR", dtype: "i", fieldName: "MAKER__QI1__attr_i" },
+    { name: "QI2", description: "Fraction of splice sites confirmed by an EST alignment", dtype: "f", fieldName: "MAKER__QI2__attr_f" },
+    { name: "QI3", description: "Fraction of exons that overlap an EST alignment", dtype: "f", fieldName: "MAKER__QI3__attr_f" },
+    { name: "QI4", description: "Fraction of exons that overlap EST or Protein alignments", dtype: "f", fieldName: "MAKER__QI4__attr_f" },
+    // { name: "QI5", description: "Fraction of splice sites confirmed by a SNAP prediction", dtype: "f", fieldName: "MAKER__QI5__attr_f" },
+    // { name: "QI6", description: "Fraction of exons that overlap a SNAP prediction", dtype: "f", fieldName: "MAKER__QI6__attr_f" },
+    { name: "QI7", description: "Number of exons in the mRNA", dtype: "i", fieldName: "MAKER__QI7__attr_i" },
+    { name: "QI8", description: "Length of the 3' UTR", dtype: "i", fieldName: "MAKER__QI8__attr_i" },
+    { name: "QI9", description: "Length of the protein sequence produced by the mRNA", dtype: "i", fieldName: "MAKER__QI9__attr_i" }
+  ]
 }
+const statsFields = geneAttribs['MAKER transcript metrics'].map(
+  // (f) => `stats.field={!min=true max=true count=true mean=true stddev=true percentiles='20,40,60,80,90,95,99'}${f}`
+  (f) => `stats.field={!min=true max=true count=true mean=true stddev=true percentiles='10,20,30,40,50,60,70,80,90,99.99'}${f.fieldName}`
+);
+
 const grameneGeneAttribs = createAsyncResourceBundle( {
   name: 'grameneGeneAttribs',
   actionBaseType: 'GRAMENE_GENE_ATTRIBS',
   persist: false,
   getPromise: ({store}) => {
-    const g = store.selectGrameneGenomes();
-    const taxa = Object.keys(g.active);
-    let fq='';
-    if (taxa.length) {
-      console.log('search add a fq for ',taxa);
-      fq = `&fq=taxon_id:(${taxa.join(' OR ')})`;
-    }
-    return fetch(`${store.selectGrameneAPI()}/search?q=${store.selectGrameneFiltersQueryString()}&json.facet=${JSON.stringify(attribFacets)}&rows=0${fq}`)
-    // return fetch(`${store.selectGrameneAPI()}/search?rows=1&q=MAKER_AED_attr_f:*&json.facet=${JSON.stringify(attribFacets)}`)
-      .then(res => res.json())
-      .then(res => {
-        return res.facets
-      })
+    return fetch(`${store.selectGrameneAPI()}/geneAttributes`).then(res => geneAttribs)
   }
 });
 grameneGeneAttribs.reactGrameneGeneAttribs = createSelector(
@@ -369,7 +359,7 @@ const grameneSearch = createAsyncResourceBundle({
       console.log('search add a fq for ',taxa);
       fq = `&fq=taxon_id:(${taxa.join(' OR ')})`;
     }
-    return fetch(`${store.selectGrameneAPI()}/search?q=${store.selectGrameneFiltersQueryString()}&facet.field=${facets}&rows=${rows}&start=${offset}${fq}`)
+    return fetch(`${store.selectGrameneAPI()}/search?q=${store.selectGrameneFiltersQueryString()}&facet.field=${facets}&rows=${rows}&start=${offset}${fq}&stats=true&${statsFields.join('&')}`)
       .then(res => res.json())
       .then(res => {
         res.response.docs.forEach(d => {
@@ -511,11 +501,11 @@ const grameneParalogs = {
       dispatch({type: 'GRAMENE_PARALOGS_REQUESTED', payload: geneId});
       const API = store.selectGrameneAPI();
       const q= supertree ? `supertree_attr_s:${supertree}` : `homology__within_species_paralog:${geneId}`;
-      fetch(`${API}/search?q=${q}&rows=100&fq=taxon_id:${taxon_id}`)
+      fetch(`${API}/search?q=${q}&rows=1000&fq=taxon_id:${taxon_id}`)
         .then(res => res.json())
         .then(res => {
           let newParalogs = {};
-          newParalogs[geneId] = res.response.docs.map(d => d.id);
+          newParalogs[geneId] = res.response.numFound > 0 ? res.response.docs.map(d => d.id) : [geneId];
           dispatch({type: 'GRAMENE_PARALOGS_RECEIVED', payload: newParalogs})
         })
     }
@@ -578,4 +568,4 @@ const grameneParalogs = {
 // });
 
 
-export default [grameneSuggestions, grameneSearch, grameneMaps, grameneTaxonomy, grameneTaxDist, grameneOrthologs, grameneParalogs, curatedGenes, grameneGermplasm, grameneGeneAttribs, expressionSamples, expressionStudies];
+export default [grameneSuggestions, grameneSearch, grameneGeneAttribs, grameneMaps, grameneTaxonomy, grameneTaxDist, grameneOrthologs, grameneParalogs, curatedGenes, grameneGermplasm, expressionSamples, expressionStudies];

package/src/bundles/docs.js

@@ -126,6 +126,7 @@ const grameneDocs = {
           else {
             newState.desiredSamples[payload] = {status: 'need'}
           }
+          return newState;
       }
       return state;
     }

package/src/bundles/views.js

@@ -37,7 +37,7 @@ const grameneViews = {
         {
           id: 'attribs',
           name: 'Gene attributes',
-          show: 'disabled',
+          show: 'off',
           shouldScroll: false
         }
         // {

package/src/components/results/Expression.js

@@ -2,6 +2,7 @@ import React, { useState, Suspense } from 'react'
 import {connect} from "redux-bundler-react";
 import { Accordion, Button } from 'react-bootstrap';
 import "./expression.css";
+import Study from './Study';
 const LazyStudy = React.lazy(() => import('./Study'));
 
 const StudyList = props => {
@@ -11,10 +12,10 @@ const StudyList = props => {
         <Accordion.Item key={idx} eventKey={'study_'+idx}>
           <Accordion.Header>{study.description}</Accordion.Header>
           <Accordion.Body>
-            <Suspense fallback={<div>Loading...</div>}>
-              <LazyStudy id={study._id}/>
-            </Suspense>
-            {/*<Study id={study._id} />*/}
+            {/*<Suspense fallback={<div>Loading...</div>}>*/}
+            {/*  <LazyStudy id={study._id}/>*/}
+            {/*</Suspense>*/}
+            <Study id={study._id}/>
           </Accordion.Body>
         </Accordion.Item>
       )
@@ -26,24 +27,37 @@ const Expression = props => {
   let searchTaxa = {};
   if (props.grameneSearch) {
     const taxon_id_facet = props.grameneSearch.facet_counts.facet_fields.taxon_id;
-    taxon_id_facet.filter((tid, idx) => idx % 2 === 0).forEach(tid => searchTaxa[tid] = true);
+    taxon_id_facet.filter((tid, idx) => idx % 2 === 0).forEach(tid => {
+      if (tid > 1000000) {
+        const tid2 = Math.floor(tid / 1000);
+        if (props.expressionStudies[tid2]) {
+          searchTaxa[tid2] = tid;
+        }
+      }
+      else {
+        searchTaxa[tid] = tid;
+      }
+    });
   }
   const availableTaxa = Object.keys(props.expressionStudies)
-    .filter(tid => searchTaxa[tid] || searchTaxa[tid + '001'])
-    .sort((a,b) => props.grameneMaps[a + '001'].left_index - props.grameneMaps[b + '001'].left_index);
+    .filter(tid => searchTaxa[tid])
+    .sort((a,b) => props.grameneMaps[searchTaxa[a]].left_index - props.grameneMaps[searchTaxa[b]].left_index);
   return availableTaxa && props.grameneTaxonomy &&
     <div>
       <div>This is where you can launch a component for the selected samples. props.desiredSamples lists them.
         This component can request the data from the API
         organize samples by factor metadata? One big table with all the studies?
-        <Button>Show Samples ({Object.keys(props.desiredSamples).length} selected)</Button>
+        <Button
+          onClick={console.log(Object.keys(props.desiredSamples))}
+        >Show Samples ({Object.keys(props.desiredSamples).length} selected)</Button>
       </div>
       <Accordion alwaysOpen defaultActiveKey={availableTaxa.length === 1 ? "tax_0" : undefined}>
         {availableTaxa.map((tid, idx) => {
-          const n = props.expressionStudies[tid].length;
+          const baselineStudies = props.expressionStudies[tid].filter(study => study.type === 'Baseline');
+          const n = baselineStudies.length;
           return <Accordion.Item key={idx} eventKey={'tax_'+idx}>
             <Accordion.Header>{props.grameneTaxonomy[tid].name} - {n} {n === 1 ? 'study' : 'studies'}</Accordion.Header>
-            <Accordion.Body><StudyList studies={props.expressionStudies[tid]}/></Accordion.Body>
+            <Accordion.Body><StudyList studies={baselineStudies}/></Accordion.Body>
           </Accordion.Item>
         })}
       </Accordion>

package/src/components/results/GeneAttribs.js

@@ -1,6 +1,9 @@
-import React from 'react'
 import { connect } from 'redux-bundler-react'
 
+import React, { useEffect, useMemo, useState } from "react";
+import StatsByGroup from "./StatsByGroup";
+
+
 class GeneAttribs extends React.Component {
   constructor(props) {
     super(props);
@@ -8,15 +11,17 @@ class GeneAttribs extends React.Component {
     };
   }
   render() {
-    return (
-      <div className="gramene-attribs">
-        {this.props.grameneGeneAttribs && <pre>hi</pre>}
-      </div>
-    );
+    if (this.props.grameneGeneAttribs && this.props.grameneSearch) {
+      const groups = this.props.grameneGeneAttribs;
+      const stats = this.props.grameneSearch.stats;
+      return <StatsByGroup groups={groups} stats={stats} />;
+    }
+    return null;
   }
 }
 
 export default connect(
+  'selectGrameneSearch',
   'selectGrameneGeneAttribs',
   GeneAttribs
 );

package/src/components/results/StatsByGroup.js

@@ -0,0 +1,387 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+
+/**
+ * StatsByGroup
+ *
+ * Props:
+ * - groups: {
+ *     [groupName: string]: Array<{
+ *       name: string,
+ *       description: string,
+ *       dtype: "i" | "f",
+ *       fieldName: string
+ *     }>
+ *   }
+ * - stats: {
+ *     stats_fields: {
+ *       [fieldName: string]: {
+ *         min?: number,
+ *         max?: number,
+ *         count?: number,
+ *         mean?: number,
+ *         stddev?: number,
+ *         percentiles?: (string | number)[] // ["10.0", v10, "20.0", v20, ...] (order preserved)
+ *       }
+ *     }
+ *   }
+ *
+ * Columns: attr, desc, mean, stddev, min, max, count, dist
+ */
+export default function StatsByGroup({ groups, stats }) {
+  const fields = stats?.stats_fields || {};
+
+  return (
+    <div style={{ fontFamily: "system-ui, -apple-system, Segoe UI, Roboto, sans-serif", lineHeight: 1.35 }}>
+      {Object.entries(groups).map(([groupName, attrs]) => (
+        <GroupTable
+          key={groupName}
+          groupName={groupName}
+          attributes={attrs}
+          fields={fields}
+        />
+      ))}
+    </div>
+  );
+}
+
+function GroupTable({ groupName, attributes, fields }) {
+  const hasAny = attributes?.some((a) => fields[a.fieldName]);
+
+  const columns = useMemo(
+    () => [
+      { key: "attr",   label: "Attribute",   min: 120 },
+      { key: "desc",   label: "Description", min: 380, flex: true },
+      { key: "mean",   label: "Mean",        min: 100 },
+      { key: "stddev", label: "Std Dev",     min: 110 },
+      { key: "min",    label: "Min",         min: 90  },
+      { key: "max",    label: "Max",         min: 90  },
+      { key: "count",  label: "Count",       min: 90  },
+      { key: "dist",   label: "Distribution",min: 220 },
+    ],
+    []
+  );
+
+  const initial = useMemo(
+    () => columns.map((c) => (c.flex ? Math.max(380, c.min) : c.min)),
+    [columns]
+  );
+
+  const { colWidths, startResize, resizing } = useResizableColumns({
+    initialWidths: initial,
+    minWidths: columns.map((c) => c.min || 60),
+  });
+
+  const nfInt = useMemo(() => new Intl.NumberFormat("en-US", { maximumFractionDigits: 0 }), []);
+  const nfFloat = useMemo(
+    () => new Intl.NumberFormat("en-US", { minimumFractionDigits: 0, maximumFractionDigits: 3 }),
+    []
+  );
+
+  return (
+    <section style={{ marginBottom: 24 }}>
+      <header style={{ display: "flex", alignItems: "baseline", gap: 12, marginBottom: 8 }}>
+        <h2 style={{ margin: 0, fontSize: 18 }}>{groupName}</h2>
+        {!hasAny && <span style={{ fontSize: 12, color: "#666" }}>No stats available for this group.</span>}
+      </header>
+
+      <div
+        style={{
+          overflowX: "auto",
+          border: "1px solid #eee",
+          borderRadius: 8,
+          boxShadow: "0 1px 2px rgba(0,0,0,0.04)",
+        }}
+      >
+        <table style={tableStyle}>
+          <colgroup>
+            {colWidths.map((w, i) => (
+              <col key={i} style={{ width: w }} />
+            ))}
+          </colgroup>
+
+          <thead>
+          <tr>
+            {columns.map((col, i) => (
+              <ResizableTh
+                key={col.key}
+                label={col.label}
+                index={i}
+                onResizeStart={startResize}
+              />
+            ))}
+          </tr>
+          </thead>
+
+          <tbody>
+          {attributes.map((a) => {
+            const s = fields[a.fieldName] || {};
+            return (
+              <tr key={a.fieldName}>
+                <Td mono title={a.fieldName}>{a.name}</Td>
+                <Td title={a.description}>{a.description}</Td>
+                <Td align="right">{fmtValue(s.mean,   a.dtype, true,  nfInt, nfFloat)}</Td>
+                <Td align="right">{fmtValue(s.stddev, a.dtype, true,  nfInt, nfFloat)}</Td>
+                <Td align="right">{fmtValue(s.min,    a.dtype, false, nfInt, nfFloat)}</Td>
+                <Td align="right">{fmtValue(s.max,    a.dtype, false, nfInt, nfFloat)}</Td>
+                <Td align="right">{fmtCount(s.count, nfInt)}</Td>
+                <Td>
+                  <PercentileHeatmapNormalized
+                    percentilesArr={s.percentiles}
+                    min={s.min}
+                    max={s.max}
+                  />
+                </Td>
+              </tr>
+            );
+          })}
+          </tbody>
+        </table>
+      </div>
+
+      <div style={{ marginTop: 6, fontSize: 12, color: "#666" }}>
+        <em>Tip:</em> Drag the divider at the right edge of any header to resize.
+        {resizing && <span style={{ marginLeft: 8, color: "#999" }}>(resizing…)</span>}
+      </div>
+    </section>
+  );
+}
+
+/* ===================== Percentiles / Heatmap ===================== */
+
+/**
+ * Convert alternating array into ordered pairs: [["10.0", v10], ["20.0", v20], ...]
+ * - Preserves the exact order provided by Solr
+ */
+function percentilesArrayToPairs(arr) {
+  if (!Array.isArray(arr)) return [];
+  const out = [];
+  for (let i = 0; i < arr.length - 1; i += 2) {
+    out.push([String(arr[i]), arr[i + 1]]);
+  }
+  return out;
+}
+
+function normalizeBetween(value, min, max) {
+  if (!isFinite(min) || !isFinite(max) || max <= min || !isFinite(value)) return null;
+  return (value - min) / (max - min);
+}
+
+// White -> Blue (0 -> 1)
+function rgbWhiteToBlue(vNorm) {
+  const t = clamp01(vNorm);
+  const rg = Math.round(255 * (1 - t));
+  return `rgb(${rg}, ${rg}, 255)`;
+}
+function clamp01(x) {
+  if (typeof x !== "number" || !isFinite(x)) return 0;
+  return Math.max(0, Math.min(1, x));
+}
+function fmtFloat(v) {
+  if (v == null || !isFinite(v)) return "n/a";
+  return v.toFixed(3);
+}
+
+/**
+ * PercentileHeatmapNormalized
+ * - Infers bins from percentilesArr (order preserved)
+ * - Colors normalized by row min/max
+ */
+function PercentileHeatmapNormalized({ percentilesArr, min, max }) {
+  const pairs = useMemo(() => percentilesArrayToPairs(percentilesArr), [percentilesArr]);
+  const n = pairs.length || 1; // avoid zero columns
+  const validScale = isFinite(min) && isFinite(max) && max > min;
+
+  return (
+    <div style={{ ...heatRowDynamic, gridTemplateColumns: `repeat(${n}, 1fr)` }}>
+      {pairs.map(([pStr, raw], idx) => {
+        const rawNum = typeof raw === "number" && isFinite(raw) ? raw : null;
+        const norm = rawNum == null ? null : (validScale ? normalizeBetween(rawNum, min, max) : null);
+        const bg = norm == null ? "#f2f2f2" : rgbWhiteToBlue(norm);
+        const label = `${pStr} → raw ${fmtFloat(rawNum)} (norm ${fmtFloat(norm)})`;
+        return <HeatCell key={`${pStr}-${idx}`} background={bg} label={label} />;
+      })}
+    </div>
+  );
+}
+
+function HeatCell({ background, label }) {
+  const [hover, setHover] = useState(false);
+  return (
+    <div
+      style={{ ...heatCell, background }}
+      onMouseEnter={() => setHover(true)}
+      onMouseLeave={() => setHover(false)}
+      title={label}
+    >
+      {hover && <span style={popover}>{label}</span>}
+    </div>
+  );
+}
+
+/* ===================== Resizable columns ===================== */
+
+function useResizableColumns({ initialWidths, minWidths }) {
+  const [colWidths, setColWidths] = useState(initialWidths);
+  const [resizing, setResizing] = useState(false);
+  const activeRef = useRef(null); // { index, startX, startW }
+
+  useEffect(() => {
+    if (initialWidths?.length) setColWidths(initialWidths);
+  }, [initialWidths?.length]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  const onMouseMove = (e) => {
+    if (!activeRef.current) return;
+    const { index, startX, startW } = activeRef.current;
+    const dx = e.clientX - startX;
+    const next = [...colWidths];
+    const minW = minWidths?.[index] ?? 60;
+    next[index] = Math.max(minW, startW + dx);
+    setColWidths(next);
+  };
+
+  const endResize = () => {
+    activeRef.current = null;
+    setResizing(false);
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+    window.removeEventListener("mousemove", onMouseMove);
+    window.removeEventListener("mouseup", endResize);
+  };
+
+  const startResize = (index, ev) => {
+    const startX = ev.clientX;
+    const startW = colWidths[index];
+    activeRef.current = { index, startX, startW };
+    setResizing(true);
+    document.body.style.cursor = "col-resize";
+    document.body.style.userSelect = "none";
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", endResize);
+  };
+
+  useEffect(() => {
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", endResize);
+    };
+  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return { colWidths, setColWidths, startResize, resizing };
+}
+
+function ResizableTh({ label, index, onResizeStart }) {
+  return (
+    <th style={thStyle}>
+      <div style={{ position: "relative", width: "100%" }}>
+        <span>{label}</span>
+        <span
+          onMouseDown={(e) => onResizeStart(index, e)}
+          role="separator"
+          aria-orientation="vertical"
+          title="Drag to resize column"
+          style={resizerStyle}
+        />
+      </div>
+    </th>
+  );
+}
+
+/* ===================== Formatting helpers ===================== */
+
+function fmtCount(v, nfInt) {
+  if (v === null || v === undefined) return "—";
+  return nfInt.format(v);
+}
+
+function fmtValue(v, dtype = "f", isStat = false, nfInt, nfFloat) {
+  if (v === null || v === undefined || Number.isNaN(v)) return "—";
+  const isIntType = dtype === "i";
+  return isIntType && !isStat ? nfInt.format(v) : nfFloat.format(v);
+}
+
+/* ===================== Cells & Styles ===================== */
+
+function Td({ children, align = "left", mono = false, title }) {
+  return (
+    <td
+      title={title}
+      style={{
+        ...cellBase,
+        textAlign: align,
+        borderBottom: "1px solid #eee",
+        padding: "8px 10px",
+        fontFamily: mono ? "ui-monospace, SFMono-Regular, Menlo, monospace" : undefined,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        verticalAlign: "top",
+      }}
+    >
+      {children}
+    </td>
+  );
+}
+
+const tableStyle = {
+  width: "100%",
+  borderCollapse: "collapse",
+  tableLayout: "fixed",
+  minWidth: 980,
+};
+
+const cellBase = {
+  fontSize: 13,
+  lineHeight: 1.35,
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+};
+
+const thStyle = {
+  ...cellBase,
+  textAlign: "left",
+  borderBottom: "1px solid #ddd",
+  background: "#fafafa",
+  fontWeight: 600,
+  padding: "10px 10px",
+  position: "relative",
+};
+
+const resizerStyle = {
+  position: "absolute",
+  right: -5,
+  top: 0,
+  height: "100%",
+  width: 10,
+  cursor: "col-resize",
+  boxShadow: "inset -1px 0 0 rgba(0,0,0,0.08)",
+};
+
+const heatRowDynamic = {
+  display: "grid",
+  gap: 2,
+  alignItems: "center",
+  width: "100%",
+  minWidth: 200,
+};
+
+const heatCell = {
+  height: 16,
+  borderRadius: 3,
+  position: "relative",
+  boxShadow: "inset 0 0 0 1px rgba(0,0,0,0.06)",
+};
+
+const popover = {
+  position: "absolute",
+  left: "50%",
+  top: -26,
+  transform: "translateX(-50%)",
+  padding: "2px 6px",
+  fontSize: 11,
+  background: "rgba(0,0,0,0.8)",
+  color: "#fff",
+  borderRadius: 4,
+  whiteSpace: "nowrap",
+  pointerEvents: "none",
+};