@jbrowse/plugin-grid-bookmark 2.6.2 → 2.7.0

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { GridBookmarkModel } from '../model';
-declare function AssemblySelector({ model }: {
+declare const AssemblySelector: ({ model, }: {
     model: GridBookmarkModel;
-}): React.JSX.Element;
-declare const _default: typeof AssemblySelector;
-export default _default;
+}) => React.JSX.Element;
+export default AssemblySelector;

package/dist/GridBookmarkWidget/components/AssemblySelector.js

@@ -6,40 +6,30 @@ 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 mui_1 = require("tss-react/mui");
-const useStyles = (0, mui_1.makeStyles)()(() => ({
-    container: {
-        display: 'flex',
-        flexDirection: 'row',
-        margin: 5,
-    },
-    selectText: {
-        marginRight: 8,
-        marginTop: 10,
-    },
-    flexItem: {
-        marginRight: 8,
-    },
-}));
-function AssemblySelector({ model }) {
-    const { classes } = useStyles();
-    const { assemblies, selectedAssembly, setSelectedAssembly } = model;
-    const noAssemblies = assemblies.length === 0 ? true : false;
-    const determineCurrentValue = (selectedAssembly) => {
-        if (selectedAssembly === 'all') {
-            return 'all';
-        }
-        else if (assemblies.includes(selectedAssembly)) {
-            return selectedAssembly;
-        }
-        return 'none';
-    };
-    return (react_1.default.createElement("div", { className: classes.container },
-        react_1.default.createElement(material_1.Typography, { className: classes.selectText }, "Select assembly:"),
-        react_1.default.createElement(material_1.FormControl, { className: classes.flexItem, disabled: noAssemblies },
-            react_1.default.createElement(material_1.Select, { value: determineCurrentValue(selectedAssembly), onChange: event => setSelectedAssembly(event.target.value) },
-                react_1.default.createElement(material_1.MenuItem, { value: "none" }, "none"),
-                react_1.default.createElement(material_1.MenuItem, { value: "all" }, "all"),
-                assemblies.map(assembly => (react_1.default.createElement(material_1.MenuItem, { value: assembly, key: assembly }, assembly)))))));
-}
-exports.default = (0, mobx_react_1.observer)(AssemblySelector);
+const AssemblySelector = (0, mobx_react_1.observer)(function ({ model, }) {
+    const { validAssemblies, selectedAssemblies } = model;
+    const noAssemblies = validAssemblies.size === 0 ? true : false;
+    const label = 'Select assemblies';
+    const id = 'select-assemblies-label';
+    const selectedSet = new Set(selectedAssemblies);
+    const isAllSelected = [...validAssemblies].every(e => selectedSet.has(e));
+    return (react_1.default.createElement(material_1.FormControl, { disabled: noAssemblies, fullWidth: true },
+        react_1.default.createElement(material_1.InputLabel, { id: id }, label),
+        react_1.default.createElement(material_1.Select, { labelId: id, multiple: true, value: selectedAssemblies, onChange: event => model.setSelectedAssemblies([...event.target.value]), input: react_1.default.createElement(material_1.OutlinedInput, { label: label }), renderValue: selected => selected.join(', ') },
+            react_1.default.createElement(material_1.MenuItem, { onClickCapture: event => {
+                    // onClickCapture allows us to avoid the parent Select onChange from triggering
+                    if (isAllSelected) {
+                        model.setSelectedAssemblies([]);
+                    }
+                    else {
+                        model.setSelectedAssemblies(undefined);
+                    }
+                    event.preventDefault();
+                } },
+                react_1.default.createElement(material_1.Checkbox, { checked: isAllSelected, indeterminate: !isAllSelected && selectedAssemblies.length > 0 }),
+                react_1.default.createElement(material_1.ListItemText, { primary: "Select all" })),
+            [...validAssemblies].map(name => (react_1.default.createElement(material_1.MenuItem, { key: name, value: name },
+                react_1.default.createElement(material_1.Checkbox, { checked: selectedAssemblies.includes(name) }),
+                react_1.default.createElement(material_1.ListItemText, { primary: name })))))));
+});
+exports.default = AssemblySelector;

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

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

package/dist/GridBookmarkWidget/components/BookmarkGrid.js

@@ -0,0 +1,120 @@
+"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 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 useStyles = (0, mui_1.makeStyles)()(() => ({
+    link: {
+        cursor: 'pointer',
+    },
+    cell: {
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+    },
+}));
+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);
+    const selectedSet = new Set(selectedAssemblies);
+    const rows = bookmarks
+        .filter(r => selectedSet.has(r.assemblyName))
+        .map((region, index) => {
+        const { assemblyName, ...rest } = region;
+        return {
+            ...region,
+            id: index,
+            assemblyName,
+            locString: (0, util_1.assembleLocString)(rest),
+            correspondingObj: region,
+        };
+    });
+    // reset selections if bookmarked regions change
+    // needed especially if bookmarked regions are deleted, then
+    const [widths, setWidths] = (0, react_1.useState)([
+        40,
+        Math.max((0, util_1.measureText)('Bookmark link'), (0, util_1.measureGridWidth)(rows.map(row => row.locString))),
+        Math.max((0, util_1.measureText)('Label'), (0, util_1.measureGridWidth)(rows.map(row => row.label))),
+        Math.max((0, util_1.measureText)('Assembly'), (0, util_1.measureGridWidth)(rows.map(row => row.assemblyName))),
+    ]);
+    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));
+});
+exports.default = BookmarkGrid;

package/dist/GridBookmarkWidget/components/{ClearBookmarks.d.ts → DeleteBookmarks.d.ts}

@@ -1,7 +1,6 @@
 import React from 'react';
 import { GridBookmarkModel } from '../model';
-declare function ClearBookmarks({ model }: {
+declare function DeleteBookmarks({ model }: {
     model: GridBookmarkModel;
 }): React.JSX.Element;
-declare const _default: typeof ClearBookmarks;
-export default _default;
+export default DeleteBookmarks;

package/dist/GridBookmarkWidget/components/DeleteBookmarks.js

@@ -0,0 +1,41 @@
+"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 material_1 = require("@mui/material");
+// icons
+const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
+const DeleteBookmarksDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./DeleteBookmarksDialog'))));
+function DeleteBookmarks({ model }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(Delete_1.default, null), "aria-label": "clear bookmarks", onClick: () => setOpen(true) }, "Delete"),
+        open ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
+            react_1.default.createElement(DeleteBookmarksDialog, { model: model, onClose: () => setOpen(false) }))) : null));
+}
+exports.default = DeleteBookmarks;

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

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

package/dist/GridBookmarkWidget/components/DeleteBookmarksDialog.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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 DeleteBookmarksDialog = (0, mobx_react_1.observer)(function ({ onClose, model, }) {
+    const { selectedBookmarks } = model;
+    const deleteAll = selectedBookmarks.length === 0;
+    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: onClose, title: "Delete bookmarks" },
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement(material_1.Alert, { severity: "warning" }, deleteAll ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", null, "All bookmarks will be deleted."),
+                react_1.default.createElement("br", null),
+                react_1.default.createElement("span", null, "Use the checkboxes to select individual bookmarks to delete."))) : ('Only selected bookmarks will be deleted.'))),
+        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: () => {
+                    if (deleteAll) {
+                        model.clearAllBookmarks();
+                    }
+                    model.clearSelectedBookmarks();
+                    onClose();
+                } }, "Confirm"))));
+});
+exports.default = DeleteBookmarksDialog;

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

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

package/dist/GridBookmarkWidget/components/EditBookmarkLabelDialog.js

@@ -0,0 +1,50 @@
+"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 material_1 = require("@mui/material");
+const ui_1 = require("@jbrowse/core/ui");
+const mobx_react_1 = require("mobx-react");
+const util_1 = require("@jbrowse/core/util");
+const EditBookmarkLabelDialog = (0, mobx_react_1.observer)(function ({ model, onClose, dialogRow, }) {
+    const [newLabel, setNewLabel] = (0, react_1.useState)(dialogRow.label || '');
+    return (react_1.default.createElement(ui_1.Dialog, { open: true, onClose: onClose, title: "Edit bookmark label" },
+        react_1.default.createElement(material_1.DialogContent, null,
+            react_1.default.createElement(material_1.Alert, null,
+                "Editing label for bookmark",
+                ' ',
+                react_1.default.createElement("strong", null, (0, util_1.assembleLocString)(dialogRow.correspondingObj)),
+                ":"),
+            react_1.default.createElement(material_1.TextField, { fullWidth: true, inputProps: { 'data-testid': 'edit-bookmark-label-field' }, variant: "outlined", value: newLabel, onChange: e => setNewLabel(e.target.value), autoFocus: true })),
+        react_1.default.createElement(material_1.DialogActions, null,
+            react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => {
+                    if (newLabel && dialogRow) {
+                        model.updateBookmarkLabel(dialogRow, newLabel);
+                    }
+                    setNewLabel('');
+                    onClose();
+                } }, "Confirm"))));
+});
+exports.default = EditBookmarkLabelDialog;

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

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

package/dist/GridBookmarkWidget/components/{ClearBookmarks.js → ExportBookmarks.js}

@@ -29,23 +29,13 @@ 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");
-// icons
-const ClearAll_1 = __importDefault(require("@mui/icons-material/ClearAll"));
-function ClearBookmarks({ model }) {
-    const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
+const GetApp_1 = __importDefault(require("@mui/icons-material/GetApp"));
+const ExportBookmarksDialog = (0, react_1.lazy)(() => Promise.resolve().then(() => __importStar(require('./ExportBookmarksDialog'))));
+const ExportBookmarks = (0, mobx_react_1.observer)(function ExportBookmarks({ model, }) {
+    const [open, setOpen] = (0, react_1.useState)(false);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(ClearAll_1.default, null), "aria-label": "clear bookmarks", onClick: () => setDialogOpen(true) }, "Clear"),
-        react_1.default.createElement(ui_1.Dialog, { open: dialogOpen, onClose: () => setDialogOpen(false), title: "Clear bookmarks" },
-            react_1.default.createElement(material_1.DialogContent, null,
-                react_1.default.createElement(material_1.Typography, null, "Clear all bookmarks? Note this will clear bookmarks for all assemblies")),
-            react_1.default.createElement(material_1.DialogActions, null,
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "secondary", onClick: () => {
-                        setDialogOpen(false);
-                    } }, "Cancel"),
-                react_1.default.createElement(material_1.Button, { variant: "contained", color: "primary", onClick: () => {
-                        model.clearAllBookmarks();
-                        setDialogOpen(false);
-                    } }, "Confirm")))));
-}
-exports.default = (0, mobx_react_1.observer)(ClearBookmarks);
+        react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(GetApp_1.default, null), onClick: () => setOpen(true), "data-testid": "export_button" }, "Export"),
+        open ? (react_1.default.createElement(react_1.Suspense, { fallback: react_1.default.createElement(react_1.default.Fragment, null) },
+            react_1.default.createElement(ExportBookmarksDialog, { onClose: () => setOpen(false), model: model }))) : null));
+});
+exports.default = ExportBookmarks;

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

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

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

@@ -29,33 +29,35 @@ 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 mui_1 = require("tss-react/mui");
 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)()(() => ({
     flexItem: {
         margin: 5,
     },
 }));
-function DownloadBookmarks({ model }) {
+const ExportBookmarksDialog = (0, mobx_react_1.observer)(function ExportBookmarksDialog({ model, onClose, }) {
     const { classes } = useStyles();
-    const [dialogOpen, setDialogOpen] = (0, react_1.useState)(false);
     const [fileType, setFileType] = (0, react_1.useState)('BED');
-    const { bookmarkedRegions } = model;
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(material_1.Button, { startIcon: react_1.default.createElement(GetApp_1.default, null), onClick: () => setDialogOpen(true) }, "Download"),
-        react_1.default.createElement(ui_1.Dialog, { open: dialogOpen, onClose: () => setDialogOpen(false), title: "Download bookmarks" },
-            react_1.default.createElement(material_1.DialogContent, null,
-                react_1.default.createElement(material_1.Typography, null, "Format to download"),
-                react_1.default.createElement(material_1.Select, { className: classes.flexItem, "data-testid": "selectFileType", value: fileType, onChange: event => setFileType(event.target.value) },
+    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.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),
+                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(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.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, { variant: "contained", color: "secondary", onClick: () => setDialogOpen(false) }, "Cancel"),
-                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: () => {
-                        (0, utils_1.downloadBookmarkFile)(bookmarkedRegions, fileType, model);
-                        setDialogOpen(false);
-                    } }, "Download")))));
-}
-exports.default = (0, mobx_react_1.observer)(DownloadBookmarks);
+                    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: () => {
+                    (0, utils_1.downloadBookmarkFile)(fileType, model);
+                    onClose(false);
+                } }, "Download"))));
+});
+exports.default = ExportBookmarksDialog;

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

@@ -1,7 +1,6 @@
 import React from 'react';
 import { GridBookmarkModel } from '../model';
-declare function GridBookmarkWidget({ model }: {
+declare const GridBookmarkWidget: ({ model, }: {
     model: GridBookmarkModel;
-}): React.JSX.Element;
-declare const _default: typeof GridBookmarkWidget;
-export default _default;
+}) => React.JSX.Element | null;
+export default GridBookmarkWidget;

package/dist/GridBookmarkWidget/components/GridBookmarkWidget.js

@@ -1,111 +1,42 @@
 "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 react_1 = __importDefault(require("react"));
 const mobx_react_1 = require("mobx-react");
 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");
-// icons
-const Delete_1 = __importDefault(require("@mui/icons-material/Delete"));
 // locals
-const AssemblySelector_1 = __importDefault(require("./AssemblySelector"));
-const DeleteBookmark_1 = __importDefault(require("./DeleteBookmark"));
-const DownloadBookmarks_1 = __importDefault(require("./DownloadBookmarks"));
+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 ClearBookmarks_1 = __importDefault(require("./ClearBookmarks"));
-const utils_1 = require("../utils");
-const useStyles = (0, mui_1.makeStyles)()(theme => ({
-    link: {
-        cursor: 'pointer',
-    },
-    margin: {
-        margin: theme.spacing(2),
+const AssemblySelector_1 = __importDefault(require("./AssemblySelector"));
+const ShareBookmarks_1 = __importDefault(require("./ShareBookmarks"));
+const useStyles = (0, mui_1.makeStyles)()({
+    card: {
+        marginTop: 5,
     },
-}));
-const BookmarkGrid = (0, mobx_react_1.observer)(({ model }) => {
-    const { classes } = useStyles();
-    const [dialogRowNumber, setDialogRowNumber] = (0, react_1.useState)();
-    const { bookmarkedRegions, selectedAssembly } = model;
-    const { views } = (0, util_1.getSession)(model);
-    const bookmarkRows = bookmarkedRegions
-        .filter(r => selectedAssembly === 'all' || r.assemblyName === selectedAssembly)
-        .map((region, index) => {
-        const { assemblyName, ...rest } = region;
-        return {
-            ...region,
-            id: index,
-            delete: index,
-            locString: (0, util_1.assembleLocString)(selectedAssembly === 'all' ? region : rest),
-        };
-    });
-    return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(x_data_grid_1.DataGrid, { density: "compact", rows: bookmarkRows, columns: [
-                {
-                    field: 'locString',
-                    headerName: 'bookmark link',
-                    width: (0, util_1.measureGridWidth)(bookmarkRows.map(row => row.locString)),
-                    renderCell: params => (react_1.default.createElement(material_1.Link, { className: classes.link, href: "#", onClick: async (event) => {
-                            event.preventDefault();
-                            await (0, utils_1.navToBookmark)(params.value, views, model);
-                        } }, params.value)),
-                },
-                {
-                    field: 'label',
-                    width: (0, util_1.measureGridWidth)(bookmarkRows.map(row => row.label)),
-                    editable: true,
-                },
-                {
-                    field: 'delete',
-                    width: 100,
-                    renderCell: params => (react_1.default.createElement(material_1.IconButton, { "data-testid": "deleteBookmark", "aria-label": "delete", onClick: () => {
-                            if (params.value != null) {
-                                setDialogRowNumber(+params.value);
-                            }
-                        } },
-                        react_1.default.createElement(Delete_1.default, null))),
-                },
-            ], onCellEditStop: ({ id, value }) => model.updateBookmarkLabel(id, value), disableRowSelectionOnClick: true }),
-        react_1.default.createElement(DeleteBookmark_1.default, { rowNumber: dialogRowNumber, model: model, onClose: () => setDialogRowNumber(undefined) })));
 });
-function GridBookmarkWidget({ model }) {
-    const { selectedAssembly } = model;
+const GridBookmarkWidget = (0, mobx_react_1.observer)(function GridBookmarkWidget({ model, }) {
     const { classes } = useStyles();
-    return (react_1.default.createElement(react_1.default.Fragment, null,
+    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 })),
+        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(DownloadBookmarks_1.default, { model: model }),
-        react_1.default.createElement(ImportBookmarks_1.default, { model: model, assemblyName: selectedAssembly }),
-        react_1.default.createElement(ClearBookmarks_1.default, { model: model }),
-        react_1.default.createElement(material_1.Typography, { className: classes.margin },
-            "Note: you can double click the ",
-            react_1.default.createElement("code", null, "label"),
-            " field to add your own custom notes"),
-        react_1.default.createElement(BookmarkGrid, { model: model })));
-}
-exports.default = (0, mobx_react_1.observer)(GridBookmarkWidget);
+        react_1.default.createElement(BookmarkGrid_1.default, { model: model })));
+});
+exports.default = GridBookmarkWidget;