jbrowse-plugin-mafviewer 1.4.3 → 1.4.6

package/src/LinearMafDisplay/stateModel.ts

@@ -1,15 +1,23 @@
 import { lazy } from 'react'
 
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
-import { getEnv, getSession, max, measureText } from '@jbrowse/core/util'
+import {
+  SessionWithWidgets,
+  getContainingTrack,
+  getContainingView,
+  getEnv,
+  getSession,
+  max,
+  measureText,
+} from '@jbrowse/core/util'
 import { getRpcSessionId } from '@jbrowse/core/util/tracks'
+import { addDisposer, isAlive, types } from '@jbrowse/mobx-state-tree'
 import { ascending } from 'd3-array'
 import { cluster, hierarchy } from 'd3-hierarchy'
 import deepEqual from 'fast-deep-equal'
 import { autorun } from 'mobx'
-import { addDisposer, isAlive, types } from 'mobx-state-tree'
 
-import { maxLength, setBrLength } from './util'
+import { computeNodeDescendantNames, maxLength, setBrLength } from './util'
 import { normalize } from '../util'
 
 import type { NodeWithIds, NodeWithIdsAndLength, Sample } from './types'
@@ -18,9 +26,18 @@ import type {
   AnyConfigurationModel,
   AnyConfigurationSchemaType,
 } from '@jbrowse/core/configuration'
+import type { Instance } from '@jbrowse/mobx-state-tree'
 import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view'
 import type { HierarchyNode } from 'd3-hierarchy'
-import type { Instance } from 'mobx-state-tree'
+
+const defaultRowHeight = 15
+const defaultRowProportion = 0.8
+const defaultShowAllLetters = false
+const defaultMismatchRendering = true
+const defaultShowBranchLen = false
+const defaultTreeAreaWidth = 80
+const defaultShowAsUpperCase = true
+const defaultShowSidebar = true
 
 const SetRowHeightDialog = lazy(
   () => import('./components/SetRowHeightDialog/SetRowHeightDialog'),
@@ -55,33 +72,37 @@ export default function stateModelFactory(
         /**
          * #property
          */
-        rowHeight: 15,
+        rowHeight: defaultRowHeight,
         /**
          * #property
          */
-        rowProportion: 0.8,
+        rowProportion: defaultRowProportion,
         /**
          * #property
          */
-        showAllLetters: false,
+        showAllLetters: defaultShowAllLetters,
         /**
          * #property
          */
-        mismatchRendering: true,
+        mismatchRendering: defaultMismatchRendering,
 
         /**
          * #property
          */
-        showBranchLen: false,
+        showBranchLen: defaultShowBranchLen,
 
         /**
          * #property
          */
-        treeAreaWidth: 80,
+        treeAreaWidth: defaultTreeAreaWidth,
+        /**
+         * #property
+         */
+        showAsUpperCase: defaultShowAsUpperCase,
         /**
          * #property
          */
-        showAsUpperCase: true,
+        showSidebar: defaultShowSidebar,
       }),
     )
     .volatile(() => ({
@@ -100,7 +121,15 @@ export default function stateModelFactory(
       /**
        * #volatile
        */
-      volatileTree: undefined as any,
+      volatileTree: undefined as NodeWithIds | undefined,
+      /**
+       * #volatile
+       */
+      highlightedRowNames: undefined as string[] | undefined,
+      /**
+       * #volatile
+       */
+      hoveredTreeNode: undefined as { x: number; y: number } | undefined,
     }))
     .actions(self => ({
       /**
@@ -136,7 +165,13 @@ export default function stateModelFactory(
       /**
        * #action
        */
-      setSamples({ samples, tree }: { samples: Sample[]; tree: unknown }) {
+      setSamples({
+        samples,
+        tree,
+      }: {
+        samples: Sample[]
+        tree: NodeWithIds | undefined
+      }) {
         if (!deepEqual(samples, self.volatileSamples)) {
           self.volatileSamples = samples
         }
@@ -150,6 +185,62 @@ 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
+      }) {
+        const { sequence, sampleLabel, chr, pos } = insertionData
+        const session = getSession(self) as SessionWithWidgets
+        const featureWidget = session.addWidget(
+          'BaseFeatureWidget',
+          'baseFeature',
+          {
+            featureData: {
+              uniqueId: `insertion-${chr}-${pos}-${sampleLabel}`,
+              type: 'insertion',
+              refName: chr,
+              start: pos,
+              end: pos + 1,
+              sample: sampleLabel,
+              insertionLength: sequence.length,
+              sequence: self.showAsUpperCase
+                ? sequence.toUpperCase()
+                : sequence.toLowerCase(),
+            },
+            view: getContainingView(self),
+            track: getContainingTrack(self),
+          },
+        )
+
+        session.showWidget(featureWidget)
+      },
     }))
     .views(self => ({
       /**
@@ -183,8 +274,7 @@ export default function stateModelFactory(
       get root() {
         return self.volatileTree
           ? hierarchy(self.volatileTree, d => d.children)
-              // todo: investigate whether needed, typescript says children always true
-              .sum(d => (d.children ? 0 : 1))
+              .sum(d => (d.children?.length ? 0 : 1))
               .sort((a, b) => ascending(a.data.length || 1, b.data.length || 1))
           : undefined
       },
@@ -198,11 +288,18 @@ 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)
-          setBrLength(r, (r.data.length = 0), width / maxLength(r))
+          // Offset all nodes by rowHeight/2 to center in rows
+          for (const node of r.descendants()) {
+            node.x = node.x! + self.rowHeight / 2
+          }
+          r.data.length = 0
+          setBrLength(r, 0, width / maxLength(r))
           return r as HierarchyNode<NodeWithIdsAndLength>
         } else {
           return undefined
@@ -238,6 +335,22 @@ 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() {
+        if (this.hierarchy) {
+          return computeNodeDescendantNames(this.hierarchy)
+        }
+        return new Map<HierarchyNode<NodeWithIdsAndLength>, string[]>()
+      },
       /**
        * #getter
        */
@@ -276,7 +389,7 @@ export default function stateModelFactory(
           return {
             ...s,
             notReady:
-              (!self.volatileSamples && !self.volatileTree) || super.notReady,
+              (!self.volatileSamples && !self.volatileTree) || s.notReady,
             config: rendererConfig,
             samples,
             rowHeight,
@@ -348,11 +461,50 @@ export default function stateModelFactory(
                 self.setMismatchRendering(!self.mismatchRendering)
               },
             },
+            {
+              label: 'Show sidebar',
+              type: 'checkbox',
+              checked: self.showSidebar,
+              onClick: () => {
+                self.setShowSidebar(!self.showSidebar)
+              },
+            },
           ]
         },
       }
     })
     .views(self => ({
+      /**
+       * #getter
+       * Get highlight regions from connected MSA views
+       */
+      get msaHighlights() {
+        const session = getSession(self)
+        const view = getContainingView(self)
+        const highlights: { refName: string; start: number; end: number }[] = []
+
+        // Find MSA views that are connected to our parent view
+        for (const v of session.views) {
+          if (
+            (v as { type?: string }).type === 'MsaView' &&
+            (v as { connectedViewId?: string }).connectedViewId === view.id
+          ) {
+            const msaView = v as {
+              connectedHighlights?: {
+                refName: string
+                start: number
+                end: number
+              }[]
+            }
+            if (msaView.connectedHighlights) {
+              for (const h of msaView.connectedHighlights) {
+                highlights.push(h)
+              }
+            }
+          }
+        }
+        return highlights
+      },
       /**
        * #getter
        */
@@ -377,6 +529,12 @@ export default function stateModelFactory(
           0,
         )
       },
+      /**
+       * #getter
+       */
+      get sidebarWidth() {
+        return self.showSidebar ? this.labelWidth + 5 + self.treeWidth : 0
+      },
     }))
     .actions(self => ({
       afterCreate() {
@@ -392,10 +550,10 @@ export default function stateModelFactory(
                   adapterConfig: self.adapterConfig,
                   statusCallback: (message: string) => {
                     if (isAlive(self)) {
-                      self.setMessage(message)
+                      self.setStatusMessage(message)
                     }
                   },
-                })) as { samples: Sample[]; tree: unknown },
+                })) as { samples: Sample[]; tree: NodeWithIds | undefined },
               )
             } catch (e) {
               console.error(e)
@@ -418,6 +576,43 @@ export default function stateModelFactory(
         },
       }
     })
+    .postProcessSnapshot(snap => {
+      const {
+        rowHeight,
+        rowProportion,
+        showAllLetters,
+        mismatchRendering,
+        showBranchLen,
+        treeAreaWidth,
+        showAsUpperCase,
+        showSidebar,
+        ...rest
+      } = snap as typeof snap & {
+        rowHeight?: number
+        rowProportion?: number
+        showAllLetters?: boolean
+        mismatchRendering?: boolean
+        showBranchLen?: boolean
+        treeAreaWidth?: number
+        showAsUpperCase?: boolean
+        showSidebar?: boolean
+      }
+      return {
+        ...(rest as Omit<typeof rest, symbol>),
+        ...(rowHeight !== defaultRowHeight ? { rowHeight } : {}),
+        ...(rowProportion !== defaultRowProportion ? { rowProportion } : {}),
+        ...(showAllLetters !== defaultShowAllLetters ? { showAllLetters } : {}),
+        ...(mismatchRendering !== defaultMismatchRendering
+          ? { mismatchRendering }
+          : {}),
+        ...(showBranchLen !== defaultShowBranchLen ? { showBranchLen } : {}),
+        ...(treeAreaWidth !== defaultTreeAreaWidth ? { treeAreaWidth } : {}),
+        ...(showAsUpperCase !== defaultShowAsUpperCase
+          ? { showAsUpperCase }
+          : {}),
+        ...(showSidebar !== defaultShowSidebar ? { showSidebar } : {}),
+      }
+    })
 }
 
 export type LinearMafDisplayStateModel = ReturnType<typeof stateModelFactory>

package/src/LinearMafDisplay/types.ts

@@ -1,7 +1,7 @@
 export interface NodeWithIds {
   id: string
   name: string
-  children: NodeWithIds[]
+  children?: NodeWithIds[]
   length?: number
   noTree?: boolean
 }
@@ -9,7 +9,7 @@ export interface NodeWithIds {
 export interface NodeWithIdsAndLength {
   id: string
   name: string
-  children: NodeWithIdsAndLength[]
+  children?: NodeWithIdsAndLength[]
   noTree?: boolean
   length: number
 }

package/src/LinearMafDisplay/util.ts

@@ -6,10 +6,13 @@ import type { HierarchyNode } from 'd3-hierarchy'
 
 export interface HoveredInfo {
   sampleId: string
+  sampleLabel: string
   pos: number
   base: string
   chr: string
-  [key: string]: unknown // Allow additional properties for compatibility
+  isInsertion?: boolean
+  isLargeInsertion?: boolean
+  [key: string]: unknown
 }
 
 export interface GenomicPosition {
@@ -44,15 +47,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})`,
       )
     }
   }
@@ -73,12 +77,36 @@ export function setBrLength(
   y0: number,
   k: number,
 ) {
+  const newY0 = y0 + Math.max(d.data.length || 0, 0)
   // @ts-expect-error
-  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
+  d.len = newY0 * k
 
   if (d.children) {
-    d.children.forEach(d => {
-      setBrLength(d, y0, k)
-    })
+    for (const child of d.children) {
+      setBrLength(child, newY0, k)
+    }
+  }
+}
+
+export function computeNodeDescendantNames<T extends { name: string }>(
+  root: HierarchyNode<T>,
+): Map<HierarchyNode<T>, string[]> {
+  const map = new Map<HierarchyNode<T>, string[]>()
+  function visit(node: HierarchyNode<T>): 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) {
+      for (const name of visit(child)) {
+        names.push(name)
+      }
+    }
+    map.set(node, names)
+    return names
   }
+  visit(root)
+  return map
 }

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
@@ -28,7 +26,7 @@ export default class LinearMafRenderer extends FeatureRendererType {
     const bpExpansion = 1
 
     return {
-      // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+      // xref https://github.com/mobxjs/@jbrowse/mobx-state-tree/issues/1524 for Omit
       ...(region as Omit<typeof region, symbol>),
       start: Math.floor(Math.max(start - bpExpansion, 0)),
       end: Math.ceil(end + bpExpansion),

package/src/LinearMafRenderer/components/LinearMafRendering.tsx

@@ -1,66 +1,100 @@
-import React, { useMemo, useRef } from 'react'
+import React, { useCallback, useMemo, useRef, useState } from 'react'
 
 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 rbush2 = useMemo(() => Flatbush.from(flatbush), [flatbush])
+  const flatbush2 = useMemo(() => Flatbush.from(flatbush), [flatbush])
+  const [isOverInsertion, setIsOverInsertion] = 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 rect = ref.current.getBoundingClientRect()
+        offsetX = eventClientX - rect.left
+        offsetY = eventClientY - rect.top
+      }
+
+      const hits = flatbush2.search(offsetX, offsetY, offsetX + 1, offsetY + 1)
+      if (hits.length === 0) {
+        return undefined
+      }
 
-    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]
+      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 {
-        ...r,
-        sampleId: s?.label || s?.id || 'unknown',
+        ...item,
+        sampleId: sample?.id ?? 'unknown',
+        sampleLabel: sample?.label || sample?.id || 'unknown',
       }
-    } 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?.isInsertion) {
+          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)
+        setIsOverInsertion(!!feature?.isInsertion)
       }}
-      onMouseOut={() => {
+      onMouseLeave={() => {
         displayModel.setHoveredInfo?.(undefined)
+        displayModel.setHighlightedRowNames?.(undefined)
+        setIsOverInsertion(false)
       }}
       style={{
         overflow: 'visible',
         position: 'relative',
         height,
+        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/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)