npm - @jbrowse/plugin-grid-bookmark - Versions diffs - 2.11.0 → 2.11.2 - Mend

@jbrowse/plugin-grid-bookmark 2.11.0 → 2.11.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/dist/GridBookmarkWidget/components/BookmarkGrid.js CHANGED Viewed

@@ -32,8 +32,6 @@ const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
 const x_data_grid_1 = require("@mui/x-data-grid");
 const util_1 = require("@jbrowse/core/util");
-const useResizeBar_1 = require("@jbrowse/core/ui/useResizeBar");
-const ResizeBar_1 = __importDefault(require("@jbrowse/core/ui/ResizeBar"));
 const ColorPicker_1 = __importDefault(require("@jbrowse/core/ui/ColorPicker"));
 // locals
 const utils_1 = require("../utils");
@@ -50,7 +48,6 @@ const useStyles = (0, mui_1.makeStyles)()(() => ({
 }));
 const BookmarkGrid = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes, cx } = useStyles();
-    const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
     const { bookmarks, bookmarksWithValidAssemblies, selectedAssemblies, selectedBookmarks, } = model;
     const session = (0, util_1.getSession)(model);
     const selectedSet = new Set(selectedAssemblies);
@@ -66,64 +63,62 @@ const BookmarkGrid = (0, mobx_react_1.observer)(function ({ model, }) {
             correspondingObj: region,
         };
     });
-    const [widths, setWidths] = (0, react_1.useState)([
+    const widths = [
         50,
         Math.max((0, util_1.measureText)('Bookmark link', 12) + 30, (0, util_1.measureGridWidth)(rows.map(row => row.locString))),
         Math.max((0, util_1.measureText)('Label', 12) + 30, (0, util_1.measureGridWidth)(rows.map(row => row.label))),
         Math.max((0, util_1.measureText)('Assembly', 12) + 30, (0, util_1.measureGridWidth)(rows.map(row => row.assemblyName))),
         100,
-    ]);
-    return (react_1.default.createElement("div", { ref: ref },
-        react_1.default.createElement(ResizeBar_1.default, { widths: widths, setWidths: setWidths, scrollLeft: scrollLeft }),
-        react_1.default.createElement(x_data_grid_1.DataGrid, { autoHeight: true, density: "compact", rows: rows, columns: [
-                {
-                    ...x_data_grid_1.GRID_CHECKBOX_SELECTION_COL_DEF,
-                    width: widths[0],
-                },
-                {
-                    field: 'locString',
-                    headerName: 'Bookmark link',
-                    width: widths[1],
-                    renderCell: ({ value, row }) => (react_1.default.createElement(material_1.Link, { className: cx(classes.link, classes.cell), href: "#", onClick: async (event) => {
-                            event.preventDefault();
-                            const { views } = session;
-                            await (0, utils_1.navToBookmark)(value, row.assemblyName, views, model);
-                        } }, value)),
-                },
-                {
-                    field: 'label',
-                    headerName: 'Label',
-                    width: widths[2],
-                    editable: true,
-                },
-                {
-                    field: 'assemblyName',
-                    headerName: 'Assembly',
-                    width: widths[3],
-                },
-                {
-                    field: 'highlight',
-                    headerName: 'Highlight',
-                    width: widths[4],
-                    renderCell: ({ value, row }) => (react_1.default.createElement(ColorPicker_1.default, { color: value || 'black', onChange: event => {
-                            model.updateBookmarkHighlight(row, event);
-                        } })),
-                },
-            ], onCellDoubleClick: ({ row }) => {
-                (0, util_1.getSession)(model).queueDialog(onClose => [
-                    EditBookmarkLabelDialog,
-                    { onClose, model, dialogRow: row },
-                ]);
-            }, processRowUpdate: row => {
-                const target = rows[row.id];
-                model.updateBookmarkLabel(target, row.label);
-                return row;
-            }, onProcessRowUpdateError: e => session.notifyError(`${e}`, e), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
-                if (bookmarksWithValidAssemblies.length > 0) {
-                    model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
-                        ...rows[value],
-                    })));
-                }
-            }, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true })));
+    ];
+    return (react_1.default.createElement(x_data_grid_1.DataGrid, { autoHeight: true, density: "compact", rows: rows, columns: [
+            {
+                ...x_data_grid_1.GRID_CHECKBOX_SELECTION_COL_DEF,
+                width: widths[0],
+            },
+            {
+                field: 'locString',
+                headerName: 'Bookmark link',
+                width: widths[1],
+                renderCell: ({ value, row }) => (react_1.default.createElement(material_1.Link, { className: cx(classes.link, classes.cell), href: "#", onClick: async (event) => {
+                        event.preventDefault();
+                        const { views } = session;
+                        await (0, utils_1.navToBookmark)(value, row.assemblyName, views, model);
+                    } }, value)),
+            },
+            {
+                field: 'label',
+                headerName: 'Label',
+                width: widths[2],
+                editable: true,
+            },
+            {
+                field: 'assemblyName',
+                headerName: 'Assembly',
+                width: widths[3],
+            },
+            {
+                field: 'highlight',
+                headerName: 'Highlight',
+                width: widths[4],
+                renderCell: ({ value, row }) => (react_1.default.createElement(ColorPicker_1.default, { color: value || 'black', onChange: event => {
+                        model.updateBookmarkHighlight(row, event);
+                    } })),
+            },
+        ], onCellDoubleClick: ({ row }) => {
+            (0, util_1.getSession)(model).queueDialog(onClose => [
+                EditBookmarkLabelDialog,
+                { onClose, model, dialogRow: row },
+            ]);
+        }, processRowUpdate: row => {
+            const target = rows[row.id];
+            model.updateBookmarkLabel(target, row.label);
+            return row;
+        }, onProcessRowUpdateError: e => session.notifyError(`${e}`, e), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
+            if (bookmarksWithValidAssemblies.length > 0) {
+                model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
+                    ...rows[value],
+                })));
+            }
+        }, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true }));
 });
 exports.default = BookmarkGrid;

package/dist/GridBookmarkWidget/components/Highlight/Highlight.js CHANGED Viewed

@@ -42,35 +42,26 @@ const useStyles = (0, mui_1.makeStyles)()({
     },
 });
 const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
-    var _a;
     const { classes } = useStyles();
     const session = (0, util_1.getSession)(model);
-    const { showBookmarkHighlights, showBookmarkLabels } = model;
     const { assemblyManager } = session;
-    const assemblyNames = new Set(session.assemblyNames);
+    const { showBookmarkHighlights, showBookmarkLabels } = model;
     const bookmarkWidget = session.widgets.get('GridBookmark');
-    const bookmarks = (0, react_1.useRef)((_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) !== null && _a !== void 0 ? _a : []);
     (0, react_1.useEffect)(() => {
         if (!bookmarkWidget) {
-            const newBookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
-            bookmarks.current = newBookmarkWidget.bookmarks;
+            session.addWidget('GridBookmarkWidget', 'GridBookmark');
         }
     }, [session, bookmarkWidget]);
-    return showBookmarkHighlights && bookmarks.current
-        ? bookmarks.current
-            .filter(value => assemblyNames.has(value.assemblyName))
+    const set = new Set(model.assemblyNames);
+    return showBookmarkHighlights && (bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks)
+        ? bookmarkWidget.bookmarks
+            .filter(value => set.has(value.assemblyName))
             .map(r => {
             var _a;
             const asm = assemblyManager.get(r.assemblyName);
             const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
-            const s = model.bpToPx({
-                refName: refName,
-                coord: r.start,
-            });
-            const e = model.bpToPx({
-                refName: refName,
-                coord: r.end,
-            });
+            const s = model.bpToPx({ refName, coord: r.start });
+            const e = model.bpToPx({ refName, coord: r.end });
             return s && e
                 ? {
                     width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),

package/dist/GridBookmarkWidget/components/Highlight/OverviewHighlight.js CHANGED Viewed

@@ -35,27 +35,28 @@ const useStyles = (0, mui_1.makeStyles)()({
     },
 });
 const OverviewHighlight = (0, mobx_react_1.observer)(function OverviewHighlight({ model, overview, }) {
-    var _a;
     const { cytobandOffset } = model;
     const session = (0, util_1.getSession)(model);
     const { classes } = useStyles();
+    const { assemblyManager } = session;
     const { showBookmarkHighlights, showBookmarkLabels } = model;
-    const assemblyNames = new Set(session.assemblyNames);
     const bookmarkWidget = session.widgets.get('GridBookmark');
-    const bookmarks = (0, react_1.useRef)((_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) !== null && _a !== void 0 ? _a : []);
     (0, react_1.useEffect)(() => {
         if (!bookmarkWidget) {
-            const newBookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
-            bookmarks.current = newBookmarkWidget.bookmarks;
+            session.addWidget('GridBookmarkWidget', 'GridBookmark');
         }
     }, [session, bookmarkWidget]);
-    return showBookmarkHighlights && bookmarks.current
-        ? bookmarks.current
-            .filter(value => assemblyNames.has(value.assemblyName))
+    const assemblyNames = new Set(model.assemblyNames);
+    return showBookmarkHighlights && (bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks)
+        ? bookmarkWidget.bookmarks
+            .filter(r => assemblyNames.has(r.assemblyName))
             .map(r => {
+            var _a;
+            const asm = assemblyManager.get(r.assemblyName);
+            const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
             const rev = r.reversed;
-            const s = overview.bpToPx({ ...r, coord: rev ? r.end : r.start });
-            const e = overview.bpToPx({ ...r, coord: rev ? r.start : r.end });
+            const s = overview.bpToPx({ refName, coord: rev ? r.end : r.start });
+            const e = overview.bpToPx({ refName, coord: rev ? r.start : r.end });
             return s !== undefined && e !== undefined
                 ? {
                     width: Math.abs(e - s),

package/dist/GridBookmarkWidget/components/dialogs/ExportBookmarksDialog.js CHANGED Viewed

@@ -36,7 +36,9 @@ const GetApp_1 = __importDefault(require("@mui/icons-material/GetApp"));
 const utils_1 = require("../../utils");
 const useStyles = (0, mui_1.makeStyles)()({
     flexItem: {
-        margin: 5,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '5px',
     },
     container: {
         display: 'flex',
@@ -55,9 +57,9 @@ const ExportBookmarksDialog = (0, mobx_react_1.observer)(function ExportBookmark
                 react_1.default.createElement("span", null, "All bookmarks will be exported."),
                 react_1.default.createElement("br", null),
                 react_1.default.createElement("span", null, "Use the checkboxes to select individual bookmarks to export."))) : ('Only selected bookmarks will be exported.')),
-            react_1.default.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            react_1.default.createElement("div", { className: classes.flexItem },
                 react_1.default.createElement(material_1.Typography, null, "Format to download:"),
-                react_1.default.createElement(material_1.Select, { size: "small", className: classes.flexItem, "data-testid": "selectFileType", value: fileType, onChange: event => setFileType(event.target.value) },
+                react_1.default.createElement(material_1.Select, { size: "small", value: fileType, onChange: event => setFileType(event.target.value) },
                     react_1.default.createElement(material_1.MenuItem, { value: "BED" }, "BED"),
                     react_1.default.createElement(material_1.MenuItem, { value: "TSV" }, "TSV")))),
         react_1.default.createElement(material_1.DialogActions, null,

package/dist/GridBookmarkWidget/components/dialogs/ImportBookmarksDialog.js CHANGED Viewed

@@ -34,23 +34,21 @@ const ui_1 = require("@jbrowse/core/ui");
 const material_1 = require("@mui/material");
 const io_1 = require("@jbrowse/core/util/io");
 const ui_2 = require("@jbrowse/core/ui");
-const AssemblySelector_1 = __importDefault(require("@jbrowse/core/ui/AssemblySelector"));
 const mui_1 = require("tss-react/mui");
 // icons
 const Publish_1 = __importDefault(require("@mui/icons-material/Publish"));
 const ExpandMore_1 = __importDefault(require("@mui/icons-material/ExpandMore"));
-const Help_1 = __importDefault(require("@mui/icons-material/Help"));
 const utils_1 = require("../../utils");
 const sessionSharing_1 = require("../../sessionSharing");
 const useStyles = (0, mui_1.makeStyles)()(theme => {
     var _a;
     return ({
-        flexItem: {
-            margin: 5,
-        },
         expandIcon: {
             color: ((_a = theme.palette.tertiary) === null || _a === void 0 ? void 0 : _a.contrastText) || '#fff',
         },
+        minWidth: {
+            minWidth: 500,
+        },
     });
 });
 async function getBookmarksFromShareLink(shareLink, shareURL) {
@@ -62,18 +60,35 @@ async function getBookmarksFromShareLink(shareLink, shareURL) {
     const sharedSession = JSON.parse(await (0, utils_1.fromUrlSafeB64)(decryptedSession));
     return sharedSession.sharedBookmarks;
 }
-async function getBookmarksFromFile(location, selectedAsm) {
-    const data = await (0, io_1.openLocation)(location).readFile('utf8');
-    return data
-        .split(/\n|\r\n|\r/)
-        .filter(f => !!f.trim())
-        .filter(f => !f.startsWith('#') &&
-        !f.startsWith('track') &&
-        !f.startsWith('browser'))
+function guessFileType(header) {
+    return header.startsWith('chrom') && header.includes('assembly_name')
+        ? 'TSV'
+        : 'BED';
+}
+async function getBookmarksFromTSVFile(lines) {
+    if (lines[0].startsWith('chrom')) {
+        lines = lines.slice(1);
+    }
+    return lines
+        .filter(f => !f.startsWith('#'))
+        .map(line => {
+        const [refName, start, end, label, assemblyName] = line.split('\t');
+        return {
+            assemblyName: assemblyName,
+            refName,
+            start: +start,
+            end: +end,
+            label: label === '.' ? undefined : label,
+        };
+    });
+}
+async function getBookmarksFromBEDFile(lines, selectedAsm) {
+    return lines
+        .filter(f => !f.startsWith('#'))
         .map(line => {
-        const [refName, start, end, label, assembly] = line.split('\t');
+        const [refName, start, end, label] = line.split('\t');
         return {
-            assemblyName: assembly !== null && assembly !== void 0 ? assembly : selectedAsm,
+            assemblyName: selectedAsm,
             refName,
             start: +start,
             end: +end,
@@ -91,31 +106,39 @@ const ImportBookmarksDialog = (0, mobx_react_1.observer)(function ({ onClose, mo
     const [selectedAsm, setSelectedAsm] = (0, react_1.useState)(assemblyNames[0]);
     const [expanded, setExpanded] = (0, react_1.useState)('shareLinkAccordion');
     return (react_1.default.createElement(ui_2.Dialog, { open: true, onClose: onClose, maxWidth: "xl", title: "Import bookmarks" },
-        react_1.default.createElement(material_1.DialogContent, null,
+        react_1.default.createElement(material_1.DialogContent, { className: classes.minWidth },
             react_1.default.createElement(material_1.Accordion, { expanded: expanded === 'shareLinkAccordion', onChange: () => setExpanded('shareLinkAccordion') },
                 react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
-                    react_1.default.createElement(material_1.Typography, { style: { display: 'flex', alignItems: 'center', gap: '5px' } },
-                        "Import from share link",
-                        ' ',
-                        react_1.default.createElement(material_1.Tooltip, { title: "The appropriate share link for sharing bookmarks is one generated via the 'Share' button in the 'Bookmarked regions' drawer. Paste it below to import shared bookmarks." },
-                            react_1.default.createElement(Help_1.default, null)))),
+                    react_1.default.createElement(material_1.Typography, { style: { display: 'flex', alignItems: 'center', gap: '5px' } }, "Import from share link")),
                 react_1.default.createElement(material_1.AccordionDetails, null,
-                    react_1.default.createElement(material_1.TextField, { label: "Enter URL", variant: "outlined", style: { width: '100%' }, value: shareLink, onChange: e => setShareLink(e.target.value) }))),
+                    react_1.default.createElement(material_1.Typography, null, "Paste a bookmark share link generated by the 'Share' button from the bookmarks widget"),
+                    react_1.default.createElement(material_1.TextField, { label: "Enter Share URL", variant: "outlined", fullWidth: true, value: shareLink, onChange: e => setShareLink(e.target.value) }))),
             react_1.default.createElement(material_1.Accordion, { expanded: expanded === 'fileAccordion', onChange: () => setExpanded('fileAccordion') },
                 react_1.default.createElement(material_1.AccordionSummary, { expandIcon: react_1.default.createElement(ExpandMore_1.default, { className: classes.expandIcon }) },
                     react_1.default.createElement(material_1.Typography, null, "Import from file")),
                 react_1.default.createElement(material_1.AccordionDetails, null,
-                    react_1.default.createElement(ui_1.FileSelector, { location: location, setLocation: setLocation, name: "File", description: "Choose a BED or TSV format file to import." }),
-                    react_1.default.createElement(AssemblySelector_1.default, { onChange: val => setSelectedAsm(val), helperText: `Select the assembly your bookmarks belong to (BED or TSV without assembly column).`, session: session, selected: selectedAsm }))),
-            error ? (react_1.default.createElement(material_1.Typography, { color: "error", variant: "h6" }, `${error}`)) : null),
+                    react_1.default.createElement(ui_1.FileSelector, { location: location, setLocation: setLocation, name: "File", description: `Choose a BED or TSV format file to import. Required TSV column headers are "chrom, start, end, label, assembly_name".` }),
+                    react_1.default.createElement(ui_2.AssemblySelector, { onChange: val => setSelectedAsm(val), helperText: `Select the assembly for BED file.`, session: session, selected: selectedAsm }))),
+            error ? react_1.default.createElement(ui_1.ErrorMessage, { error: error }) : null),
         react_1.default.createElement(material_1.DialogActions, null,
             react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: onClose }, "Cancel"),
-            react_1.default.createElement(material_1.Button, { className: classes.flexItem, "data-testid": "dialogImport", variant: "contained", color: "primary", disabled: !location && !shareLink, startIcon: react_1.default.createElement(Publish_1.default, null), onClick: async () => {
+            react_1.default.createElement(material_1.Button, { "data-testid": "dialogImport", variant: "contained", color: "primary", disabled: !location && !shareLink, startIcon: react_1.default.createElement(Publish_1.default, null), onClick: async () => {
                     try {
-                        if (location) {
-                            model.importBookmarks(await getBookmarksFromFile(location, selectedAsm));
+                        if (expanded === 'fileAccordion' && location) {
+                            const data = await (0, io_1.openLocation)(location).readFile('utf8');
+                            const lines = data.split(/\n|\r\n|\r/).filter(f => !!f.trim());
+                            const fileType = guessFileType(lines[0]);
+                            if (fileType === 'BED') {
+                                model.importBookmarks(await getBookmarksFromBEDFile(lines, selectedAsm));
+                            }
+                            else {
+                                // TSV
+                                model.importBookmarks(await getBookmarksFromTSVFile(lines));
+                            }
                         }
-                        else if (shareLink && (0, types_1.isSessionWithShareURL)(session)) {
+                        else if (expanded === 'shareLinkAccordion' &&
+                            shareLink &&
+                            (0, types_1.isSessionWithShareURL)(session)) {
                             model.importBookmarks(await getBookmarksFromShareLink(shareLink, session.shareURL));
                         }
                         onClose();

package/dist/GridBookmarkWidget/index.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function GridBookmarkWidgetF(pluginManager: PluginManager): void;

package/dist/GridBookmarkWidget/index.js CHANGED Viewed

@@ -33,7 +33,7 @@ const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
 const model_1 = __importDefault(require("./model"));
 const Highlight_1 = __importDefault(require("./components/Highlight"));
 const configSchema = (0, configuration_1.ConfigurationSchema)('GridBookmarkWidget', {});
-exports.default = (pluginManager) => {
+function GridBookmarkWidgetF(pluginManager) {
     pluginManager.addWidgetType(() => {
         return new pluggableElementTypes_1.WidgetType({
             name: 'GridBookmarkWidget',
@@ -44,4 +44,5 @@ exports.default = (pluginManager) => {
         });
     });
     (0, Highlight_1.default)(pluginManager);
-};
+}
+exports.default = GridBookmarkWidgetF;

package/dist/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import Plugin from '@jbrowse/core/Plugin';
 import PluginManager from '@jbrowse/core/PluginManager';
-export default class extends Plugin {
+export default class GridBookmarkPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;
     configure(pluginManager: PluginManager): void;

package/dist/index.js CHANGED Viewed

@@ -11,7 +11,7 @@ const Bookmarks_1 = __importDefault(require("@mui/icons-material/Bookmarks"));
 const Highlight_1 = __importDefault(require("@mui/icons-material/Highlight"));
 const Label_1 = __importDefault(require("@mui/icons-material/Label"));
 const GridBookmarkWidget_1 = __importDefault(require("./GridBookmarkWidget"));
-class default_1 extends Plugin_1.default {
+class GridBookmarkPlugin extends Plugin_1.default {
     constructor() {
         super(...arguments);
         this.name = 'GridBookmarkPlugin';
@@ -180,4 +180,4 @@ class default_1 extends Plugin_1.default {
         }
     }
 }
-exports.default = default_1;
+exports.default = GridBookmarkPlugin;

package/esm/GridBookmarkWidget/components/BookmarkGrid.js CHANGED Viewed

@@ -1,11 +1,9 @@
-import React, { lazy, useState } from 'react';
+import React, { lazy } from 'react';
 import { observer } from 'mobx-react';
 import { Link } from '@mui/material';
 import { makeStyles } from 'tss-react/mui';
 import { DataGrid, GRID_CHECKBOX_SELECTION_COL_DEF } from '@mui/x-data-grid';
 import { getSession, assembleLocString, measureGridWidth, measureText, } from '@jbrowse/core/util';
-import { useResizeBar } from '@jbrowse/core/ui/useResizeBar';
-import ResizeBar from '@jbrowse/core/ui/ResizeBar';
 import ColorPicker from '@jbrowse/core/ui/ColorPicker';
 // locals
 import { navToBookmark } from '../utils';
@@ -22,7 +20,6 @@ const useStyles = makeStyles()(() => ({
 }));
 const BookmarkGrid = observer(function ({ model, }) {
     const { classes, cx } = useStyles();
-    const { ref, scrollLeft } = useResizeBar();
     const { bookmarks, bookmarksWithValidAssemblies, selectedAssemblies, selectedBookmarks, } = model;
     const session = getSession(model);
     const selectedSet = new Set(selectedAssemblies);
@@ -38,64 +35,62 @@ const BookmarkGrid = observer(function ({ model, }) {
             correspondingObj: region,
         };
     });
-    const [widths, setWidths] = useState([
+    const widths = [
         50,
         Math.max(measureText('Bookmark link', 12) + 30, measureGridWidth(rows.map(row => row.locString))),
         Math.max(measureText('Label', 12) + 30, measureGridWidth(rows.map(row => row.label))),
         Math.max(measureText('Assembly', 12) + 30, measureGridWidth(rows.map(row => row.assemblyName))),
         100,
-    ]);
-    return (React.createElement("div", { ref: ref },
-        React.createElement(ResizeBar, { widths: widths, setWidths: setWidths, scrollLeft: scrollLeft }),
-        React.createElement(DataGrid, { autoHeight: true, density: "compact", rows: rows, columns: [
-                {
-                    ...GRID_CHECKBOX_SELECTION_COL_DEF,
-                    width: widths[0],
-                },
-                {
-                    field: 'locString',
-                    headerName: 'Bookmark link',
-                    width: widths[1],
-                    renderCell: ({ value, row }) => (React.createElement(Link, { className: cx(classes.link, classes.cell), href: "#", onClick: async (event) => {
-                            event.preventDefault();
-                            const { views } = session;
-                            await navToBookmark(value, row.assemblyName, views, model);
-                        } }, value)),
-                },
-                {
-                    field: 'label',
-                    headerName: 'Label',
-                    width: widths[2],
-                    editable: true,
-                },
-                {
-                    field: 'assemblyName',
-                    headerName: 'Assembly',
-                    width: widths[3],
-                },
-                {
-                    field: 'highlight',
-                    headerName: 'Highlight',
-                    width: widths[4],
-                    renderCell: ({ value, row }) => (React.createElement(ColorPicker, { color: value || 'black', onChange: event => {
-                            model.updateBookmarkHighlight(row, event);
-                        } })),
-                },
-            ], onCellDoubleClick: ({ row }) => {
-                getSession(model).queueDialog(onClose => [
-                    EditBookmarkLabelDialog,
-                    { onClose, model, dialogRow: row },
-                ]);
-            }, processRowUpdate: row => {
-                const target = rows[row.id];
-                model.updateBookmarkLabel(target, row.label);
-                return row;
-            }, onProcessRowUpdateError: e => session.notifyError(`${e}`, e), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
-                if (bookmarksWithValidAssemblies.length > 0) {
-                    model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
-                        ...rows[value],
-                    })));
-                }
-            }, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true })));
+    ];
+    return (React.createElement(DataGrid, { autoHeight: true, density: "compact", rows: rows, columns: [
+            {
+                ...GRID_CHECKBOX_SELECTION_COL_DEF,
+                width: widths[0],
+            },
+            {
+                field: 'locString',
+                headerName: 'Bookmark link',
+                width: widths[1],
+                renderCell: ({ value, row }) => (React.createElement(Link, { className: cx(classes.link, classes.cell), href: "#", onClick: async (event) => {
+                        event.preventDefault();
+                        const { views } = session;
+                        await navToBookmark(value, row.assemblyName, views, model);
+                    } }, value)),
+            },
+            {
+                field: 'label',
+                headerName: 'Label',
+                width: widths[2],
+                editable: true,
+            },
+            {
+                field: 'assemblyName',
+                headerName: 'Assembly',
+                width: widths[3],
+            },
+            {
+                field: 'highlight',
+                headerName: 'Highlight',
+                width: widths[4],
+                renderCell: ({ value, row }) => (React.createElement(ColorPicker, { color: value || 'black', onChange: event => {
+                        model.updateBookmarkHighlight(row, event);
+                    } })),
+            },
+        ], onCellDoubleClick: ({ row }) => {
+            getSession(model).queueDialog(onClose => [
+                EditBookmarkLabelDialog,
+                { onClose, model, dialogRow: row },
+            ]);
+        }, processRowUpdate: row => {
+            const target = rows[row.id];
+            model.updateBookmarkLabel(target, row.label);
+            return row;
+        }, onProcessRowUpdateError: e => session.notifyError(`${e}`, e), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
+            if (bookmarksWithValidAssemblies.length > 0) {
+                model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
+                    ...rows[value],
+                })));
+            }
+        }, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true }));
 });
 export default BookmarkGrid;

package/esm/GridBookmarkWidget/components/Highlight/Highlight.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import { getSession, notEmpty } from '@jbrowse/core/util';
@@ -14,35 +14,26 @@ const useStyles = makeStyles()({
     },
 });
 const Highlight = observer(function Highlight({ model }) {
-    var _a;
     const { classes } = useStyles();
     const session = getSession(model);
-    const { showBookmarkHighlights, showBookmarkLabels } = model;
     const { assemblyManager } = session;
-    const assemblyNames = new Set(session.assemblyNames);
+    const { showBookmarkHighlights, showBookmarkLabels } = model;
     const bookmarkWidget = session.widgets.get('GridBookmark');
-    const bookmarks = useRef((_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) !== null && _a !== void 0 ? _a : []);
     useEffect(() => {
         if (!bookmarkWidget) {
-            const newBookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
-            bookmarks.current = newBookmarkWidget.bookmarks;
+            session.addWidget('GridBookmarkWidget', 'GridBookmark');
         }
     }, [session, bookmarkWidget]);
-    return showBookmarkHighlights && bookmarks.current
-        ? bookmarks.current
-            .filter(value => assemblyNames.has(value.assemblyName))
+    const set = new Set(model.assemblyNames);
+    return showBookmarkHighlights && (bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks)
+        ? bookmarkWidget.bookmarks
+            .filter(value => set.has(value.assemblyName))
             .map(r => {
             var _a;
             const asm = assemblyManager.get(r.assemblyName);
             const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
-            const s = model.bpToPx({
-                refName: refName,
-                coord: r.start,
-            });
-            const e = model.bpToPx({
-                refName: refName,
-                coord: r.end,
-            });
+            const s = model.bpToPx({ refName, coord: r.start });
+            const e = model.bpToPx({ refName, coord: r.end });
             return s && e
                 ? {
                     width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),

package/esm/GridBookmarkWidget/components/Highlight/OverviewHighlight.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { observer } from 'mobx-react';
 import { makeStyles } from 'tss-react/mui';
 import { getSession, notEmpty } from '@jbrowse/core/util';
@@ -10,27 +10,28 @@ const useStyles = makeStyles()({
     },
 });
 const OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
-    var _a;
     const { cytobandOffset } = model;
     const session = getSession(model);
     const { classes } = useStyles();
+    const { assemblyManager } = session;
     const { showBookmarkHighlights, showBookmarkLabels } = model;
-    const assemblyNames = new Set(session.assemblyNames);
     const bookmarkWidget = session.widgets.get('GridBookmark');
-    const bookmarks = useRef((_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) !== null && _a !== void 0 ? _a : []);
     useEffect(() => {
         if (!bookmarkWidget) {
-            const newBookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
-            bookmarks.current = newBookmarkWidget.bookmarks;
+            session.addWidget('GridBookmarkWidget', 'GridBookmark');
         }
     }, [session, bookmarkWidget]);
-    return showBookmarkHighlights && bookmarks.current
-        ? bookmarks.current
-            .filter(value => assemblyNames.has(value.assemblyName))
+    const assemblyNames = new Set(model.assemblyNames);
+    return showBookmarkHighlights && (bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks)
+        ? bookmarkWidget.bookmarks
+            .filter(r => assemblyNames.has(r.assemblyName))
             .map(r => {
+            var _a;
+            const asm = assemblyManager.get(r.assemblyName);
+            const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
             const rev = r.reversed;
-            const s = overview.bpToPx({ ...r, coord: rev ? r.end : r.start });
-            const e = overview.bpToPx({ ...r, coord: rev ? r.start : r.end });
+            const s = overview.bpToPx({ refName, coord: rev ? r.end : r.start });
+            const e = overview.bpToPx({ refName, coord: rev ? r.start : r.end });
             return s !== undefined && e !== undefined
                 ? {
                     width: Math.abs(e - s),

package/esm/GridBookmarkWidget/components/dialogs/ExportBookmarksDialog.js CHANGED Viewed

@@ -8,7 +8,9 @@ import GetAppIcon from '@mui/icons-material/GetApp';
 import { downloadBookmarkFile } from '../../utils';
 const useStyles = makeStyles()({
     flexItem: {
-        margin: 5,
+        display: 'flex',
+        alignItems: 'center',
+        gap: '5px',
     },
     container: {
         display: 'flex',
@@ -27,9 +29,9 @@ const ExportBookmarksDialog = observer(function ExportBookmarksDialog({ model, o
                 React.createElement("span", null, "All bookmarks will be exported."),
                 React.createElement("br", null),
                 React.createElement("span", null, "Use the checkboxes to select individual bookmarks to export."))) : ('Only selected bookmarks will be exported.')),
-            React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            React.createElement("div", { className: classes.flexItem },
                 React.createElement(Typography, null, "Format to download:"),
-                React.createElement(Select, { size: "small", className: classes.flexItem, "data-testid": "selectFileType", value: fileType, onChange: event => setFileType(event.target.value) },
+                React.createElement(Select, { size: "small", value: fileType, onChange: event => setFileType(event.target.value) },
                     React.createElement(MenuItem, { value: "BED" }, "BED"),
                     React.createElement(MenuItem, { value: "TSV" }, "TSV")))),
         React.createElement(DialogActions, null,

package/esm/GridBookmarkWidget/components/dialogs/ImportBookmarksDialog.js CHANGED Viewed

@@ -2,27 +2,25 @@ import React, { useState } from 'react';
 import { observer } from 'mobx-react';
 import { getSession } from '@jbrowse/core/util';
 import { isSessionWithShareURL } from '@jbrowse/core/util/types';
-import { FileSelector } from '@jbrowse/core/ui';
-import { Button, DialogContent, DialogActions, Typography, TextField, Accordion, AccordionSummary, AccordionDetails, Tooltip, } from '@mui/material';
+import { ErrorMessage, FileSelector } from '@jbrowse/core/ui';
+import { Accordion, AccordionSummary, AccordionDetails, Button, DialogContent, DialogActions, TextField, Typography, } from '@mui/material';
 import { openLocation } from '@jbrowse/core/util/io';
-import { Dialog } from '@jbrowse/core/ui';
-import AssemblySelector from '@jbrowse/core/ui/AssemblySelector';
+import { Dialog, AssemblySelector } from '@jbrowse/core/ui';
 import { makeStyles } from 'tss-react/mui';
 // icons
 import ImportIcon from '@mui/icons-material/Publish';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import HelpIcon from '@mui/icons-material/Help';
 import { fromUrlSafeB64 } from '../../utils';
 import { readSessionFromDynamo } from '../../sessionSharing';
 const useStyles = makeStyles()(theme => {
     var _a;
     return ({
-        flexItem: {
-            margin: 5,
-        },
         expandIcon: {
             color: ((_a = theme.palette.tertiary) === null || _a === void 0 ? void 0 : _a.contrastText) || '#fff',
         },
+        minWidth: {
+            minWidth: 500,
+        },
     });
 });
 async function getBookmarksFromShareLink(shareLink, shareURL) {
@@ -34,18 +32,35 @@ async function getBookmarksFromShareLink(shareLink, shareURL) {
     const sharedSession = JSON.parse(await fromUrlSafeB64(decryptedSession));
     return sharedSession.sharedBookmarks;
 }
-async function getBookmarksFromFile(location, selectedAsm) {
-    const data = await openLocation(location).readFile('utf8');
-    return data
-        .split(/\n|\r\n|\r/)
-        .filter(f => !!f.trim())
-        .filter(f => !f.startsWith('#') &&
-        !f.startsWith('track') &&
-        !f.startsWith('browser'))
+function guessFileType(header) {
+    return header.startsWith('chrom') && header.includes('assembly_name')
+        ? 'TSV'
+        : 'BED';
+}
+async function getBookmarksFromTSVFile(lines) {
+    if (lines[0].startsWith('chrom')) {
+        lines = lines.slice(1);
+    }
+    return lines
+        .filter(f => !f.startsWith('#'))
+        .map(line => {
+        const [refName, start, end, label, assemblyName] = line.split('\t');
+        return {
+            assemblyName: assemblyName,
+            refName,
+            start: +start,
+            end: +end,
+            label: label === '.' ? undefined : label,
+        };
+    });
+}
+async function getBookmarksFromBEDFile(lines, selectedAsm) {
+    return lines
+        .filter(f => !f.startsWith('#'))
         .map(line => {
-        const [refName, start, end, label, assembly] = line.split('\t');
+        const [refName, start, end, label] = line.split('\t');
         return {
-            assemblyName: assembly !== null && assembly !== void 0 ? assembly : selectedAsm,
+            assemblyName: selectedAsm,
             refName,
             start: +start,
             end: +end,
@@ -63,31 +78,39 @@ const ImportBookmarksDialog = observer(function ({ onClose, model, }) {
     const [selectedAsm, setSelectedAsm] = useState(assemblyNames[0]);
     const [expanded, setExpanded] = useState('shareLinkAccordion');
     return (React.createElement(Dialog, { open: true, onClose: onClose, maxWidth: "xl", title: "Import bookmarks" },
-        React.createElement(DialogContent, null,
+        React.createElement(DialogContent, { className: classes.minWidth },
             React.createElement(Accordion, { expanded: expanded === 'shareLinkAccordion', onChange: () => setExpanded('shareLinkAccordion') },
                 React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.expandIcon }) },
-                    React.createElement(Typography, { style: { display: 'flex', alignItems: 'center', gap: '5px' } },
-                        "Import from share link",
-                        ' ',
-                        React.createElement(Tooltip, { title: "The appropriate share link for sharing bookmarks is one generated via the 'Share' button in the 'Bookmarked regions' drawer. Paste it below to import shared bookmarks." },
-                            React.createElement(HelpIcon, null)))),
+                    React.createElement(Typography, { style: { display: 'flex', alignItems: 'center', gap: '5px' } }, "Import from share link")),
                 React.createElement(AccordionDetails, null,
-                    React.createElement(TextField, { label: "Enter URL", variant: "outlined", style: { width: '100%' }, value: shareLink, onChange: e => setShareLink(e.target.value) }))),
+                    React.createElement(Typography, null, "Paste a bookmark share link generated by the 'Share' button from the bookmarks widget"),
+                    React.createElement(TextField, { label: "Enter Share URL", variant: "outlined", fullWidth: true, value: shareLink, onChange: e => setShareLink(e.target.value) }))),
             React.createElement(Accordion, { expanded: expanded === 'fileAccordion', onChange: () => setExpanded('fileAccordion') },
                 React.createElement(AccordionSummary, { expandIcon: React.createElement(ExpandMoreIcon, { className: classes.expandIcon }) },
                     React.createElement(Typography, null, "Import from file")),
                 React.createElement(AccordionDetails, null,
-                    React.createElement(FileSelector, { location: location, setLocation: setLocation, name: "File", description: "Choose a BED or TSV format file to import." }),
-                    React.createElement(AssemblySelector, { onChange: val => setSelectedAsm(val), helperText: `Select the assembly your bookmarks belong to (BED or TSV without assembly column).`, session: session, selected: selectedAsm }))),
-            error ? (React.createElement(Typography, { color: "error", variant: "h6" }, `${error}`)) : null),
+                    React.createElement(FileSelector, { location: location, setLocation: setLocation, name: "File", description: `Choose a BED or TSV format file to import. Required TSV column headers are "chrom, start, end, label, assembly_name".` }),
+                    React.createElement(AssemblySelector, { onChange: val => setSelectedAsm(val), helperText: `Select the assembly for BED file.`, session: session, selected: selectedAsm }))),
+            error ? React.createElement(ErrorMessage, { error: error }) : null),
         React.createElement(DialogActions, null,
             React.createElement(Button, { variant: "contained", color: "secondary", onClick: onClose }, "Cancel"),
-            React.createElement(Button, { className: classes.flexItem, "data-testid": "dialogImport", variant: "contained", color: "primary", disabled: !location && !shareLink, startIcon: React.createElement(ImportIcon, null), onClick: async () => {
+            React.createElement(Button, { "data-testid": "dialogImport", variant: "contained", color: "primary", disabled: !location && !shareLink, startIcon: React.createElement(ImportIcon, null), onClick: async () => {
                     try {
-                        if (location) {
-                            model.importBookmarks(await getBookmarksFromFile(location, selectedAsm));
+                        if (expanded === 'fileAccordion' && location) {
+                            const data = await openLocation(location).readFile('utf8');
+                            const lines = data.split(/\n|\r\n|\r/).filter(f => !!f.trim());
+                            const fileType = guessFileType(lines[0]);
+                            if (fileType === 'BED') {
+                                model.importBookmarks(await getBookmarksFromBEDFile(lines, selectedAsm));
+                            }
+                            else {
+                                // TSV
+                                model.importBookmarks(await getBookmarksFromTSVFile(lines));
+                            }
                         }
-                        else if (shareLink && isSessionWithShareURL(session)) {
+                        else if (expanded === 'shareLinkAccordion' &&
+                            shareLink &&
+                            isSessionWithShareURL(session)) {
                             model.importBookmarks(await getBookmarksFromShareLink(shareLink, session.shareURL));
                         }
                         onClose();

package/esm/GridBookmarkWidget/index.d.ts CHANGED Viewed

@@ -1,3 +1,2 @@
 import PluginManager from '@jbrowse/core/PluginManager';
-declare const _default: (pluginManager: PluginManager) => void;
-export default _default;
+export default function GridBookmarkWidgetF(pluginManager: PluginManager): void;

package/esm/GridBookmarkWidget/index.js CHANGED Viewed

@@ -5,7 +5,7 @@ import { WidgetType } from '@jbrowse/core/pluggableElementTypes';
 import stateModelFactory from './model';
 import AddHighlightModelF from './components/Highlight';
 const configSchema = ConfigurationSchema('GridBookmarkWidget', {});
-export default (pluginManager) => {
+export default function GridBookmarkWidgetF(pluginManager) {
     pluginManager.addWidgetType(() => {
         return new WidgetType({
             name: 'GridBookmarkWidget',
@@ -16,4 +16,4 @@ export default (pluginManager) => {
         });
     });
     AddHighlightModelF(pluginManager);
-};
+}

package/esm/index.d.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import Plugin from '@jbrowse/core/Plugin';
 import PluginManager from '@jbrowse/core/PluginManager';
-export default class extends Plugin {
+export default class GridBookmarkPlugin extends Plugin {
     name: string;
     install(pluginManager: PluginManager): void;
     configure(pluginManager: PluginManager): void;

package/esm/index.js CHANGED Viewed

@@ -6,7 +6,7 @@ import BookmarksIcon from '@mui/icons-material/Bookmarks';
 import HighlightIcon from '@mui/icons-material/Highlight';
 import LabelIcon from '@mui/icons-material/Label';
 import GridBookmarkWidgetF from './GridBookmarkWidget';
-export default class extends Plugin {
+export default class GridBookmarkPlugin extends Plugin {
     constructor() {
         super(...arguments);
         this.name = 'GridBookmarkPlugin';

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-grid-bookmark",
-  "version": "2.11.0",
+  "version": "2.11.2",
   "description": "JBrowse 2 grid bookmark widget",
   "keywords": [
     "jbrowse",
@@ -59,5 +59,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "3d43a820b9274a6160aa4dc15616147f390d9094"
+  "gitHead": "511048cb6965f0bf624c96de244e7fd47fce17d6"
 }