react-msaview 3.1.6 → 3.1.8

package/src/components/Track.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useRef, useEffect, lazy, Suspense } from 'react'
+import React, { useState, useRef, useEffect, lazy } from 'react'
 import normalizeWheel from 'normalize-wheel'
 import { observer } from 'mobx-react'
 import { IconButton, Menu, MenuItem } from '@mui/material'
@@ -10,6 +10,7 @@ import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown'
 // locals
 import { MsaViewModel } from '../model'
 
+// lazies
 const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDialog'))
 
 const useStyles = makeStyles()({
@@ -27,8 +28,7 @@ export const TrackLabel = observer(function ({
   track: any
 }) {
   const [anchorEl, setAnchorEl] = useState<HTMLButtonElement>()
-  const [trackInfoDialogOpen, setTrackInfoDialogOpen] = useState(false)
-  const { rowHeight, treeAreaWidth: width } = model
+  const { drawLabels, rowHeight, treeAreaWidth: width } = model
   const {
     height,
     model: { name },
@@ -46,7 +46,7 @@ export const TrackLabel = observer(function ({
         fontSize: trackLabelHeight,
       }}
     >
-      {name}{' '}
+      {drawLabels ? name : ''}{' '}
       <IconButton
         className={classes.button}
         style={{
@@ -76,7 +76,10 @@ export const TrackLabel = observer(function ({
           <MenuItem
             dense
             onClick={() => {
-              setTrackInfoDialogOpen(true)
+              model.queueDialog(onClose => [
+                TrackInfoDialog,
+                { onClose, model: track.model },
+              ])
               setAnchorEl(undefined)
             }}
           >
@@ -84,14 +87,6 @@ export const TrackLabel = observer(function ({
           </MenuItem>
         </Menu>
       ) : null}
-      {trackInfoDialogOpen ? (
-        <Suspense fallback={null}>
-          <TrackInfoDialog
-            model={track.model}
-            onClose={() => setTrackInfoDialogOpen(false)}
-          />
-        </Suspense>
-      ) : null}
     </div>
   )
 })

package/src/components/dialogs/AddTrackDialog.tsx

@@ -51,7 +51,6 @@ export default observer(function ({
             onClick={() => {
               model.setError(undefined)
               if (trackFile) {
-                // eslint-disable-next-line @typescript-eslint/no-floating-promises
                 model.setMSAFilehandle(trackFile)
               }
             }}

package/src/components/{ExportSVGDialog.tsx → dialogs/ExportSVGDialog.tsx}

@@ -2,7 +2,6 @@ import React, { useState } from 'react'
 import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
 import {
   Button,
-  Checkbox,
   DialogContent,
   DialogActions,
   FormControlLabel,
@@ -13,7 +12,9 @@ import {
   Typography,
   useTheme,
 } from '@mui/material'
-import { MsaViewModel } from '../model'
+// locals
+import { MsaViewModel } from '../../model'
+import Checkbox2 from '../Checkbox2'
 
 export default function ExportSVGDialog({
   model,
@@ -31,20 +32,12 @@ export default function ExportSVGDialog({
       <DialogContent>
         {error ? <ErrorMessage error={error} /> : null}
         <Typography>Settings:</Typography>
-        <div>
-          <FormControl>
-            <FormControlLabel
-              control={
-                <Checkbox
-                  checked={includeMinimap}
-                  onChange={event => setIncludeMinimap(event.target.checked)}
-                />
-              }
-              disabled={exportType === 'entire'}
-              label="Include minimap?"
-            />
-          </FormControl>
-        </div>
+        <Checkbox2
+          label="Include minimap?"
+          disabled={exportType === 'entire'}
+          checked={includeMinimap}
+          onChange={() => setIncludeMinimap(!includeMinimap)}
+        />
         <div>
           <FormControl>
             <FormLabel>Export type</FormLabel>

package/src/components/dialogs/FeatureDialog.tsx

@@ -0,0 +1,109 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { Dialog } from '@jbrowse/core/ui'
+import { Button, DialogContent } from '@mui/material'
+
+// locals
+import { MsaViewModel } from '../../model'
+import { getPalette } from '../../ggplotPalettes'
+
+const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
+  const { featureFilters } = model
+  return (
+    <div>
+      <Button
+        onClick={() => {
+          for (const key of featureFilters.keys()) {
+            model.setFilter(key, true)
+          }
+        }}
+      >
+        Toggle all on
+      </Button>
+
+      <Button
+        onClick={() => {
+          for (const key of featureFilters.keys()) {
+            model.setFilter(key, false)
+          }
+        }}
+      >
+        Toggle all off
+      </Button>
+    </div>
+  )
+})
+
+const Table = observer(function ({ model }: { model: MsaViewModel }) {
+  const { tidyTypes, featureFilters } = model
+  const values = [...tidyTypes.values()]
+  const palette = getPalette(values.length - 1)
+  return (
+    <>
+      <Toggles model={model} />
+      <table>
+        <thead>
+          <tr>
+            <td></td>
+            <td>accession</td>
+            <td>name</td>
+            <td>description</td>
+          </tr>
+        </thead>
+        <tbody>
+          {values.map(({ accession, name, description }, idx) => (
+            <tr key={accession}>
+              <td>
+                <input
+                  type="checkbox"
+                  checked={featureFilters.get(accession) ?? false}
+                  onChange={() =>
+                    model.setFilter(
+                      accession,
+                      !model.featureFilters.get(accession),
+                    )
+                  }
+                />
+              </td>
+              <td>{accession}</td>
+              <td>{name}</td>
+              <td>{description}</td>
+              <td>
+                <div
+                  style={{
+                    width: 20,
+                    height: 20,
+                    background: palette[idx] || 'black',
+                  }}
+                ></div>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </>
+  )
+})
+
+const FeatureTypeDialog = observer(function ({
+  onClose,
+  model,
+}: {
+  onClose: () => void
+  model: MsaViewModel
+}) {
+  return (
+    <Dialog
+      onClose={() => onClose()}
+      open
+      title="Feature filters"
+      maxWidth="xl"
+    >
+      <DialogContent>
+        <Table model={model} />
+      </DialogContent>
+    </Dialog>
+  )
+})
+
+export default FeatureTypeDialog

package/src/components/dialogs/InterProScanDialog.tsx

@@ -0,0 +1,230 @@
+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'
+
+const FeatureTypeDialog = observer(function ({
+  onClose,
+  model,
+}: {
+  onClose: () => void
+  model: MsaViewModel
+}) {
+  const [vals, setVals] = useState([
+    {
+      name: 'NCBIfam',
+      description: 'NCBI RefSeq FAMs including TIGRFAMs',
+      category: 'Families, domains, sites & repeats',
+      checked: true,
+    },
+    {
+      name: 'SFLD',
+      description: 'Structure function linkage database',
+      category: 'Families, domains, sites & repeats',
+      checked: true,
+    },
+    {
+      name: 'Phobius',
+      checked: true,
+      description:
+        'A combined transmembrane topology and signal peptide predictor',
+      category: 'Other sequence features',
+    },
+    {
+      name: 'SignalP',
+      checked: true,
+      category: 'Other sequence features',
+    },
+    {
+      name: 'SignalP_EUK',
+      category: 'Other category',
+      checked: true,
+    },
+    {
+      name: 'SignalP_GRAM_POSITIVE',
+      category: 'Other category',
+      checked: true,
+    },
+    {
+      name: 'SignalP_GRAM_NEGATIVE',
+      checked: true,
+      category: 'Other category',
+    },
+    {
+      name: 'SUPERFAMILY',
+      category: 'Structural domains',
+      checked: true,
+    },
+    {
+      name: 'PANTHER',
+      category: 'Families, domains, sites & repeats',
+      checked: true,
+    },
+    {
+      name: 'Gene3D',
+      category: 'Structural domains',
+      checked: true,
+    },
+    {
+      name: 'Hamap',
+      category: 'Families, domains, sites & repeats',
+      checked: true,
+    },
+    {
+      name: 'ProSiteProfiles',
+      category: 'Families, domains, sites & repeats',
+      checked: true,
+    },
+    {
+      name: 'ProSitePatterns',
+      category: 'Families, domains, sites & repeats',
+      checked: true,
+    },
+    {
+      name: 'Coils',
+      category: 'Other sequence features',
+      checked: true,
+    },
+    {
+      name: 'SMART',
+      category: 'Families, domains, sites & repeats',
+      checked: true,
+    },
+    {
+      name: 'CDD',
+      description: 'Conserved Domains Database',
+      category: 'Families, domains, sites & repeats',
+      checked: true,
+    },
+    {
+      name: 'PRINTS',
+      category: 'Families, domains, sites & repeats',
+      checked: true,
+    },
+    {
+      name: 'Pfam',
+      category: 'Families, domains, sites & repeats',
+      checked: true,
+    },
+    {
+      name: 'MobiDBLite',
+      checked: true,
+      category: 'Other sequence features',
+    },
+    {
+      name: 'PIRSF',
+      checked: true,
+      category: 'Other category',
+    },
+    {
+      name: 'TMHMM',
+      checked: true,
+      category: 'Other sequence features',
+    },
+
+    {
+      name: 'AntiFam',
+      checked: true,
+      category: 'Other category',
+    },
+    {
+      name: 'FunFam',
+      checked: true,
+      category: 'Other category',
+    },
+    {
+      name: 'PIRSR',
+      checked: true,
+      category: 'Families, domains, sites & repeats',
+    },
+  ])
+
+  const programs = vals.filter(e => e.checked).map(e => e.name)
+  const [show, setShow] = useState(false)
+
+  return (
+    <Dialog onClose={() => onClose()} open title="Feature types" maxWidth="xl">
+      <DialogContent>
+        <Typography>
+          This will run InterProScan on all rows of the current MSA
+        </Typography>
+        <Button onClick={() => setShow(!show)}>
+          {show ? 'Hide' : 'Show'} advanced options
+        </Button>
+        {show ? (
+          <div>
+            <Typography>Select algorithms for InterProScan to run</Typography>
+            <div>
+              <Button
+                variant="contained"
+                color="secondary"
+                onClick={() =>
+                  setVals(vals.map(v => ({ ...v, checked: false })))
+                }
+              >
+                Select none
+              </Button>
+              <Button
+                variant="contained"
+                color="primary"
+                onClick={() =>
+                  setVals(vals.map(v => ({ ...v, checked: true })))
+                }
+              >
+                Select all
+              </Button>
+            </div>
+            <table>
+              <tbody>
+                {vals
+                  .sort((a, b) => a.category.localeCompare(b.category))
+                  .map(({ name, checked, category }) => (
+                    <tr key={name}>
+                      <td>
+                        <input
+                          type="checkbox"
+                          key={name}
+                          checked={checked}
+                          onChange={() =>
+                            setVals(
+                              vals.map(e =>
+                                e.name === name
+                                  ? { ...e, checked: !e.checked }
+                                  : e,
+                              ),
+                            )
+                          }
+                        />
+                      </td>
+                      <td>{name}</td>
+                      <td>{category}</td>
+                    </tr>
+                  ))}
+              </tbody>
+            </table>
+          </div>
+        ) : null}
+      </DialogContent>
+      <DialogActions>
+        <Button variant="contained" color="secondary" onClick={() => onClose()}>
+          Cancel
+        </Button>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={() => {
+            model.queryInterProScan(programs).catch(e => model.setError(e))
+            onClose()
+          }}
+        >
+          Send sequences to InterProScan
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default FeatureTypeDialog

package/src/components/dialogs/MetadataDialog.tsx

@@ -2,10 +2,14 @@ import React from 'react'
 import { DialogContent } from '@mui/material'
 import { observer } from 'mobx-react'
 import { Dialog } from '@jbrowse/core/ui'
-import { Attributes } from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
+import {
+  Attributes,
+  BaseCard,
+} from '@jbrowse/core/BaseFeatureWidget/BaseFeatureDetail'
 
 // locals
 import { MsaViewModel } from '../../model'
+import SequenceTextArea from '../SequenceTextArea'
 
 const MetadataDialog = observer(function ({
   model,
@@ -17,9 +21,12 @@ const MetadataDialog = observer(function ({
   const { header } = model
 
   return (
-    <Dialog onClose={() => onClose()} open title="Metadata">
+    <Dialog onClose={() => onClose()} open title="Metadata" maxWidth="xl">
       <DialogContent>
         <Attributes attributes={header} />
+        <BaseCard title="sequence">
+          <SequenceTextArea str={model.rows} />
+        </BaseCard>
       </DialogContent>
     </Dialog>
   )

package/src/components/dialogs/SettingsDialog.tsx

@@ -4,11 +4,8 @@ import { makeStyles } from 'tss-react/mui'
 import { Dialog } from '@jbrowse/core/ui'
 import {
   Button,
-  Checkbox,
   DialogActions,
   DialogContent,
-  FormControlLabel,
-  FormControlLabelProps,
   MenuItem,
   Slider,
   TextField,
@@ -17,6 +14,7 @@ import {
 
 import { MsaViewModel } from '../../model'
 import colorSchemes from '../../colorSchemes'
+import Checkbox2 from '../Checkbox2'
 
 const useStyles = makeStyles()(theme => ({
   field: {
@@ -27,31 +25,6 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-function FormControlLabel2(rest: FormControlLabelProps) {
-  return (
-    <div>
-      <FormControlLabel {...rest} />
-    </div>
-  )
-}
-
-function Checkbox2({
-  checked,
-  label,
-  onChange,
-}: {
-  checked: boolean
-  label: string
-  onChange: () => void
-}) {
-  return (
-    <FormControlLabel2
-      control={<Checkbox checked={checked} onChange={onChange} />}
-      label={label}
-    />
-  )
-}
-
 const SettingsContent = observer(function ({ model }: { model: MsaViewModel }) {
   return (
     <>
@@ -61,10 +34,15 @@ const SettingsContent = observer(function ({ model }: { model: MsaViewModel }) {
   )
 })
 
-function TreeSettings({ model }: { model: MsaViewModel }) {
+const TreeSettings = observer(function TreeSettings({
+  model,
+}: {
+  model: MsaViewModel
+}) {
   const { classes } = useStyles()
   const {
     drawTree,
+    drawLabels,
     drawNodeBubbles,
     labelsAlignRight,
     noTree,
@@ -98,6 +76,12 @@ function TreeSettings({ model }: { model: MsaViewModel }) {
         onChange={() => model.setLabelsAlignRight(!labelsAlignRight)}
         label="Tree labels align right?"
       />
+
+      <Checkbox2
+        checked={drawLabels}
+        onChange={() => model.setDrawLabels(!drawLabels)}
+        label="Draw labels"
+      />
       {!noTree ? (
         <div>
           <Checkbox2
@@ -123,9 +107,13 @@ function TreeSettings({ model }: { model: MsaViewModel }) {
       ) : null}
     </div>
   )
-}
+})
 
-function MSASettings({ model }: { model: MsaViewModel }) {
+const MSASettings = observer(function MSASettings({
+  model,
+}: {
+  model: MsaViewModel
+}) {
   const { classes } = useStyles()
   const { bgColor, colWidth, colorSchemeName, rowHeight } = model
 
@@ -174,7 +162,7 @@ function MSASettings({ model }: { model: MsaViewModel }) {
       </TextField>
     </div>
   )
-}
+})
 
 const SettingsDialog = observer(function ({
   model,
@@ -184,8 +172,8 @@ const SettingsDialog = observer(function ({
   onClose: () => void
 }) {
   return (
-    <Dialog open onClose={() => onClose()} title="Settings">
-      <DialogContent>
+    <Dialog open onClose={() => onClose()} title="Settings" maxWidth="xl">
+      <DialogContent style={{ width: '80em' }}>
         <SettingsContent model={model} />
         <DialogActions>
           <Button onClick={() => onClose()} variant="contained" color="primary">

package/src/components/header/Header.tsx

@@ -0,0 +1,44 @@
+import React, { lazy } from 'react'
+import { IconButton } from '@mui/material'
+import { observer } from 'mobx-react'
+
+// locals
+import { MsaViewModel } from '../../model'
+
+// icons
+import Help from '@mui/icons-material/Help'
+
+// locals
+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 }) {
+  return (
+    <div style={{ display: 'flex' }}>
+      <HeaderMenu model={model} />
+      <ZoomControls model={model} />
+      <HeaderMenuExtra model={model} />
+      <MultiAlignmentSelector model={model} />
+      <HeaderInfoArea model={model} />
+      <Spacer />
+      <HeaderStatusArea model={model} />
+      <IconButton
+        onClick={() => model.queueDialog(onClose => [AboutDialog, { onClose }])}
+      >
+        <Help />
+      </IconButton>
+    </div>
+  )
+})
+
+function Spacer() {
+  return <div style={{ flex: 1 }} />
+}
+
+export default Header

package/src/components/header/HeaderInfoArea.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+// locals
+import { MsaViewModel } from '../../model'
+
+const useStyles = makeStyles()({
+  margin: {
+    margin: 'auto',
+    marginLeft: 10,
+  },
+})
+
+const HeaderInfoArea = observer(({ model }: { model: MsaViewModel }) => {
+  const { mouseOverRowName, mouseCol } = model
+  const { classes } = useStyles()
+  return mouseOverRowName && mouseCol !== undefined ? (
+    <Typography className={classes.margin}>
+      {mouseOverRowName}:
+      {model.globalCoordToRowSpecificSeqCoord(mouseOverRowName, mouseCol)}
+    </Typography>
+  ) : null
+})
+
+export default HeaderInfoArea