Add import bookmarks function

plugins/grid-bookmark/src/GridBookmarkWidget/components/AssemblySelector.tsx

@@ -31,10 +31,6 @@ function AssemblySelector({ model }: { model: GridBookmarkModel }) {
   const { assemblies, selectedAssembly, setSelectedAssembly } = model
   const noAssemblies = assemblies.length === 0 ? true : false
 
-  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setSelectedAssembly(event.target.value as string)
-  }
-
   const determineCurrentValue = (selectedAssembly: string) => {
     if (selectedAssembly === 'all') {
       return 'all'
@@ -53,21 +49,19 @@ function AssemblySelector({ model }: { model: GridBookmarkModel }) {
       <FormControl className={classes.flexItem} disabled={noAssemblies}>
         <Select
           value={determineCurrentValue(selectedAssembly)}
-          onChange={handleChange}
+          onChange={event => setSelectedAssembly(event.target.value as string)}
         >
           <MenuItem value="none" key="no-assembly">
             none
           </MenuItem>
           <MenuItem value="all" key="all-assemblies">
             all
           </MenuItem>
-          {assemblies.map((assembly: string) => {
-            return (
-              <MenuItem value={assembly} key={assembly}>
-                {assembly}
-              </MenuItem>
-            )
-          })}
+          {assemblies.map(assembly => (
+            <MenuItem value={assembly} key={assembly}>
+              {assembly}
+            </MenuItem>
+          ))}
         </Select>
       </FormControl>
     </div>

plugins/grid-bookmark/src/GridBookmarkWidget/components/ClearBookmarks.tsx

@@ -38,7 +38,7 @@ function ClearBookmarks({ model }: { model: GridBookmarkModel }) {
         aria-label="clear bookmarks"
         onClick={() => setDialogOpen(true)}
       >
-        Clear bookmarks
+        Clear
       </Button>
       <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
         <DialogTitle>
@@ -52,7 +52,10 @@ function ClearBookmarks({ model }: { model: GridBookmarkModel }) {
         </DialogTitle>
         <div className={classes.dialogContainer}>
           <>
-            <Typography>Clear all bookmarks?</Typography>
+            <Typography>
+              Clear all bookmarks? Note this will clear bookmarks for all
+              assemblies
+            </Typography>
             <br />
             <div style={{ display: 'flex', justifyContent: 'center' }}>
               <Button

plugins/grid-bookmark/src/GridBookmarkWidget/components/DeleteBookmark.tsx

@@ -1,6 +1,8 @@
 import React from 'react'
 import { observer } from 'mobx-react'
 
+import { assembleLocString } from '@jbrowse/core/util'
+
 import {
   IconButton,
   Button,
@@ -25,11 +27,11 @@ const useStyles = makeStyles(() => ({
 }))
 
 function DeleteBookmarkDialog({
-  locString,
+  rowNumber,
   model,
   onClose,
 }: {
-  locString: string | undefined
+  rowNumber: number | undefined
   model: GridBookmarkModel
   onClose: () => void
 }) {
@@ -38,7 +40,7 @@ function DeleteBookmarkDialog({
   const { removeBookmark } = model
 
   return (
-    <Dialog open={!!locString} onClose={onClose}>
+    <Dialog open={rowNumber !== undefined} onClose={onClose}>
       <DialogTitle>
         <IconButton
           className={classes.closeDialog}
@@ -50,16 +52,21 @@ function DeleteBookmarkDialog({
       </DialogTitle>
       <div className={classes.dialogContainer}>
         <Typography>
-          Remove <code>{locString}</code>?
+          Remove row number{' '}
+          <code>
+            {rowNumber !== undefined
+              ? assembleLocString(model.bookmarkedRegions[rowNumber])
+              : ''}
+          </code>
         </Typography>
         <br />
         <div style={{ display: 'flex', justifyContent: 'center' }}>
           <Button
             variant="contained"
             color="primary"
             onClick={() => {
-              if (locString) {
-                removeBookmark(locString)
+              if (rowNumber !== undefined) {
+                removeBookmark(rowNumber)
                 onClose()
               }
             }}

plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.test.js

@@ -53,7 +53,7 @@ describe('<GridBookmarkWidget />', () => {
 
     const { findByText } = render(<GridBookmarkWidget model={model} />)
 
-    expect(findByText('chr1:1-12')).toBeTruthy()
+    expect(await findByText('chr1:2..12')).toBeTruthy()
   })
 
   it('deletes individual bookmarks correctly', async () => {
@@ -84,7 +84,7 @@ describe('<GridBookmarkWidget />', () => {
 
     const { findByText } = render(<GridBookmarkWidget model={model} />)
 
-    fireEvent.click(await findByText('Clear bookmarks'))
+    fireEvent.click(await findByText('Clear'))
     fireEvent.click(await findByText('Confirm'))
 
     expect(await findByText('No rows')).toBeTruthy()

plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx

@@ -1,66 +1,74 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-
-import { Link, IconButton, Typography, Button } from '@material-ui/core'
+import {
+  Link,
+  IconButton,
+  Typography,
+  Button,
+  makeStyles,
+} from '@material-ui/core'
 import { DataGrid, GridCellParams } from '@material-ui/data-grid'
-
 import { getSession, assembleLocString, measureText } from '@jbrowse/core/util'
-
-import { GridBookmarkModel } from '../model'
-import { navToBookmark } from '../utils'
-
 import DeleteIcon from '@material-ui/icons/Delete'
 import ViewCompactIcon from '@material-ui/icons/ViewCompact'
+
 import AssemblySelector from './AssemblySelector'
 import DeleteBookmarkDialog from './DeleteBookmark'
 import DownloadBookmarks from './DownloadBookmarks'
 import ImportBookmarks from './ImportBookmarks'
 import ClearBookmarks from './ClearBookmarks'
+import { GridBookmarkModel } from '../model'
+import { navToBookmark } from '../utils'
+
+const useStyles = makeStyles(() => ({
+  link: {
+    cursor: 'pointer',
+  },
+}))
 
-// creates a coarse measurement of column width, similar to code in BaseFeatureDetails
+// creates a coarse measurement of column width, similar to code in
+// BaseFeatureDetails
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const measure = (row: any, col: string) =>
   Math.min(Math.max(measureText(String(row[col]), 14) + 20, 80), 1000)
 
 const BookmarkGrid = observer(
   ({ compact, model }: { model: GridBookmarkModel; compact: boolean }) => {
-    const [dialogOpen, setDialogOpen] = useState<string>()
-    const { bookmarkedRegions, updateBookmarkLabel, selectedAssembly } = model
+    const classes = useStyles()
+    const [dialogRowNumber, setDialogRowNumber] = useState<number>()
+    const { bookmarkedRegions, selectedAssembly } = model
     const { views } = getSession(model)
 
     const bookmarkRows = bookmarkedRegions
       .toJS()
-      .map(region => {
-        const { assemblyName, ...rest } = region
-        const displayedId = assembleLocString(
-          selectedAssembly === 'all' ? region : rest,
-        )
-        const id = assembleLocString(region)
-        return {
-          ...region,
-          displayedId,
-          id,
-          delete: id,
-        }
-      })
       .filter(
         region =>
           selectedAssembly === 'all' ||
           region.assemblyName === selectedAssembly,
       )
+      .map((region, index) => {
+        const { assemblyName, ...rest } = region
+        return {
+          ...region,
+          id: index,
+          delete: index,
+          locString: assembleLocString(
+            selectedAssembly === 'all' ? region : rest,
+          ),
+        }
+      })
 
     const columns = [
       {
-        field: 'displayedId',
+        field: 'locString',
         headerName: 'bookmark link',
-        width: Math.max(...bookmarkRows.map(row => measure(row, 'id'))),
+        width: Math.max(...bookmarkRows.map(row => measure(row, 'locString'))),
         renderCell: (params: GridCellParams) => {
           const { value } = params
           return (
             <Link
-              onClick={() => {
-                navToBookmark(value as string, views, model)
-              }}
+              className={classes.link}
+              onClick={() => navToBookmark(value as string, views, model)}
             >
               {value}
             </Link>
@@ -84,8 +92,11 @@ const BookmarkGrid = observer(
             <IconButton
               data-testid="deleteBookmark"
               aria-label="delete"
-              onClick={() => setDialogOpen(value as string)}
-              style={{ padding: 0 }}
+              onClick={() => {
+                if (value !== null && value !== undefined) {
+                  setDialogRowNumber(+value)
+                }
+              }}
             >
               <DeleteIcon />
             </IconButton>
@@ -103,41 +114,34 @@ const BookmarkGrid = observer(
           columns={columns}
           onCellEditCommit={args => {
             const { value, id } = args
-            bookmarkRows.forEach(row => {
-              if (row.id === id) {
-                updateBookmarkLabel(id, value as string)
-              }
-            })
+            model.updateBookmarkLabel(id as number, value as string)
           }}
           disableSelectionOnClick
         />
 
         <DeleteBookmarkDialog
-          locString={dialogOpen}
+          rowNumber={dialogRowNumber}
           model={model}
-          onClose={() => {
-            setDialogOpen(undefined)
-          }}
+          onClose={() => setDialogRowNumber(undefined)}
         />
       </>
     )
   },
 )
 
 function GridBookmarkWidget({ model }: { model: GridBookmarkModel }) {
+  const { selectedAssembly } = model
   const [compact, setCompact] = useState(false)
 
   return (
     <>
       <AssemblySelector model={model} />
       <DownloadBookmarks model={model} />
-      <ImportBookmarks model={model} />
+      <ImportBookmarks model={model} assemblyName={selectedAssembly} />
       <ClearBookmarks model={model} />
       <Button
         startIcon={<ViewCompactIcon />}
-        onClick={() => {
-          setCompact(!compact)
-        }}
+        onClick={() => setCompact(!compact)}
       >
         Compact
       </Button>