jbrowse-plugin-msaview 2.4.2 → 2.4.3

package/dist/{LaunchMsaView/components/PreLoadedMSA/consts.d.ts → utils/swrConfig.d.ts}

@@ -1,4 +1,4 @@
-export declare const swrFlags: {
+export declare const staticSwrConfig: {
     revalidateOnFocus: boolean;
     revalidateOnReconnect: boolean;
     revalidateIfStale: boolean;

package/dist/{LaunchMsaView/components/PreLoadedMSA/consts.js → utils/swrConfig.js}

@@ -1,4 +1,4 @@
-export const swrFlags = {
+export const staticSwrConfig = {
     revalidateOnFocus: false,
     revalidateOnReconnect: false,
     revalidateIfStale: false,
@@ -6,4 +6,4 @@ export const swrFlags = {
     refreshWhenOffline: false,
     shouldRetryOnError: false,
 };
-//# sourceMappingURL=consts.js.map
+//# sourceMappingURL=swrConfig.js.map

package/dist/utils/swrConfig.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"swrConfig.js","sourceRoot":"","sources":["../../src/utils/swrConfig.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,eAAe,GAAG;IAC7B,iBAAiB,EAAE,KAAK;IACxB,qBAAqB,EAAE,KAAK;IAC5B,iBAAiB,EAAE,KAAK;IACxB,iBAAiB,EAAE,KAAK;IACxB,kBAAkB,EAAE,KAAK;IACzB,kBAAkB,EAAE,KAAK;CAC1B,CAAA"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.4.2";
+export declare const version = "2.4.3";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '2.4.2';
+export const version = '2.4.3';
 //# sourceMappingURL=version.js.map

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.4.2",
+  "version": "2.4.3",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "repository": {

package/src/LaunchMsaView/components/LaunchMsaViewDialog.tsx

@@ -25,15 +25,18 @@ export default function LaunchMsaViewDialog({
   const datasets = readMsaDatasets(session.jbrowse)
   const hasPreloadedDatasets = !!datasets?.length
 
-  const [value, setValue] = useState('ncbi_blast')
-
-  const handleChange = (_event: React.SyntheticEvent, newValue: string) => {
-    setValue(newValue)
-  }
+  const [value, setValue] = useState<
+    'ncbi_blast' | 'preloaded_msa' | 'manual_msa'
+  >('ncbi_blast')
 
   return (
     <Dialog maxWidth="xl" title="Launch MSA view" open onClose={handleClose}>
-      <Tabs value={value} onChange={handleChange}>
+      <Tabs
+        value={value}
+        onChange={(_event, newValue) => {
+          setValue(newValue)
+        }}
+      >
         <Tab label="NCBI BLAST query" value="ncbi_blast" />
         {hasPreloadedDatasets ? (
           <Tab label="Pre-loaded MSA datasets" value="preloaded_msa" />

package/src/LaunchMsaView/components/LaunchPanelContent.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+
+import { ErrorMessage } from '@jbrowse/core/ui'
+import { DialogContent } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()({
+  dialogContent: {
+    width: '80em',
+  },
+})
+
+export default function LaunchPanelContent({
+  error,
+  children,
+}: {
+  error?: unknown
+  children: React.ReactNode
+}) {
+  const { classes } = useStyles()
+  return (
+    <DialogContent className={classes.dialogContent}>
+      {error ? <ErrorMessage error={error} /> : null}
+      {children}
+    </DialogContent>
+  )
+}

package/src/LaunchMsaView/components/ManualMSALoader/ManualMSALoader.tsx

@@ -1,12 +1,9 @@
 import React, { useState } from 'react'
 
-import { ErrorMessage, FileSelector } from '@jbrowse/core/ui'
-import { getContainingView, getSession } from '@jbrowse/core/util'
+import { FileSelector } from '@jbrowse/core/ui'
+import { getSession } from '@jbrowse/core/util'
 import {
   Alert,
-  Button,
-  DialogActions,
-  DialogContent,
   FormControl,
   FormControlLabel,
   Radio,
@@ -17,7 +14,9 @@ import { makeStyles } from 'tss-react/mui'
 
 import { launchView } from './launchView'
 import TextField2 from '../../../components/TextField2'
-import { getGeneDisplayName } from '../../util'
+import { getGeneDisplayName, getLinearGenomeView } from '../../util'
+import LaunchPanelContent from '../LaunchPanelContent'
+import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
 
@@ -26,12 +25,8 @@ import type {
   Feature,
   FileLocation,
 } from '@jbrowse/core/util'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 const useStyles = makeStyles()({
-  dialogContent: {
-    width: '80em',
-  },
   textAreaFont: {
     fontFamily: 'Courier New',
   },
@@ -62,7 +57,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
   handleClose: () => void
 }) {
   const session = getSession(model)
-  const view = getContainingView(model) as LinearGenomeViewModel
+  const view = getLinearGenomeView(model)
   const { classes } = useStyles()
   const [launchViewError, setLaunchViewError] = useState<unknown>()
   const [inputMethod, setInputMethod] = useState<'file' | 'text'>('file')
@@ -71,20 +66,13 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
   const [msaFileLocation, setMsaFileLocation] = useState<FileLocation>()
   const [treeFileLocation, setTreeFileLocation] = useState<FileLocation>()
   const [querySeqName, setQuerySeqName] = useState('')
-  const {
-    options,
-    selectedId,
-    setSelectedId,
-    selectedTranscript,
-    proteinSequence,
-    error,
-  } = useTranscriptSelection({ feature, view })
+  const transcriptSelection = useTranscriptSelection({ feature, view })
+  const { selectedTranscript, error } = transcriptSelection
 
   const e = launchViewError ?? error
   return (
     <>
-      <DialogContent className={classes.dialogContent}>
-        {e ? <ErrorMessage error={e} /> : null}
+      <LaunchPanelContent error={e}>
         <FormControl component="fieldset">
           <RadioGroup
             row
@@ -155,14 +143,7 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
           )}
         </div>
 
-        <TranscriptSelector
-          feature={feature}
-          options={options}
-          selectedId={selectedId}
-          selectedTranscript={selectedTranscript}
-          onTranscriptChange={setSelectedId}
-          proteinSequence={proteinSequence}
-        />
+        <TranscriptSelector feature={feature} {...transcriptSelection} />
 
         <TextField2
           variant="outlined"
@@ -185,25 +166,23 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
             highlights will not work.
           </Alert>
         ) : null}
-      </DialogContent>
+      </LaunchPanelContent>
 
-      <DialogActions>
-        <Button
-          color="primary"
-          variant="contained"
-          disabled={
-            !selectedTranscript ||
-            (inputMethod === 'file' && !msaFileLocation) ||
-            (inputMethod === 'text' && !msaText.trim())
-          }
-          onClick={() => {
-            try {
+      <SubmitCancelActions
+        submitDisabled={
+          !selectedTranscript ||
+          (inputMethod === 'file' && !msaFileLocation) ||
+          (inputMethod === 'text' && !msaText.trim())
+        }
+        onSubmit={() => {
+          try {
+            if (selectedTranscript) {
               setLaunchViewError(undefined)
               launchView({
                 session,
                 newViewTitle: getGeneDisplayName(selectedTranscript),
                 view,
-                feature: selectedTranscript!,
+                feature: selectedTranscript,
                 querySeqName: querySeqName.trim(),
                 ...(inputMethod === 'file'
                   ? {
@@ -217,26 +196,15 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
                       },
                     }),
               })
-
               handleClose()
-            } catch (err) {
-              console.error(err)
-              setLaunchViewError(err)
             }
-          }}
-        >
-          Submit
-        </Button>
-        <Button
-          color="secondary"
-          variant="contained"
-          onClick={() => {
-            handleClose()
-          }}
-        >
-          Cancel
-        </Button>
-      </DialogActions>
+          } catch (err) {
+            console.error(err)
+            setLaunchViewError(err)
+          }
+        }}
+        onCancel={handleClose}
+      />
     </>
   )
 })

package/src/LaunchMsaView/components/NCBIBlastQuery/CachedBlastResults.tsx

@@ -1,7 +1,6 @@
 import React, { useMemo, useState } from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
-import { getContainingView } from '@jbrowse/core/util'
 import DeleteIcon from '@mui/icons-material/Delete'
 import {
   Button,
@@ -17,11 +16,10 @@ import { makeStyles } from 'tss-react/mui'
 
 import { blastLaunchViewFromCache } from './blastLaunchView'
 import { useCachedBlastResults } from './useCachedBlastResults'
-import { getGeneIdentifiers } from '../../util'
+import { getGeneIdentifiers, getLinearGenomeView } from '../../util'
 
 import type { CachedBlastResult } from '../../../utils/blastCache'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 const useStyles = makeStyles()({
   header: {
@@ -37,17 +35,15 @@ const useStyles = makeStyles()({
 })
 
 function getResultDisplayName(result: CachedBlastResult): string {
-  const parts = []
-  if (result.geneName) {
-    parts.push(result.geneName)
-  }
-  if (result.transcriptName && result.transcriptName !== result.geneName) {
-    parts.push(result.transcriptName)
-  }
-  if (parts.length === 0) {
-    parts.push(result.geneId ?? result.transcriptId ?? 'Unknown')
-  }
-  return parts.join(' - ')
+  const parts = [
+    result.geneName,
+    result.transcriptName !== result.geneName
+      ? result.transcriptName
+      : undefined,
+  ].filter((p): p is string => !!p)
+  return parts.length > 0
+    ? parts.join(' - ')
+    : (result.geneId ?? result.transcriptId ?? 'Unknown')
 }
 
 const CachedBlastResults = observer(function ({
@@ -60,7 +56,7 @@ const CachedBlastResults = observer(function ({
   feature: Feature
 }) {
   const { classes } = useStyles()
-  const view = getContainingView(model) as LinearGenomeViewModel
+  const view = getLinearGenomeView(model)
   const [operationError, setOperationError] = useState<unknown>()
 
   const geneIds = useMemo(() => getGeneIdentifiers(feature), [feature])
@@ -78,24 +74,16 @@ const CachedBlastResults = observer(function ({
   }
 
   const displayError = error ?? operationError
-  if (displayError) {
-    return <ErrorMessage error={displayError} />
-  }
-
-  if (isLoading) {
-    return <Typography>Loading cached results...</Typography>
-  }
-
-  if (results.length === 0) {
-    return (
-      <Typography color="textSecondary">
-        No cached BLAST results found for this gene. Run a BLAST query to cache
-        results.
-      </Typography>
-    )
-  }
-
-  return (
+  return displayError ? (
+    <ErrorMessage error={displayError} />
+  ) : isLoading ? (
+    <Typography>Loading cached results...</Typography>
+  ) : results.length === 0 ? (
+    <Typography color="textSecondary">
+      No cached BLAST results found for this gene. Run a BLAST query to cache
+      results.
+    </Typography>
+  ) : (
     <div>
       <div className={classes.header}>
         <Typography variant="subtitle1">

package/src/LaunchMsaView/components/NCBIBlastQuery/MsaAlgorithmSelect.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+
+import { MenuItem } from '@mui/material'
+
+import { msaAlgorithms } from './consts'
+import TextField2 from '../../../components/TextField2'
+
+import type { MsaAlgorithm } from './consts'
+
+export default function MsaAlgorithmSelect({
+  value,
+  onChange,
+  className,
+}: {
+  value: MsaAlgorithm
+  onChange: (val: MsaAlgorithm) => void
+  className?: string
+}) {
+  return (
+    <TextField2
+      variant="outlined"
+      label="MSA Algorithm"
+      className={className}
+      select
+      value={value}
+      onChange={event => {
+        onChange(event.target.value as MsaAlgorithm)
+      }}
+    >
+      {msaAlgorithms.map(val => (
+        <MenuItem value={val} key={val}>
+          {val}
+        </MenuItem>
+      ))}
+    </TextField2>
+  )
+}

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastAutomaticPanel.tsx

@@ -1,15 +1,10 @@
 import React, { useMemo, useState } from 'react'
 
-import { ErrorMessage } from '@jbrowse/core/ui'
-import { getContainingView } from '@jbrowse/core/util'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import {
   Accordion,
   AccordionDetails,
   AccordionSummary,
-  Button,
-  DialogActions,
-  DialogContent,
   MenuItem,
   Typography,
 } from '@mui/material'
@@ -17,26 +12,25 @@ import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import CachedBlastResults from './CachedBlastResults'
+import MsaAlgorithmSelect from './MsaAlgorithmSelect'
 import { blastLaunchView } from './blastLaunchView'
-import { blastDatabaseOptions, blastPrograms, msaAlgorithms } from './consts'
+import { blastDatabaseOptions, blastPrograms } from './consts'
 import { useCachedBlastResults } from './useCachedBlastResults'
 import TextField2 from '../../../components/TextField2'
 import {
-  getGeneDisplayName,
+  getBlastViewTitle,
   getGeneIdentifiers,
-  getTranscriptDisplayName,
+  getLinearGenomeView,
 } from '../../util'
+import LaunchPanelContent from '../LaunchPanelContent'
+import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
 
 import type { BlastDatabase, BlastProgram, MsaAlgorithm } from './consts'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 const useStyles = makeStyles()({
-  dialogContent: {
-    width: '80em',
-  },
   selectField: {
     width: 150,
   },
@@ -69,7 +63,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
   children: React.ReactNode
 }) {
   const { classes } = useStyles()
-  const view = getContainingView(model) as LinearGenomeViewModel
+  const view = getLinearGenomeView(model)
   const [launchViewError, setLaunchViewError] = useState<unknown>()
   const [selectedBlastDatabase, setSelectedBlastDatabase] =
     useState<BlastDatabase>('nr')
@@ -82,20 +76,13 @@ const NCBIBlastAutomaticPanel = observer(function ({
   const { results: cachedResults, error: cachedResultsError } =
     useCachedBlastResults(geneIds)
 
-  const {
-    options,
-    selectedId,
-    setSelectedId,
-    selectedTranscript,
-    proteinSequence,
-    error: proteinSequenceError,
-  } = useTranscriptSelection({ feature, view })
-  const e = proteinSequenceError ?? launchViewError ?? cachedResultsError
+  const transcriptSelection = useTranscriptSelection({ feature, view })
+  const { selectedTranscript, proteinSequence } = transcriptSelection
+  const e = transcriptSelection.error ?? launchViewError ?? cachedResultsError
   return (
     <>
-      <DialogContent className={classes.dialogContent}>
+      <LaunchPanelContent error={e}>
         {children}
-        {e ? <ErrorMessage error={e} /> : null}
         <TextField2
           variant="outlined"
           label="BLAST database"
@@ -117,22 +104,11 @@ const NCBIBlastAutomaticPanel = observer(function ({
           ))}
         </TextField2>
 
-        <TextField2
-          variant="outlined"
-          label="MSA Algorithm"
+        <MsaAlgorithmSelect
           className={classes.selectField}
-          select
           value={selectedMsaAlgorithm}
-          onChange={event => {
-            setSelectedMsaAlgorithm(event.target.value as MsaAlgorithm)
-          }}
-        >
-          {msaAlgorithms.map(val => (
-            <MenuItem value={val} key={val}>
-              {val}
-            </MenuItem>
-          ))}
-        </TextField2>
+          onChange={setSelectedMsaAlgorithm}
+        />
 
         <div className={classes.databaseFieldContainer}>
           <TextField2
@@ -162,14 +138,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
           ) : null}
         </div>
 
-        <TranscriptSelector
-          feature={feature}
-          options={options}
-          selectedId={selectedId}
-          selectedTranscript={selectedTranscript}
-          onTranscriptChange={setSelectedId}
-          proteinSequence={proteinSequence}
-        />
+        <TranscriptSelector feature={feature} {...transcriptSelection} />
 
         <Typography className={classes.infoText}>
           This panel will automatically submit a query to NCBI. Using blastp can
@@ -196,21 +165,17 @@ const NCBIBlastAutomaticPanel = observer(function ({
             </AccordionDetails>
           </Accordion>
         ) : null}
-      </DialogContent>
-      <DialogActions>
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={() => {
-            try {
-              if (!selectedTranscript) {
-                return
-              }
+      </LaunchPanelContent>
+      <SubmitCancelActions
+        submitDisabled={!proteinSequence}
+        onSubmit={() => {
+          try {
+            if (selectedTranscript) {
               setLaunchViewError(undefined)
               blastLaunchView({
                 feature: selectedTranscript,
                 view,
-                newViewTitle: `BLAST - ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
+                newViewTitle: getBlastViewTitle(feature, selectedTranscript),
                 blastParams: {
                   baseUrl,
                   blastProgram: selectedBlastProgram,
@@ -221,25 +186,14 @@ const NCBIBlastAutomaticPanel = observer(function ({
                 },
               })
               handleClose()
-            } catch (e) {
-              console.error(e)
-              setLaunchViewError(e)
             }
-          }}
-          disabled={!proteinSequence}
-        >
-          Submit
-        </Button>
-        <Button
-          color="secondary"
-          variant="contained"
-          onClick={() => {
-            handleClose()
-          }}
-        >
-          Cancel
-        </Button>
-      </DialogActions>
+          } catch (e) {
+            console.error(e)
+            setLaunchViewError(e)
+          }
+        }}
+        onCancel={handleClose}
+      />
     </>
   )
 })

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastManualPanel.tsx

@@ -1,26 +1,19 @@
 import React from 'react'
 
-import { ErrorMessage } from '@jbrowse/core/ui'
-import { getContainingView, shorten2 } from '@jbrowse/core/util'
-import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
+import { shorten2 } from '@jbrowse/core/util'
+import { Button, DialogActions, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import ExternalLink from '../../../components/ExternalLink'
-import { cleanProteinSequence } from '../../util'
+import { cleanProteinSequence, getLinearGenomeView } from '../../util'
+import LaunchPanelContent from '../LaunchPanelContent'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
 
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 const useStyles = makeStyles()({
-  dialogContent: {
-    width: '80em',
-  },
-  textAreaFont: {
-    fontFamily: 'Courier New',
-  },
   ncbiLink: {
     wordBreak: 'break-all',
     margin: 30,
@@ -45,15 +38,9 @@ const NCBIBlastManualPanel = observer(function ({
   handleClose: () => void
 }) {
   const { classes } = useStyles()
-  const view = getContainingView(model) as LinearGenomeViewModel
-  const {
-    options,
-    selectedId,
-    setSelectedId,
-    selectedTranscript,
-    proteinSequence,
-    error,
-  } = useTranscriptSelection({ feature, view })
+  const view = getLinearGenomeView(model)
+  const transcriptSelection = useTranscriptSelection({ feature, view })
+  const { proteinSequence, error } = transcriptSelection
 
   const s2 = cleanProteinSequence(proteinSequence)
   const link = `${baseUrl}?PAGE_TYPE=BlastSearch&PAGE=Proteins&PROGRAM=blastp&QUERY=${s2}`
@@ -61,18 +48,10 @@ const NCBIBlastManualPanel = observer(function ({
 
   return (
     <>
-      <DialogContent className={classes.dialogContent}>
+      <LaunchPanelContent error={error}>
         {children}
-        {error ? <ErrorMessage error={error} /> : null}
 
-        <TranscriptSelector
-          feature={feature}
-          options={options}
-          selectedId={selectedId}
-          selectedTranscript={selectedTranscript}
-          onTranscriptChange={setSelectedId}
-          proteinSequence={proteinSequence}
-        />
+        <TranscriptSelector feature={feature} {...transcriptSelection} />
 
         {proteinSequence ? (
           <div className={classes.ncbiLink}>
@@ -87,7 +66,7 @@ const NCBIBlastManualPanel = observer(function ({
           completes, you can download an MSA (.aln file) and optionally a Newick
           tree (.nh) and paste the results into JBrowse
         </Typography>
-      </DialogContent>
+      </LaunchPanelContent>
 
       <DialogActions>
         <Button

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBIBlastMethodSelector.tsx

@@ -2,12 +2,14 @@ import React from 'react'
 
 import { FormControl, FormControlLabel, Radio, RadioGroup } from '@mui/material'
 
+import type { BlastLookupMethod } from './NCBIBlastPanel'
+
 export default function NCBIBlastMethodSelector({
   lookupMethod,
   setLookupMethod,
 }: {
-  lookupMethod: string
-  setLookupMethod: (method: string) => void
+  lookupMethod: BlastLookupMethod
+  setLookupMethod: (method: BlastLookupMethod) => void
 }) {
   return (
     <FormControl component="fieldset">
@@ -15,7 +17,7 @@ export default function NCBIBlastMethodSelector({
         row
         value={lookupMethod}
         onChange={event => {
-          setLookupMethod(event.target.value)
+          setLookupMethod(event.target.value as BlastLookupMethod)
         }}
       >
         <FormControlLabel