gramene-search 2.0.4 → 2.0.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gramene-search",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "description": "search wrapper for gramene",
   "source": "src/index.js",
   "main": "dist/index.js",

package/src/bundles/api.js

@@ -172,12 +172,15 @@ const expressionStudies = createAsyncResourceBundle( {
       .then(res => _.groupBy(res, 'taxon_id'))
   }
 });
+// Only fetch when a view that consumes expression studies is enabled.
+const EXPRESSION_VIEWS = ['exprViz', 'expression', 'export'];
 expressionStudies.reactExpressionStudies = createSelector(
   'selectExpressionStudiesShouldUpdate',
-  (shouldUpdate) => {
-    if (shouldUpdate) {
-      return { actionCreator: 'doFetchExpressionStudies' }
-    }
+  'selectGrameneViewsOn',
+  (shouldUpdate, viewsOn) => {
+    if (!shouldUpdate) return;
+    if (!viewsOn || !EXPRESSION_VIEWS.some(id => viewsOn.has(id))) return;
+    return { actionCreator: 'doFetchExpressionStudies' }
   }
 );
 
@@ -202,10 +205,11 @@ const expressionSamples = createAsyncResourceBundle( {
 });
 expressionSamples.reactExpressionSamples = createSelector(
   'selectExpressionSamplesShouldUpdate',
-  (shouldUpdate) => {
-    if (shouldUpdate) {
-      return { actionCreator: 'doFetchExpressionSamples' }
-    }
+  'selectGrameneViewsOn',
+  (shouldUpdate, viewsOn) => {
+    if (!shouldUpdate) return;
+    if (!viewsOn || !EXPRESSION_VIEWS.some(id => viewsOn.has(id))) return;
+    return { actionCreator: 'doFetchExpressionSamples' }
   }
 );
 
@@ -219,12 +223,15 @@ const curatedGenes = createAsyncResourceBundle( {
       .then(curation => _.keyBy(curation.genes, 'gene_id'))
   }
 });
+// Curated annotations are consumed by GeneList rows and Homology details,
+// both inside the gene-list view.
 curatedGenes.reactCuratedGenes = createSelector(
   'selectCuratedGenesShouldUpdate',
-  (shouldUpdate) => {
-    if (shouldUpdate) {
-      return { actionCreator: 'doFetchCuratedGenes' }
-    }
+  'selectGrameneViewsOn',
+  (shouldUpdate, viewsOn) => {
+    if (!shouldUpdate) return;
+    if (!viewsOn || !viewsOn.has('list')) return;
+    return { actionCreator: 'doFetchCuratedGenes' }
   }
 );
 
@@ -245,12 +252,14 @@ const grameneGermplasm = createAsyncResourceBundle( {
       })
   }
 });
+// Germplasm metadata is consumed by the VEP detail panel inside the gene list.
 grameneGermplasm.reactGrameneGermplasm = createSelector(
   'selectGrameneGermplasmShouldUpdate',
-  (shouldUpdate) => {
-    if (shouldUpdate) {
-      return { actionCreator: 'doFetchGrameneGermplasm' }
-    }
+  'selectGrameneViewsOn',
+  (shouldUpdate, viewsOn) => {
+    if (!shouldUpdate) return;
+    if (!viewsOn || !viewsOn.has('list')) return;
+    return { actionCreator: 'doFetchGrameneGermplasm' }
   }
 );
 //
@@ -334,14 +343,12 @@ const grameneGeneAttribs = createAsyncResourceBundle( {
 grameneGeneAttribs.reactGrameneGeneAttribs = createSelector(
   'selectGrameneGeneAttribsShouldUpdate',
   'selectGrameneFiltersStatus',
-  'selectGrameneViews',
-  (shouldUpdate, status, views) => {
-    if (shouldUpdate && (status === 'finished' || status === 'ready')) {
-      const byId = _.keyBy(views.options,'id');
-      if (byId.attribs.show === "on") {
-        return { actionCreator: 'doFetchGrameneGeneAttribs' }
-      }
-    }
+  'selectGrameneViewsOn',
+  (shouldUpdate, status, viewsOn) => {
+    if (!shouldUpdate) return;
+    if (status !== 'finished' && status !== 'ready') return;
+    if (!viewsOn || !viewsOn.has('attribs')) return;
+    return { actionCreator: 'doFetchGrameneGeneAttribs' }
   }
 );
 
@@ -353,8 +360,8 @@ const grameneSearch = createAsyncResourceBundle({
     const offset = store.selectGrameneSearchOffset();
     const rows = store.selectGrameneSearchRows();
     const g = store.selectGrameneGenomes();
-    const m = store.selectGrameneMaps();
-    const taxa = Object.keys(g.active).filter(tid => !m[tid].hidden);
+    const m = store.selectGrameneMaps() || {};
+    const taxa = Object.keys((g && g.active) || {}).filter(tid => m[tid] && !m[tid].hidden);
     let fq='';
     if (taxa.length) {
       console.log('search add a fq for ',taxa);

package/src/bundles/exporter.js

@@ -181,10 +181,13 @@ const exporter = {
     'selectGrameneFiltersQueryString',
     'selectGrameneGenomes',
     'selectGrameneMaps',
-    (exp, filtersStatus, q, g, m) => {
+    'selectGrameneViewsOn',
+    (exp, filtersStatus, q, g, m, viewsOn) => {
       if (!exp || !exp.preview) return;
       if (filtersStatus === 'init') return;
       if (exp.preview.status === 'loading') return;
+      // Don't run the preview query unless the user has the exporter view open.
+      if (!viewsOn || !viewsOn.has('export')) return;
       const maps = m || {};
       const taxa = Object.keys((g && g.active) || {}).filter(tid => maps[tid] && !maps[tid].hidden);
       const sig = `${q}|${taxa.sort().join(',')}`;

package/src/bundles/swaggerFields.js

@@ -188,6 +188,19 @@ const grameneFieldCatalog = createAsyncResourceBundle({
   }
 });
 
+// Auto-fetch the field catalog only when a view that needs it (exprViz fields
+// modal, exporter field tree) is enabled. Other views never read it.
+const FIELD_CATALOG_VIEWS = ['exprViz', 'export'];
+grameneFieldCatalog.reactGrameneFieldCatalog = createSelector(
+  'selectGrameneFieldCatalogShouldUpdate',
+  'selectGrameneViewsOn',
+  (shouldUpdate, viewsOn) => {
+    if (!shouldUpdate) return;
+    if (!viewsOn || !FIELD_CATALOG_VIEWS.some(id => viewsOn.has(id))) return;
+    return { actionCreator: 'doFetchGrameneFieldCatalog' };
+  }
+);
+
 function assayFactorLabel(assay) {
   if (!assay) return '';
   const factors = Array.isArray(assay.factor) ? assay.factor : [];
@@ -255,12 +268,12 @@ function buildSpeciesNameIndex(grameneMaps) {
 function fieldExperimentId(name) {
   let m = name.match(/^(\w+?)_g\d+__expr$/);
   if (m) return m[1].replace(/_/g, '-');
-  m = name.match(/^(\w+?)_g\d+_g\d+_(pval|logfc|l2fc)_attr_[a-z]$/);
+  m = name.match(/^(\w+?)_g\d+_g\d+_(pval|l2fc)_attr_[a-z]$/);
   if (m) return m[1].replace(/_/g, '-');
   return null;
 }
 
-const STAT_RANK = { l2fc: 0, logfc: 1, pval: 2 };
+const STAT_RANK = { l2fc: 0, pval: 1 };
 
 function collapseDiffExprInSubgroups(subgroups, fieldsOut, collator) {
   for (const taxGroup of subgroups) {
@@ -287,7 +300,7 @@ function collapseDiffExprInSubgroups(subgroups, fieldsOut, collator) {
         });
         const rep = names[0];
         const repEntry = fieldsOut[rep];
-        const label = (repEntry.label || rep).replace(/\s+\((?:pval|logfc|l2fc)\)/, '');
+        const label = (repEntry.label || rep).replace(/\s+\((?:pval|l2fc)\)/, '');
         fieldsOut[rep] = { ...repEntry, label, linkedFields: names.slice() };
         newFields.push(rep);
       }
@@ -564,14 +577,13 @@ grameneFieldCatalog.selectFieldCatalog = createSelector(
     const present = new Set(fieldNames);
     // Build a synthetic doc from the discovered field names; values carry the
     // right JS type so inferType picks the correct multiValued/type (arrays
-    // for multi-valued fields, scalars otherwise). Derive pval/logfc
-    // companions from every l2fc field.
+    // for multi-valued fields, scalars otherwise). Derive the pval companion
+    // from every l2fc field.
     const doc = {};
     for (const name of present) {
       doc[name] = synthesizedValue(name);
       if (/_l2fc_attr_f$/.test(name)) {
         doc[name.replace('_l2fc_', '_pval_')] = 0;
-        doc[name.replace('_l2fc_', '_logfc_')] = 0;
       }
     }
     const catalog = buildCatalog([doc]);

package/src/bundles/views.js

@@ -149,6 +149,18 @@ const grameneViews = {
       }
       return { ...raw, options };
     }
+  ),
+  // Set of view ids whose `show` is currently 'on'. Used by data bundles to
+  // gate their auto-fetch reactors so we don't pay the cost of loading data
+  // for views the user has turned off.
+  selectGrameneViewsOn: createSelector(
+    'selectGrameneViews',
+    (views) => {
+      const ids = new Set();
+      const opts = (views && views.options) || [];
+      for (const v of opts) if (v && v.show === 'on') ids.add(v.id);
+      return ids;
+    }
   )
 };
 

package/src/components/exporter/expressionResolver.js

@@ -1,5 +1,5 @@
 const EXPR_FIELD_RE = /^(E[-_][A-Za-z0-9_-]+?)_g(\d+)__expr$/;
-const DIFFEXPR_FIELD_RE = /^(E[-_][A-Za-z0-9_-]+?)_g(\d+)_g(\d+)_(pval|logfc|l2fc)_attr_([a-z])$/;
+const DIFFEXPR_FIELD_RE = /^(E[-_][A-Za-z0-9_-]+?)_g(\d+)_g(\d+)_(pval|l2fc)_attr_([a-z])$/;
 
 export const EXPRESSION_EXTRA_COLUMNS = [
   'experiment',
@@ -132,7 +132,7 @@ export function resolveDiffExpressionForDoc(doc, diffExpressionFields, expressio
       byContrast.set(key, entry);
     }
     if (parsed.stat === 'pval') entry.pval = val;
-    else entry.l2fc = val; // l2fc or logfc
+    else entry.l2fc = val;
   }
   const maxPval = cutoffs && cutoffs.diffMaxPval;
   const maxPvalActive = maxPval !== null && maxPval !== undefined && maxPval !== '' && Number.isFinite(+maxPval);

package/src/components/exprViz/ExprTable.js

@@ -1,21 +1,31 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import { AgGridReact } from 'ag-grid-react';
-import { OverlayTrigger, Popover } from 'react-bootstrap';
 import 'ag-grid-community/styles/ag-grid.css';
 import 'ag-grid-community/styles/ag-theme-quartz.css';
 
 const baseColDefs = [
   { field: 'id', headerName: 'Gene ID', pinned: 'left', width: 160, suppressMovable: true },
-  { field: 'name', headerName: 'Name', width: 140, suppressMovable: true }
+  { field: 'name', headerName: 'Name', pinned: 'left', width: 140, suppressMovable: true }
 ];
 
+// Hoisted so the reference is stable across renders. ag-grid otherwise sees a
+// "new" defaultColDef on every parent re-render (e.g. when hovering a row
+// triggers setHoveredId in the parent) and re-applies column state, which
+// snaps any user-resized columns back to their original widths.
+const DEFAULT_COL_DEF = {
+  resizable: true,
+  sortable: true,
+  filter: false,
+  suppressMenu: true
+};
+
 function arraysEqual(a, b) {
   if (a.length !== b.length) return false;
   for (let i = 0; i < a.length; i++) if (a[i] !== b[i]) return false;
   return true;
 }
 
-function buildFieldInfo(fields, studies, expressionSamples) {
+export function buildFieldInfo(fields, studies, expressionSamples) {
   const info = {};
   if (!fields || !studies || !expressionSamples) return info;
   const wanted = new Set(fields);
@@ -49,114 +59,258 @@ function buildFieldInfo(fields, studies, expressionSamples) {
   return info;
 }
 
-// Custom header: re-implements sort click + menu button so ag-grid's column
-// drag/menu/filter still work, with an info icon as the popover trigger.
-const HeaderWithInfo = (props) => {
-  const { displayName, enableSorting, enableMenu, showColumnMenu, progressSort, column, info } = props;
-  const [sort, setSort] = useState(column && column.getSort ? column.getSort() : null);
-  const menuRef = useRef(null);
-
-  useEffect(() => {
-    if (!column || !column.addEventListener) return;
-    const handler = () => setSort(column.getSort());
-    column.addEventListener('sortChanged', handler);
-    return () => column.removeEventListener('sortChanged', handler);
-  }, [column]);
-
-  const onSortClick = (event) => {
-    if (enableSorting && progressSort) progressSort(event.shiftKey);
-  };
-
-  const onMenuClick = (event) => {
-    event.stopPropagation();
-    if (showColumnMenu && menuRef.current) showColumnMenu(menuRef.current);
-  };
-
-  const factorEntries = info ? Object.entries(info.factors || {}) : [];
-  const charEntries = info ? Object.entries(info.characteristics || {}) : [];
-  const popover = info ? (
-    <Popover id={`exprviz-header-${info.studyId}-${info.group}`} className="exprviz-header-popover">
-      <Popover.Header as="h6">{info.studyDescription}</Popover.Header>
-      <Popover.Body>
-        <div><strong>Study:</strong> {info.studyId}</div>
-        <div><strong>Group:</strong> {info.group} ({info.replicates} {info.replicates === 1 ? 'rep' : 'reps'})</div>
-        {factorEntries.length > 0 && (
-          <div className="exprviz-header-section">
-            <strong>Factors</strong>
-            <ul>{factorEntries.map(([t, v]) => <li key={t}><em>{t}:</em> {v}</li>)}</ul>
-          </div>
-        )}
-        {charEntries.length > 0 && (
-          <div className="exprviz-header-section">
-            <strong>Characteristics</strong>
-            <ul>{charEntries.map(([t, v]) => <li key={t}><em>{t}:</em> {v}</li>)}</ul>
-          </div>
-        )}
-      </Popover.Body>
-    </Popover>
-  ) : null;
+// Plain right-aligned label cell for the metadata header rows above the
+// Gene ID / Name columns. Rendered as a React component (instead of
+// relying on ag-grid's default group label) so the alignment is controlled
+// by our own DOM and isn't fighting the quartz theme's CSS.
+const LabelHeaderGroup = (props) => {
+  const { displayName } = props;
+  return <div className="exprviz-label-header">{displayName}</div>;
+};
 
+// Same idea, but for the cells that toggle a section between expanded and
+// collapsed. The caret + label sit at the right edge.
+const ToggleHeaderGroup = (props) => {
+  const { displayName, onToggle, expanded, suffix } = props;
   return (
-    <div className="exprviz-header">
-      <span
-        className="exprviz-header-text"
-        onClick={onSortClick}
-        style={{ cursor: enableSorting ? 'pointer' : 'default' }}
-      >
-        {displayName}
-        {sort === 'asc' && <span className="exprviz-header-sort"> ▲</span>}
-        {sort === 'desc' && <span className="exprviz-header-sort"> ▼</span>}
-      </span>
-      {info && (
-        <OverlayTrigger
-          trigger={['hover', 'focus']}
-          placement="bottom"
-          overlay={popover}
-          delay={{ show: 200, hide: 100 }}
-        >
-          <span
-            className="exprviz-header-info"
-            onClick={e => e.stopPropagation()}
-            onMouseDown={e => e.stopPropagation()}
-            aria-label="More info"
-          >ⓘ</span>
-        </OverlayTrigger>
-      )}
-      {enableMenu && (
-        <span
-          ref={menuRef}
-          className="exprviz-header-menu ag-icon ag-icon-menu"
-          onClick={onMenuClick}
-        />
-      )}
+    <div
+      className="exprviz-toggle-header"
+      onClick={onToggle}
+      role="button"
+      tabIndex={0}
+      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onToggle && onToggle(); } }}
+      title={expanded ? 'Click to collapse' : 'Click to expand'}
+    >
+      <span className="exprviz-toggle-caret">{expanded ? '▼' : '▶'}</span>
+      {' '}{displayName}{suffix ? ` ${suffix}` : ''}
     </div>
   );
 };
 
+function exprValueFormatter(p) {
+  const v = p.value;
+  if (v == null) return '';
+  if (Array.isArray(v)) return v.join(', ');
+  if (typeof v === 'object') return JSON.stringify(v);
+  return String(v);
+}
+
+// Discover every distinct factor and characteristic type across the loaded
+// fields. Each becomes one header row (with adjacent equal-value cells
+// merged). Order is alphabetical for stability across reloads.
+function collectMetadataTypes(fields, fieldInfo) {
+  const factorTypes = new Set();
+  const charTypes = new Set();
+  for (const f of fields || []) {
+    const info = fieldInfo[f];
+    if (!info) continue;
+    Object.keys(info.factors || {}).forEach(t => factorTypes.add(t));
+    Object.keys(info.characteristics || {}).forEach(t => charTypes.add(t));
+  }
+  return {
+    factorTypes: Array.from(factorTypes).sort(),
+    charTypes: Array.from(charTypes).sort()
+  };
+}
+
+// Wrap a leaf column in N nested column groups so it participates at every
+// header row, with a custom label per level. Lets the Gene ID / Name columns
+// carry the row labels ("Study"/"Factor"/"Characteristic" and the type name).
+function wrapLeafWithLabels(leaf, labels) {
+  let wrapped = leaf;
+  for (let i = labels.length - 1; i >= 0; i--) {
+    const label = labels[i];
+    const cls = label.headerClass
+      ? `${label.headerClass} exprviz-hg-labels`
+      : 'exprviz-hg-labels';
+    wrapped = {
+      headerName: label.headerName,
+      headerClass: cls,
+      // Always render through one of our components so the alignment and
+      // spacing are controlled by our own DOM, not ag-grid's defaults.
+      headerGroupComponent: label.headerGroupComponent || LabelHeaderGroup,
+      headerGroupComponentParams: label.headerGroupComponentParams,
+      children: [wrapped]
+    };
+  }
+  return wrapped;
+}
+
+// Build the column tree:
+//   row 1            — Study           |  Title           |  <study description>…
+//   row 2..(2+F-1)   — Factor          |  <factor type>   |  <value or blank>…
+//   row 2+F..end-1   — Characteristic  |  <char type>     |  <value or blank>…
+//   leaf row         — Gene ID         |  Name            |  g3, g4, …
+// Adjacent expression cells sharing the same value at a given level merge
+// (because they're children of one group definition). Blank values for a
+// type that's defined only in other studies render as empty cells, and
+// adjacent blanks under the same parent merge automatically.
+function buildColumnDefs(fields, fieldInfo, expanded, toggles) {
+  if (!fields || fields.length === 0) return baseColDefs;
+  const { factorTypes, charTypes } = collectMetadataTypes(fields, fieldInfo);
+
+  const levels = [{ kind: 'study', getValue: (info) => (info && info.studyDescription) || '' }];
+  if (expanded.factors) {
+    for (const t of factorTypes) {
+      levels.push({
+        kind: 'factor', type: t,
+        getValue: (info) => (info && info.factors && info.factors[t]) || '',
+        headerClass: 'exprviz-hg-factors'
+      });
+    }
+  } else if (factorTypes.length > 0) {
+    // One placeholder level standing in for the collapsed factor rows.
+    levels.push({
+      kind: 'factors-collapsed',
+      getValue: () => '',
+      headerClass: 'exprviz-hg-factors exprviz-hg-collapsed'
+    });
+  }
+  if (expanded.chars) {
+    for (const t of charTypes) {
+      levels.push({
+        kind: 'char', type: t,
+        getValue: (info) => (info && info.characteristics && info.characteristics[t]) || '',
+        headerClass: 'exprviz-hg-chars'
+      });
+    }
+  } else if (charTypes.length > 0) {
+    levels.push({
+      kind: 'chars-collapsed',
+      getValue: () => '',
+      headerClass: 'exprviz-hg-chars exprviz-hg-collapsed'
+    });
+  }
+
+  // Walk fields, opening a new group at level i (and resetting all levels
+  // below) the first time the value at level i differs from the previous
+  // field's. Same value → same parent group → ag-grid merges the cells.
+  const exprTopGroups = [];
+  const currentGroups = new Array(levels.length).fill(null);
+  const currentKeys = new Array(levels.length).fill(undefined);
+
+  for (const f of fields) {
+    const info = fieldInfo[f] || {};
+    let firstChange = levels.length;
+    for (let i = 0; i < levels.length; i++) {
+      const key = levels[i].getValue(info);
+      if (currentGroups[i] === null || currentKeys[i] !== key) {
+        firstChange = i;
+        break;
+      }
+    }
+    for (let i = firstChange; i < levels.length; i++) {
+      const key = levels[i].getValue(info);
+      const group = {
+        headerName: key,
+        headerClass: levels[i].headerClass,
+        children: []
+      };
+      currentGroups[i] = group;
+      currentKeys[i] = key;
+      if (i === 0) exprTopGroups.push(group);
+      else currentGroups[i - 1].children.push(group);
+    }
+
+    const leaf = {
+      field: f,
+      headerName: info.group || f.replace(/__expr$/, ''),
+      width: 160,
+      suppressMovable: false,
+      valueFormatter: exprValueFormatter
+    };
+    currentGroups[levels.length - 1].children.push(leaf);
+  }
+
+  // Labels for the two pinned columns. The leftmost column carries the row
+  // category ("Study" / "Factor" / "Characteristic"); the next column shows
+  // the specific row name (the literal "Title" for the study row, then each
+  // factor/characteristic type name). The first row of each
+  // factor/characteristic section gets a clickable caret that toggles the
+  // section between expanded (one row per type) and collapsed (one
+  // placeholder row).
+  const studyLabels = [{ headerName: 'Study' }];
+  const titleLabels = [{ headerName: 'Title' }];
+
+  if (expanded.factors) {
+    factorTypes.forEach((t, i) => {
+      studyLabels.push({
+        headerName: 'Factor',
+        headerClass: 'exprviz-hg-factors',
+        ...(i === 0 ? {
+          headerGroupComponent: ToggleHeaderGroup,
+          headerGroupComponentParams: { onToggle: toggles.toggleFactors, expanded: true }
+        } : {})
+      });
+      titleLabels.push({ headerName: t, headerClass: 'exprviz-hg-factors' });
+    });
+  } else if (factorTypes.length > 0) {
+    studyLabels.push({
+      headerName: 'Factors',
+      headerClass: 'exprviz-hg-factors exprviz-hg-collapsed',
+      headerGroupComponent: ToggleHeaderGroup,
+      headerGroupComponentParams: {
+        onToggle: toggles.toggleFactors,
+        expanded: false,
+        suffix: `(${factorTypes.length})`
+      }
+    });
+    titleLabels.push({ headerName: '', headerClass: 'exprviz-hg-factors exprviz-hg-collapsed' });
+  }
+
+  if (expanded.chars) {
+    charTypes.forEach((t, i) => {
+      studyLabels.push({
+        headerName: 'Characteristic',
+        headerClass: 'exprviz-hg-chars',
+        ...(i === 0 ? {
+          headerGroupComponent: ToggleHeaderGroup,
+          headerGroupComponentParams: { onToggle: toggles.toggleChars, expanded: true }
+        } : {})
+      });
+      titleLabels.push({ headerName: t, headerClass: 'exprviz-hg-chars' });
+    });
+  } else if (charTypes.length > 0) {
+    studyLabels.push({
+      headerName: 'Characteristics',
+      headerClass: 'exprviz-hg-chars exprviz-hg-collapsed',
+      headerGroupComponent: ToggleHeaderGroup,
+      headerGroupComponentParams: {
+        onToggle: toggles.toggleChars,
+        expanded: false,
+        suffix: `(${charTypes.length})`
+      }
+    });
+    titleLabels.push({ headerName: '', headerClass: 'exprviz-hg-chars exprviz-hg-collapsed' });
+  }
+
+  const idCol = wrapLeafWithLabels(baseColDefs[0], studyLabels);
+  const nameCol = wrapLeafWithLabels(baseColDefs[1], titleLabels);
+
+  return [idCol, nameCol, ...exprTopGroups];
+}
+
 const ExprTable = ({ rows, fields, onReorder, studies, expressionSamples, onHoverRow }) => {
   const fieldInfo = useMemo(
     () => buildFieldInfo(fields, studies, expressionSamples),
     [fields, studies, expressionSamples]
   );
 
-  const columnDefs = useMemo(() => {
-    const expressionCols = (fields || []).map(f => ({
-      field: f,
-      headerName: f.replace(/__expr$/, ''),
-      width: 160,
-      suppressMovable: false,
-      headerComponent: HeaderWithInfo,
-      headerComponentParams: { info: fieldInfo[f] },
-      valueFormatter: p => {
-        const v = p.value;
-        if (v == null) return '';
-        if (Array.isArray(v)) return v.join(', ');
-        if (typeof v === 'object') return JSON.stringify(v);
-        return String(v);
-      }
-    }));
-    return [...baseColDefs, ...expressionCols];
-  }, [fields, fieldInfo]);
+  // Default: factor rows expanded, characteristic rows collapsed (per spec).
+  const [expanded, setExpanded] = useState({ factors: true, chars: false });
+  const toggleFactors = useCallback(
+    () => setExpanded(e => ({ ...e, factors: !e.factors })),
+    []
+  );
+  const toggleChars = useCallback(
+    () => setExpanded(e => ({ ...e, chars: !e.chars })),
+    []
+  );
+
+  const columnDefs = useMemo(
+    () => buildColumnDefs(fields, fieldInfo, expanded, { toggleFactors, toggleChars }),
+    [fields, fieldInfo, expanded, toggleFactors, toggleChars]
+  );
 
   const onColumnMoved = (e) => {
     if (!onReorder || !e.finished) return;
@@ -179,10 +333,12 @@ const ExprTable = ({ rows, fields, onReorder, studies, expressionSamples, onHove
       <AgGridReact
         rowData={rows}
         columnDefs={columnDefs}
-        defaultColDef={{ resizable: true, sortable: true, filter: true }}
+        defaultColDef={DEFAULT_COL_DEF}
         animateRows={false}
         suppressFieldDotNotation={true}
         suppressDragLeaveHidesColumns={true}
+        suppressColumnVirtualisation={true}
+        groupHeaderHeight={24}
         onColumnMoved={onColumnMoved}
         onCellMouseOver={e => onHoverRow && onHoverRow(e.data && e.data.id)}
         onCellMouseOut={() => onHoverRow && onHoverRow(null)}