jbrowse-plugin-mafviewer 1.4.5 → 1.4.6

package/src/LinearMafDisplay/components/MsaHighlightOverlay.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+
+import { observer } from 'mobx-react'
+
+import type { LinearMafDisplayModel } from '../stateModel'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+const MsaHighlightOverlay = observer(function MsaHighlightOverlay({
+  model,
+  view,
+  height,
+}: {
+  model: LinearMafDisplayModel
+  view: LinearGenomeViewModel
+  height: number
+}) {
+  const { msaHighlights } = model
+  if (msaHighlights.length === 0) {
+    return null
+  }
+
+  const { offsetPx } = view
+  const displayedRegion = view.displayedRegions[0]
+  if (!displayedRegion) {
+    return null
+  }
+
+  return (
+    <>
+      {msaHighlights.map((highlight, idx) => {
+        // Check if highlight is on the displayed refName
+        if (highlight.refName !== displayedRegion.refName) {
+          return null
+        }
+
+        const startPx =
+          (highlight.start - displayedRegion.start) / view.bpPerPx - offsetPx
+        const endPx =
+          (highlight.end - displayedRegion.start) / view.bpPerPx - offsetPx
+        const widthPx = Math.max(endPx - startPx, 2)
+
+        return (
+          <div
+            key={idx}
+            style={{
+              position: 'absolute',
+              left: startPx,
+              top: 0,
+              width: widthPx,
+              height,
+              backgroundColor: 'rgba(255, 165, 0, 0.4)',
+              border: '1px solid rgba(255, 165, 0, 0.8)',
+              pointerEvents: 'none',
+            }}
+          />
+        )
+      })}
+    </>
+  )
+})
+
+export default MsaHighlightOverlay

package/src/LinearMafDisplay/components/Sidebar/SvgWrapper.tsx

@@ -2,9 +2,9 @@ import React, { useEffect, useRef } from 'react'
 
 import { ResizeHandle } from '@jbrowse/core/ui'
 import { getContainingView } from '@jbrowse/core/util'
+import { isAlive } from '@jbrowse/mobx-state-tree'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
-import { isAlive } from 'mobx-state-tree'
 import { makeStyles } from 'tss-react/mui'
 
 import type { LinearMafDisplayModel } from '../../stateModel'

package/src/LinearMafDisplay/components/useDragSelection.ts

@@ -0,0 +1,159 @@
+import { useCallback, useEffect, useState } from 'react'
+
+const MIN_DRAG_DISTANCE = 3
+
+interface DragSelectionState {
+  isDragging: boolean
+  dragStartX: number | undefined
+  dragEndX: number | undefined
+  showSelectionBox: boolean
+  mouseX: number | undefined
+  mouseY: number | undefined
+}
+
+interface DragSelectionHandlers {
+  handleMouseDown: (event: React.MouseEvent) => void
+  handleMouseMove: (event: React.MouseEvent) => void
+  handleMouseUp: (event: React.MouseEvent) => void
+  handleMouseLeave: () => void
+  clearSelectionBox: () => void
+}
+
+interface ContextCoord {
+  coord: [number, number]
+  dragStartX: number
+  dragEndX: number
+}
+
+export function useDragSelection(
+  ref: React.RefObject<HTMLDivElement | null>,
+): DragSelectionState &
+  DragSelectionHandlers & {
+    contextCoord: ContextCoord | undefined
+    setContextCoord: (coord: ContextCoord | undefined) => void
+  } {
+  const [isDragging, setIsDragging] = useState(false)
+  const [dragStartX, setDragStartX] = useState<number>()
+  const [dragEndX, setDragEndX] = useState<number>()
+  const [showSelectionBox, setShowSelectionBox] = useState(false)
+  const [mouseX, setMouseX] = useState<number>()
+  const [mouseY, setMouseY] = useState<number>()
+  const [contextCoord, setContextCoord] = useState<ContextCoord>()
+
+  const clearSelectionBox = useCallback(() => {
+    setShowSelectionBox(false)
+    setDragStartX(undefined)
+    setDragEndX(undefined)
+  }, [])
+
+  const handleMouseDown = useCallback(
+    (event: React.MouseEvent) => {
+      if (event.shiftKey) {
+        return
+      }
+      const rect = ref.current?.getBoundingClientRect()
+      const left = rect?.left || 0
+      const clientX = event.clientX - left
+
+      setShowSelectionBox(false)
+      setIsDragging(true)
+      setDragStartX(clientX)
+      setDragEndX(clientX)
+      event.stopPropagation()
+    },
+    [ref],
+  )
+
+  const handleMouseMove = useCallback(
+    (event: React.MouseEvent) => {
+      const rect = ref.current?.getBoundingClientRect()
+      const top = rect?.top || 0
+      const left = rect?.left || 0
+      const clientX = event.clientX - left
+      const clientY = event.clientY - top
+
+      setMouseY(clientY)
+      setMouseX(clientX)
+
+      if (isDragging) {
+        setDragEndX(clientX)
+      }
+    },
+    [ref, isDragging],
+  )
+
+  const handleMouseUp = useCallback(
+    (event: React.MouseEvent) => {
+      if (isDragging && dragStartX !== undefined && dragEndX !== undefined) {
+        const dragDistanceX = Math.abs(dragEndX - dragStartX)
+
+        if (dragDistanceX > MIN_DRAG_DISTANCE) {
+          setContextCoord({
+            coord: [event.clientX, event.clientY],
+            dragEndX: event.clientX,
+            dragStartX: dragStartX,
+          })
+          setShowSelectionBox(true)
+        } else {
+          clearSelectionBox()
+        }
+      }
+      setIsDragging(false)
+    },
+    [isDragging, dragStartX, dragEndX, clearSelectionBox],
+  )
+
+  const handleMouseLeave = useCallback(() => {
+    setMouseY(undefined)
+    setMouseX(undefined)
+    setIsDragging(false)
+  }, [])
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && showSelectionBox) {
+        clearSelectionBox()
+      }
+    }
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (
+        ref.current &&
+        !ref.current.contains(event.target as Node) &&
+        showSelectionBox
+      ) {
+        clearSelectionBox()
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    document.addEventListener('click', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown)
+      document.removeEventListener('click', handleClickOutside)
+    }
+  }, [ref, showSelectionBox, clearSelectionBox])
+
+  const dragDistance =
+    dragStartX !== undefined && dragEndX !== undefined
+      ? Math.abs(dragEndX - dragStartX)
+      : 0
+  const hasDraggedEnough = dragDistance > MIN_DRAG_DISTANCE
+
+  return {
+    isDragging: isDragging && hasDraggedEnough,
+    dragStartX,
+    dragEndX,
+    showSelectionBox,
+    mouseX,
+    mouseY,
+    contextCoord,
+    setContextCoord,
+    handleMouseDown,
+    handleMouseMove,
+    handleMouseUp,
+    handleMouseLeave,
+    clearSelectionBox,
+  }
+}

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,18 +26,23 @@ 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'),
 )
 
-const InsertionSequenceDialog = lazy(
-  () => import('./components/InsertionSequenceDialog/InsertionSequenceDialog'),
-)
-
 /**
  * #stateModel LinearMafDisplay
  * extends LinearBasicDisplay
@@ -59,37 +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: true,
+        showAsUpperCase: defaultShowAsUpperCase,
         /**
          * #property
          */
-        showSidebar: true,
+        showSidebar: defaultShowSidebar,
       }),
     )
     .volatile(() => ({
@@ -108,7 +121,7 @@ export default function stateModelFactory(
       /**
        * #volatile
        */
-      volatileTree: undefined as any,
+      volatileTree: undefined as NodeWithIds | undefined,
       /**
        * #volatile
        */
@@ -152,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
         }
@@ -197,14 +216,30 @@ export default function stateModelFactory(
         chr: string
         pos: number
       }) {
-        getSession(self).queueDialog(handleClose => [
-          InsertionSequenceDialog,
+        const { sequence, sampleLabel, chr, pos } = insertionData
+        const session = getSession(self) as SessionWithWidgets
+        const featureWidget = session.addWidget(
+          'BaseFeatureWidget',
+          'baseFeature',
           {
-            model: self,
-            onClose: handleClose,
-            insertionData,
+            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 => ({
@@ -239,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
       },
@@ -264,7 +298,8 @@ export default function stateModelFactory(
           for (const node of r.descendants()) {
             node.x = node.x! + self.rowHeight / 2
           }
-          setBrLength(r, (r.data.length = 0), width / maxLength(r))
+          r.data.length = 0
+          setBrLength(r, 0, width / maxLength(r))
           return r as HierarchyNode<NodeWithIdsAndLength>
         } else {
           return undefined
@@ -311,26 +346,10 @@ export default function stateModelFactory(
        * 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 computeNodeDescendantNames(this.hierarchy)
         }
-        return map
+        return new Map<HierarchyNode<NodeWithIdsAndLength>, string[]>()
       },
       /**
        * #getter
@@ -370,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,
@@ -455,6 +474,37 @@ export default function stateModelFactory(
       }
     })
     .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
        */
@@ -500,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)
@@ -526,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

@@ -10,7 +10,9 @@ export interface HoveredInfo {
   pos: number
   base: string
   chr: string
-  [key: string]: unknown // Allow additional properties for compatibility
+  isInsertion?: boolean
+  isLargeInsertion?: boolean
+  [key: string]: unknown
 }
 
 export interface GenomicPosition {
@@ -75,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

@@ -26,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),