react-msaview 4.0.3 → 4.1.1

package/src/components/header/MultiAlignmentSelector.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
-import { observer } from 'mobx-react'
+
 import { Select } from '@mui/material'
+import { observer } from 'mobx-react'
 
-// locals
 import type { MsaViewModel } from '../../model'
 
 const MultiAlignmentSelector = observer(function ({
@@ -17,7 +17,7 @@ const MultiAlignmentSelector = observer(function ({
       value={currentAlignment}
       size="small"
       onChange={event => {
-        model.setCurrentAlignment(+(event.target.value as string))
+        model.setCurrentAlignment(+event.target.value)
         model.setScrollX(0)
         model.setScrollY(0)
       }}

package/src/components/header/ZoomControls.tsx

@@ -1,16 +1,16 @@
 import React from 'react'
+
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import MoreVert from '@mui/icons-material/MoreVert'
+import RestartAlt from '@mui/icons-material/RestartAlt'
+import ZoomIn from '@mui/icons-material/ZoomIn'
+import ZoomOut from '@mui/icons-material/ZoomOut'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
-// locals
 import { MsaViewModel } from '../../model'
 
 // icons
-import ZoomIn from '@mui/icons-material/ZoomIn'
-import ZoomOut from '@mui/icons-material/ZoomOut'
-import MoreVert from '@mui/icons-material/MoreVert'
-import RestartAlt from '@mui/icons-material/RestartAlt'
 
 const ZoomControls = observer(function ZoomControls({
   model,
@@ -60,6 +60,13 @@ const ZoomControls = observer(function ZoomControls({
               model.zoomOutVertical()
             },
           },
+
+          {
+            label: 'Show entire view',
+            onClick: () => {
+              model.showEntire()
+            },
+          },
           {
             label: 'Reset zoom to default',
             icon: RestartAlt,

package/src/components/import/ImportForm.tsx

@@ -1,13 +1,14 @@
 import React, { useState } from 'react'
+
+import { ErrorMessage, FileSelector } from '@jbrowse/core/ui'
+import { Button, Container, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
-import { Button, Container, Grid, Typography } from '@mui/material'
-import { FileSelector } from '@jbrowse/core/ui'
-import type { FileLocation } from '@jbrowse/core/util/types'
 
-// locals
-import type { MsaViewModel } from '../../model'
-import { load } from './util'
 import ImportFormExamples from './ImportFormExamples'
+import { load } from './util'
+
+import type { MsaViewModel } from '../../model'
+import type { FileLocation } from '@jbrowse/core/util/types'
 
 const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
   const [msaFile, setMsaFile] = useState<FileLocation>()
@@ -17,11 +18,7 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <Container>
       <div style={{ width: '50%' }}>
-        {error ? (
-          <div style={{ padding: 20 }}>
-            <Typography color="error">Error: {`${error}`}</Typography>
-          </div>
-        ) : null}
+        {error ? <ErrorMessage error={error} /> : null}
         <Typography>
           Open an MSA file (stockholm or clustal format) and/or a tree file
           (newick format).
@@ -34,15 +31,25 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
         </Typography>
       </div>
 
-      <Grid container spacing={10} justifyContent="center" alignItems="center">
-        <Grid item>
-          <Typography>MSA file or URL</Typography>
-          <FileSelector location={msaFile} setLocation={setMsaFile} />
-          <Typography>Tree file or URL</Typography>
-          <FileSelector location={treeFile} setLocation={setTreeFile} />
-        </Grid>
-
-        <Grid item>
+      <div
+        style={{
+          display: 'flex',
+          justifyContent: 'center',
+          alignItems: 'center',
+          gap: 40,
+        }}
+      >
+        <div>
+          <div>
+            <Typography>MSA file or URL</Typography>
+            <FileSelector location={msaFile} setLocation={setMsaFile} />
+          </div>
+          <div>
+            <Typography>Tree file or URL</Typography>
+            <FileSelector location={treeFile} setLocation={setTreeFile} />
+          </div>
+        </div>
+        <div>
           <Button
             onClick={() => {
               // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -61,13 +68,13 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
           >
             Open
           </Button>
-        </Grid>
+        </div>
 
-        <Grid item>
+        <div>
           <Typography>Examples</Typography>
           <ImportFormExamples model={model} />
-        </Grid>
-      </Grid>
+        </div>
+      </div>
     </Container>
   )
 })

package/src/components/import/ImportFormExamples.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
-import { Typography, Link } from '@mui/material'
+
+import { Link, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-// locals
-import type { MsaViewModel } from '../../model'
-import { smallTree, smallMSA, smallMSAOnly } from './data/seq2'
+import { smallMSA, smallMSAOnly, smallTree } from './data/seq2'
 import { load } from './util'
 
+import type { MsaViewModel } from '../../model'
+
 function ListItem({
   onClick,
   model,

package/src/components/import/util.ts

@@ -1,5 +1,5 @@
-import type { FileLocation } from '@jbrowse/core/util'
 import type { MsaViewModel } from '../../model'
+import type { FileLocation } from '@jbrowse/core/util'
 
 export async function load(
   model: MsaViewModel,

package/src/components/minimap/Minimap.tsx

@@ -1,5 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react'
+
 import { observer } from 'mobx-react'
+
 import type { MsaViewModel } from '../../model'
 
 interface ClickCoord {

package/src/components/minimap/MinimapSVG.tsx

@@ -1,5 +1,7 @@
 import React from 'react'
+
 import { observer } from 'mobx-react'
+
 import type { MsaViewModel } from '../../model'
 
 const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {

package/src/components/msa/Loading.tsx

@@ -1,5 +1,6 @@
-import { CircularProgress, Typography } from '@mui/material'
 import React from 'react'
+
+import { CircularProgress, Typography } from '@mui/material'
 export default function Loading() {
   return (
     <div

package/src/components/msa/MSACanvas.tsx

@@ -1,10 +1,11 @@
-import React, { useEffect, useState, useRef } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+
 import { observer } from 'mobx-react'
 
-// locals
-import type { MsaViewModel } from '../../model'
-import MSACanvasBlock from './MSACanvasBlock'
 import Loading from './Loading'
+import MSACanvasBlock from './MSACanvasBlock'
+
+import type { MsaViewModel } from '../../model'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const {

package/src/components/msa/MSACanvasBlock.tsx

@@ -1,13 +1,14 @@
-import React, { useEffect, useRef, useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
+
 import { useTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
 
-// locals
+import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock'
 import { renderMSABlock } from './renderMSABlock'
-import type { MsaViewModel } from '../../model'
 import { colorContrast } from '../../util'
-import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock'
+
+import type { MsaViewModel } from '../../model'
 
 const MSACanvasBlock = observer(function ({
   model,
@@ -44,7 +45,12 @@ const MSACanvasBlock = observer(function ({
     }
     return autorun(() => {
       ctx.resetTransform()
-      ctx.clearRect(0, 0, blockSize, blockSize)
+      ctx.clearRect(
+        0,
+        0,
+        blockSize * highResScaleFactor,
+        blockSize * highResScaleFactor,
+      )
       const { actuallyShowDomains } = model
       if (actuallyShowDomains) {
         renderBoxFeatureCanvasBlock({
@@ -63,7 +69,15 @@ const MSACanvasBlock = observer(function ({
         model,
       })
     })
-  }, [model, offsetX, offsetY, theme, blockSize, contrastScheme])
+  }, [
+    model,
+    offsetX,
+    offsetY,
+    theme,
+    blockSize,
+    highResScaleFactor,
+    contrastScheme,
+  ])
 
   return (
     <canvas

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -1,11 +1,12 @@
 import React, { useEffect, useRef } from 'react'
-import { observer } from 'mobx-react'
+
 import { autorun } from 'mobx'
+import { observer } from 'mobx-react'
 
-// locals
-import type { MsaViewModel } from '../../model'
 import { renderMouseover } from './renderMSAMouseover'
 
+import type { MsaViewModel } from '../../model'
+
 const MSAMouseoverCanvas = observer(function ({
   model,
 }: {

package/src/components/msa/MSAPanel.tsx

@@ -1,9 +1,10 @@
 import React from 'react'
+
 import { observer } from 'mobx-react'
 
-// locals
 import MSACanvas from './MSACanvas'
 import MSAMouseoverCanvas from './MSAMouseoverCanvas'
+
 // types
 import type { MsaViewModel } from '../../model'
 

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,8 +1,6 @@
-import type { HierarchyNode } from 'd3-hierarchy'
-
-// locals
 import type { MsaViewModel } from '../../model'
 import type { NodeWithIdsAndLength } from '../../util'
+import type { HierarchyNode } from 'd3-hierarchy'
 
 export function renderBoxFeatureCanvasBlock({
   model,

package/src/components/msa/renderMSABlock.ts

@@ -1,10 +1,9 @@
-import type { HierarchyNode } from 'd3-hierarchy'
-import type { Theme } from '@mui/material'
+import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
 
-// locals
 import type { MsaViewModel } from '../../model'
-import { getClustalXColor, getPercentIdentityColor } from '../../colorSchemes'
 import type { NodeWithIdsAndLength } from '../../util'
+import type { Theme } from '@mui/material'
+import type { HierarchyNode } from 'd3-hierarchy'
 
 export function renderMSABlock({
   model,

package/src/components/tree/TreeBranchMenu.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
+
 import { Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
-// locals
 import type { MsaViewModel } from '../../model'
 
 interface Node {

package/src/components/tree/TreeCanvas.tsx

@@ -1,12 +1,12 @@
-import React from 'react'
-import { useEffect, useRef, useState } from 'react'
+import React, { useEffect, useRef, useState } from 'react'
+
 import { observer } from 'mobx-react'
 
-// locals
-import type { MsaViewModel } from '../../model'
 import TreeCanvasBlock from './TreeCanvasBlock'
 import { padding } from './renderTreeCanvas'
 
+import type { MsaViewModel } from '../../model'
+
 const TreeCanvas = observer(function ({ model }: { model: MsaViewModel }) {
   const ref = useRef<HTMLDivElement>(null)
   const scheduled = useRef(false)

package/src/components/tree/TreeCanvasBlock.tsx

@@ -1,16 +1,16 @@
-import React from 'react'
-import { useCallback, useEffect, useRef, useState } from 'react'
+import React, { useCallback, useEffect, useRef, useState } from 'react'
+
+import { useTheme } from '@mui/material'
 import { autorun } from 'mobx'
 import { observer } from 'mobx-react'
-import { useTheme } from '@mui/material'
 import RBush from 'rbush'
 
-// locals
-import type { MsaViewModel } from '../../model'
-import TreeNodeMenu from './TreeNodeMenu'
 import TreeBranchMenu from './TreeBranchMenu'
+import TreeNodeMenu from './TreeNodeMenu'
 import { padding, renderTreeCanvas } from './renderTreeCanvas'
 
+import type { MsaViewModel } from '../../model'
+
 interface TooltipData {
   name: string
   id: string
@@ -36,7 +36,7 @@ const TreeCanvasBlock = observer(function ({
   offsetY: number
 }) {
   const theme = useTheme()
-  const ref = useRef<HTMLCanvasElement>()
+  const ref = useRef<HTMLCanvasElement>(null)
   const clickMap = useRef(new RBush<ClickEntry>())
   const mouseoverRef = useRef<HTMLCanvasElement>(null)
   const [branchMenu, setBranchMenu] = useState<TooltipData>()
@@ -66,6 +66,13 @@ const TreeCanvasBlock = observer(function ({
     }
 
     return autorun(() => {
+      ctx.resetTransform()
+      ctx.clearRect(
+        0,
+        0,
+        (treeAreaWidth + padding) * highResScaleFactor,
+        blockSize * highResScaleFactor,
+      )
       renderTreeCanvas({
         ctx,
         model,
@@ -74,7 +81,7 @@ const TreeCanvasBlock = observer(function ({
         theme,
       })
     })
-  }, [model, offsetY, theme])
+  }, [model, blockSize, highResScaleFactor, treeAreaWidth, offsetY, theme])
 
   useEffect(() => {
     const ctx = mouseoverRef.current?.getContext('2d')

package/src/components/tree/TreeNodeMenu.tsx

@@ -1,8 +1,8 @@
 import React, { lazy } from 'react'
+
 import { Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 
-// locals
 import type { MsaViewModel } from '../../model'
 
 // lazies

package/src/components/tree/TreePanel.tsx

@@ -1,9 +1,11 @@
 import React from 'react'
+
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
 import TreeCanvas from './TreeCanvas'
 
+import type { MsaViewModel } from '../../model'
+
 const TreePanel = observer(function ({ model }: { model: MsaViewModel }) {
   const { treeAreaWidth } = model
   return (

package/src/components/tree/TreeRuler.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
+
 import { observer } from 'mobx-react'
 
-// locals
 import type { MsaViewModel } from '../../model'
 
 const TreeRuler = observer(({ model }: { model: MsaViewModel }) => {

package/src/components/tree/dialogs/TreeNodeInfoDialog.tsx

@@ -1,14 +1,15 @@
 import React from 'react'
+
+import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes'
+import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard'
 import { Dialog } from '@jbrowse/core/ui'
 import { DialogContent } from '@mui/material'
 import { observer } from 'mobx-react'
-import Attributes from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/Attributes'
-import BaseCard from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail/BaseCard'
 
-// locals
-import type { MsaViewModel } from '../../../model'
 import SequenceTextArea from '../../SequenceTextArea'
 
+import type { MsaViewModel } from '../../../model'
+
 const TreeNodeInfoDialog = observer(function ({
   info,
   model,

package/src/components/tree/renderTreeCanvas.ts

@@ -1,8 +1,6 @@
-import type RBush from 'rbush'
-import type { Theme } from '@mui/material'
-
-// locals
 import type { MsaViewModel } from '../../model'
+import type { Theme } from '@mui/material'
+import type RBush from 'rbush'
 
 export const padding = 600
 
@@ -241,9 +239,7 @@ export function renderTreeCanvas({
     noTree,
     drawTree,
     drawNodeBubbles,
-    treeWidth,
     highResScaleFactor,
-    blockSize,
     fontSize,
     showTreeText,
     marginLeft,
@@ -251,21 +247,19 @@ export function renderTreeCanvas({
     // eslint-disable-next-line  @typescript-eslint/no-unused-vars
     rowHeight: _rowHeight, // this is needed for redrawing after zoom change
   } = model
-  const by = blockSizeYOverride || blockSize
 
   ctx.resetTransform()
 
-  // this is a bogus use of nref, it is never less than 0. we just are using it
-  // in this statement because otherwise it would be an unused variable, we
-  // just need to use nref to indicate a redraw in an autorun when canvas ref
-  // is updated and in order to convince bundlers like not to delete unused
-  // usage with propertyReadSideEffects
+  // this is a bogus use of nref, it is never less than 0. we just are using
+  // it in this statement because otherwise it would be an unused variable,
+  // we just need to use nref to indicate a redraw in an autorun when canvas
+  // ref is updated and in order to convince bundlers like not to delete
+  // unused usage with propertyReadSideEffects
   const k =
     nref < 0
       ? Number.NEGATIVE_INFINITY
       : highResScaleFactorOverride || highResScaleFactor
   ctx.scale(k, k)
-  ctx.clearRect(0, 0, treeWidth + padding, by)
   ctx.translate(marginLeft, -offsetY)
 
   const font = ctx.font

package/src/index.ts

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

package/src/launchInterProScan.ts

@@ -1,5 +1,7 @@
 import { getSession } from '@jbrowse/core/util'
+
 import { jsonfetch, textfetch, timeout } from './fetchUtils'
+
 import type { MsaViewModel } from './model'
 
 const base = 'https://www.ebi.ac.uk/Tools/services/rest'

package/src/model/DialogQueue.ts

@@ -1,6 +1,7 @@
-import type { DialogComponentType } from '@jbrowse/core/util'
 import { types } from 'mobx-state-tree'
 
+import type { DialogComponentType } from '@jbrowse/core/util'
+
 /**
  * #stateModel DialogQueueSessionMixin
  */