gramene-search 2.13.4 → 2.14.0

package/dist/index.js

@@ -4862,15 +4862,13 @@ const $12feb7ca48271e17$var$FETCH_FIELDS = [
         ...(0, $4b8473139e48e77e$export$705aff68da3ddba0)
     ])
 ];
+// Default columns, in display order. The two stress fields are adjacent so the
+// view can merge them into a single "Activated/Repressed by condition" column.
 const $12feb7ca48271e17$export$e4bc2ac09afbc604 = [
     'id',
-    'name',
-    'system_name',
-    'biotype',
-    'expr_class__attr_ss',
-    'expr_organ_level__attr_ss',
-    'expr_tau__attr_f',
     'expr_max_tpm__attr_f',
+    'expr_organ_level__attr_ss',
+    'expr_class__attr_ss',
     'expr_activated_by__attr_ss',
     'expr_repressed_by__attr_ss'
 ];
@@ -16947,9 +16945,12 @@ var $1fd2507769d5bd00$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.conn
 
 
 const { MAX_GENES: $8f8e530286a37ce9$var$MAX_GENES } = (0, $12feb7ca48271e17$export$d00a9fd01497b827);
-// expr_organ_level expands into one column per organ (the heatmap block); every
-// other offered field maps to exactly one column.
+// expr_organ_level expands into one column per organ (the heatmap block).
 const $8f8e530286a37ce9$var$ORGAN_FIELD = 'expr_organ_level__attr_ss';
+// The two stress fields render as a single merged column.
+const $8f8e530286a37ce9$var$STRESS_UP = 'expr_activated_by__attr_ss';
+const $8f8e530286a37ce9$var$STRESS_DOWN = 'expr_repressed_by__attr_ss';
+const $8f8e530286a37ce9$var$STRESS_COL = 'stress';
 const $8f8e530286a37ce9$var$DEFAULT_COL_DEF = {
     resizable: true,
     sortable: true,
@@ -16971,40 +16972,49 @@ const $8f8e530286a37ce9$var$WIDTHS = {
     expr_tau__attr_f: 80,
     expr_max_tpm__attr_f: 100,
     expr_n_organs_detected__attr_i: 90,
-    expr_activated_by__attr_ss: 190,
-    expr_repressed_by__attr_ss: 190,
     expr_specific_to__attr_ss: 150,
     expr_enhanced_in__attr_ss: 150,
     expr_high_in__attr_ss: 150
 };
 const $8f8e530286a37ce9$var$joinValues = (p)=>Array.isArray(p.value) ? p.value.map((v)=>String(v).replace(/_/g, ' ')).join(', ') : p.value ?? '';
-// ↑activated / ↓repressed condition chips.
-const $8f8e530286a37ce9$var$chipRenderer = (dir)=>({ value: value })=>{
-        const list = Array.isArray(value) ? value : value ? [
-            value
-        ] : [];
-        if (!list.length) return null;
-        return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
-            children: list.map((c, i)=>/*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
-                    style: {
-                        fontSize: 10,
-                        lineHeight: '16px',
-                        padding: '0 4px',
-                        borderRadius: 2,
-                        marginRight: 3,
-                        whiteSpace: 'nowrap',
-                        background: (0, $4b8473139e48e77e$export$c6dbe9be8c8b382e)[dir].bg,
-                        color: (0, $4b8473139e48e77e$export$c6dbe9be8c8b382e)[dir].fg
-                    },
-                    children: (dir === 'up' ? "\u2191" : "\u2193") + c
-                }, i))
+const $8f8e530286a37ce9$var$StressChip = ({ c: c, dir: dir })=>/*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
+        style: {
+            fontSize: 10,
+            lineHeight: '16px',
+            padding: '0 4px',
+            borderRadius: 2,
+            marginRight: 3,
+            whiteSpace: 'nowrap',
+            background: (0, $4b8473139e48e77e$export$c6dbe9be8c8b382e)[dir].bg,
+            color: (0, $4b8473139e48e77e$export$c6dbe9be8c8b382e)[dir].fg
+        },
+        children: (dir === 'up' ? "\u2191" : "\u2193") + c
+    });
+// Merged ↑activated / ↓repressed renderer; the two directions are shown per the
+// picker (a column exists if either field is selected).
+const $8f8e530286a37ce9$var$stressRenderer = (showUp, showDown)=>({ data: data })=>{
+        const up = showUp && Array.isArray(data && data[$8f8e530286a37ce9$var$STRESS_UP]) ? data[$8f8e530286a37ce9$var$STRESS_UP] : [];
+        const down = showDown && Array.isArray(data && data[$8f8e530286a37ce9$var$STRESS_DOWN]) ? data[$8f8e530286a37ce9$var$STRESS_DOWN] : [];
+        if (!up.length && !down.length) return null;
+        return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("span", {
+            children: [
+                up.map((c, i)=>/*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)($8f8e530286a37ce9$var$StressChip, {
+                        c: c,
+                        dir: "up"
+                    }, `u${i}`)),
+                down.map((c, i)=>/*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)($8f8e530286a37ce9$var$StressChip, {
+                        c: c,
+                        dir: "down"
+                    }, `d${i}`))
+            ]
         });
     };
 // Vertical header for the narrow organ columns, so full tissue names stay
 // legible without widening the heatmap. Clicking still sorts the column, and a
 // rotated sort arrow is drawn before the label (the default ag-grid sort UI is
 // replaced by this custom header, so we render our own indicator). The arrow
-// sits in the rotated span, so ▲ (asc) renders pointing left and ▼ (desc) right.
+// sits in the -90°-rotated span, so a → (asc) renders pointing up and a
+// ← (desc) pointing down.
 const $8f8e530286a37ce9$var$RotatedHeader = (props)=>{
     const [sort, setSort] = (0, $gXNCa$react.useState)(props.column.getSort ? props.column.getSort() : null);
     (0, $gXNCa$react.useEffect)(()=>{
@@ -17017,7 +17027,7 @@ const $8f8e530286a37ce9$var$RotatedHeader = (props)=>{
         props.column
     ]);
     const onClick = (e)=>props.progressSort && props.progressSort(e.shiftKey);
-    const arrow = sort === 'asc' ? "\u25B2\u2009" : sort === 'desc' ? "\u25BC\u2009" : '';
+    const arrow = sort === 'asc' ? "\u2192 " : sort === 'desc' ? "\u2190 " : '';
     return /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("div", {
         className: "attrtable-rot-header",
         title: props.displayName,
@@ -17031,9 +17041,11 @@ const $8f8e530286a37ce9$var$RotatedHeader = (props)=>{
     });
 };
 const $8f8e530286a37ce9$var$AttrTableViewCmp = (props)=>{
-    const { attrTable: attrTable, fieldCatalog: fieldCatalog, fieldCatalogByName: fieldCatalogByName, doToggleAttrTableField: doToggleAttrTableField, doBulkSetAttrTableFields: doBulkSetAttrTableFields, doResetAttrTableFields: doResetAttrTableFields } = props;
+    const { attrTable: attrTable, fieldCatalog: fieldCatalog, fieldCatalogByName: fieldCatalogByName, doToggleAttrTableField: doToggleAttrTableField, doBulkSetAttrTableFields: doBulkSetAttrTableFields, doResetAttrTableFields: doResetAttrTableFields, doAcceptGrameneSuggestion: doAcceptGrameneSuggestion } = props;
     const [showColumns, setShowColumns] = (0, $gXNCa$react.useState)(false);
     const [fieldQuery, setFieldQuery] = (0, $gXNCa$react.useState)('');
+    const [popover, setPopover] = (0, $gXNCa$react.useState)(null);
+    const popRef = (0, $gXNCa$react.useRef)(null);
     const { docs: docs, total: total, truncated: truncated, status: status, error: error, visibleFields: visibleFields } = attrTable;
     const visibleSet = (0, $gXNCa$react.useMemo)(()=>new Set(visibleFields), [
         visibleFields
@@ -17068,46 +17080,33 @@ const $8f8e530286a37ce9$var$AttrTableViewCmp = (props)=>{
     }, [
         docs
     ]);
-    // Only the Core identifiers + Expression attributes groups are offered, in
-    // catalog order. Falls back to the built-in lists until the catalog loads.
-    const orderedFields = (0, $gXNCa$react.useMemo)(()=>{
-        const groups = fieldCatalog && fieldCatalog.groups || [];
-        const out = [];
-        (0, $12feb7ca48271e17$export$53e90de8d659db95).forEach((gid)=>{
-            const g = groups.find((x)=>x.id === gid);
-            if (g && g.fields) out.push(...g.fields);
-        });
-        return out.length ? out : [
-            ...(0, $12feb7ca48271e17$export$9d77d82cc773e55e),
-            ...(0, $4b8473139e48e77e$export$705aff68da3ddba0)
-        ];
-    }, [
-        fieldCatalog
-    ]);
+    // Only the Core identifiers + Expression attributes groups are offered.
     const pickerCatalog = (0, $gXNCa$react.useMemo)(()=>{
         if (!fieldCatalog || !fieldCatalog.groups) return null;
         return {
             ...fieldCatalog,
-            groups: fieldCatalog.groups.filter((g)=>(0, $12feb7ca48271e17$export$53e90de8d659db95).includes(g.id))
+            groups: fieldCatalog.groups.filter((g)=>[
+                    'core',
+                    'exprattrs'
+                ].includes(g.id))
         };
     }, [
         fieldCatalog
     ]);
+    const labelOf = (f)=>fieldCatalogByName && fieldCatalogByName[f] && fieldCatalogByName[f].label || f;
+    // Columns follow the selected-field order (so the default order is honoured),
+    // expanding organ_level into the heatmap block and merging the two stress
+    // fields into one column.
     const columnDefs = (0, $gXNCa$react.useMemo)(()=>{
-        const labelOf = (f)=>fieldCatalogByName && fieldCatalogByName[f] && fieldCatalogByName[f].label || f;
         const cols = [];
-        orderedFields.forEach((f)=>{
-            if (!visibleSet.has(f)) return;
-            const headerName = labelOf(f);
-            const width = $8f8e530286a37ce9$var$WIDTHS[f] || 150;
+        let stressDone = false;
+        visibleFields.forEach((f)=>{
             if (f === $8f8e530286a37ce9$var$ORGAN_FIELD) {
                 organs.forEach((o, i)=>{
-                    // The last organ keeps a right border (heatmap's outer edge); the rest
-                    // drop it so the heatmap reads as one continuous block.
                     const last = i === organs.length - 1 ? ' attrtable-organ-last' : '';
                     cols.push({
-                        // No ':' in colId — ag-grid uses colId in internal CSS selectors, where
-                        // a colon is a metacharacter and silently breaks the column.
+                        // No ':' in colId — ag-grid uses colId in internal CSS selectors,
+                        // where a colon is a metacharacter and silently breaks the column.
                         colId: `organ_${o}`,
                         headerName: (0, $4b8473139e48e77e$export$50c1f966fd3af83e)(o),
                         headerComponent: $8f8e530286a37ce9$var$RotatedHeader,
@@ -17137,12 +17136,25 @@ const $8f8e530286a37ce9$var$AttrTableViewCmp = (props)=>{
                 });
                 return;
             }
+            if (f === $8f8e530286a37ce9$var$STRESS_UP || f === $8f8e530286a37ce9$var$STRESS_DOWN) {
+                if (stressDone) return;
+                stressDone = true;
+                cols.push({
+                    colId: $8f8e530286a37ce9$var$STRESS_COL,
+                    headerName: 'Activated/Repressed by condition',
+                    width: 240,
+                    sortable: false,
+                    valueGetter: ()=>'',
+                    cellRenderer: $8f8e530286a37ce9$var$stressRenderer(visibleSet.has($8f8e530286a37ce9$var$STRESS_UP), visibleSet.has($8f8e530286a37ce9$var$STRESS_DOWN))
+                });
+                return;
+            }
             if (f === 'expr_max_tpm__attr_f') {
                 cols.push({
                     colId: f,
                     field: f,
-                    headerName: headerName,
-                    width: width,
+                    headerName: labelOf(f),
+                    width: $8f8e530286a37ce9$var$WIDTHS[f] || 100,
                     type: 'numericColumn',
                     valueFormatter: (p)=>(0, $4b8473139e48e77e$export$8eaa32ef86afdd9c)(p.value),
                     cellStyle: (p)=>({
@@ -17155,43 +17167,153 @@ const $8f8e530286a37ce9$var$AttrTableViewCmp = (props)=>{
                 cols.push({
                     colId: f,
                     field: f,
-                    headerName: headerName,
-                    width: width,
+                    headerName: labelOf(f),
+                    width: $8f8e530286a37ce9$var$WIDTHS[f] || 80,
                     type: 'numericColumn',
                     valueFormatter: (p)=>Number.isFinite(p.value) ? p.value.toFixed(3) : ''
                 });
                 return;
             }
-            if (f === 'expr_activated_by__attr_ss' || f === 'expr_repressed_by__attr_ss') {
-                cols.push({
-                    colId: f,
-                    field: f,
-                    headerName: headerName,
-                    width: width,
-                    sortable: false,
-                    valueFormatter: ()=>'',
-                    cellRenderer: $8f8e530286a37ce9$var$chipRenderer(f === 'expr_activated_by__attr_ss' ? 'up' : 'down')
-                });
-                return;
-            }
             cols.push({
                 colId: f,
                 field: f,
-                headerName: headerName,
+                headerName: labelOf(f),
                 headerTooltip: f,
-                width: width,
+                width: $8f8e530286a37ce9$var$WIDTHS[f] || 150,
                 pinned: f === 'id' || f === 'name' ? 'left' : undefined,
                 valueFormatter: $8f8e530286a37ce9$var$joinValues
             });
         });
         return cols;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
-        orderedFields,
+        visibleFields,
         visibleSet,
         organs,
         tpmRange,
         fieldCatalogByName
     ]);
+    // Build the click-popover for a cell: a title (the column meaning) and one
+    // filterable item per value. Each item carries the fq_field / fq_value the
+    // "add filter" button hands to doAcceptGrameneSuggestion.
+    const buildCellPopover = (colId, data)=>{
+        if (!data) return null;
+        const mk = (text, fqField, fqValue, category, name)=>({
+                text: text,
+                fqField: fqField,
+                fqValue: fqValue,
+                category: category,
+                name: name || text
+            });
+        if (colId === 'id') return {
+            title: 'Gene ID',
+            items: [
+                mk(data.id, 'id', data.id, 'Gene', data.id)
+            ]
+        };
+        if (colId === $8f8e530286a37ce9$var$STRESS_COL) {
+            const items = [];
+            (data[$8f8e530286a37ce9$var$STRESS_UP] || []).forEach((c)=>items.push(mk("\u2191 " + c, $8f8e530286a37ce9$var$STRESS_UP, c, 'Activated by', 'activated by ' + c)));
+            (data[$8f8e530286a37ce9$var$STRESS_DOWN] || []).forEach((c)=>items.push(mk("\u2193 " + c, $8f8e530286a37ce9$var$STRESS_DOWN, c, 'Repressed by', 'repressed by ' + c)));
+            return {
+                title: 'Activated/Repressed by condition',
+                items: items
+            };
+        }
+        if (colId.startsWith('organ_')) {
+            const organ = colId.slice(6);
+            const lvl = data._organ && data._organ[organ];
+            if (!lvl) return {
+                title: 'Expression level by organ',
+                items: []
+            };
+            const label = `${(0, $4b8473139e48e77e$export$50c1f966fd3af83e)(organ)}: ${(0, $4b8473139e48e77e$export$433053e2c141d410)[lvl] || lvl}`;
+            return {
+                title: 'Expression level by organ',
+                items: [
+                    mk(label, $8f8e530286a37ce9$var$ORGAN_FIELD, `${organ}:${lvl}`, 'Expression', label)
+                ]
+            };
+        }
+        if (colId === 'expr_max_tpm__attr_f') {
+            const v = data.expr_max_tpm__attr_f;
+            if (!Number.isFinite(+v)) return {
+                title: labelOf(colId),
+                items: []
+            };
+            return {
+                title: labelOf(colId),
+                items: [
+                    mk(`\u{2265} ${(0, $4b8473139e48e77e$export$8eaa32ef86afdd9c)(+v)} TPM`, colId, `[${v} TO *]`, 'Max TPM', `Max TPM \u{2265} ${(0, $4b8473139e48e77e$export$8eaa32ef86afdd9c)(+v)}`)
+                ]
+            };
+        }
+        if (colId === 'expr_tau__attr_f') {
+            const v = data.expr_tau__attr_f;
+            if (!Number.isFinite(+v)) return {
+                title: labelOf(colId),
+                items: []
+            };
+            return {
+                title: labelOf(colId),
+                items: [
+                    mk(`\u{2265} ${(+v).toFixed(3)}`, colId, `[${v} TO *]`, 'Tau', `tau \u{2265} ${(+v).toFixed(3)}`)
+                ]
+            };
+        }
+        // Generic (Expression class, and any core / added attribute).
+        const label = labelOf(colId);
+        const raw = data[colId];
+        const vals = Array.isArray(raw) ? raw : raw != null && raw !== '' ? [
+            raw
+        ] : [];
+        return {
+            title: label,
+            items: vals.map((v)=>mk(String(v).replace(/_/g, ' '), colId, v, label, String(v).replace(/_/g, ' ')))
+        };
+    };
+    const onCellClicked = (e)=>{
+        const desc = buildCellPopover(e.column.getColId(), e.data);
+        if (!desc || !desc.items.length) {
+            setPopover(null);
+            return;
+        }
+        const ev = e.event || {};
+        setPopover({
+            x: ev.clientX || 0,
+            y: ev.clientY || 0,
+            title: desc.title,
+            items: desc.items
+        });
+    };
+    const addFilter = (it)=>{
+        doAcceptGrameneSuggestion({
+            fq_field: it.fqField,
+            fq_value: it.fqValue,
+            name: it.name,
+            category: it.category
+        });
+        setPopover(null);
+    };
+    // Close the popover on outside-click or Escape. Registered after the opening
+    // click, so that click can't immediately dismiss it.
+    (0, $gXNCa$react.useEffect)(()=>{
+        if (!popover) return;
+        const onDown = (e)=>{
+            if (popRef.current && !popRef.current.contains(e.target)) setPopover(null);
+        };
+        const onKey = (e)=>{
+            if (e.key === 'Escape') setPopover(null);
+        };
+        document.addEventListener('mousedown', onDown, true);
+        document.addEventListener('keydown', onKey);
+        return ()=>{
+            document.removeEventListener('mousedown', onDown, true);
+            document.removeEventListener('keydown', onKey);
+        };
+    }, [
+        popover
+    ]);
     const shown = rows.length;
     const loading = status === 'loading';
     const organShown = visibleSet.has($8f8e530286a37ce9$var$ORGAN_FIELD);
@@ -17320,13 +17442,43 @@ const $8f8e530286a37ce9$var$AttrTableViewCmp = (props)=>{
                     suppressDragLeaveHidesColumns: true,
                     tooltipShowDelay: 300,
                     rowHeight: 22,
-                    headerHeight: organShown ? 92 : 28
+                    headerHeight: organShown ? 92 : 28,
+                    onCellClicked: onCellClicked
                 })
+            }),
+            popover && /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("div", {
+                ref: popRef,
+                className: "attrtable-popover",
+                style: {
+                    left: Math.min(popover.x, window.innerWidth - 280),
+                    top: Math.min(popover.y, window.innerHeight - 32 - popover.items.length * 30)
+                },
+                children: [
+                    /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("div", {
+                        className: "attrtable-popover-title",
+                        children: popover.title
+                    }),
+                    popover.items.map((it, i)=>/*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsxs)("div", {
+                            className: "attrtable-popover-row",
+                            children: [
+                                /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("span", {
+                                    className: "attrtable-popover-val",
+                                    children: it.text
+                                }),
+                                /*#__PURE__*/ (0, $gXNCa$reactjsxruntime.jsx)("button", {
+                                    type: "button",
+                                    className: "btn btn-sm btn-outline-primary attrtable-popover-btn",
+                                    onClick: ()=>addFilter(it),
+                                    children: "add filter"
+                                })
+                            ]
+                        }, i))
+                ]
             })
         ]
     });
 };
-var $8f8e530286a37ce9$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.connect)('selectAttrTable', 'selectFieldCatalog', 'selectFieldCatalogByName', 'doToggleAttrTableField', 'doBulkSetAttrTableFields', 'doResetAttrTableFields', $8f8e530286a37ce9$var$AttrTableViewCmp);
+var $8f8e530286a37ce9$export$2e2bcd8739ae039 = (0, $gXNCa$reduxbundlerreact.connect)('selectAttrTable', 'selectFieldCatalog', 'selectFieldCatalogByName', 'doToggleAttrTableField', 'doBulkSetAttrTableFields', 'doResetAttrTableFields', 'doAcceptGrameneSuggestion', $8f8e530286a37ce9$var$AttrTableViewCmp);