@jbrowse/plugin-grid-bookmark 2.10.3 → 2.11.0

package/dist/GridBookmarkWidget/components/BookmarkGrid.js

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

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

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

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

@@ -38,10 +38,7 @@ 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 }) {
@@ -49,6 +46,7 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
     const { classes } = useStyles();
     const session = (0, util_1.getSession)(model);
     const { showBookmarkHighlights, showBookmarkLabels } = model;
+    const { assemblyManager } = session;
     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 : []);
@@ -58,16 +56,19 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
             bookmarks.current = newBookmarkWidget.bookmarks;
         }
     }, [session, bookmarkWidget]);
-    return (react_1.default.createElement(react_1.default.Fragment, null, showBookmarkHighlights && bookmarks.current
+    return showBookmarkHighlights && bookmarks.current
         ? bookmarks.current
             .filter(value => assemblyNames.has(value.assemblyName))
             .map(r => {
+            var _a;
+            const asm = assemblyManager.get(r.assemblyName);
+            const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
             const s = model.bpToPx({
-                refName: r.refName,
+                refName: refName,
                 coord: r.start,
             });
             const e = model.bpToPx({
-                refName: r.refName,
+                refName: refName,
                 coord: r.end,
             });
             return s && e
@@ -80,12 +81,16 @@ const Highlight = (0, mobx_react_1.observer)(function Highlight({ model }) {
                 : 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 },
+            .map(({ left, width, highlight, label }, idx) => (react_1.default.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
+                left,
+                width,
+                background: highlight,
+            } }, showBookmarkLabels ? (react_1.default.createElement(material_1.Tooltip, { title: label, arrow: true },
             react_1.default.createElement(Bookmark_1.default, { fontSize: "small", sx: {
                     color: `${(0, colord_1.colord)(highlight).alpha() !== 0
                         ? (0, colord_1.colord)(highlight).alpha(0.8).toRgbString()
                         : (0, colord_1.colord)(highlight).alpha(0).toRgbString()}`,
                 } }))) : null)))
-        : null));
+        : null;
 });
 exports.default = Highlight;

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

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

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

@@ -0,0 +1,82 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const mobx_react_1 = require("mobx-react");
+const mui_1 = require("tss-react/mui");
+const util_1 = require("@jbrowse/core/util");
+const material_1 = require("@mui/material");
+const useStyles = (0, mui_1.makeStyles)()({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+    },
+});
+const OverviewHighlight = (0, mobx_react_1.observer)(function OverviewHighlight({ model, overview, }) {
+    var _a;
+    const { cytobandOffset } = model;
+    const session = (0, util_1.getSession)(model);
+    const { classes } = useStyles();
+    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 showBookmarkHighlights && bookmarks.current
+        ? bookmarks.current
+            .filter(value => assemblyNames.has(value.assemblyName))
+            .map(r => {
+            const rev = r.reversed;
+            const s = overview.bpToPx({ ...r, coord: rev ? r.end : r.start });
+            const e = overview.bpToPx({ ...r, coord: rev ? r.start : r.end });
+            return s !== undefined && e !== undefined
+                ? {
+                    width: Math.abs(e - s),
+                    left: s + cytobandOffset,
+                    highlight: r.highlight,
+                    label: r.label,
+                }
+                : undefined;
+        })
+            .filter(util_1.notEmpty)
+            .map((obj, idx) => {
+            const { left, width, highlight, label } = obj;
+            return (react_1.default.createElement(material_1.Tooltip, { key: JSON.stringify(obj) + '-' + idx, title: showBookmarkLabels ? label : '', arrow: true },
+                react_1.default.createElement("div", { className: classes.highlight, style: {
+                        left,
+                        width,
+                        background: highlight,
+                        borderLeft: `1px solid ${highlight}`,
+                        borderRight: `1px solid ${highlight}`,
+                    } })));
+        })
+        : null;
+});
+exports.default = OverviewHighlight;

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

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

package/dist/GridBookmarkWidget/model.js

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

package/dist/GridBookmarkWidget/utils.js

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

package/esm/GridBookmarkWidget/components/BookmarkGrid.js

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

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

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

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

@@ -10,10 +10,7 @@ const useStyles = makeStyles()({
     highlight: {
         height: '100%',
         position: 'absolute',
-        textAlign: 'center',
         overflow: 'hidden',
-        display: 'flex',
-        alignItems: 'start',
     },
 });
 const Highlight = observer(function Highlight({ model }) {
@@ -21,6 +18,7 @@ const Highlight = observer(function Highlight({ model }) {
     const { classes } = useStyles();
     const session = getSession(model);
     const { showBookmarkHighlights, showBookmarkLabels } = model;
+    const { assemblyManager } = session;
     const assemblyNames = new Set(session.assemblyNames);
     const bookmarkWidget = session.widgets.get('GridBookmark');
     const bookmarks = useRef((_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) !== null && _a !== void 0 ? _a : []);
@@ -30,16 +28,19 @@ const Highlight = observer(function Highlight({ model }) {
             bookmarks.current = newBookmarkWidget.bookmarks;
         }
     }, [session, bookmarkWidget]);
-    return (React.createElement(React.Fragment, null, showBookmarkHighlights && bookmarks.current
+    return showBookmarkHighlights && bookmarks.current
         ? bookmarks.current
             .filter(value => assemblyNames.has(value.assemblyName))
             .map(r => {
+            var _a;
+            const asm = assemblyManager.get(r.assemblyName);
+            const refName = (_a = asm === null || asm === void 0 ? void 0 : asm.getCanonicalRefName(r.refName)) !== null && _a !== void 0 ? _a : r.refName;
             const s = model.bpToPx({
-                refName: r.refName,
+                refName: refName,
                 coord: r.start,
             });
             const e = model.bpToPx({
-                refName: r.refName,
+                refName: refName,
                 coord: r.end,
             });
             return s && e
@@ -52,12 +53,16 @@ const Highlight = observer(function Highlight({ model }) {
                 : undefined;
         })
             .filter(notEmpty)
-            .map(({ left, width, highlight, label }, idx) => (React.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: { left, width, background: highlight } }, showBookmarkLabels ? (React.createElement(Tooltip, { title: label, arrow: true },
+            .map(({ left, width, highlight, label }, idx) => (React.createElement("div", { key: `${left}_${width}_${idx}`, className: classes.highlight, style: {
+                left,
+                width,
+                background: highlight,
+            } }, showBookmarkLabels ? (React.createElement(Tooltip, { title: label, arrow: true },
             React.createElement(BookmarkIcon, { fontSize: "small", sx: {
                     color: `${colord(highlight).alpha() !== 0
                         ? colord(highlight).alpha(0.8).toRgbString()
                         : colord(highlight).alpha(0).toRgbString()}`,
                 } }))) : null)))
-        : null));
+        : null;
 });
 export default Highlight;

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

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

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

@@ -0,0 +1,57 @@
+import React, { useEffect, useRef } from 'react';
+import { observer } from 'mobx-react';
+import { makeStyles } from 'tss-react/mui';
+import { getSession, notEmpty } from '@jbrowse/core/util';
+import { Tooltip } from '@mui/material';
+const useStyles = makeStyles()({
+    highlight: {
+        height: '100%',
+        position: 'absolute',
+    },
+});
+const OverviewHighlight = observer(function OverviewHighlight({ model, overview, }) {
+    var _a;
+    const { cytobandOffset } = model;
+    const session = getSession(model);
+    const { classes } = useStyles();
+    const { showBookmarkHighlights, showBookmarkLabels } = model;
+    const assemblyNames = new Set(session.assemblyNames);
+    const bookmarkWidget = session.widgets.get('GridBookmark');
+    const bookmarks = useRef((_a = bookmarkWidget === null || bookmarkWidget === void 0 ? void 0 : bookmarkWidget.bookmarks) !== null && _a !== void 0 ? _a : []);
+    useEffect(() => {
+        if (!bookmarkWidget) {
+            const newBookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark');
+            bookmarks.current = newBookmarkWidget.bookmarks;
+        }
+    }, [session, bookmarkWidget]);
+    return showBookmarkHighlights && bookmarks.current
+        ? bookmarks.current
+            .filter(value => assemblyNames.has(value.assemblyName))
+            .map(r => {
+            const rev = r.reversed;
+            const s = overview.bpToPx({ ...r, coord: rev ? r.end : r.start });
+            const e = overview.bpToPx({ ...r, coord: rev ? r.start : r.end });
+            return s !== undefined && e !== undefined
+                ? {
+                    width: Math.abs(e - s),
+                    left: s + cytobandOffset,
+                    highlight: r.highlight,
+                    label: r.label,
+                }
+                : undefined;
+        })
+            .filter(notEmpty)
+            .map((obj, idx) => {
+            const { left, width, highlight, label } = obj;
+            return (React.createElement(Tooltip, { key: JSON.stringify(obj) + '-' + idx, title: showBookmarkLabels ? label : '', arrow: true },
+                React.createElement("div", { className: classes.highlight, style: {
+                        left,
+                        width,
+                        background: highlight,
+                        borderLeft: `1px solid ${highlight}`,
+                        borderRight: `1px solid ${highlight}`,
+                    } })));
+        })
+        : null;
+});
+export default OverviewHighlight;

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

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

package/esm/GridBookmarkWidget/model.js

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

package/esm/GridBookmarkWidget/utils.js

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

package/package.json

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