jbrowse-plugin-msaview 2.3.5 → 2.4.0

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

@@ -18,7 +18,7 @@ import { makeStyles } from 'tss-react/mui'
 
 import CachedBlastResults from './CachedBlastResults'
 import { blastLaunchView } from './blastLaunchView'
-import { msaAlgorithms } from './consts'
+import { blastDatabaseOptions, blastPrograms, msaAlgorithms } from './consts'
 import { useCachedBlastResults } from './useCachedBlastResults'
 import TextField2 from '../../../components/TextField2'
 import {
@@ -29,7 +29,7 @@ import {
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
 
-import type { MsaAlgorithm } from './consts'
+import type { BlastDatabase, BlastProgram, MsaAlgorithm } from './consts'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
@@ -55,12 +55,6 @@ const useStyles = makeStyles()({
   },
 })
 
-const blastDatabaseOptions = ['nr', 'nr_cluster_seq'] as const
-const blastPrograms = ['blastp', 'quick-blastp'] as const
-
-type blastDatabaseOptionsT = (typeof blastDatabaseOptions)[number]
-type blastProgramsT = (typeof blastPrograms)[number]
-
 const NCBIBlastAutomaticPanel = observer(function ({
   handleClose,
   feature,
@@ -78,11 +72,11 @@ const NCBIBlastAutomaticPanel = observer(function ({
   const view = getContainingView(model) as LinearGenomeViewModel
   const [launchViewError, setLaunchViewError] = useState<unknown>()
   const [selectedBlastDatabase, setSelectedBlastDatabase] =
-    useState<blastDatabaseOptionsT>('nr')
+    useState<BlastDatabase>('nr')
   const [selectedMsaAlgorithm, setSelectedMsaAlgorithm] =
     useState<MsaAlgorithm>('clustalo')
   const [selectedBlastProgram, setSelectedBlastProgram] =
-    useState<blastProgramsT>('quick-blastp')
+    useState<BlastProgram>('quick-blastp')
 
   const geneIds = useMemo(() => getGeneIdentifiers(feature), [feature])
   const { results: cachedResults, error: cachedResultsError } =
@@ -109,8 +103,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
           select
           value={selectedBlastDatabase}
           onChange={event => {
-            const newDb = event.target
-              .value as (typeof blastDatabaseOptions)[number]
+            const newDb = event.target.value as BlastDatabase
             setSelectedBlastDatabase(newDb)
             if (newDb === 'nr_cluster_seq') {
               setSelectedBlastProgram('blastp')
@@ -150,9 +143,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
             select
             value={selectedBlastProgram}
             onChange={event => {
-              setSelectedBlastProgram(
-                event.target.value as (typeof blastPrograms)[number],
-              )
+              setSelectedBlastProgram(event.target.value as BlastProgram)
             }}
           >
             {blastPrograms.map(val => (
@@ -229,18 +220,23 @@ const NCBIBlastAutomaticPanel = observer(function ({
                   proteinSequence,
                 },
               })
+              handleClose()
             } catch (e) {
               console.error(e)
               setLaunchViewError(e)
             }
-
-            handleClose()
           }}
           disabled={!proteinSequence}
         >
           Submit
         </Button>
-        <Button color="secondary" variant="contained" onClick={handleClose}>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
           Cancel
         </Button>
       </DialogActions>

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

@@ -26,6 +26,9 @@ const useStyles = makeStyles()({
     margin: 30,
     maxWidth: 600,
   },
+  infoText: {
+    marginTop: 20,
+  },
 })
 
 const NCBIBlastManualPanel = observer(function ({
@@ -77,7 +80,7 @@ const NCBIBlastManualPanel = observer(function ({
           </div>
         ) : null}
 
-        <Typography style={{ marginTop: 20 }}>
+        <Typography className={classes.infoText}>
           Click the link above and run your BLAST query, and once you have
           results, click "Multiple Alignment" at the top of the results page to
           be redirected to COBALT, NCBI's multiple sequence aligner. Once COBALT
@@ -93,15 +96,6 @@ const NCBIBlastManualPanel = observer(function ({
           onClick={() => {
             handleClose()
           }}
-        >
-          Submit
-        </Button>
-        <Button
-          color="secondary"
-          variant="contained"
-          onClick={() => {
-            handleClose()
-          }}
         >
           Close
         </Button>

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

@@ -3,6 +3,7 @@ import React, { useState } from 'react'
 import { useLocalStorage } from '@jbrowse/core/util'
 import SettingsIcon from '@mui/icons-material/Settings'
 import { IconButton } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 import NCBIBlastAutomaticPanel from './NCBIBlastAutomaticPanel'
 import NCBIBlastManualPanel from './NCBIBlastManualPanel'
@@ -13,6 +14,12 @@ import { BASE_BLAST_URL } from './consts'
 
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 
+const useStyles = makeStyles()({
+  settingsButton: {
+    float: 'right',
+  },
+})
+
 const panelMap = {
   automatic: NCBIBlastAutomaticPanel,
   rid: NCBIBlastRIDPanel,
@@ -34,13 +41,14 @@ export default function NCBIBlastPanel({
     BASE_BLAST_URL,
   )
   const [settingsOpen, setSettingsOpen] = useState(false)
+  const { classes } = useStyles()
 
   const Panel = panelMap[lookupMethod as keyof typeof panelMap]
 
   return (
     <>
       <IconButton
-        style={{ float: 'right' }}
+        className={classes.settingsButton}
         size="small"
         onClick={() => {
           setSettingsOpen(true)

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

@@ -28,6 +28,15 @@ const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
   },
+  marginBottom: {
+    marginBottom: 16,
+  },
+  ridField: {
+    width: 150,
+  },
+  infoText: {
+    marginTop: 20,
+  },
 })
 
 const NCBIBlastRIDPanel = observer(function ({
@@ -60,7 +69,6 @@ const NCBIBlastRIDPanel = observer(function ({
   } = useTranscriptSelection({ feature, view })
 
   const e = proteinSequenceError ?? launchViewError
-  const style = { width: 150 }
   const trimmedRid = rid.trim()
 
   return (
@@ -69,7 +77,7 @@ const NCBIBlastRIDPanel = observer(function ({
         {children}
         {e ? <ErrorMessage error={e} /> : null}
 
-        <Typography variant="body2" style={{ marginBottom: 16 }}>
+        <Typography variant="body2" className={classes.marginBottom}>
           Enter the RID (Request ID) from a previously submitted NCBI BLAST
           query. You can find the RID in the BLAST results page URL or at the
           top of the results page. RIDs are typically valid for 24-36 hours
@@ -81,7 +89,7 @@ const NCBIBlastRIDPanel = observer(function ({
           label="BLAST RID"
           placeholder="e.g., ABC12345"
           fullWidth
-          style={{ marginBottom: 16 }}
+          className={classes.marginBottom}
           value={rid}
           onChange={event => {
             setRid(event.target.value)
@@ -89,7 +97,7 @@ const NCBIBlastRIDPanel = observer(function ({
         />
 
         {trimmedRid ? (
-          <Typography variant="body2" style={{ marginBottom: 16 }}>
+          <Typography variant="body2" className={classes.marginBottom}>
             <ExternalLink href={`${baseUrl}?CMD=Get&RID=${trimmedRid}`}>
               View BLAST results on NCBI
             </ExternalLink>
@@ -99,7 +107,7 @@ const NCBIBlastRIDPanel = observer(function ({
         <TextField2
           variant="outlined"
           label="MSA Algorithm"
-          style={style}
+          className={classes.ridField}
           select
           value={selectedMsaAlgorithm}
           onChange={event => {
@@ -122,7 +130,7 @@ const NCBIBlastRIDPanel = observer(function ({
           proteinSequence={proteinSequence}
         />
 
-        <Typography style={{ marginTop: 20 }}>
+        <Typography className={classes.infoText}>
           This will fetch the BLAST results for the provided RID and run them
           through a multiple sequence alignment. The protein sequence from the
           selected transcript will be added as the query sequence in the MSA.
@@ -152,12 +160,11 @@ const NCBIBlastRIDPanel = observer(function ({
                   rid: trimmedRid,
                 },
               })
+              handleClose()
             } catch (e) {
               console.error(e)
               setLaunchViewError(e)
             }
-
-            handleClose()
           }}
           disabled={!proteinSequence || !trimmedRid}
         >

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

@@ -7,10 +7,17 @@ import {
   DialogContent,
   DialogTitle,
 } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
 
 import { BASE_BLAST_URL } from './consts'
 import TextField2 from '../../../components/TextField2'
 
+const useStyles = makeStyles()({
+  urlField: {
+    minWidth: 300,
+  },
+})
+
 export default function NCBISettingsDialog({
   handleClose,
   baseUrl,
@@ -18,6 +25,7 @@ export default function NCBISettingsDialog({
   handleClose: (arg?: string) => void
   baseUrl: string
 }) {
+  const { classes } = useStyles()
   const [tempBaseUrl, setTempBaseUrl] = useState(baseUrl)
   return (
     <Dialog
@@ -36,7 +44,7 @@ export default function NCBISettingsDialog({
           fullWidth
           variant="outlined"
           value={tempBaseUrl}
-          style={{ minWidth: '300px' }}
+          className={classes.urlField}
           onChange={e => {
             setTempBaseUrl(e.target.value)
           }}

package/src/LaunchMsaView/components/NCBIBlastQuery/blastLaunchView.ts

@@ -1,6 +1,6 @@
 import { getSession } from '@jbrowse/core/util'
 
-import type { JBrowsePluginMsaViewModel } from '../../../MsaViewPanel/model'
+import type { BlastParams } from '../../../MsaViewPanel/model'
 import type { CachedBlastResult } from '../../../utils/blastCache'
 import type { Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
@@ -14,9 +14,9 @@ export function blastLaunchView({
   newViewTitle: string
   view: LinearGenomeViewModel
   feature: Feature
-  blastParams: Record<string, unknown>
+  blastParams: BlastParams
 }) {
-  return getSession(view).addView('MsaView', {
+  getSession(view).addView('MsaView', {
     type: 'MsaView',
     displayName: newViewTitle,
     connectedViewId: view.id,
@@ -25,7 +25,7 @@ export function blastLaunchView({
     colWidth: 10,
     rowHeight: 12,
     blastParams,
-  }) as JBrowsePluginMsaViewModel
+  })
 }
 
 export function blastLaunchViewFromCache({
@@ -37,7 +37,7 @@ export function blastLaunchViewFromCache({
   view: LinearGenomeViewModel
   cached: CachedBlastResult
 }) {
-  return getSession(view).addView('MsaView', {
+  getSession(view).addView('MsaView', {
     type: 'MsaView',
     displayName: newViewTitle,
     connectedViewId: view.id,
@@ -49,5 +49,5 @@ export function blastLaunchViewFromCache({
       tree: cached.tree,
       treeMetadata: cached.treeMetadata,
     },
-  }) as JBrowsePluginMsaViewModel
+  })
 }

package/src/LaunchMsaView/components/NCBIBlastQuery/consts.ts

@@ -1,3 +1,10 @@
 export const BASE_BLAST_URL = 'https://blast.ncbi.nlm.nih.gov/Blast.cgi'
+
 export const msaAlgorithms = ['clustalo', 'muscle', 'kalign', 'mafft'] as const
 export type MsaAlgorithm = (typeof msaAlgorithms)[number]
+
+export const blastDatabaseOptions = ['nr', 'nr_cluster_seq'] as const
+export type BlastDatabase = (typeof blastDatabaseOptions)[number]
+
+export const blastPrograms = ['blastp', 'quick-blastp'] as const
+export type BlastProgram = (typeof blastPrograms)[number]

package/src/LaunchMsaView/components/NCBIBlastQuery/useCachedBlastResults.ts

@@ -10,6 +10,9 @@ const swrConfig = {
   revalidateOnFocus: false,
   revalidateOnReconnect: false,
   revalidateIfStale: false,
+  refreshWhenHidden: false,
+  refreshWhenOffline: false,
+  shouldRetryOnError: false,
 }
 
 export function useCachedBlastResults(geneIds: string[]) {

package/src/LaunchMsaView/components/PreLoadedMSA/PreLoadedMSADataPanel.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 
-import { readConfObject } from '@jbrowse/core/configuration'
 import { ErrorMessage, LoadingEllipses, SanitizedHTML } from '@jbrowse/core/ui'
 import { getContainingView, getEnv, getSession } from '@jbrowse/core/util'
 import { Button, DialogActions, DialogContent, MenuItem } from '@mui/material'
@@ -15,8 +14,8 @@ import { useTranscriptSelection } from '../useTranscriptSelection'
 import { swrFlags } from './consts'
 import { fetchMSA, fetchMSAList } from './fetchMSAData'
 import { preCalculatedLaunchView } from './preCalculatedLaunchView'
+import { readMsaDatasets } from './types'
 
-import type { Dataset } from './types'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
@@ -24,6 +23,9 @@ const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
   },
+  selectedContainer: {
+    marginTop: 50,
+  },
 })
 
 const PreLoadedMSA = observer(function ({
@@ -42,10 +44,7 @@ const PreLoadedMSA = observer(function ({
   const { assemblyNames } = view
   const [viewError, setViewError] = useState<unknown>()
 
-  const { jbrowse } = session
-  const datasets = readConfObject(jbrowse, ['msa', 'datasets']) as
-    | Dataset[]
-    | undefined
+  const datasets = readMsaDatasets(session.jbrowse)
   const [selectedDatasetId, setSelectedDatasetId] = useState(
     datasets?.[0]?.datasetId,
   )
@@ -55,14 +54,8 @@ const PreLoadedMSA = observer(function ({
     isLoading: msaListLoading,
     error: msaListFetchError,
   } = useSWR(
-    selectedDatasetId ? `${selectedDatasetId}-msa-list` : 'none-msa-list',
-    () =>
-      selectedDataset
-        ? fetchMSAList({
-            config: selectedDataset.adapter,
-            pluginManager,
-          })
-        : undefined,
+    selectedDataset ? `${selectedDataset.datasetId}-msa-list` : null,
+    () => fetchMSAList({ config: selectedDataset!.adapter, pluginManager }),
     swrFlags,
   )
 
@@ -80,25 +73,20 @@ const PreLoadedMSA = observer(function ({
     isLoading: msaDataLoading,
     error: msaDataFetchError,
   } = useSWR(
-    selectedId && selectedDatasetId
-      ? `${selectedDatasetId}-${selectedId}-${msaList?.length}-msa`
-      : 'none-msa',
+    selectedId && selectedDataset && msaList
+      ? `${selectedDataset.datasetId}-${selectedId}-${msaList.length}-msa`
+      : null,
     () =>
-      selectedId && selectedDataset && msaList
-        ? fetchMSA({
-            msaId: selectedId,
-            config: selectedDataset.adapter,
-            pluginManager,
-          })
-        : undefined,
+      fetchMSA({
+        msaId: selectedId,
+        config: selectedDataset!.adapter,
+        pluginManager,
+      }),
     swrFlags,
   )
 
   const e =
     msaListFetchError ?? msaDataFetchError ?? proteinSequenceError ?? viewError
-  if (e) {
-    console.error(e)
-  }
   return (
     <>
       <DialogContent className={classes.dialogContent}>
@@ -120,7 +108,7 @@ const PreLoadedMSA = observer(function ({
         </TextField2>
 
         {selectedDataset ? (
-          <div style={{ marginTop: 50 }}>
+          <div className={classes.selectedContainer}>
             {!msaListLoading && msaDataLoading ? (
               <LoadingEllipses
                 variant="h6"
@@ -183,7 +171,13 @@ const PreLoadedMSA = observer(function ({
         >
           Submit
         </Button>
-        <Button color="secondary" variant="contained" onClick={handleClose}>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
           Cancel
         </Button>
       </DialogActions>

package/src/LaunchMsaView/components/PreLoadedMSA/types.ts

@@ -1,3 +1,5 @@
+import { readConfObject } from '@jbrowse/core/configuration'
+
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
 
 export interface Dataset {
@@ -6,3 +8,7 @@ export interface Dataset {
   description?: string
   adapter: AnyConfigurationModel
 }
+
+export function readMsaDatasets(jbrowse: AnyConfigurationModel) {
+  return readConfObject(jbrowse, ['msa', 'datasets']) as Dataset[] | undefined
+}

package/src/LaunchMsaView/components/TabPanel.tsx

@@ -13,7 +13,7 @@ export default function TabPanel({
 }) {
   return (
     <div role="tabpanel" hidden={value !== index} {...other}>
-      {value === index && <div>{children}</div>}
+      {value === index ? <div>{children}</div> : null}
     </div>
   )
 }

package/src/LaunchMsaView/components/TranscriptSelector.tsx

@@ -21,6 +21,10 @@ const useStyles = makeStyles()({
   minWidth: {
     minWidth: 300,
   },
+  centered: {
+    alignContent: 'center',
+    marginLeft: 20,
+  },
 })
 
 export default function TranscriptSelector({
@@ -70,7 +74,7 @@ export default function TranscriptSelector({
             )
           })}
         </TextField>
-        <div style={{ alignContent: 'center', marginLeft: 20 }}>
+        <div className={classes.centered}>
           <Button
             variant="contained"
             color="primary"
@@ -83,7 +87,7 @@ export default function TranscriptSelector({
         </div>
       </div>
 
-      {showSequence && (
+      {showSequence ? (
         <ReadOnlyTextField2
           value={
             proteinSequence
@@ -91,7 +95,7 @@ export default function TranscriptSelector({
               : 'Loading...'
           }
         />
-      )}
+      ) : null}
     </>
   )
 }

package/src/LaunchMsaView/components/types.ts

@@ -6,7 +6,4 @@ export interface Feat {
 
 export interface SeqState {
   seq: string
-  upstream?: string
-  downstream?: string
-  error?: unknown
 }

package/src/LaunchMsaView/components/useFeatureSequence.ts

@@ -6,23 +6,17 @@ import type { Feature } from '@jbrowse/core/util'
 export function useFeatureSequence({
   view,
   feature,
-  upDownBp = 0,
-  forceLoad = true,
 }: {
   view: { assemblyNames?: string[] } | undefined
   feature?: Feature
-  upDownBp?: number
-  forceLoad?: boolean
 }) {
   const { sequence, error } = useSWRFeatureSequence({
     view,
     feature,
-    upDownBp,
-    forceLoad,
   })
 
   const proteinSequence =
-    sequence && !('error' in sequence) && feature
+    sequence && feature
       ? getProteinSequenceFromFeature({
           seq: sequence.seq,
           feature,

package/src/LaunchMsaView/components/useSWRFeatureSequence.ts

@@ -3,77 +3,50 @@ import useSWR from 'swr'
 
 import { fetchSeq } from './fetchSeq'
 
-import type { SeqState } from './types'
 import type { Feature } from '@jbrowse/core/util'
 
 async function featureSequenceFetcher({
   feature,
   assemblyName,
-  upDownBp,
   view,
 }: {
   feature: Feature
   assemblyName: string
-  upDownBp: number
   view: { assemblyNames?: string[] }
-}): Promise<SeqState | undefined> {
+}) {
   const session = getSession(view)
   const { start, end, refName } = feature.toJSON() as {
     start: number
     end: number
     refName: string
   }
-
-  const b = start - upDownBp
-  const e = end + upDownBp
-  const [seq, upstream, downstream] = await Promise.all([
-    fetchSeq({
-      start,
-      end,
-      refName,
-      assemblyName,
-      session,
-    }),
-    fetchSeq({
-      start: Math.max(0, b),
-      end: start,
-      refName,
-      assemblyName,
-      session,
-    }),
-    fetchSeq({
-      start: end,
-      end: e,
-      refName,
-      assemblyName,
-      session,
-    }),
-  ])
-  return { seq, upstream, downstream }
+  const seq = await fetchSeq({
+    start,
+    end,
+    refName,
+    assemblyName,
+    session,
+  })
+  return { seq }
 }
 
 export function useSWRFeatureSequence({
   view,
   feature,
-  upDownBp = 0,
-  forceLoad = true,
 }: {
   view: { assemblyNames?: string[] } | undefined
   feature?: Feature
-  upDownBp?: number
-  forceLoad?: boolean
 }) {
   const assemblyName = view?.assemblyNames?.[0]
   const { data, error } = useSWR(
     // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
     feature && assemblyName && view
-      ? [feature.id(), assemblyName, upDownBp, forceLoad, 'feature-sequence']
+      ? [feature.id(), assemblyName, 'feature-sequence']
       : null,
     () =>
       featureSequenceFetcher({
         feature: feature!,
         assemblyName: assemblyName!,
-        upDownBp,
         view: view!,
       }),
     {