react-msaview 3.1.3 → 3.1.5

package/dist/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"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"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "3.1.3";
+export declare const version = "3.1.5";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '3.1.3';
+export const version = '3.1.5';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "3.1.3",
+  "version": "3.1.5",
   "license": "MIT",
   "main": "dist/index.js",
   "files": [

package/src/components/ImportForm/util.ts

@@ -15,6 +15,7 @@ export async function load(
       await model.setTreeFilehandle(treeFile)
     }
   } catch (e) {
+    console.error(e)
     model.setError(e)
   }
 }

package/src/components/Loading.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { observer } from 'mobx-react'
+import { Typography } from '@mui/material'
+
+// locals
+import ImportForm from './ImportForm'
+import MSAView from './MSAView'
+import { MsaViewModel } from '../model'
+
+const Loading = observer(function ({ model }: { model: MsaViewModel }) {
+  const { done, initialized } = model
+
+  return (
+    <div>
+      {!initialized ? (
+        <ImportForm model={model} />
+      ) : !done ? (
+        <Typography variant="h4">Loading...</Typography>
+      ) : (
+        <MSAView model={model} />
+      )}
+    </div>
+  )
+})
+
+export default Loading

package/src/components/MSAPanel/MSABlock.tsx

@@ -42,13 +42,14 @@ const MSABlock = observer(function ({
     return autorun(() => {
       renderMSABlock({
         ctx,
+        theme,
         offsetX,
         offsetY,
         contrastScheme,
         model,
       })
     })
-  }, [model, offsetX, offsetY, contrastScheme])
+  }, [model, offsetX, offsetY, theme, contrastScheme])
   return (
     <canvas
       ref={ref}

package/src/components/MSAPanel/MSAMouseoverCanvas.tsx

@@ -15,17 +15,17 @@ const MSAMouseoverCanvas = observer(function ({
   const { height, width } = model
   useEffect(() => {
     const ctx = ref.current?.getContext('2d')
-    if (!ctx) {
-      return
-    }
-    return autorun(() => {
-      renderMouseover({ ctx, model })
-    })
+    return ctx
+      ? autorun(() => {
+          renderMouseover({ ctx, model })
+        })
+      : undefined
   }, [model])
 
   return (
     <canvas
       ref={ref}
+      id="mouseover"
       width={width}
       height={height}
       style={{

package/src/components/MSAPanel/index.tsx

@@ -5,9 +5,9 @@ import { MsaViewModel } from '../../model'
 
 export default function MSAPanel({ model }: { model: MsaViewModel }) {
   return (
-    <>
+    <div style={{ position: 'relative' }}>
       <MSACanvas model={model} />
       <MSAMouseoverCanvas model={model} />
-    </>
+    </div>
   )
 }

package/src/components/MSAPanel/renderMSABlock.ts

@@ -3,6 +3,7 @@ import { MsaViewModel } from '../../model'
 import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
 import { NodeWithIdsAndLength } from '../../util'
 import { HierarchyNode } from 'd3-hierarchy'
+import { Theme } from '@mui/material'
 
 export function renderMSABlock({
   model,
@@ -10,12 +11,14 @@ export function renderMSABlock({
   offsetY,
   contrastScheme,
   ctx,
+  theme,
   highResScaleFactorOverride,
   blockSizeXOverride,
   blockSizeYOverride,
 }: {
   offsetX: number
   offsetY: number
+  theme: Theme
   model: MsaViewModel
   contrastScheme: Record<string, string>
   ctx: CanvasRenderingContext2D
@@ -52,6 +55,7 @@ export function renderMSABlock({
   drawTiles({
     model,
     ctx,
+    theme,
     offsetX,
     offsetY,
     xStart,
@@ -63,6 +67,7 @@ export function renderMSABlock({
     ctx,
     offsetX,
     contrastScheme,
+    theme,
     xStart,
     xEnd,
     visibleLeaves,
@@ -74,11 +79,13 @@ function drawTiles({
   offsetX,
   ctx,
   visibleLeaves,
+  theme,
   xStart,
   xEnd,
 }: {
   model: MsaViewModel
   offsetX: number
+  theme: Theme
   offsetY: number
   ctx: CanvasRenderingContext2D
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
@@ -118,7 +125,7 @@ function drawTiles({
             : colorScheme[letter.toUpperCase()]
       if (bgColor) {
         const x = i * colWidth + offsetX - (offsetX % colWidth)
-        ctx.fillStyle = color || 'white'
+        ctx.fillStyle = color || theme.palette.background.default
         ctx.fillRect(x, y - rowHeight, colWidth, rowHeight)
       }
     }
@@ -137,6 +144,7 @@ function drawText({
   offsetX: number
   model: MsaViewModel
   contrastScheme: Record<string, string>
+  theme: Theme
   ctx: CanvasRenderingContext2D
   visibleLeaves: HierarchyNode<NodeWithIdsAndLength>[]
   xStart: number

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,56 +1,54 @@
 import React, { Suspense } from 'react'
-
 import { observer } from 'mobx-react'
-import { Typography } from '@mui/material'
 
 // locals
-import ImportForm from './ImportForm'
+import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
+import { MsaViewModel } from '../model'
 import TreeRuler from './TreePanel/TreeRuler'
 import Header from './Header'
 import Track from './Track'
-import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
-import { MsaViewModel } from '../model'
 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={{ 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

@@ -71,7 +71,13 @@ export function renderNodeBubbles({
   theme: Theme
   blockSizeYOverride?: number
 }) {
-  const { hierarchy, showBranchLen, collapsed, blockSize } = model
+  const {
+    hierarchy,
+    showBranchLen,
+    collapsed,
+    blockSize,
+    marginLeft: ml,
+  } = model
   const by = blockSizeYOverride || blockSize
   for (const node of hierarchy.descendants()) {
     const val = showBranchLen ? 'len' : 'y'
@@ -96,8 +102,8 @@ export function renderNodeBubbles({
       ctx.stroke()
 
       clickMap?.insert({
-        minX: x - radius,
-        maxX: x - radius + d,
+        minX: x - radius + ml,
+        maxX: x - radius + d + ml,
         minY: y - radius,
         maxY: y - radius + d,
         branch: true,
@@ -133,7 +139,8 @@ export function renderTreeLabels({
     drawTree,
     structures,
     treeAreaWidth,
-    margin,
+    treeAreaWidthMinusMargin,
+    marginLeft: ml,
     noTree,
   } = model
   const by = blockSizeYOverride || blockSize
@@ -170,8 +177,8 @@ export function renderTreeLabels({
       if (!drawTree && !labelsAlignRight) {
         ctx.fillText(displayName, 0, yp)
         clickMap?.insert({
-          minX: 0,
-          maxX: width,
+          minX: 0 + ml,
+          maxX: width + ml,
           minY: yp - height,
           maxY: yp,
           name,
@@ -179,7 +186,7 @@ export function renderTreeLabels({
         })
       } else if (labelsAlignRight) {
         const smallPadding = 2
-        const offset = treeAreaWidth - smallPadding - margin.left
+        const offset = treeAreaWidthMinusMargin - smallPadding
         if (drawTree && !noTree) {
           const { width } = ctx.measureText(displayName)
           ctx.moveTo(xp + radius + 2, y)
@@ -188,8 +195,8 @@ export function renderTreeLabels({
         }
         ctx.fillText(displayName, offset, yp)
         clickMap?.insert({
-          minX: treeAreaWidth - margin.left - width,
-          maxX: treeAreaWidth - margin.left,
+          minX: treeAreaWidth - width + ml,
+          maxX: treeAreaWidth + ml,
           minY: yp - height,
           maxY: yp,
           name,
@@ -198,8 +205,8 @@ export function renderTreeLabels({
       } else {
         ctx.fillText(displayName, xp + d, yp)
         clickMap?.insert({
-          minX: xp + d,
-          maxX: xp + d + width,
+          minX: xp + d + ml,
+          maxX: xp + d + width + ml,
           minY: yp - height,
           maxY: yp,
           name,
@@ -235,10 +242,10 @@ export function renderTreeCanvas({
     drawNodeBubbles,
     treeWidth,
     highResScaleFactor,
-    margin,
     blockSize,
     fontSize,
     rowHeight,
+    marginLeft,
     nref,
   } = model
   const by = blockSizeYOverride || blockSize
@@ -254,7 +261,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(marginLeft, -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
@@ -335,15 +336,12 @@ const model = types
     /**
      * #volatile
      */
-    error: undefined as unknown,
+    marginLeft: 20,
 
     /**
      * #volatile
      */
-    margin: {
-      left: 20,
-      top: 20,
-    },
+    error: undefined as unknown,
 
     /**
      * #volatile
@@ -765,6 +763,13 @@ const model = types
     get msaAreaWidth() {
       return self.width - self.treeAreaWidth
     },
+
+    /**
+     * #getter
+     */
+    get treeAreaWidthMinusMargin() {
+      return self.treeAreaWidth - self.marginLeft
+    },
     /**
      * #getter
      */
@@ -1009,7 +1014,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 +1298,10 @@ 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 - self.marginLeft,
+              ),
             )
           }
         }),

package/src/parsers/ClustalMSA.ts

@@ -60,20 +60,6 @@ export default class ClustalMSA {
   }
 
   get tracks() {
-    return this.seqConsensus?.trim()
-      ? [
-          {
-            id: 'seqConsensus',
-            name: 'Sequence consensus',
-            data: this.seqConsensus,
-            customColorScheme: {
-              '*': 'white',
-              ':': 'grey',
-              '.': 'darkgrey',
-              ' ': 'black',
-            },
-          },
-        ]
-      : []
+    return []
   }
 }

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.5'