react-msaview 4.0.2 → 4.1.0

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,

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,
@@ -98,8 +97,6 @@ function drawTiles({
     bgColor,
     colorSchemeName,
     colorScheme,
-    colStats,
-    colStatsSums,
     columns,
     colWidth,
     rowHeight,
@@ -117,16 +114,20 @@ function drawTiles({
         const color =
           colorSchemeName === 'clustalx_protein_dynamic'
             ? getClustalXColor(
-                colStats[xStart + i]!,
-                colStatsSums[xStart + i]!,
+                // use model.colStats dot notation here: delay use of colStats
+                // until absolutely needed
+                model.colStats[xStart + i]!,
+                model.colStatsSums[xStart + i]!,
                 model,
                 name,
                 xStart + i,
               )
             : colorSchemeName === 'percent_identity_dynamic'
               ? getPercentIdentityColor(
-                  colStats[xStart + i]!,
-                  colStatsSums[xStart + i]!,
+                  // use model.colStats dot notation here: delay use of
+                  // colStats until absolutely needed
+                  model.colStats[xStart + i]!,
+                  model.colStatsSums[xStart + i]!,
                   model,
                   name,
                   xStart + i,

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>()

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
@@ -76,6 +76,15 @@ const TreeMenu = observer(function ({
           ? 'Show node'
           : 'Hide node'}
       </MenuItem>
+      <MenuItem
+        dense
+        onClick={() => {
+          model.drawRelativeTo(node.id)
+          onClose()
+        }}
+      >
+        Indicate differences from this row
+      </MenuItem>
     </Menu>
   )
 })

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,16 +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,
-  BaseCard,
-} from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 
-// 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
 
@@ -255,11 +253,11 @@ export function renderTreeCanvas({
 
   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

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
  */

package/src/model/treeModel.ts

@@ -5,7 +5,7 @@ import { types } from 'mobx-state-tree'
  */
 function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
-export function TreeF() {
+export function TreeModelF() {
   return types
     .model({
       /**