react-msaview 4.0.2 → 4.1.0

package/src/components/Track.tsx

@@ -1,13 +1,13 @@
-import React, { useState, useRef, useEffect, lazy } from 'react'
-import normalizeWheel from 'normalize-wheel'
-import { observer } from 'mobx-react'
+import React, { lazy, useEffect, useRef, useState } from 'react'
+
+import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 import { IconButton, Menu, MenuItem } from '@mui/material'
+import { observer } from 'mobx-react'
+import normalizeWheel from 'normalize-wheel'
 import { makeStyles } from 'tss-react/mui'
 
 // icons
-import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 
-// locals
 import type { MsaViewModel } from '../model'
 
 // lazies

package/src/components/VerticalScrollbar.tsx

@@ -1,8 +1,11 @@
-import { observer } from 'mobx-react'
 import React, { useEffect, useRef, useState } from 'react'
-import type { MsaViewModel } from '../model'
+
+import { observer } from 'mobx-react'
+
 import { clamp } from '../util'
 
+import type { MsaViewModel } from '../model'
+
 const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
   const { msaAreaHeight, scrollY, totalHeight } = model
   const [hovered, setHovered] = useState(false)

package/src/components/dialogs/AboutDialog.tsx

@@ -1,24 +1,23 @@
 import React from 'react'
+
 import { Dialog } from '@jbrowse/core/ui'
-import { DialogContent, Typography, Link } from '@mui/material'
+import { DialogContent, Link, Typography } from '@mui/material'
+
 import { version } from '../../version'
 
 export default function AboutDialog({ onClose }: { onClose: () => void }) {
   return (
     <Dialog
+      open
+      title="About"
       onClose={() => {
         onClose()
       }}
-      open
-      title="About this plugin"
     >
       <DialogContent>
         <Typography>
           MSAView {version} (
-          <Link href="https://github.com/gmod/jbrowse-plugin-msaview">
-            Github
-          </Link>
-          )
+          <Link href="https://github.com/gmod/react-msaview">Github</Link>)
         </Typography>
 
         <ul>

package/src/components/dialogs/AddTrackDialog.tsx

@@ -1,16 +1,18 @@
 import React, { useState } from 'react'
+
+import { Dialog, FileSelector } from '@jbrowse/core/ui'
 import {
-  DialogContent,
-  DialogActions,
   Button,
-  TextField,
+  DialogActions,
+  DialogContent,
   MenuItem,
+  TextField,
   Typography,
 } from '@mui/material'
-import { Dialog, FileSelector } from '@jbrowse/core/ui'
-import type { FileLocation } from '@jbrowse/core/util/types'
 import { observer } from 'mobx-react'
+
 import type { MsaViewModel } from '../../model'
+import type { FileLocation } from '@jbrowse/core/util/types'
 
 const AddTrackDialog = observer(function ({
   model,

package/src/components/dialogs/DomainDialog.tsx

@@ -1,11 +1,12 @@
 import React, { useState } from 'react'
+
 import { Dialog } from '@jbrowse/core/ui'
 import { Tab, Tabs } from '@mui/material'
 
-// locals
 import InterProScanPanel from './InterProScanDialog'
-import UserProvidedResultPanel from './UserProvidedDomainsDialog'
 import TabPanel from './TabPanel'
+import UserProvidedResultPanel from './UserProvidedDomainsDialog'
+
 import type { MsaViewModel } from '../../model'
 
 export default function LaunchDomainViewDialog({

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -1,21 +1,23 @@
 import React, { useState } from 'react'
+
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
 import {
   Button,
-  DialogContent,
   DialogActions,
-  FormControlLabel,
+  DialogContent,
   FormControl,
+  FormControlLabel,
   FormLabel,
-  RadioGroup,
   Radio,
+  RadioGroup,
   Typography,
   useTheme,
 } from '@mui/material'
-// locals
-import type { MsaViewModel } from '../../model'
+
 import Checkbox2 from '../Checkbox2'
 
+import type { MsaViewModel } from '../../model'
+
 export default function ExportSVGDialog({
   model,
   onClose,

package/src/components/dialogs/FeatureDialog.tsx

@@ -1,12 +1,13 @@
 import React from 'react'
-import { observer } from 'mobx-react'
+
 import { Dialog } from '@jbrowse/core/ui'
 import { Button, DialogContent } from '@mui/material'
+import { observer } from 'mobx-react'
 
-// locals
-import type { MsaViewModel } from '../../model'
 import { getPalette } from '../../ggplotPalettes'
 
+import type { MsaViewModel } from '../../model'
+
 const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
   const { featureFilters } = model
   return (

package/src/components/dialogs/InterProScanDialog.tsx

@@ -1,12 +1,13 @@
 import React, { useState } from 'react'
-import { observer } from 'mobx-react'
-import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
 
-// locals
-import type { MsaViewModel } from '../../model'
+import { Dialog } from '@jbrowse/core/ui'
 import { getSession } from '@jbrowse/core/util'
+import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
 import { launchInterProScan } from '../../launchInterProScan'
-import { Dialog } from '@jbrowse/core/ui'
+
+import type { MsaViewModel } from '../../model'
 
 const InterProScanDialog = observer(function ({
   handleClose,

package/src/components/dialogs/MetadataDialog.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 { Dialog } from '@jbrowse/core/ui'
-import {
-  Attributes,
-  BaseCard,
-} from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 
-// locals
-import type { MsaViewModel } from '../../model'
 import SequenceTextArea from '../SequenceTextArea'
 
+import type { MsaViewModel } from '../../model'
+
 const MetadataDialog = observer(function ({
   model,
   onClose,

package/src/components/dialogs/SettingsDialog.tsx

@@ -1,6 +1,5 @@
 import React from 'react'
-import { observer } from 'mobx-react'
-import { makeStyles } from 'tss-react/mui'
+
 import { Dialog } from '@jbrowse/core/ui'
 import {
   Button,
@@ -11,11 +10,14 @@ import {
   TextField,
   Typography,
 } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
 
-import type { MsaViewModel } from '../../model'
 import colorSchemes from '../../colorSchemes'
 import Checkbox2 from '../Checkbox2'
 
+import type { MsaViewModel } from '../../model'
+
 const useStyles = makeStyles()(theme => ({
   field: {
     margin: theme.spacing(4),
@@ -59,50 +61,50 @@ const TreeSettings = observer(function TreeSettings({
       <h1>Tree options</h1>
       <Checkbox2
         checked={showBranchLen}
+        label="Show branch length?"
         onChange={() => {
           model.setShowBranchLen(!showBranchLen)
         }}
-        label="Show branch length?"
       />
 
       <Checkbox2
         checked={drawNodeBubbles}
+        label="Draw clickable bubbles on tree branches?"
         onChange={() => {
           model.setDrawNodeBubbles(!drawNodeBubbles)
         }}
-        label="Draw clickable bubbles on tree branches?"
       />
       <Checkbox2
         checked={drawTree}
+        label="Show tree?"
         onChange={() => {
           model.setDrawTree(!drawTree)
         }}
-        label="Show tree?"
       />
 
       <Checkbox2
         checked={labelsAlignRight}
+        label="Tree labels align right?"
         onChange={() => {
           model.setLabelsAlignRight(!labelsAlignRight)
         }}
-        label="Tree labels align right?"
       />
 
       <Checkbox2
         checked={drawLabels}
+        label="Draw labels"
         onChange={() => {
           model.setDrawLabels(!drawLabels)
         }}
-        label="Draw labels"
       />
       {noTree ? null : (
         <div>
           <Checkbox2
             checked={treeWidthMatchesArea}
+            label="Make tree width fit to tree area?"
             onChange={() => {
               model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
             }}
-            label="Make tree width fit to tree area?"
           />
           {treeWidthMatchesArea ? null : (
             <div className={classes.flex}>
@@ -113,7 +115,7 @@ const TreeSettings = observer(function TreeSettings({
                 max={600}
                 value={treeWidth}
                 onChange={(_, val) => {
-                  model.setTreeWidth(val as number)
+                  model.setTreeWidth(val)
                 }}
               />
             </div>
@@ -146,42 +148,42 @@ const MSASettings = observer(function MSASettings({
       <h1>MSA options</h1>
       <Checkbox2
         checked={drawMsaLetters}
+        label="Draw letters"
         onChange={() => {
           model.setDrawMsaLetters(!drawMsaLetters)
         }}
-        label="Draw letters"
       />
       <Checkbox2
         checked={bgColor}
+        label="Color background tiles of MSA?"
         onChange={() => {
           model.setBgColor(!bgColor)
         }}
-        label="Color background tiles of MSA?"
       />
       <Checkbox2
         checked={contrastLettering}
+        label="Use contrast lettering"
         onChange={() => {
           model.setContrastLettering(!contrastLettering)
         }}
-        label="Use contrast lettering"
       />
       <Checkbox2
         checked={hideGaps}
+        label="Enable hiding gappy columns?"
         onChange={() => {
           model.setHideGaps(!hideGaps)
         }}
-        label={`Hide columns that are ${allowedGappyness}% gaps`}
       />
       {hideGaps ? (
         <div className={classes.flex}>
-          <Typography>Allowed gappyness ({100 - allowedGappyness}%)</Typography>
+          <Typography>Hide columns w/ &gt;{allowedGappyness}% gaps</Typography>
           <Slider
             className={classes.field}
             min={1}
             max={100}
             value={allowedGappyness}
             onChange={(_, val) => {
-              model.setAllowedGappyness(val as number)
+              model.setAllowedGappyness(val)
             }}
           />
         </div>
@@ -194,7 +196,7 @@ const MSASettings = observer(function MSASettings({
           max={50}
           value={colWidth}
           onChange={(_, val) => {
-            model.setColWidth(val as number)
+            model.setColWidth(val)
           }}
         />
       </div>
@@ -206,7 +208,7 @@ const MSASettings = observer(function MSASettings({
           max={50}
           value={rowHeight}
           onChange={(_, val) => {
-            model.setRowHeight(val as number)
+            model.setRowHeight(val)
           }}
         />
       </div>
@@ -240,21 +242,21 @@ const SettingsDialog = observer(function ({
   return (
     <Dialog
       open
+      title="Settings"
+      maxWidth="xl"
       onClose={() => {
         onClose()
       }}
-      title="Settings"
-      maxWidth="xl"
     >
       <DialogContent className={classes.minw}>
         <SettingsContent model={model} />
         <DialogActions>
           <Button
+            variant="contained"
+            color="primary"
             onClick={() => {
               onClose()
             }}
-            variant="contained"
-            color="primary"
           >
             Submit
           </Button>

package/src/components/dialogs/TrackInfoDialog.tsx

@@ -1,8 +1,9 @@
 import React, { useState } from 'react'
-import copy from 'copy-to-clipboard'
-import { observer } from 'mobx-react'
+
 import { Dialog } from '@jbrowse/core/ui'
 import { Button, DialogActions, DialogContent } from '@mui/material'
+import copy from 'copy-to-clipboard'
+import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 const useStyles = makeStyles()(theme => ({

package/src/components/dialogs/TracklistDialog.tsx

@@ -1,17 +1,17 @@
 import React from 'react'
+
 import { Dialog } from '@jbrowse/core/ui'
 import {
+  Button,
+  Checkbox,
+  DialogActions,
   DialogContent,
   FormControlLabel,
   FormGroup,
-  Checkbox,
-  DialogActions,
-  Button,
   Typography,
 } from '@mui/material'
 import { observer } from 'mobx-react'
 
-// locals
 import type { MsaViewModel } from '../../model'
 
 const TracklistDialog = observer(function ({

package/src/components/dialogs/UserProvidedDomainsDialog.tsx

@@ -1,23 +1,24 @@
 import React, { useState } from 'react'
-import { observer } from 'mobx-react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import { getSession } from '@jbrowse/core/util'
 import {
   Button,
   DialogActions,
   DialogContent,
-  FormControlLabel,
   FormControl,
+  FormControlLabel,
   Radio,
   RadioGroup,
   TextField,
   Typography,
 } from '@mui/material'
-import { getSession } from '@jbrowse/core/util'
-import { Dialog } from '@jbrowse/core/ui'
+import { observer } from 'mobx-react'
 
-// locals
-import type { MsaViewModel } from '../../model'
 import { jsonfetch } from '../../fetchUtils'
+
 import type { InterProScanResponse } from '../../launchInterProScan'
+import type { MsaViewModel } from '../../model'
 
 const UserProvidedDomainsDialog = observer(function ({
   handleClose,

package/src/components/header/Header.tsx

@@ -1,20 +1,17 @@
 import React, { lazy, useEffect } from 'react'
-import { IconButton } from '@mui/material'
-import { observer } from 'mobx-react'
-import useMeasure from '@jbrowse/core/util/useMeasure'
-
-// locals
-import type { MsaViewModel } from '../../model'
 
-// icons
+import useMeasure from '@jbrowse/core/util/useMeasure'
 import Help from '@mui/icons-material/Help'
+import { IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
 
-// locals
-import ZoomControls from './ZoomControls'
-import MultiAlignmentSelector from './MultiAlignmentSelector'
 import HeaderInfoArea from './HeaderInfoArea'
-import HeaderStatusArea from './HeaderStatusArea'
 import HeaderMenuExtra from './HeaderMenuExtra'
+import HeaderStatusArea from './HeaderStatusArea'
+import MultiAlignmentSelector from './MultiAlignmentSelector'
+import ZoomControls from './ZoomControls'
+
+import type { MsaViewModel } from '../../model'
 
 const AboutDialog = lazy(() => import('../dialogs/AboutDialog'))
 

package/src/components/header/HeaderInfoArea.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
+
 import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-// locals
 import type { MsaViewModel } from '../../model'
 
 const useStyles = makeStyles()({

package/src/components/header/HeaderMenu.tsx

@@ -1,15 +1,13 @@
 import React, { lazy } from 'react'
-import { observer } from 'mobx-react'
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
-// icons
-import FolderOpen from '@mui/icons-material/FolderOpen'
-import Settings from '@mui/icons-material/Settings'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 import Assignment from '@mui/icons-material/Assignment'
+import FolderOpen from '@mui/icons-material/FolderOpen'
 import List from '@mui/icons-material/List'
 import Menu from '@mui/icons-material/Menu'
+import Settings from '@mui/icons-material/Settings'
+import { observer } from 'mobx-react'
 
-// locals
 import type { MsaViewModel } from '../../model'
 
 // lazies

package/src/components/header/HeaderMenuExtra.tsx

@@ -1,20 +1,18 @@
 import React, { lazy } from 'react'
-import { observer } from 'mobx-react'
-import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
-// icons
-import MoreVert from '@mui/icons-material/Menu'
-import Sort from '@mui/icons-material/Sort'
-import Visibility from '@mui/icons-material/Visibility'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
+import Assignment from '@mui/icons-material/Assignment'
 import FilterAlt from '@mui/icons-material/FilterAlt'
-import Search from '@mui/icons-material/Search'
+import FolderOpen from '@mui/icons-material/FolderOpen'
+import List from '@mui/icons-material/List'
+import MoreVert from '@mui/icons-material/Menu'
 import PhotoCamera from '@mui/icons-material/PhotoCamera'
+import Search from '@mui/icons-material/Search'
 import Settings from '@mui/icons-material/Settings'
-import Assignment from '@mui/icons-material/Assignment'
-import List from '@mui/icons-material/List'
-import FolderOpen from '@mui/icons-material/FolderOpen'
+import Sort from '@mui/icons-material/Sort'
+import Visibility from '@mui/icons-material/Visibility'
+import { observer } from 'mobx-react'
 
-// locals
 import type { MsaViewModel } from '../../model'
 
 // lazies

package/src/components/header/HeaderStatusArea.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
+
+import { LoadingEllipses } from '@jbrowse/core/ui'
 import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
-import { LoadingEllipses } from '@jbrowse/core/ui'
 
-// locals
 import type { MsaViewModel } from '../../model'
 
 const useStyles = makeStyles()({

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

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,