jbrowse-plugin-mafviewer 1.4.3 → 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/ColorLegend.tsx

@@ -17,6 +17,7 @@ const ColorLegend = observer(function ({
     canDisplayLabel,
     totalHeight,
     treeWidth,
+    sidebarWidth,
     samples = [],
     rowHeight,
     svgFontSize,
@@ -25,12 +26,7 @@ const ColorLegend = observer(function ({
 
   return (
     <>
-      <RectBg
-        y={0}
-        x={0}
-        width={labelWidth + 5 + treeWidth}
-        height={totalHeight}
-      />
+      <RectBg y={0} x={0} width={sidebarWidth} height={totalHeight} />
       <Tree model={model} />
       <g transform={`translate(${treeWidth + 5},0)`}>
         {samples.map((sample, idx) => (

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

@@ -1,14 +1,19 @@
 import React from 'react'
 
-const RectBg = (props: {
+const RectBg = ({
+  x,
+  y,
+  width,
+  height,
+  color = 'rgb(255,255,255,0.5)',
+}: {
   x: number
   y: number
   width: number
   height: number
   color?: string
 }) => {
-  const { color = 'rgb(255,255,255,0.5)' } = props
-  return <rect {...props} fill={color} />
+  return <rect x={x} y={y} width={width} height={height} fill={color} />
 }
 
 export default RectBg

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

@@ -1,11 +1,30 @@
-import React from 'react'
+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 { makeStyles } from 'tss-react/mui'
 
 import type { LinearMafDisplayModel } from '../../stateModel'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
+const useStyles = makeStyles()({
+  resizeHandle: {
+    position: 'absolute',
+    top: 0,
+    height: '100%',
+    width: 4,
+    zIndex: 1001,
+    background: 'transparent',
+    cursor: 'col-resize',
+    '&:hover': {
+      background: 'rgba(0,0,0,0.2)',
+    },
+  },
+})
+
 const SvgWrapper = observer(function ({
   children,
   model,
@@ -15,25 +34,108 @@ const SvgWrapper = observer(function ({
   children: React.ReactNode
   exportSVG?: boolean
 }) {
+  const { classes } = useStyles()
+  const mouseoverRef = useRef<HTMLCanvasElement>(null)
+
+  useEffect(() => {
+    const ctx = mouseoverRef.current?.getContext('2d')
+    return ctx
+      ? autorun(() => {
+          if (isAlive(model)) {
+            const {
+              totalHeight,
+              leafMap,
+              rowHeight,
+              highlightedRowNames,
+              hoveredTreeNode,
+            } = model
+            const { width: viewWidth } = getContainingView(
+              model,
+            ) as LinearGenomeViewModel
+
+            ctx.resetTransform()
+            ctx.clearRect(0, 0, viewWidth, totalHeight)
+
+            if (highlightedRowNames) {
+              ctx.fillStyle = 'rgba(255,165,0,0.2)'
+              const halfRowHeight = rowHeight / 2
+              for (const name of highlightedRowNames) {
+                const leaf = leafMap.get(name)
+                if (leaf) {
+                  ctx.fillRect(0, leaf.x! - halfRowHeight, viewWidth, rowHeight)
+                }
+              }
+
+              // Draw orange dot at hovered tree node
+              if (hoveredTreeNode) {
+                ctx.fillStyle = 'rgba(255,165,0,0.8)'
+                ctx.beginPath()
+                ctx.arc(hoveredTreeNode.y, hoveredTreeNode.x, 4, 0, 2 * Math.PI)
+                ctx.fill()
+                ctx.strokeStyle = 'rgba(255,140,0,1)'
+                ctx.lineWidth = 1
+                ctx.stroke()
+              }
+            }
+          }
+        })
+      : undefined
+  }, [model])
+
   if (exportSVG) {
     return <>{children}</>
   } else {
-    const { totalHeight } = model
+    const { totalHeight, treeWidth, hierarchy } = model
     const { width } = getContainingView(model) as LinearGenomeViewModel
     return (
-      <svg
-        style={{
-          position: 'absolute',
-          userSelect: 'none',
-          top: 0,
-          left: 0,
-          pointerEvents: 'none',
-          height: totalHeight,
-          width,
-        }}
-      >
-        {children}
-      </svg>
+      <>
+        <svg
+          style={{
+            position: 'absolute',
+            userSelect: 'none',
+            top: 0,
+            left: 0,
+            pointerEvents: 'none',
+            height: totalHeight,
+            width,
+          }}
+        >
+          {children}
+        </svg>
+        <canvas
+          ref={mouseoverRef}
+          width={width}
+          height={totalHeight}
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            width,
+            height: totalHeight,
+            zIndex: 1000,
+            pointerEvents: 'none',
+          }}
+        />
+        {hierarchy ? (
+          <div
+            onMouseDown={e => {
+              e.stopPropagation()
+            }}
+          >
+            <ResizeHandle
+              onDrag={distance => {
+                model.setTreeAreaWidth(
+                  Math.max(20, model.treeAreaWidth + distance),
+                )
+                return undefined
+              }}
+              className={classes.resizeHandle}
+              style={{ left: treeWidth }}
+              vertical
+            />
+          </div>
+        ) : null}
+      </>
     )
   }
 })

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

@@ -1,20 +1,48 @@
-import React from 'react'
+import React, { useCallback, useMemo } from 'react'
 
 import { observer } from 'mobx-react'
 
 import type { LinearMafDisplayModel } from '../../stateModel'
+import type { NodeWithIdsAndLength } from '../../types'
+import type { HierarchyNode } from 'd3-hierarchy'
+
+const hitboxStyle = {
+  pointerEvents: 'all',
+  cursor: 'pointer',
+  strokeWidth: 8,
+  stroke: 'transparent',
+} as const
 
 const Tree = observer(function ({ model }: { model: LinearMafDisplayModel }) {
   const {
-    // this is needed for redrawing after zoom change, similar to react-msaview
-    // renderTreeCanvas
+    // rowHeight is needed for redrawing after zoom change
     // eslint-disable-next-line  @typescript-eslint/no-unused-vars
     rowHeight: _rowHeight,
-
+    treeAreaWidth,
     hierarchy,
     showBranchLen,
+    nodeDescendantNames,
   } = model
 
+  const clearHighlight = useCallback(() => {
+    model.setHighlightedRowNames(undefined)
+  }, [model])
+
+  const nodeHandlers = useMemo(() => {
+    const handlers = new Map<HierarchyNode<NodeWithIdsAndLength>, () => void>()
+    if (hierarchy) {
+      for (const node of hierarchy.descendants()) {
+        handlers.set(node, () => {
+          model.setHighlightedRowNames(nodeDescendantNames.get(node), {
+            x: node.x!,
+            y: node.y!,
+          })
+        })
+      }
+    }
+    return handlers
+  }, [model, hierarchy, nodeDescendantNames, treeAreaWidth])
+
   return (
     <>
       {hierarchy
@@ -27,13 +55,30 @@ const Tree = observer(function ({ model }: { model: LinearMafDisplayModel }) {
             // @ts-expect-error
             const sx = showBranchLen ? source.len : source.y
 
-            // 1d line intersection to check if line crosses block at all, this is
-            // an optimization that allows us to skip drawing most tree links
-            // outside the block
             return (
-              <React.Fragment key={[sy, ty, tx, sx].join('-')}>
+              <React.Fragment key={`${treeAreaWidth}-${sy}-${ty}-${tx}-${sx}`}>
+                {/* Visible lines */}
                 <line stroke="black" x1={sx} y1={sy} x2={sx} y2={ty} />
                 <line stroke="black" x1={sx} y1={ty} x2={tx} y2={ty} />
+                {/* Invisible hitbox lines */}
+                <line
+                  x1={sx}
+                  y1={sy}
+                  x2={sx}
+                  y2={ty}
+                  style={hitboxStyle}
+                  onMouseEnter={nodeHandlers.get(source)}
+                  onMouseLeave={clearHighlight}
+                />
+                <line
+                  x1={sx}
+                  y1={ty}
+                  x2={tx}
+                  y2={ty}
+                  style={hitboxStyle}
+                  onMouseEnter={nodeHandlers.get(target)}
+                  onMouseLeave={clearHighlight}
+                />
               </React.Fragment>
             )
           })

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

@@ -9,7 +9,6 @@ import type { LinearMafDisplayModel } from '../../stateModel'
 
 export const YScaleBars = observer(function (props: {
   model: LinearMafDisplayModel
-  orientation?: string
   exportSVG?: boolean
 }) {
   const { model } = props

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/renderSvg.tsx

@@ -28,7 +28,7 @@ export async function renderSvg(
       <g clipPath={`url(#${clipid})`}>
         <g id="snpcov">{await superRenderSvg(opts)}</g>
         <g transform={`translate(${Math.max(-offsetPx, 0)})`}>
-          <YScaleBars model={self} orientation="left" exportSVG />
+          <YScaleBars model={self} exportSVG />
         </g>
       </g>
     </>