jbrowse-plugin-mafviewer 1.4.5 → 1.4.6

package/src/LinearMafRenderer/components/LinearMafRendering.tsx

@@ -4,47 +4,61 @@ import { PrerenderedCanvas } from '@jbrowse/core/ui'
 import Flatbush from 'flatbush'
 import { observer } from 'mobx-react'
 
-import { Sample } from '../../LinearMafDisplay/types'
-import { RenderedBase } from '../rendering'
+import type { Sample } from '../../LinearMafDisplay/types'
+import type { RenderedBase } from '../rendering'
 
-type SerializedRBush = any
+interface DisplayModel {
+  setHoveredInfo?: (info: Record<string, unknown> | undefined) => void
+  setHighlightedRowNames?: (names: string[] | undefined) => void
+  showInsertionSequenceDialog?: (data: {
+    sequence: string
+    sampleLabel: string
+    chr: string
+    pos: number
+  }) => void
+}
 
 const LinearMafRendering = observer(function (props: {
   width: number
   height: number
-  displayModel: any
-  flatbush: SerializedRBush
+  displayModel: DisplayModel
+  flatbush: ArrayBuffer
   items: RenderedBase[]
   samples: Sample[]
 }) {
   const { items, displayModel, height, samples, flatbush } = props
   const ref = useRef<HTMLDivElement>(null)
   const flatbush2 = useMemo(() => Flatbush.from(flatbush), [flatbush])
-  const [isOverLargeInsertion, setIsOverLargeInsertion] = useState(false)
+  const [isOverInsertion, setIsOverInsertion] = useState(false)
 
   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 rect = ref.current.getBoundingClientRect()
+        offsetX = eventClientX - rect.left
+        offsetY = eventClientY - rect.top
       }
 
-      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 {
+      const hits = flatbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1)
+      if (hits.length === 0) {
+        return undefined
+      }
+
+      const insertionHit = hits.find(idx => items[idx]?.isInsertion)
+      const hitIdx = insertionHit ?? hits[0]
+      const item = hitIdx !== undefined ? items[hitIdx] : undefined
+      if (!item) {
         return undefined
       }
+
+      const sample = samples[item.rowIndex]
+      return {
+        ...item,
+        sampleId: sample?.id ?? 'unknown',
+        sampleLabel: sample?.label || sample?.id || 'unknown',
+      }
     },
     [flatbush2, items, samples],
   )
@@ -54,7 +68,7 @@ const LinearMafRendering = observer(function (props: {
       ref={ref}
       onClick={e => {
         const feature = getFeatureUnderMouse(e.clientX, e.clientY)
-        if (feature?.isLargeInsertion) {
+        if (feature?.isInsertion) {
           displayModel.showInsertionSequenceDialog?.({
             sequence: feature.base,
             sampleLabel: feature.sampleLabel,
@@ -69,18 +83,18 @@ const LinearMafRendering = observer(function (props: {
         displayModel.setHighlightedRowNames?.(
           feature?.sampleId ? [feature.sampleId] : undefined,
         )
-        setIsOverLargeInsertion(!!feature?.isLargeInsertion)
+        setIsOverInsertion(!!feature?.isInsertion)
       }}
       onMouseLeave={() => {
         displayModel.setHoveredInfo?.(undefined)
         displayModel.setHighlightedRowNames?.(undefined)
-        setIsOverLargeInsertion(false)
+        setIsOverInsertion(false)
       }}
       style={{
         overflow: 'visible',
         position: 'relative',
         height,
-        cursor: isOverLargeInsertion ? 'pointer' : 'default',
+        cursor: isOverInsertion ? 'pointer' : 'default',
       }}
     >
       <PrerenderedCanvas

package/src/LinearMafRenderer/configSchema.ts

@@ -7,12 +7,7 @@ function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
 const configSchema = ConfigurationSchema(
   'LinearMafRenderer',
-  {
-    baseColor: {
-      type: 'color',
-      defaultValue: 'lightgrey',
-    },
-  },
+  {},
   {
     /**
      * #baseConfiguration

package/src/LinearMafRenderer/rendering/insertions.ts

@@ -23,7 +23,7 @@ export function renderInsertions(
   leftPx: number,
   rowTop: number,
   bpPerPx: number,
-  sampleId: number,
+  rowIndex: number,
   alignmentStart: number,
   chr: string,
 ) {
@@ -146,7 +146,7 @@ export function renderInsertions(
             pos: genomicOffset + alignmentStart,
             chr,
             base: insertionSequence,
-            sampleId,
+            rowIndex,
             isInsertion: true,
             isLargeInsertion,
           },

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/types.ts

@@ -25,7 +25,7 @@ export interface RenderedBase {
   pos: number
   chr: string
   base: string
-  sampleId: number
+  rowIndex: number
   isInsertion?: boolean
   isLargeInsertion?: boolean
 }

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}
+        />,
+      ]
+    },
+  )
+}