@jbrowse/plugin-spreadsheet-view 2.17.0 → 2.18.0

package/esm/SpreadsheetView/components/NumberEditor.js

@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
 import { TextField } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 const useStyles = makeStyles()({
     textField: {
         width: '2rem',
@@ -9,14 +9,12 @@ const useStyles = makeStyles()({
     },
 });
 const NumberEditor = observer(function ({ model, disabled, modelPropName, modelSetterName, }) {
-    // @ts-expect-error
     const [val, setVal] = useState(model[modelPropName]);
     const { classes } = useStyles();
     useEffect(() => {
         const num = Number.parseInt(val, 10);
         if (!Number.isNaN(num)) {
             if (num > 0) {
-                // @ts-expect-error
                 model[modelSetterName](num);
             }
             else {

package/esm/SpreadsheetView/components/SpreadsheetDataGrid.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import type { SpreadsheetModel } from '../SpreadsheetModel';
+declare const SpreadsheetDataGrid: ({ model, }: {
+    model: SpreadsheetModel;
+}) => React.JSX.Element;
+export default SpreadsheetDataGrid;

package/esm/SpreadsheetView/components/SpreadsheetDataGrid.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { LoadingEllipses } from '@jbrowse/core/ui';
+import { DataGrid, GridToolbar, useGridApiRef } from '@mui/x-data-grid';
+import { observer } from 'mobx-react';
+const SpreadsheetDataGrid = observer(function ({ model, }) {
+    const { rows, dataGridColumns, visibleColumns } = model;
+    const apiRef = useGridApiRef();
+    return rows && dataGridColumns ? (React.createElement(DataGrid, { apiRef: apiRef, checkboxSelection: true, disableRowSelectionOnClick: true, columnHeaderHeight: 35, columnVisibilityModel: visibleColumns, onFilterModelChange: () => {
+            setTimeout(() => {
+                model.setVisibleRows(apiRef.current.state.visibleRowsLookup);
+            });
+        }, onColumnVisibilityModelChange: n => {
+            model.setVisibleColumns(n);
+        }, rowHeight: 25, hideFooter: rows.length < 100, slots: {
+            toolbar: GridToolbar,
+        }, slotProps: {
+            toolbar: {
+                showQuickFilter: true,
+            },
+        }, rows: rows, columns: dataGridColumns })) : (React.createElement(LoadingEllipses, { variant: "h6" }));
+});
+export default SpreadsheetDataGrid;

package/esm/SpreadsheetView/components/SpreadsheetView.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
-import { SpreadsheetViewModel } from '../models/SpreadsheetView';
-declare const SpreadsheetView: ({ model, }: {
+import type { SpreadsheetViewModel } from '../SpreadsheetViewModel';
+declare const SpreadsheetContainer: ({ model, }: {
     model: SpreadsheetViewModel;
 }) => React.JSX.Element;
-export default SpreadsheetView;
+export default SpreadsheetContainer;

package/esm/SpreadsheetView/components/SpreadsheetView.js

@@ -1,58 +1,37 @@
-import React, { useState } from 'react';
-import { Grid } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
-import { observer } from 'mobx-react';
+import React, { Suspense, lazy, useState } from 'react';
 import { ResizeHandle } from '@jbrowse/core/ui';
-// locals
-import ImportWizard from './ImportWizard';
-import Spreadsheet from './Spreadsheet';
-import GlobalFilterControls from './GlobalFilterControls';
-import ColumnFilterControls from './ColumnFilterControls';
-import StatusBar from './StatusBar';
-const headerHeight = 52;
-const colFilterHeight = 46;
-const statusBarHeight = 40;
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import SpreadsheetDataGrid from './SpreadsheetDataGrid';
+const ImportWizard = lazy(() => import('./ImportWizard'));
 const useStyles = makeStyles()(theme => ({
-    header: {
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        boxSizing: 'border-box',
-        height: headerHeight,
-        paddingLeft: theme.spacing(1),
-    },
     contentArea: {
         overflow: 'auto',
+        position: 'relative',
+        marginBottom: theme.spacing(1),
+        background: theme.palette.background.paper,
     },
     resizeHandle: {
-        height: 3,
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        background: theme.palette.action.disabled,
+        height: 5,
         boxSizing: 'border-box',
+        background: theme.palette.action.disabled,
         borderTop: '1px solid #fafafa',
     },
 }));
 const SpreadsheetView = observer(function ({ model, }) {
+    const [initialHeight, setInitialHeight] = useState(0);
     const { classes } = useStyles();
-    const { spreadsheet, filterControls, hideFilterControls, hideVerticalResizeHandle, mode, height, } = model;
-    const [page, setPage] = useState(0);
-    const [rowsPerPage, setRowsPerPage] = useState(100);
-    return (React.createElement("div", null,
-        mode !== 'display' || hideFilterControls ? null : (React.createElement(React.Fragment, null,
-            React.createElement(Grid, { container: true, direction: "row", className: classes.header },
-                React.createElement(Grid, { item: true },
-                    React.createElement(GlobalFilterControls, { model: model }))),
-            filterControls.columnFilters.map((f, i) => (React.createElement(ColumnFilterControls, { key: `${f.columnNumber}-${i}`, viewModel: model, filterModel: f, columnNumber: f.columnNumber, height: colFilterHeight }))))),
-        mode === 'import' ? (React.createElement(ImportWizard, { model: model.importWizard })) : (React.createElement("div", { className: classes.contentArea },
-            React.createElement("div", { style: {
-                    position: 'relative',
-                    display: mode === 'display' ? undefined : 'none',
-                } }, spreadsheet ? (React.createElement(Spreadsheet, { page: page, rowsPerPage: rowsPerPage, model: spreadsheet, height: height -
-                    headerHeight -
-                    filterControls.columnFilters.length * colFilterHeight -
-                    statusBarHeight })) : null))),
-        spreadsheet ? (React.createElement(StatusBar, { page: page, setPage: setPage, rowsPerPage: rowsPerPage, setRowsPerPage: setRowsPerPage, mode: mode, spreadsheet: spreadsheet })) : null,
-        hideVerticalResizeHandle ? null : (React.createElement(ResizeHandle, { onDrag: model.resizeHeight, className: classes.resizeHandle }))));
+    const { spreadsheet, hideVerticalResizeHandle, height } = model;
+    return spreadsheet ? (React.createElement(React.Fragment, null,
+        React.createElement("div", { style: { height }, className: classes.contentArea },
+            React.createElement(SpreadsheetDataGrid, { model: spreadsheet })),
+        hideVerticalResizeHandle ? null : (React.createElement(ResizeHandle, { onMouseDown: () => {
+                setInitialHeight(height);
+            }, onDrag: (_, dist) => model.setHeight(initialHeight - dist), className: classes.resizeHandle })))) : (React.createElement("div", null, "Unknown"));
+});
+const SpreadsheetContainer = observer(function ({ model, }) {
+    var _a;
+    return !((_a = model.spreadsheet) === null || _a === void 0 ? void 0 : _a.initialized) ? (React.createElement(Suspense, { fallback: null },
+        React.createElement(ImportWizard, { model: model.importWizard }))) : (React.createElement(SpreadsheetView, { model: model }));
 });
-export default SpreadsheetView;
+export default SpreadsheetContainer;

package/esm/SpreadsheetView/components/TrackSelector.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { ImportWizardModel } from '../ImportWizard';
+declare const TrackSelector: ({ model, selectedAssembly, }: {
+    model: ImportWizardModel;
+    selectedAssembly: string;
+}) => React.JSX.Element;
+export default TrackSelector;

package/esm/SpreadsheetView/components/TrackSelector.js

@@ -0,0 +1,24 @@
+import React, { useEffect, useState } from 'react';
+import { ErrorMessage } from '@jbrowse/core/ui';
+import { coarseStripHTML } from '@jbrowse/core/util';
+import { MenuItem, TextField } from '@mui/material';
+import { observer } from 'mobx-react';
+const TrackSelector = observer(function ({ model, selectedAssembly, }) {
+    var _a;
+    const filteredTracks = selectedAssembly
+        ? model.tracksForAssembly(selectedAssembly)
+        : undefined;
+    const resetTrack = ((_a = filteredTracks === null || filteredTracks === void 0 ? void 0 : filteredTracks[0]) === null || _a === void 0 ? void 0 : _a.track.trackId) || '';
+    const [selectedTrack, setSelectedTrack] = useState(resetTrack);
+    useEffect(() => {
+        const entry = filteredTracks === null || filteredTracks === void 0 ? void 0 : filteredTracks.find(f => selectedTrack === f.track.trackId);
+        if (entry) {
+            model.setFileSource(entry.loc);
+            model.setFileType(entry.type);
+        }
+    }, [model, selectedTrack, filteredTracks]);
+    return (React.createElement("div", null, (filteredTracks === null || filteredTracks === void 0 ? void 0 : filteredTracks.length) ? (React.createElement(TextField, { select: true, label: "Tracks", variant: "outlined", value: selectedTrack, onChange: event => {
+            setSelectedTrack(event.target.value);
+        } }, filteredTracks.map(({ track, label }) => (React.createElement(MenuItem, { key: track.trackId, value: track.trackId }, coarseStripHTML(label)))))) : (React.createElement(ErrorMessage, { error: `No tracks found for ${selectedAssembly}` }))));
+});
+export default TrackSelector;

package/esm/SpreadsheetView/importAdapters/BedImport.d.ts

@@ -1,17 +1,26 @@
-import { ParseOptions } from './ImportUtils';
-import type { Buffer } from 'buffer';
-export declare function removeBedHeaders(buffer: Buffer): Buffer;
-export declare function parseBedBuffer(buffer: Buffer, options: ParseOptions): Promise<{
-    rowSet: import("./ImportUtils").RowSet;
-    columnDisplayOrder: number[];
-    hasColumnNames: boolean;
-    columns: import("./ImportUtils").Column[];
-    assemblyName: string | undefined;
-}>;
-export declare function parseBedPEBuffer(buffer: Buffer, options: ParseOptions): Promise<{
-    rowSet: import("./ImportUtils").RowSet;
-    columnDisplayOrder: number[];
-    hasColumnNames: boolean;
-    columns: import("./ImportUtils").Column[];
-    assemblyName: string | undefined;
-}>;
+export declare function parseBedBuffer(buffer: Uint8Array): {
+    columns: {
+        name: string;
+    }[];
+    rowSet: {
+        rows: {
+            cellData: {
+                refName: string | undefined;
+                start: number;
+                end: number;
+                name: string | undefined;
+                score: string | undefined;
+                strand: string | undefined;
+            };
+            feature: {
+                uniqueId: string;
+                refName: string | undefined;
+                start: number;
+                end: number;
+                name: string | undefined;
+                score: string | undefined;
+                strand: number | undefined;
+            };
+        }[];
+    };
+};

package/esm/SpreadsheetView/importAdapters/BedImport.js

@@ -1,139 +1,55 @@
-import { parseTsvBuffer } from './ImportUtils';
-const browserBytes = 'browser '.split('').map(c => c.charCodeAt(0));
-const trackBytes = 'track '.split('').map(c => c.charCodeAt(0));
-const commentBytes = '#'.split('').map(c => c.charCodeAt(0));
-function bytesAreFoundAt(position, buffer, bytes) {
-    let i = 0;
-    for (; i < bytes.length; i += 1) {
-        if (buffer[position + i] !== bytes[i]) {
-            return false;
-        }
-    }
-    return true;
-}
-export function removeBedHeaders(buffer) {
-    // slice off the first lines of the buffer if it starts with one or more
-    // header lines
-    let i = 0;
-    for (; i < buffer.length; i += 1) {
-        if (bytesAreFoundAt(i, buffer, browserBytes) ||
-            bytesAreFoundAt(i, buffer, trackBytes) ||
-            bytesAreFoundAt(i, buffer, commentBytes)) {
-            // consume up to the next newline
-            do {
-                i += 1;
-            } while (buffer[i] !== 10);
-        }
-        else {
-            // end of headers, return
-            break;
-        }
-    }
-    if (i) {
-        return buffer.subarray(i);
-    }
-    return buffer;
-}
-export async function parseBedBuffer(buffer, options) {
-    const b = removeBedHeaders(buffer);
-    const data = await parseTsvBuffer(b);
-    const bedColumns = [
-        { name: 'chrom', dataType: { type: 'LocRef' } },
-        { name: 'chromStart', dataType: { type: 'LocStart' } },
-        { name: 'chromEnd', dataType: { type: 'LocEnd' } },
-        { name: 'name', dataType: { type: 'Text' } },
-        { name: 'score', dataType: { type: 'Number' } },
-        { name: 'strand', dataType: { type: 'Text' } },
-    ];
-    data.columns.forEach((col, colNumber) => {
-        const bedColumn = bedColumns[colNumber];
-        if (bedColumn) {
-            col.name = bedColumn.name;
-            col.dataType = bedColumn.dataType;
-        }
-    });
-    data.hasColumnNames = true;
-    data.assemblyName = options.selectedAssemblyName;
-    data.columnDisplayOrder.push(data.columnDisplayOrder.length);
-    data.columns.unshift({
-        name: 'Location',
-        dataType: { type: 'LocString' },
-        isDerived: true,
-        derivationFunctionText: `jexl:{text:row.cells[0].text+':'+row.cells[1].text+'..'+row.cells[2].text,\n
-    extendedData: {refName: row.cells.ref.text, start: parseInt(row.cells.start.text,10), end: parseInt(row.cells.end.text,10)}}`,
-    });
-    return data;
-}
-export async function parseBedPEBuffer(buffer, options) {
-    const b = removeBedHeaders(buffer);
-    const data = await parseTsvBuffer(b);
-    const bedColumns = [
-        { name: 'chrom1', dataType: { type: 'Text' }, featureField: ['refName'] },
-        { name: 'start1', dataType: { type: 'Number' }, featureField: ['start'] },
-        { name: 'end1', dataType: { type: 'Number' }, featureField: ['end'] },
-        {
-            name: 'chrom2',
-            dataType: { type: 'Text' },
-            featureField: ['mate', 'refName'],
-        },
-        {
-            name: 'start2',
-            dataType: { type: 'Number' },
-            featureField: ['mate', 'start'],
-        },
-        {
-            name: 'end2',
-            dataType: { type: 'Number' },
-            featureField: ['mate', 'end'],
-        },
-        { name: 'name', dataType: { type: 'Text' }, featureField: ['name'] },
-        { name: 'score', dataType: { type: 'Number' }, featureField: ['score'] },
-        { name: 'strand1', dataType: { type: 'Text' }, featureField: ['strand'] },
-        {
-            name: 'strand2',
-            dataType: { type: 'Text' },
-            featureField: ['mate', 'strand'],
+import { isNumber } from './isNumber';
+import { bufferToLines, parseStrand } from './util';
+export function parseBedBuffer(buffer) {
+    var _a, _b;
+    const lines = bufferToLines(buffer);
+    const rest = lines.filter(line => !(line.startsWith('#') ||
+        line.startsWith('browser') ||
+        line.startsWith('track')));
+    const lastHeaderLine = lines.findLast(line => line.startsWith('#'));
+    const coreColumns = ['refName', 'start', 'end'];
+    const numExtraColumns = Math.max(0, (((_b = (_a = rest[0]) === null || _a === void 0 ? void 0 : _a.split('\t')) === null || _b === void 0 ? void 0 : _b.length) || 0) - coreColumns.length);
+    const extraNames = (lastHeaderLine === null || lastHeaderLine === void 0 ? void 0 : lastHeaderLine.includes('\t'))
+        ? lastHeaderLine
+            .slice(1)
+            .split('\t')
+            .slice(coreColumns.length)
+            .map(t => t.trim())
+        : Array.from({ length: numExtraColumns }, (_v, i) => `field_${i}`);
+    const colNames = [...coreColumns, ...extraNames];
+    return {
+        columns: colNames.map(c => ({ name: c })),
+        rowSet: {
+            rows: rest.map((line, idx) => {
+                const cols = line.split('\t');
+                return {
+                    cellData: {
+                        refName: cols[0],
+                        start: +cols[1],
+                        end: +cols[2],
+                        name: cols[3],
+                        score: cols[4],
+                        strand: cols[5],
+                        ...Object.fromEntries(extraNames.map((n, idx) => {
+                            const r = cols[idx + coreColumns.length];
+                            return [n, isNumber(r) ? +r : r];
+                        })),
+                    },
+                    feature: {
+                        uniqueId: `bed-${idx}`,
+                        refName: cols[0],
+                        start: +cols[1],
+                        end: +cols[2],
+                        name: cols[3],
+                        score: cols[4],
+                        strand: parseStrand(cols[5]),
+                        ...Object.fromEntries(extraNames.map((n, idx) => {
+                            const r = cols[idx + coreColumns.length];
+                            return [n, isNumber(r) ? +r : r];
+                        })),
+                    },
+                };
+            }),
         },
-    ];
-    data.columns.forEach((col, colNumber) => {
-        const bedColumn = bedColumns[colNumber];
-        if (bedColumn) {
-            col.name = bedColumn.name;
-            col.dataType = bedColumn.dataType;
-        }
-    });
-    data.hasColumnNames = true;
-    // decorate each row with a feature object in its extendedData
-    data.rowSet.rows.forEach((row, rowNumber) => {
-        const featureData = {};
-        row.cells.forEach(({ text }, columnNumber) => {
-            const bedColumn = bedColumns[columnNumber];
-            const val = bedColumn && bedColumn.dataType.type === 'Number' && text
-                ? Number.parseFloat(text)
-                : text;
-            if (bedColumn) {
-                // a predefined column
-                if (bedColumn.featureField.length === 2) {
-                    if (!featureData[bedColumn.featureField[0]]) {
-                        featureData[bedColumn.featureField[0]] = {};
-                    }
-                    featureData[bedColumn.featureField[0]][bedColumn.featureField[1]] =
-                        val;
-                }
-                else {
-                    featureData[bedColumn.featureField[0]] = val;
-                }
-            }
-            else {
-                // some other column
-                featureData[`column${columnNumber + 1}`] = val;
-            }
-        });
-        featureData.uniqueId = `bedpe-${rowNumber}`;
-        row.extendedData = {
-            feature: featureData,
-        };
-    });
-    data.assemblyName = options.selectedAssemblyName;
-    return data;
+    };
 }

package/esm/SpreadsheetView/importAdapters/BedpeImport.d.ts

@@ -0,0 +1,36 @@
+export declare function parseBedPEBuffer(buffer: Uint8Array): {
+    columns: {
+        name: string;
+    }[];
+    rowSet: {
+        rows: {
+            cellData: {
+                refName: string | undefined;
+                start: string | undefined;
+                end: string | undefined;
+                mateRefName: string | undefined;
+                mateStart: string | undefined;
+                mateEnd: string | undefined;
+                name: string | undefined;
+                score: string | number | undefined;
+                strand: string | undefined;
+                mateStrand: string | undefined;
+            };
+            feature: {
+                uniqueId: string;
+                refName: string | undefined;
+                start: number;
+                end: number;
+                strand: number | undefined;
+                mate: {
+                    refName: string | undefined;
+                    start: number;
+                    end: number;
+                    strand: number | undefined;
+                };
+                name: string | undefined;
+                score: string | undefined;
+            };
+        }[];
+    };
+};

package/esm/SpreadsheetView/importAdapters/BedpeImport.js

@@ -0,0 +1,76 @@
+import { isNumber } from '@mui/x-data-grid/internals';
+import { bufferToLines, parseStrand } from './util';
+export function parseBedPEBuffer(buffer) {
+    var _a, _b;
+    const lines = bufferToLines(buffer);
+    const rest = lines.filter(line => !(line.startsWith('#') ||
+        line.startsWith('browser') ||
+        line.startsWith('track')));
+    const lastHeaderLine = lines.findLast(line => line.startsWith('#'));
+    const coreColumns = [
+        'refName',
+        'start',
+        'end',
+        'mateRef',
+        'mateStart',
+        'mateEnd',
+        'name',
+        'score',
+        'strand',
+        'mateStrand',
+    ];
+    const numExtraColumns = Math.max(0, (((_b = (_a = rest[0]) === null || _a === void 0 ? void 0 : _a.split('\t')) === null || _b === void 0 ? void 0 : _b.length) || 0) - coreColumns.length);
+    const extraNames = (lastHeaderLine === null || lastHeaderLine === void 0 ? void 0 : lastHeaderLine.includes('\t'))
+        ? lastHeaderLine
+            .slice(1)
+            .split('\t')
+            .slice(coreColumns.length)
+            .map(t => t.trim())
+        : Array.from({ length: numExtraColumns }, (_v, i) => `field_${i}`);
+    const colNames = [...coreColumns, ...extraNames];
+    return {
+        columns: colNames.map(c => ({ name: c })),
+        rowSet: {
+            rows: rest.map((line, idx) => {
+                const cols = line.split('\t');
+                return {
+                    cellData: {
+                        refName: cols[0],
+                        start: cols[1],
+                        end: cols[2],
+                        mateRefName: cols[3],
+                        mateStart: cols[4],
+                        mateEnd: cols[5],
+                        name: cols[6],
+                        score: +cols[7] || cols[7],
+                        strand: cols[8],
+                        mateStrand: cols[9],
+                        ...Object.fromEntries(extraNames.map((n, idx) => {
+                            const r = cols[idx + coreColumns.length];
+                            return [n, isNumber(r) ? +r : r];
+                        })),
+                    },
+                    feature: {
+                        uniqueId: `bedpe-${idx}`,
+                        refName: cols[0],
+                        start: +cols[1],
+                        end: +cols[2],
+                        strand: parseStrand(cols[8]),
+                        mate: {
+                            refName: cols[3],
+                            start: +cols[4],
+                            end: +cols[5],
+                            strand: parseStrand(cols[9]),
+                        },
+                        name: cols[6],
+                        score: cols[7],
+                        ...Object.fromEntries(extraNames.map((n, idx) => {
+                            const r = cols[idx + coreColumns.length];
+                            return [n, isNumber(r) ? +r : r];
+                        })),
+                    },
+                };
+            }),
+        },
+    };
+}

package/esm/SpreadsheetView/importAdapters/STARFusionImport.d.ts

@@ -1,9 +1,25 @@
-import { ParseOptions } from './ImportUtils';
-import type { Buffer } from 'buffer';
-export declare function parseSTARFusionBuffer(buffer: Buffer, options: ParseOptions): Promise<{
-    rowSet: import("./ImportUtils").RowSet;
-    columnDisplayOrder: number[];
-    hasColumnNames: boolean;
-    columns: import("./ImportUtils").Column[];
-    assemblyName: string | undefined;
-}>;
+export declare function parseSTARFusionBuffer(buffer: Uint8Array): {
+    columns: {
+        name: string;
+    }[];
+    rowSet: {
+        rows: {
+            cellData: {
+                [k: string]: string | number;
+            };
+            feature: {
+                mate: {
+                    refName: string | undefined;
+                    start: number;
+                    end: number;
+                    strand: number | undefined;
+                };
+                refName: string | undefined;
+                start: number;
+                end: number;
+                strand: number | undefined;
+                uniqueId: string;
+            };
+        }[];
+    };
+};