react-msaview 3.1.12 → 3.2.0

package/src/components/dialogs/SettingsDialog.tsx

@@ -12,7 +12,7 @@ import {
   Typography,
 } from '@mui/material'
 
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import colorSchemes from '../../colorSchemes'
 import Checkbox2 from '../Checkbox2'
 
@@ -115,17 +115,40 @@ const MSASettings = observer(function MSASettings({
   model: MsaViewModel
 }) {
   const { classes } = useStyles()
-  const { bgColor, colWidth, colorSchemeName, rowHeight } = model
+  const {
+    bgColor,
+    contrastLettering,
+    colWidth,
+    allowedGappyness,
+    drawMsaLetters,
+    colorSchemeName,
+    hideGaps,
+    rowHeight,
+  } = model
 
   return (
     <div>
       <h1>MSA options</h1>
-
+      <Checkbox2
+        checked={drawMsaLetters}
+        onChange={() => model.setDrawMsaLetters(!drawMsaLetters)}
+        label="Draw letters"
+      />
       <Checkbox2
         checked={bgColor}
         onChange={() => model.setBgColor(!bgColor)}
         label="Color background tiles of MSA?"
       />
+      <Checkbox2
+        checked={contrastLettering}
+        onChange={() => model.setContrastLettering(!contrastLettering)}
+        label="Use contrast lettering"
+      />
+      <Checkbox2
+        checked={hideGaps}
+        onChange={() => model.setHideGaps(!hideGaps)}
+        label={`Hide columns that are ${100 - allowedGappyness}% gaps`}
+      />
 
       <div className={classes.flex}>
         <Typography>Column width ({colWidth}px)</Typography>
@@ -147,6 +170,18 @@ const MSASettings = observer(function MSASettings({
           onChange={(_, val) => model.setRowHeight(val as number)}
         />
       </div>
+      {hideGaps ? (
+        <div className={classes.flex}>
+          <Typography>Allowed gappyness ({100 - allowedGappyness}%)</Typography>
+          <Slider
+            className={classes.field}
+            min={1}
+            max={100}
+            value={allowedGappyness}
+            onChange={(_, val) => model.setAllowedGappyness(val as number)}
+          />
+        </div>
+      ) : null}
 
       <TextField
         select

package/src/components/dialogs/TracklistDialog.tsx

@@ -12,7 +12,7 @@ import {
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 export default observer(function ({
   model,

package/src/components/dialogs/UserProvidedDomainsDialog.tsx

@@ -0,0 +1,133 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  FormControlLabel,
+  FormControl,
+  Radio,
+  RadioGroup,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { getSession } from '@jbrowse/core/util'
+import { Dialog } from '@jbrowse/core/ui'
+
+// locals
+import type { MsaViewModel } from '../../model'
+import { jsonfetch } from '../../fetchUtils'
+import type { InterProScanResponse } from '../../launchInterProScan'
+
+const UserProvidedDomainsDialog = observer(function ({
+  handleClose,
+  model,
+}: {
+  handleClose: () => void
+  model: MsaViewModel
+}) {
+  const [file, setFile] = useState<File>()
+  const [choice, setChoice] = useState('file')
+  const [interProURL, setInterProURL] = useState('')
+
+  return (
+    <Dialog
+      maxWidth="xl"
+      title="Open protein domains from file"
+      onClose={() => handleClose()}
+      open
+    >
+      <DialogContent>
+        <div>
+          <Typography>
+            Open a JSON file of InterProScan results that you run remotely on
+            EBI servers or locally
+          </Typography>
+
+          <div style={{ display: 'flex', margin: 30 }}>
+            <FormControl component="fieldset">
+              <RadioGroup
+                value={choice}
+                onChange={event => setChoice(event.target.value)}
+              >
+                <FormControlLabel value="url" control={<Radio />} label="URL" />
+                <FormControlLabel
+                  value="file"
+                  control={<Radio />}
+                  label="File"
+                />
+              </RadioGroup>
+            </FormControl>
+            {choice === 'url' ? (
+              <div>
+                <Typography>
+                  Open a InterProScan JSON file remote URL
+                </Typography>
+                <TextField
+                  label="URL"
+                  value={interProURL}
+                  onChange={event => setInterProURL(event.target.value)}
+                />
+              </div>
+            ) : null}
+            {choice === 'file' ? (
+              <div style={{ paddingTop: 20 }}>
+                <Typography>
+                  Open a InterProScan JSON file file from your local drive
+                </Typography>
+                <Button variant="outlined" component="label">
+                  Choose File
+                  <input
+                    type="file"
+                    hidden
+                    onChange={({ target }) => {
+                      const file = target?.files?.[0]
+                      if (file) {
+                        setFile(file)
+                      }
+                    }}
+                  />
+                </Button>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;(async () => {
+              try {
+                const ret: InterProScanResponse = file
+                  ? JSON.parse(await file.text())
+                  : await jsonfetch(interProURL)
+
+                model.setInterProAnnotations(
+                  Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
+                )
+                model.setShowDomains(true)
+                getSession(model).notify(
+                  'Loaded interproscan results',
+                  'success',
+                )
+              } catch (e) {
+                console.error(e)
+                getSession(model).notifyError(`${e}`, e)
+              } finally {
+                model.setStatus()
+              }
+            })()
+            handleClose()
+          }}
+        >
+          Open results
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default UserProvidedDomainsDialog

package/src/components/header/Header.tsx

@@ -1,9 +1,10 @@
-import React, { lazy } from 'react'
+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 { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 // icons
 import Help from '@mui/icons-material/Help'
@@ -18,10 +19,14 @@ import HeaderMenuExtra from './HeaderMenuExtra'
 const AboutDialog = lazy(() => import('../dialogs/AboutDialog'))
 
 const Header = observer(function ({ model }: { model: MsaViewModel }) {
+  const [ref, { height }] = useMeasure()
+  useEffect(() => {
+    model.setHeaderHeight(height || 0)
+  }, [model, height])
   return (
-    <div style={{ display: 'flex' }}>
-      <ZoomControls model={model} />
+    <div ref={ref} style={{ display: 'flex' }}>
       <HeaderMenuExtra model={model} />
+      <ZoomControls model={model} />
       <MultiAlignmentSelector model={model} />
       <HeaderInfoArea model={model} />
       <Spacer />

package/src/components/header/HeaderInfoArea.tsx

@@ -4,7 +4,7 @@ import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 const useStyles = makeStyles()({
   margin: {

package/src/components/header/HeaderMenu.tsx

@@ -10,7 +10,7 @@ import List from '@mui/icons-material/List'
 import Menu from '@mui/icons-material/Menu'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 // lazies
 const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))

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,10 +23,13 @@ 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={[
@@ -56,14 +56,7 @@ const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
             model.queueDialog(onClose => [TracklistDialog, { model, onClose }]),
           icon: List,
         },
-        {
-          label: 'Reset zoom to default',
-          icon: RestartAlt,
-          onClick: () => {
-            model.setColWidth(16)
-            model.setRowHeight(20)
-          },
-        },
+
         {
           label: 'Export SVG',
           icon: PhotoCamera,
@@ -75,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: showDomains,
+              checked: actuallyShowDomains ? showDomains : false,
               type: 'checkbox',
               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,
@@ -99,15 +112,6 @@ const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
                 ])
               },
             },
-            {
-              label: 'View domains',
-              icon: Search,
-              onClick: () =>
-                model.queueDialog(handleClose => [
-                  DomainDialog,
-                  { handleClose, model },
-                ]),
-            },
           ],
         },
         ...(model.extraViewMenuItems?.() || []),

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,
@@ -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,