From 5f39cc5cb8494f0a793a0dc68dfeba1d7e090d52 Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Sat, 21 Aug 2021 00:45:06 -0400
Subject: [PATCH 1/4] Import bookmarks function

---
 .../components/GridBookmarkWidget.tsx         |  2 +
 .../components/ImportBookmarks.tsx            | 97 +++++++++++++++++++
 2 files changed, 99 insertions(+)
 create mode 100644 plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx

diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx
index cf5e88ed68..5796ca57aa 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx
+++ b/plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx
@@ -14,6 +14,7 @@ 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'
 
 // creates a coarse measurement of column width, similar to code in BaseFeatureDetails
@@ -130,6 +131,7 @@ function GridBookmarkWidget({ model }: { model: GridBookmarkModel }) {
     <>
       <AssemblySelector model={model} />
       <DownloadBookmarks model={model} />
+      <ImportBookmarks model={model} />
       <ClearBookmarks model={model} />
       <Button
         startIcon={<ViewCompactIcon />}
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
new file mode 100644
index 0000000000..58b01255f7
--- /dev/null
+++ b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
@@ -0,0 +1,97 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+
+import {
+  IconButton,
+  Button,
+  Dialog,
+  DialogTitle,
+  Select,
+  MenuItem,
+  makeStyles,
+} from '@material-ui/core'
+import CloseIcon from '@material-ui/icons/Close'
+import ImportIcon from '@material-ui/icons/Publish'
+
+import { GridBookmarkModel } from '../model'
+import { downloadBookmarkFile } from '../utils'
+
+const useStyles = makeStyles(() => ({
+  closeDialog: {
+    position: 'absolute',
+    right: 0,
+    top: 0,
+  },
+  dialogContainer: {
+    margin: 15,
+  },
+  flexItem: {
+    margin: 5,
+  },
+  flexContainer: {
+    display: 'flex',
+    justifyContent: 'space-evenly',
+    width: 200,
+  },
+}))
+
+function ImportBookmarks({ 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 (
+    <>
+      <Button startIcon={<ImportIcon />} onClick={() => setDialogOpen(true)}>
+        Import
+      </Button>
+      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
+        <DialogTitle>
+          <IconButton
+            className={classes.closeDialog}
+            aria-label="close-dialog"
+            onClick={() => setDialogOpen(false)}
+          >
+            <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="dialogImport"
+                variant="contained"
+                color="primary"
+                startIcon={<ImportIcon />}
+                onClick={() => {
+                  downloadBookmarkFile(bookmarkedRegions, fileType, model)
+                  setDialogOpen(false)
+                }}
+              >
+                Download
+              </Button>
+            </div>
+          </>
+        </div>
+      </Dialog>
+    </>
+  )
+}
+
+export default observer(ImportBookmarks)

From 3d94626d7e86f28718ca585e9d34059611fb41f0 Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Sat, 21 Aug 2021 01:51:11 -0400
Subject: [PATCH 2/4] Add import bookmarks function

---
 .../components/AssemblySelector.tsx           |  18 +--
 .../components/ClearBookmarks.tsx             |   7 +-
 .../components/DeleteBookmark.tsx             |  19 ++-
 .../components/GridBookmarkWidget.test.js     |   4 +-
 .../components/GridBookmarkWidget.tsx         |  90 ++++++------
 .../components/ImportBookmarks.tsx            | 138 +++++++++++++-----
 .../src/GridBookmarkWidget/model.ts           |  72 ++++-----
 .../src/GridBookmarkWidget/utils.ts           |   2 +-
 8 files changed, 208 insertions(+), 142 deletions(-)

diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/AssemblySelector.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/AssemblySelector.tsx
index 87ed451e1b..c7d8a28c35 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/AssemblySelector.tsx
+++ b/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,7 +49,7 @@ 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
@@ -61,13 +57,11 @@ function AssemblySelector({ model }: { model: GridBookmarkModel }) {
           <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>
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ClearBookmarks.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ClearBookmarks.tsx
index f659cf9541..ee23a4c27b 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ClearBookmarks.tsx
+++ b/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
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/DeleteBookmark.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/DeleteBookmark.tsx
index 125a50d895..36060e87dc 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/DeleteBookmark.tsx
+++ b/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,7 +52,12 @@ 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' }}>
@@ -58,8 +65,8 @@ function DeleteBookmarkDialog({
             variant="contained"
             color="primary"
             onClick={() => {
-              if (locString) {
-                removeBookmark(locString)
+              if (rowNumber !== undefined) {
+                removeBookmark(rowNumber)
                 onClose()
               }
             }}
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.test.js b/plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.test.js
index 7d29c036ad..a58a91ef7e 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.test.js
+++ b/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()
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx
index 5796ca57aa..8b501b5b0d 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/GridBookmarkWidget.tsx
+++ b/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,21 +114,15 @@ 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)}
         />
       </>
     )
@@ -125,19 +130,18 @@ const BookmarkGrid = observer(
 )
 
 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>
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
index 58b01255f7..8dbf82e826 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
+++ b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
@@ -1,20 +1,26 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-
+import { getSession } from '@jbrowse/core/util'
+import AssemblySelector from '@jbrowse/core/ui/AssemblySelector'
+import { FileLocation } from '@jbrowse/core/util/types'
+import { FileSelector } from '@jbrowse/core/ui'
+import { openLocation } from '@jbrowse/core/util/io'
 import {
   IconButton,
   Button,
   Dialog,
   DialogTitle,
+  DialogContent,
+  DialogActions,
+  Grid,
   Select,
   MenuItem,
   makeStyles,
+  Typography,
 } from '@material-ui/core'
 import CloseIcon from '@material-ui/icons/Close'
 import ImportIcon from '@material-ui/icons/Publish'
-
 import { GridBookmarkModel } from '../model'
-import { downloadBookmarkFile } from '../utils'
 
 const useStyles = makeStyles(() => ({
   closeDialog: {
@@ -28,30 +34,35 @@ const useStyles = makeStyles(() => ({
   flexItem: {
     margin: 5,
   },
-  flexContainer: {
-    display: 'flex',
-    justifyContent: 'space-evenly',
-    width: 200,
-  },
 }))
 
-function ImportBookmarks({ model }: { model: GridBookmarkModel }) {
+function ImportBookmarks({
+  model,
+  assemblyName,
+}: {
+  model: GridBookmarkModel
+  assemblyName: string
+}) {
   const classes = useStyles()
   const [dialogOpen, setDialogOpen] = useState(false)
+  const [location, setLocation] = useState<FileLocation>()
+  const [error, setError] = useState<Error>()
   const [fileType, setFileType] = useState('BED')
-
-  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
-    setFileType(event.target.value as string)
-  }
-
-  const { bookmarkedRegions } = model
+  const session = getSession(model)
+  const [selectedAsm, setSelectedAsm] = useState<string>(
+    assemblyName || session.assemblyNames[0],
+  )
 
   return (
     <>
       <Button startIcon={<ImportIcon />} onClick={() => setDialogOpen(true)}>
         Import
       </Button>
-      <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
+      <Dialog
+        open={dialogOpen}
+        onClose={() => setDialogOpen(false)}
+        maxWidth="xl"
+      >
         <DialogTitle>
           <IconButton
             className={classes.closeDialog}
@@ -61,34 +72,89 @@ function ImportBookmarks({ model }: { model: GridBookmarkModel }) {
             <CloseIcon />
           </IconButton>
         </DialogTitle>
-        <div className={classes.dialogContainer}>
-          <>
-            <div className={classes.flexContainer}>
+        <DialogContent>
+          <Grid container direction="column" spacing={10}>
+            <Grid item>
+              <Typography>
+                Currently, only simple BED file imports are supported
+              </Typography>
               <Select
                 className={classes.flexItem}
                 data-testid="selectFileType"
                 value={fileType}
-                onChange={handleChange}
+                disabled
+                onChange={event => setFileType(event.target.value as string)}
               >
                 <MenuItem value="BED">BED</MenuItem>
                 <MenuItem value="TSV">TSV</MenuItem>
               </Select>
-              <Button
-                className={classes.flexItem}
-                data-testid="dialogImport"
-                variant="contained"
-                color="primary"
-                startIcon={<ImportIcon />}
-                onClick={() => {
-                  downloadBookmarkFile(bookmarkedRegions, fileType, model)
-                  setDialogOpen(false)
-                }}
-              >
-                Download
-              </Button>
-            </div>
-          </>
-        </div>
+            </Grid>
+            <Grid item>
+              <Typography>Select assembly that your data belongs to</Typography>
+              <AssemblySelector
+                onChange={val => setSelectedAsm(val)}
+                session={session}
+                selected={selectedAsm}
+              />
+            </Grid>
+            <Grid item>
+              <FileSelector
+                location={location}
+                setLocation={setLocation}
+                name="File"
+              />
+            </Grid>
+          </Grid>
+          {error ? (
+            <Typography color="error" variant="h6">{`${error}`}</Typography>
+          ) : null}
+        </DialogContent>
+        <DialogActions>
+          <Button
+            className={classes.flexItem}
+            data-testid="dialogImport"
+            variant="contained"
+            color="primary"
+            disabled={!location}
+            startIcon={<ImportIcon />}
+            onClick={async () => {
+              try {
+                if (!location) {
+                  return
+                }
+                const data = (await openLocation(location).readFile(
+                  'utf8',
+                )) as string
+                const regions = data
+                  .split('\n')
+                  .filter(f => !!f.trim())
+                  .filter(
+                    f =>
+                      !f.startsWith('#') &&
+                      !f.startsWith('track') &&
+                      !f.startsWith('browser'),
+                  )
+                  .map(line => {
+                    const [refName, start, end, name] = line.split('\t')
+                    return {
+                      assemblyName: selectedAsm,
+                      refName,
+                      start: +start,
+                      end: +end,
+                      label: name === '.' ? undefined : name,
+                    }
+                  })
+                model.importBookmarks(regions)
+                setDialogOpen(false)
+              } catch (e) {
+                console.error(e)
+                setError(e)
+              }
+            }}
+          >
+            Import
+          </Button>
+        </DialogActions>
       </Dialog>
     </>
   )
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/model.ts b/plugins/grid-bookmark/src/GridBookmarkWidget/model.ts
index c5c9cb5e14..380a2b6412 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/model.ts
+++ b/plugins/grid-bookmark/src/GridBookmarkWidget/model.ts
@@ -1,15 +1,18 @@
-import { types, Instance } from 'mobx-state-tree'
-
+import { types, cast, Instance } from 'mobx-state-tree'
 import PluginManager from '@jbrowse/core/PluginManager'
-
-import { assembleLocString } from '@jbrowse/core/util'
 import { Region } from '@jbrowse/core/util/types'
 import { Region as RegionModel, ElementId } from '@jbrowse/core/util/types/mst'
 
-const LabeledRegionModel = types.compose(
-  RegionModel,
-  types.model('Label', { label: '' }),
-)
+const LabeledRegionModel = types
+  .compose(
+    RegionModel,
+    types.model('Label', { label: types.optional(types.string, '') }),
+  )
+  .actions(self => ({
+    setLabel(label: string) {
+      self.label = label
+    },
+  }))
 
 export default function f(pluginManager: PluginManager) {
   return types
@@ -20,52 +23,41 @@ export default function f(pluginManager: PluginManager) {
         pluginManager.pluggableMstType('view', 'stateModel'),
       ),
       bookmarkedRegions: types.array(LabeledRegionModel),
-      selectedAssembly: '',
+      modelSelectedAssembly: '',
     })
     .actions(self => ({
+      importBookmarks(regions: Region[]) {
+        self.bookmarkedRegions = cast(self.bookmarkedRegions.concat(regions))
+      },
       addBookmark(region: Region) {
-        const regionLocString = assembleLocString(region)
-        const index = self.bookmarkedRegions.findIndex(b => {
-          const bLocString = assembleLocString(b)
-          return bLocString === regionLocString
-        })
-        if (index === -1) {
-          self.bookmarkedRegions.push(region)
-          this.setSelectedAssembly(region.assemblyName)
-        }
+        self.bookmarkedRegions.push(region)
       },
-      removeBookmark(locString: string) {
-        const index = self.bookmarkedRegions.findIndex(b => {
-          const bLocString = assembleLocString(b)
-          return bLocString === locString
-        })
-        if (index !== -1) {
-          self.bookmarkedRegions.splice(index, 1)
-        }
+      removeBookmark(index: number) {
+        self.bookmarkedRegions.splice(index, 1)
       },
       clearAllBookmarks() {
         self.bookmarkedRegions.clear()
       },
-      updateBookmarkLabel(locString: string, label: string) {
-        const index = self.bookmarkedRegions.findIndex(b => {
-          const bLocString = assembleLocString(b)
-          return bLocString === locString
-        })
-        if (index !== -1) {
-          self.bookmarkedRegions[index].label = label
-        }
+      updateBookmarkLabel(index: number, label: string) {
+        self.bookmarkedRegions[index]?.setLabel(label)
       },
       setSelectedAssembly(assembly: string) {
-        self.selectedAssembly = assembly
+        self.modelSelectedAssembly = assembly
       },
     }))
     .views(self => ({
-      get assemblies() {
-        const assemblies = self.bookmarkedRegions.map(
-          region => region.assemblyName,
+      get selectedAssembly() {
+        return (
+          self.modelSelectedAssembly ||
+          (self.bookmarkedRegions.length
+            ? self.bookmarkedRegions[0].assemblyName
+            : '')
         )
-        const uniqueAssemblies = Array.from(new Set(assemblies))
-        return uniqueAssemblies
+      },
+      get assemblies() {
+        return [
+          ...new Set(self.bookmarkedRegions.map(region => region.assemblyName)),
+        ]
       },
     }))
 }
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/utils.ts b/plugins/grid-bookmark/src/GridBookmarkWidget/utils.ts
index c39e6748a6..90b411686f 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/utils.ts
+++ b/plugins/grid-bookmark/src/GridBookmarkWidget/utils.ts
@@ -77,7 +77,7 @@ export function downloadBookmarkFile(
   const fileContents = bookmarkedRegions
     .map(b => {
       const { label } = b
-      const labelVal = label === '' ? 'NA' : label
+      const labelVal = label === '' ? '.' : label
       const locString = assembleLocString(b)
 
       if (fileFormat === 'BED') {

From ccdf6d5eb6f0a79256f034de68485242a9b93be6 Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Tue, 24 Aug 2021 19:55:58 -0400
Subject: [PATCH 3/4] Small refactors

---
 .../components/ClearBookmarks.tsx             | 51 ++++++++-------
 .../components/DeleteBookmark.tsx             | 51 +++++++++------
 .../components/ImportBookmarks.tsx            | 63 ++++++++-----------
 3 files changed, 89 insertions(+), 76 deletions(-)

diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ClearBookmarks.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ClearBookmarks.tsx
index ee23a4c27b..a739efee85 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ClearBookmarks.tsx
+++ b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ClearBookmarks.tsx
@@ -6,6 +6,8 @@ import {
   IconButton,
   Dialog,
   DialogTitle,
+  DialogContent,
+  DialogActions,
   Typography,
   makeStyles,
 } from '@material-ui/core'
@@ -42,6 +44,7 @@ function ClearBookmarks({ model }: { model: GridBookmarkModel }) {
       </Button>
       <Dialog open={dialogOpen} onClose={() => setDialogOpen(false)}>
         <DialogTitle>
+          Clear bookmarks
           <IconButton
             className={classes.closeDialog}
             aria-label="close-dialog"
@@ -50,27 +53,33 @@ function ClearBookmarks({ model }: { model: GridBookmarkModel }) {
             <CloseIcon />
           </IconButton>
         </DialogTitle>
-        <div className={classes.dialogContainer}>
-          <>
-            <Typography>
-              Clear all bookmarks? Note this will clear bookmarks for all
-              assemblies
-            </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>
     </>
   )
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/DeleteBookmark.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/DeleteBookmark.tsx
index 36060e87dc..8aa223f5e9 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/DeleteBookmark.tsx
+++ b/plugins/grid-bookmark/src/GridBookmarkWidget/components/DeleteBookmark.tsx
@@ -8,6 +8,8 @@ import {
   Button,
   Dialog,
   DialogTitle,
+  DialogContent,
+  DialogActions,
   Typography,
   makeStyles,
 } from '@material-ui/core'
@@ -42,6 +44,7 @@ function DeleteBookmarkDialog({
   return (
     <Dialog open={rowNumber !== undefined} onClose={onClose}>
       <DialogTitle>
+        Delete bookmark
         <IconButton
           className={classes.closeDialog}
           aria-label="close-dialog"
@@ -50,31 +53,41 @@ function DeleteBookmarkDialog({
           <CloseIcon />
         </IconButton>
       </DialogTitle>
-      <div className={classes.dialogContainer}>
+      <DialogContent>
         <Typography>
-          Remove row number{' '}
+          Remove{' '}
           <code>
             {rowNumber !== undefined
               ? assembleLocString(model.bookmarkedRegions[rowNumber])
               : ''}
-          </code>
+          </code>{' '}
+          ?
         </Typography>
-        <br />
-        <div style={{ display: 'flex', justifyContent: 'center' }}>
-          <Button
-            variant="contained"
-            color="primary"
-            onClick={() => {
-              if (rowNumber !== undefined) {
-                removeBookmark(rowNumber)
-                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>
   )
 }
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
index 8dbf82e826..0be40eaf5a 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
+++ b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
@@ -44,13 +44,13 @@ function ImportBookmarks({
   assemblyName: string
 }) {
   const classes = useStyles()
+  const session = getSession(model)
+  const { assemblyNames } = session
   const [dialogOpen, setDialogOpen] = useState(false)
   const [location, setLocation] = useState<FileLocation>()
   const [error, setError] = useState<Error>()
-  const [fileType, setFileType] = useState('BED')
-  const session = getSession(model)
-  const [selectedAsm, setSelectedAsm] = useState<string>(
-    assemblyName || session.assemblyNames[0],
+  const [selectedAsm, setSelectedAsm] = useState(
+    assemblyName || assemblyNames[0],
   )
 
   return (
@@ -64,6 +64,7 @@ function ImportBookmarks({
         maxWidth="xl"
       >
         <DialogTitle>
+          Import bookmarks
           <IconButton
             className={classes.closeDialog}
             aria-label="close-dialog"
@@ -73,43 +74,33 @@ function ImportBookmarks({
           </IconButton>
         </DialogTitle>
         <DialogContent>
-          <Grid container direction="column" spacing={10}>
-            <Grid item>
-              <Typography>
-                Currently, only simple BED file imports are supported
-              </Typography>
-              <Select
-                className={classes.flexItem}
-                data-testid="selectFileType"
-                value={fileType}
-                disabled
-                onChange={event => setFileType(event.target.value as string)}
-              >
-                <MenuItem value="BED">BED</MenuItem>
-                <MenuItem value="TSV">TSV</MenuItem>
-              </Select>
-            </Grid>
-            <Grid item>
-              <Typography>Select assembly that your data belongs to</Typography>
-              <AssemblySelector
-                onChange={val => setSelectedAsm(val)}
-                session={session}
-                selected={selectedAsm}
-              />
-            </Grid>
-            <Grid item>
-              <FileSelector
-                location={location}
-                setLocation={setLocation}
-                name="File"
-              />
-            </Grid>
-          </Grid>
+          <Typography>
+            Choose a BED format file to import. The first 4 columns will be used
+          </Typography>
+
+          <FileSelector
+            location={location}
+            setLocation={setLocation}
+            name="File"
+          />
+          <Typography>Select assembly that your data belongs to</Typography>
+          <AssemblySelector
+            onChange={val => setSelectedAsm(val)}
+            session={session}
+            selected={selectedAsm}
+          />
           {error ? (
             <Typography color="error" variant="h6">{`${error}`}</Typography>
           ) : null}
         </DialogContent>
         <DialogActions>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => setDialogOpen(false)}
+          >
+            Cancel
+          </Button>
           <Button
             className={classes.flexItem}
             data-testid="dialogImport"

From 6ff4aac585b3171863024c58d3fa64a72bb37694 Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Tue, 24 Aug 2021 20:00:31 -0400
Subject: [PATCH 4/4] Touch up downloads dialog

---
 .../components/DownloadBookmarks.tsx          | 72 ++++++++++---------
 .../components/ImportBookmarks.tsx            |  3 -
 2 files changed, 38 insertions(+), 37 deletions(-)

diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/DownloadBookmarks.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/DownloadBookmarks.tsx
index 992166bc3a..0d6e5c7cc7 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/DownloadBookmarks.tsx
+++ b/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>
     </>
   )
diff --git a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
index 0be40eaf5a..d045e8e9bf 100644
--- a/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
+++ b/plugins/grid-bookmark/src/GridBookmarkWidget/components/ImportBookmarks.tsx
@@ -12,9 +12,6 @@ import {
   DialogTitle,
   DialogContent,
   DialogActions,
-  Grid,
-  Select,
-  MenuItem,
   makeStyles,
   Typography,
 } from '@material-ui/core'