react-msaview 3.1.11 → 3.2.0

package/src/components/header/HeaderMenuExtra.tsx

@@ -2,37 +2,61 @@ import React, { lazy } from 'react'
 import { observer } from 'mobx-react'
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
-// locals
-import { MsaViewModel } from '../../model'
-
 // icons
-import MoreVert from '@mui/icons-material/MoreVert'
+import MoreVert from '@mui/icons-material/Menu'
 import Sort from '@mui/icons-material/Sort'
 import Visibility from '@mui/icons-material/Visibility'
 import FilterAlt from '@mui/icons-material/FilterAlt'
 import Search from '@mui/icons-material/Search'
 import PhotoCamera from '@mui/icons-material/PhotoCamera'
-import RestartAlt from '@mui/icons-material/RestartAlt'
+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'
+
+// locals
+import type { MsaViewModel } from '../../model'
 
 // lazies
+const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
+const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog'))
+const TracklistDialog = lazy(() => import('../dialogs/TracklistDialog'))
 const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog'))
 const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog'))
+const UserProvidedDomainsDialog = lazy(
+  () => import('../dialogs/UserProvidedDomainsDialog'),
+)
 const InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog'))
 
-const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
-  const { featureMode, subFeatureRows, noAnnotations, interProScanJobIds } =
-    model
+const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
+  const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
   return (
     <CascadingMenuButton
       menuItems={[
         {
-          label: 'Reset zoom to default',
-          icon: RestartAlt,
-          onClick: () => {
-            model.setColWidth(16)
-            model.setRowHeight(20)
-          },
+          label: 'Return to import form',
+          icon: FolderOpen,
+          onClick: () => model.reset(),
+        },
+        {
+          label: 'Settings',
+          onClick: () =>
+            model.queueDialog(onClose => [SettingsDialog, { model, onClose }]),
+          icon: Settings,
+        },
+        {
+          label: 'Metadata',
+          onClick: () =>
+            model.queueDialog(onClose => [MetadataDialog, { model, onClose }]),
+          icon: Assignment,
         },
+        {
+          label: 'Extra tracks',
+          onClick: () =>
+            model.queueDialog(onClose => [TracklistDialog, { model, onClose }]),
+          icon: List,
+        },
+
         {
           label: 'Export SVG',
           icon: PhotoCamera,
@@ -44,23 +68,43 @@ const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
           type: 'subMenu',
           subMenu: [
             {
-              label:
-                'Show domains' + (noAnnotations ? ' (no domains loaded)' : ''),
+              label: 'Open domains...',
+              icon: FolderOpen,
+              onClick: () =>
+                model.queueDialog(handleClose => [
+                  UserProvidedDomainsDialog,
+                  { handleClose, model },
+                ]),
+            },
+            {
+              label: 'Query InterProScan for domains...',
+              icon: Search,
+              onClick: () =>
+                model.queueDialog(handleClose => [
+                  InterProScanDialog,
+                  { handleClose, model },
+                ]),
+            },
+            {
+              label: `Show domains${noDomains ? ' (no domains loaded)' : ''}`,
+              disabled: noDomains,
               icon: Visibility,
-              checked: featureMode,
+              checked: actuallyShowDomains ? showDomains : false,
               type: 'checkbox',
-              onClick: () => model.setFeatureMode(!featureMode),
+              onClick: () => model.setShowDomains(!showDomains),
             },
             {
-              label: 'Use sub-row layout',
-              checked: subFeatureRows,
+              label: `Use sub-row layout${noDomains ? ' (no domains loaded)' : ''}`,
+              disabled: noDomains,
+              checked: actuallyShowDomains ? subFeatureRows : false,
               icon: Sort,
               type: 'checkbox',
               onClick: () => model.setSubFeatureRows(!subFeatureRows),
             },
             {
-              label: 'Filter domains',
+              label: `Filter domains${noDomains ? ' (no domains loaded)' : ''}`,
               icon: FilterAlt,
+              disabled: noDomains,
               onClick: () => {
                 model.queueDialog(onClose => [
                   FeatureFilterDialog,
@@ -68,33 +112,6 @@ const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
                 ])
               },
             },
-            {
-              label: 'Query InterProScan for domains...',
-              icon: Search,
-              onClick: () =>
-                model.queueDialog(onClose => [
-                  InterProScanDialog,
-                  { onClose, model },
-                ]),
-            },
-            {
-              label: 'Load previous InterProScan results...',
-              icon: Search,
-              type: 'subMenu',
-              subMenu: interProScanJobIds.length
-                ? interProScanJobIds.map(({ jobId, date }) => ({
-                    label:
-                      new Date(date).toLocaleString('en-US') + ' - ' + jobId,
-                    onClick: () => model.loadInterProScanResults(jobId),
-                  }))
-                : [
-                    {
-                      label: 'No previous searches',
-                      disabled: true,
-                      onClick: () => {},
-                    },
-                  ],
-            },
           ],
         },
         ...(model.extraViewMenuItems?.() || []),

package/src/components/header/HeaderStatusArea.tsx

@@ -2,9 +2,10 @@ import React from 'react'
 import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
+import { LoadingEllipses } from '@jbrowse/core/ui'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 const useStyles = makeStyles()({
   margin: {
@@ -18,7 +19,7 @@ const HeaderStatusArea = observer(({ model }: { model: MsaViewModel }) => {
   const { classes } = useStyles()
   return status ? (
     <Typography className={classes.margin}>
-      {status.msg}{' '}
+      <LoadingEllipses message={status.msg} component="span" />{' '}
       {status.url ? (
         <a href={status.url} target="_blank" rel="noreferrer">
           (status)

package/src/components/header/MultiAlignmentSelector.tsx

@@ -3,7 +3,7 @@ import { observer } from 'mobx-react'
 import { Select } from '@mui/material'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 const MultiAlignmentSelector = observer(function ({
   model,

package/src/components/header/ZoomControls.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
+import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
 // locals
 import { MsaViewModel } from '../../model'
@@ -8,6 +9,8 @@ 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,
@@ -22,6 +25,37 @@ const ZoomControls = observer(function ZoomControls({
       <IconButton onClick={() => model.zoomOut()}>
         <ZoomOut />
       </IconButton>
+      <CascadingMenuButton
+        menuItems={[
+          {
+            label: 'Zoom in horizontal',
+            onClick: () => model.zoomInHorizontal(),
+          },
+          {
+            label: 'Zoom in vertical',
+            onClick: () => model.zoomInVertical(),
+          },
+          {
+            label: 'Zoom out horizontal',
+            onClick: () => model.zoomOutHorizontal(),
+          },
+
+          {
+            label: 'Zoom out vertical',
+            onClick: () => model.zoomOutVertical(),
+          },
+          {
+            label: 'Reset zoom to default',
+            icon: RestartAlt,
+            onClick: () => {
+              model.setColWidth(16)
+              model.setRowHeight(20)
+            },
+          },
+        ]}
+      >
+        <MoreVert />
+      </CascadingMenuButton>
     </>
   )
 })

package/src/components/import/ImportForm.tsx

@@ -2,14 +2,14 @@ import React, { useState } from 'react'
 import { observer } from 'mobx-react'
 import { Button, Container, Grid, Typography } from '@mui/material'
 import { FileSelector } from '@jbrowse/core/ui'
-import { FileLocation } from '@jbrowse/core/util/types'
+import type { FileLocation } from '@jbrowse/core/util/types'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import { load } from './util'
 import ImportFormExamples from './ImportFormExamples'
 
-export default observer(({ model }: { model: MsaViewModel }) => {
+export default observer(function ({ model }: { model: MsaViewModel }) {
   const [msaFile, setMsaFile] = useState<FileLocation>()
   const [treeFile, setTreeFile] = useState<FileLocation>()
   const { error } = model

package/src/components/import/ImportFormExamples.tsx

@@ -3,11 +3,11 @@ import { Typography, Link } from '@mui/material'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import { smallTree, smallMSA, smallMSAOnly } from './data/seq2'
 import { load } from './util'
 
-const ListItem = ({
+function ListItem({
   onClick,
   model,
   children,
@@ -15,20 +15,22 @@ const ListItem = ({
   onClick: () => void
   model: MsaViewModel
   children: React.ReactNode
-}) => (
-  <li>
-    <Link
-      onClick={event => {
-        model.setError(undefined)
-        event.preventDefault()
-        onClick()
-      }}
-      href="#"
-    >
-      <Typography display="inline">{children}</Typography>
-    </Link>
-  </li>
-)
+}) {
+  return (
+    <li>
+      <Link
+        onClick={event => {
+          model.setError(undefined)
+          event.preventDefault()
+          onClick()
+        }}
+        href="#"
+      >
+        <Typography display="inline">{children}</Typography>
+      </Link>
+    </li>
+  )
+}
 
 const ImportFormExamples = observer(function ({
   model,
@@ -41,7 +43,7 @@ const ImportFormExamples = observer(function ({
         model={model}
         onClick={() =>
           load(model, undefined, {
-            uri: 'https://jbrowse.org/genomes/newick_trees/sarscov2phylo.pub.ft.nh',
+            uri: 'https://jbrowse.org/genomes/newicktrees/sarscov2phylo.pub.ft.nh',
             locationType: 'UriLocation',
           })
         }

package/src/components/import/util.ts

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

package/src/components/minimap/Minimap.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { observer } from 'mobx-react'
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   const [mouseDown, setMouseDown] = useState<{
@@ -9,19 +9,14 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
   }>()
   const scheduled = useRef(false)
   const [hovered, setHovered] = useState(false)
-  const {
-    scrollX,
-    msaAreaWidth: W,
-    minimapHeight: H,
-    colWidth,
-    numColumns,
-  } = model
-  const unit = W / numColumns / colWidth
+  const { scrollX, msaAreaWidth, minimapHeight, colWidth, numColumns } = model
+  const unit = msaAreaWidth / numColumns / colWidth
   const left = -scrollX
-  const right = left + W
+  const right = left + msaAreaWidth
   const s = left * unit
   const e = right * unit
   const fill = 'rgba(66, 119, 127, 0.3)'
+  const w = Math.max(e - s, 20)
 
   useEffect(() => {
     function fn(event: MouseEvent) {
@@ -50,14 +45,14 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
     }
   }, [model, unit, mouseDown])
 
-  const BAR_HEIGHT = 12
-  const H2 = H - 12
+  const barHeight = 12
+  const polygonHeight = minimapHeight - barHeight
   return (
-    <div style={{ position: 'relative', height: H, width: '100%' }}>
+    <div style={{ position: 'relative', height: minimapHeight, width: '100%' }}>
       <div
         style={{
           boxSizing: 'border-box',
-          height: BAR_HEIGHT,
+          height: barHeight,
           border: '1px solid #555',
         }}
       />
@@ -68,10 +63,8 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
           left: Math.max(0, s),
           background: hovered ? 'rgba(66,119,127,0.6)' : fill,
           cursor: 'pointer',
-          border: '1px solid #555',
-          boxSizing: 'border-box',
-          height: BAR_HEIGHT,
-          width: e - s,
+          height: barHeight,
+          width: w,
           zIndex: 100,
         }}
         onMouseOver={() => setHovered(true)}
@@ -84,14 +77,14 @@ const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
         }}
       />
 
-      <svg height={H2} style={{ width: '100%' }}>
+      <svg height={polygonHeight} style={{ width: '100%' }}>
         <polygon
           fill={fill}
           points={[
-            [e, 0],
+            [s + w, 0],
             [s, 0],
-            [0, H2],
-            [W, H2],
+            [0, polygonHeight],
+            [msaAreaWidth, polygonHeight],
           ].toString()}
         />
       </svg>

package/src/components/minimap/MinimapSVG.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import { observer } from 'mobx-react'
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
-const MinimapSVG = observer(function ({ model }: { model: MsaViewModel }) {
+const MinimapSVG = observer(({ model }: { model: MsaViewModel }) => {
   const {
     scrollX,
     msaAreaWidth: W,

package/src/components/msa/MSACanvas.tsx

@@ -2,12 +2,19 @@ import React, { useEffect, useState, useRef } from 'react'
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import MSACanvasBlock from './MSACanvasBlock'
 import Loading from './Loading'
 
 const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
-  const { MSA, msaFilehandle, height, msaAreaWidth, blocks2d } = model
+  const {
+    MSA,
+    verticalScrollbarWidth,
+    msaFilehandle,
+    height,
+    msaAreaWidth,
+    blocks2d,
+  } = model
   const ref = useRef<HTMLDivElement>(null)
   // wheel
   const scheduled = useRef(false)
@@ -39,7 +46,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       event.preventDefault()
       event.stopPropagation()
     }
-    curr.addEventListener('wheel', onWheel)
+    curr.addEventListener('wheel', onWheel, { passive: false })
     return () => {
       curr.removeEventListener('wheel', onWheel)
     }
@@ -115,7 +122,7 @@ const MSACanvas = observer(function ({ model }: { model: MsaViewModel }) {
       style={{
         position: 'relative',
         height,
-        width: msaAreaWidth,
+        width: msaAreaWidth - verticalScrollbarWidth,
         overflow: 'hidden',
       }}
     >

package/src/components/msa/MSACanvasBlock.tsx

@@ -5,11 +5,11 @@ import { observer } from 'mobx-react'
 
 // locals
 import { renderMSABlock } from './renderMSABlock'
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import { colorContrast } from '../../util'
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock'
 
-const MSABlock = observer(function ({
+const MSACanvasBlock = observer(function ({
   model,
   offsetX,
   offsetY,
@@ -45,7 +45,8 @@ const MSABlock = observer(function ({
     return autorun(() => {
       ctx.resetTransform()
       ctx.clearRect(0, 0, blockSize, blockSize)
-      if (model.featureMode) {
+      const { actuallyShowDomains } = model
+      if (actuallyShowDomains) {
         renderBoxFeatureCanvasBlock({
           ctx,
           offsetX,
@@ -107,4 +108,4 @@ const MSABlock = observer(function ({
   )
 })
 
-export default MSABlock
+export default MSACanvasBlock

package/src/components/msa/MSAMouseoverCanvas.tsx

@@ -3,14 +3,10 @@ import { observer } from 'mobx-react'
 import { autorun } from 'mobx'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import { renderMouseover } from './renderMSAMouseover'
 
-const MSAMouseoverCanvas = observer(function ({
-  model,
-}: {
-  model: MsaViewModel
-}) {
+const MSAMouseoverCanvas = observer(({ model }: { model: MsaViewModel }) => {
   const ref = useRef<HTMLCanvasElement>(null)
   const { height, width } = model
   useEffect(() => {

package/src/components/msa/MSAPanel.tsx

@@ -5,7 +5,7 @@ import { observer } from 'mobx-react'
 import MSACanvas from './MSACanvas'
 import MSAMouseoverCanvas from './MSAMouseoverCanvas'
 // types
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 const MSAPanel = observer(function ({ model }: { model: MsaViewModel }) {
   return (

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -1,8 +1,8 @@
-import { HierarchyNode } from 'd3-hierarchy'
+import type { HierarchyNode } from 'd3-hierarchy'
 
 // locals
-import { MsaViewModel } from '../../model'
-import { NodeWithIdsAndLength } from '../../util'
+import type { MsaViewModel } from '../../model'
+import type { NodeWithIdsAndLength } from '../../util'
 
 export function renderBoxFeatureCanvasBlock({
   model,
@@ -19,16 +19,15 @@ export function renderBoxFeatureCanvasBlock({
   highResScaleFactorOverride?: number
   blockSizeYOverride?: number
 }) {
-  const { hierarchy, blockSize, rowHeight, highResScaleFactor, featureMode } =
+  const { leaves, blockSize, rowHeight, highResScaleFactor, showDomains } =
     model
-  if (featureMode) {
+  if (showDomains) {
     const k = highResScaleFactorOverride || highResScaleFactor
     const by = blockSizeYOverride || blockSize
     ctx.resetTransform()
     ctx.scale(k, k)
     ctx.translate(-offsetX, rowHeight / 2 - offsetY)
 
-    const leaves = hierarchy.leaves()
     const yStart = Math.max(0, Math.floor((offsetY - rowHeight) / rowHeight))
     const yEnd = Math.max(0, Math.ceil((offsetY + by + rowHeight) / rowHeight))
     const visibleLeaves = leaves.slice(yStart, yEnd)