react-msaview 3.0.3 → 3.1.1

package/dist/renderToSvg.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"renderToSvg.js","sourceRoot":"","sources":["../src/renderToSvg.tsx"],"names":[],"mappings":"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"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.0.3";
+export declare const version = "3.1.1";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '3.0.3';
+export const version = '3.1.1';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "3.0.3",
+  "version": "3.1.1",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [
@@ -57,14 +57,17 @@
   "dependencies": {
     "@typescript-eslint/eslint-plugin": "^6.21.0",
     "@typescript-eslint/parser": "^6.21.0",
+    "canvas2svg": "^1.0.16",
     "clustal-js": "^2.0.0",
     "colord": "^2.9.3",
     "copy-to-clipboard": "^3.3.1",
     "d3-array": "^3.2.3",
     "d3-hierarchy": "^3.1.2",
+    "file-saver": "^2.0.5",
     "normalize-wheel": "^1.0.1",
     "rbush": "^3.0.1",
     "stockholm-js": "^1.0.10",
+    "svgcanvas": "^2.5.0",
     "tss-react": "^4.8.3"
   }
 }

package/src/calculateBlocks.ts

@@ -0,0 +1,58 @@
+export function blocksY({
+  mapHeight,
+  blockSize,
+  viewportY,
+  viewportHeight,
+}: {
+  mapHeight: number
+  blockSize: number
+  viewportY: number
+  viewportHeight: number
+}) {
+  const clampedViewportY = Math.max(
+    0,
+    Math.min(viewportY, mapHeight * blockSize - viewportHeight),
+  )
+
+  // Calculate visible tile ranges
+  const minTileY = Math.floor(clampedViewportY / blockSize)
+  const maxTileY = Math.floor(
+    (clampedViewportY + viewportHeight - 1) / blockSize,
+  )
+
+  // Generate list of visible tiles
+  const blocksY = []
+  for (let tileY = minTileY; tileY <= maxTileY; tileY++) {
+    blocksY.push(tileY * blockSize)
+  }
+
+  return blocksY
+}
+
+export function blocksX({
+  mapWidth,
+  blockSize,
+  viewportX,
+  viewportWidth,
+}: {
+  mapWidth: number
+  blockSize: number
+  viewportX: number
+  viewportWidth: number
+}) {
+  const clampedViewportX = Math.max(
+    0,
+    Math.min(viewportX, mapWidth - viewportWidth),
+  )
+
+  const minTileX = Math.floor(clampedViewportX / blockSize)
+  const maxTileX = Math.floor(
+    (clampedViewportX + viewportWidth - 1) / blockSize,
+  )
+  const blocksX = []
+  for (let tileX = minTileX; tileX <= maxTileX; tileX++) {
+    blocksX.push(tileX * blockSize)
+  }
+
+  return blocksX
+}

package/src/components/ExportSVGDialog.tsx

@@ -0,0 +1,61 @@
+import React, { useState } from 'react'
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
+import {
+  DialogContent,
+  DialogActions,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  useTheme,
+  Typography,
+} from '@mui/material'
+import { MsaViewModel } from '../model'
+
+export default function ExportSVGDialog({
+  model,
+  onClose,
+}: {
+  model: MsaViewModel
+  onClose: () => void
+}) {
+  const [includeMinimap, setIncludeMinimap] = useState(true)
+  const [error, setError] = useState<unknown>()
+  const theme = useTheme()
+  return (
+    <Dialog onClose={() => onClose()} open title="Export SVG">
+      <DialogContent>
+        <Typography>Export SVG of current view</Typography>
+        {error ? <ErrorMessage error={error} /> : null}
+        <FormControlLabel
+          control={
+            <Checkbox
+              checked={includeMinimap}
+              onChange={event => setIncludeMinimap(event.target.checked)}
+            />
+          }
+          label="Include minimap?"
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={async () => {
+            try {
+              await model.exportSVG({ theme, includeMinimap })
+            } catch (e) {
+              console.error(e)
+              setError(e)
+            }
+            onClose()
+          }}
+        >
+          Submit
+        </Button>
+        <Button variant="contained" color="secondary" onClick={() => onClose()}>
+          Cancel
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/components/MSAPanel/MSABlock.tsx

@@ -4,7 +4,7 @@ import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 // locals
-import { renderBlock } from './renderMSABlock'
+import { renderMSABlock } from './renderMSABlock'
 import { MsaViewModel } from '../../model'
 import { colorContrast } from '../../util'
 
@@ -40,7 +40,7 @@ const MSABlock = observer(function ({
       return
     }
     return autorun(() => {
-      renderBlock({
+      renderMSABlock({
         ctx,
         offsetX,
         offsetY,

package/src/components/MSAPanel/renderMSABlock.ts

@@ -4,18 +4,24 @@ import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
 import { NodeWithIdsAndLength } from '../../util'
 import { HierarchyNode } from 'd3-hierarchy'
 
-export function renderBlock({
+export function renderMSABlock({
   model,
   offsetX,
   offsetY,
   contrastScheme,
   ctx,
+  highResScaleFactorOverride,
+  blockSizeXOverride,
+  blockSizeYOverride,
 }: {
   offsetX: number
   offsetY: number
   model: MsaViewModel
   contrastScheme: Record<string, string>
   ctx: CanvasRenderingContext2D
+  highResScaleFactorOverride?: number
+  blockSizeXOverride?: number
+  blockSizeYOverride?: number
 }) {
   const {
     hierarchy,
@@ -25,20 +31,22 @@ export function renderBlock({
     fontSize,
     highResScaleFactor,
   } = model
+  const k = highResScaleFactorOverride || highResScaleFactor
+  const bx = blockSizeXOverride || blockSize
+  const by = blockSizeYOverride || blockSize
   ctx.resetTransform()
-  ctx.scale(highResScaleFactor, highResScaleFactor)
-  ctx.clearRect(0, 0, blockSize, blockSize)
+  ctx.scale(k, k)
+  ctx.clearRect(0, 0, bx, by)
   ctx.translate(-offsetX, rowHeight / 2 - offsetY)
   ctx.textAlign = 'center'
   ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
 
   const leaves = hierarchy.leaves()
-  const b = blockSize
 
   const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
-  const yEnd = Math.max(0, Math.ceil((offsetY + b + rowHeight) / rowHeight))
+  const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
   const xStart = Math.max(0, Math.floor(offsetX / colWidth))
-  const xEnd = Math.max(0, Math.ceil((offsetX + b) / colWidth))
+  const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth))
   const visibleLeaves = leaves.slice(yStart, yEnd)
 
   drawTiles({

package/src/components/MSAPanel/renderMSAMouseover.ts

@@ -25,7 +25,6 @@ export function renderMouseover({
   } = model
   ctx.resetTransform()
   ctx.clearRect(0, 0, width, height)
-  console.log({ mouseCol })
 
   if (mouseCol !== undefined) {
     ctx.fillStyle = 'rgba(0,0,0,0.15)'

package/src/components/MinimapSVG.tsx

@@ -0,0 +1,57 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { MsaViewModel } from '../model'
+
+const MinimapSVG = observer(function ({ model }: { model: MsaViewModel }) {
+  const {
+    scrollX,
+    msaAreaWidth: W,
+    minimapHeight: H,
+    colWidth,
+    numColumns,
+  } = model
+
+  const BAR_HEIGHT = 12
+  const H2 = H - 12
+
+  const unit = W / numColumns / colWidth
+  const left = -scrollX
+  const right = left + W
+  const s = left * unit
+  const e = right * unit
+  const fill = 'rgba(66, 119, 127, 0.3)'
+
+  return (
+    <>
+      <rect
+        x={0}
+        y={0}
+        width={W}
+        height={BAR_HEIGHT}
+        stroke="#555"
+        fill="none"
+      />
+      <rect
+        x={Math.max(0, s)}
+        y={0}
+        width={e - s}
+        height={BAR_HEIGHT}
+        fill={fill}
+        stroke="#555"
+      />
+      <g transform={`translate(0 ${BAR_HEIGHT})`}>
+        <polygon
+          fill={fill}
+          points={[
+            [e, 0],
+            [s, 0],
+            [0, H2],
+            [W, H2],
+          ].toString()}
+        />
+      </g>
+    </>
+  )
+})
+
+export default MinimapSVG

package/src/components/TreePanel/TreeCanvasBlock.tsx

@@ -158,7 +158,6 @@ const TreeCanvasBlock = observer(function ({
           }
 
           const ret = hoverNameClickMap(event) || hoverBranchClickMap(event)
-          console.log({ ret })
           ref.current.style.cursor = ret ? 'pointer' : 'default'
           setHoverElt(hoverNameClickMap(event))
         }}

package/src/components/TreePanel/renderTreeCanvas.ts

@@ -1,8 +1,8 @@
 import RBush from 'rbush'
+import { Theme } from '@mui/material'
 
 // locals
 import { MsaViewModel } from '../../model'
-import { Theme } from '@mui/material'
 
 export const padding = 600
 const extendBounds = 5
@@ -24,13 +24,16 @@ export function renderTree({
   ctx,
   model,
   theme,
+  blockSizeYOverride,
 }: {
   offsetY: number
   ctx: CanvasRenderingContext2D
   model: MsaViewModel
   theme: Theme
+  blockSizeYOverride?: number
 }) {
   const { hierarchy, showBranchLen, blockSize } = model
+  const by = blockSizeYOverride || blockSize
   ctx.strokeStyle = theme.palette.text.primary
   for (const { source, target } of hierarchy.links()) {
     const y = showBranchLen ? 'len' : 'y'
@@ -44,7 +47,7 @@ export function renderTree({
     // 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
-    if (offsetY + blockSize >= y1 && y2 >= offsetY) {
+    if (offsetY + by >= y1 && y2 >= offsetY) {
       ctx.beginPath()
       ctx.moveTo(sx, sy)
       ctx.lineTo(sx, ty)
@@ -59,14 +62,17 @@ export function renderNodeBubbles({
   clickMap,
   offsetY,
   model,
+  blockSizeYOverride,
 }: {
   ctx: CanvasRenderingContext2D
-  clickMap: RBush<ClickEntry>
+  clickMap?: RBush<ClickEntry>
   offsetY: number
   model: MsaViewModel
   theme: Theme
+  blockSizeYOverride?: number
 }) {
   const { hierarchy, showBranchLen, collapsed, blockSize } = model
+  const by = blockSizeYOverride || blockSize
   for (const node of hierarchy.descendants()) {
     const val = showBranchLen ? 'len' : 'y'
     const {
@@ -80,7 +86,7 @@ export function renderNodeBubbles({
     if (
       branchset.length &&
       y > offsetY - extendBounds &&
-      y < offsetY + blockSize + extendBounds
+      y < offsetY + by + extendBounds
     ) {
       ctx.strokeStyle = 'black'
       ctx.fillStyle = collapsed.includes(id) ? 'black' : 'white'
@@ -89,7 +95,7 @@ export function renderNodeBubbles({
       ctx.fill()
       ctx.stroke()
 
-      clickMap.insert({
+      clickMap?.insert({
         minX: x - radius,
         maxX: x - radius + d,
         minY: y - radius,
@@ -108,12 +114,14 @@ export function renderTreeLabels({
   offsetY,
   ctx,
   clickMap,
+  blockSizeYOverride,
 }: {
   model: MsaViewModel
   offsetY: number
   ctx: CanvasRenderingContext2D
-  clickMap: RBush<ClickEntry>
+  clickMap?: RBush<ClickEntry>
   theme: Theme
+  blockSizeYOverride?: number
 }) {
   const {
     rowHeight,
@@ -128,6 +136,7 @@ export function renderTreeLabels({
     margin,
     noTree,
   } = model
+  const by = blockSizeYOverride || blockSize
   if (labelsAlignRight) {
     ctx.textAlign = 'right'
     ctx.setLineDash([1, 3])
@@ -147,7 +156,7 @@ export function renderTreeLabels({
 
     const displayName = treeMetadata[name]?.genome || name
 
-    if (y > offsetY - extendBounds && y < offsetY + blockSize + extendBounds) {
+    if (y > offsetY - extendBounds && y < offsetY + by + extendBounds) {
       // note: +rowHeight/4 matches with -rowHeight/4 in msa
       const yp = y + rowHeight / 4
       const xp = showBranchLen ? len : x
@@ -160,7 +169,7 @@ export function renderTreeLabels({
 
       if (!drawTree && !labelsAlignRight) {
         ctx.fillText(displayName, 0, yp)
-        clickMap.insert({
+        clickMap?.insert({
           minX: 0,
           maxX: width,
           minY: yp - height,
@@ -178,7 +187,7 @@ export function renderTreeLabels({
           ctx.stroke()
         }
         ctx.fillText(displayName, offset, yp)
-        clickMap.insert({
+        clickMap?.insert({
           minX: treeAreaWidth - margin.left - width,
           maxX: treeAreaWidth - margin.left,
           minY: yp - height,
@@ -188,7 +197,7 @@ export function renderTreeLabels({
         })
       } else {
         ctx.fillText(displayName, xp + d, yp)
-        clickMap.insert({
+        clickMap?.insert({
           minX: xp + d,
           maxX: xp + d + width,
           minY: yp - height,
@@ -208,14 +217,18 @@ export function renderTreeCanvas({
   ctx,
   offsetY,
   theme,
+  highResScaleFactorOverride,
+  blockSizeYOverride,
 }: {
   model: MsaViewModel
   offsetY: number
   ctx: CanvasRenderingContext2D
-  clickMap: RBush<ClickEntry>
+  clickMap?: RBush<ClickEntry>
   theme: Theme
+  highResScaleFactorOverride?: number
+  blockSizeYOverride?: number
 }) {
-  clickMap.clear()
+  clickMap?.clear()
   const {
     noTree,
     drawTree,
@@ -231,24 +244,47 @@ export function renderTreeCanvas({
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     nref,
   } = model
+  const by = blockSizeYOverride || blockSize
 
   ctx.resetTransform()
-  ctx.scale(highResScaleFactor, highResScaleFactor)
-  ctx.clearRect(0, 0, treeWidth + padding, blockSize)
+  const k = highResScaleFactorOverride || highResScaleFactor
+  ctx.scale(k, k)
+  ctx.clearRect(0, 0, treeWidth + padding, by)
   ctx.translate(margin.left, -offsetY)
 
+  // console.log(ctx.font)
   const font = ctx.font
   ctx.font = font.replace(/\d+px/, `${fontSize}px`)
 
   if (!noTree && drawTree) {
-    renderTree({ ctx, offsetY, model, theme })
+    renderTree({
+      ctx,
+      offsetY,
+      model,
+      theme,
+      blockSizeYOverride,
+    })
 
     if (drawNodeBubbles) {
-      renderNodeBubbles({ ctx, offsetY, clickMap, model, theme })
+      renderNodeBubbles({
+        ctx,
+        offsetY,
+        clickMap,
+        model,
+        theme,
+        blockSizeYOverride,
+      })
     }
   }
 
   if (rowHeight >= 5) {
-    renderTreeLabels({ ctx, offsetY, model, clickMap, theme })
+    renderTreeLabels({
+      ctx,
+      offsetY,
+      model,
+      clickMap,
+      theme,
+      blockSizeYOverride,
+    })
   }
 }

package/src/components/ZoomControls.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { Suspense, lazy, useState } from 'react'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
@@ -11,12 +11,16 @@ import MoreVert from '@mui/icons-material/MoreVert'
 import ZoomIn from '@mui/icons-material/ZoomIn'
 import ZoomOut from '@mui/icons-material/ZoomOut'
 
+// lazies
+const ExportSVGDialog = lazy(() => import('./ExportSVGDialog'))
+
 const ZoomControls = observer(function ZoomControls({
   model,
 }: {
   model: MsaViewModel
 }) {
   const { colWidth, rowHeight } = model
+  const [exportSvgDialogOpen, setExportSvgDialogOpen] = useState(false)
   return (
     <>
       <IconButton
@@ -39,27 +43,19 @@ const ZoomControls = observer(function ZoomControls({
         menuItems={[
           {
             label: 'Decrease row height',
-            onClick: () => {
-              model.setRowHeight(Math.max(1.5, rowHeight * 0.75))
-            },
+            onClick: () => model.setRowHeight(Math.max(1.5, rowHeight * 0.75)),
           },
           {
             label: 'Increase row height',
-            onClick: () => {
-              model.setRowHeight(rowHeight * 1.5)
-            },
+            onClick: () => model.setRowHeight(rowHeight * 1.5),
           },
           {
             label: 'Decrease col width',
-            onClick: () => {
-              model.setColWidth(Math.max(1, colWidth * 0.75))
-            },
+            onClick: () => model.setColWidth(Math.max(1, colWidth * 0.75)),
           },
           {
             label: 'Increase col width',
-            onClick: () => {
-              model.setColWidth(colWidth * 1.5)
-            },
+            onClick: () => model.setColWidth(colWidth * 1.5),
           },
           {
             label: 'Reset zoom to default',
@@ -68,10 +64,22 @@ const ZoomControls = observer(function ZoomControls({
               model.setRowHeight(20)
             },
           },
+          {
+            label: 'Export SVG',
+            onClick: () => setExportSvgDialogOpen(true),
+          },
         ]}
       >
         <MoreVert />
       </CascadingMenuButton>
+      {exportSvgDialogOpen ? (
+        <Suspense fallback={null}>
+          <ExportSVGDialog
+            model={model}
+            onClose={() => setExportSvgDialogOpen(false)}
+          />
+        </Suspense>
+      ) : null}
     </>
   )
 })

package/src/declare.d.ts

@@ -1 +1,2 @@
 declare module 'stockholm-js'
+declare module 'svgcanvas'