react-msaview 3.1.2 → 3.1.4

package/src/components/TreePanel/TreeCanvasBlock.tsx

@@ -42,8 +42,7 @@ const TreeCanvasBlock = observer(function ({
   const [toggleNodeMenu, setToggleNodeMenu] = useState<TooltipData>()
   const [hoverElt, setHoverElt] = useState<ClickEntry>()
 
-  const { scrollY, treeAreaWidth, margin, blockSize, highResScaleFactor } =
-    model
+  const { scrollY, treeAreaWidth, blockSize, highResScaleFactor } = model
 
   const width = treeAreaWidth + padding
   const height = blockSize
@@ -83,7 +82,7 @@ const TreeCanvasBlock = observer(function ({
 
     ctx.resetTransform()
     ctx.clearRect(0, 0, treeAreaWidth + padding, blockSize)
-    ctx.translate(margin.left, -offsetY)
+    ctx.translate(0, -offsetY)
 
     if (hoverElt) {
       const { minX, maxX, minY, maxY } = hoverElt
@@ -91,10 +90,10 @@ const TreeCanvasBlock = observer(function ({
       ctx.fillStyle = 'rgba(0,0,0,0.1)'
       ctx.fillRect(minX, minY, maxX - minX, maxY - minY)
     }
-  }, [hoverElt, margin.left, offsetY, blockSize, treeAreaWidth])
+  }, [hoverElt, offsetY, blockSize, treeAreaWidth])
 
   function hoverBranchClickMap(event: React.MouseEvent) {
-    const x = event.nativeEvent.offsetX - margin.left
+    const x = event.nativeEvent.offsetX
     const y = event.nativeEvent.offsetY
 
     const [entry] = clickMap.current.search({
@@ -110,7 +109,7 @@ const TreeCanvasBlock = observer(function ({
   }
 
   function hoverNameClickMap(event: React.MouseEvent) {
-    const x = event.nativeEvent.offsetX - margin.left
+    const x = event.nativeEvent.offsetX
     const y = event.nativeEvent.offsetY
     const [entry] = clickMap.current.search({
       minX: x,

package/src/components/TreePanel/renderTreeCanvas.ts

@@ -133,7 +133,6 @@ export function renderTreeLabels({
     drawTree,
     structures,
     treeAreaWidth,
-    margin,
     noTree,
   } = model
   const by = blockSizeYOverride || blockSize
@@ -179,7 +178,7 @@ export function renderTreeLabels({
         })
       } else if (labelsAlignRight) {
         const smallPadding = 2
-        const offset = treeAreaWidth - smallPadding - margin.left
+        const offset = treeAreaWidth - smallPadding
         if (drawTree && !noTree) {
           const { width } = ctx.measureText(displayName)
           ctx.moveTo(xp + radius + 2, y)
@@ -188,8 +187,8 @@ export function renderTreeLabels({
         }
         ctx.fillText(displayName, offset, yp)
         clickMap?.insert({
-          minX: treeAreaWidth - margin.left - width,
-          maxX: treeAreaWidth - margin.left,
+          minX: treeAreaWidth - width,
+          maxX: treeAreaWidth,
           minY: yp - height,
           maxY: yp,
           name,
@@ -235,7 +234,6 @@ export function renderTreeCanvas({
     drawNodeBubbles,
     treeWidth,
     highResScaleFactor,
-    margin,
     blockSize,
     fontSize,
     rowHeight,
@@ -254,7 +252,7 @@ export function renderTreeCanvas({
     nref < 0 ? -Infinity : highResScaleFactorOverride || highResScaleFactor
   ctx.scale(k, k)
   ctx.clearRect(0, 0, treeWidth + padding, by)
-  ctx.translate(margin.left, -offsetY)
+  ctx.translate(0, -offsetY)
 
   const font = ctx.font
   ctx.font = font.replace(/\d+px/, `${fontSize}px`)

package/src/index.ts

@@ -1,2 +1,2 @@
-export { default as MSAView } from './components/MSAView'
+export { default as MSAView } from './components/Loading'
 export { default as MSAModel, type MsaViewModel } from './model'

package/src/measureTextCanvas.ts

@@ -0,0 +1,14 @@
+let canvasHandle: HTMLCanvasElement | undefined
+
+export default function measureTextCanvas(text: string, fontSize: number) {
+  if (!canvasHandle) {
+    canvasHandle = document.createElement('canvas')
+  }
+
+  const ctx = canvasHandle.getContext('2d')
+  if (!ctx) {
+    throw new Error('no canvas context')
+  }
+  ctx.font = ctx.font.replace(/\d+px/, `${fontSize}px`)
+  return ctx.measureText(text).width
+}

package/src/model.ts

@@ -9,7 +9,7 @@ import { saveAs } from 'file-saver'
 import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst'
 import { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
 import { openLocation } from '@jbrowse/core/util/io'
-import { measureText, notEmpty, sum } from '@jbrowse/core/util'
+import { notEmpty, sum } from '@jbrowse/core/util'
 import BaseViewModel from '@jbrowse/core/pluggableElementTypes/models/BaseViewModel'
 
 // locals
@@ -37,6 +37,7 @@ import { DialogQueueSessionMixin } from './DialogQueue'
 import { renderToSvg } from './renderToSvg'
 import { Theme } from '@mui/material'
 import { blocksX, blocksY } from './calculateBlocks'
+import measureTextCanvas from './measureTextCanvas'
 
 export interface RowDetails {
   [key: string]: unknown
@@ -44,13 +45,13 @@ export interface RowDetails {
   range?: { start: number; end: number }
 }
 
-interface BasicTrackModel {
+export interface BasicTrackModel {
   id: string
   name: string
   associatedRowName?: string
   height: number
 }
-interface Structure {
+export interface Structure {
   pdb: string
   startPos: number
   endPos: number
@@ -79,8 +80,9 @@ export interface IBoxTrack {
   model: BoxTrackModel
 }
 
-type BasicTrack = IBoxTrack | ITextTrack
-type StructureSnap = SnapshotIn<typeof StructureModel>
+export type BasicTrack = IBoxTrack | ITextTrack
+
+export type StructureSnap = SnapshotIn<typeof StructureModel>
 
 /**
  * #stateModel MsaView
@@ -336,14 +338,6 @@ const model = types
      */
     error: undefined as unknown,
 
-    /**
-     * #volatile
-     */
-    margin: {
-      left: 20,
-      top: 20,
-    },
-
     /**
      * #volatile
      */
@@ -1008,7 +1002,7 @@ const model = types
       if (rowHeight > 5) {
         for (const node of hierarchy.leaves()) {
           x = Math.max(
-            measureText(
+            measureTextCanvas(
               treeMetadata[node.data.name]?.genome || node.data.name,
               fontSize,
             ),
@@ -1220,7 +1214,11 @@ const model = types
     /**
      * #action
      */
-    async exportSVG(opts: { theme: Theme; includeMinimap?: boolean }) {
+    async exportSVG(opts: {
+      theme: Theme
+      includeMinimap?: boolean
+      exportType: string
+    }) {
       const html = await renderToSvg(self as MsaViewModel, opts)
       const blob = new Blob([html], { type: 'image/svg+xml' })
       saveAs(blob, 'image.svg')
@@ -1288,7 +1286,7 @@ const model = types
         autorun(async () => {
           if (self.treeWidthMatchesArea) {
             self.setTreeWidth(
-              Math.max(50, self.treeAreaWidth - self.labelsWidth - 20),
+              Math.max(50, self.treeAreaWidth - self.labelsWidth - 10),
             )
           }
         }),

package/src/renderToSvg.tsx

@@ -11,23 +11,129 @@ 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 },
+  opts: { theme: Theme; includeMinimap?: boolean; exportType: string },
 ) {
   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 { width, height, scrollX, scrollY } = model
+  const { exportType, theme, includeMinimap } = opts
 
+  if (exportType === 'entire') {
+    return render({
+      width: model.totalWidth + model.treeAreaWidth,
+      height: model.totalHeight,
+      theme,
+      model,
+      offsetY: 0,
+      offsetX: 0,
+      includeMinimap,
+    })
+  } else if (exportType === 'viewport') {
+    return render({
+      width,
+      height,
+      theme,
+      model,
+      offsetY: scrollY,
+      offsetX: -scrollX,
+      includeMinimap,
+    })
+  } else {
+    throw new Error('unknown export type')
+  }
+}
+
+async function render({
+  width,
+  height,
+  offsetX,
+  offsetY,
+  theme,
+  model,
+  includeMinimap,
+}: {
+  width: number
+  height: number
+  offsetX: number
+  offsetY: number
+  theme: Theme
+  model: MsaViewModel
+  includeMinimap?: boolean
+}) {
   const { Context } = await import('svgcanvas')
+  const Wrapper = includeMinimap ? MinimapWrapper : NullWrapper
+
+  return renderToStaticMarkup(
+    <SvgWrapper width={width} height={height}>
+      <Wrapper model={model}>
+        <CoreRendering
+          Context={Context}
+          model={model}
+          theme={theme}
+          offsetX={offsetX}
+          offsetY={offsetY}
+          width={width}
+          height={height}
+        />
+      </Wrapper>
+    </SvgWrapper>,
+    createRoot,
+  )
+}
+
+// function renderMultiline({ model }: { model: MsaViewModel }) {
+//   const { treeAreaWidth, height } = model
+//   const clipId = 'tree'
+//   return (
+//     <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>
+//   )
+// }
+
+function CoreRendering({
+  model,
+  theme,
+  width,
+  height,
+  offsetX,
+  offsetY,
+  Context,
+}: {
+  model: MsaViewModel
+  theme: Theme
+  width: number
+  height: number
+  offsetX: number
+  offsetY: number
+  Context: (
+    width: number,
+    height: number,
+  ) => CanvasRenderingContext2D & { getSvg: () => { innerHTML: string } }
+}) {
+  const clipId = 'tree'
+  const { treeAreaWidth, colorScheme } = model
+  const contrastScheme = colorContrast(colorScheme, theme)
   const ctx1 = Context(width, height)
   const ctx2 = Context(width, height)
-  const contrastScheme = colorContrast(colorScheme, theme)
   renderTreeCanvas({
     model,
-    offsetY: scrollY,
+    offsetY,
     ctx: ctx1,
     theme,
     blockSizeYOverride: height,
@@ -35,45 +141,33 @@ export async function renderToSvg(
   })
   renderMSABlock({
     model,
-    offsetY: scrollY,
-    offsetX: -scrollX,
+    theme,
+    offsetY,
+    offsetX,
     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,
+  return (
+    <>
+      <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 }}
+      />
+    </>
   )
 }
 
@@ -97,6 +191,28 @@ function MinimapWrapper({
   )
 }
 
+function SvgWrapper({
+  width,
+  height,
+  children,
+}: {
+  width: number
+  height: number
+  children: React.ReactNode
+}) {
+  return (
+    <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()}
+    >
+      {children}
+    </svg>
+  )
+}
+
 function NullWrapper({ children }: { children: React.ReactNode }) {
   return <>{children}</>
 }

package/src/version.ts

@@ -1 +1 @@
-export const version = '3.1.2'
+export const version = '3.1.4'