react-msaview 3.1.11 → 3.2.0

package/src/components/VerticalScrollbar.tsx

@@ -0,0 +1,85 @@
+import { observer } from 'mobx-react'
+import React, { useEffect, useRef, useState } from 'react'
+import type { MsaViewModel } from '../model'
+import { clamp } from '../util'
+
+const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
+  const { msaAreaHeight, scrollY, totalHeight } = model
+  const [hovered, setHovered] = useState(false)
+  const scheduled = useRef(false)
+  const [mouseDown, setMouseDown] = useState<{
+    clientY: number
+    scrollY: number
+  }>()
+  const fill = 'rgba(66, 119, 127, 0.3)'
+  const unit = msaAreaHeight / totalHeight
+  const top = -scrollY
+  const bottom = top + msaAreaHeight
+  const t = top * unit
+  const b = bottom * unit
+  useEffect(() => {
+    function fn(event: MouseEvent) {
+      if (mouseDown !== undefined) {
+        if (!scheduled.current) {
+          scheduled.current = true
+          window.requestAnimationFrame(() => {
+            model.setScrollY(
+              clamp(
+                -totalHeight,
+                mouseDown.scrollY - (event.clientY - mouseDown.clientY) / unit,
+                0,
+              ),
+            )
+            scheduled.current = false
+          })
+        }
+      }
+    }
+    function fn2() {
+      setMouseDown(undefined)
+    }
+    if (mouseDown !== undefined) {
+      document.addEventListener('mousemove', fn)
+      document.addEventListener('mouseup', fn2)
+      return () => {
+        document.removeEventListener('mousemove', fn)
+        document.removeEventListener('mousemove', fn2)
+      }
+    }
+  }, [model, unit, totalHeight, mouseDown])
+  return (
+    <div
+      style={{
+        position: 'relative',
+        width: 20,
+        height: msaAreaHeight,
+        borderLeft: '1px solid #555',
+        borderTop: '1px solid #555',
+        boxSizing: 'border-box',
+      }}
+    >
+      <div
+        style={{
+          position: 'absolute',
+          top: Math.max(0, t),
+          left: 0,
+          background: hovered ? 'rgba(66,119,127,0.6)' : fill,
+          cursor: 'pointer',
+          boxSizing: 'border-box',
+          width: 20,
+          height: Math.max(b - t, 20),
+          zIndex: 100,
+        }}
+        onMouseOver={() => setHovered(true)}
+        onMouseOut={() => setHovered(false)}
+        onMouseDown={event => {
+          setMouseDown({
+            clientY: event.clientY,
+            scrollY: model.scrollY,
+          })
+        }}
+      />
+    </div>
+  )
+})
+export default VerticalScrollbar

package/src/components/dialogs/AddTrackDialog.tsx

@@ -8,9 +8,9 @@ import {
   Typography,
 } from '@mui/material'
 import { Dialog, FileSelector } from '@jbrowse/core/ui'
-import { FileLocation } from '@jbrowse/core/util/types'
+import type { FileLocation } from '@jbrowse/core/util/types'
 import { observer } from 'mobx-react'
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
 export default observer(function ({
   model,

package/src/components/dialogs/DomainDialog.tsx

@@ -0,0 +1,38 @@
+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 type { MsaViewModel } from '../../model'
+
+export default function LaunchDomainViewDialog({
+  handleClose,
+  model,
+}: {
+  handleClose: () => void
+  model: MsaViewModel
+}) {
+  const [choice, setChoice] = useState(0)
+  return (
+    <Dialog
+      maxWidth="xl"
+      title="Launch protein view"
+      onClose={() => handleClose()}
+      open
+    >
+      <Tabs value={choice} onChange={(_, val) => setChoice(val)}>
+        <Tab value={0} label="Automatic lookup" />
+        <Tab value={1} label="Manual" />
+      </Tabs>
+      <TabPanel value={choice} index={0}>
+        <InterProScanPanel model={model} handleClose={handleClose} />
+      </TabPanel>
+      <TabPanel value={choice} index={1}>
+        <UserProvidedResultPanel model={model} handleClose={handleClose} />
+      </TabPanel>
+    </Dialog>
+  )
+}

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -13,7 +13,7 @@ import {
   useTheme,
 } from '@mui/material'
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import Checkbox2 from '../Checkbox2'
 
 export default function ExportSVGDialog({

package/src/components/dialogs/FeatureDialog.tsx

@@ -4,7 +4,7 @@ import { Dialog } from '@jbrowse/core/ui'
 import { Button, DialogContent } from '@mui/material'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import { getPalette } from '../../ggplotPalettes'
 
 const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
@@ -44,7 +44,7 @@ const Table = observer(function ({ model }: { model: MsaViewModel }) {
       <table>
         <thead>
           <tr>
-            <td></td>
+            <td />
             <td>accession</td>
             <td>name</td>
             <td>description</td>
@@ -75,7 +75,7 @@ const Table = observer(function ({ model }: { model: MsaViewModel }) {
                     height: 20,
                     background: palette[idx] || 'black',
                   }}
-                ></div>
+                />
               </td>
             </tr>
           ))}

package/src/components/dialogs/InterProScanDialog.tsx

@@ -1,16 +1,18 @@
 import React, { useState } from 'react'
 import { observer } from 'mobx-react'
-import { Dialog } from '@jbrowse/core/ui'
 import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
+import { getSession } from '@jbrowse/core/util'
+import { launchInterProScan } from '../../launchInterProScan'
+import { Dialog } from '@jbrowse/core/ui'
 
-const FeatureTypeDialog = observer(function ({
-  onClose,
+const InterProScanDialog = observer(function ({
+  handleClose,
   model,
 }: {
-  onClose: () => void
+  handleClose: () => void
   model: MsaViewModel
 }) {
   const [vals, setVals] = useState([
@@ -146,10 +148,16 @@ const FeatureTypeDialog = observer(function ({
   const [show, setShow] = useState(false)
 
   return (
-    <Dialog onClose={() => onClose()} open title="Feature types" maxWidth="xl">
+    <Dialog
+      maxWidth="xl"
+      title="Query InterProScan API for domains"
+      onClose={() => handleClose()}
+      open
+    >
       <DialogContent>
         <Typography>
-          This will run InterProScan on all rows of the current MSA
+          This will run InterProScan via the InterProScan API on all rows of the
+          current MSA
         </Typography>
         <Button onClick={() => setShow(!show)}>
           {show ? 'Hide' : 'Show'} advanced options
@@ -209,15 +217,45 @@ const FeatureTypeDialog = observer(function ({
         ) : null}
       </DialogContent>
       <DialogActions>
-        <Button variant="contained" color="secondary" onClick={() => onClose()}>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => handleClose()}
+        >
           Cancel
         </Button>
         <Button
           variant="contained"
           color="primary"
           onClick={() => {
-            model.queryInterProScan(programs).catch(e => model.setError(e))
-            onClose()
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;(async () => {
+              try {
+                const { rows } = model
+                if (rows.length > 140) {
+                  throw new Error(
+                    'Too many sequences, please run InterProScan offline',
+                  )
+                }
+                await launchInterProScan({
+                  algorithm: 'interproscan',
+                  programs: programs,
+                  seq: rows
+                    .map(row => [row[0], row[1].replaceAll('-', '')])
+                    .filter(f => !!f[1])
+                    .map(row => `>${row[0]}\n${row[1]}`)
+                    .join('\n'),
+                  onProgress: arg => model.setStatus(arg),
+                  model,
+                })
+              } catch (e) {
+                console.error(e)
+                getSession(model).notifyError(`${e}`, e)
+              } finally {
+                model.setStatus()
+              }
+            })()
+            handleClose()
           }}
         >
           Send sequences to InterProScan
@@ -227,4 +265,4 @@ const FeatureTypeDialog = observer(function ({
   )
 })
 
-export default FeatureTypeDialog
+export default InterProScanDialog

package/src/components/dialogs/MetadataDialog.tsx

@@ -8,7 +8,7 @@ import {
 } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 import SequenceTextArea from '../SequenceTextArea'
 
 const MetadataDialog = observer(function ({

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/TabPanel.tsx

@@ -0,0 +1,19 @@
+import React from 'react'
+
+// this is from MUI example
+export default function TabPanel({
+  children,
+  value,
+  index,
+  ...other
+}: {
+  children?: React.ReactNode
+  index: number
+  value: number
+}) {
+  return (
+    <div role="tabpanel" hidden={value !== index} {...other}>
+      {value === index && <div>{children}</div>}
+    </div>
+  )
+}

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'
@@ -13,17 +14,19 @@ import ZoomControls from './ZoomControls'
 import MultiAlignmentSelector from './MultiAlignmentSelector'
 import HeaderInfoArea from './HeaderInfoArea'
 import HeaderStatusArea from './HeaderStatusArea'
-import HeaderMenu from './HeaderMenu'
 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' }}>
-      <HeaderMenu model={model} />
-      <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'))