@jbrowse/plugin-grid-bookmark 2.17.0 → 3.0.0

package/dist/GridBookmarkWidget/utils.js

@@ -15,34 +15,38 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.navToBookmark = navToBookmark;
 exports.downloadBookmarkFile = downloadBookmarkFile;
 exports.b64PadSuffix = b64PadSuffix;
 exports.fromUrlSafeB64 = fromUrlSafeB64;
 exports.toUrlSafeB64 = toUrlSafeB64;
-const file_saver_1 = require("file-saver");
 const util_1 = require("@jbrowse/core/util");
+const file_saver_1 = require("file-saver");
 async function navToBookmark(locString, assembly, views, model) {
     const session = (0, util_1.getSession)(model);
     try {
-        // get the focused view
         let view = views.find(view => view.id === session.focusedViewId);
-        // check if the focused view is the appropriate assembly, if not proceed
         if ((view === null || view === void 0 ? void 0 : view.assemblyNames[0]) !== assembly) {
-            view = views.find(elt => 
-            // @ts-expect-error
-            elt.type === 'LinearGenomeView' && elt.assemblyNames[0] === assembly);
+            view = views.find(elt => elt.type === 'LinearGenomeView' && elt.assemblyNames[0] === assembly);
         }
-        // if no view is opened of the selectedAssembly, open a new
-        // view with that assembly
         if (!view) {
             const newViewId = `${model.id}_${assembly}`;
             view = session.addView('LinearGenomeView', {
@@ -85,7 +89,6 @@ function downloadBookmarkFile(fileFormat, model) {
         }
     }
     else {
-        // TSV
         const fileHeader = 'chrom\tstart\tend\tlabel\tassembly_name\tcoord_range\n';
         const fileContents = bookmarksToDownload
             .map(bookmark => {
@@ -102,10 +105,6 @@ function downloadBookmarkFile(fileFormat, model) {
         (0, file_saver_1.saveAs)(blob, fileName);
     }
 }
-/**
- * Pad the end of a base64 string with "=" to make it valid
- * @param b64 - unpadded b64 string
- */
 function b64PadSuffix(b64) {
     let num = 0;
     const mo = b64.length % 4;
@@ -124,11 +123,6 @@ function b64PadSuffix(b64) {
     }
     return b64 + '='.repeat(num);
 }
-/**
- * Decode and inflate a url-safe base64 to a string
- * See {@link https://en.wikipedia.org/wiki/Base64#URL_applications}
- * @param b64 - a base64 string to decode and inflate
- */
 async function fromUrlSafeB64(b64) {
     const originalB64 = b64PadSuffix(b64.replaceAll('-', '+').replaceAll('_', '/'));
     const { toByteArray } = await Promise.resolve().then(() => __importStar(require('base64-js')));
@@ -137,11 +131,6 @@ async function fromUrlSafeB64(b64) {
     const inflated = inflate(bytes);
     return new TextDecoder().decode(inflated);
 }
-/**
- * Compress and encode a string as url-safe base64
- * See {@link https://en.wikipedia.org/wiki/Base64#URL_applications}
- * @param str-  a string to compress and encode
- */
 async function toUrlSafeB64(str) {
     const bytes = new TextEncoder().encode(str);
     const { deflate } = await Promise.resolve().then(() => __importStar(require('pako')));

package/dist/index.d.ts

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

package/dist/index.js

@@ -5,7 +5,6 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Plugin_1 = __importDefault(require("@jbrowse/core/Plugin"));
 const util_1 = require("@jbrowse/core/util");
-// icons
 const Bookmark_1 = __importDefault(require("@mui/icons-material/Bookmark"));
 const Bookmarks_1 = __importDefault(require("@mui/icons-material/Bookmarks"));
 const Highlight_1 = __importDefault(require("@mui/icons-material/Highlight"));
@@ -24,31 +23,15 @@ class GridBookmarkPlugin extends Plugin_1.default {
                 const lgv = stateModel;
                 const newStateModel = lgv
                     .props({
-                    /**
-                     * #property
-                     * show the bookmark highlights on this track
-                     */
-                    showBookmarkHighlights: true,
-                    /**
-                     * #property
-                     * show the bookmark labels on this track
-                     */
-                    showBookmarkLabels: true,
+                    bookmarkHighlightsVisible: true,
+                    bookmarkLabelsVisible: true,
                 })
                     .actions(self => ({
-                    /**
-                     * #action
-                     */
-                    toggleShowBookmarkHighlights(toggle) {
-                        self.showBookmarkHighlights =
-                            toggle !== undefined ? toggle : !self.showBookmarkHighlights;
+                    setBookmarkHighlightsVisible(arg) {
+                        self.bookmarkHighlightsVisible = arg;
                     },
-                    /**
-                     * #action
-                     */
-                    toggleShowBookmarkLabels(toggle) {
-                        self.showBookmarkLabels =
-                            toggle !== undefined ? toggle : !self.showBookmarkLabels;
+                    setBookmarkLabelsVisible(arg) {
+                        self.bookmarkLabelsVisible = arg;
                     },
                     activateBookmarkWidget() {
                         const session = (0, util_1.getSession)(self);
@@ -115,18 +98,18 @@ class GridBookmarkPlugin extends Plugin_1.default {
                                             label: 'Toggle bookmark highlights',
                                             icon: Highlight_1.default,
                                             type: 'checkbox',
-                                            checked: self.showBookmarkHighlights,
+                                            checked: self.bookmarkHighlightsVisible,
                                             onClick: () => {
-                                                self.toggleShowBookmarkHighlights();
+                                                self.setBookmarkHighlightsVisible(!self.bookmarkHighlightsVisible);
                                             },
                                         },
                                         {
                                             label: 'Toggle bookmark labels',
                                             icon: Label_1.default,
                                             type: 'checkbox',
-                                            checked: self.showBookmarkLabels,
+                                            checked: self.bookmarkLabelsVisible,
                                             onClick: () => {
-                                                self.toggleShowBookmarkLabels();
+                                                self.setBookmarkLabelsVisible(!self.bookmarkLabelsVisible);
                                             },
                                         },
                                     ],
@@ -159,14 +142,12 @@ class GridBookmarkPlugin extends Plugin_1.default {
                     afterCreate() {
                         document.addEventListener('keydown', e => {
                             const activationSequence = (e.ctrlKey || e.metaKey) && e.shiftKey;
-                            // ctrl+shift+d or cmd+shift+d
                             if (activationSequence && e.code === 'KeyD') {
                                 e.preventDefault();
                                 self.activateBookmarkWidget();
                                 self.bookmarkCurrentRegion();
                                 (0, util_1.getSession)(self).notify('Bookmark created.', 'success');
                             }
-                            // ctrl+shift+m or cmd+shift+m
                             if (activationSequence && e.code === 'KeyM') {
                                 e.preventDefault();
                                 self.navigateNewestBookmark();

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

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

package/esm/GridBookmarkWidget/components/AssemblySelector.js

@@ -1,6 +1,6 @@
-import React from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Checkbox, FormControl, InputLabel, ListItemText, MenuItem, OutlinedInput, Select, } from '@mui/material';
+import { observer } from 'mobx-react';
 const AssemblySelector = observer(function ({ model, }) {
     const { validAssemblies, selectedAssemblies } = model;
     const noAssemblies = validAssemblies.size === 0;
@@ -8,25 +8,13 @@ const AssemblySelector = observer(function ({ model, }) {
     const id = 'select-assemblies-label';
     const selectedSet = new Set(selectedAssemblies);
     const isAllSelected = [...validAssemblies].every(e => selectedSet.has(e));
-    return (React.createElement(FormControl, { disabled: noAssemblies, fullWidth: true },
-        React.createElement(InputLabel, { id: id }, label),
-        React.createElement(Select, { labelId: id, multiple: true, value: selectedAssemblies, onChange: event => {
-                model.setSelectedAssemblies([...event.target.value]);
-            }, input: React.createElement(OutlinedInput, { label: label }), renderValue: selected => selected.join(', ') },
-            React.createElement(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.createElement(Checkbox, { checked: isAllSelected, indeterminate: !isAllSelected && selectedAssemblies.length > 0 }),
-                React.createElement(ListItemText, { primary: "Select all" })),
-            [...validAssemblies].map(name => (React.createElement(MenuItem, { key: name, value: name },
-                React.createElement(Checkbox, { checked: selectedAssemblies.includes(name) }),
-                React.createElement(ListItemText, { primary: name })))))));
+    return (_jsxs(FormControl, { disabled: noAssemblies, fullWidth: true, children: [_jsx(InputLabel, { id: id, children: label }), _jsxs(Select, { labelId: id, multiple: true, value: selectedAssemblies, onChange: event => {
+                    model.setSelectedAssemblies(typeof event.target.value === 'string'
+                        ? [event.target.value]
+                        : event.target.value);
+                }, input: _jsx(OutlinedInput, { label: label }), renderValue: selected => selected.join(', '), children: [_jsxs(MenuItem, { onClickCapture: event => {
+                            model.setSelectedAssemblies(isAllSelected ? [] : undefined);
+                            event.preventDefault();
+                        }, children: [_jsx(Checkbox, { checked: isAllSelected, indeterminate: !isAllSelected && selectedAssemblies.length > 0 }), _jsx(ListItemText, { primary: "Select all" })] }), [...validAssemblies].map(name => (_jsxs(MenuItem, { value: name, children: [_jsx(Checkbox, { checked: selectedAssemblies.includes(name) }), _jsx(ListItemText, { primary: name })] }, name)))] })] }));
 });
 export default AssemblySelector;

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

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

package/esm/GridBookmarkWidget/components/BookmarkGrid.js

@@ -1,13 +1,11 @@
-import React, { lazy } from 'react';
-import { observer } from 'mobx-react';
+import { jsx as _jsx } from "react/jsx-runtime";
+import ColorPicker from '@jbrowse/core/ui/ColorPicker';
+import { assembleLocString, getSession, measureGridWidth, measureText, } from '@jbrowse/core/util';
 import { Link } from '@mui/material';
-import { makeStyles } from 'tss-react/mui';
 import { DataGrid, GRID_CHECKBOX_SELECTION_COL_DEF } from '@mui/x-data-grid';
-import { getSession, assembleLocString, measureGridWidth, measureText, } from '@jbrowse/core/util';
-import ColorPicker from '@jbrowse/core/ui/ColorPicker';
-// locals
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
 import { navToBookmark } from '../utils';
-const EditBookmarkLabelDialog = lazy(() => import('./dialogs/EditBookmarkLabelDialog'));
 const useStyles = makeStyles()(() => ({
     cell: {
         whiteSpace: 'nowrap',
@@ -39,57 +37,52 @@ const BookmarkGrid = observer(function ({ model, }) {
         Math.max(measureText('Assembly', 12) + 30, measureGridWidth(rows.map(row => row.assemblyName))),
         100,
     ];
-    return (React.createElement(DataGrid, { autoHeight: true, density: "compact", rows: rows, columns: [
-            {
-                ...GRID_CHECKBOX_SELECTION_COL_DEF,
-                width: widths[0],
-            },
-            {
-                field: 'locString',
-                headerName: 'Bookmark link',
-                width: widths[1],
-                renderCell: ({ value, row }) => (React.createElement(Link, { className: classes.cell, href: "#", onClick: async (event) => {
-                        event.preventDefault();
-                        const { views } = session;
-                        await navToBookmark(value, row.assemblyName, views, model);
-                    } }, value)),
-            },
-            {
-                field: 'label',
-                headerName: 'Label',
-                width: widths[2],
-                editable: true,
-            },
-            {
-                field: 'assemblyName',
-                headerName: 'Assembly',
-                width: widths[3],
-            },
-            {
-                field: 'highlight',
-                headerName: 'Highlight',
-                width: widths[4],
-                renderCell: ({ value, row }) => (React.createElement(ColorPicker, { color: value || 'black', onChange: event => {
-                        model.updateBookmarkHighlight(row, event);
-                    } })),
-            },
-        ], onCellDoubleClick: ({ row }) => {
-            getSession(model).queueDialog(onClose => [
-                EditBookmarkLabelDialog,
-                { onClose, model, dialogRow: row },
-            ]);
-        }, processRowUpdate: row => {
-            const target = rows[row.id];
-            model.updateBookmarkLabel(target, row.label);
-            return row;
-        }, onProcessRowUpdateError: e => {
-            session.notifyError(`${e}`, e);
-        }, checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
-            if (bookmarksWithValidAssemblies.length > 0) {
-                model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
-                    ...rows[value],
-                })));
-            }
-        }, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true }));
+    return (_jsx("div", { style: { display: 'flex', flexDirection: 'column' }, children: _jsx(DataGrid, { density: "compact", rows: rows, columns: [
+                {
+                    ...GRID_CHECKBOX_SELECTION_COL_DEF,
+                    width: widths[0],
+                },
+                {
+                    field: 'locString',
+                    headerName: 'Bookmark link',
+                    width: widths[1],
+                    renderCell: ({ value, row }) => (_jsx(Link, { className: classes.cell, href: "#", onClick: async (event) => {
+                            event.preventDefault();
+                            const { views } = session;
+                            await navToBookmark(value, row.assemblyName, views, model);
+                        }, children: 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 }) => (_jsx(ColorPicker, { color: value || 'black', onChange: event => {
+                            model.updateBookmarkHighlight(row, event);
+                        } })),
+                },
+            ], processRowUpdate: row => {
+                const target = rows[row.id];
+                model.updateBookmarkLabel(target, row.label);
+                return row;
+            }, onProcessRowUpdateError: e => {
+                session.notifyError(`${e}`, e);
+            }, checkboxSelection: true, onRowSelectionModelChange: newRowSelectionModel => {
+                if (bookmarksWithValidAssemblies.length > 0) {
+                    model.setSelectedBookmarks(newRowSelectionModel.map(value => ({
+                        ...rows[value],
+                    })));
+                }
+            }, rowSelectionModel: selectedBookmarks.map(r => r.id), disableRowSelectionOnClick: true }) }));
 });
 export default BookmarkGrid;

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

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

package/esm/GridBookmarkWidget/components/GridBookmarkWidget.js

@@ -1,21 +1,19 @@
-import React, { lazy } from 'react';
-import { observer } from 'mobx-react';
-import { makeStyles } from 'tss-react/mui';
-import { getSession } from '@jbrowse/core/util';
-import { Alert } from '@mui/material';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { lazy } from 'react';
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton';
-// locals
-import BookmarkGrid from './BookmarkGrid';
-import AssemblySelector from './AssemblySelector';
-// icons
-import Menu from '@mui/icons-material/Menu';
+import { getSession } from '@jbrowse/core/util';
+import Delete from '@mui/icons-material/Delete';
 import GetApp from '@mui/icons-material/GetApp';
+import Menu from '@mui/icons-material/Menu';
+import Palette from '@mui/icons-material/Palette';
 import Publish from '@mui/icons-material/Publish';
 import Settings from '@mui/icons-material/Settings';
-import Palette from '@mui/icons-material/Palette';
 import Share from '@mui/icons-material/Share';
-import Delete from '@mui/icons-material/Delete';
-// lazies
+import { Alert } from '@mui/material';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import AssemblySelector from './AssemblySelector';
+import BookmarkGrid from './BookmarkGrid';
 const ExportBookmarksDialog = lazy(() => import('./dialogs/ExportBookmarksDialog'));
 const ImportBookmarksDialog = lazy(() => import('./dialogs/ImportBookmarksDialog'));
 const ShareBookmarksDialog = lazy(() => import('./dialogs/ShareBookmarksDialog'));
@@ -29,78 +27,67 @@ const useStyles = makeStyles()({
 });
 const GridBookmarkWidget = observer(function GridBookmarkWidget({ model, }) {
     const { classes } = useStyles();
-    return (React.createElement("div", null,
-        React.createElement(Alert, { severity: "info" },
-            "Click and type within the ",
-            React.createElement("strong", null, "label"),
-            " field to annotate your bookmark. Double click the ",
-            React.createElement("strong", null, "label"),
-            " field to do so within a dialog."),
-        React.createElement("div", { className: classes.flex },
-            React.createElement(CascadingMenuButton, { "data-testid": "grid_bookmark_menu", menuItems: [
-                    {
-                        label: 'Export',
-                        icon: GetApp,
-                        onClick: () => {
-                            getSession(model).queueDialog(onClose => [
-                                ExportBookmarksDialog,
-                                { onClose, model },
-                            ]);
-                        },
-                    },
-                    {
-                        label: 'Import',
-                        icon: Publish,
-                        onClick: () => {
-                            getSession(model).queueDialog(onClose => [
-                                ImportBookmarksDialog,
-                                { model, onClose },
-                            ]);
-                        },
-                    },
-                    {
-                        label: 'Delete',
-                        icon: Delete,
-                        onClick: () => {
-                            getSession(model).queueDialog(onClose => [
-                                DeleteBookmarksDialog,
-                                { model, onClose },
-                            ]);
-                        },
-                    },
-                    {
-                        label: 'Share',
-                        icon: Share,
-                        onClick: () => {
-                            getSession(model).queueDialog(onClose => [
-                                ShareBookmarksDialog,
-                                { model, onClose },
-                            ]);
-                        },
-                    },
-                    {
-                        label: 'Edit colors',
-                        icon: Palette,
-                        onClick: () => {
-                            getSession(model).queueDialog(onClose => [
-                                EditHighlightColorDialog,
-                                { model, onClose },
-                            ]);
-                        },
-                    },
-                    {
-                        label: 'Settings',
-                        icon: Settings,
-                        onClick: () => {
-                            getSession(model).queueDialog(onClose => [
-                                HighlightSettingsDialog,
-                                { model, onClose },
-                            ]);
-                        },
-                    },
-                ] },
-                React.createElement(Menu, null)),
-            React.createElement(AssemblySelector, { model: model })),
-        React.createElement(BookmarkGrid, { model: model })));
+    return (_jsxs("div", { children: [_jsxs(Alert, { severity: "info", children: ["Click and type within the ", _jsx("strong", { children: "label" }), " field to annotate your bookmark. Double click the ", _jsx("strong", { children: "label" }), " field to do so within a dialog."] }), _jsxs("div", { className: classes.flex, children: [_jsx(CascadingMenuButton, { "data-testid": "grid_bookmark_menu", menuItems: [
+                            {
+                                label: 'Export',
+                                icon: GetApp,
+                                onClick: () => {
+                                    getSession(model).queueDialog(onClose => [
+                                        ExportBookmarksDialog,
+                                        { onClose, model },
+                                    ]);
+                                },
+                            },
+                            {
+                                label: 'Import',
+                                icon: Publish,
+                                onClick: () => {
+                                    getSession(model).queueDialog(onClose => [
+                                        ImportBookmarksDialog,
+                                        { model, onClose },
+                                    ]);
+                                },
+                            },
+                            {
+                                label: 'Delete',
+                                icon: Delete,
+                                onClick: () => {
+                                    getSession(model).queueDialog(onClose => [
+                                        DeleteBookmarksDialog,
+                                        { model, onClose },
+                                    ]);
+                                },
+                            },
+                            {
+                                label: 'Share',
+                                icon: Share,
+                                onClick: () => {
+                                    getSession(model).queueDialog(onClose => [
+                                        ShareBookmarksDialog,
+                                        { model, onClose },
+                                    ]);
+                                },
+                            },
+                            {
+                                label: 'Edit colors',
+                                icon: Palette,
+                                onClick: () => {
+                                    getSession(model).queueDialog(onClose => [
+                                        EditHighlightColorDialog,
+                                        { model, onClose },
+                                    ]);
+                                },
+                            },
+                            {
+                                label: 'Settings',
+                                icon: Settings,
+                                onClick: () => {
+                                    getSession(model).queueDialog(onClose => [
+                                        HighlightSettingsDialog,
+                                        { model, onClose },
+                                    ]);
+                                },
+                            },
+                        ], children: _jsx(Menu, {}) }), _jsx(AssemblySelector, { model: model })] }), _jsx(BookmarkGrid, { model: model })] }));
 });
 export default GridBookmarkWidget;

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

@@ -1,7 +1,6 @@
-import React from 'react';
-import { IExtendedLGV } from '../../model';
+import type { IExtendedLGV } from '../../model';
 type LGV = IExtendedLGV;
 declare const Highlight: ({ model }: {
     model: LGV;
-}) => React.JSX.Element[] | null;
+}) => import("react/jsx-runtime").JSX.Element[] | null;
 export default Highlight;