react-msaview 3.1.11 → 3.1.12

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

@@ -1,16 +1,17 @@
 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 { getSession } from '@jbrowse/core/util'
+import { launchInterProScan } from '../../launchInterProScan'
 
-const FeatureTypeDialog = observer(function ({
-  onClose,
+const InterProScanDialog = observer(function ({
+  handleClose,
   model,
 }: {
-  onClose: () => void
+  handleClose: () => void
   model: MsaViewModel
 }) {
   const [vals, setVals] = useState([
@@ -146,7 +147,7 @@ const FeatureTypeDialog = observer(function ({
   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
@@ -209,22 +210,52 @@ 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
         </Button>
       </DialogActions>
-    </Dialog>
+    </>
   )
 })
 
-export default FeatureTypeDialog
+export default InterProScanDialog

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

@@ -0,0 +1,119 @@
+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'
+
+// locals
+import { MsaViewModel } from '../../model'
+import { jsonfetch } from '../../fetchUtils'
+import { InterProScanResponse } from '../../launchInterProScan'
+
+const FeatureTypeDialog = observer(function ({
+  handleClose,
+  model,
+}: {
+  handleClose: () => void
+  model: MsaViewModel
+}) {
+  const [file, setFile] = useState<File>()
+  const [choice, setChoice] = useState('file')
+  const [interProURL, setInterProURL] = useState('')
+
+  return (
+    <>
+      <DialogContent>
+        <div style={{ display: 'flex', margin: 30 }}>
+          <Typography>
+            Open a JSON file of InterProScan results that you run remotely on
+            EBI servers or locally
+          </Typography>
+
+          <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>
+      </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.setLoadedInterProAnnotations(
+                  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>
+    </>
+  )
+})
+
+export default FeatureTypeDialog

package/src/components/header/Header.tsx

@@ -13,7 +13,6 @@ 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'))
@@ -21,7 +20,6 @@ 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} />

package/src/components/header/HeaderMenuExtra.tsx

@@ -3,7 +3,6 @@ import { observer } from 'mobx-react'
 import CascadingMenuButton from '@jbrowse/core/ui/CascadingMenuButton'
 
 // locals
-import { MsaViewModel } from '../../model'
 
 // icons
 import MoreVert from '@mui/icons-material/MoreVert'
@@ -13,18 +12,50 @@ 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'
+
+// locals
+import { MsaViewModel } from '../../model'
 
 // lazies
+const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
+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 InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog'))
+const DomainDialog = lazy(() => import('../dialogs/DomainDialog'))
 
 const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
-  const { featureMode, subFeatureRows, noAnnotations, interProScanJobIds } =
-    model
+  const { showDomains, subFeatureRows, noAnnotations } = model
   return (
     <CascadingMenuButton
       menuItems={[
+        {
+          label: 'Return to import form',
+          icon: FolderOpen,
+          onClick: () => model.reset(),
+        },
+        {
+          label: 'Settings',
+          onClick: () =>
+            model.queueDialog(onClose => [SettingsDialog, { model, onClose }]),
+          icon: Settings,
+        },
+        {
+          label: 'Metadata',
+          onClick: () =>
+            model.queueDialog(onClose => [MetadataDialog, { model, onClose }]),
+          icon: Assignment,
+        },
+        {
+          label: 'Extra tracks',
+          onClick: () =>
+            model.queueDialog(onClose => [TracklistDialog, { model, onClose }]),
+          icon: List,
+        },
         {
           label: 'Reset zoom to default',
           icon: RestartAlt,
@@ -47,9 +78,9 @@ const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
               label:
                 'Show domains' + (noAnnotations ? ' (no domains loaded)' : ''),
               icon: Visibility,
-              checked: featureMode,
+              checked: showDomains,
               type: 'checkbox',
-              onClick: () => model.setFeatureMode(!featureMode),
+              onClick: () => model.setShowDomains(!showDomains),
             },
             {
               label: 'Use sub-row layout',
@@ -69,32 +100,14 @@ const HeaderMenuExtra = observer(function ({ model }: { model: MsaViewModel }) {
               },
             },
             {
-              label: 'Query InterProScan for domains...',
+              label: 'View domains',
               icon: Search,
               onClick: () =>
-                model.queueDialog(onClose => [
-                  InterProScanDialog,
-                  { onClose, model },
+                model.queueDialog(handleClose => [
+                  DomainDialog,
+                  { handleClose, model },
                 ]),
             },
-            {
-              label: 'Load previous InterProScan results...',
-              icon: Search,
-              type: 'subMenu',
-              subMenu: interProScanJobIds.length
-                ? interProScanJobIds.map(({ jobId, date }) => ({
-                    label:
-                      new Date(date).toLocaleString('en-US') + ' - ' + jobId,
-                    onClick: () => model.loadInterProScanResults(jobId),
-                  }))
-                : [
-                    {
-                      label: 'No previous searches',
-                      disabled: true,
-                      onClick: () => {},
-                    },
-                  ],
-            },
           ],
         },
         ...(model.extraViewMenuItems?.() || []),

package/src/components/header/HeaderStatusArea.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
+import { LoadingEllipses } from '@jbrowse/core/ui'
 
 // locals
 import { MsaViewModel } from '../../model'
@@ -13,12 +14,16 @@ const useStyles = makeStyles()({
   },
 })
 
-const HeaderStatusArea = observer(({ model }: { model: MsaViewModel }) => {
+const HeaderStatusArea = observer(function ({
+  model,
+}: {
+  model: MsaViewModel
+}) {
   const { status } = model
   const { classes } = useStyles()
   return status ? (
     <Typography className={classes.margin}>
-      {status.msg}{' '}
+      <LoadingEllipses message={status.msg} component="span" />{' '}
       {status.url ? (
         <a href={status.url} target="_blank" rel="noreferrer">
           (status)

package/src/components/msa/MSACanvasBlock.tsx

@@ -45,7 +45,7 @@ const MSABlock = observer(function ({
     return autorun(() => {
       ctx.resetTransform()
       ctx.clearRect(0, 0, blockSize, blockSize)
-      if (model.featureMode) {
+      if (model.showDomains) {
         renderBoxFeatureCanvasBlock({
           ctx,
           offsetX,

package/src/components/msa/renderBoxFeatureCanvasBlock.ts

@@ -19,9 +19,9 @@ export function renderBoxFeatureCanvasBlock({
   highResScaleFactorOverride?: number
   blockSizeYOverride?: number
 }) {
-  const { hierarchy, blockSize, rowHeight, highResScaleFactor, featureMode } =
+  const { hierarchy, blockSize, rowHeight, highResScaleFactor, showDomains } =
     model
-  if (featureMode) {
+  if (showDomains) {
     const k = highResScaleFactorOverride || highResScaleFactor
     const by = blockSizeYOverride || blockSize
     ctx.resetTransform()

package/src/components/msa/renderMSABlock.ts

@@ -34,7 +34,7 @@ export function renderMSABlock({
     rowHeight,
     fontSize,
     highResScaleFactor,
-    featureMode,
+    showDomains,
   } = model
   const k = highResScaleFactorOverride || highResScaleFactor
   const bx = blockSizeXOverride || blockSize
@@ -53,7 +53,7 @@ export function renderMSABlock({
   const xEnd = Math.max(0, Math.ceil((offsetX + bx) / colWidth))
   const visibleLeaves = leaves.slice(yStart, yEnd)
 
-  if (!featureMode) {
+  if (!showDomains) {
     drawTiles({
       model,
       ctx,
@@ -152,7 +152,7 @@ function drawText({
   xStart: number
   xEnd: number
 }) {
-  const { bgColor, featureMode, colorScheme, columns, colWidth, rowHeight } =
+  const { bgColor, showDomains, colorScheme, columns, colWidth, rowHeight } =
     model
   if (rowHeight >= 5 && colWidth > rowHeight / 2) {
     for (const node of visibleLeaves) {
@@ -168,7 +168,7 @@ function drawText({
         const x = i * colWidth + offsetX - (offsetX % colWidth)
 
         // note: -rowHeight/4 matches +rowHeight/4 in tree
-        ctx.fillStyle = featureMode
+        ctx.fillStyle = showDomains
           ? 'black'
           : bgColor
             ? contrast

package/src/fetchUtils.ts

@@ -15,9 +15,9 @@ export async function textfetch(url: string, args?: RequestInit) {
   return response.text()
 }
 
-export async function jsonfetch(url: string, args?: RequestInit) {
+export async function jsonfetch<T>(url: string, args?: RequestInit) {
   const response = await myfetch(url, args)
-  return response.json()
+  return response.json() as T
 }
 
 export async function arraybufferfetch(url: string) {

package/src/launchInterProScan.ts

@@ -1,4 +1,6 @@
+import { getSession } from '@jbrowse/core/util'
 import { jsonfetch, textfetch, timeout } from './fetchUtils'
+import { MsaViewModel } from './model'
 
 const base = `https://www.ebi.ac.uk/Tools/services/rest`
 
@@ -24,11 +26,13 @@ async function runInterProScan({
   onProgress,
   onJobId,
   programs,
+  model,
 }: {
   seq: string
   programs: string[]
   onProgress: (arg?: { msg: string; url?: string }) => void
-  onJobId: (arg: string) => void
+  onJobId?: (arg: string) => void
+  model: MsaViewModel
 }) {
   const jobId = await textfetch(`${base}/iprscan5/run`, {
     method: 'POST',
@@ -38,18 +42,18 @@ async function runInterProScan({
       programs: programs.join(','),
     }),
   })
-  onJobId(jobId)
+  onJobId?.(jobId)
   await wait({
     jobId,
     onProgress,
   })
-  return loadInterProScanResults(jobId)
+  return loadInterProScanResultsWithStatus({ jobId, model })
 }
 
-export async function loadInterProScanResults(jobId: string) {
-  return (await jsonfetch(
+export function loadInterProScanResults(jobId: string) {
+  return jsonfetch<InterProScanResponse>(
     `${base}/iprscan5/result/${jobId}/json`,
-  )) as InterProScanResponse
+  )
 }
 
 async function wait({
@@ -60,17 +64,20 @@ async function wait({
   onProgress: (arg?: { msg: string; url?: string }) => void
 }) {
   const url = `${base}/iprscan5/status/${jobId}`
-  // eslint-disable-next-line no-constant-condition
-  while (true) {
-    for (let i = 0; i < 10; i++) {
-      await timeout(1000)
-      onProgress({ msg: `Checking status... ${10 - i}`, url })
-    }
-    const result = await textfetch(url)
-
-    if (result === 'FINISHED') {
-      break
+  try {
+    // eslint-disable-next-line no-constant-condition
+    while (true) {
+      for (let i = 0; i < 10; i++) {
+        await timeout(1000)
+        onProgress({ msg: `Checking status ${10 - i}`, url })
+      }
+      const result = await textfetch(url)
+      if (result.includes('FINISHED')) {
+        break
+      }
     }
+  } finally {
+    onProgress()
   }
 }
 
@@ -80,19 +87,59 @@ export async function launchInterProScan({
   programs,
   onJobId,
   onProgress,
+  model,
 }: {
   algorithm: string
   seq: string
   programs: string[]
   onProgress: (arg?: { msg: string; url?: string }) => void
-  onJobId: (arg: string) => void
+  onJobId?: (arg: string) => void
+  model: MsaViewModel
 }) {
-  onProgress({ msg: `Launching ${algorithm} MSA...` })
-  if (algorithm === 'interproscan') {
-    const result = await runInterProScan({ seq, onJobId, onProgress, programs })
+  try {
+    onProgress({ msg: `Launching ${algorithm} MSA` })
+    if (algorithm === 'interproscan') {
+      const result = await runInterProScan({
+        seq,
+        onJobId,
+        onProgress,
+        programs,
+        model,
+      })
+      return result
+    } else {
+      throw new Error('unknown algorithm')
+    }
+  } finally {
     onProgress()
-    return result
-  } else {
-    throw new Error('unknown algorithm')
+  }
+}
+
+export async function loadInterProScanResultsWithStatus({
+  jobId,
+  model,
+}: {
+  jobId: string
+  model: MsaViewModel
+}) {
+  try {
+    model.setStatus({
+      msg:
+        'Downloading results of ' +
+        jobId +
+        ' (for larger sequences this can be slow, click status to download and upload in the manual tab)',
+      url: `https://www.ebi.ac.uk/Tools/services/rest/iprscan5/result/${jobId}/json`,
+    })
+    const ret = await loadInterProScanResults(jobId)
+    model.setLoadedInterProAnnotations(
+      Object.fromEntries(ret.results.map(r => [r.xref[0].id, r])),
+    )
+    model.setShowDomains(true)
+    getSession(model).notify(`Loaded interproscan ${jobId} results`, 'success')
+  } catch (e) {
+    console.error(e)
+    getSession(model).notifyError(`${e}`, e)
+  } finally {
+    model.setStatus()
   }
 }