react-msaview 3.1.0 → 3.1.2

package/src/components/ZoomControls.tsx

@@ -1,5 +1,5 @@
-import React from 'react'
-import { IconButton, useTheme } from '@mui/material'
+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,13 +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 theme = useTheme()
+  const [exportSvgDialogOpen, setExportSvgDialogOpen] = useState(false)
   return (
     <>
       <IconButton
@@ -63,14 +66,20 @@ const ZoomControls = observer(function ZoomControls({
           },
           {
             label: 'Export SVG',
-            onClick: () => {
-              model.exportSVG({ theme })
-            },
+            onClick: () => setExportSvgDialogOpen(true),
           },
         ]}
       >
         <MoreVert />
       </CascadingMenuButton>
+      {exportSvgDialogOpen ? (
+        <Suspense fallback={null}>
+          <ExportSVGDialog
+            model={model}
+            onClose={() => setExportSvgDialogOpen(false)}
+          />
+        </Suspense>
+      ) : null}
     </>
   )
 })

package/src/model.ts

@@ -36,6 +36,7 @@ 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
@@ -594,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
      */
@@ -933,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
@@ -962,23 +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) {
-      console.log({ n })
-      self.scrollX = clamp(
-        -(self.numColumns * self.colWidth) + (self.msaAreaWidth - 100),
-        n,
-        0,
-      )
+      self.scrollX = clamp(self.maxScrollX, n, 0)
     },
 
     /**
@@ -1234,7 +1220,7 @@ const model = types
     /**
      * #action
      */
-    async exportSVG(opts: { theme: Theme }) {
+    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')

package/src/renderToSvg.tsx

@@ -7,15 +7,19 @@ import { Theme } from '@mui/material'
 // locals
 import { MsaViewModel } from './model'
 import { renderTreeCanvas } from './components/TreePanel/renderTreeCanvas'
-import { renderBlock } from './components/MSAPanel/renderMSABlock'
+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 }) {
+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 } = opts
+  const { theme, includeMinimap } = opts
 
   const { Context } = await import('svgcanvas')
   const ctx1 = Context(width, height)
@@ -29,7 +33,7 @@ export async function renderToSvg(model: MsaViewModel, opts: { theme: Theme }) {
     blockSizeYOverride: height,
     highResScaleFactorOverride: 1,
   })
-  renderBlock({
+  renderMSABlock({
     model,
     offsetY: scrollY,
     offsetX: -scrollX,
@@ -40,6 +44,7 @@ export async function renderToSvg(model: MsaViewModel, opts: { theme: Theme }) {
     highResScaleFactorOverride: 1,
   })
 
+  const Wrapper = includeMinimap ? MinimapWrapper : NullWrapper
   const clipId = 'tree'
   // the xlink namespace is used for rendering <image> tag
   return renderToStaticMarkup(
@@ -50,22 +55,48 @@ export async function renderToSvg(model: MsaViewModel, opts: { theme: Theme }) {
       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 }}
-      />
+      <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.1.0'
+export const version = '3.1.2'