Adds the ability to highlight regions using the bookmarks widget

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

@@ -1,4 +1,4 @@
-import React, { Suspense, lazy, useState } from 'react'
+import React, { lazy, useState } from 'react'
 import { observer } from 'mobx-react'
 import { Link } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
@@ -9,14 +9,17 @@ import {
   measureGridWidth,
   measureText,
 } from '@jbrowse/core/util'
+import { useResizeBar } from '@jbrowse/core/ui/useResizeBar'
+import ResizeBar from '@jbrowse/core/ui/ResizeBar'
+import ColorPicker from '@jbrowse/core/ui/ColorPicker'
 
 // locals
 import { navToBookmark } from '../utils'
-import { GridBookmarkModel, IExtendedLabeledRegionModel } from '../model'
-import { useResizeBar } from '@jbrowse/core/ui/useResizeBar'
-import ResizeBar from '@jbrowse/core/ui/ResizeBar'
+import { GridBookmarkModel } from '../model'
 
-const EditBookmarkLabelDialog = lazy(() => import('./EditBookmarkLabelDialog'))
+const EditBookmarkLabelDialog = lazy(
+  () => import('./dialogs/EditBookmarkLabelDialog'),
+)
 
 const useStyles = makeStyles()(() => ({
   link: {
@@ -35,7 +38,6 @@ const BookmarkGrid = observer(function ({
   model: GridBookmarkModel
 }) {
   const { classes, cx } = useStyles()
-  const [dialogRow, setDialogRow] = useState<IExtendedLabeledRegionModel>()
   const { ref, scrollLeft } = useResizeBar()
   const {
     bookmarks,
@@ -59,8 +61,6 @@ const BookmarkGrid = observer(function ({
       }
     })
 
-  // reset selections if bookmarked regions change
-  // needed especially if bookmarked regions are deleted, then
   const [widths, setWidths] = useState([
     50,
     Math.max(
@@ -75,86 +75,94 @@ const BookmarkGrid = observer(function ({
       measureText('Assembly', 12) + 30,
       measureGridWidth(rows.map(row => row.assemblyName)),
     ),
+    100,
   ])
 
   return (
-    <>
-      <div ref={ref}>
-        <ResizeBar
-          widths={widths}
-          setWidths={setWidths}
-          scrollLeft={scrollLeft}
-        />
-        <DataGrid
-          autoHeight
-          density="compact"
-          rows={rows}
-          columns={[
-            {
-              ...GRID_CHECKBOX_SELECTION_COL_DEF,
-              width: widths[0],
-            },
-            {
-              field: 'locString',
-              headerName: 'Bookmark link',
-              width: widths[1],
-              renderCell: ({ value, row }) => (
-                <Link
-                  className={cx(classes.link, classes.cell)}
-                  href="#"
-                  onClick={async event => {
-                    event.preventDefault()
-                    const { views } = session
-                    await navToBookmark(value, row.assemblyName, views, model)
-                  }}
-                >
-                  {value}
-                </Link>
-              ),
-            },
-            {
-              field: 'label',
-              headerName: 'Label',
-              width: widths[2],
-              editable: true,
-            },
-            {
-              field: 'assemblyName',
-              headerName: 'Assembly',
-              width: widths[3],
-            },
-          ]}
-          onCellDoubleClick={({ row }) => setDialogRow(row)}
-          processRowUpdate={row => {
-            const target = rows[row.id]
-            model.updateBookmarkLabel(target, row.label)
-            return row
-          }}
-          onProcessRowUpdateError={e => session.notify(e.message, 'error')}
-          checkboxSelection
-          onRowSelectionModelChange={newRowSelectionModel => {
-            if (bookmarksWithValidAssemblies.length > 0) {
-              model.setSelectedBookmarks(
-                newRowSelectionModel.map(value => ({
-                  ...rows[value as number],
-                })),
-              )
-            }
-          }}
-          rowSelectionModel={selectedBookmarks.map(r => r.id)}
-          disableRowSelectionOnClick
-        />
-      </div>
-      {dialogRow ? (
-        <Suspense fallback={<React.Fragment />}>
-          <EditBookmarkLabelDialog
-            onClose={() => setDialogRow(undefined)}
-            model={model}
-            dialogRow={dialogRow}
-          />
-        </Suspense>
-      ) : null}
-    </>
+    <div ref={ref}>
+      <ResizeBar
+        widths={widths}
+        setWidths={setWidths}
+        scrollLeft={scrollLeft}
+      />
+      <DataGrid
+        autoHeight
+        density="compact"
+        rows={rows}
+        columns={[
+          {
+            ...GRID_CHECKBOX_SELECTION_COL_DEF,
+            width: widths[0],
+          },
+          {
+            field: 'locString',
+            headerName: 'Bookmark link',
+            width: widths[1],
+            renderCell: ({ value, row }) => (
+              <Link
+                className={cx(classes.link, classes.cell)}
+                href="#"
+                onClick={async event => {
+                  event.preventDefault()
+                  const { views } = session
+                  await navToBookmark(value, row.assemblyName, views, model)
+                }}
+              >
+                {value}
+              </Link>
+            ),
+          },
+          {
+            field: 'label',
+            headerName: 'Label',
+            width: widths[2],
+            editable: true,
+          },
+          {
+            field: 'assemblyName',
+            headerName: 'Assembly',
+            width: widths[3],
+          },
+          {
+            field: 'highlight',
+            headerName: 'Highlight',
+            width: widths[4],
+            renderCell: ({ value, row }) => (
+              <ColorPicker
+                color={value || 'black'}
+                onChange={event => {
+                  model.updateBookmarkHighlight(row, event)
+                }}
+              />
+            ),
+          },
+        ]}
+        onCellDoubleClick={({ row }) => {
+          getSession(model).queueDialog(onClose => [
+            EditBookmarkLabelDialog,
+            { onClose, model, dialogRow: row },
+          ])
+        }}
+        processRowUpdate={row => {
+          const target = rows[row.id]
+          model.updateBookmarkLabel(target, row.label)
+          return row
+        }}
+        onProcessRowUpdateError={e => session.notify(e.message, 'error')}
+        checkboxSelection
+        onRowSelectionModelChange={newRowSelectionModel => {
+          if (bookmarksWithValidAssemblies.length > 0) {
+            model.setSelectedBookmarks(
+              newRowSelectionModel.map(value => ({
+                ...rows[value as number],
+              })),
+            )
+          }
+        }}
+        rowSelectionModel={selectedBookmarks.map(r => r.id)}
+        disableRowSelectionOnClick
+      />
+    </div>
   )
 })