react-msaview 3.1.12 → 3.2.1

package/src/components/header/HeaderMenuExtra.tsx

@@ -2,23 +2,20 @@ import React, { lazy } from 'react'
 import { observer } from 'mobx-react'
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
-// locals
-
 // 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 FolderOpen from '@mui/icons-material/FolderOpen'
 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 { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 // lazies
 const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
@@ -26,72 +23,100 @@ 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 DomainDialog = lazy(() => import('../dialogs/DomainDialog'))
+const UserProvidedDomainsDialog = lazy(
+  () => import('../dialogs/UserProvidedDomainsDialog'),
+)
+const InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog'))
 
-const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
-  const { showDomains, subFeatureRows, noAnnotations } = model
+const HeaderMenuExtra = observer(({ model }: { model: MsaViewModel }) => {
+  const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
   return (
     <CascadingMenuButton
       menuItems={[
         {
           label: 'Return to import form',
           icon: FolderOpen,
-          onClick: () => model.reset(),
+          onClick: () => {
+            model.reset()
+          },
         },
         {
           label: 'Settings',
-          onClick: () =>
-            model.queueDialog(onClose => [SettingsDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [SettingsDialog, { model, onClose }])
+          },
           icon: Settings,
         },
         {
           label: 'Metadata',
-          onClick: () =>
-            model.queueDialog(onClose => [MetadataDialog, { model, onClose }]),
+          onClick: () => {
+            model.queueDialog(onClose => [MetadataDialog, { model, onClose }])
+          },
           icon: Assignment,
         },
         {
           label: 'Extra tracks',
-          onClick: () =>
-            model.queueDialog(onClose => [TracklistDialog, { model, onClose }]),
-          icon: List,
-        },
-        {
-          label: 'Reset zoom to default',
-          icon: RestartAlt,
           onClick: () => {
-            model.setColWidth(16)
-            model.setRowHeight(20)
+            model.queueDialog(onClose => [TracklistDialog, { model, onClose }])
           },
+          icon: List,
         },
+
         {
           label: 'Export SVG',
           icon: PhotoCamera,
-          onClick: () =>
-            model.queueDialog(onClose => [ExportSVGDialog, { onClose, model }]),
+          onClick: () => {
+            model.queueDialog(onClose => [ExportSVGDialog, { onClose, model }])
+          },
         },
         {
           label: 'Features/protein domains',
           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: showDomains,
+              checked: actuallyShowDomains ? showDomains : false,
               type: 'checkbox',
-              onClick: () => model.setShowDomains(!showDomains),
+              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),
+              onClick: () => {
+                model.setSubFeatureRows(!subFeatureRows)
+              },
             },
             {
-              label: 'Filter domains',
+              label: `Filter domains${noDomains ? ' (no domains loaded)' : ''}`,
               icon: FilterAlt,
+              disabled: noDomains,
               onClick: () => {
                 model.queueDialog(onClose => [
                   FeatureFilterDialog,
@@ -99,18 +124,9 @@ const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
                 ])
               },
             },
-            {
-              label: 'View domains',
-              icon: Search,
-              onClick: () =>
-                model.queueDialog(handleClose => [
-                  DomainDialog,
-                  { handleClose, model },
-                ]),
-            },
           ],
         },
-        ...(model.extraViewMenuItems?.() || []),
+        ...model.extraViewMenuItems(),
       ]}
     >
       <MoreVert />

package/src/components/header/HeaderStatusArea.tsx

@@ -5,7 +5,7 @@ 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: {
@@ -14,11 +14,7 @@ const useStyles = makeStyles()({
   },
 })
 
-const HeaderStatusArea = observer(function ({
-  model,
-}: {
-  model: MsaViewModel
-}) {
+const HeaderStatusArea = observer(({ model }: { model: MsaViewModel }) => {
   const { status } = model
   const { classes } = useStyles()
   return 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,
@@ -16,12 +19,59 @@ const ZoomControls = observer(function ZoomControls({
 }) {
   return (
     <>
-      <IconButton onClick={() => model.zoomIn()}>
+      <IconButton
+        onClick={() => {
+          model.zoomIn()
+        }}
+      >
         <ZoomIn />
       </IconButton>
-      <IconButton onClick={() => model.zoomOut()}>
+      <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 }) => {
+const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
   const [msaFile, setMsaFile] = useState<FileLocation>()
   const [treeFile, setTreeFile] = useState<FileLocation>()
   const { error } = model
@@ -44,7 +44,17 @@ export default observer(({ model }: { model: MsaViewModel }) => {
 
         <Grid item>
           <Button
-            onClick={() => load(model, msaFile, treeFile)}
+            onClick={() => {
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
+              ;(async () => {
+                try {
+                  await load(model, msaFile, treeFile)
+                } catch (e) {
+                  console.error(e)
+                  model.setError(e)
+                }
+              })()
+            }}
             variant="contained"
             color="primary"
             disabled={!msaFile && !treeFile}
@@ -61,3 +71,5 @@ export default observer(({ model }: { model: MsaViewModel }) => {
     </Container>
   )
 })
+
+export default ImportForm

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,36 +15,63 @@ 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,
 }: {
   model: MsaViewModel
 }) {
+  function l2(uri1?: string, uri2?: string) {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        await load(
+          model,
+          uri1
+            ? {
+                uri: uri1,
+                locationType: 'UriLocation',
+              }
+            : undefined,
+          uri2
+            ? {
+                uri: uri2,
+                locationType: 'UriLocation',
+              }
+            : undefined,
+        )
+      } catch (e) {
+        console.error(e)
+        model.setError(e)
+      }
+    })()
+  }
   return (
     <ul>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, undefined, {
-            uri: 'https://jbrowse.org/genomes/newick_trees/sarscov2phylo.pub.ft.nh',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2(
+            undefined,
+            'https://jbrowse.org/genomes/newicktrees/sarscov2phylo.pub.ft.nh',
+          )
+        }}
       >
         230k COVID-19 samples (tree only)
       </ListItem>
@@ -66,74 +93,60 @@ const ImportFormExamples = observer(function ({
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, {
-            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/pfam-cov2.stock',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2(
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/pfam-cov2.stock',
+          )
+        }}
       >
         PFAM SARS-CoV2 multi-stockholm
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, {
-            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2(
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/Lysine.stock',
+          )
+        }}
       >
         Lysine stockholm file
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, {
-            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2(
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/PF01601_full.txt',
+          )
+        }}
       >
         PF01601 stockholm file (SARS-CoV2 spike protein)
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, {
-            uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/europe_covid.fa',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2(
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/europe_covid.fa',
+          )
+        }}
       >
         Europe COVID full genomes (LR883044.1 and 199 other sequences)
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(
-            model,
-            {
-              uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
-              locationType: 'UriLocation',
-            },
-            {
-              uri: 'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
-              locationType: 'UriLocation',
-            },
+        onClick={() => {
+          l2(
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.fa',
+            'https://jbrowse.org/genomes/multiple_sequence_alignments/rhv_test-only.aligned_with_mafft_auto.nh',
           )
-        }
+        }}
       >
         MAFFT+VeryFastTree(17.9k samples)
       </ListItem>
       <ListItem
         model={model}
-        onClick={() =>
-          load(model, {
-            uri: 'https://jbrowse.org/demos/ttc39a.mfa',
-            locationType: 'UriLocation',
-          })
-        }
+        onClick={() => {
+          l2('https://jbrowse.org/demos/ttc39a.mfa')
+        }}
       >
         Human BLAST results mfa
       </ListItem>

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,27 +1,24 @@
 import React, { useEffect, useRef, useState } from 'react'
 import { observer } from 'mobx-react'
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
+
+interface ClickCoord {
+  clientX: number
+  scrollX: number
+}
 
 const Minimap = observer(function ({ model }: { model: MsaViewModel }) {
-  const [mouseDown, setMouseDown] = useState<{
-    clientX: number
-    scrollX: number
-  }>()
-  const scheduled = useRef(false)
+  const [mouseDown, setMouseDown] = useState<ClickCoord>()
   const [hovered, setHovered] = useState(false)
-  const {
-    scrollX,
-    msaAreaWidth: W,
-    minimapHeight: H,
-    colWidth,
-    numColumns,
-  } = model
-  const unit = W / numColumns / colWidth
+  const scheduled = useRef(false)
+  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 +47,20 @@ 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={{
+          height: barHeight,
           boxSizing: 'border-box',
-          height: BAR_HEIGHT,
           border: '1px solid #555',
         }}
       />
@@ -68,14 +71,16 @@ 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)}
-        onMouseOut={() => setHovered(false)}
+        onMouseOver={() => {
+          setHovered(true)
+        }}
+        onMouseOut={() => {
+          setHovered(false)
+        }}
         onMouseDown={event => {
           setMouseDown({
             clientX: event.clientX,
@@ -84,14 +89,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,