@jbrowse/plugin-grid-bookmark 1.7.10 → 2.0.1

package/esm/GridBookmarkWidget/utils.js

@@ -0,0 +1,77 @@
+import { saveAs } from 'file-saver';
+import { getSession, parseLocString, when, assembleLocString, } from '@jbrowse/core/util';
+export async function navToBookmark(locString, views, model) {
+    const { selectedAssembly } = model;
+    const lgv = views.find(view => view.type === 'LinearGenomeView' &&
+        // @ts-ignore
+        view.assemblyNames[0] === selectedAssembly);
+    if (lgv) {
+        lgv.navToLocString(locString);
+    }
+    else {
+        const session = getSession(model);
+        const { assemblyManager } = session;
+        const assembly = await assemblyManager.waitForAssembly(selectedAssembly);
+        if (assembly) {
+            try {
+                const loc = parseLocString(locString, refName => session.assemblyManager.isValidRefName(refName, selectedAssembly));
+                const { refName } = loc;
+                const { regions } = assembly;
+                const canonicalRefName = assembly.getCanonicalRefName(refName);
+                let newDisplayedRegion;
+                if (regions) {
+                    newDisplayedRegion = regions.find(region => region.refName === canonicalRefName);
+                }
+                const view = session.addView('LinearGenomeView', {
+                    displayName: selectedAssembly,
+                });
+                await when(() => view.initialized);
+                view.setDisplayedRegions([
+                    JSON.parse(JSON.stringify(newDisplayedRegion)),
+                ]);
+                view.navToLocString(locString);
+            }
+            catch (e) {
+                session.notify(`${e}`, 'error');
+            }
+        }
+    }
+}
+export function downloadBookmarkFile(bookmarkedRegions, fileFormat, model) {
+    const { selectedAssembly } = model;
+    const fileHeader = fileFormat === 'TSV'
+        ? 'chrom\tstart\tend\tlabel\tassembly_name\tcoord_range\n'
+        : '';
+    const fileContents = bookmarkedRegions
+        .map(b => {
+        const { label } = b;
+        const labelVal = label === '' ? '.' : label;
+        const locString = assembleLocString(b);
+        if (fileFormat === 'BED') {
+            if (b.assemblyName === selectedAssembly || selectedAssembly === 'all') {
+                // the "name" column (column 4) in a BED has a max of 255 characters
+                // according to the new spec: https://github.com/samtools/hts-specs/pull/570
+                return `${b.refName}\t${b.start}\t${b.end}\t${labelVal.slice(0, 255)}\n`;
+            }
+            return '';
+        }
+        else {
+            return `${b.refName}\t${b.start + 1}\t${b.end}\t${labelVal}\t${b.assemblyName}\t${locString}\n`;
+        }
+    })
+        .reduce((a, b) => a + b, fileHeader);
+    const blob = new Blob([fileContents || ''], {
+        type: fileFormat === 'BED'
+            ? 'text/x-bed;charset=utf-8'
+            : 'text/tab-separated-values;charset=utf-8',
+    });
+    let fileName;
+    if (fileFormat === 'BED') {
+        fileName = `jbrowse_bookmarks_${selectedAssembly}.bed`;
+    }
+    else {
+        fileName = 'jbrowse_bookmarks.tsv';
+    }
+    saveAs(blob, fileName);
+}
+//# sourceMappingURL=utils.js.map

package/esm/GridBookmarkWidget/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/GridBookmarkWidget/utils.ts"],"names":[],"mappings":"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"}

package/esm/index.d.ts

@@ -0,0 +1,7 @@
+import Plugin from '@jbrowse/core/Plugin';
+import PluginManager from '@jbrowse/core/PluginManager';
+export default class extends Plugin {
+    name: string;
+    install(pluginManager: PluginManager): void;
+    configure(_pluginManager: PluginManager): void;
+}

package/esm/index.js

@@ -0,0 +1,116 @@
+import { lazy } from 'react';
+import BookmarkIcon from '@mui/icons-material/Bookmark';
+import BookmarksIcon from '@mui/icons-material/Bookmarks';
+import WidgetType from '@jbrowse/core/pluggableElementTypes/WidgetType';
+import Plugin from '@jbrowse/core/Plugin';
+import { getSession, isSessionModelWithWidgets } from '@jbrowse/core/util';
+import { stateModelFactory as GridBookmarkStateModelFactory, configSchema as GridBookmarkConfigSchema, } from './GridBookmarkWidget';
+export default class extends Plugin {
+    constructor() {
+        super(...arguments);
+        this.name = 'GridBookmarkPlugin';
+    }
+    install(pluginManager) {
+        pluginManager.addWidgetType(() => {
+            return new WidgetType({
+                name: 'GridBookmarkWidget',
+                heading: 'Bookmarked regions',
+                configSchema: GridBookmarkConfigSchema,
+                stateModel: GridBookmarkStateModelFactory(pluginManager),
+                ReactComponent: lazy(() => import('./GridBookmarkWidget/components/GridBookmarkWidget')),
+            });
+        });
+        pluginManager.addToExtensionPoint('Core-extendPluggableElement', (pluggableElement) => {
+            if (pluggableElement.name === 'LinearGenomeView') {
+                const { stateModel } = pluggableElement;
+                const newStateModel = stateModel.extend((self) => {
+                    const superMenuItems = self.menuItems;
+                    const superRubberBandMenuItems = self.rubberBandMenuItems;
+                    return {
+                        actions: {
+                            activateBookmarkWidget() {
+                                const session = getSession(self);
+                                if (isSessionModelWithWidgets(session)) {
+                                    let bookmarkWidget = session.widgets.get('GridBookmark');
+                                    if (!bookmarkWidget) {
+                                        bookmarkWidget = session.addWidget('GridBookmarkWidget', 'GridBookmark', { view: self });
+                                    }
+                                    session.showWidget(bookmarkWidget);
+                                    return bookmarkWidget;
+                                }
+                                throw new Error('Could not open bookmark widget');
+                            },
+                            bookmarkCurrentRegion() {
+                                const selectedRegions = self.getSelectedRegions(self.leftOffset, self.rightOffset);
+                                const firstRegion = selectedRegions[0];
+                                const session = getSession(self);
+                                if (isSessionModelWithWidgets(session)) {
+                                    const { widgets } = session;
+                                    let bookmarkWidget = widgets.get('GridBookmark');
+                                    if (!bookmarkWidget) {
+                                        this.activateBookmarkWidget();
+                                        bookmarkWidget = widgets.get('GridBookmark');
+                                    }
+                                    // @ts-ignore
+                                    bookmarkWidget.addBookmark(firstRegion);
+                                }
+                            },
+                        },
+                        views: {
+                            menuItems() {
+                                const newMenuItems = [
+                                    ...superMenuItems(),
+                                    { type: 'divider' },
+                                    {
+                                        label: 'Open bookmark widget',
+                                        icon: BookmarksIcon,
+                                        // @ts-ignore
+                                        onClick: self.activateBookmarkWidget,
+                                    },
+                                    {
+                                        label: 'Bookmark current region',
+                                        icon: BookmarkIcon,
+                                        // @ts-ignore
+                                        onClick: self.bookmarkCurrentRegion,
+                                    },
+                                ];
+                                return newMenuItems;
+                            },
+                            rubberBandMenuItems() {
+                                const newRubberBandMenuItems = [
+                                    ...superRubberBandMenuItems(),
+                                    {
+                                        label: 'Bookmark region',
+                                        icon: BookmarkIcon,
+                                        onClick: () => {
+                                            const { leftOffset, rightOffset } = self;
+                                            const selectedRegions = self.getSelectedRegions(leftOffset, rightOffset);
+                                            const firstRegion = selectedRegions[0];
+                                            const session = getSession(self);
+                                            if (isSessionModelWithWidgets(session)) {
+                                                const { widgets } = session;
+                                                let bookmarkWidget = widgets.get('GridBookmark');
+                                                if (!bookmarkWidget) {
+                                                    // @ts-ignore
+                                                    self.activateBookmarkWidget();
+                                                    bookmarkWidget = widgets.get('GridBookmark');
+                                                }
+                                                // @ts-ignore
+                                                bookmarkWidget.addBookmark(firstRegion);
+                                            }
+                                        },
+                                    },
+                                ];
+                                return newRubberBandMenuItems;
+                            },
+                        },
+                    };
+                });
+                pluggableElement.stateModel = newStateModel;
+            }
+            return pluggableElement;
+        });
+    }
+    configure(_pluginManager) { }
+}
+//# sourceMappingURL=index.js.map

package/esm/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jbrowse/plugin-grid-bookmark",
-  "version": "1.7.10",
+  "version": "2.0.1",
   "description": "JBrowse 2 grid bookmark widget",
   "keywords": [
     "jbrowse",
@@ -20,37 +20,45 @@
   "main": "dist/index.js",
   "files": [
     "dist",
-    "src"
+    "src",
+    "esm"
   ],
   "scripts": {
-    "build": "babel src --root-mode upward --out-dir dist --extensions .ts,.js,.tsx,.jsx",
+    "build": "npm-run-all build:*",
     "test": "cd ../..; jest plugins/grid-bookmark",
     "prepublishOnly": "yarn test",
     "prepack": "yarn build; yarn useDist",
     "postpack": "yarn useSrc",
     "useDist": "node ../../scripts/useDist.js",
     "useSrc": "node ../../scripts/useSrc.js",
-    "postbuild": "tsc --build tsconfig.build.json"
+    "prebuild": "npm run clean",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:es5": "tsc --build tsconfig.build.es5.json",
+    "clean": "rimraf dist esm *.tsbuildinfo"
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@material-ui/icons": "^4.9.1",
+    "@mui/icons-material": "^5.0.1",
     "file-saver": "^2.0.0"
   },
   "peerDependencies": {
-    "@jbrowse/core": "^1.0.0",
-    "@jbrowse/plugin-config": "^1.0.0",
-    "@jbrowse/plugin-linear-genome-view": "^1.4.4",
-    "@material-ui/core": "^4.9.13",
-    "@material-ui/lab": "^4.0.0-alpha.45",
-    "@mui/x-data-grid": "^4.0.1",
-    "mobx-react": "^6.0.0",
-    "mobx-state-tree": "3.14.1",
+    "@jbrowse/core": "^2.0.0",
+    "@jbrowse/plugin-config": "^2.0.0",
+    "@jbrowse/plugin-linear-genome-view": "^2.0.0",
+    "@mui/material": "^5.0.0",
+    "@mui/x-data-grid": "^5.0.1",
+    "mobx": "^6.0.0",
+    "mobx-react": "^7.0.0",
+    "mobx-state-tree": "^5.0.0",
     "prop-types": "^15.0.0",
-    "react": ">=16.8.0"
+    "react": ">=16.8.0",
+    "tss-react": "^3.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "02d8c1e88e5603ea5855faed4ccb814e28071b32"
+  "distModule": "esm/index.js",
+  "srcModule": "src/index.ts",
+  "module": "esm/index.js",
+  "gitHead": "ed935bf5612af3818abdc8ef52d100d5d81d33a2"
 }

package/src/GridBookmarkWidget/components/AssemblySelector.tsx

@@ -1,17 +1,12 @@
 import React from 'react'
 import { observer } from 'mobx-react'
 
-import {
-  Typography,
-  makeStyles,
-  Select,
-  MenuItem,
-  FormControl,
-} from '@material-ui/core'
+import { Typography, Select, MenuItem, FormControl } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 import { GridBookmarkModel } from '../model'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   container: {
     display: 'flex',
     flexDirection: 'row',
@@ -27,17 +22,15 @@ const useStyles = makeStyles(() => ({
 }))
 
 function AssemblySelector({ model }: { model: GridBookmarkModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const { assemblies, selectedAssembly, setSelectedAssembly } = model
   const noAssemblies = assemblies.length === 0 ? true : false
 
   const determineCurrentValue = (selectedAssembly: string) => {
     if (selectedAssembly === 'all') {
       return 'all'
-    } else {
-      if (assemblies.includes(selectedAssembly)) {
-        return selectedAssembly
-      }
+    } else if (assemblies.includes(selectedAssembly)) {
+      return selectedAssembly
     }
 
     return 'none'
@@ -49,14 +42,10 @@ function AssemblySelector({ model }: { model: GridBookmarkModel }) {
       <FormControl className={classes.flexItem} disabled={noAssemblies}>
         <Select
           value={determineCurrentValue(selectedAssembly)}
-          onChange={event => setSelectedAssembly(event.target.value as string)}
+          onChange={event => setSelectedAssembly(event.target.value)}
         >
-          <MenuItem value="none" key="no-assembly">
-            none
-          </MenuItem>
-          <MenuItem value="all" key="all-assemblies">
-            all
-          </MenuItem>
+          <MenuItem value="none">none</MenuItem>
+          <MenuItem value="all">all</MenuItem>
           {assemblies.map(assembly => (
             <MenuItem value={assembly} key={assembly}>
               {assembly}

package/src/GridBookmarkWidget/components/ClearBookmarks.tsx

@@ -9,14 +9,14 @@ import {
   DialogContent,
   DialogActions,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-import ClearAllIcon from '@material-ui/icons/ClearAll'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import ClearAllIcon from '@mui/icons-material/ClearAll'
+import CloseIcon from '@mui/icons-material/Close'
 
 import { GridBookmarkModel } from '../model'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   closeDialog: {
     position: 'absolute',
     right: 0,
@@ -28,7 +28,7 @@ const useStyles = makeStyles(() => ({
 }))
 
 function ClearBookmarks({ model }: { model: GridBookmarkModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [dialogOpen, setDialogOpen] = useState(false)
 
   const { clearAllBookmarks } = model

package/src/GridBookmarkWidget/components/DeleteBookmark.tsx

@@ -11,13 +11,13 @@ import {
   DialogContent,
   DialogActions,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
 
 import { GridBookmarkModel } from '../model'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   closeDialog: {
     position: 'absolute',
     right: 0,
@@ -37,7 +37,7 @@ function DeleteBookmarkDialog({
   model: GridBookmarkModel
   onClose: () => void
 }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
 
   const { removeBookmark } = model
 

package/src/GridBookmarkWidget/components/DownloadBookmarks.tsx

@@ -11,15 +11,15 @@ import {
   MenuItem,
   Select,
   Typography,
-  makeStyles,
-} from '@material-ui/core'
-import CloseIcon from '@material-ui/icons/Close'
-import GetAppIcon from '@material-ui/icons/GetApp'
+} from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import CloseIcon from '@mui/icons-material/Close'
+import GetAppIcon from '@mui/icons-material/GetApp'
 
 import { GridBookmarkModel } from '../model'
 import { downloadBookmarkFile } from '../utils'
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles()(() => ({
   closeDialog: {
     position: 'absolute',
     right: 0,
@@ -39,7 +39,7 @@ const useStyles = makeStyles(() => ({
 }))
 
 function DownloadBookmarks({ model }: { model: GridBookmarkModel }) {
-  const classes = useStyles()
+  const { classes } = useStyles()
   const [dialogOpen, setDialogOpen] = useState(false)
   const [fileType, setFileType] = useState('BED')
   const { bookmarkedRegions } = model