react-msaview 3.1.3 → 3.1.4

package/src/components/MSAPanel/renderMSAMouseover.ts

@@ -10,8 +10,6 @@ export function renderMouseover({
   const {
     mouseCol,
     colWidth,
-    treeAreaWidth,
-    resizeHandleWidth,
     width,
     height,
     rowHeight,
@@ -20,31 +18,19 @@ export function renderMouseover({
     mouseRow,
     // @ts-expect-error
     mouseCol2,
-    minimapHeight,
-    totalTrackAreaHeight,
   } = model
   ctx.resetTransform()
   ctx.clearRect(0, 0, width, height)
-
   if (mouseCol !== undefined) {
     ctx.fillStyle = 'rgba(0,0,0,0.15)'
-    const x =
-      (mouseCol - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth
-
-    ctx.fillRect(x, minimapHeight, colWidth, height)
+    ctx.fillRect((mouseCol - 1) * colWidth + scrollX, 0, colWidth, height)
   }
-
   if (mouseRow !== undefined) {
     ctx.fillStyle = 'rgba(0,0,0,0.15)'
-    const y =
-      mouseRow * rowHeight + scrollY + minimapHeight + totalTrackAreaHeight
-    ctx.fillRect(treeAreaWidth + resizeHandleWidth, y, width, rowHeight)
+    ctx.fillRect(0, mouseRow * rowHeight + scrollY, width, rowHeight)
   }
   if (mouseCol2 !== undefined) {
     ctx.fillStyle = 'rgba(255,255,0,0.2)'
-    const x =
-      (mouseCol2 - 1) * colWidth + scrollX + treeAreaWidth + resizeHandleWidth
-
-    ctx.fillRect(x, 0, colWidth, height)
+    ctx.fillRect((mouseCol2 - 1) * colWidth + scrollX, 0, colWidth, height)
   }
 }

package/src/components/MSAView.tsx

@@ -1,10 +1,7 @@
 import React, { Suspense } from 'react'
-
 import { observer } from 'mobx-react'
-import { Typography } from '@mui/material'
 
 // locals
-import ImportForm from './ImportForm'
 import TreeRuler from './TreePanel/TreeRuler'
 import Header from './Header'
 import Track from './Track'
@@ -14,43 +11,44 @@ import MSAPanel from './MSAPanel'
 import TreePanel from './TreePanel'
 import Minimap from './Minimap'
 
-const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
-  const { done, initialized } = model
+function TopArea({ model }: { model: MsaViewModel }) {
+  return (
+    <div style={{ display: 'flex' }}>
+      <TreeRuler model={model} />
+      <Minimap model={model} />
+    </div>
+  )
+}
+function MainArea({ model }: { model: MsaViewModel }) {
+  return (
+    <div style={{ display: 'flex' }}>
+      <TreePanel model={model} />
+      <VerticalResizeHandle model={model} />
+      <MSAPanel model={model} />
+    </div>
+  )
+}
 
+const View = observer(function ({ model }: { model: MsaViewModel }) {
+  const { turnedOnTracks } = model
   return (
-    <div>
-      {!initialized ? (
-        <ImportForm model={model} />
-      ) : !done ? (
-        <Typography variant="h4">Loading...</Typography>
-      ) : (
-        <MSAView2 model={model} />
-      )}
+    <div style={{ paddingLeft: 20, position: 'relative' }}>
+      <TopArea model={model} />
+      {turnedOnTracks?.map(track => (
+        <Track key={track.model.id} model={model} track={track} />
+      ))}
+      <MainArea model={model} />
     </div>
   )
 })
 
-const MSAView2 = observer(function ({ model }: { model: MsaViewModel }) {
-  const { height, turnedOnTracks, DialogComponent, DialogProps } = model
+const MSAView = observer(function ({ model }: { model: MsaViewModel }) {
+  const { height, DialogComponent, DialogProps } = model
   return (
     <div>
       <div style={{ height, overflow: 'hidden' }}>
         <Header model={model} />
-        <div style={{ position: 'relative' }}>
-          <div style={{ display: 'flex' }}>
-            <TreeRuler model={model} />
-            <Minimap model={model} />
-          </div>
-          {turnedOnTracks?.map(track => (
-            <Track key={track.model.id} model={model} track={track} />
-          ))}
-
-          <div style={{ display: 'flex' }}>
-            <TreePanel model={model} />
-            <VerticalResizeHandle model={model} />
-            <MSAPanel model={model} />
-          </div>
-        </div>
+        <View model={model} />
       </div>
       <HorizontalResizeHandle model={model} />
 

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
@@ -337,14 +338,6 @@ const model = types
      */
     error: undefined as unknown,
 
-    /**
-     * #volatile
-     */
-    margin: {
-      left: 20,
-      top: 20,
-    },
-
     /**
      * #volatile
      */
@@ -1009,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,
             ),
@@ -1293,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

@@ -141,6 +141,7 @@ function CoreRendering({
   })
   renderMSABlock({
     model,
+    theme,
     offsetY,
     offsetX,
     contrastScheme,

package/src/version.ts

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