@apollo-annotation/jbrowse-plugin-apollo 0.3.8 → 0.3.10

package/src/LinearApolloDisplay/components/LinearApolloDisplay.tsx

@@ -1,35 +1,19 @@
 /* eslint-disable @typescript-eslint/unbound-method */
 /* eslint-disable @typescript-eslint/no-misused-promises */
 /* eslint-disable @typescript-eslint/no-unnecessary-condition */
-import { type CheckResultI } from '@apollo-annotation/mst'
 import { Menu, type MenuItem } from '@jbrowse/core/ui'
-import {
-  type AbstractSessionModel,
-  doesIntersect2,
-  getContainingView,
-} from '@jbrowse/core/util'
+import { getContainingView } from '@jbrowse/core/util'
 import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import ErrorIcon from '@mui/icons-material/Error'
 import LockIcon from '@mui/icons-material/Lock'
-import {
-  Alert,
-  Avatar,
-  Badge,
-  Box,
-  CircularProgress,
-  Tooltip,
-  useTheme,
-} from '@mui/material'
+import { Alert, CircularProgress, Tooltip, useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 import React, { useEffect, useState } from 'react'
 
-import {
-  type Coord,
-  clusterResultByMessage,
-  useStyles,
-} from '../../util/displayUtils'
+import { type Coord, useStyles } from '../../util/displayUtils'
 import { type LinearApolloDisplay as LinearApolloDisplayI } from '../stateModel'
 
+import { CheckResultWarnings } from './CheckResultWarnings'
+
 interface LinearApolloDisplayProps {
   model: LinearApolloDisplayI
 }
@@ -43,8 +27,6 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   const { model } = props
   const {
     loading,
-    apolloDragging,
-    apolloRowHeight,
     contextMenuItems: getContextMenuItems,
     cursor,
     featuresHeight,
@@ -59,7 +41,6 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
     setCollaboratorCanvas,
     setOverlayCanvas,
     setTheme,
-    showCheckResults,
   } = model
   const { classes } = useStyles()
   const lgv = getContainingView(model) as unknown as LinearGenomeViewModel
@@ -73,7 +54,6 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
   if (!isShown) {
     return null
   }
-  const { assemblyManager } = session as unknown as AbstractSessionModel
   return (
     <>
       <div
@@ -153,83 +133,7 @@ export const LinearApolloDisplay = observer(function LinearApolloDisplay(
               style={{ cursor: cursor ?? 'default' }}
               data-testid="overlayCanvas"
             />
-            {lgv.displayedRegions.flatMap((region, idx) => {
-              const widthBp = lgv.bpPerPx * apolloRowHeight
-              const assembly = assemblyManager.get(region.assemblyName)
-              if (showCheckResults) {
-                const filteredCheckResults = [
-                  ...session.apolloDataStore.checkResults.values(),
-                ].filter(
-                  (checkResult) =>
-                    assembly?.isValidRefName(checkResult.refSeq) &&
-                    assembly.getCanonicalRefName(checkResult.refSeq) ===
-                      region.refName &&
-                    doesIntersect2(
-                      region.start,
-                      region.end,
-                      checkResult.start,
-                      checkResult.end,
-                    ),
-                )
-                const checkResults = clusterResultByMessage<CheckResultI>(
-                  filteredCheckResults,
-                  widthBp,
-                  true,
-                )
-                return checkResults.map((checkResult) => {
-                  const left =
-                    (lgv.bpToPx({
-                      refName: region.refName,
-                      coord: checkResult.start,
-                      regionNumber: idx,
-                    })?.offsetPx ?? 0) - lgv.offsetPx
-                  const [feature] = checkResult.featureIds
-                  if (!feature) {
-                    return null
-                  }
-                  let row = 0
-                  const featureLayout = model.getFeatureLayoutPosition(feature)
-                  if (featureLayout) {
-                    row = featureLayout.layoutRow + featureLayout.featureRow
-                  }
-                  const top = row * apolloRowHeight
-                  const height = apolloRowHeight
-                  return (
-                    <Tooltip key={checkResult._id} title={checkResult.message}>
-                      <Box
-                        className={classes.box}
-                        style={{
-                          top,
-                          left,
-                          height,
-                          width: height,
-                          pointerEvents: apolloDragging ? 'none' : 'auto',
-                        }}
-                      >
-                        <Badge
-                          className={classes.badge}
-                          badgeContent={checkResult.count}
-                          color="primary"
-                          overlap="circular"
-                          anchorOrigin={{
-                            vertical: 'bottom',
-                            horizontal: 'right',
-                          }}
-                          invisible={checkResult.count <= 1}
-                        >
-                          <Avatar className={classes.avatar}>
-                            <ErrorIcon
-                              data-testid={`ErrorIcon-${checkResult.start}`}
-                            />
-                          </Avatar>
-                        </Badge>
-                      </Box>
-                    </Tooltip>
-                  )
-                })
-              }
-              return null
-            })}
+            <CheckResultWarnings display={model} />
             <Menu
               open={contextMenuItems.length > 0}
               onMenuItemClick={(_, callback) => {

package/src/LinearApolloDisplay/glyphs/GeneGlyph.ts

@@ -10,21 +10,24 @@ import {
   isSessionModelWithWidgets,
 } from '@jbrowse/core/util'
 import { type LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
-import SkipNextRoundedIcon from '@mui/icons-material/SkipNextRounded'
-import SkipPreviousRoundedIcon from '@mui/icons-material/SkipPreviousRounded'
 import { alpha } from '@mui/material'
 
 import { type OntologyRecord } from '../../OntologyManager'
 import { MergeExons, MergeTranscripts, SplitExon } from '../../components'
-import { type ApolloSessionModel } from '../../session'
 import {
   type MousePosition,
   type MousePositionWithFeature,
   containsSelectedFeature,
+  getAdjacentExons,
   getMinAndMaxPx,
   getOverlappingEdge,
+  getStreamIcon,
+  isCDSFeature,
+  isExonFeature,
   isMousePositionWithFeature,
+  isTranscriptFeature,
   navToFeatureCenter,
+  selectFeatureAndOpenWidget,
 } from '../../util'
 import { getRelatedFeatures } from '../../util/annotationFeatureUtils'
 import { type LinearApolloDisplay } from '../stateModel'
@@ -92,9 +95,9 @@ function drawBackground(
   stateModel: LinearApolloDisplayRendering,
   displayedRegionIndex: number,
   row: number,
-  color: string,
+  color?: string,
 ) {
-  const { apolloRowHeight, lgv, session } = stateModel
+  const { apolloRowHeight, lgv, session, theme } = stateModel
   const { bpPerPx, displayedRegions, offsetPx } = lgv
   const displayedRegion = displayedRegions[displayedRegionIndex]
   const { refName, reversed } = displayedRegion
@@ -118,7 +121,20 @@ function drawBackground(
   const topLevelFeatureHeight =
     getRowCount(feature, featureTypeOntology) * apolloRowHeight
 
-  ctx.fillStyle = color
+  let selectedColor
+  if (color) {
+    selectedColor = color
+  } else {
+    selectedColor = readConfObject(
+      session.getPluginConfiguration(),
+      'geneBackgroundColor',
+      { featureType: feature.type },
+    ) as string
+    if (!selectedColor) {
+      selectedColor = alpha(theme.palette.background.paper, 0.6)
+    }
+  }
+  ctx.fillStyle = selectedColor
   ctx.fillRect(
     topLevelFeatureStartPx,
     topLevelFeatureTop,
@@ -127,18 +143,6 @@ function drawBackground(
   )
 }
 
-function backgroundColorForFeature(
-  session: ApolloSessionModel,
-  featureType: string,
-): string {
-  const color = readConfObject(
-    session.getPluginConfiguration(),
-    'backgroundColorForFeature',
-    { featureType },
-  ) as string
-  return color
-}
-
 function draw(
   ctx: CanvasRenderingContext2D,
   feature: AnnotationFeature,
@@ -163,25 +167,7 @@ function draw(
   }
 
   // Draw background for gene
-  drawBackground(
-    ctx,
-    feature,
-    stateModel,
-    displayedRegionIndex,
-    row,
-    alpha(theme.palette.background.paper, 0.6),
-  )
-
-  if (featureTypeOntology.isTypeOf(feature.type, 'pseudogene')) {
-    drawBackground(
-      ctx,
-      feature,
-      stateModel,
-      displayedRegionIndex,
-      row,
-      backgroundColorForFeature(session, 'pseudogenic_transcript'),
-    )
-  }
+  drawBackground(ctx, feature, stateModel, displayedRegionIndex, row)
 
   // Draw lines on different rows for each transcript
   let currentRow = 0
@@ -197,30 +183,7 @@ function draw(
     if (!transcriptChildren) {
       continue
     }
-
     const cdsCount = getCDSCount(transcript, featureTypeOntology)
-    if (cdsCount === 0) {
-      drawBackground(
-        ctx,
-        transcript,
-        stateModel,
-        displayedRegionIndex,
-        currentRow,
-        backgroundColorForFeature(session, 'nonCodingTranscript'),
-      )
-    }
-    if (
-      featureTypeOntology.isTypeOf(transcript.type, 'pseudogenic_transcript')
-    ) {
-      drawBackground(
-        ctx,
-        transcript,
-        stateModel,
-        displayedRegionIndex,
-        currentRow,
-        backgroundColorForFeature(session, 'pseudogenic_transcript'),
-      )
-    }
 
     for (const [, childFeature] of transcriptChildren) {
       if (!featureTypeOntology.isTypeOf(childFeature.type, 'CDS')) {
@@ -471,19 +434,21 @@ function drawLine(
   ctx.strokeStyle = theme.palette.text.primary
   const { strand = 1 } = transcript
   ctx.beginPath()
+  // If view is reversed, draw forward as reverse and vice versa
+  const effectiveStrand = strand * (reversed ? -1 : 1)
   // Draw the transcript line, and extend it out a bit on the 3` end
-  const lineStart = startPx - (strand === -1 ? 5 : 0)
-  const lineEnd = startPx + widthPx + (strand === -1 ? 0 : 5)
+  const lineStart = startPx - (effectiveStrand === -1 ? 5 : 0)
+  const lineEnd = startPx + widthPx + (effectiveStrand === -1 ? 0 : 5)
   ctx.moveTo(lineStart, height)
   ctx.lineTo(lineEnd, height)
   // Now to draw arrows every 20 pixels along the line
   // Make the arrow range a bit shorter to avoid an arrow hanging off the 5` end
-  const arrowsStart = lineStart + (strand === -1 ? 0 : 3)
-  const arrowsEnd = lineEnd - (strand === -1 ? 3 : 0)
+  const arrowsStart = lineStart + (effectiveStrand === -1 ? 0 : 3)
+  const arrowsEnd = lineEnd - (effectiveStrand === -1 ? 3 : 0)
   // Offset determines if the arrows face left or right
-  const offset = strand === -1 ? 3 : -3
+  const offset = effectiveStrand === -1 ? 3 : -3
   const arrowRange =
-    strand === -1
+    effectiveStrand === -1
       ? range(arrowsStart, arrowsEnd, 20)
       : range(arrowsEnd, arrowsStart, 20)
   for (const arrowLocation of arrowRange) {
@@ -736,45 +701,6 @@ function getRowForFeature(
   return
 }
 
-function selectFeatureAndOpenWidget(
-  stateModel: LinearApolloDisplayMouseEvents,
-  feature: AnnotationFeature,
-) {
-  if (stateModel.apolloDragging) {
-    return
-  }
-  stateModel.setSelectedFeature(feature)
-  const { session } = stateModel
-  const { apolloDataStore } = session
-  const { featureTypeOntology } = apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-
-  let containsCDSOrExon = false
-  for (const [, child] of feature.children ?? []) {
-    if (
-      featureTypeOntology.isTypeOf(child.type, 'CDS') ||
-      featureTypeOntology.isTypeOf(child.type, 'exon')
-    ) {
-      containsCDSOrExon = true
-      break
-    }
-  }
-  if (
-    (featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
-      featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')) &&
-    containsCDSOrExon
-  ) {
-    stateModel.showFeatureDetailsWidget(feature, [
-      'ApolloTranscriptDetails',
-      'apolloTranscriptDetails',
-    ])
-  } else {
-    stateModel.showFeatureDetailsWidget(feature)
-  }
-}
-
 function onMouseDown(
   stateModel: LinearApolloDisplay,
   currentMousePosition: MousePositionWithFeature,
@@ -899,131 +825,6 @@ function getDraggableFeatureInfo(
   return
 }
 
-function isTranscriptFeature(
-  feature: AnnotationFeature,
-  session: ApolloSessionModel,
-): boolean {
-  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-  return (
-    featureTypeOntology.isTypeOf(feature.type, 'transcript') ||
-    featureTypeOntology.isTypeOf(feature.type, 'pseudogenic_transcript')
-  )
-}
-
-function isExonFeature(
-  feature: AnnotationFeature,
-  session: ApolloSessionModel,
-): boolean {
-  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-  return featureTypeOntology.isTypeOf(feature.type, 'exon')
-}
-
-function isCDSFeature(
-  feature: AnnotationFeature,
-  session: ApolloSessionModel,
-): boolean {
-  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-  return featureTypeOntology.isTypeOf(feature.type, 'CDS')
-}
-
-interface AdjacentExons {
-  upstream: AnnotationFeature | undefined
-  downstream: AnnotationFeature | undefined
-}
-
-function getAdjacentExons(
-  currentExon: AnnotationFeature,
-  display: LinearApolloDisplayMouseEvents,
-  mousePosition: MousePositionWithFeature,
-  session: ApolloSessionModel,
-): AdjacentExons {
-  const lgv = getContainingView(
-    display as BaseDisplayModel,
-  ) as unknown as LinearGenomeViewModel
-
-  // Genomic coords of current view
-  const viewGenomicLeft = mousePosition.bp - lgv.bpPerPx * mousePosition.x
-  const viewGenomicRight = viewGenomicLeft + lgv.coarseTotalBp
-  if (!currentExon.parent) {
-    return { upstream: undefined, downstream: undefined }
-  }
-  const transcript = currentExon.parent
-  if (!transcript.children) {
-    throw new Error(`Error getting children of ${transcript._id}`)
-  }
-  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
-  if (!featureTypeOntology) {
-    throw new Error('featureTypeOntology is undefined')
-  }
-
-  let exons = []
-  for (const [, child] of transcript.children) {
-    if (featureTypeOntology.isTypeOf(child.type, 'exon')) {
-      exons.push(child)
-    }
-  }
-  const adjacentExons: AdjacentExons = {
-    upstream: undefined,
-    downstream: undefined,
-  }
-  exons = exons.sort((a, b) => (a.min < b.min ? -1 : 1))
-  for (const exon of exons) {
-    if (exon.min > viewGenomicRight) {
-      adjacentExons.downstream = exon
-      break
-    }
-  }
-  exons = exons.sort((a, b) => (a.min > b.min ? -1 : 1))
-  for (const exon of exons) {
-    if (exon.max < viewGenomicLeft) {
-      adjacentExons.upstream = exon
-      break
-    }
-  }
-  if (transcript.strand === -1) {
-    const newUpstream = adjacentExons.downstream
-    adjacentExons.downstream = adjacentExons.upstream
-    adjacentExons.upstream = newUpstream
-  }
-  return adjacentExons
-}
-
-function getStreamIcon(
-  strand: 1 | -1 | undefined,
-  isUpstream: boolean,
-  isFlipped: boolean | undefined,
-) {
-  // This is the icon you would use for strand=1, downstream, straight
-  // (non-flipped) view
-  let icon = SkipNextRoundedIcon
-
-  if (strand === -1) {
-    icon = SkipPreviousRoundedIcon
-  }
-  if (isUpstream) {
-    icon =
-      icon === SkipPreviousRoundedIcon
-        ? SkipNextRoundedIcon
-        : SkipPreviousRoundedIcon
-  }
-  if (isFlipped) {
-    icon =
-      icon === SkipPreviousRoundedIcon
-        ? SkipNextRoundedIcon
-        : SkipPreviousRoundedIcon
-  }
-  return icon
-}
-
 function getContextMenuItems(
   display: LinearApolloDisplayMouseEvents,
   mousePosition: MousePositionWithFeature,
@@ -1173,8 +974,8 @@ function getContextMenuItems(
           },
         })
         if (isSessionModelWithWidgets(session)) {
-          contextMenuItemsForFeature.push({
-            label: 'Open transcript details',
+          contextMenuItemsForFeature.splice(1, 0, {
+            label: 'Open transcript editor',
             onClick: () => {
               const apolloTranscriptWidget = session.addWidget(
                 'ApolloTranscriptDetails',

package/src/LinearApolloDisplay/glyphs/util.ts

@@ -0,0 +1,36 @@
+import { type ContentBlock } from '@jbrowse/core/util/blockTypes'
+
+import { type LinearApolloDisplay } from '../stateModel'
+
+export function getLeftPx(
+  display: LinearApolloDisplay,
+  feature: { max: number; min: number },
+  block: ContentBlock,
+) {
+  const { lgv } = display
+  const { bpPerPx, offsetPx } = lgv
+  const blockLeftPx = block.offsetPx - offsetPx
+  const featureLeftBpDistanceFromBlockLeftBp = block.reversed
+    ? block.end - feature.max
+    : feature.min - block.start
+  const featureLeftPxDistanceFromBlockLeftPx =
+    featureLeftBpDistanceFromBlockLeftBp / bpPerPx
+  return blockLeftPx + featureLeftPxDistanceFromBlockLeftPx
+}
+
+/**
+ * Perform a canvas strokeRect, but have the stroke be contained within the
+ * given rect instead of centered on it.
+ */
+export function strokeRectInner(
+  ctx: CanvasRenderingContext2D,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  color: string,
+) {
+  ctx.strokeStyle = color
+  ctx.lineWidth = 1
+  ctx.strokeRect(left + 0.5, top + 0.5, width - 1, height - 1)
+}

package/src/LinearApolloReferenceSequenceDisplay/drawSequenceOverlay.ts

@@ -0,0 +1,174 @@
+import { type AnnotationFeature } from '@apollo-annotation/mst'
+import { type Frame, getFrame } from '@jbrowse/core/util'
+import { type BlockSet, type ContentBlock } from '@jbrowse/core/util/blockTypes'
+import { type Theme } from '@mui/material'
+
+import { type ApolloSessionModel, type HoveredFeature } from '../session'
+
+function getSeqRow(
+  strand: 1 | -1 | undefined,
+  bpPerPx: number,
+  reversed?: boolean,
+): number | undefined {
+  if (bpPerPx > 1 || strand === undefined) {
+    return
+  }
+  if (reversed) {
+    return strand === 1 ? 4 : 3
+  }
+  return strand === 1 ? 3 : 4
+}
+
+function getTranslationRow(frame: Frame, bpPerPx: number, reversed?: boolean) {
+  const frameRows = bpPerPx <= 1 ? [2, 1, 0, 7, 6, 5] : [2, 1, 0, 5, 4, 3]
+  if (reversed) {
+    frameRows.reverse()
+  }
+  frameRows.unshift(0)
+  const row = frameRows.at(frame)
+  if (row === undefined) {
+    throw new Error('could not find row')
+  }
+  return row
+}
+
+function getLeftPx(
+  feature: { min: number; max: number },
+  bpPerPx: number,
+  offsetPx: number,
+  block: ContentBlock,
+) {
+  const blockLeftPx = block.offsetPx - offsetPx
+  const featureLeftBpDistanceFromBlockLeftBp = block.reversed
+    ? block.end - feature.max
+    : feature.min - block.start
+  const featureLeftPxDistanceFromBlockLeftPx =
+    featureLeftBpDistanceFromBlockLeftBp / bpPerPx
+  return blockLeftPx + featureLeftPxDistanceFromBlockLeftPx
+}
+
+function fillAndStrokeRect(
+  ctx: CanvasRenderingContext2D,
+  left: number,
+  top: number,
+  width: number,
+  height: number,
+  theme: Theme,
+  selected = false,
+) {
+  ctx.fillStyle = selected
+    ? theme.palette.action.disabled
+    : theme.palette.action.focus
+  ctx.fillRect(left, top, width, height)
+  ctx.strokeStyle = selected
+    ? theme.palette.text.secondary
+    : theme.palette.text.primary
+  ctx.strokeStyle = theme.palette.text.primary
+  ctx.strokeRect(left, top, width, height)
+}
+
+function drawHighlight(
+  ctx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  bpPerPx: number,
+  offsetPx: number,
+  rowHeight: number,
+  block: ContentBlock,
+  theme: Theme,
+  selected = false,
+) {
+  const row = getSeqRow(feature.strand, bpPerPx, block.reversed)
+  if (!row) {
+    return
+  }
+  const left = getLeftPx(feature, bpPerPx, offsetPx, block)
+  const width = feature.length / bpPerPx
+  const top = row * rowHeight
+  fillAndStrokeRect(ctx, left, top, width, rowHeight, theme, selected)
+}
+
+function drawCDSHighlight(
+  ctx: CanvasRenderingContext2D,
+  feature: AnnotationFeature,
+  bpPerPx: number,
+  offsetPx: number,
+  rowHeight: number,
+  block: ContentBlock,
+  theme: Theme,
+  selected = false,
+) {
+  const parentFeature = feature.parent
+  if (!parentFeature) {
+    return
+  }
+  const cdsLocs = parentFeature.cdsLocations.find((loc) => {
+    const min = loc.at(feature.strand === 1 ? 0 : -1)?.min
+    const max = loc.at(feature.strand === 1 ? -1 : 0)?.max
+    return feature.min === min && feature.max === max
+  })
+  if (!cdsLocs) {
+    return
+  }
+  for (const loc of cdsLocs) {
+    const frame = getFrame(loc.min, loc.max, feature.strand ?? 1, loc.phase)
+    const row = getTranslationRow(frame, bpPerPx, block.reversed)
+    const left = getLeftPx(loc, bpPerPx, offsetPx, block)
+    const top = row * rowHeight
+    const width = (loc.max - loc.min) / bpPerPx
+    fillAndStrokeRect(ctx, left, top, width, rowHeight, theme, selected)
+  }
+}
+
+export function drawSequenceOverlay(
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+  hoveredFeature: HoveredFeature | undefined,
+  selectedFeature: AnnotationFeature | undefined,
+  rowHeight: number,
+  theme: Theme,
+  session: ApolloSessionModel,
+  bpPerPx: number,
+  offsetPx: number,
+  dynamicBlocks: BlockSet,
+) {
+  const { featureTypeOntology } = session.apolloDataStore.ontologyManager
+  if (!featureTypeOntology) {
+    throw new Error('featureTypeOntology is undefined')
+  }
+  for (const block of dynamicBlocks.contentBlocks) {
+    ctx.save()
+    ctx.beginPath()
+    const blockLeftPx = block.offsetPx - offsetPx
+    ctx.rect(blockLeftPx, 0, block.widthPx, canvas.height)
+    ctx.clip()
+    for (const feature of [
+      selectedFeature,
+      hoveredFeature?.feature,
+    ].filter<AnnotationFeature>((f) => f !== undefined)) {
+      if (featureTypeOntology.isTypeOf(feature.type, 'CDS')) {
+        drawCDSHighlight(
+          ctx,
+          feature,
+          bpPerPx,
+          offsetPx,
+          rowHeight,
+          block,
+          theme,
+          feature._id === selectedFeature?._id,
+        )
+      } else {
+        drawHighlight(
+          ctx,
+          feature,
+          bpPerPx,
+          offsetPx,
+          rowHeight,
+          block,
+          theme,
+          feature._id === selectedFeature?._id,
+        )
+      }
+    }
+    ctx.restore()
+  }
+}