react-msaview 3.1.12 → 3.2.1

package/src/components/dialogs/{InterProScanPanel.tsx → InterProScanDialog.tsx}

@@ -3,9 +3,10 @@ import { observer } from 'mobx-react'
 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 InterProScanDialog = observer(function ({
   handleClose,
@@ -147,12 +148,24 @@ const InterProScanDialog = observer(function ({
   const [show, setShow] = useState(false)
 
   return (
-    <>
+    <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)}>
+        <Button
+          onClick={() => {
+            setShow(!show)
+          }}
+        >
           {show ? 'Hide' : 'Show'} advanced options
         </Button>
         {show ? (
@@ -162,18 +175,18 @@ const InterProScanDialog = observer(function ({
               <Button
                 variant="contained"
                 color="secondary"
-                onClick={() =>
+                onClick={() => {
                   setVals(vals.map(v => ({ ...v, checked: false })))
-                }
+                }}
               >
                 Select none
               </Button>
               <Button
                 variant="contained"
                 color="primary"
-                onClick={() =>
+                onClick={() => {
                   setVals(vals.map(v => ({ ...v, checked: true })))
-                }
+                }}
               >
                 Select all
               </Button>
@@ -189,7 +202,7 @@ const InterProScanDialog = observer(function ({
                           type="checkbox"
                           key={name}
                           checked={checked}
-                          onChange={() =>
+                          onChange={() => {
                             setVals(
                               vals.map(e =>
                                 e.name === name
@@ -197,7 +210,7 @@ const InterProScanDialog = observer(function ({
                                   : e,
                               ),
                             )
-                          }
+                          }}
                         />
                       </td>
                       <td>{name}</td>
@@ -213,7 +226,9 @@ const InterProScanDialog = observer(function ({
         <Button
           variant="contained"
           color="secondary"
-          onClick={() => handleClose()}
+          onClick={() => {
+            handleClose()
+          }}
         >
           Cancel
         </Button>
@@ -238,7 +253,9 @@ const InterProScanDialog = observer(function ({
                     .filter(f => !!f[1])
                     .map(row => `>${row[0]}\n${row[1]}`)
                     .join('\n'),
-                  onProgress: arg => model.setStatus(arg),
+                  onProgress: arg => {
+                    model.setStatus(arg)
+                  },
                   model,
                 })
               } catch (e) {
@@ -254,7 +271,7 @@ const InterProScanDialog = observer(function ({
           Send sequences to InterProScan
         </Button>
       </DialogActions>
-    </>
+    </Dialog>
   )
 })
 

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 ({
@@ -21,7 +21,14 @@ const MetadataDialog = observer(function ({
   const { header } = model
 
   return (
-    <Dialog onClose={() => onClose()} open title="Metadata" maxWidth="xl">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Metadata"
+      maxWidth="xl"
+    >
       <DialogContent>
         <Attributes attributes={header} />
         <BaseCard title="sequence">

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'
 
@@ -23,6 +23,9 @@ const useStyles = makeStyles()(theme => ({
   flex: {
     display: 'flex',
   },
+  minw: {
+    width: '80em',
+  },
 }))
 
 const SettingsContent = observer(function ({ model }: { model: MsaViewModel }) {
@@ -56,39 +59,49 @@ const TreeSettings = observer(function TreeSettings({
       <h1>Tree options</h1>
       <Checkbox2
         checked={showBranchLen}
-        onChange={() => model.setShowBranchLen(!showBranchLen)}
+        onChange={() => {
+          model.setShowBranchLen(!showBranchLen)
+        }}
         label="Show branch length?"
       />
 
       <Checkbox2
         checked={drawNodeBubbles}
-        onChange={() => model.setDrawNodeBubbles(!drawNodeBubbles)}
+        onChange={() => {
+          model.setDrawNodeBubbles(!drawNodeBubbles)
+        }}
         label="Draw clickable bubbles on tree branches?"
       />
       <Checkbox2
         checked={drawTree}
-        onChange={() => model.setDrawTree(!drawTree)}
+        onChange={() => {
+          model.setDrawTree(!drawTree)
+        }}
         label="Show tree?"
       />
 
       <Checkbox2
         checked={labelsAlignRight}
-        onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
+        onChange={() => {
+          model.setLabelsAlignRight(!labelsAlignRight)
+        }}
         label="Tree labels align right?"
       />
 
       <Checkbox2
         checked={drawLabels}
-        onChange={() => model.setDrawLabels(!drawLabels)}
+        onChange={() => {
+          model.setDrawLabels(!drawLabels)
+        }}
         label="Draw labels"
       />
       {noTree ? null : (
         <div>
           <Checkbox2
             checked={treeWidthMatchesArea}
-            onChange={() =>
+            onChange={() => {
               model.setTreeWidthMatchesArea(!treeWidthMatchesArea)
-            }
+            }}
             label="Make tree width fit to tree area?"
           />
           {treeWidthMatchesArea ? null : (
@@ -99,7 +112,9 @@ const TreeSettings = observer(function TreeSettings({
                 min={50}
                 max={600}
                 value={treeWidth}
-                onChange={(_, val) => model.setTreeWidth(val as number)}
+                onChange={(_, val) => {
+                  model.setTreeWidth(val as number)
+                }}
               />
             </div>
           )}
@@ -115,18 +130,62 @@ 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)}
+        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 ${allowedGappyness}% gaps`}
+      />
+      {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}
       <div className={classes.flex}>
         <Typography>Column width ({colWidth}px)</Typography>
         <Slider
@@ -134,7 +193,9 @@ const MSASettings = observer(function MSASettings({
           min={1}
           max={50}
           value={colWidth}
-          onChange={(_, val) => model.setColWidth(val as number)}
+          onChange={(_, val) => {
+            model.setColWidth(val as number)
+          }}
         />
       </div>
       <div className={classes.flex}>
@@ -144,7 +205,9 @@ const MSASettings = observer(function MSASettings({
           min={1}
           max={50}
           value={rowHeight}
-          onChange={(_, val) => model.setRowHeight(val as number)}
+          onChange={(_, val) => {
+            model.setRowHeight(val as number)
+          }}
         />
       </div>
 
@@ -152,7 +215,9 @@ const MSASettings = observer(function MSASettings({
         select
         label="Color scheme"
         value={colorSchemeName}
-        onChange={event => model.setColorSchemeName(event.target.value)}
+        onChange={event => {
+          model.setColorSchemeName(event.target.value)
+        }}
       >
         {Object.keys(colorSchemes).map(option => (
           <MenuItem key={option} value={option}>
@@ -171,12 +236,26 @@ const SettingsDialog = observer(function ({
   model: MsaViewModel
   onClose: () => void
 }) {
+  const { classes } = useStyles()
   return (
-    <Dialog open onClose={() => onClose()} title="Settings" maxWidth="xl">
-      <DialogContent style={{ width: '80em' }}>
+    <Dialog
+      open
+      onClose={() => {
+        onClose()
+      }}
+      title="Settings"
+      maxWidth="xl"
+    >
+      <DialogContent className={classes.minw}>
         <SettingsContent model={model} />
         <DialogActions>
-          <Button onClick={() => onClose()} variant="contained" color="primary">
+          <Button
+            onClick={() => {
+              onClose()
+            }}
+            variant="contained"
+            color="primary"
+          >
             Submit
           </Button>
         </DialogActions>

package/src/components/dialogs/TracklistDialog.tsx

@@ -12,9 +12,9 @@ import {
 import { observer } from 'mobx-react'
 
 // locals
-import { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model'
 
-export default observer(function ({
+const TracklistDialog = observer(function ({
   model,
   onClose,
 }: {
@@ -24,7 +24,13 @@ export default observer(function ({
   const { tracks } = model
 
   return (
-    <Dialog onClose={() => onClose()} open title="Add track">
+    <Dialog
+      onClose={() => {
+        onClose()
+      }}
+      open
+      title="Add track"
+    >
       <DialogContent>
         <Typography>
           Open relevant per-alignment tracks e.g. protein domains
@@ -49,7 +55,13 @@ export default observer(function ({
           })}
         </FormGroup>
         <DialogActions>
-          <Button onClick={() => onClose()} variant="contained" color="primary">
+          <Button
+            onClick={() => {
+              onClose()
+            }}
+            variant="contained"
+            color="primary"
+          >
             Close
           </Button>
         </DialogActions>
@@ -57,3 +69,5 @@ export default observer(function ({
     </Dialog>
   )
 })
+
+export default TracklistDialog

package/src/components/dialogs/UserProvidedDomainsDialog.tsx

@@ -0,0 +1,139 @@
+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,16 +19,22 @@ 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 />
       <HeaderStatusArea model={model} />
       <IconButton
-        onClick={() => model.queueDialog(onClose => [AboutDialog, { onClose }])}
+        onClick={() => {
+          model.queueDialog(onClose => [AboutDialog, { onClose }])
+        }}
       >
         <Help />
       </IconButton>

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: {
@@ -13,13 +13,14 @@ const useStyles = makeStyles()({
   },
 })
 
-const HeaderInfoArea = observer(({ model }: { model: MsaViewModel }) => {
+const HeaderInfoArea = observer(function ({ model }: { model: MsaViewModel }) {
   const { mouseOverRowName, mouseCol } = model
   const { classes } = useStyles()
   return mouseOverRowName && mouseCol !== undefined ? (
     <Typography className={classes.margin}>
       {mouseOverRowName}:
-      {model.globalCoordToRowSpecificSeqCoord(mouseOverRowName, mouseCol)}
+      {model.mouseOverCoordToGapRemovedRowCoord(mouseOverRowName, mouseCol)} (
+      {model.mouseOverCoordToRowLetter(mouseOverRowName, mouseCol)})
     </Typography>
   ) : null
 })

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'))
@@ -24,24 +24,29 @@ const HeaderMenu = observer(function ({ model }: { model: MsaViewModel }) {
         {
           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 }]),
+          onClick: () => {
+            model.queueDialog(onClose => [TracklistDialog, { model, onClose }])
+          },
           icon: List,
         },
       ]}