gramene-search 2.0.4 → 2.0.6

package/src/components/exprViz/ExprVizView.js

@@ -1,8 +1,8 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useRef, 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 ExprTable, { buildFieldInfo } from './ExprTable';
 import ParallelCoordsPlot from './ParallelCoordsPlot';
 import './styles.css';
 
@@ -101,6 +101,72 @@ const ExprVizViewCmp = props => {
   );
 };
 
+// Compact axis labels for the parallel-coords plot. The raw Solr field name
+// (e.g. "E_CURD_148_g5__expr") is uninformative; we prefer the assay's
+// factor labels, falling back to "organism part" then to the group id.
+// `full` is exposed via an SVG <title> so the user can hover to see study,
+// group, and every factor/characteristic.
+const AXIS_LABEL_MAX = 22;
+
+function truncateLabel(s, n) {
+  if (!s) return '';
+  return s.length > n ? s.slice(0, n - 1) + '…' : s;
+}
+
+function compactAssayLabel(assay, group) {
+  if (!assay) return group || '';
+  const factorVals = (assay.factor || []).map(f => f && f.label).filter(Boolean);
+  if (factorVals.length) return factorVals.join('; ');
+  const chars = assay.characteristic || [];
+  const organ = chars.find(c => c && c.type === 'organism part');
+  if (organ && organ.label) return organ.label;
+  const firstChar = chars.find(c => c && c.label);
+  if (firstChar) return firstChar.label;
+  return group || '';
+}
+
+function assayPairs(list) {
+  return (list || [])
+    .filter(x => x && x.label)
+    .map(x => ({ name: x.type || '', value: x.label }));
+}
+
+function buildAxisLabels(fields, studies, expressionSamples) {
+  const labels = {};
+  if (!fields) return labels;
+  const studyById = {};
+  (studies || []).forEach(s => { if (s && s._id) studyById[s._id] = s; });
+  const findAssay = (studyId, group) => {
+    const arr = expressionSamples && expressionSamples[studyId];
+    return arr ? arr.find(a => a.group === group) : null;
+  };
+  for (const f of fields) {
+    const m = f.match(/^(.+?)_g(\d+)__expr$/);
+    if (!m) {
+      labels[f] = {
+        short: truncateLabel(f.replace(/__expr$/, ''), AXIS_LABEL_MAX),
+        structured: { studyTitle: f, group: '', factors: [], characteristics: [] }
+      };
+      continue;
+    }
+    const expId = m[1].replace(/_/g, '-');
+    const group = 'g' + m[2];
+    const assay = findAssay(expId, group);
+    const study = studyById[expId];
+    const studyName = (study && study.description) || expId;
+    labels[f] = {
+      short: truncateLabel(compactAssayLabel(assay, group), AXIS_LABEL_MAX),
+      structured: {
+        studyTitle: studyName,
+        group,
+        factors: assayPairs(assay && assay.factor),
+        characteristics: assayPairs(assay && assay.characteristic)
+      }
+    };
+  }
+  return labels;
+}
+
 function rowMatchesSelections(row, selections) {
   for (const f of Object.keys(selections)) {
     const v = row[f];
@@ -127,11 +193,49 @@ function tsvCell(v) {
   return s.replace(/[\t\r\n]+/g, ' ');
 }
 
-function downloadTsv(filename, rows, fields) {
+// Mirror the on-screen table header in the TSV: one row per metadata level
+// the table is showing (Study, then one row per distinct factor type, then
+// one row per distinct characteristic type), followed by the leaf header
+// (Gene ID / Name / per-sample group). The first two columns are repurposed
+// to carry the row category and the row's specific name, matching the
+// pinned-column labels in ExprTable.
+function downloadTsv(filename, rows, fields, studies, expressionSamples) {
   const cols = ['id', 'name', ...fields];
-  const headerLabels = ['id', 'name', ...fields.map(f => f.replace(/__expr$/, ''))];
-  const lines = [headerLabels.join('\t')];
+  const fieldInfo = buildFieldInfo(fields, studies, expressionSamples);
+
+  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));
+  }
+  const factorTypeList = Array.from(factorTypes).sort();
+  const charTypeList = Array.from(charTypes).sort();
+
+  const metaRow = (cat, label, getValue) => {
+    const cells = [cat, label];
+    for (const f of fields) cells.push(tsvCell(getValue(fieldInfo[f] || {})));
+    return cells.join('\t');
+  };
+
+  const lines = [];
+  lines.push(metaRow('Study', 'Title', info => info.studyDescription || ''));
+  for (const t of factorTypeList) {
+    lines.push(metaRow('Factor', t, info => (info.factors && info.factors[t]) || ''));
+  }
+  for (const t of charTypeList) {
+    lines.push(metaRow('Characteristic', t, info => (info.characteristics && info.characteristics[t]) || ''));
+  }
+  // Leaf header — column ids for the data rows.
+  lines.push(['Gene ID', 'Name', ...fields.map(f => {
+    const info = fieldInfo[f];
+    return (info && info.group) || f.replace(/__expr$/, '');
+  })].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');
@@ -151,6 +255,32 @@ const TaxonPanel = ({ taxon, studies, expressionSamples, tabState, onOpenFields,
   const [selections, setSelections] = useState({});
   const [clearVersion, setClearVersion] = useState(0);
   const [hoveredId, setHoveredId] = useState(null);
+  const [plotHeight, setPlotHeight] = useState(320);
+  const resizeStateRef = useRef(null);
+
+  // Drag the horizontal separator between the plot and the table to retune
+  // their relative sizes. Bounded so neither pane disappears entirely.
+  const startResize = (e) => {
+    e.preventDefault();
+    resizeStateRef.current = { startY: e.clientY, startHeight: plotHeight };
+    const onMove = (ev) => {
+      const s = resizeStateRef.current;
+      if (!s) return;
+      const next = Math.max(120, Math.min(1200, s.startHeight + (ev.clientY - s.startY)));
+      setPlotHeight(next);
+    };
+    const onUp = () => {
+      resizeStateRef.current = null;
+      document.removeEventListener('mousemove', onMove);
+      document.removeEventListener('mouseup', onUp);
+      document.body.style.cursor = '';
+      document.body.style.userSelect = '';
+    };
+    document.body.style.cursor = 'row-resize';
+    document.body.style.userSelect = 'none';
+    document.addEventListener('mousemove', onMove);
+    document.addEventListener('mouseup', onUp);
+  };
 
   const hasBrush = Object.keys(selections).length > 0;
   const filteredRows = useMemo(() => {
@@ -177,6 +307,11 @@ const TaxonPanel = ({ taxon, studies, expressionSamples, tabState, onOpenFields,
       }
     : undefined;
 
+  const axisLabels = useMemo(
+    () => buildAxisLabels(visibleFields, studies, expressionSamples),
+    [visibleFields, studies, expressionSamples]
+  );
+
   useEffect(() => {
     if (rows.length === 0 && hasBrush) {
       setSelections({});
@@ -220,7 +355,7 @@ const TaxonPanel = ({ taxon, studies, expressionSamples, tabState, onOpenFields,
           size="sm"
           variant="outline-secondary"
           disabled={filteredRows.length === 0 || visibleFields.length === 0}
-          onClick={() => downloadTsv(`expression_${taxon}.tsv`, filteredRows, visibleFields)}
+          onClick={() => downloadTsv(`expression_${taxon}.tsv`, filteredRows, visibleFields, studies, expressionSamples)}
           title="Download the visible rows and columns as tab-delimited text"
         >
           Download TSV
@@ -252,7 +387,7 @@ const TaxonPanel = ({ taxon, studies, expressionSamples, tabState, onOpenFields,
         </span>
       </div>
       <div className="exprviz-body">
-        <div className="exprviz-plot">
+        <div className="exprviz-plot" style={{ height: plotHeight }}>
           <ParallelCoordsPlot
             rows={rows}
             fields={visibleFields}
@@ -261,8 +396,17 @@ const TaxonPanel = ({ taxon, studies, expressionSamples, tabState, onOpenFields,
             onReorder={handleReorder}
             clearVersion={clearVersion}
             hoveredId={hoveredId}
+            axisLabels={axisLabels}
           />
         </div>
+        <div
+          className="exprviz-resizer"
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label="Resize plot"
+          onMouseDown={startResize}
+          title="Drag to resize"
+        />
         <div className="exprviz-table">
           <ExprTable
             rows={filteredRows}

package/src/components/exprViz/FieldsModal.js

@@ -202,6 +202,22 @@ const FieldsModalCmp = props => {
     return m;
   }, [records, selections]);
 
+  // Distinct values per property type across the unfiltered candidate set.
+  // A type with a single value across every record can't discriminate (e.g.
+  // "Organism" when every field belongs to the same species), so we hide it
+  // from the property tree.
+  const totalValueCountByKey = useMemo(() => {
+    const m = {};
+    for (const r of records) {
+      for (const [k, v] of Object.entries(r.props)) {
+        if (v == null) continue;
+        if (!m[k]) m[k] = new Set();
+        m[k].add(v);
+      }
+    }
+    return m;
+  }, [records]);
+
   // Reset state when modal (re)opens for a taxon.
   useEffect(() => {
     if (open && taxon) {
@@ -314,6 +330,13 @@ const FieldsModalCmp = props => {
             />
             {propTree.map(grp => {
               const typeRows = grp.types.map(t => {
+                // Hide property types that can't discriminate among the
+                // candidates: zero values, or a single value shared by every
+                // record. The selection-aware count (valueSetByKey) is what
+                // we display; the unfiltered count gates visibility so a type
+                // doesn't pop in/out as the user clicks values.
+                const totalDistinct = (totalValueCountByKey[t.key] && totalValueCountByKey[t.key].size) || 0;
+                if (totalDistinct < 2) return null;
                 const numValues = (valueSetByKey[t.key] && valueSetByKey[t.key].size) || 0;
                 if (numValues === 0) return null;
                 const typeLabelMatches = isSearching && t.label.toLowerCase().includes(searchLc);
@@ -360,25 +383,29 @@ const FieldsModalCmp = props => {
             })}
           </div>
           <div className="exprviz-fields-preview">
-            <table className="exprviz-fields-table">
-              <thead>
-                <tr>
-                  <th>Field</th>
-                  {orderedSelectedKeys.map(k => <th key={k}>{labelForKey(k, propTree)}</th>)}
-                </tr>
-              </thead>
-              <tbody>
-                {matchingFields.map(f => (
-                  <tr key={f.fieldName}>
-                    <td title={f.fieldName}>{f.fieldName.replace(/__expr$/, '')}</td>
-                    {orderedSelectedKeys.map(k => <td key={k}>{f.props[k] || ''}</td>)}
+            {orderedSelectedKeys.length === 0 ? (
+              <div className="exprviz-fields-placeholder">
+                <em>Select a property type to preview the property values for each matching field.</em>
+              </div>
+            ) : (
+              <table className="exprviz-fields-table">
+                <thead>
+                  <tr>
+                    {orderedSelectedKeys.map(k => <th key={k}>{labelForKey(k, propTree)}</th>)}
                   </tr>
-                ))}
-                {matchingFields.length === 0 && (
-                  <tr><td colSpan={1 + orderedSelectedKeys.length}><em>No matching fields</em></td></tr>
-                )}
-              </tbody>
-            </table>
+                </thead>
+                <tbody>
+                  {matchingFields.map(f => (
+                    <tr key={f.fieldName} title={f.fieldName}>
+                      {orderedSelectedKeys.map(k => <td key={k}>{f.props[k] || ''}</td>)}
+                    </tr>
+                  ))}
+                  {matchingFields.length === 0 && (
+                    <tr><td colSpan={orderedSelectedKeys.length}><em>No matching fields</em></td></tr>
+                  )}
+                </tbody>
+              </table>
+            )}
           </div>
         </div>
       </Modal.Body>

package/src/components/exprViz/ParallelCoordsPlot.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import * as d3 from 'd3';
 
 // Parallel-coordinates plot with per-axis brushing and drag-to-reorder axes.
@@ -62,13 +62,38 @@ const ParallelCoordsPlot = ({
   onBrushChange,
   onReorder,
   clearVersion = 0,
-  hoveredId = null
+  hoveredId = null,
+  axisLabels = null
 }) => {
   const svgRef = useRef(null);
   const containerRef = useRef(null);
   // selections in data domain: { [field]: [lo, hi] }
   const selectionsRef = useRef({});
   const lastClearRef = useRef(0);
+  // Track container size so the d3 render reruns when the user drags the
+  // pane resizer (or when the window is resized). The values themselves
+  // aren't read inside the effect — the effect always reads clientWidth/
+  // clientHeight — but listing them in the deps array is what triggers it.
+  const [size, setSize] = useState({ w: 0, h: 0 });
+  // Custom HTML tooltip for axis labels — gives us bold labels and structured
+  // sections, which the native SVG <title> can't do.
+  const [tooltip, setTooltip] = useState(null);
+
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === 'undefined') return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        setSize((prev) => {
+          if (Math.abs(prev.w - width) < 1 && Math.abs(prev.h - height) < 1) return prev;
+          return { w: width, h: height };
+        });
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
 
   useEffect(() => {
     if (clearVersion !== lastClearRef.current) {
@@ -185,7 +210,22 @@ const ParallelCoordsPlot = ({
       }
       ax.call(axisGen);
 
-      const label = ax.append('text')
+      // Compact axis label. Hovering the label or its drag-handle rect shows
+      // a custom HTML tooltip (rendered outside the SVG by React) that can
+      // include bold labels and section headings.
+      const labelInfo = (axisLabels && axisLabels[f])
+        || { short: f.replace(/__expr$/, ''), structured: { studyTitle: f, group: '', factors: [], characteristics: [] } };
+      const showTip = (event) => setTooltip({
+        x: event.clientX,
+        y: event.clientY,
+        info: labelInfo.structured
+      });
+      const moveTip = (event) => setTooltip(t =>
+        t ? { ...t, x: event.clientX, y: event.clientY } : null
+      );
+      const hideTip = () => setTooltip(null);
+
+      ax.append('text')
         .attr('class', 'exprviz-pc-axis-label')
         .attr('x', 4).attr('y', -4)
         .attr('text-anchor', 'start')
@@ -193,7 +233,10 @@ const ParallelCoordsPlot = ({
         .attr('fill', '#333')
         .style('font-size', '10px')
         .style('cursor', 'grab')
-        .text(f.replace(/__expr$/, ''));
+        .text(labelInfo.short)
+        .on('mouseenter', showTip)
+        .on('mousemove', moveTip)
+        .on('mouseleave', hideTip);
 
       // hit area for grabbing — sits along the rotated label
       ax.append('rect')
@@ -202,7 +245,10 @@ const ParallelCoordsPlot = ({
         .attr('width', 140).attr('height', 14)
         .attr('transform', `rotate(${LABEL_ROTATION}, 0, -4)`)
         .attr('fill', 'transparent')
-        .style('cursor', 'grab');
+        .style('cursor', 'grab')
+        .on('mouseenter', showTip)
+        .on('mousemove', moveTip)
+        .on('mouseleave', hideTip);
 
       const brush = d3.brushY()
         .extent([[-BRUSH_WIDTH / 2, 0], [BRUSH_WIDTH / 2, innerH]])
@@ -284,7 +330,7 @@ const ParallelCoordsPlot = ({
       });
 
     axisG.selectAll('.exprviz-pc-axis-label, .exprviz-pc-axis-handle').call(drag);
-  }, [rows, fields, scale, onBrushChange, onReorder, clearVersion]);
+  }, [rows, fields, scale, onBrushChange, onReorder, clearVersion, axisLabels, size.w, size.h]);
 
   // Highlight the polyline matching the hovered row id without rebuilding the
   // SVG. Raises the highlighted path so it draws above its neighbors.
@@ -307,6 +353,53 @@ const ParallelCoordsPlot = ({
   return (
     <div ref={containerRef} className="exprviz-pc-container">
       <svg ref={svgRef} width="100%" height="100%" preserveAspectRatio="none"/>
+      {tooltip && <AxisTooltip x={tooltip.x} y={tooltip.y} info={tooltip.info}/>}
+    </div>
+  );
+};
+
+// Position-fixed so it can escape the plot pane's clipping. Offset slightly
+// from the cursor and clamped to the viewport so it never spills off-screen.
+const AxisTooltip = ({ x, y, info }) => {
+  const ref = useRef(null);
+  const [pos, setPos] = useState({ left: x + 12, top: y + 12 });
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const w = el.offsetWidth;
+    const h = el.offsetHeight;
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    let left = x + 12;
+    let top = y + 12;
+    if (left + w > vw - 4) left = Math.max(4, x - 12 - w);
+    if (top + h > vh - 4) top = Math.max(4, y - 12 - h);
+    setPos({ left, top });
+  }, [x, y, info]);
+  const { studyTitle, group, factors, characteristics } = info;
+  return (
+    <div ref={ref} className="exprviz-pc-tooltip" style={pos}>
+      <div><span className="exprviz-pc-tip-key">Study:</span> {studyTitle}{group ? ` (${group})` : ''}</div>
+      {factors.length > 0 && (
+        <>
+          <div className="exprviz-pc-tip-section">Factors</div>
+          {factors.map((p, i) => (
+            <div key={`f-${i}`} className="exprviz-pc-tip-row">
+              <span className="exprviz-pc-tip-key">{p.name}:</span> {p.value}
+            </div>
+          ))}
+        </>
+      )}
+      {characteristics.length > 0 && (
+        <>
+          <div className="exprviz-pc-tip-section">Characteristics</div>
+          {characteristics.map((p, i) => (
+            <div key={`c-${i}`} className="exprviz-pc-tip-row">
+              <span className="exprviz-pc-tip-key">{p.name}:</span> {p.value}
+            </div>
+          ))}
+        </>
+      )}
     </div>
   );
 };