@jbrowse/plugin-spreadsheet-view 2.17.0 → 3.0.0

package/dist/SpreadsheetView/components/ImportWizard.js

@@ -1,90 +1,47 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
 const material_1 = require("@mui/material");
 const mobx_react_1 = require("mobx-react");
 const mobx_state_tree_1 = require("mobx-state-tree");
-const util_1 = require("@jbrowse/core/util");
-const ui_1 = require("@jbrowse/core/ui");
-const NumberEditor_1 = __importDefault(require("./NumberEditor"));
 const mui_1 = require("tss-react/mui");
+const TrackSelector_1 = __importDefault(require("./TrackSelector"));
 const useStyles = (0, mui_1.makeStyles)()({
     container: {
         margin: '0 auto',
-        maxWidth: '25em',
+        maxWidth: '40em',
         padding: 20,
     },
 });
-const ImportWizard = (0, mobx_react_1.observer)(({ model }) => {
+const ImportWizard = (0, mobx_react_1.observer)(function ({ model, }) {
     var _a;
     const session = (0, util_1.getSession)(model);
     const { classes } = useStyles();
     const { assemblyNames, assemblyManager } = session;
-    const { fileType, canCancel, fileSource, isReadyToOpen, fileTypes, hasColumnNameLine, error, } = model;
-    const [selected, setSelected] = (0, react_1.useState)(assemblyNames[0]);
-    const err = ((_a = assemblyManager.get(selected)) === null || _a === void 0 ? void 0 : _a.error) || error;
-    const showRowControls = fileType === 'CSV' || fileType === 'TSV';
+    const { loading, fileType, fileSource, isReadyToOpen, fileTypes, error } = model;
+    const [selectedAssembly, setSelectedAssembly] = (0, react_1.useState)(assemblyNames[0]);
+    const [selectorType, setSelectorType] = (0, react_1.useState)('custom');
+    const err = ((_a = assemblyManager.get(selectedAssembly)) === null || _a === void 0 ? void 0 : _a.error) || error;
     const rootModel = (0, mobx_state_tree_1.getRoot)(model);
-    return (react_1.default.createElement("div", { className: classes.container },
-        err ? react_1.default.createElement(ui_1.ErrorMessage, { error: err }) : null,
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(material_1.FormControl, { component: "fieldset" },
-                react_1.default.createElement(material_1.FormLabel, { component: "legend" }, "Tabular file"),
-                react_1.default.createElement(material_1.FormGroup, null,
-                    react_1.default.createElement(ui_1.FileSelector, { location: fileSource, setLocation: arg => {
-                            model.setFileSource(arg);
-                        }, rootModel: rootModel })))),
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(material_1.FormControl, { component: "fieldset" },
-                react_1.default.createElement(material_1.FormLabel, { component: "legend" }, "File Type"),
-                react_1.default.createElement(material_1.RadioGroup, { row: true, "aria-label": "file type", name: "type", value: fileType }, fileTypes.map(fileTypeName => (react_1.default.createElement(material_1.FormControlLabel, { key: fileTypeName, checked: fileType === fileTypeName, value: fileTypeName, onClick: () => {
-                        model.setFileType(fileTypeName);
-                    }, control: react_1.default.createElement(material_1.Radio, null), label: fileTypeName })))))),
-        showRowControls ? (react_1.default.createElement("div", null,
-            react_1.default.createElement(material_1.FormControl, { component: "fieldset" },
-                react_1.default.createElement(material_1.FormLabel, { component: "legend" }, "Column Names"),
-                react_1.default.createElement(material_1.FormControlLabel, { disabled: !showRowControls, label: "has column names on line", labelPlacement: "end", control: react_1.default.createElement(material_1.Checkbox, { checked: hasColumnNameLine, onClick: () => {
-                            model.toggleHasColumnNameLine();
-                        } }) }),
-                react_1.default.createElement(NumberEditor_1.default, { model: model, disabled: !hasColumnNameLine, modelPropName: "columnNameLineNumber", modelSetterName: "setColumnNameLineNumber" })))) : null,
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(ui_1.AssemblySelector, { session: session, selected: selected, onChange: val => {
-                    setSelected(val);
-                } })),
-        react_1.default.createElement("div", null,
-            canCancel ? (react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                    model.cancelButton();
-                }, disabled: !canCancel }, "Cancel")) : null,
-            ' ',
-            react_1.default.createElement(material_1.Button, { disabled: !isReadyToOpen || !!err, variant: "contained", "data-testid": "open_spreadsheet", color: "primary", onClick: () => {
-                    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-                    model.import(selected);
-                } }, "Open"))));
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [err ? (0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: err }) : null, (0, jsx_runtime_1.jsxs)(material_1.Paper, { className: classes.container, children: [loading ? (0, jsx_runtime_1.jsx)(ui_1.LoadingEllipses, { variant: "h6" }) : null, (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { component: "fieldset", children: (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { row: true, "aria-label": "file type", name: "type", value: fileType, onChange: event => {
+                                    setSelectorType(event.target.value);
+                                }, children: Object.entries({
+                                    custom: 'Open file from URL or local computer',
+                                    existing: 'Open from track',
+                                }).map(([key, val]) => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { checked: selectorType === key, value: key, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: val }, key))) }) }) }), selectorType === 'custom' ? ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.FormControl, { component: "fieldset", children: (0, jsx_runtime_1.jsx)(material_1.FormGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.FileSelector, { inline: true, location: fileSource, rootModel: rootModel, setLocation: arg => {
+                                        model.setFileSource(arg);
+                                    } }) }) }) })) : selectedAssembly ? ((0, jsx_runtime_1.jsx)(TrackSelector_1.default, { model: model, selectedAssembly: selectedAssembly })) : ((0, jsx_runtime_1.jsx)("div", { children: "Select assembly" })), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)(material_1.FormControl, { component: "fieldset", children: [(0, jsx_runtime_1.jsx)(material_1.FormLabel, { component: "legend", children: "File Type" }), (0, jsx_runtime_1.jsx)(material_1.RadioGroup, { row: true, "aria-label": "file type", name: "type", value: fileType, onChange: event => {
+                                        model.setFileType(event.target.value);
+                                    }, children: fileTypes.map(fileTypeName => ((0, jsx_runtime_1.jsx)(material_1.FormControlLabel, { checked: fileType === fileTypeName, value: fileTypeName, control: (0, jsx_runtime_1.jsx)(material_1.Radio, {}), label: fileTypeName }, fileTypeName))) })] }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(ui_1.AssemblySelector, { session: session, selected: selectedAssembly, onChange: val => {
+                                setSelectedAssembly(val);
+                            } }) }), (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(material_1.Button, { disabled: !isReadyToOpen || !!err, variant: "contained", "data-testid": "open_spreadsheet", color: "primary", onClick: () => {
+                                model.import(selectedAssembly);
+                            }, children: "Open" }) })] })] }));
 });
 exports.default = ImportWizard;

package/dist/SpreadsheetView/components/LocationCell.d.ts

@@ -0,0 +1,7 @@
+import type { SimpleFeatureSerialized } from '@jbrowse/core/util';
+export default function LocationCell({ model, feature, }: {
+    model: {
+        assemblyName?: string;
+    };
+    feature: SimpleFeatureSerialized;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/SpreadsheetView/components/LocationCell.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = LocationCell;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mobx_state_tree_1 = require("mobx-state-tree");
+const util_2 = require("../util");
+const FeatureMenu_1 = __importDefault(require("./FeatureMenu"));
+function LocationCell({ model, feature, }) {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(FeatureMenu_1.default, { session: (0, util_1.getSession)(model), spreadsheetViewId: (0, mobx_state_tree_1.getParent)(model).id, assemblyName: model.assemblyName, feature: feature }), (0, jsx_runtime_1.jsx)(material_1.Link, { href: "#", onClick: async (event) => {
+                    try {
+                        event.preventDefault();
+                        await (0, util_2.locationLinkClick)({
+                            spreadsheetViewId: (0, mobx_state_tree_1.getParent)(model).id,
+                            session: (0, util_1.getSession)(model),
+                            locString: (0, util_1.assembleLocString)(feature),
+                            assemblyName: model.assemblyName,
+                        });
+                    }
+                    catch (e) {
+                        console.error(e);
+                        (0, util_1.getSession)(model).notifyError(`${e}`, e);
+                    }
+                }, children: (0, util_1.assembleLocString)(feature) })] }));
+}

package/dist/SpreadsheetView/components/NumberEditor.d.ts

@@ -1,9 +1,8 @@
-import React from 'react';
-import { ImportWizardModel } from '../models/ImportWizard';
+import type { ImportWizardModel } from '../ImportWizard';
 declare const NumberEditor: ({ model, disabled, modelPropName, modelSetterName, }: {
     model: ImportWizardModel;
     disabled: boolean;
     modelPropName: string;
     modelSetterName: string;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export default NumberEditor;

package/dist/SpreadsheetView/components/NumberEditor.js

@@ -1,32 +1,10 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
 const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
 const useStyles = (0, mui_1.makeStyles)()({
     textField: {
         width: '2rem',
@@ -34,14 +12,12 @@ const useStyles = (0, mui_1.makeStyles)()({
     },
 });
 const NumberEditor = (0, mobx_react_1.observer)(function ({ model, disabled, modelPropName, modelSetterName, }) {
-    // @ts-expect-error
     const [val, setVal] = (0, react_1.useState)(model[modelPropName]);
     const { classes } = useStyles();
     (0, react_1.useEffect)(() => {
         const num = Number.parseInt(val, 10);
         if (!Number.isNaN(num)) {
             if (num > 0) {
-                // @ts-expect-error
                 model[modelSetterName](num);
             }
             else {
@@ -49,7 +25,7 @@ const NumberEditor = (0, mobx_react_1.observer)(function ({ model, disabled, mod
             }
         }
     }, [model, modelSetterName, val]);
-    return (react_1.default.createElement(material_1.TextField, { value: val, disabled: disabled, type: "number", onChange: evt => {
+    return ((0, jsx_runtime_1.jsx)(material_1.TextField, { value: val, disabled: disabled, type: "number", onChange: evt => {
             setVal(evt.target.value);
         }, className: classes.textField }));
 });

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

@@ -0,0 +1,5 @@
+import type { SpreadsheetModel } from '../SpreadsheetModel';
+declare const SpreadsheetDataGrid: ({ model, }: {
+    model: SpreadsheetModel;
+}) => import("react/jsx-runtime").JSX.Element | null;
+export default SpreadsheetDataGrid;

package/dist/SpreadsheetView/components/SpreadsheetDataGrid.js

@@ -0,0 +1,23 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const x_data_grid_1 = require("@mui/x-data-grid");
+const mobx_react_1 = require("mobx-react");
+const SpreadsheetDataGrid = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { rows, dataGridColumns, visibleColumns } = model;
+    const apiRef = (0, x_data_grid_1.useGridApiRef)();
+    return rows && dataGridColumns ? ((0, jsx_runtime_1.jsx)(x_data_grid_1.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: x_data_grid_1.GridToolbar,
+        }, slotProps: {
+            toolbar: {
+                showQuickFilter: true,
+            },
+        }, rows: rows, columns: dataGridColumns })) : null;
+});
+exports.default = SpreadsheetDataGrid;

package/dist/SpreadsheetView/components/SpreadsheetView.d.ts

@@ -1,6 +1,5 @@
-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;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SpreadsheetContainer;

package/dist/SpreadsheetView/components/SpreadsheetView.js

@@ -15,72 +15,34 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importStar(require("react"));
-const material_1 = require("@mui/material");
-const mui_1 = require("tss-react/mui");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const mobx_react_1 = require("mobx-react");
-const ui_1 = require("@jbrowse/core/ui");
-// locals
-const ImportWizard_1 = __importDefault(require("./ImportWizard"));
-const Spreadsheet_1 = __importDefault(require("./Spreadsheet"));
-const GlobalFilterControls_1 = __importDefault(require("./GlobalFilterControls"));
-const ColumnFilterControls_1 = __importDefault(require("./ColumnFilterControls"));
-const StatusBar_1 = __importDefault(require("./StatusBar"));
-const headerHeight = 52;
-const colFilterHeight = 46;
-const statusBarHeight = 40;
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    header: {
-        overflow: 'hidden',
-        whiteSpace: 'nowrap',
-        boxSizing: 'border-box',
-        height: headerHeight,
-        paddingLeft: theme.spacing(1),
-    },
-    contentArea: {
-        overflow: 'auto',
-    },
-    resizeHandle: {
-        height: 3,
-        position: 'absolute',
-        bottom: 0,
-        left: 0,
-        background: theme.palette.action.disabled,
-        boxSizing: 'border-box',
-        borderTop: '1px solid #fafafa',
-    },
-}));
-const SpreadsheetView = (0, mobx_react_1.observer)(function ({ model, }) {
-    const { classes } = useStyles();
-    const { spreadsheet, filterControls, hideFilterControls, hideVerticalResizeHandle, mode, height, } = model;
-    const [page, setPage] = (0, react_1.useState)(0);
-    const [rowsPerPage, setRowsPerPage] = (0, react_1.useState)(100);
-    return (react_1.default.createElement("div", null,
-        mode !== 'display' || hideFilterControls ? null : (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(material_1.Grid, { container: true, direction: "row", className: classes.header },
-                react_1.default.createElement(material_1.Grid, { item: true },
-                    react_1.default.createElement(GlobalFilterControls_1.default, { model: model }))),
-            filterControls.columnFilters.map((f, i) => (react_1.default.createElement(ColumnFilterControls_1.default, { key: `${f.columnNumber}-${i}`, viewModel: model, filterModel: f, columnNumber: f.columnNumber, height: colFilterHeight }))))),
-        mode === 'import' ? (react_1.default.createElement(ImportWizard_1.default, { model: model.importWizard })) : (react_1.default.createElement("div", { className: classes.contentArea },
-            react_1.default.createElement("div", { style: {
-                    position: 'relative',
-                    display: mode === 'display' ? undefined : 'none',
-                } }, spreadsheet ? (react_1.default.createElement(Spreadsheet_1.default, { page: page, rowsPerPage: rowsPerPage, model: spreadsheet, height: height -
-                    headerHeight -
-                    filterControls.columnFilters.length * colFilterHeight -
-                    statusBarHeight })) : null))),
-        spreadsheet ? (react_1.default.createElement(StatusBar_1.default, { page: page, setPage: setPage, rowsPerPage: rowsPerPage, setRowsPerPage: setRowsPerPage, mode: mode, spreadsheet: spreadsheet })) : null,
-        hideVerticalResizeHandle ? null : (react_1.default.createElement(ui_1.ResizeHandle, { onDrag: model.resizeHeight, className: classes.resizeHandle }))));
+const SpreadsheetViewActual_1 = __importDefault(require("./SpreadsheetViewActual"));
+const ImportWizard = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ImportWizard'))));
+const SpreadsheetContainer = (0, mobx_react_1.observer)(function ({ model, }) {
+    var _a;
+    return !((_a = model.spreadsheet) === null || _a === void 0 ? void 0 : _a.initialized) ? ((0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: null, children: (0, jsx_runtime_1.jsx)(ImportWizard, { model: model.importWizard }) })) : ((0, jsx_runtime_1.jsx)(SpreadsheetViewActual_1.default, { model: model }));
 });
-exports.default = SpreadsheetView;
+exports.default = SpreadsheetContainer;

package/dist/SpreadsheetView/components/SpreadsheetViewActual.d.ts

@@ -0,0 +1,5 @@
+import type { SpreadsheetViewModel } from '../SpreadsheetViewModel';
+declare const SpreadsheetViewActual: ({ model, }: {
+    model: SpreadsheetViewModel;
+}) => import("react/jsx-runtime").JSX.Element;
+export default SpreadsheetViewActual;

package/dist/SpreadsheetView/components/SpreadsheetViewActual.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const SpreadsheetDataGrid_1 = __importDefault(require("./SpreadsheetDataGrid"));
+const useStyles = (0, mui_1.makeStyles)()(theme => ({
+    contentArea: {
+        overflow: 'auto',
+        position: 'relative',
+        marginBottom: theme.spacing(1),
+        background: theme.palette.background.paper,
+    },
+    resizeHandle: {
+        height: 5,
+        boxSizing: 'border-box',
+        background: theme.palette.action.disabled,
+        borderTop: '1px solid #fafafa',
+    },
+}));
+const SpreadsheetViewActual = (0, mobx_react_1.observer)(function ({ model, }) {
+    const [initialHeight, setInitialHeight] = (0, react_1.useState)(0);
+    const { classes } = useStyles();
+    const { spreadsheet, hideVerticalResizeHandle, height } = model;
+    return spreadsheet ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: { height }, className: classes.contentArea, children: (0, jsx_runtime_1.jsx)(SpreadsheetDataGrid_1.default, { model: spreadsheet }) }), hideVerticalResizeHandle ? null : ((0, jsx_runtime_1.jsx)(ui_1.ResizeHandle, { onMouseDown: () => {
+                    setInitialHeight(height);
+                }, onDrag: (_, dist) => model.setHeight(initialHeight - dist), className: classes.resizeHandle }))] })) : ((0, jsx_runtime_1.jsx)("div", { children: "Unknown" }));
+});
+exports.default = SpreadsheetViewActual;

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

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

package/dist/SpreadsheetView/components/TrackSelector.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const ui_1 = require("@jbrowse/core/ui");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const mobx_react_1 = require("mobx-react");
+const TrackSelector = (0, mobx_react_1.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] = (0, react_1.useState)(resetTrack);
+    (0, react_1.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 ((0, jsx_runtime_1.jsx)("div", { children: (filteredTracks === null || filteredTracks === void 0 ? void 0 : filteredTracks.length) ? ((0, jsx_runtime_1.jsx)(material_1.TextField, { select: true, label: "Tracks", variant: "outlined", value: selectedTrack, onChange: event => {
+                setSelectedTrack(event.target.value);
+            }, children: filteredTracks.map(({ track, label }) => ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { value: track.trackId, children: (0, util_1.coarseStripHTML)(label) }, track.trackId))) })) : ((0, jsx_runtime_1.jsx)(ui_1.ErrorMessage, { error: `No tracks found for ${selectedAssembly}` })) }));
+});
+exports.default = TrackSelector;

package/dist/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;
+            };
+        }[];
+    };
+};