gramene-search 2.0.1 → 2.0.4

package/src/components/exprViz/ExprTable.js

@@ -0,0 +1,194 @@
+import React, { useEffect, useMemo, useRef, 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 }
+];
+
+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) {
+  const info = {};
+  if (!fields || !studies || !expressionSamples) return info;
+  const wanted = new Set(fields);
+  for (const study of studies) {
+    const studyId = study._id;
+    const samples = expressionSamples[studyId];
+    if (!samples) continue;
+    const byGroup = {};
+    for (const s of samples) if (!byGroup[s.group]) byGroup[s.group] = s;
+    for (const group of Object.keys(byGroup)) {
+      const fieldName = `${studyId.replace(/-/g, '_')}_${group}__expr`;
+      if (!wanted.has(fieldName)) continue;
+      const sample = byGroup[group];
+      const factors = {};
+      (sample.factor || []).forEach(f => { factors[f.type] = f.label; });
+      const characteristics = {};
+      (sample.characteristic || []).forEach(c => {
+        if (factors[c.type] != null) return;
+        characteristics[c.type] = c.label;
+      });
+      info[fieldName] = {
+        studyId,
+        studyDescription: study.description || studyId,
+        group,
+        replicates: samples.filter(s => s.group === group).length,
+        factors,
+        characteristics
+      };
+    }
+  }
+  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;
+
+  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>
+  );
+};
+
+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]);
+
+  const onColumnMoved = (e) => {
+    if (!onReorder || !e.finished) return;
+    const allCols = e.api.getAllGridColumns ? e.api.getAllGridColumns() : (e.columnApi && e.columnApi.getAllGridColumns && e.columnApi.getAllGridColumns());
+    if (!allCols) return;
+    const next = allCols
+      .map(c => c.getColId())
+      .filter(id => fields.includes(id));
+    if (!arraysEqual(next, fields)) {
+      onReorder(next);
+    }
+  };
+
+  if (!rows || rows.length === 0) {
+    return <div className="exprviz-table-empty"><em>No data loaded.</em></div>;
+  }
+
+  return (
+    <div className="ag-theme-quartz exprviz-aggrid">
+      <AgGridReact
+        rowData={rows}
+        columnDefs={columnDefs}
+        defaultColDef={{ resizable: true, sortable: true, filter: true }}
+        animateRows={false}
+        suppressFieldDotNotation={true}
+        suppressDragLeaveHidesColumns={true}
+        onColumnMoved={onColumnMoved}
+        onCellMouseOver={e => onHoverRow && onHoverRow(e.data && e.data.id)}
+        onCellMouseOut={() => onHoverRow && onHoverRow(null)}
+      />
+    </div>
+  );
+};
+
+export default ExprTable;

package/src/components/exprViz/ExprVizView.js

@@ -0,0 +1,294 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { connect } from 'redux-bundler-react';
+import { Tabs, Tab, Button, ToggleButton, ToggleButtonGroup } from 'react-bootstrap';
+import FieldsModal from './FieldsModal';
+import ExprTable from './ExprTable';
+import ParallelCoordsPlot from './ParallelCoordsPlot';
+import './styles.css';
+
+function speciesTaxonId(tid) {
+  const n = +tid;
+  return n > 1000000 ? Math.floor(n / 1000) : n;
+}
+
+function genomeName(grameneMaps, tid) {
+  if (!grameneMaps) return tid;
+  const direct = grameneMaps[tid];
+  if (direct && direct.display_name) return direct.display_name;
+  const sp = grameneMaps[speciesTaxonId(tid)];
+  if (sp && sp.display_name) return sp.display_name;
+  return tid;
+}
+
+const ExprVizViewCmp = props => {
+  const {
+    exprVizPivot: pivot,
+    exprViz,
+    exprVizActiveTaxon: activeTaxon,
+    grameneMaps,
+    expressionStudies,
+    expressionSamples,
+    doSetExprVizActiveTaxon,
+    doToggleExprVizFieldsModal,
+    doFetchExprVizData
+  } = props;
+
+  const studiesFor = tid => {
+    if (!expressionStudies) return [];
+    return expressionStudies[tid] || expressionStudies[speciesTaxonId(tid)] || [];
+  };
+
+  const taxa = useMemo(() => {
+    const ids = Object.keys(pivot.data || {});
+    if (!grameneMaps) return ids;
+    return ids.sort((a, b) => {
+      const ma = grameneMaps[a] || grameneMaps[speciesTaxonId(a)];
+      const mb = grameneMaps[b] || grameneMaps[speciesTaxonId(b)];
+      return ((ma && ma.left_index) || 0) - ((mb && mb.left_index) || 0);
+    });
+  }, [pivot.data, grameneMaps]);
+
+  useEffect(() => {
+    if (taxa.length === 0) return;
+    if (!activeTaxon || !taxa.includes(String(activeTaxon))) {
+      doSetExprVizActiveTaxon(taxa[0]);
+    }
+  }, [taxa, activeTaxon, doSetExprVizActiveTaxon]);
+
+  if (pivot.status === 'loading') {
+    return <div className="exprviz-view"><em>Loading studies…</em></div>;
+  }
+  if (pivot.status === 'error') {
+    return <div className="exprviz-view"><em>Error: {pivot.error}</em></div>;
+  }
+  if (taxa.length === 0) {
+    return <div className="exprviz-view"><em>No expression studies for current results.</em></div>;
+  }
+
+  return (
+    <div className="exprviz-view">
+      <Tabs
+        activeKey={activeTaxon || taxa[0]}
+        onSelect={k => doSetExprVizActiveTaxon(k)}
+        className="exprviz-tabs"
+      >
+        {taxa.map(tid => {
+          const studies = studiesFor(tid);
+          const taxName = genomeName(grameneMaps, tid);
+          const geneCount = pivot.data[tid] || 0;
+          return (
+            <Tab
+              key={tid}
+              eventKey={tid}
+              title={`${taxName} (${studies.length} studies · ${geneCount} genes)`}
+            >
+              <TaxonPanel
+                taxon={tid}
+                studies={studies}
+                expressionSamples={expressionSamples}
+                tabState={exprViz.byTaxon[tid]}
+                onOpenFields={() => doToggleExprVizFieldsModal(tid, true)}
+                onLoad={() => doFetchExprVizData(tid)}
+                onReorder={(next) => props.doReorderExprVizFields(tid, next)}
+                onAddRangeQuery={props.doAddGrameneRangeQuery}
+              />
+            </Tab>
+          );
+        })}
+      </Tabs>
+      <FieldsModal/>
+    </div>
+  );
+};
+
+function rowMatchesSelections(row, selections) {
+  for (const f of Object.keys(selections)) {
+    const v = row[f];
+    if (v == null || Array.isArray(v)) return false;
+    const n = +v;
+    if (!Number.isFinite(n)) return false;
+    const [lo, hi] = selections[f];
+    if (n < lo || n > hi) return false;
+  }
+  return true;
+}
+
+function fmt(n) {
+  if (!Number.isFinite(n)) return String(n);
+  const a = Math.abs(n);
+  if (a !== 0 && (a < 0.001 || a >= 1e6)) return n.toExponential(3);
+  return Number(n.toFixed(4)).toString();
+}
+
+function tsvCell(v) {
+  if (v == null) return '';
+  if (Array.isArray(v)) return v.join(',');
+  const s = typeof v === 'object' ? JSON.stringify(v) : String(v);
+  return s.replace(/[\t\r\n]+/g, ' ');
+}
+
+function downloadTsv(filename, rows, fields) {
+  const cols = ['id', 'name', ...fields];
+  const headerLabels = ['id', 'name', ...fields.map(f => f.replace(/__expr$/, ''))];
+  const lines = [headerLabels.join('\t')];
+  for (const r of rows) lines.push(cols.map(c => tsvCell(r[c])).join('\t'));
+  const blob = new Blob([lines.join('\n') + '\n'], { type: 'text/tab-separated-values' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = filename;
+  document.body.appendChild(a);
+  a.click();
+  document.body.removeChild(a);
+  URL.revokeObjectURL(url);
+}
+
+const TaxonPanel = ({ taxon, studies, expressionSamples, tabState, onOpenFields, onLoad, onReorder, onAddRangeQuery }) => {
+  const selected = (tabState && tabState.selectedFields) || [];
+  const rows = (tabState && tabState.rows) || [];
+  const fetchInfo = (tabState && tabState.fetch) || { status: 'idle', total: 0 };
+  const [scale, setScale] = useState('linear');
+  const [selections, setSelections] = useState({});
+  const [clearVersion, setClearVersion] = useState(0);
+  const [hoveredId, setHoveredId] = useState(null);
+
+  const hasBrush = Object.keys(selections).length > 0;
+  const filteredRows = useMemo(() => {
+    if (!hasBrush) return rows;
+    return rows.filter(r => rowMatchesSelections(r, selections));
+  }, [rows, selections, hasBrush]);
+
+  // Drop fields with no numeric data in the loaded rows so empty axes/columns
+  // don't clutter the visualization. Selected-but-empty fields stay in the
+  // underlying selection so a future load can repopulate them.
+  const visibleFields = useMemo(() => {
+    if (rows.length === 0 || selected.length === 0) return selected;
+    return selected.filter(f => rows.some(r => {
+      const v = r[f];
+      return v != null && !Array.isArray(v) && Number.isFinite(+v);
+    }));
+  }, [rows, selected]);
+
+  const handleReorder = onReorder
+    ? (newVisibleOrder) => {
+        const visibleSet = new Set(newVisibleOrder);
+        const hidden = selected.filter(f => !visibleSet.has(f));
+        onReorder([...newVisibleOrder, ...hidden]);
+      }
+    : undefined;
+
+  useEffect(() => {
+    if (rows.length === 0 && hasBrush) {
+      setSelections({});
+      setClearVersion(v => v + 1);
+    }
+  }, [rows.length, hasBrush]);
+
+  return (
+    <div className="exprviz-tab-panel">
+      <div className="exprviz-toolbar">
+        <Button size="sm" onClick={onOpenFields}>
+          Select fields ({selected.length} selected, {studies.length} studies)
+        </Button>
+        <Button
+          size="sm"
+          variant="primary"
+          disabled={selected.length === 0 || fetchInfo.status === 'loading'}
+          onClick={onLoad}
+        >
+          {fetchInfo.status === 'loading' ? 'Loading…' : 'Load data'}
+        </Button>
+        <ToggleButtonGroup
+          type="radio"
+          name={`exprviz-scale-${taxon}`}
+          size="sm"
+          value={scale}
+          onChange={setScale}
+        >
+          <ToggleButton id={`exprviz-scale-${taxon}-lin`} value="linear" variant="outline-secondary">Linear</ToggleButton>
+          <ToggleButton id={`exprviz-scale-${taxon}-log`} value="log" variant="outline-secondary">Log</ToggleButton>
+        </ToggleButtonGroup>
+        <Button
+          size="sm"
+          variant="outline-secondary"
+          disabled={!hasBrush}
+          onClick={() => { setClearVersion(v => v + 1); setSelections({}); }}
+        >
+          Clear brushes
+        </Button>
+        <Button
+          size="sm"
+          variant="outline-secondary"
+          disabled={filteredRows.length === 0 || visibleFields.length === 0}
+          onClick={() => downloadTsv(`expression_${taxon}.tsv`, filteredRows, visibleFields)}
+          title="Download the visible rows and columns as tab-delimited text"
+        >
+          Download TSV
+        </Button>
+        <Button
+          size="sm"
+          variant="success"
+          disabled={!hasBrush || !onAddRangeQuery}
+          onClick={() => {
+            const terms = Object.keys(selections).map(field => {
+              const [lo, hi] = selections[field];
+              return {
+                category: 'Expression',
+                name: `${field}: ${fmt(lo)}–${fmt(hi)}`,
+                fq_field: field,
+                fq_value: `[${lo} TO ${hi}]`
+              };
+            });
+            onAddRangeQuery(terms);
+          }}
+          title="Add brush ranges as an AND-conjunction filter on the search"
+        >
+          Apply as filter
+        </Button>
+        <span className="exprviz-status">
+          {hasBrush ? `${filteredRows.length} of ${rows.length}` : rows.length}
+          {fetchInfo.total ? ` / ${fetchInfo.total}` : ''} genes
+          {hasBrush ? ' (brushed)' : ' loaded'}
+        </span>
+      </div>
+      <div className="exprviz-body">
+        <div className="exprviz-plot">
+          <ParallelCoordsPlot
+            rows={rows}
+            fields={visibleFields}
+            scale={scale}
+            onBrushChange={setSelections}
+            onReorder={handleReorder}
+            clearVersion={clearVersion}
+            hoveredId={hoveredId}
+          />
+        </div>
+        <div className="exprviz-table">
+          <ExprTable
+            rows={filteredRows}
+            fields={visibleFields}
+            onReorder={handleReorder}
+            studies={studies}
+            expressionSamples={expressionSamples}
+            onHoverRow={setHoveredId}
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default connect(
+  'selectExprViz',
+  'selectExprVizPivot',
+  'selectExprVizActiveTaxon',
+  'selectGrameneMaps',
+  'selectExpressionStudies',
+  'selectExpressionSamples',
+  'doSetExprVizActiveTaxon',
+  'doToggleExprVizFieldsModal',
+  'doFetchExprVizData',
+  'doReorderExprVizFields',
+  'doAddGrameneRangeQuery',
+  ExprVizViewCmp
+);