react-msaview 6.5.0 → 7.0.0

package/src/components/dialogs/AnnotationFileDialog.tsx

@@ -0,0 +1,162 @@
+import React, { useState } from 'react'
+
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  FormControl,
+  FormControlLabel,
+  Radio,
+  RadioGroup,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import {
+  annotationsToGFF,
+  interProScanResponseToAnnotations,
+} from 'msa-parsers'
+
+import type { MsaViewModel } from '../../model.ts'
+import type { InterProScanResponse } from 'msa-parsers'
+
+// GFF3 as the CLI writes it, or the JSON an InterProScan run returns. Both
+// arrive as text and the model keeps GFF, so the JSON is converted on the way
+// in rather than given a second path through the model
+function toGFF(text: string) {
+  const trimmed = text.trimStart()
+  if (!trimmed.startsWith('{')) {
+    return text
+  }
+  const response: InterProScanResponse = JSON.parse(trimmed)
+  return annotationsToGFF(interProScanResponseToAnnotations(response))
+}
+
+async function fetchText(url: string) {
+  const response = await fetch(url)
+  if (!response.ok) {
+    throw new Error(
+      `HTTP ${response.status} fetching ${url} ${await response.text()}`,
+    )
+  }
+  return response.text()
+}
+
+const AnnotationFileDialog = observer(function ({
+  handleClose,
+  model,
+}: {
+  handleClose: () => void
+  model: MsaViewModel
+}) {
+  const [file, setFile] = useState<File>()
+  const [choice, setChoice] = useState('file')
+  const [url, setUrl] = useState('')
+  const [error, setError] = useState<unknown>()
+  const [loading, setLoading] = useState(false)
+
+  // the error is shown here rather than notified: the standalone app and the
+  // MSAViewer component have no jbrowse session to notify, and asking one for
+  // its notify() threw out of the success path into the catch, which threw
+  // again on the same missing session
+  return (
+    <Dialog
+      maxWidth="xl"
+      title="Open annotation file"
+      onClose={() => {
+        handleClose()
+      }}
+      open
+    >
+      <DialogContent>
+        {error ? <ErrorMessage error={error} /> : null}
+        <Typography>
+          Open a GFF3 file of annotations, such as the one `react-msaview-cli
+          interpro` writes, or the JSON an InterProScan run returns.
+        </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 an annotation file from a URL</Typography>
+              <TextField
+                label="URL"
+                value={url}
+                onChange={event => {
+                  setUrl(event.target.value)
+                }}
+              />
+            </div>
+          ) : (
+            <div style={{ paddingTop: 20 }}>
+              <Typography>
+                Open an annotation file from your local drive
+              </Typography>
+              <Button variant="outlined" component="label">
+                Choose File
+                <input
+                  type="file"
+                  hidden
+                  onChange={({ target }) => {
+                    const chosen = target.files?.[0]
+                    if (chosen) {
+                      setFile(chosen)
+                    }
+                  }}
+                />
+              </Button>
+              {file ? <Typography>{file.name}</Typography> : null}
+            </div>
+          )}
+        </div>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="primary"
+          disabled={loading}
+          onClick={() => {
+            // eslint-disable-next-line @typescript-eslint/no-floating-promises
+            ;(async () => {
+              setLoading(true)
+              setError(undefined)
+              try {
+                const text = await (choice === 'file' && file
+                  ? file.text()
+                  : fetchText(url))
+                // through the model's own GFF text, so the annotations travel
+                // in the snapshot and the shared URL like every other layer.
+                // Setting them straight onto the volatile left a view whose
+                // link opened without them
+                model.setGFF(toGFF(text))
+                model.setShowDomains(true)
+                handleClose()
+              } catch (e) {
+                console.error(e)
+                setError(e)
+              } finally {
+                setLoading(false)
+              }
+            })()
+          }}
+        >
+          Open annotations
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default AnnotationFileDialog

package/src/components/dialogs/FeatureDialog.tsx

@@ -16,14 +16,20 @@ import { observer } from 'mobx-react'
 import type { MsaViewModel } from '../../model.ts'
 
 const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
-  const { featureFilters } = model
+  // the accessions the file has, not the ones the filter map happens to hold:
+  // that map now carries only what the reader turned off, and before that it
+  // accumulated every accession of every file opened in this view
+  const { annotationTypes } = model
+  const setAll = (shown: boolean) => {
+    for (const accession of annotationTypes.keys()) {
+      model.setFilter(accession, shown)
+    }
+  }
   return (
     <div>
       <Button
         onClick={() => {
-          for (const key of featureFilters.keys()) {
-            model.setFilter(key, true)
-          }
+          setAll(true)
         }}
       >
         Toggle all on
@@ -31,9 +37,7 @@ const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
 
       <Button
         onClick={() => {
-          for (const key of featureFilters.keys()) {
-            model.setFilter(key, false)
-          }
+          setAll(false)
         }}
       >
         Toggle all off
@@ -68,11 +72,11 @@ const FeatureTable = observer(function ({ model }: { model: MsaViewModel }) {
               <TableRow key={accession}>
                 <TableCell padding="checkbox">
                   <Checkbox
-                    checked={model.featureFilters.get(accession) ?? false}
+                    checked={!model.turnedOffFeatures.get(accession)}
                     onChange={() => {
                       model.setFilter(
                         accession,
-                        !model.featureFilters.get(accession),
+                        !!model.turnedOffFeatures.get(accession),
                       )
                     }}
                   />

package/src/components/header/Header.tsx

@@ -10,9 +10,11 @@ import FileMenu from './FileMenu.tsx'
 import GappynessSlider from './GappynessSlider.tsx'
 import HeaderInfoArea from './HeaderInfoArea.tsx'
 import HeaderStatusArea from './HeaderStatusArea.tsx'
+import LoadWarnings from './LoadWarnings.tsx'
 import MSASettingsMenu from './MSASettingsMenu.tsx'
 import MultiAlignmentSelector from './MultiAlignmentSelector.tsx'
 import TreeSettingsMenu from './TreeSettingsMenu.tsx'
+import UnshareableDataWarning from './UnshareableDataWarning.tsx'
 import ZoomControls from './ZoomControls.tsx'
 import ZoomMenu from './ZoomMenu.tsx'
 
@@ -39,6 +41,8 @@ const Header = observer(function ({ model }: { model: MsaViewModel }) {
       </div>
       <HeaderInfoArea model={model} />
       <Spacer />
+      <LoadWarnings model={model} />
+      <UnshareableDataWarning model={model} />
       <HeaderStatusArea model={model} />
       <Tooltip title="About">
         <IconButton

package/src/components/header/HeaderStatusArea.tsx

@@ -20,11 +20,6 @@ const HeaderStatusArea = observer(({ model }: { model: MsaViewModel }) => {
   return status ? (
     <Typography className={classes.margin}>
       <LoadingEllipses message={status.msg} component="span" />{' '}
-      {status.url ? (
-        <a href={status.url} target="_blank" rel="noreferrer">
-          (status)
-        </a>
-      ) : null}{' '}
       {status.onCancel ? (
         <Button size="small" onClick={() => status.onCancel?.()}>
           Cancel

package/src/components/header/LoadWarnings.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+
+import { makeStyles } from '@jbrowse/core/util/tss-react'
+import Warning from '@mui/icons-material/Warning'
+import { Tooltip, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const useStyles = makeStyles()(theme => ({
+  warning: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+    margin: 'auto',
+    marginLeft: 10,
+    whiteSpace: 'nowrap',
+    color: theme.palette.warning.main,
+    cursor: 'pointer',
+  },
+}))
+
+// An optional layer that failed -- a 404 on the annotations, a row-metadata
+// file that is not JSON -- used to go to `error`, which takes dataInitialized
+// down with it and replaces a perfectly good alignment with an error screen.
+// It says so here instead, and the reader dismisses it.
+const LoadWarnings = observer(function ({ model }: { model: MsaViewModel }) {
+  const { warnings } = model
+  const { classes } = useStyles()
+  if (warnings.length === 0) {
+    return null
+  }
+  return (
+    <Tooltip title={`${warnings.join(' ')} (click to dismiss)`}>
+      <Typography
+        component="div"
+        className={classes.warning}
+        onClick={() => {
+          model.clearWarnings()
+        }}
+      >
+        <Warning fontSize="small" />
+        {warnings.length > 1 ? `${warnings.length} warnings` : 'Warning'}
+      </Typography>
+    </Tooltip>
+  )
+})
+
+export default LoadWarnings

package/src/components/header/TreeSettingsMenu.tsx

@@ -4,6 +4,7 @@ import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 import AccountTree from '@mui/icons-material/AccountTree'
 import { observer } from 'mobx-react'
 
+import { maxNeighborJoiningRows } from '../../constants.ts'
 import { treeSettingsMenuItems } from './settingsMenuItems.ts'
 
 import type { MsaViewModel } from '../../model.ts'
@@ -14,6 +15,7 @@ const TreeSettingsMenu = observer(function ({
   model: MsaViewModel
 }) {
   const { rows } = model
+  const tooManyRows = rows.length > maxNeighborJoiningRows
   return (
     <CascadingMenuButton
       data-testid="tree_settings_menu"
@@ -30,7 +32,13 @@ const TreeSettingsMenu = observer(function ({
                 type: 'subMenu' as const,
                 subMenu: [
                   {
-                    label: 'Calculate neighbor joining tree (BLOSUM62)',
+                    // the cap shows in the label rather than arriving as an
+                    // error after the click, since the click is what would
+                    // freeze the tab
+                    label: tooManyRows
+                      ? `Calculate neighbor joining tree (over ${maxNeighborJoiningRows} rows, use FastTree)`
+                      : 'Calculate neighbor joining tree (BLOSUM62)',
+                    disabled: tooManyRows,
                     onClick: () => {
                       try {
                         model.calculateNeighborJoiningTreeFromMSA()

package/src/components/header/UnshareableDataWarning.tsx

@@ -0,0 +1,58 @@
+import React from 'react'
+
+import { makeStyles } from '@jbrowse/core/util/tss-react'
+import LinkOff from '@mui/icons-material/LinkOff'
+import { Tooltip, Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { MsaViewModel } from '../../model.ts'
+
+const useStyles = makeStyles()(theme => ({
+  warning: {
+    display: 'flex',
+    alignItems: 'center',
+    gap: 4,
+    margin: 'auto',
+    marginLeft: 10,
+    whiteSpace: 'nowrap',
+    color: theme.palette.warning.main,
+    cursor: 'help',
+  },
+}))
+
+function size(bytes: number) {
+  return bytes < 1_000_000
+    ? `${Math.round(bytes / 1000)} kB`
+    : `${(bytes / 1_000_000).toFixed(1)} MB`
+}
+
+// The viewer holds documents its own snapshot does not carry, and until this
+// existed it said nothing about it: the view worked, the URL quietly lost the
+// data, and whoever copied the link found out from the person who opened it.
+// See `unshareableData` on the model.
+const UnshareableDataWarning = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
+  const { unshareableData } = model
+  const { classes } = useStyles()
+  if (unshareableData.length === 0) {
+    return null
+  }
+  const what = unshareableData
+    .map(({ what, bytes }) => `${what} (${size(bytes)})`)
+    .join(' and the ')
+  return (
+    <Tooltip
+      title={`The ${what} came from this computer and is too large to travel in a URL, so a link to this page opens without it. Serve the file over HTTP and open it by URL to share the view.`}
+    >
+      <Typography component="div" className={classes.warning}>
+        <LinkOff fontSize="small" />
+        Not in the link
+      </Typography>
+    </Tooltip>
+  )
+})
+
+export default UnshareableDataWarning

package/src/components/header/getAnnotationsMenu.ts

@@ -2,30 +2,29 @@ import { lazy } from 'react'
 
 import FilterAlt from '@mui/icons-material/FilterAlt'
 import FolderOpen from '@mui/icons-material/FolderOpen'
-import Search from '@mui/icons-material/Search'
+import MenuBook from '@mui/icons-material/MenuBook'
 import Sort from '@mui/icons-material/Sort'
 import Visibility from '@mui/icons-material/Visibility'
 
 import type { MsaViewModel } from '../../model.ts'
 
 const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog.tsx'))
-const InterProScanFileDialog = lazy(
-  () => import('../dialogs/InterProScanFileDialog.tsx'),
-)
-const InterProScanDialog = lazy(
-  () => import('../dialogs/InterProScanDialog.tsx'),
+const AnnotationFileDialog = lazy(
+  () => import('../dialogs/AnnotationFileDialog.tsx'),
 )
 
+const domainsTutorial = 'https://gmod.org/JBrowseMSA/tutorials/protein_family'
+
 export function getAnnotationsMenu({ model }: { model: MsaViewModel }) {
   const { showDomains, actuallyShowDomains, subFeatureRows, noDomains } = model
   const noneLoaded = noDomains ? ' (none loaded)' : ''
   return [
     {
-      label: 'Open InterProScan results...',
+      label: 'Open annotation file...',
       icon: FolderOpen,
       onClick: () => {
         model.queueDialog(handleClose => [
-          InterProScanFileDialog,
+          AnnotationFileDialog,
           {
             handleClose,
             model,
@@ -33,17 +32,17 @@ export function getAnnotationsMenu({ model }: { model: MsaViewModel }) {
         ])
       },
     },
+    // The viewer used to submit the whole alignment to the EBI iprscan5 queue
+    // and poll it for about fifteen minutes, capped at 140 rows and under a
+    // hardcoded email address. `react-msaview-cli interpro` answers the same
+    // question from InterPro's precomputed matches in seconds, and
+    // `interproscan` covers rows InterPro has not seen. Neither belongs in a
+    // browser tab, so this points at the page that walks through them.
     {
-      label: 'Query InterProScan...',
-      icon: Search,
+      label: 'How to get a domain file...',
+      icon: MenuBook,
       onClick: () => {
-        model.queueDialog(handleClose => [
-          InterProScanDialog,
-          {
-            handleClose,
-            model,
-          },
-        ])
+        window.open(domainsTutorial, '_blank', 'noopener,noreferrer')
       },
     },
     {

package/src/components/import/ImportForm.tsx

@@ -21,8 +21,8 @@ const ImportForm = observer(function ({ model }: { model: MsaViewModel }) {
       <div style={{ width: '50%' }}>
         {error ? <ErrorMessage error={error} /> : null}
         <Typography>
-          Open an MSA file (stockholm or clustal format) and/or a tree file
-          (newick format).
+          Open an MSA file (FASTA, Stockholm, Clustal, A3M or EMF format) and/or
+          a tree file (Newick format).
         </Typography>
         <Typography color="error">
           Note: you can open up just an MSA or just a tree, both are not

package/src/components/import/ImportFormExamples.tsx

@@ -9,7 +9,7 @@ import { load } from './util.ts'
 import type { MsaViewModel } from '../../model.ts'
 
 const BASE = 'https://jbrowse.org/genomes/multiple_sequence_alignments'
-const TREES = 'https://jbrowse.org/genomes/newicktrees'
+const TREES = 'https://jbrowse.org/genomes/newick_trees'
 
 // each example either points at remote files (msa/tree/gff urls) or carries its
 // data inline, which is what the two bundled small ones do
@@ -35,11 +35,7 @@ const examples: Example[] = [
     inline: { msa: smallMSAOnly },
   },
   {
-    label: 'PFAM SARS-CoV2 multi-stockholm',
-    msa: `${BASE}/pfam-cov2.stock`,
-  },
-  {
-    label: 'PFAM SARS-CoV2 multi-stockholm w/ domains loaded',
+    label: 'PFAM SARS-CoV2 multi-stockholm with domains',
     msa: `${BASE}/pfam-cov2.stock`,
     gff: `${BASE}/pfam-cov2-domains.gff`,
   },

package/src/components/import/util.ts

@@ -16,5 +16,8 @@ export function load(
   }
   if (gffFile) {
     model.setGFFFilehandle(gffFile)
+    // asked for by hand, so drawn -- even if the reader hid the overlay
+    // earlier in this view
+    model.setShowDomains(true)
   }
 }

package/src/components/msa/MSACanvasBlock.tsx

@@ -1,10 +1,10 @@
 import React from 'react'
 
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
+import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
 import { useCanvasAutorun } from '../../useCanvasAutorun.ts'
-import { useColorContrast } from '../../useColorContrast.ts'
 import ColumnStats from './ColumnStats.tsx'
 import { drawMsaRaster, rasterSupported } from './msaRaster.ts'
 import { renderBoxFeatureCanvasBlock } from './renderBoxFeatureCanvasBlock.ts'
@@ -22,8 +22,8 @@ const MSACanvasBlock = observer(function ({
   offsetX: number
   offsetY: number
 }) {
-  const { colorScheme, blockSize, highResScaleFactor } = model
-  const { theme, contrastScheme } = useColorContrast(colorScheme)
+  const { blockSize, highResScaleFactor } = model
+  const theme = useTheme()
   const { tooltipPoint, onMouseMove, onClick, onMouseLeave } = useMsaBlockMouse(
     {
       model,
@@ -56,14 +56,13 @@ const MSACanvasBlock = observer(function ({
         theme,
         offsetX,
         offsetY,
-        contrastScheme,
         model,
         rasterTiles,
       })
     },
     width: canvasSize,
     height: canvasSize,
-    deps: [model, offsetX, offsetY, theme, contrastScheme],
+    deps: [model, offsetX, offsetY, theme],
   })
 
   const { hoveredInsertion, mouseOverDomains, showColumnStats } = model