@jbrowse/plugin-grid-bookmark 2.8.0 → 2.10.0

package/dist/GridBookmarkWidget/components/BookmarkGrid.js

@@ -32,11 +32,12 @@ 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");
-// locals
-const utils_1 = require("../utils");
 const useResizeBar_1 = require("@jbrowse/core/ui/useResizeBar");
 const ResizeBar_1 = __importDefault(require("@jbrowse/core/ui/ResizeBar"));
-const EditBookmarkLabelDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./EditBookmarkLabelDialog'))));
+const ColorPicker_1 = __importDefault(require("@jbrowse/core/ui/ColorPicker"));
+// locals
+const utils_1 = require("../utils");
+const EditBookmarkLabelDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/EditBookmarkLabelDialog'))));
 const useStyles = (0, mui_1.makeStyles)()(() => ({
     link: {
         cursor: 'pointer',
@@ -49,7 +50,6 @@ const useStyles = (0, mui_1.makeStyles)()(() => ({
 }));
 const BookmarkGrid = (0, mobx_react_1.observer)(function ({ model, }) {
     const { classes, cx } = useStyles();
-    const [dialogRow, setDialogRow] = (0, react_1.useState)();
     const { ref, scrollLeft } = (0, useResizeBar_1.useResizeBar)();
     const { bookmarks, bookmarksWithValidAssemblies, selectedAssemblies, selectedBookmarks, } = model;
     const session = (0, util_1.getSession)(model);
@@ -66,55 +66,64 @@ const BookmarkGrid = (0, mobx_react_1.observer)(function ({ model, }) {
             correspondingObj: region,
         };
     });
-    // reset selections if bookmarked regions change
-    // needed especially if bookmarked regions are deleted, then
     const [widths, setWidths] = (0, react_1.useState)([
         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(react_1.default.Fragment, null,
-        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],
-                    },
-                ], onCellDoubleClick: ({ row }) => setDialogRow(row), processRowUpdate: row => {
-                    const target = rows[row.id];
-                    model.updateBookmarkLabel(target, row.label);
-                    return row;
-                }, onProcessRowUpdateError: e => session.notify(e.message, 'error'), checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
-                    if (bookmarksWithValidAssemblies.length > 0) {
-                        model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
-                            ...rows[value],
-                        })));
-                    }
-                }, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true })),
-        dialogRow ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
-            react_1.default.createElement(EditBookmarkLabelDialog, { onClose: () => setDialogRow(undefined), model: model, dialogRow: dialogRow }))) : null));
+    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.notify(e.message, 'error'), 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/GridBookmarkWidget.js

@@ -1,22 +1,58 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
-const material_1 = require("@mui/material");
 const mui_1 = require("tss-react/mui");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const CascadingMenuButton_1 = __importDefault(require("@jbrowse/core/ui/CascadingMenuButton"));
 // locals
 const BookmarkGrid_1 = __importDefault(require("./BookmarkGrid"));
-const DeleteBookmarks_1 = __importDefault(require("./DeleteBookmarks"));
-const ExportBookmarks_1 = __importDefault(require("./ExportBookmarks"));
-const ImportBookmarks_1 = __importDefault(require("./ImportBookmarks"));
 const AssemblySelector_1 = __importDefault(require("./AssemblySelector"));
-const ShareBookmarks_1 = __importDefault(require("./ShareBookmarks"));
+// icons
+const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
+const GetApp_1 = __importDefault(require("@mui/icons-material/GetApp"));
+const Publish_1 = __importDefault(require("@mui/icons-material/Publish"));
+const Settings_1 = __importDefault(require("@mui/icons-material/Settings"));
+const Palette_1 = __importDefault(require("@mui/icons-material/Palette"));
+const Share_1 = __importDefault(require("@mui/icons-material/Share"));
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+// lazies
+const ExportBookmarksDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/ExportBookmarksDialog'))));
+const ImportBookmarksDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/ImportBookmarksDialog'))));
+const ShareBookmarksDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/ShareBookmarksDialog'))));
+const HighlightSettingsDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/HighlightSettingsDialog'))));
+const EditHighlightColorDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/EditHighlightColorDialog'))));
+const DeleteBookmarksDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./dialogs/DeleteBookmarksDialog'))));
 const useStyles = (0, mui_1.makeStyles)()({
-    card: {
-        marginTop: 5,
+    flex: {
+        display: 'flex',
     },
 });
 const GridBookmarkWidget = (0, mobx_react_1.observer)(function GridBookmarkWidget({ model, }) {
@@ -24,19 +60,78 @@ const GridBookmarkWidget = (0, mobx_react_1.observer)(function GridBookmarkWidge
     if (!model) {
         return null;
     }
-    return (react_1.default.createElement("div", { className: classes.card },
-        react_1.default.createElement("div", null,
-            react_1.default.createElement(ExportBookmarks_1.default, { model: model }),
-            react_1.default.createElement(ImportBookmarks_1.default, { model: model }),
-            react_1.default.createElement(ShareBookmarks_1.default, { model: model }),
-            react_1.default.createElement(DeleteBookmarks_1.default, { model: model })),
+    return (react_1.default.createElement("div", null,
         react_1.default.createElement(material_1.Alert, { severity: "info" },
             "Click and type within the ",
             react_1.default.createElement("strong", null, "label"),
             " field to annotate your bookmark. Double click the ",
             react_1.default.createElement("strong", null, "label"),
             " field to do so within a dialog."),
-        react_1.default.createElement(AssemblySelector_1.default, { model: model }),
+        react_1.default.createElement("div", { className: classes.flex },
+            react_1.default.createElement(CascadingMenuButton_1.default, { "data-testid": "grid_bookmark_menu", menuItems: [
+                    {
+                        label: 'Export bookmarks',
+                        icon: GetApp_1.default,
+                        onClick: () => {
+                            (0, util_1.getSession)(model).queueDialog(onClose => [
+                                ExportBookmarksDialog,
+                                { onClose, model },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Import',
+                        icon: Publish_1.default,
+                        onClick: () => {
+                            (0, util_1.getSession)(model).queueDialog(onClose => [
+                                ImportBookmarksDialog,
+                                { model, onClose },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Delete',
+                        icon: Delete_1.default,
+                        onClick: () => {
+                            (0, util_1.getSession)(model).queueDialog(onClose => [
+                                DeleteBookmarksDialog,
+                                { model, onClose },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Share',
+                        icon: Share_1.default,
+                        onClick: () => {
+                            (0, util_1.getSession)(model).queueDialog(onClose => [
+                                ShareBookmarksDialog,
+                                { model, onClose },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Edit colors',
+                        icon: Palette_1.default,
+                        onClick: () => {
+                            (0, util_1.getSession)(model).queueDialog(onClose => [
+                                EditHighlightColorDialog,
+                                { model, onClose },
+                            ]);
+                        },
+                    },
+                    {
+                        label: 'Settings',
+                        icon: Settings_1.default,
+                        onClick: () => {
+                            (0, util_1.getSession)(model).queueDialog(onClose => [
+                                HighlightSettingsDialog,
+                                { model, onClose },
+                            ]);
+                        },
+                    },
+                ] },
+                react_1.default.createElement(Menu_1.default, null)),
+            react_1.default.createElement(AssemblySelector_1.default, { model: model })),
         react_1.default.createElement(BookmarkGrid_1.default, { model: model })));
 });
 exports.default = GridBookmarkWidget;

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

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

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

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const util_1 = require("@jbrowse/core/util");
+const colord_1 = require("@jbrowse/core/util/colord");
+// icons
+const Bookmark_1 = __importDefault(require("@mui/icons-material/Bookmark"));
+// locals
+const material_1 = require("@mui/material");
+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 { 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, 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,
+            });
+            return s && e
+                ? {
+                    width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
+                    left: Math.min(s.offsetPx, e.offsetPx) - model.offsetPx,
+                    highlight: r.highlight,
+                    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 },
+            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));
+});
+exports.default = Highlight;

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

@@ -0,0 +1,2 @@
+import PluginManager from '@jbrowse/core/PluginManager';
+export default function AddHighlightModelF(pluginManager: PluginManager): void;

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

@@ -0,0 +1,19 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+// locals
+const Highlight_1 = __importDefault(require("./Highlight"));
+function AddHighlightModelF(pluginManager) {
+    pluginManager.addToExtensionPoint('LinearGenomeView-TracksContainerComponent', 
+    // @ts-expect-error
+    (rest = [], { model }) => {
+        return [
+            ...rest,
+            react_1.default.createElement(Highlight_1.default, { key: `highlight_grid_bookmark`, model: model }),
+        ];
+    });
+}
+exports.default = AddHighlightModelF;

package/dist/GridBookmarkWidget/components/{DeleteBookmarksDialog.d.ts → dialogs/DeleteBookmarksDialog.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridBookmarkModel } from '../model';
+import { GridBookmarkModel } from '../../model';
 declare const DeleteBookmarksDialog: ({ onClose, model, }: {
     onClose: () => void;
     model: GridBookmarkModel;

package/{esm/GridBookmarkWidget/components → dist/GridBookmarkWidget/components/dialogs}/EditBookmarkLabelDialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridBookmarkModel, IExtendedLabeledRegionModel } from '../model';
+import { GridBookmarkModel, IExtendedLabeledRegionModel } from '../../model';
 declare const EditBookmarkLabelDialog: ({ model, onClose, dialogRow, }: {
     model: GridBookmarkModel;
     dialogRow: IExtendedLabeledRegionModel;

package/dist/GridBookmarkWidget/components/dialogs/EditHighlightColorDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { GridBookmarkModel } from '../../model';
+declare const EditHighlightColorDialog: ({ onClose, model, }: {
+    onClose: () => void;
+    model: GridBookmarkModel;
+}) => React.JSX.Element;
+export default EditHighlightColorDialog;

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

@@ -0,0 +1,48 @@
+"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 material_1 = require("@mui/material");
+const ui_1 = require("@jbrowse/core/ui");
+const ColorPicker_1 = require("@jbrowse/core/ui/ColorPicker");
+const EditHighlightColorDialog = (0, mobx_react_1.observer)(function ({ onClose, model, }) {
+    var _a, _b;
+    const { selectedBookmarks } = model;
+    const editNone = selectedBookmarks.length === 0;
+    const [color, setColor] = (0, react_1.useState)((_b = (_a = selectedBookmarks[0]) === null || _a === void 0 ? void 0 : _a.highlight) !== null && _b !== void 0 ? _b : 'rgba(247, 129, 192, 0.35)');
+    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: onClose, title: "Highlight bookmarks" },
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement(material_1.Typography, { variant: "h6" }, "Bulk highlight selector"),
+            react_1.default.createElement(material_1.Alert, { severity: "info" }, editNone ? (react_1.default.createElement("span", null, "Use the checkboxes to select individual bookmarks to edit.")) : ('Only selected bookmarks will be edited.')),
+            !editNone ? (react_1.default.createElement(ColorPicker_1.ColorPicker, { color: color, onChange: event => setColor(event) })) : 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, { variant: "contained", color: "primary", onClick: () => {
+                    model.updateBulkBookmarkHighlights(color);
+                    onClose();
+                } }, "Confirm"))));
+});
+exports.default = EditHighlightColorDialog;

package/dist/GridBookmarkWidget/components/{ExportBookmarksDialog.d.ts → dialogs/ExportBookmarksDialog.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridBookmarkModel } from '../model';
+import { GridBookmarkModel } from '../../model';
 declare const ExportBookmarksDialog: ({ model, onClose, }: {
     model: GridBookmarkModel;
     onClose: (arg: boolean) => void;

package/dist/GridBookmarkWidget/components/{ExportBookmarksDialog.js → dialogs/ExportBookmarksDialog.js}

@@ -29,22 +29,28 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importStar(require("react"));
 const mobx_react_1 = require("mobx-react");
 const material_1 = require("@mui/material");
-const GetApp_1 = __importDefault(require("@mui/icons-material/GetApp"));
 const mui_1 = require("tss-react/mui");
 const ui_1 = require("@jbrowse/core/ui");
-const utils_1 = require("../utils");
-const useStyles = (0, mui_1.makeStyles)()(() => ({
+// Icons
+const GetApp_1 = __importDefault(require("@mui/icons-material/GetApp"));
+const utils_1 = require("../../utils");
+const useStyles = (0, mui_1.makeStyles)()({
     flexItem: {
         margin: 5,
     },
-}));
+    container: {
+        display: 'flex',
+        flexFlow: 'column',
+        gap: '5px',
+    },
+});
 const ExportBookmarksDialog = (0, mobx_react_1.observer)(function ExportBookmarksDialog({ model, onClose, }) {
     const { classes } = useStyles();
     const [fileType, setFileType] = (0, react_1.useState)('BED');
     const { selectedBookmarks } = model;
     const exportAll = selectedBookmarks.length === 0;
     return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: onClose, title: "Export bookmarks" },
-        react_1.default.createElement(material_1.DialogContent, { style: { display: 'flex', flexFlow: 'column', gap: '5px' } },
+        react_1.default.createElement(material_1.DialogContent, { className: classes.container },
             react_1.default.createElement(material_1.Alert, { severity: "info" }, exportAll ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement("span", null, "All bookmarks will be exported."),
                 react_1.default.createElement("br", null),
@@ -55,7 +61,7 @@ const ExportBookmarksDialog = (0, mobx_react_1.observer)(function ExportBookmark
                     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,
-            react_1.default.createElement(material_1.Button, { className: classes.flexItem, "data-testid": "dialogDownload", variant: "contained", color: "primary", startIcon: react_1.default.createElement(GetApp_1.default, null), onClick: () => {
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", startIcon: react_1.default.createElement(GetApp_1.default, null), onClick: () => {
                     (0, utils_1.downloadBookmarkFile)(fileType, model);
                     onClose(false);
                 } }, "Download"))));

package/dist/GridBookmarkWidget/components/dialogs/HighlightSettingsDialog.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { GridBookmarkModel } from '../../model';
+declare const HighlightSettingsDialog: ({ onClose, model, }: {
+    onClose: () => void;
+    model: GridBookmarkModel;
+}) => React.JSX.Element;
+export default HighlightSettingsDialog;

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

@@ -0,0 +1,27 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const mobx_react_1 = require("mobx-react");
+const material_1 = require("@mui/material");
+const ui_1 = require("@jbrowse/core/ui");
+const HighlightSettingsDialog = (0, mobx_react_1.observer)(function ({ onClose, model, }) {
+    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: onClose, title: "Highlight bookmarks" },
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement(material_1.Typography, { variant: "h6" }, "Highlight toggles"),
+            react_1.default.createElement(material_1.Stack, { direction: "row", alignItems: "center" },
+                react_1.default.createElement(material_1.Switch, { "data-testid": "toggle_highlight_all_switch", checked: model.areBookmarksHighlightedOnAllOpenViews, onChange: () => {
+                        model.setHighlightToggle(!model.areBookmarksHighlightedOnAllOpenViews);
+                    } }),
+                react_1.default.createElement(material_1.Typography, null, "Toggle bookmark highlights on all open views")),
+            react_1.default.createElement(material_1.Stack, { direction: "row", alignItems: "center" },
+                react_1.default.createElement(material_1.Switch, { "data-testid": "toggle_highlight_label_all_switch", checked: model.areBookmarksHighlightLabelsOnAllOpenViews, onChange: () => {
+                        model.setLabelToggle(!model.areBookmarksHighlightLabelsOnAllOpenViews);
+                    } }),
+                react_1.default.createElement(material_1.Typography, null, "Toggle 'bookmark' icon on LGV tracks"))),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => onClose() }, "Close"))));
+});
+exports.default = HighlightSettingsDialog;

package/{esm/GridBookmarkWidget/components → dist/GridBookmarkWidget/components/dialogs}/ImportBookmarksDialog.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridBookmarkModel } from '../model';
+import { GridBookmarkModel } from '../../model';
 declare const ImportBookmarksDialog: ({ onClose, model, }: {
     onClose: () => void;
     model: GridBookmarkModel;

package/dist/GridBookmarkWidget/components/{ImportBookmarksDialog.js → dialogs/ImportBookmarksDialog.js}

@@ -40,8 +40,8 @@ const mui_1 = require("tss-react/mui");
 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 utils_1 = require("../../utils");
+const sessionSharing_1 = require("../../sessionSharing");
 const useStyles = (0, mui_1.makeStyles)()(theme => {
     var _a;
     return ({

package/dist/GridBookmarkWidget/components/{ShareBookmarksDialog.d.ts → dialogs/ShareBookmarksDialog.d.ts}

@@ -1,5 +1,5 @@
 import React from 'react';
-import { GridBookmarkModel } from '../model';
+import { GridBookmarkModel } from '../../model';
 declare const ShareBookmarksDialog: ({ onClose, model, }: {
     onClose: () => void;
     model: GridBookmarkModel;

package/dist/GridBookmarkWidget/components/{ShareBookmarksDialog.js → dialogs/ShareBookmarksDialog.js}

@@ -36,7 +36,7 @@ const util_1 = require("@jbrowse/core/util");
 const ui_1 = require("@jbrowse/core/ui");
 const Icons_1 = require("@jbrowse/core/ui/Icons");
 // locals
-const sessionSharing_1 = require("../sessionSharing");
+const sessionSharing_1 = require("../../sessionSharing");
 const useStyles = (0, mui_1.makeStyles)()(() => ({
     flexItem: {
         margin: 5,

package/dist/GridBookmarkWidget/index.js

@@ -29,7 +29,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = require("react");
 const configuration_1 = require("@jbrowse/core/configuration");
 const pluggableElementTypes_1 = require("@jbrowse/core/pluggableElementTypes");
+// locals
 const model_1 = __importDefault(require("./model"));
+const Highlight_1 = __importDefault(require("./components/Highlight"));
 const configSchema = (0, configuration_1.ConfigurationSchema)('GridBookmarkWidget', {});
 exports.default = (pluginManager) => {
     pluginManager.addWidgetType(() => {
@@ -41,4 +43,5 @@ exports.default = (pluginManager) => {
             ReactComponent: (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./components/GridBookmarkWidget')))),
         });
     });
+    (0, Highlight_1.default)(pluginManager);
 };