jbrowse-plugin-mafviewer 1.4.2 → 1.4.5

package/dist/util/fastaUtils.js

@@ -8,69 +8,41 @@ export function processFeaturesToFasta({ regions, showAllLetters, samples, featu
     const region = regions[0];
     const sampleToRowMap = new Map(samples.map((s, i) => [s.id, i]));
     const rlen = region.end - region.start;
-    const outputRows = samples.map(() => '-'.repeat(rlen));
+    // Use character arrays instead of strings for O(1) mutations
+    const outputRowsArrays = samples.map(() => new Array(rlen).fill('-'));
     for (const feature of features.values()) {
         const leftCoord = feature.get('start');
         const vals = feature.get('alignments');
         const seq = feature.get('seq');
         for (const [sample, val] of Object.entries(vals)) {
-            const origAlignment = val.seq;
-            const alignment = origAlignment;
+            const alignment = val.seq;
             const row = sampleToRowMap.get(sample);
             if (row === undefined) {
                 continue;
             }
-            // gaps
+            const rowArray = outputRowsArrays[row];
+            // Single-pass processing: handle gaps, matches, and mismatches together
             for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
                 if (seq[i] !== '-') {
-                    if (alignment[i] === '-') {
-                        const l = leftCoord + o - region.start;
-                        if (l >= 0 && l < rlen) {
-                            outputRows[row] =
-                                outputRows[row].slice(0, l) +
-                                    '-' +
-                                    outputRows[row].slice(l + 1);
+                    const c = alignment[i];
+                    const pos = leftCoord + o - region.start;
+                    if (pos >= 0 && pos < rlen) {
+                        if (c === '-') {
+                            // Gap
+                            rowArray[pos] = '-';
                         }
-                    }
-                    o++;
-                }
-            }
-            if (!showAllLetters) {
-                // matches
-                for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
-                    if (seq[i] !== '-') {
-                        const c = alignment[i];
-                        const l = leftCoord + o - region.start;
-                        if (l >= 0 && l < rlen) {
-                            if (seq[i] === c && c !== '-' && c !== ' ') {
-                                outputRows[row] =
-                                    outputRows[row].slice(0, l) +
-                                        '.' +
-                                        outputRows[row].slice(l + 1);
+                        else if (c !== ' ') {
+                            if (showAllLetters) {
+                                // Show all letters mode: write character directly
+                                rowArray[pos] = c;
                             }
-                        }
-                        o++;
-                    }
-                }
-            }
-            // mismatches
-            for (let i = 0, o = 0, l = alignment.length; i < l; i++) {
-                const c = alignment[i];
-                if (seq[i] !== '-') {
-                    if (c !== '-') {
-                        const l = leftCoord + o - region.start;
-                        if (l >= 0 && l < rlen) {
-                            if (seq[i] !== c && c !== ' ') {
-                                outputRows[row] =
-                                    outputRows[row].slice(0, l) +
-                                        c +
-                                        outputRows[row].slice(l + 1);
+                            else if (seq[i] === c) {
+                                // Match: use dot notation
+                                rowArray[pos] = '.';
                             }
-                            else if (showAllLetters) {
-                                outputRows[row] =
-                                    outputRows[row].slice(0, l) +
-                                        c +
-                                        outputRows[row].slice(l + 1);
+                            else {
+                                // Mismatch: write character
+                                rowArray[pos] = c;
                             }
                         }
                     }
@@ -79,6 +51,7 @@ export function processFeaturesToFasta({ regions, showAllLetters, samples, featu
             }
         }
     }
-    return outputRows;
+    // Convert character arrays back to strings
+    return outputRowsArrays.map(arr => arr.join(''));
 }
 //# sourceMappingURL=fastaUtils.js.map

package/dist/util/fastaUtils.js.map

@@ -1 +1 @@
-{"version":3,"file":"fastaUtils.js","sourceRoot":"","sources":["../../src/util/fastaUtils.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"fastaUtils.js","sourceRoot":"","sources":["../../src/util/fastaUtils.ts"],"names":[],"mappings":"AAKA;;;;;GAKG;AACH,MAAM,UAAU,sBAAsB,CAAC,EACrC,OAAO,EACP,cAAc,EACd,OAAO,EACP,QAAQ,GAQT;IACC,MAAM,MAAM,GAAG,OAAO,CAAC,CAAC,CAAE,CAAA;IAC1B,MAAM,cAAc,GAAG,IAAI,GAAG,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;IAChE,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,GAAG,MAAM,CAAC,KAAK,CAAA;IAEtC,6DAA6D;IAC7D,MAAM,gBAAgB,GAAG,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAA;IAErE,KAAK,MAAM,OAAO,IAAI,QAAQ,CAAC,MAAM,EAAE,EAAE,CAAC;QACxC,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAA;QACtC,MAAM,IAAI,GAAG,OAAO,CAAC,GAAG,CAAC,YAAY,CAAoC,CAAA;QACzE,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;QAE9B,KAAK,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CAAC;YACjD,MAAM,SAAS,GAAG,GAAG,CAAC,GAAG,CAAA;YACzB,MAAM,GAAG,GAAG,cAAc,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;YACtC,IAAI,GAAG,KAAK,SAAS,EAAE,CAAC;gBACtB,SAAQ;YACV,CAAC;YAED,MAAM,QAAQ,GAAG,gBAAgB,CAAC,GAAG,CAAE,CAAA;YAEvC,wEAAwE;YACxE,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC,MAAM,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;gBACxD,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,GAAG,EAAE,CAAC;oBACnB,MAAM,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,CAAA;oBACtB,MAAM,GAAG,GAAG,SAAS,GAAG,CAAC,GAAG,MAAM,CAAC,KAAK,CAAA;oBAExC,IAAI,GAAG,IAAI,CAAC,IAAI,GAAG,GAAG,IAAI,EAAE,CAAC;wBAC3B,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;4BACd,MAAM;4BACN,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAA;wBACrB,CAAC;6BAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;4BACrB,IAAI,cAAc,EAAE,CAAC;gCACnB,kDAAkD;gCAClD,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;4BACnB,CAAC;iCAAM,IAAI,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,CAAC;gCACxB,0BAA0B;gCAC1B,QAAQ,CAAC,GAAG,CAAC,GAAG,GAAG,CAAA;4BACrB,CAAC;iCAAM,CAAC;gCACN,4BAA4B;gCAC5B,QAAQ,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;4BACnB,CAAC;wBACH,CAAC;oBACH,CAAC;oBACD,CAAC,EAAE,CAAA;gBACL,CAAC;YACH,CAAC;QACH,CAAC;IACH,CAAC;IAED,2CAA2C;IAC3C,OAAO,gBAAgB,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC,CAAA;AAClD,CAAC"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.4.2",
+  "version": "1.4.5",
   "license": "MIT",
   "name": "jbrowse-plugin-mafviewer",
   "keywords": [
@@ -18,10 +18,10 @@
     "start": "node esbuild.mjs",
     "test": "vitest",
     "format": "prettier --write .",
-    "prebuild": "npm run clean",
+    "prebuild": "yarn clean",
     "build": "tsc && NODE_ENV=production node esbuild.mjs",
     "lint": "eslint --report-unused-disable-directives --max-warnings 0",
-    "prepack": "npm run build",
+    "preversion": "yarn lint && yarn build",
     "postversion": "git push --follow-tags"
   },
   "devDependencies": {
@@ -37,15 +37,15 @@
     "@mui/x-data-grid": "^8.2.0",
     "@types/d3-array": "^3.2.1",
     "@types/d3-hierarchy": "^3.1.7",
-    "@types/node": "^22.15.16",
+    "@types/node": "^24.7.0",
     "@types/react": "^19.0.1",
     "chalk": "^5.3.0",
-    "esbuild": "^0.25.0",
+    "esbuild": "^0.27.0",
     "eslint": "^9.17.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-unicorn": "^60.0.0",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-unicorn": "^62.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.1",
     "mobx-state-tree": "^5.4.1",
@@ -59,10 +59,10 @@
     "tss-react": "^4.9.18",
     "typescript": "^5.1.6",
     "typescript-eslint": "^8.18.0",
-    "vitest": "^3.2.1"
+    "vitest": "^4.0.5"
   },
   "dependencies": {
-    "@gmod/bgzf-filehandle": "^4.0.0",
+    "@gmod/bgzf-filehandle": "^5.0.2",
     "abortable-promise-cache": "^1.5.0",
     "buffer": "^6.0.3",
     "d3-array": "^3.2.4",

package/src/LinearMafDisplay/components/InsertionSequenceDialog/InsertionSequenceDialog.tsx

@@ -0,0 +1,105 @@
+import React, { useState } from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import { Button, DialogActions, DialogContent, TextField } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()({
+  dialogContent: {
+    width: '60em',
+  },
+  textAreaInput: {
+    fontFamily: 'monospace',
+    whiteSpace: 'pre',
+    overflowX: 'auto',
+  },
+})
+
+const InsertionSequenceDialog = observer(function ({
+  onClose,
+  model,
+  insertionData,
+}: {
+  onClose: () => void
+  model: {
+    showAsUpperCase: boolean
+  }
+  insertionData: {
+    sequence: string
+    sampleLabel: string
+    chr: string
+    pos: number
+  }
+}) {
+  const { classes } = useStyles()
+  const [copied, setCopied] = useState(false)
+  const { sequence, sampleLabel, chr, pos } = insertionData
+  const { showAsUpperCase } = model
+  const displaySequence = showAsUpperCase
+    ? sequence.toUpperCase()
+    : sequence.toLowerCase()
+
+  return (
+    <Dialog
+      open
+      onClose={onClose}
+      title={`Insertion Sequence (${sequence.length}bp)`}
+      maxWidth="lg"
+    >
+      <DialogContent>
+        <div style={{ marginBottom: 16 }}>
+          <strong>Sample:</strong> {sampleLabel}
+          <br />
+          <strong>Position:</strong> {chr}:{pos.toLocaleString('en-US')}
+          <br />
+          <strong>Length:</strong> {sequence.length}bp
+        </div>
+        <TextField
+          variant="outlined"
+          multiline
+          minRows={3}
+          maxRows={10}
+          className={classes.dialogContent}
+          fullWidth
+          value={displaySequence}
+          slotProps={{
+            input: {
+              readOnly: true,
+              classes: {
+                input: classes.textAreaInput,
+              },
+            },
+          }}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;(async () => {
+              try {
+                await navigator.clipboard.writeText(displaySequence)
+                setCopied(true)
+                setTimeout(() => {
+                  setCopied(false)
+                }, 1000)
+              } catch (e) {
+                console.error(e)
+              }
+            })()
+          }}
+        >
+          {copied ? 'Copied!' : 'Copy to Clipboard'}
+        </Button>
+        <Button color="secondary" variant="contained" onClick={onClose}>
+          Close
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default InsertionSequenceDialog

package/src/LinearMafDisplay/components/LinearMafDisplayComponent.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
 
 import { Menu } from '@jbrowse/core/ui'
 import { getContainingView, getEnv } from '@jbrowse/core/util'
@@ -102,11 +102,11 @@ const LinearMafDisplay = observer(function (props: {
   }
 
   // Function to clear the selection box
-  const clearSelectionBox = () => {
+  const clearSelectionBox = useCallback(() => {
     setShowSelectionBox(false)
     setDragStartX(undefined)
     setDragEndX(undefined)
-  }
+  }, [])
 
   // Add keydown event handler to clear selection box when Escape key is pressed
   useEffect(() => {
@@ -155,7 +155,7 @@ const LinearMafDisplay = observer(function (props: {
       }}
     >
       <BaseLinearDisplayComponent {...props} />
-      <YScaleBars model={model} />
+      {model.showSidebar ? <YScaleBars model={model} /> : null}
       {mouseY && mouseX && sources && !contextCoord && !showSequenceDialog ? (
         <div style={{ position: 'relative' }}>
           <Crosshairs

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 { 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'
 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/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>
     </>