gramene-search 1.7.21 → 1.7.22

package/package.json

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

package/src/components/TaxonomyModal.js

@@ -42,7 +42,7 @@ function compressChain(node, tax, maps) {
   while (true) {
     const kids = (cur.children || [])
       .map(cid => tax[cid])
-      .filter(c => c && c.leafIds.length > 0);
+      .filter(c => c && c.leafIds && c.leafIds.length > 0);
     if (kids.length !== 1) break;
     if (maps[cur._id]) break;
     cur = kids[0];

package/src/components/exporter/Preview.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react';
+import React, { useEffect, useMemo, useState, useRef } from 'react';
 import { connect } from 'redux-bundler-react';
 import { BsArrowLeftShort, BsArrowRightShort, BsSliders } from 'react-icons/bs';
 import { buildTableData, toJSON } from './formatters';
@@ -149,9 +149,37 @@ const PreviewCmp = props => {
   );
 };
 
+const MIN_COL_WIDTH = 40;
+
 const TSVTable = ({ docs, fields, catalog, resolverCtx, onMoveField }) => {
   const { header, headerKeys, rows } = buildTableData(docs, fields, catalog, resolverCtx);
   const reorderableCount = fields.length;
+  const [colWidths, setColWidths] = useState({});
+  const thRefs = useRef({});
+
+  const startResize = (key) => (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const th = thRefs.current[key];
+    const startWidth = (th && th.getBoundingClientRect().width) || 100;
+    const startX = e.clientX;
+    const onMove = (ev) => {
+      const delta = ev.clientX - startX;
+      const next = Math.max(MIN_COL_WIDTH, startWidth + delta);
+      setColWidths(prev => ({ ...prev, [key]: next }));
+    };
+    const onUp = () => {
+      window.removeEventListener('pointermove', onMove);
+      window.removeEventListener('pointerup', onUp);
+      window.removeEventListener('pointercancel', onUp);
+      document.body.style.userSelect = '';
+    };
+    document.body.style.userSelect = 'none';
+    window.addEventListener('pointermove', onMove);
+    window.addEventListener('pointerup', onUp);
+    window.addEventListener('pointercancel', onUp);
+  };
+
   return (
     <div className="exporter-preview-tsv-scroll">
       <table className="exporter-preview-tsv">
@@ -161,8 +189,10 @@ const TSVTable = ({ docs, fields, catalog, resolverCtx, onMoveField }) => {
               const key = headerKeys[i];
               const fieldIdx = fields.indexOf(key);
               const reorderable = fieldIdx !== -1;
+              const w = colWidths[key];
+              const thStyle = w ? { width: `${w}px`, maxWidth: `${w}px`, minWidth: `${w}px` } : undefined;
               return (
-                <th key={key} title={key}>
+                <th key={key} title={key} style={thStyle} ref={el => { thRefs.current[key] = el; }}>
                   <div className="exporter-preview-th-inner">
                     <button
                       type="button"
@@ -180,6 +210,12 @@ const TSVTable = ({ docs, fields, catalog, resolverCtx, onMoveField }) => {
                       title="Move right"
                     ><BsArrowRightShort/></button>
                   </div>
+                  <span
+                    className="exporter-preview-col-resizer"
+                    onPointerDown={startResize(key)}
+                    onDoubleClick={() => setColWidths(prev => { const n = { ...prev }; delete n[key]; return n; })}
+                    title="Drag to resize · double-click to reset"
+                  />
                 </th>
               );
             })}
@@ -188,9 +224,14 @@ const TSVTable = ({ docs, fields, catalog, resolverCtx, onMoveField }) => {
         <tbody>
           {rows.map((row, r) => (
             <tr key={r}>
-              {row.map((c, i) => (
-                <td key={headerKeys[i]} title={c}>{c}</td>
-              ))}
+              {row.map((c, i) => {
+                const key = headerKeys[i];
+                const w = colWidths[key];
+                const tdStyle = w ? { width: `${w}px`, maxWidth: `${w}px`, minWidth: `${w}px` } : undefined;
+                return (
+                  <td key={key} title={c} style={tdStyle}>{c}</td>
+                );
+              })}
             </tr>
           ))}
           {rows.length === 0 && (

package/src/components/exporter/styles.css

@@ -461,12 +461,45 @@
 .exporter-preview-tsv td {
   padding: 0.2rem 0.5rem;
   border: 1px solid #e5e7ea;
-  max-width: 280px;
+  max-width: 420px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.exporter-preview-tsv th {
+  position: relative;
+}
+
+.exporter-preview-col-resizer {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  user-select: none;
+  z-index: 2;
+}
+
+.exporter-preview-col-resizer::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  width: 1px;
+  background: transparent;
+  transition: background 0.15s;
+}
+
+.exporter-preview-col-resizer:hover::after,
+.exporter-preview-col-resizer:active::after {
+  background: #7a8aa0;
+  width: 2px;
+}
+
 .exporter-preview-tsv th {
   background: #f0f3f6;
   text-align: left;

package/src/fieldCatalog.overlay.json

@@ -168,5 +168,5 @@
     "compara_idx", "compara_idx_multi",
     "_id", "annotations", "bins", "gene_structure",
     "homology", "location", "xrefs",
-    "domain_roots", "familyRoot__ancestors"
+    "domain_roots", "familyRoot__ancestors", "taxonomy__ancestors", "capabilities"
   ]}