jbrowse-plugin-mafviewer 1.4.3 → 1.4.6

package/src/LinearMafRenderer/rendering/features.ts

@@ -20,7 +20,7 @@ export function processFeatureAlignment(
     string,
     AlignmentRecord
   >
-  const referenceSeq = feature.get('seq').toLowerCase()
+  const referenceSeq = (feature.get('seq') as string).toLowerCase()
 
   for (const [sampleId, alignmentData] of Object.entries(alignments)) {
     const row = sampleToRowMap.get(sampleId)
@@ -33,16 +33,7 @@ export function processFeatureAlignment(
     const rowTop = renderingContext.offset + renderingContext.rowHeight * row
 
     renderGaps(renderingContext, alignment, referenceSeq, leftPx, rowTop)
-    renderMatches(
-      renderingContext,
-      alignment,
-      referenceSeq,
-      leftPx,
-      rowTop,
-      row,
-      alignmentData.start,
-      alignmentData.chr,
-    )
+    renderMatches(renderingContext, alignment, referenceSeq, leftPx, rowTop)
     renderMismatches(
       renderingContext,
       alignment,
@@ -61,31 +52,6 @@ export function processFeatureAlignment(
       leftPx,
       rowTop,
     )
-  }
-}
-
-export function processFeatureInsertions(
-  feature: Feature,
-  region: GenomicRegion,
-  bpPerPx: number,
-  sampleToRowMap: Map<string, number>,
-  renderingContext: RenderingContext,
-) {
-  const [leftPx] = featureSpanPx(feature, region, bpPerPx)
-  const alignments = feature.get('alignments') as Record<
-    string,
-    AlignmentRecord
-  >
-  const referenceSeq = feature.get('seq').toLowerCase()
-  for (const [sampleId, alignmentData] of Object.entries(alignments)) {
-    const row = sampleToRowMap.get(sampleId)
-    if (row === undefined) {
-      continue
-    }
-
-    const alignment = alignmentData.seq.toLowerCase()
-    const rowTop = renderingContext.offset + renderingContext.rowHeight * row
-
     renderInsertions(
       renderingContext,
       alignment,

package/src/LinearMafRenderer/rendering/insertions.ts

@@ -1,6 +1,6 @@
 import { measureText } from '@jbrowse/core/util'
 
-import { fillRect, getCharWidthHeight } from '../util'
+import { fillRect } from '../util'
 import { addToSpatialIndex, shouldAddToSpatialIndex } from './spatialIndex'
 import {
   CHAR_SIZE_WIDTH,
@@ -23,12 +23,11 @@ export function renderInsertions(
   leftPx: number,
   rowTop: number,
   bpPerPx: number,
-  sampleId: number,
+  rowIndex: number,
   alignmentStart: number,
   chr: string,
 ) {
-  const { ctx, scale, h, canvasWidth, rowHeight } = context
-  const { charHeight } = getCharWidthHeight()
+  const { ctx, scale, h, canvasWidth, rowHeight, charHeight } = context
 
   for (
     let i = 0, genomicOffset = 0, seqLength = alignment.length;
@@ -102,14 +101,17 @@ export function renderInsertions(
         actualXPos = xPos
         actualWidth = INSERTION_LINE_WIDTH
         fillRect(ctx, actualXPos, rowTop, actualWidth, h, canvasWidth, 'purple')
+
+        // Always use a wider hit box for spatial index, even if visual is 1px
+        const hitBoxPadding = 2
+        actualXPos = xPos - hitBoxPadding
+        actualWidth = INSERTION_LINE_WIDTH + 2 * hitBoxPadding
+
         if (
           bpPerPx < HIGH_ZOOM_THRESHOLD &&
           rowHeight > MIN_ROW_HEIGHT_FOR_BORDERS
         ) {
           // Add horizontal borders for visibility at high zoom
-          // Note: borders extend the effective clickable area
-          actualXPos = xPos - INSERTION_BORDER_WIDTH
-          actualWidth = INSERTION_BORDER_HEIGHT
           fillRect(
             ctx,
             xPos - INSERTION_BORDER_WIDTH,
@@ -131,6 +133,8 @@ export function renderInsertions(
 
       // Add insertion to spatial index with actual rendered dimensions
       // Insertions always bypass distance filter
+      const isLargeInsertion =
+        insertionSequence.length > LARGE_INSERTION_THRESHOLD
       if (shouldAddToSpatialIndex(actualXPos, context, true)) {
         addToSpatialIndex(
           context,
@@ -142,8 +146,9 @@ export function renderInsertions(
             pos: genomicOffset + alignmentStart,
             chr,
             base: insertionSequence,
-            sampleId,
+            rowIndex,
             isInsertion: true,
+            isLargeInsertion,
           },
         )
       }

package/src/LinearMafRenderer/rendering/matches.ts

@@ -1,5 +1,4 @@
 import { fillRect } from '../util'
-import { addToSpatialIndex, shouldAddToSpatialIndex } from './spatialIndex'
 import { GAP_STROKE_OFFSET } from './types'
 
 import type { RenderingContext } from './types'
@@ -10,9 +9,6 @@ export function renderMatches(
   seq: string,
   leftPx: number,
   rowTop: number,
-  sampleId: number,
-  alignmentStart: number,
-  chr: string,
 ) {
   if (context.showAllLetters) {
     return
@@ -30,30 +26,9 @@ export function renderMatches(
     if (seq[i] !== '-') {
       // Only process non-gap positions in reference
       const currentChar = alignment[i]
-      const xPos = leftPx + scale * genomicOffset
-      if (
-        seq[i] === currentChar &&
-        currentChar !== '-' &&
-        currentChar !== ' '
-      ) {
+      if (seq[i] === currentChar && currentChar !== ' ') {
+        const xPos = leftPx + scale * genomicOffset
         fillRect(ctx, xPos, rowTop, scale + GAP_STROKE_OFFSET, h, canvasWidth)
-
-        // Add to spatial index if distance filter allows
-        if (shouldAddToSpatialIndex(xPos, context)) {
-          addToSpatialIndex(
-            context,
-            xPos,
-            rowTop,
-            xPos + context.scale + GAP_STROKE_OFFSET,
-            rowTop + context.h,
-            {
-              pos: genomicOffset + alignmentStart,
-              chr,
-              base: currentChar || '',
-              sampleId,
-            },
-          )
-        }
       }
       genomicOffset++
     }

package/src/LinearMafRenderer/rendering/mismatches.ts

@@ -21,7 +21,7 @@ export function renderMismatches(
   seq: string,
   leftPx: number,
   rowTop: number,
-  sampleId: number,
+  rowIndex: number,
   alignmentStart: number,
   chr: string,
 ) {
@@ -70,7 +70,7 @@ export function renderMismatches(
                 pos: genomicOffset + alignmentStart,
                 chr,
                 base: currentChar!,
-                sampleId,
+                rowIndex,
               },
             )
           }
@@ -100,7 +100,7 @@ export function renderMismatches(
                 pos: genomicOffset + alignmentStart,
                 chr,
                 base: currentChar!,
-                sampleId,
+                rowIndex,
               },
             )
           }

package/src/LinearMafRenderer/rendering/spatialIndex.ts

@@ -20,9 +20,16 @@ export function shouldAddToSpatialIndex(
   context: RenderingContext,
   bypassDistanceFilter = false,
 ): boolean {
+  if (bypassDistanceFilter) {
+    return true
+  }
+
+  // Zoom-aware distance threshold: scale threshold based on zoom level
+  // At high zoom (small bpPerPx), use smaller threshold for more precision
+  // At low zoom (large bpPerPx), use larger threshold to reduce index size
   return (
-    bypassDistanceFilter ||
-    Math.abs(xPos - context.lastInsertedX) > MIN_X_DISTANCE
+    Math.abs(xPos - context.lastInsertedX) >
+    MIN_X_DISTANCE * Math.max(1, context.bpPerPx)
   )
 }
 

package/src/LinearMafRenderer/rendering/text.ts

@@ -1,4 +1,3 @@
-import { getCharWidthHeight } from '../util'
 import { CHAR_SIZE_WIDTH, VERTICAL_TEXT_OFFSET } from './types'
 
 import type { RenderingContext } from './types'
@@ -34,8 +33,8 @@ export function renderText(
     mismatchRendering,
     contrastForBase,
     showAsUpperCase,
+    charHeight,
   } = context
-  const { charHeight } = getCharWidthHeight()
 
   // Render text labels when zoomed in enough and row is tall enough
   if (scale >= CHAR_SIZE_WIDTH) {

package/src/LinearMafRenderer/rendering/types.ts

@@ -13,10 +13,7 @@ export const HIGH_BP_PER_PX_THRESHOLD = 10
 export const INSERTION_BORDER_HEIGHT = 5
 export const MIN_X_DISTANCE = 0.5
 
-export interface Sample {
-  id: string
-  color?: string
-}
+export type { Sample } from '../../LinearMafDisplay/types'
 
 export interface GenomicRegion {
   start: number
@@ -28,8 +25,9 @@ export interface RenderedBase {
   pos: number
   chr: string
   base: string
-  sampleId: number
+  rowIndex: number
   isInsertion?: boolean
+  isLargeInsertion?: boolean
 }
 
 /**
@@ -38,6 +36,7 @@ export interface RenderedBase {
 export interface RenderingContext {
   ctx: CanvasRenderingContext2D
   scale: number
+  bpPerPx: number
   canvasWidth: number
   rowHeight: number
   h: number
@@ -49,6 +48,10 @@ export interface RenderingContext {
   mismatchRendering: boolean
   showAsUpperCase: boolean
 
+  // Cached char dimensions
+  charWidth: number
+  charHeight: number
+
   // RBush spatial index for efficient spatial queries
   spatialIndex: RenderedBase[]
   spatialIndexCoords: number[]

package/src/MafAddTrackWorkflow/AddTrackWorkflow.tsx

@@ -7,6 +7,7 @@ import {
   isSessionModelWithWidgets,
   isSessionWithAddTracks,
 } from '@jbrowse/core/util'
+import { getRoot } from '@jbrowse/mobx-state-tree'
 import {
   Button,
   FormControl,
@@ -17,7 +18,6 @@ import {
   RadioGroup,
   TextField,
 } from '@mui/material'
-import { getRoot } from 'mobx-state-tree'
 import { makeStyles } from 'tss-react/mui'
 
 import type { AddTrackModel } from '@jbrowse/plugin-data-management'

package/src/MafAddTrackWorkflow/index.ts

@@ -1,6 +1,6 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 import { AddTrackWorkflowType } from '@jbrowse/core/pluggableElementTypes'
-import { types } from 'mobx-state-tree'
+import { types } from '@jbrowse/mobx-state-tree'
 
 import MultiMAFWidget from './AddTrackWorkflow'
 

package/src/MafGetSequences/MafGetSequences.ts

@@ -21,6 +21,7 @@ export default class MafGetSequences extends RpcMethodTypeWithFiltersAndRenameRe
       headers?: Record<string, string>
       regions: Region[]
       showAllLetters: boolean
+      includeInsertions?: boolean
     },
     rpcDriverClassName: string,
   ) {
@@ -28,8 +29,14 @@ export default class MafGetSequences extends RpcMethodTypeWithFiltersAndRenameRe
       args,
       rpcDriverClassName,
     )
-    const { samples, regions, adapterConfig, sessionId, showAllLetters } =
-      deserializedArgs
+    const {
+      samples,
+      regions,
+      adapterConfig,
+      sessionId,
+      showAllLetters,
+      includeInsertions,
+    } = deserializedArgs
     const dataAdapter = (
       await getAdapter(this.pluginManager, sessionId, adapterConfig)
     ).dataAdapter as BaseFeatureDataAdapter
@@ -42,6 +49,7 @@ export default class MafGetSequences extends RpcMethodTypeWithFiltersAndRenameRe
       samples,
       regions,
       showAllLetters,
+      includeInsertions,
     })
   }
 }

package/src/MafSequenceWidget/LabelsCanvas.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect, useRef } from 'react'
+
+import { useTheme } from '@mui/material'
+
+import { CHAR_WIDTH, FONT, LABEL_PADDING, ROW_HEIGHT } from './constants'
+
+import type { Sample } from '../LinearMafDisplay/types'
+
+interface LabelsCanvasProps {
+  samples: Sample[]
+  maxLabelLength: number
+}
+
+export default function LabelsCanvas({
+  samples,
+  maxLabelLength,
+}: LabelsCanvasProps) {
+  const theme = useTheme()
+  const canvasRef = useRef<HTMLCanvasElement>(null)
+
+  const labelWidth = maxLabelLength * CHAR_WIDTH + LABEL_PADDING
+  const canvasHeight = samples.length * ROW_HEIGHT
+
+  useEffect(() => {
+    const canvas = canvasRef.current
+    if (!canvas) {
+      return
+    }
+
+    const ctx = canvas.getContext('2d')
+    if (!ctx) {
+      return
+    }
+
+    const dpr = window.devicePixelRatio || 1
+    canvas.width = labelWidth * dpr
+    canvas.height = canvasHeight * dpr
+    canvas.style.width = `${labelWidth}px`
+    canvas.style.height = `${canvasHeight}px`
+    ctx.scale(dpr, dpr)
+
+    ctx.fillStyle = theme.palette.background.paper
+    ctx.fillRect(0, 0, labelWidth, canvasHeight)
+
+    ctx.font = FONT
+    ctx.textBaseline = 'top'
+
+    for (let rowIdx = 0; rowIdx < samples.length; rowIdx++) {
+      const sample = samples[rowIdx]!
+      const y = rowIdx * ROW_HEIGHT
+
+      ctx.fillStyle = theme.palette.text.secondary
+      ctx.fillText(sample.label ?? sample.id, 2, y + 2)
+    }
+  }, [samples, labelWidth, canvasHeight, theme])
+
+  return <canvas ref={canvasRef} style={{ display: 'block' }} />
+}

package/src/MafSequenceWidget/MafSequenceHoverHighlight.tsx

@@ -0,0 +1,83 @@
+import React from 'react'
+
+import { getSession } from '@jbrowse/core/util'
+import { colord } from '@jbrowse/core/util/colord'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import type { MafSequenceWidgetModel } from './stateModelFactory'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+const useStyles = makeStyles()(theme => ({
+  highlight: {
+    height: '100%',
+    position: 'absolute',
+    background: colord(theme.palette.primary.main).alpha(0.4).toRgbString(),
+    borderLeft: `2px solid ${theme.palette.primary.main}`,
+    borderRight: `2px solid ${theme.palette.primary.main}`,
+    pointerEvents: 'none',
+    zIndex: 10,
+  },
+}))
+
+const MafSequenceHoverHighlight = observer(function MafSequenceHoverHighlight({
+  model,
+}: {
+  model: LinearGenomeViewModel
+}) {
+  const { classes } = useStyles()
+  const session = getSession(model)
+  const { assemblyManager } = session
+
+  // Find MafSequenceWidget instances that are connected to this view
+  const widgets =
+    'widgets' in session ? (session.widgets as Map<string, unknown>) : undefined
+  if (!widgets) {
+    return null
+  }
+
+  const highlights: React.ReactNode[] = []
+
+  for (const [, widget] of widgets) {
+    const w = widget as {
+      type?: string
+      connectedViewId?: string
+      hoverHighlight?: unknown
+    }
+    if (w.type === 'MafSequenceWidget' && w.connectedViewId === model.id) {
+      const mafWidget = widget as MafSequenceWidgetModel
+      const { hoverHighlight } = mafWidget
+
+      if (hoverHighlight) {
+        const { refName, start, end, assemblyName } = hoverHighlight
+        const assembly = assemblyManager.get(assemblyName)
+        const canonicalRefName =
+          assembly?.getCanonicalRefName(refName) ?? refName
+
+        const startPx = model.bpToPx({
+          refName: canonicalRefName,
+          coord: start,
+        })
+        const endPx = model.bpToPx({ refName: canonicalRefName, coord: end })
+
+        if (startPx && endPx) {
+          const left =
+            Math.min(startPx.offsetPx, endPx.offsetPx) - model.offsetPx
+          const width = Math.max(Math.abs(endPx.offsetPx - startPx.offsetPx), 3)
+
+          highlights.push(
+            <div
+              key={`maf-hover-${mafWidget.id}`}
+              className={classes.highlight}
+              style={{ left, width }}
+            />,
+          )
+        }
+      }
+    }
+  }
+
+  return <>{highlights}</>
+})
+
+export default MafSequenceHoverHighlight

package/src/MafSequenceWidget/MafSequenceHoverHighlightExtension.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+
+import MafSequenceHoverHighlight from './MafSequenceHoverHighlight'
+
+import type PluginManager from '@jbrowse/core/PluginManager'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+export default function MafSequenceHoverHighlightExtensionF(
+  pluginManager: PluginManager,
+) {
+  pluginManager.addToExtensionPoint(
+    'LinearGenomeView-TracksContainerComponent',
+    (rest: React.ReactNode[], props: Record<string, unknown>) => {
+      const model = props.model as LinearGenomeViewModel
+      return [
+        ...rest,
+        <MafSequenceHoverHighlight
+          key="maf-sequence-hover-highlight"
+          model={model}
+        />,
+      ]
+    },
+  )
+}