@jbrowse/plugin-grid-bookmark 2.10.3 → 2.11.1

package/dist/GridBookmarkWidget/components/BookmarkGrid.js

@@ -118,7 +118,7 @@ const BookmarkGrid = (0, mobx_react_1.observer)(function ({ model, }) {
                 const target = rows[row.id];
                 model.updateBookmarkLabel(target, row.label);
                 return row;
-            }, onProcessRowUpdateError: e => session.notify(e.message, 'error'), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
+            }, onProcessRowUpdateError: e => session.notifyError(`${e}`, e), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
                 if (bookmarksWithValidAssemblies.length > 0) {
                     model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
                         ...rows[value],

package/dist/GridBookmarkWidget/components/Highlight/Highlight.d.ts

@@ -3,5 +3,5 @@ import { IExtendedLGV } from '../../model';
 type LGV = IExtendedLGV;
 declare const Highlight: ({ model }: {
     model: LGV;
-}) => React.JSX.Element;
+}) => React.JSX.Element[] | null;
 export default Highlight;

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

@@ -38,38 +38,29 @@ const useStyles = (0, mui_1.makeStyles)()({
     highlight: {
         height: '100%',
         position: 'absolute',
-        textAlign: 'center',
         overflow: 'hidden',
-        display: 'flex',
-        alignItems: 'start',
     },
 });
 const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
     var _a;
     const { classes } = useStyles();
     const session = (0, util_1.getSession)(model);
+    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 (react_1.default.createElement(react_1.default.Fragment, null, showBookmarkHighlights && bookmarks.current
-        ? bookmarks.current
-            .filter(value => assemblyNames.has(value.assemblyName))
-            .map(r => {
-            const s = model.bpToPx({
-                refName: r.refName,
-                coord: r.start,
-            });
-            const e = model.bpToPx({
-                refName: r.refName,
-                coord: r.end,
-            });
+    const set = new Set(model.assemblyNames);
+    return showBookmarkHighlights
+        ? (_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) === null || _a === void 0 ? void 0 : _a.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, coord: r.start });
+            const e = model.bpToPx({ refName, coord: r.end });
             return s && e
                 ? {
                     width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
@@ -78,14 +69,16 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
                     label: r.label,
                 }
                 : undefined;
-        })
-            .filter(util_1.notEmpty)
-            .map(({ left, width, highlight, label }, idx) => (react_1.default.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: { left, width, background: highlight } }, showBookmarkLabels ? (react_1.default.createElement(material_1.Tooltip, { title: label, arrow: true },
+        }).filter(util_1.notEmpty).map(({ left, width, highlight, label }, idx) => (react_1.default.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
+                left,
+                width,
+                background: highlight,
+            } }, showBookmarkLabels ? (react_1.default.createElement(material_1.Tooltip, { title: label, arrow: true },
             react_1.default.createElement(Bookmark_1.default, { fontSize: "small", sx: {
                     color: `${(0, colord_1.colord)(highlight).alpha() !== 0
                         ? (0, colord_1.colord)(highlight).alpha(0.8).toRgbString()
                         : (0, colord_1.colord)(highlight).alpha(0).toRgbString()}`,
                 } }))) : null)))
-        : null));
+        : null;
 });
 exports.default = Highlight;

package/dist/GridBookmarkWidget/components/Highlight/OverviewHighlight.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import { IExtendedLGV } from '../../model';
+type LGV = IExtendedLGV;
+declare const OverviewHighlight: ({ model, overview, }: {
+    model: LGV;
+    overview: Base1DViewModel;
+}) => React.JSX.Element[] | null;
+export default OverviewHighlight;

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

@@ -0,0 +1,79 @@
+"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 mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const useStyles = (0, mui_1.makeStyles)()({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+    },
+});
+const OverviewHighlight = (0, mobx_react_1.observer)(function OverviewHighlight({ model, overview, }) {
+    const { cytobandOffset } = model;
+    const session = (0, util_1.getSession)(model);
+    const { classes } = useStyles();
+    const { assemblyManager } = session;
+    const { showBookmarkHighlights, showBookmarkLabels } = model;
+    const bookmarkWidget = session.widgets.get('GridBookmark');
+    (0, react_1.useEffect)(() => {
+        if (!bookmarkWidget) {
+            session.addWidget('GridBookmarkWidget', 'GridBookmark');
+        }
+    }, [session, bookmarkWidget]);
+    const assemblyNames = new Set(model.assemblyNames);
+    return showBookmarkHighlights
+        ? bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : 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({ 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),
+                    left: s + cytobandOffset,
+                    highlight: r.highlight,
+                    label: r.label,
+                }
+                : undefined;
+        }).filter(util_1.notEmpty).map((obj, idx) => {
+            const { left, width, highlight, label } = obj;
+            return (react_1.default.createElement(material_1.Tooltip, { key: JSON.stringify(obj) + '-' + idx, title: showBookmarkLabels ? label : '', arrow: true },
+                react_1.default.createElement("div", { className: classes.highlight, style: {
+                        left,
+                        width,
+                        background: highlight,
+                        borderLeft: `1px solid ${highlight}`,
+                        borderRight: `1px solid ${highlight}`,
+                    } })));
+        })
+        : null;
+});
+exports.default = OverviewHighlight;

package/dist/GridBookmarkWidget/components/Highlight/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 // locals
 const Highlight_1 = __importDefault(require("./Highlight"));
+const OverviewHighlight_1 = __importDefault(require("./OverviewHighlight"));
 function AddHighlightModelF(pluginManager) {
     pluginManager.addToExtensionPoint('LinearGenomeView-TracksContainerComponent', 
     // @ts-expect-error
@@ -15,5 +16,13 @@ function AddHighlightModelF(pluginManager) {
             react_1.default.createElement(Highlight_1.default, { key: `highlight_grid_bookmark`, model: model }),
         ];
     });
+    pluginManager.addToExtensionPoint('LinearGenomeView-OverviewScalebarComponent', 
+    // @ts-expect-error
+    (rest = [], { model, overview }) => {
+        return [
+            ...rest,
+            react_1.default.createElement(OverviewHighlight_1.default, { key: `overview_highlight_grid_bookmark`, model: model, overview: overview }),
+        ];
+    });
 }
 exports.default = AddHighlightModelF;

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

@@ -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

@@ -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

@@ -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

@@ -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/GridBookmarkWidget/model.js

@@ -20,7 +20,7 @@ const LabeledRegionModel = mobx_state_tree_1.types
 const SharedBookmarksModel = mobx_state_tree_1.types.model('SharedBookmarksModel', {
     sharedBookmarks: mobx_state_tree_1.types.maybe(mobx_state_tree_1.types.array(LabeledRegionModel)),
 });
-const localStorageKeyF = () => typeof window !== undefined
+const localStorageKeyF = () => typeof window !== 'undefined'
     ? `bookmarks-${[window.location.host + window.location.pathname].join('-')}`
     : 'empty';
 /**

package/dist/GridBookmarkWidget/utils.js

@@ -49,7 +49,7 @@ async function navToBookmark(locString, assembly, views, model) {
     }
     catch (e) {
         console.error(e);
-        session.notify(`${e}`, 'error');
+        session.notifyError(`${e}`, e);
     }
 }
 exports.navToBookmark = navToBookmark;

package/dist/index.d.ts

@@ -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

@@ -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

@@ -90,7 +90,7 @@ const BookmarkGrid = observer(function ({ model, }) {
                 const target = rows[row.id];
                 model.updateBookmarkLabel(target, row.label);
                 return row;
-            }, onProcessRowUpdateError: e => session.notify(e.message, 'error'), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
+            }, onProcessRowUpdateError: e => session.notifyError(`${e}`, e), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
                 if (bookmarksWithValidAssemblies.length > 0) {
                     model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
                         ...rows[value],

package/esm/GridBookmarkWidget/components/Highlight/Highlight.d.ts

@@ -3,5 +3,5 @@ import { IExtendedLGV } from '../../model';
 type LGV = IExtendedLGV;
 declare const Highlight: ({ model }: {
     model: LGV;
-}) => React.JSX.Element;
+}) => React.JSX.Element[] | null;
 export default Highlight;

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

@@ -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,38 +10,29 @@ const useStyles = makeStyles()({
     highlight: {
         height: '100%',
         position: 'absolute',
-        textAlign: 'center',
         overflow: 'hidden',
-        display: 'flex',
-        alignItems: 'start',
     },
 });
 const Highlight = observer(function Highlight({ model }) {
     var _a;
     const { classes } = useStyles();
     const session = getSession(model);
+    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 (React.createElement(React.Fragment, null, showBookmarkHighlights && bookmarks.current
-        ? bookmarks.current
-            .filter(value => assemblyNames.has(value.assemblyName))
-            .map(r => {
-            const s = model.bpToPx({
-                refName: r.refName,
-                coord: r.start,
-            });
-            const e = model.bpToPx({
-                refName: r.refName,
-                coord: r.end,
-            });
+    const set = new Set(model.assemblyNames);
+    return showBookmarkHighlights
+        ? (_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) === null || _a === void 0 ? void 0 : _a.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, coord: r.start });
+            const e = model.bpToPx({ refName, coord: r.end });
             return s && e
                 ? {
                     width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
@@ -50,14 +41,16 @@ const Highlight = observer(function Highlight({ model }) {
                     label: r.label,
                 }
                 : undefined;
-        })
-            .filter(notEmpty)
-            .map(({ left, width, highlight, label }, idx) => (React.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: { left, width, background: highlight } }, showBookmarkLabels ? (React.createElement(Tooltip, { title: label, arrow: true },
+        }).filter(notEmpty).map(({ left, width, highlight, label }, idx) => (React.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
+                left,
+                width,
+                background: highlight,
+            } }, showBookmarkLabels ? (React.createElement(Tooltip, { title: label, arrow: true },
             React.createElement(BookmarkIcon, { fontSize: "small", sx: {
                     color: `${colord(highlight).alpha() !== 0
                         ? colord(highlight).alpha(0.8).toRgbString()
                         : colord(highlight).alpha(0).toRgbString()}`,
                 } }))) : null)))
-        : null));
+        : null;
 });
 export default Highlight;

package/esm/GridBookmarkWidget/components/Highlight/OverviewHighlight.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Base1DViewModel } from '@jbrowse/core/util/Base1DViewModel';
+import { IExtendedLGV } from '../../model';
+type LGV = IExtendedLGV;
+declare const OverviewHighlight: ({ model, overview, }: {
+    model: LGV;
+    overview: Base1DViewModel;
+}) => React.JSX.Element[] | null;
+export default OverviewHighlight;

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

@@ -0,0 +1,54 @@
+import React, { useEffect } from 'react';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import { getSession, notEmpty } from '@jbrowse/core/util';
+import { Tooltip } from '@mui/material';
+const useStyles = makeStyles()({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+    },
+});
+const OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
+    const { cytobandOffset } = model;
+    const session = getSession(model);
+    const { classes } = useStyles();
+    const { assemblyManager } = session;
+    const { showBookmarkHighlights, showBookmarkLabels } = model;
+    const bookmarkWidget = session.widgets.get('GridBookmark');
+    useEffect(() => {
+        if (!bookmarkWidget) {
+            session.addWidget('GridBookmarkWidget', 'GridBookmark');
+        }
+    }, [session, bookmarkWidget]);
+    const assemblyNames = new Set(model.assemblyNames);
+    return showBookmarkHighlights
+        ? bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : 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({ 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),
+                    left: s + cytobandOffset,
+                    highlight: r.highlight,
+                    label: r.label,
+                }
+                : undefined;
+        }).filter(notEmpty).map((obj, idx) => {
+            const { left, width, highlight, label } = obj;
+            return (React.createElement(Tooltip, { key: JSON.stringify(obj) + '-' + idx, title: showBookmarkLabels ? label : '', arrow: true },
+                React.createElement("div", { className: classes.highlight, style: {
+                        left,
+                        width,
+                        background: highlight,
+                        borderLeft: `1px solid ${highlight}`,
+                        borderRight: `1px solid ${highlight}`,
+                    } })));
+        })
+        : null;
+});
+export default OverviewHighlight;

package/esm/GridBookmarkWidget/components/Highlight/index.js

@@ -1,6 +1,7 @@
 import React from 'react';
 // locals
 import Highlight from './Highlight';
+import OverviewHighlight from './OverviewHighlight';
 export default function AddHighlightModelF(pluginManager) {
     pluginManager.addToExtensionPoint('LinearGenomeView-TracksContainerComponent', 
     // @ts-expect-error
@@ -10,4 +11,12 @@ export default function AddHighlightModelF(pluginManager) {
             React.createElement(Highlight, { key: `highlight_grid_bookmark`, model: model }),
         ];
     });
+    pluginManager.addToExtensionPoint('LinearGenomeView-OverviewScalebarComponent', 
+    // @ts-expect-error
+    (rest = [], { model, overview }) => {
+        return [
+            ...rest,
+            React.createElement(OverviewHighlight, { key: `overview_highlight_grid_bookmark`, model: model, overview: overview }),
+        ];
+    });
 }

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

@@ -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

@@ -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

@@ -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

@@ -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/GridBookmarkWidget/model.js

@@ -18,7 +18,7 @@ const LabeledRegionModel = types
 const SharedBookmarksModel = types.model('SharedBookmarksModel', {
     sharedBookmarks: types.maybe(types.array(LabeledRegionModel)),
 });
-const localStorageKeyF = () => typeof window !== undefined
+const localStorageKeyF = () => typeof window !== 'undefined'
     ? `bookmarks-${[window.location.host + window.location.pathname].join('-')}`
     : 'empty';
 /**

package/esm/GridBookmarkWidget/utils.js

@@ -23,7 +23,7 @@ export async function navToBookmark(locString, assembly, views, model) {
     }
     catch (e) {
         console.error(e);
-        session.notify(`${e}`, 'error');
+        session.notifyError(`${e}`, e);
     }
 }
 export function downloadBookmarkFile(fileFormat, model) {

package/esm/index.d.ts

@@ -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

@@ -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

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-grid-bookmark",
-  "version": "2.10.3",
+  "version": "2.11.1",
   "description": "JBrowse 2 grid bookmark widget",
   "keywords": [
     "jbrowse",
@@ -46,7 +46,7 @@
     "@jbrowse/plugin-config": "^2.0.0",
     "@jbrowse/plugin-linear-genome-view": "^2.0.0",
     "@mui/material": "^5.0.0",
-    "@mui/x-data-grid": "^6.0.1",
+    "@mui/x-data-grid": "^7.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.0",
     "mobx-state-tree": "^5.0.0",
@@ -59,5 +59,5 @@
   "distModule": "esm/index.js",
   "srcModule": "src/index.ts",
   "module": "esm/index.js",
-  "gitHead": "c8fc800cd17decd72b2e971c7a6add3b95214e72"
+  "gitHead": "11b28d66d782eb06f92ccb993108bb6c3c82819e"
 }