Import bookmarks functionality for grid bookmark widget (#2243)

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

@@ -6,6 +6,8 @@ import {
   IconButton,
   Dialog,
   DialogTitle,
+  DialogContent,
+  DialogActions,
   Typography,
   makeStyles,
 } from '@material-ui/core'
@@ -38,10 +40,11 @@ function ClearBookmarks({ model }: { model: GridBookmarkModel }) {
         aria-label="clear bookmarks"
         onClick={() => setDialogOpen(true)}
       >
-        Clear bookmarks
+        Clear
       </Button>
       <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
         <DialogTitle>
+          Clear bookmarks
           <IconButton
             className={classes.closeDialog}
             aria-label="close-dialog"
@@ -50,24 +53,33 @@ function ClearBookmarks({ model }: { model: GridBookmarkModel }) {
             <CloseIcon />
           </IconButton>
         </DialogTitle>
-        <div className={classes.dialogContainer}>
-          <>
-            <Typography>Clear all bookmarks?</Typography>
-            <br />
-            <div style={{ display: 'flex', justifyContent: 'center' }}>
-              <Button
-                variant="contained"
-                color="primary"
-                onClick={() => {
-                  clearAllBookmarks()
-                  setDialogOpen(false)
-                }}
-              >
-                Confirm
-              </Button>
-            </div>
-          </>
-        </div>
+        <DialogContent>
+          <Typography>
+            Clear all bookmarks? Note this will clear bookmarks for all
+            assemblies
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => {
+              setDialogOpen(false)
+            }}
+          >
+            Cancel
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              clearAllBookmarks()
+              setDialogOpen(false)
+            }}
+          >
+            Confirm
+          </Button>
+        </DialogActions>
       </Dialog>
     </>
   )

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

@@ -1,11 +1,15 @@
 import React from 'react'
 import { observer } from 'mobx-react'
 
+import { assembleLocString } from '@jbrowse/core/util'
+
 import {
   IconButton,
   Button,
   Dialog,
   DialogTitle,
+  DialogContent,
+  DialogActions,
   Typography,
   makeStyles,
 } from '@material-ui/core'
@@ -25,11 +29,11 @@ const useStyles = makeStyles(() => ({
 }))
 
 function DeleteBookmarkDialog({
-  locString,
+  rowNumber,
   model,
   onClose,
 }: {
-  locString: string | undefined
+  rowNumber: number | undefined
   model: GridBookmarkModel
   onClose: () => void
 }) {
@@ -38,8 +42,9 @@ function DeleteBookmarkDialog({
   const { removeBookmark } = model
 
   return (
-    <Dialog open={!!locString} onClose={onClose}>
+    <Dialog open={rowNumber !== undefined} onClose={onClose}>
       <DialogTitle>
+        Delete bookmark
         <IconButton
           className={classes.closeDialog}
           aria-label="close-dialog"
@@ -48,26 +53,41 @@ function DeleteBookmarkDialog({
           <CloseIcon />
         </IconButton>
       </DialogTitle>
-      <div className={classes.dialogContainer}>
+      <DialogContent>
         <Typography>
-          Remove <code>{locString}</code>?
+          Remove{' '}
+          <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)
-                onClose()
-              }
-            }}
-          >
-            Confirm
-          </Button>
-        </div>
-      </div>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            onClose()
+          }}
+        >
+          Cancel
+        </Button>
+
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            if (rowNumber !== undefined) {
+              removeBookmark(rowNumber)
+              onClose()
+            }
+          }}
+        >
+          Confirm
+        </Button>
+      </DialogActions>
     </Dialog>
   )
 }

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

@@ -6,8 +6,11 @@ import {
   Button,
   Dialog,
   DialogTitle,
-  Select,
+  DialogContent,
+  DialogActions,
   MenuItem,
+  Select,
+  Typography,
   makeStyles,
 } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
@@ -39,11 +42,6 @@ function DownloadBookmarks({ model }: { model: GridBookmarkModel }) {
   const classes = useStyles()
   const [dialogOpen, setDialogOpen] = useState(false)
   const [fileType, setFileType] = useState('BED')
-
-  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setFileType(event.target.value as string)
-  }
-
   const { bookmarkedRegions } = model
 
   return (
@@ -61,34 +59,40 @@ function DownloadBookmarks({ model }: { model: GridBookmarkModel }) {
             <CloseIcon />
           </IconButton>
         </DialogTitle>
-        <div className={classes.dialogContainer}>
-          <>
-            <div className={classes.flexContainer}>
-              <Select
-                className={classes.flexItem}
-                data-testid="selectFileType"
-                value={fileType}
-                onChange={handleChange}
-              >
-                <MenuItem value="BED">BED</MenuItem>
-                <MenuItem value="TSV">TSV</MenuItem>
-              </Select>
-              <Button
-                className={classes.flexItem}
-                data-testid="dialogDownload"
-                variant="contained"
-                color="primary"
-                startIcon={<GetAppIcon />}
-                onClick={() => {
-                  downloadBookmarkFile(bookmarkedRegions, fileType, model)
-                  setDialogOpen(false)
-                }}
-              >
-                Download
-              </Button>
-            </div>
-          </>
-        </div>
+        <DialogContent>
+          <Typography>Format to download</Typography>
+          <Select
+            className={classes.flexItem}
+            data-testid="selectFileType"
+            value={fileType}
+            onChange={event => setFileType(event.target.value as string)}
+          >
+            <MenuItem value="BED">BED</MenuItem>
+            <MenuItem value="TSV">TSV</MenuItem>
+          </Select>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => setDialogOpen(false)}
+          >
+            Cancel
+          </Button>
+          <Button
+            className={classes.flexItem}
+            data-testid="dialogDownload"
+            variant="contained"
+            color="primary"
+            startIcon={<GetAppIcon />}
+            onClick={() => {
+              downloadBookmarkFile(bookmarkedRegions, fileType, model)
+              setDialogOpen(false)
+            }}
+          >
+            Download
+          </Button>
+        </DialogActions>
       </Dialog>
     </>
   )

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()