Adds the ability to highlight regions using the bookmarks widget

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

@@ -9,12 +9,14 @@ import {
   measureGridWidth,
   measureText,
 } from '@jbrowse/core/util'
+import { useResizeBar } from '@jbrowse/core/ui/useResizeBar'
+import ResizeBar from '@jbrowse/core/ui/ResizeBar'
+
+const ColorPicker = lazy(() => import('@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'
 
 const EditBookmarkLabelDialog = lazy(() => import('./EditBookmarkLabelDialog'))
 
@@ -59,10 +61,8 @@ const BookmarkGrid = observer(function ({
       }
     })
 
-  // reset selections if bookmarked regions change
-  // needed especially if bookmarked regions are deleted, then
   const [widths, setWidths] = useState([
-    50,
+    40,
     Math.max(
       measureText('Bookmark link', 12) + 30,
       measureGridWidth(rows.map(row => row.locString)),
@@ -75,6 +75,7 @@ const BookmarkGrid = observer(function ({
       measureText('Assembly', 12) + 30,
       measureGridWidth(rows.map(row => row.assemblyName)),
     ),
+    100,
   ])
 
   return (
@@ -123,6 +124,19 @@ const BookmarkGrid = observer(function ({
               headerName: 'Assembly',
               width: widths[3],
             },
+            {
+              field: 'highlight',
+              headerName: 'Highlight',
+              width: widths[4],
+              renderCell: ({ value, row }) => (
+                <ColorPicker
+                  color={value || 'black'}
+                  onChange={event => {
+                    return model.updateBookmarkHighlight(row, event)
+                  }}
+                />
+              ),
+            },
           ]}
           onCellDoubleClick={({ row }) => setDialogRow(row)}
           processRowUpdate={row => {

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

@@ -7,6 +7,7 @@ import { makeStyles } from 'tss-react/mui'
 import BookmarkGrid from './BookmarkGrid'
 import DeleteBookmarks from './DeleteBookmarks'
 import ExportBookmarks from './ExportBookmarks'
+import HighlightBookmarks from './HighlightBookmarks'
 import ImportBookmarks from './ImportBookmarks'
 import AssemblySelector from './AssemblySelector'
 import ShareBookmarks from './ShareBookmarks'
@@ -36,6 +37,7 @@ const GridBookmarkWidget = observer(function GridBookmarkWidget({
         <ExportBookmarks model={model} />
         <ImportBookmarks model={model} />
         <ShareBookmarks model={model} />
+        <HighlightBookmarks model={model} />
         <DeleteBookmarks model={model} />
       </div>
       <Alert severity="info">

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

@@ -0,0 +1,108 @@
+import React, { useEffect, useRef } from 'react'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { SessionWithWidgets, getSession, notEmpty } from '@jbrowse/core/util'
+import { IExtendedLGV } from '../../model'
+
+// icons
+import BookmarkIcon from '@mui/icons-material/Bookmark'
+
+// locals
+import { Tooltip } from '@mui/material'
+import { GridBookmarkModel } from '../../model'
+
+type LGV = IExtendedLGV
+
+const useStyles = makeStyles()({
+  highlight: {
+    height: '100%',
+    position: 'absolute',
+    textAlign: 'center',
+    overflow: 'hidden',
+    display: 'flex',
+    alignItems: 'start',
+  },
+})
+
+const intensify = (rgba: string, opacity: number) => {
+  if (rgba) {
+    const values = rgba.replaceAll(/[^\d,.]/g, '').split(',')
+    const originalOpacity = values.pop()
+    // originalOpacity !== '0' assumes if the user has set the opacity of this highlight to 0, they probably don't want to see the label either
+    const n = `rgba(${values.join(', ')}, ${
+      originalOpacity !== '0' ? opacity : 0
+    })`
+    return n
+  }
+  return `rgba(0,0,0,0)`
+}
+
+const Highlight = observer(function Highlight({ model }: { model: LGV }) {
+  const { classes } = useStyles()
+
+  const session = getSession(model) as SessionWithWidgets
+  const { showBookmarkHighlights, showBookmarkLabels } = model
+  const assemblyNames = new Set(session.assemblyNames)
+
+  const bookmarkWidget = session.widgets.get(
+    'GridBookmark',
+  ) as GridBookmarkModel
+
+  const bookmarks = useRef(bookmarkWidget?.bookmarks ?? [])
+
+  useEffect(() => {
+    if (!bookmarkWidget) {
+      const newBookmarkWidget = session.addWidget(
+        'GridBookmarkWidget',
+        'GridBookmark',
+      ) as GridBookmarkModel
+      bookmarks.current = newBookmarkWidget.bookmarks
+    }
+  }, [session, bookmarkWidget])
+
+  return (
+    <>
+      {showBookmarkHighlights && bookmarks.current
+        ? bookmarks.current
+            .filter(value => assemblyNames.has(value.assemblyName))
+            .map(r => {
+              const s = model.bpToPx({
+                refName: r.refName,
+                coord: r.start,
+              })
+              const e = model.bpToPx({
+                refName: r.refName,
+                coord: r.end,
+              })
+              return s && e
+                ? {
+                    width: Math.max(Math.abs(e.offsetPx - s.offsetPx), 3),
+                    left: Math.min(s.offsetPx, e.offsetPx) - model.offsetPx,
+                    highlight: r.highlight,
+                    label: r.label,
+                  }
+                : undefined
+            })
+            .filter(notEmpty)
+            .map(({ left, width, highlight, label }, idx) => (
+              <div
+                key={`${left}_${width}_${idx}`}
+                className={classes.highlight}
+                style={{ left, width, background: highlight }}
+              >
+                {showBookmarkLabels ? (
+                  <Tooltip title={label} arrow>
+                    <BookmarkIcon
+                      fontSize="small"
+                      sx={{ color: `${intensify(highlight, 0.8)}` }}
+                    />
+                  </Tooltip>
+                ) : null}
+              </div>
+            ))
+        : null}
+    </>
+  )
+})
+
+export default Highlight

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
+
+// locals
+import Highlight from './Highlight'
+import { IExtendedLGV } from '../../model'
+
+export default function AddHighlightModelF(pluginManager: PluginManager) {
+  pluginManager.addToExtensionPoint(
+    'LinearGenomeView-TracksContainerComponent',
+    // @ts-expect-error
+    (rest: React.ReactNode[] = [], { model }: { model: IExtendedLGV }) => {
+      return [
+        ...rest,
+        <Highlight key={`highlight_grid_bookmark`} model={model} />,
+      ]
+    },
+  )
+}

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

@@ -0,0 +1,36 @@
+import React, { Suspense, lazy, useState } from 'react'
+import { Button } from '@mui/material'
+
+// icons
+import EditIcon from '@mui/icons-material/Edit'
+
+// locals
+import { GridBookmarkModel } from '../model'
+const HighlightBookmarksDialog = lazy(
+  () => import('./HighlightBookmarksDialog'),
+)
+
+function HighlightBookmarks({ model }: { model: GridBookmarkModel }) {
+  const [open, setOpen] = useState(false)
+  return (
+    <>
+      <Button
+        startIcon={<EditIcon />}
+        aria-label="edit bookmarks"
+        onClick={() => setOpen(true)}
+      >
+        Highlight
+      </Button>
+      {open ? (
+        <Suspense fallback={<React.Fragment />}>
+          <HighlightBookmarksDialog
+            model={model}
+            onClose={() => setOpen(false)}
+          />
+        </Suspense>
+      ) : null}
+    </>
+  )
+}
+
+export default HighlightBookmarks

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

@@ -0,0 +1,103 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+import {
+  Button,
+  DialogContent,
+  DialogActions,
+  Alert,
+  Stack,
+  Typography,
+  Switch,
+} from '@mui/material'
+import { Dialog } from '@jbrowse/core/ui'
+import { ColorPicker } from '@jbrowse/core/ui/ColorPicker'
+
+// locals
+import { GridBookmarkModel } from '../model'
+
+const HighlightBookmarksDialog = observer(function ({
+  onClose,
+  model,
+}: {
+  onClose: () => void
+  model: GridBookmarkModel
+}) {
+  const { selectedBookmarks } = model
+  const editNone = selectedBookmarks.length === 0
+  const [color, setColor] = useState(
+    selectedBookmarks[0]?.highlight ?? 'rgba(247, 129, 192, 0.35)',
+  )
+
+  return (
+    <Dialog open onClose={onClose} title="Highlight bookmarks">
+      <DialogContent>
+        <Typography variant="h6">Bulk highlight selector</Typography>
+        <Alert severity="info">
+          {editNone ? (
+            <>
+              <span>
+                Use the checkboxes to select individual bookmarks to edit.
+              </span>
+            </>
+          ) : (
+            'Only selected bookmarks will be edited.'
+          )}
+        </Alert>
+        {!editNone ? (
+          <ColorPicker
+            color={color}
+            onChange={event => {
+              setColor(event)
+            }}
+          />
+        ) : null}
+        <Typography variant="h6">Highlight toggles</Typography>
+        <Stack direction="row" alignItems="center">
+          <Switch
+            data-testid="toggle_highlight_all_switch"
+            checked={model.areBookmarksHighlightedOnAllOpenViews}
+            onChange={() => {
+              model.setHighlightToggle(
+                !model.areBookmarksHighlightedOnAllOpenViews,
+              )
+            }}
+          />
+          <Typography variant="overline">
+            Toggle bookmark highlights on all open views
+          </Typography>
+        </Stack>
+        <Stack direction="row" alignItems="center">
+          <Switch
+            data-testid="toggle_highlight_label_all_switch"
+            checked={model.areBookmarksHighlightLabelsOnAllOpenViews}
+            onChange={() => {
+              model.setLabelToggle(
+                !model.areBookmarksHighlightLabelsOnAllOpenViews,
+              )
+            }}
+          />
+          <Typography variant="overline">
+            Toggle 'bookmark' icon on LGV tracks
+          </Typography>
+        </Stack>
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" color="secondary" onClick={() => onClose()}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            model.updateBulkBookmarkHighlights(color)
+            onClose()
+          }}
+        >
+          Confirm
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default HighlightBookmarksDialog

plugins/grid-bookmark/src/GridBookmarkWidget/index.ts

@@ -1,9 +1,12 @@
 import { lazy } from 'react'
 import { ConfigurationSchema } from '@jbrowse/core/configuration'
 import { WidgetType } from '@jbrowse/core/pluggableElementTypes'
-import stateModelFactory from './model'
 import PluginManager from '@jbrowse/core/PluginManager'
 
+// locals
+import stateModelFactory from './model'
+import AddHighlightModelF from './components/Highlight'
+
 const configSchema = ConfigurationSchema('GridBookmarkWidget', {})
 
 export default (pluginManager: PluginManager) => {
@@ -16,4 +19,5 @@ export default (pluginManager: PluginManager) => {
       ReactComponent: lazy(() => import('./components/GridBookmarkWidget')),
     })
   })
+  AddHighlightModelF(pluginManager)
 }