react-msaview 4.0.3 → 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,

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

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
 
@@ -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.ts

@@ -1,64 +1,53 @@
 import React from 'react'
-import type { Buffer } from 'buffer'
-import { autorun, transaction } from 'mobx'
-import { type Instance, cast, types, addDisposer } from 'mobx-state-tree'
-import { hierarchy, cluster, type HierarchyNode } from 'd3-hierarchy'
+
+import { groupBy, notEmpty, sum } from '@jbrowse/core/util'
+import { openLocation } from '@jbrowse/core/util/io'
+import { ElementId, FileLocation } from '@jbrowse/core/util/types/mst'
+import { colord } from 'colord'
 import { ascending } from 'd3-array'
-import Stockholm from 'stockholm-js'
+import { cluster, hierarchy } from 'd3-hierarchy'
 import { saveAs } from 'file-saver'
-import type { Theme } from '@mui/material'
+import { autorun, transaction } from 'mobx'
+import { addDisposer, cast, types } from 'mobx-state-tree'
 import { ungzip } from 'pako'
+import Stockholm from 'stockholm-js'
 
-// jbrowse
-import { FileLocation, ElementId } from '@jbrowse/core/util/types/mst'
-import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
-import { openLocation } from '@jbrowse/core/util/io'
-import { groupBy, notEmpty, sum } from '@jbrowse/core/util'
-
-export function isGzip(buf: Buffer) {
-  return buf[0] === 31 && buf[1] === 139 && buf[2] === 8
-}
-
-// locals
+import { blocksX, blocksY } from './calculateBlocks'
+import colorSchemes from './colorSchemes'
+import TextTrack from './components/TextTrack'
+import palettes from './ggplotPalettes'
+import { measureTextCanvas } from './measureTextCanvas'
+import { DataModelF } from './model/DataModel'
+import { DialogQueueSessionMixin } from './model/DialogQueue'
+import { MSAModelF } from './model/msaModel'
+import { TreeModelF } from './model/treeModel'
+import parseNewick from './parseNewick'
+import ClustalMSA from './parsers/ClustalMSA'
+import EmfMSA from './parsers/EmfMSA'
+import EmfTree from './parsers/EmfTree'
+import FastaMSA from './parsers/FastaMSA'
+import StockholmMSA from './parsers/StockholmMSA'
+import { reparseTree } from './reparseTree'
+import {
+  globalCoordToRowSpecificCoord,
+  mouseOverCoordToGlobalCoord,
+} from './rowCoordinateCalculations'
 import {
   clamp,
   collapse,
   generateNodeIds,
+  len,
   maxLength,
   setBrLength,
   skipBlanks,
-  type NodeWithIds,
-  type NodeWithIdsAndLength,
-  len,
 } from './util'
-import { colord } from 'colord'
-import { reparseTree } from './reparseTree'
-import { blocksX, blocksY } from './calculateBlocks'
-import { measureTextCanvas } from './measureTextCanvas'
-import palettes from './ggplotPalettes'
 
-// components
-import TextTrack from './components/TextTrack'
-
-// parsers
-import ClustalMSA from './parsers/ClustalMSA'
-import EmfMSA from './parsers/EmfMSA'
-import StockholmMSA from './parsers/StockholmMSA'
-import FastaMSA from './parsers/FastaMSA'
-import parseNewick from './parseNewick'
-import colorSchemes from './colorSchemes'
-
-// models
-import { DataModelF } from './model/DataModel'
-import { DialogQueueSessionMixin } from './model/DialogQueue'
-import { TreeModelF } from './model/treeModel'
-import { MSAModelF } from './model/msaModel'
 import type { InterProScanResults } from './launchInterProScan'
-import {
-  mouseOverCoordToGlobalCoord,
-  globalCoordToRowSpecificCoord,
-} from './rowCoordinateCalculations'
-import EmfTree from './parsers/EmfTree'
+import type { NodeWithIds, NodeWithIdsAndLength } from './util'
+import type { FileLocation as FileLocationType } from '@jbrowse/core/util/types'
+import type { Theme } from '@mui/material'
+import type { HierarchyNode } from 'd3-hierarchy'
+import type { Instance } from 'mobx-state-tree'
 
 export interface Accession {
   accession: string
@@ -84,6 +73,10 @@ export interface ITextTrack {
 
 export type BasicTrack = ITextTrack
 
+export function isGzip(buf: Uint8Array) {
+  return buf[0] === 31 && buf[1] === 139 && buf[2] === 8
+}
+
 /**
  * #stateModel MsaView
  * extends
@@ -758,6 +751,12 @@ function stateModelFactory() {
           .map(leaf => [leaf.data.name, MSA?.getRow(leaf.data.name)] as const)
           .filter((f): f is [string, string] => !!f[1])
       },
+      /**
+       * #getter
+       */
+      get numRows() {
+        return this.rows.length
+      },
 
       /**
        * #getter
@@ -917,7 +916,11 @@ function stateModelFactory() {
        * #getter
        */
       get showMsaLetters() {
-        return self.drawMsaLetters && self.rowHeight >= 5
+        return (
+          self.drawMsaLetters &&
+          self.rowHeight >= 5 &&
+          self.colWidth > self.rowHeight / 2
+        )
       },
       /**
        * #getter
@@ -1356,6 +1359,15 @@ function stateModelFactory() {
       setFilter(arg: string, flag: boolean) {
         self.featureFilters.set(arg, flag)
       },
+      /**
+       * #action
+       */
+      showEntire() {
+        self.rowHeight = self.msaAreaHeight / self.numRows
+        self.colWidth = self.msaAreaWidth / self.numColumns
+        self.scrollX = 0
+        self.scrollY = 0
+      },
 
       afterCreate() {
         addDisposer(

package/src/parsers/ClustalMSA.ts

@@ -1,4 +1,5 @@
 import { parse } from 'clustal-js'
+
 import type { NodeWithIds } from '../util'
 export default class ClustalMSA {
   private MSA: ReturnType<typeof parse>

package/src/parsers/EmfMSA.ts

@@ -1,4 +1,5 @@
 import { parseEmfAln } from 'emf-js'
+
 import type { NodeWithIds } from '../util'
 
 export default class EmfMSA {

package/src/parsers/StockholmMSA.ts

@@ -1,6 +1,6 @@
 import Stockholm from 'stockholm-js'
-import parseNewick from '../parseNewick'
 
+import parseNewick from '../parseNewick'
 import { type NodeWithIds, generateNodeIds } from '../util'
 interface StockholmEntry {
   gf: {

package/src/renderToSvg.tsx

@@ -1,18 +1,17 @@
 /* eslint-disable react-refresh/only-export-components */
 import React from 'react'
-import { createRoot } from 'react-dom/client'
-import { when } from 'mobx'
+
 import { renderToStaticMarkup } from '@jbrowse/core/util'
-import type { Theme } from '@mui/material'
+import { when } from 'mobx'
 
-// locals
-import type { MsaViewModel } from './model'
-import { renderTreeCanvas } from './components/tree/renderTreeCanvas'
+import MinimapSVG from './components/minimap/MinimapSVG'
+import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock'
 import { renderMSABlock } from './components/msa/renderMSABlock'
+import { renderTreeCanvas } from './components/tree/renderTreeCanvas'
 import { colorContrast } from './util'
 
-import MinimapSVG from './components/minimap/MinimapSVG'
-import { renderBoxFeatureCanvasBlock } from './components/msa/renderBoxFeatureCanvasBlock'
+import type { MsaViewModel } from './model'
+import type { Theme } from '@mui/material'
 
 export async function renderToSvg(
   model: MsaViewModel,
@@ -81,7 +80,6 @@ async function render({
         />
       </Wrapper>
     </SvgWrapper>,
-    createRoot,
   )
 }
 

package/src/rowCoordinateCalculations.test.ts

@@ -1,4 +1,5 @@
 import { expect, test } from 'vitest'
+
 import { mouseOverCoordToGlobalCoord } from './rowCoordinateCalculations'
 test('blanks3', () => {
   const blanks = [2, 5, 8]

package/src/util.ts

@@ -1,8 +1,9 @@
-import type { HierarchyNode } from 'd3-hierarchy'
-import { max } from 'd3-array'
-import type { Theme } from '@mui/material'
 import { colord, extend } from 'colord'
 import namesPlugin from 'colord/plugins/names'
+import { max } from 'd3-array'
+
+import type { Theme } from '@mui/material'
+import type { HierarchyNode } from 'd3-hierarchy'
 
 extend([namesPlugin])
 

package/src/version.ts

@@ -1 +1 @@
-export const version = '4.0.3'
+export const version = '4.1.0'