react-msaview 3.0.3 → 3.1.1

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,9 @@ 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'
+import { blocksX, blocksY } from './calculateBlocks'
 
 export interface RowDetails {
   [key: string]: unknown
@@ -591,85 +595,7 @@ const model = types
     },
   }))
 
-  .views(self => {
-    let oldBlocksX: number[] = []
-    let oldBlocksY: number[] = []
-    let oldValX = 0
-    let oldValY = 0
-    return {
-      /**
-       * #getter
-       */
-      get initialized() {
-        return (
-          (self.data.msa ||
-            self.data.tree ||
-            self.msaFilehandle ||
-            self.treeFilehandle) &&
-          !self.error
-        )
-      },
-      /**
-       * #getter
-       */
-      get blocksX() {
-        const { scrollX, blockSize: size, colWidth } = self
-        const ret = -(size * Math.floor(scrollX / size)) - size
-
-        const b = []
-        for (let i = ret; i < ret + size * 3; i += size) {
-          if (i + size > 0) {
-            b.push(i)
-          }
-        }
-        if (
-          JSON.stringify(b) !== JSON.stringify(oldBlocksX) ||
-          colWidth !== oldValX
-        ) {
-          oldBlocksX = b
-          oldValX = colWidth
-        }
-        return oldBlocksX
-      },
-      /**
-       * #getter
-       */
-      get blocksY() {
-        const { scrollY, blockSize: size, rowHeight } = self
-        const ret = -(size * Math.floor(scrollY / size)) - 2 * size
-
-        const b = []
-        for (let i = ret; i < ret + size * 3; i += size) {
-          if (i + size > 0) {
-            b.push(i)
-          }
-        }
-        if (
-          JSON.stringify(b) !== JSON.stringify(oldBlocksY) ||
-          rowHeight !== oldValY
-        ) {
-          oldBlocksY = b
-          oldValY = rowHeight
-        }
-        return oldBlocksY
-      },
-    }
-  })
   .views(self => ({
-    /**
-     * #getter
-     */
-    get blocks2d() {
-      return self.blocksY.flatMap(by => self.blocksX.map(bx => [bx, by]))
-    },
-
-    /**
-     * #getter
-     */
-    get done() {
-      return self.initialized && (self.data.msa || self.data.tree)
-    },
-
     /**
      * #getter
      */
@@ -930,6 +856,78 @@ const model = types
       return this.root.leaves().length * self.rowHeight
     },
   }))
+  .views(self => ({
+    /**
+     * #getter
+     */
+    get totalWidth() {
+      return self.numColumns * self.colWidth
+    },
+  }))
+
+  .views(self => ({
+    /**
+     * #getter
+     */
+    get initialized() {
+      return (
+        (self.data.msa ||
+          self.data.tree ||
+          self.msaFilehandle ||
+          self.treeFilehandle) &&
+        !self.error
+      )
+    },
+    /**
+     * #getter
+     */
+    get blocksX() {
+      return blocksX({
+        viewportWidth: self.msaAreaWidth,
+        viewportX: -self.scrollX,
+        blockSize: self.blockSize,
+        mapWidth: self.totalWidth,
+      })
+    },
+    /**
+     * #getter
+     */
+    get blocksY() {
+      return blocksY({
+        viewportHeight: self.height,
+        viewportY: -self.scrollY,
+        blockSize: self.blockSize,
+        mapHeight: self.totalHeight,
+      })
+    },
+  }))
+  .views(self => ({
+    /**
+     * #getter
+     */
+    get blocks2d() {
+      const ret = []
+      for (const by of self.blocksY) {
+        for (const bx of self.blocksX) {
+          ret.push([bx, by])
+        }
+      }
+      return ret
+    },
+
+    /**
+     * #getter
+     */
+    get done() {
+      return self.initialized && (self.data.msa || self.data.tree)
+    },
+    /**
+     * #getter
+     */
+    get maxScrollX() {
+      return -self.totalWidth + (self.msaAreaWidth - 100)
+    },
+  }))
   .actions(self => ({
     /**
      * #action
@@ -959,22 +957,14 @@ const model = types
      * #action
      */
     doScrollX(deltaX: number) {
-      self.scrollX = clamp(
-        -(self.numColumns * self.colWidth) + (self.msaAreaWidth - 100),
-        self.scrollX + deltaX,
-        0,
-      )
+      self.scrollX = clamp(self.maxScrollX, self.scrollX + deltaX, 0)
     },
 
     /**
      * #action
      */
     setScrollX(n: number) {
-      self.scrollX = clamp(
-        -(self.numColumns * self.colWidth) + (self.msaAreaWidth - 100),
-        n,
-        0,
-      )
+      self.scrollX = clamp(self.maxScrollX, n, 0)
     },
 
     /**
@@ -1227,6 +1217,14 @@ const model = types
     },
   }))
   .actions(self => ({
+    /**
+     * #action
+     */
+    async exportSVG(opts: { theme: Theme; includeMinimap?: boolean }) {
+      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,102 @@
+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 { renderMSABlock } from './components/MSAPanel/renderMSABlock'
+import { colorContrast } from './util'
+import MinimapSVG from './components/MinimapSVG'
+
+// render LGV to SVG
+export async function renderToSvg(
+  model: MsaViewModel,
+  opts: { theme: Theme; includeMinimap?: boolean },
+) {
+  await when(() => !!model.initialized)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const { width, height, scrollX, scrollY, colorScheme, treeAreaWidth } = model
+  const { theme, includeMinimap } = 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,
+  })
+  renderMSABlock({
+    model,
+    offsetY: scrollY,
+    offsetX: -scrollX,
+    contrastScheme,
+    ctx: ctx2,
+    blockSizeXOverride: width - treeAreaWidth,
+    blockSizeYOverride: height,
+    highResScaleFactorOverride: 1,
+  })
+
+  const Wrapper = includeMinimap ? MinimapWrapper : NullWrapper
+  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()}
+    >
+      <Wrapper model={model}>
+        <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 }}
+        />
+      </Wrapper>
+    </svg>,
+    createRoot,
+  )
+}
+
+function MinimapWrapper({
+  model,
+  children,
+}: {
+  model: MsaViewModel
+  children: React.ReactNode
+}) {
+  const { minimapHeight, treeAreaWidth } = model
+
+  return (
+    <>
+      <g transform={`translate(${treeAreaWidth} 0)`}>
+        <MinimapSVG model={model} />
+      </g>
+
+      <g transform={`translate(0 ${minimapHeight})`}>{children}</g>
+    </>
+  )
+}
+
+function NullWrapper({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}

package/src/version.ts

@@ -1 +1 @@
-export const version = '3.0.3'
+export const version = '3.1.1'