jbrowse-plugin-mafviewer 1.4.3 → 1.4.5

package/src/LinearMafDisplay/stateModel.ts

@@ -26,6 +26,10 @@ const SetRowHeightDialog = lazy(
   () => import('./components/SetRowHeightDialog/SetRowHeightDialog'),
 )
 
+const InsertionSequenceDialog = lazy(
+  () => import('./components/InsertionSequenceDialog/InsertionSequenceDialog'),
+)
+
 /**
  * #stateModel LinearMafDisplay
  * extends LinearBasicDisplay
@@ -82,6 +86,10 @@ export default function stateModelFactory(
          * #property
          */
         showAsUpperCase: true,
+        /**
+         * #property
+         */
+        showSidebar: true,
       }),
     )
     .volatile(() => ({
@@ -101,6 +109,14 @@ export default function stateModelFactory(
        * #volatile
        */
       volatileTree: undefined as any,
+      /**
+       * #volatile
+       */
+      highlightedRowNames: undefined as string[] | undefined,
+      /**
+       * #volatile
+       */
+      hoveredTreeNode: undefined as { x: number; y: number } | undefined,
     }))
     .actions(self => ({
       /**
@@ -150,6 +166,46 @@ export default function stateModelFactory(
       setShowAsUpperCase(arg: boolean) {
         self.showAsUpperCase = arg
       },
+      /**
+       * #action
+       */
+      setTreeAreaWidth(width: number) {
+        self.treeAreaWidth = width
+      },
+      /**
+       * #action
+       */
+      setShowSidebar(arg: boolean) {
+        self.showSidebar = arg
+      },
+      /**
+       * #action
+       */
+      setHighlightedRowNames(
+        names?: string[],
+        nodePosition?: { x: number; y: number },
+      ) {
+        self.highlightedRowNames = names
+        self.hoveredTreeNode = nodePosition
+      },
+      /**
+       * #action
+       */
+      showInsertionSequenceDialog(insertionData: {
+        sequence: string
+        sampleLabel: string
+        chr: string
+        pos: number
+      }) {
+        getSession(self).queueDialog(handleClose => [
+          InsertionSequenceDialog,
+          {
+            model: self,
+            onClose: handleClose,
+            insertionData,
+          },
+        ])
+      },
     }))
     .views(self => ({
       /**
@@ -198,10 +254,16 @@ export default function stateModelFactory(
         const r = self.root
         if (r) {
           const width = self.treeAreaWidth
+          // Use totalHeight - rowHeight so leaves are centered in rows
+          // (first leaf at rowHeight/2, last at totalHeight - rowHeight/2)
           const clust = cluster<NodeWithIds>()
-            .size([this.totalHeight, width])
+            .size([this.totalHeight - self.rowHeight, width])
             .separation(() => 1)
           clust(r)
+          // Offset all nodes by rowHeight/2 to center in rows
+          for (const node of r.descendants()) {
+            node.x = node.x! + self.rowHeight / 2
+          }
           setBrLength(r, (r.data.length = 0), width / maxLength(r))
           return r as HierarchyNode<NodeWithIdsAndLength>
         } else {
@@ -238,6 +300,38 @@ export default function stateModelFactory(
       get leaves() {
         return self.root?.leaves()
       },
+      /**
+       * #getter
+       */
+      get leafMap() {
+        return new Map(this.leaves?.map(leaf => [leaf.data.name, leaf]))
+      },
+      /**
+       * #getter
+       * Precomputed map from hierarchy node to its descendant leaf names
+       */
+      get nodeDescendantNames() {
+        const map = new Map<unknown, string[]>()
+        function computeDescendants(
+          node: HierarchyNode<NodeWithIdsAndLength>,
+        ): string[] {
+          if (!node.children || node.children.length === 0) {
+            const names = [node.data.name]
+            map.set(node, names)
+            return names
+          }
+          const names: string[] = []
+          for (const child of node.children) {
+            names.push(...computeDescendants(child))
+          }
+          map.set(node, names)
+          return names
+        }
+        if (this.hierarchy) {
+          computeDescendants(this.hierarchy)
+        }
+        return map
+      },
       /**
        * #getter
        */
@@ -348,6 +442,14 @@ export default function stateModelFactory(
                 self.setMismatchRendering(!self.mismatchRendering)
               },
             },
+            {
+              label: 'Show sidebar',
+              type: 'checkbox',
+              checked: self.showSidebar,
+              onClick: () => {
+                self.setShowSidebar(!self.showSidebar)
+              },
+            },
           ]
         },
       }
@@ -377,6 +479,12 @@ export default function stateModelFactory(
           0,
         )
       },
+      /**
+       * #getter
+       */
+      get sidebarWidth() {
+        return self.showSidebar ? this.labelWidth + 5 + self.treeWidth : 0
+      },
     }))
     .actions(self => ({
       afterCreate() {

package/src/LinearMafDisplay/util.ts

@@ -6,6 +6,7 @@ import type { HierarchyNode } from 'd3-hierarchy'
 
 export interface HoveredInfo {
   sampleId: string
+  sampleLabel: string
   pos: number
   base: string
   chr: string
@@ -44,15 +45,16 @@ export function generateTooltipContent(
     contentLines.push(`Ref: ${p2.refName}:${toLocale(p2.coord)}`)
 
     if (hoveredInfo) {
-      const { base, sampleId, pos, chr } = hoveredInfo
+      const { base, sampleLabel, pos, chr, isInsertion } = hoveredInfo
       const thresh = 20
       const len = base.length
       const lengthSuffix = len > 1 ? ` ${len}bp` : ''
       const baseDisplay =
         base.length > thresh ? base.slice(0, thresh) + '...' : base
+      const insertionLabel = isInsertion ? ' Insertion' : ''
 
       contentLines.push(
-        `Alt ${sampleId}: ${chr}:${pos.toLocaleString('en-US')} (${baseDisplay}${lengthSuffix})`,
+        `Alt ${sampleLabel}: ${chr}:${pos.toLocaleString('en-US')} (${baseDisplay}${lengthSuffix}${insertionLabel})`,
       )
     }
   }

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -8,10 +8,8 @@ import {
 
 import { makeImageData } from './makeImageData'
 
-interface Sample {
-  id: string
-  color?: string
-}
+import type { Sample } from '../LinearMafDisplay/types'
+
 interface RenderArgs extends RenderArgsDeserialized {
   samples: Sample[]
   rowHeight: number

package/src/LinearMafRenderer/components/LinearMafRendering.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 
 import { PrerenderedCanvas } from '@jbrowse/core/ui'
 import Flatbush from 'flatbush'
@@ -19,48 +19,68 @@ const LinearMafRendering = observer(function (props: {
 }) {
   const { items, displayModel, height, samples, flatbush } = props
   const ref = useRef<HTMLDivElement>(null)
-  const rbush2 = useMemo(() => Flatbush.from(flatbush), [flatbush])
+  const flatbush2 = useMemo(() => Flatbush.from(flatbush), [flatbush])
+  const [isOverLargeInsertion, setIsOverLargeInsertion] = useState(false)
 
-  function getFeatureUnderMouse(eventClientX: number, eventClientY: number) {
-    let offsetX = 0
-    let offsetY = 0
-    if (ref.current) {
-      const r = ref.current.getBoundingClientRect()
-      offsetX = eventClientX - r.left
-      offsetY = eventClientY - r.top
-    }
+  const getFeatureUnderMouse = useCallback(
+    (eventClientX: number, eventClientY: number) => {
+      let offsetX = 0
+      let offsetY = 0
+      if (ref.current) {
+        const r = ref.current.getBoundingClientRect()
+        offsetX = eventClientX - r.left
+        offsetY = eventClientY - r.top
+      }
 
-    const x = rbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1)
-    if (x.length) {
-      const elt = x.find(idx => items[idx]?.isInsertion)
-      const r = elt !== undefined ? items[elt]! : items[x[0]!]!
-      const s = samples[r.sampleId]
-      return {
-        ...r,
-        sampleId: s?.label || s?.id || 'unknown',
+      const x = flatbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1)
+      if (x.length) {
+        const elt = x.find(idx => items[idx]?.isInsertion)
+        const r = elt !== undefined ? items[elt]! : items[x[0]!]!
+        const s = samples[r.sampleId]
+        return {
+          ...r,
+          sampleId: s?.id ?? 'unknown',
+          sampleLabel: s?.label || s?.id || 'unknown',
+        }
+      } else {
+        return undefined
       }
-    } else {
-      return undefined
-    }
-  }
+    },
+    [flatbush2, items, samples],
+  )
+
   return (
     <div
       ref={ref}
-      onMouseMove={e =>
-        displayModel.setHoveredInfo?.(
-          getFeatureUnderMouse(e.clientX, e.clientY),
+      onClick={e => {
+        const feature = getFeatureUnderMouse(e.clientX, e.clientY)
+        if (feature?.isLargeInsertion) {
+          displayModel.showInsertionSequenceDialog?.({
+            sequence: feature.base,
+            sampleLabel: feature.sampleLabel,
+            chr: feature.chr,
+            pos: feature.pos,
+          })
+        }
+      }}
+      onMouseMove={e => {
+        const feature = getFeatureUnderMouse(e.clientX, e.clientY)
+        displayModel.setHoveredInfo?.(feature)
+        displayModel.setHighlightedRowNames?.(
+          feature?.sampleId ? [feature.sampleId] : undefined,
         )
-      }
-      onMouseLeave={() => {
-        displayModel.setHoveredInfo?.(undefined)
+        setIsOverLargeInsertion(!!feature?.isLargeInsertion)
       }}
-      onMouseOut={() => {
+      onMouseLeave={() => {
         displayModel.setHoveredInfo?.(undefined)
+        displayModel.setHighlightedRowNames?.(undefined)
+        setIsOverLargeInsertion(false)
       }}
       style={{
         overflow: 'visible',
         position: 'relative',
         height,
+        cursor: isOverLargeInsertion ? 'pointer' : 'default',
       }}
     >
       <PrerenderedCanvas

package/src/LinearMafRenderer/makeImageData.ts

@@ -8,9 +8,8 @@ import {
   RenderingContext,
   Sample,
   processFeatureAlignment,
-  processFeatureInsertions,
 } from './rendering'
-import { getColorBaseMap, getContrastBaseMap } from './util'
+import { getCharWidthHeight, getColorBaseMap, getContrastBaseMap } from './util'
 
 interface RenderArgs extends RenderArgsDeserialized {
   samples: Sample[]
@@ -53,12 +52,14 @@ export function makeImageData({
   const scale = 1 / bpPerPx
   const hp2 = h / 2
   const offset = (rowHeight - h) / 2
+  const { charWidth, charHeight } = getCharWidthHeight()
 
   ctx.font = FONT_CONFIG
 
   const renderingContext: RenderingContext = {
     ctx,
     scale,
+    bpPerPx,
     canvasWidth,
     rowHeight,
     h,
@@ -69,12 +70,13 @@ export function makeImageData({
     showAllLetters,
     mismatchRendering,
     showAsUpperCase,
+    charWidth,
+    charHeight,
     spatialIndex: [],
     spatialIndexCoords: [],
     lastInsertedX: -Infinity, // Start with -Infinity so first item is always inserted
   }
 
-  // First pass: render alignments (gaps, matches, mismatches, text)
   for (const feature of features.values()) {
     processFeatureAlignment(
       feature,
@@ -84,17 +86,6 @@ export function makeImageData({
       renderingContext,
     )
   }
-
-  // Second pass: render insertions on top
-  for (const feature of features.values()) {
-    processFeatureInsertions(
-      feature,
-      region,
-      bpPerPx,
-      sampleToRowMap,
-      renderingContext,
-    )
-  }
   const flatbush = new Flatbush(renderingContext.spatialIndex.length || 1)
   if (renderingContext.spatialIndex.length === 0) {
     flatbush.add(0, 0, 1, 1)

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,
@@ -27,8 +27,7 @@ export function renderInsertions(
   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,
@@ -144,6 +148,7 @@ export function renderInsertions(
             base: insertionSequence,
             sampleId,
             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/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
@@ -30,6 +27,7 @@ export interface RenderedBase {
   base: string
   sampleId: 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[]