react-msaview 3.0.2 → 3.1.0

package/src/model.ts

@@ -4,6 +4,7 @@ import { Instance, cast, types, addDisposer, SnapshotIn } from 'mobx-state-tree'
 import { hierarchy, cluster, HierarchyNode } from 'd3-hierarchy'
 import { ascending } from 'd3-array'
 import Stockholm from 'stockholm-js'
+import { saveAs } from 'file-saver'
 // jbrowse
 import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst'
 import { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
@@ -33,6 +34,8 @@ import colorSchemes from './colorSchemes'
 import { UniprotTrack } from './UniprotTrack'
 import { StructureModel } from './StructureModel'
 import { DialogQueueSessionMixin } from './DialogQueue'
+import { renderToSvg } from './renderToSvg'
+import { Theme } from '@mui/material'
 
 export interface RowDetails {
   [key: string]: unknown
@@ -970,6 +973,7 @@ const model = types
      * #action
      */
     setScrollX(n: number) {
+      console.log({ n })
       self.scrollX = clamp(
         -(self.numColumns * self.colWidth) + (self.msaAreaWidth - 100),
         n,
@@ -1227,6 +1231,14 @@ const model = types
     },
   }))
   .actions(self => ({
+    /**
+     * #action
+     */
+    async exportSVG(opts: { theme: Theme }) {
+      const html = await renderToSvg(self as MsaViewModel, opts)
+      const blob = new Blob([html], { type: 'image/svg+xml' })
+      saveAs(blob, 'image.svg')
+    },
     /**
      * #action
      * internal, used for drawing to canvas

package/src/renderToSvg.tsx

@@ -0,0 +1,71 @@
+import React from 'react'
+import { createRoot } from 'react-dom/client'
+import { when } from 'mobx'
+import { renderToStaticMarkup } from '@jbrowse/core/util'
+import { Theme } from '@mui/material'
+
+// locals
+import { MsaViewModel } from './model'
+import { renderTreeCanvas } from './components/TreePanel/renderTreeCanvas'
+import { renderBlock } from './components/MSAPanel/renderMSABlock'
+import { colorContrast } from './util'
+
+// render LGV to SVG
+export async function renderToSvg(model: MsaViewModel, opts: { theme: Theme }) {
+  await when(() => !!model.initialized)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { width, height, scrollX, scrollY, colorScheme, treeAreaWidth } = model
+  const { theme } = opts
+
+  const { Context } = await import('svgcanvas')
+  const ctx1 = Context(width, height)
+  const ctx2 = Context(width, height)
+  const contrastScheme = colorContrast(colorScheme, theme)
+  renderTreeCanvas({
+    model,
+    offsetY: scrollY,
+    ctx: ctx1,
+    theme,
+    blockSizeYOverride: height,
+    highResScaleFactorOverride: 1,
+  })
+  renderBlock({
+    model,
+    offsetY: scrollY,
+    offsetX: -scrollX,
+    contrastScheme,
+    ctx: ctx2,
+    blockSizeXOverride: width - treeAreaWidth,
+    blockSizeYOverride: height,
+    highResScaleFactorOverride: 1,
+  })
+
+  const clipId = 'tree'
+  // the xlink namespace is used for rendering <image> tag
+  return renderToStaticMarkup(
+    <svg
+      width={width}
+      height={height}
+      xmlns="http://www.w3.org/2000/svg"
+      xmlnsXlink="http://www.w3.org/1999/xlink"
+      viewBox={[0, 0, width, height].toString()}
+    >
+      <defs>
+        <clipPath id={clipId}>
+          <rect x={0} y={0} width={treeAreaWidth} height={height} />
+        </clipPath>
+      </defs>
+      <g
+        clipPath={`url(#${clipId})`}
+        /* eslint-disable-next-line react/no-danger */
+        dangerouslySetInnerHTML={{ __html: ctx1.getSvg().innerHTML }}
+      />
+      <g
+        transform={`translate(${treeAreaWidth} 0)`}
+        /* eslint-disable-next-line react/no-danger */
+        dangerouslySetInnerHTML={{ __html: ctx2.getSvg().innerHTML }}
+      />
+    </svg>,
+    createRoot,
+  )
+}

package/src/util.ts

@@ -115,6 +115,9 @@ export function setBrLength(
   y0: number,
   k: number,
 ) {
+  // @ts-expect-error
+  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
+
   if (d.children) {
     d.children.forEach(d => {
       setBrLength(d, y0, k)

package/src/version.ts

@@ -1 +1 @@
-export const version = '3.0.2'
+export const version = '3.1.0'