jbrowse-plugin-msaview 2.4.2 → 2.4.4

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

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

@@ -26,6 +26,8 @@ const panelMap = {
   manual: NCBIBlastManualPanel,
 } as const
 
+export type BlastLookupMethod = keyof typeof panelMap
+
 export default function NCBIBlastPanel({
   handleClose,
   model,
@@ -35,7 +37,8 @@ export default function NCBIBlastPanel({
   model: AbstractTrackModel
   feature: Feature
 }) {
-  const [lookupMethod, setLookupMethod] = useState('automatic')
+  const [lookupMethod, setLookupMethod] =
+    useState<BlastLookupMethod>('automatic')
   const [baseUrl, setBaseUrl] = useLocalStorage(
     'msa-blastRootUrl',
     BASE_BLAST_URL,
@@ -43,7 +46,7 @@ export default function NCBIBlastPanel({
   const [settingsOpen, setSettingsOpen] = useState(false)
   const { classes } = useStyles()
 
-  const Panel = panelMap[lookupMethod as keyof typeof panelMap]
+  const Panel = panelMap[lookupMethod]
 
   return (
     <>

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

@@ -1,33 +1,23 @@
 import React, { useState } from 'react'
 
-import { ErrorMessage } from '@jbrowse/core/ui'
-import { getContainingView } from '@jbrowse/core/util'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  MenuItem,
-  Typography,
-} from '@mui/material'
+import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
+import MsaAlgorithmSelect from './MsaAlgorithmSelect'
 import { blastLaunchView } from './blastLaunchView'
-import { msaAlgorithms } from './consts'
 import ExternalLink from '../../../components/ExternalLink'
 import TextField2 from '../../../components/TextField2'
-import { getGeneDisplayName, getTranscriptDisplayName } from '../../util'
+import { getBlastViewTitle, getLinearGenomeView } from '../../util'
+import LaunchPanelContent from '../LaunchPanelContent'
+import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
 
 import type { 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',
-  },
   marginBottom: {
     marginBottom: 16,
   },
@@ -53,29 +43,22 @@ const NCBIBlastRIDPanel = observer(function ({
   children: React.ReactNode
 }) {
   const { classes } = useStyles()
-  const view = getContainingView(model) as LinearGenomeViewModel
+  const view = getLinearGenomeView(model)
   const [launchViewError, setLaunchViewError] = useState<unknown>()
   const [rid, setRid] = useState('')
   const [selectedMsaAlgorithm, setSelectedMsaAlgorithm] =
     useState<MsaAlgorithm>('clustalo')
 
-  const {
-    options,
-    selectedId,
-    setSelectedId,
-    selectedTranscript,
-    proteinSequence,
-    error: proteinSequenceError,
-  } = useTranscriptSelection({ feature, view })
+  const transcriptSelection = useTranscriptSelection({ feature, view })
+  const { selectedTranscript, proteinSequence } = transcriptSelection
 
-  const e = proteinSequenceError ?? launchViewError
+  const e = transcriptSelection.error ?? launchViewError
   const trimmedRid = rid.trim()
 
   return (
     <>
-      <DialogContent className={classes.dialogContent}>
+      <LaunchPanelContent error={e}>
         {children}
-        {e ? <ErrorMessage error={e} /> : null}
 
         <Typography variant="body2" className={classes.marginBottom}>
           Enter the RID (Request ID) from a previously submitted NCBI BLAST
@@ -104,52 +87,30 @@ const NCBIBlastRIDPanel = observer(function ({
           </Typography>
         ) : null}
 
-        <TextField2
-          variant="outlined"
-          label="MSA Algorithm"
+        <MsaAlgorithmSelect
           className={classes.ridField}
-          select
           value={selectedMsaAlgorithm}
-          onChange={event => {
-            setSelectedMsaAlgorithm(event.target.value as MsaAlgorithm)
-          }}
-        >
-          {msaAlgorithms.map(val => (
-            <MenuItem value={val} key={val}>
-              {val}
-            </MenuItem>
-          ))}
-        </TextField2>
-
-        <TranscriptSelector
-          feature={feature}
-          options={options}
-          selectedId={selectedId}
-          selectedTranscript={selectedTranscript}
-          onTranscriptChange={setSelectedId}
-          proteinSequence={proteinSequence}
+          onChange={setSelectedMsaAlgorithm}
         />
 
+        <TranscriptSelector feature={feature} {...transcriptSelection} />
+
         <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.
         </Typography>
-      </DialogContent>
-      <DialogActions>
-        <Button
-          color="primary"
-          variant="contained"
-          onClick={() => {
-            try {
-              if (!selectedTranscript || !trimmedRid) {
-                return
-              }
+      </LaunchPanelContent>
+      <SubmitCancelActions
+        submitDisabled={!proteinSequence || !trimmedRid}
+        onSubmit={() => {
+          try {
+            if (selectedTranscript && trimmedRid) {
               setLaunchViewError(undefined)
               blastLaunchView({
                 feature: selectedTranscript,
                 view,
-                newViewTitle: `BLAST - ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
+                newViewTitle: getBlastViewTitle(feature, selectedTranscript),
                 blastParams: {
                   baseUrl,
                   blastProgram: 'blastp',
@@ -161,25 +122,14 @@ const NCBIBlastRIDPanel = observer(function ({
                 },
               })
               handleClose()
-            } catch (e) {
-              console.error(e)
-              setLaunchViewError(e)
             }
-          }}
-          disabled={!proteinSequence || !trimmedRid}
-        >
-          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/useCachedBlastResults.ts

@@ -5,15 +5,7 @@ import {
   deleteCachedResult,
   getAllCachedResults,
 } from '../../../utils/blastCache'
-
-const swrConfig = {
-  revalidateOnFocus: false,
-  revalidateOnReconnect: false,
-  revalidateIfStale: false,
-  refreshWhenHidden: false,
-  refreshWhenOffline: false,
-  shouldRetryOnError: false,
-}
+import { staticSwrConfig } from '../../../utils/swrConfig'
 
 export function useCachedBlastResults(geneIds: string[]) {
   const {
@@ -26,7 +18,7 @@ export function useCachedBlastResults(geneIds: string[]) {
       const cached = await getAllCachedResults()
       return cached.filter(r => r.geneId && geneIds.includes(r.geneId))
     },
-    swrConfig,
+    staticSwrConfig,
   )
 
   const handleDelete = async (id: string) => {

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

@@ -1,28 +1,26 @@
 import React, { useState } from 'react'
 
-import { ErrorMessage, LoadingEllipses, SanitizedHTML } from '@jbrowse/core/ui'
-import { getContainingView, getEnv, getSession } from '@jbrowse/core/util'
-import { Button, DialogActions, DialogContent, MenuItem } from '@mui/material'
+import { LoadingEllipses, SanitizedHTML } from '@jbrowse/core/ui'
+import { getEnv, getSession } from '@jbrowse/core/util'
+import { MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 import useSWR from 'swr'
 import { makeStyles } from 'tss-react/mui'
 
 import TextField2 from '../../../components/TextField2'
-import { getGeneDisplayName } from '../../util'
+import { staticSwrConfig } from '../../../utils/swrConfig'
+import { getGeneDisplayName, getLinearGenomeView } from '../../util'
+import LaunchPanelContent from '../LaunchPanelContent'
+import SubmitCancelActions from '../SubmitCancelActions'
 import TranscriptSelector from '../TranscriptSelector'
 import { useTranscriptSelection } from '../useTranscriptSelection'
-import { swrFlags } from './consts'
 import { fetchMSA, fetchMSAList } from './fetchMSAData'
 import { preCalculatedLaunchView } from './preCalculatedLaunchView'
 import { readMsaDatasets } from './types'
 
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
-import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 const useStyles = makeStyles()({
-  dialogContent: {
-    width: '80em',
-  },
   selectedContainer: {
     marginTop: 50,
   },
@@ -38,7 +36,7 @@ const PreLoadedMSA = observer(function ({
   handleClose: () => void
 }) {
   const session = getSession(model)
-  const view = getContainingView(model) as LinearGenomeViewModel
+  const view = getLinearGenomeView(model)
   const { classes } = useStyles()
   const { pluginManager } = getEnv(model)
   const { assemblyNames } = view
@@ -56,17 +54,15 @@ const PreLoadedMSA = observer(function ({
   } = useSWR(
     selectedDataset ? `${selectedDataset.datasetId}-msa-list` : null,
     () => fetchMSAList({ config: selectedDataset!.adapter, pluginManager }),
-    swrFlags,
+    staticSwrConfig,
   )
 
-  const {
-    options: transcripts,
-    selectedId,
-    setSelectedId,
-    selectedTranscript,
-    proteinSequence,
-    error: proteinSequenceError,
-  } = useTranscriptSelection({ feature, view, validIds: msaList })
+  const transcriptSelection = useTranscriptSelection({
+    feature,
+    view,
+    validIds: msaList,
+  })
+  const { selectedId, selectedTranscript } = transcriptSelection
 
   const {
     data: msaData,
@@ -82,16 +78,17 @@ const PreLoadedMSA = observer(function ({
         config: selectedDataset!.adapter,
         pluginManager,
       }),
-    swrFlags,
+    staticSwrConfig,
   )
 
   const e =
-    msaListFetchError ?? msaDataFetchError ?? proteinSequenceError ?? viewError
+    msaListFetchError ??
+    msaDataFetchError ??
+    transcriptSelection.error ??
+    viewError
   return (
     <>
-      <DialogContent className={classes.dialogContent}>
-        {e ? <ErrorMessage error={e} /> : null}
-
+      <LaunchPanelContent error={e}>
         <TextField2
           select
           label="Select MSA dataset"
@@ -127,29 +124,19 @@ const PreLoadedMSA = observer(function ({
                 <SanitizedHTML html={selectedDataset.description} />
                 <TranscriptSelector
                   feature={feature}
-                  options={transcripts}
-                  selectedId={selectedId}
-                  selectedTranscript={selectedTranscript}
-                  onTranscriptChange={setSelectedId}
-                  proteinSequence={proteinSequence}
-                  validIds={msaList}
+                  {...transcriptSelection}
                 />
               </div>
             ) : null}
           </div>
         ) : null}
-      </DialogContent>
+      </LaunchPanelContent>
 
-      <DialogActions>
-        <Button
-          color="primary"
-          variant="contained"
-          disabled={!selectedTranscript || !msaData?.length}
-          onClick={() => {
-            try {
-              if (!selectedTranscript || !msaData) {
-                return
-              }
+      <SubmitCancelActions
+        submitDisabled={!selectedTranscript || !msaData?.length}
+        onSubmit={() => {
+          try {
+            if (selectedTranscript && msaData) {
               const querySeqName = `${selectedId}_${assemblyNames[0]}`
               preCalculatedLaunchView({
                 session,
@@ -164,23 +151,13 @@ const PreLoadedMSA = observer(function ({
                 },
               })
               handleClose()
-            } catch (e) {
-              setViewError(e)
             }
-          }}
-        >
-          Submit
-        </Button>
-        <Button
-          color="secondary"
-          variant="contained"
-          onClick={() => {
-            handleClose()
-          }}
-        >
-          Cancel
-        </Button>
-      </DialogActions>
+          } catch (e) {
+            setViewError(e)
+          }
+        }}
+        onCancel={handleClose}
+      />
     </>
   )
 })

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

@@ -4,6 +4,19 @@ import type PluginManager from '@jbrowse/core/PluginManager'
 import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import type { Feature } from '@jbrowse/core/util'
 
+interface MsaDataAdapter {
+  getMSAList(): Promise<string[]>
+  getMSA(msaId: string): Promise<Feature[]>
+}
+
+async function getMsaAdapter(
+  pluginManager: PluginManager,
+  config: AnyConfigurationModel,
+) {
+  const result = await getAdapter(pluginManager, 'msa', config)
+  return result.dataAdapter as unknown as MsaDataAdapter
+}
+
 export async function fetchMSAList({
   config,
   pluginManager,
@@ -11,10 +24,8 @@ export async function fetchMSAList({
   config: AnyConfigurationModel
   pluginManager: PluginManager
 }): Promise<string[]> {
-  const result = await getAdapter(pluginManager, 'msa', config)
-
-  // @ts-expect-error
-  return result.dataAdapter.getMSAList()
+  const adapter = await getMsaAdapter(pluginManager, config)
+  return adapter.getMSAList()
 }
 
 export async function fetchMSA({
@@ -26,8 +37,6 @@ export async function fetchMSA({
   pluginManager: PluginManager
   msaId: string
 }): Promise<Feature[]> {
-  const result = await getAdapter(pluginManager, 'msa', config)
-
-  // @ts-expect-error
-  return result.dataAdapter.getMSA(msaId)
+  const adapter = await getMsaAdapter(pluginManager, config)
+  return adapter.getMSA(msaId)
 }

package/src/LaunchMsaView/components/SubmitCancelActions.tsx

@@ -0,0 +1,41 @@
+import React from 'react'
+
+import { Button, DialogActions } from '@mui/material'
+
+export default function SubmitCancelActions({
+  onSubmit,
+  onCancel,
+  submitDisabled,
+  submitLabel = 'Submit',
+  cancelLabel = 'Cancel',
+}: {
+  onSubmit: () => void
+  onCancel: () => void
+  submitDisabled?: boolean
+  submitLabel?: string
+  cancelLabel?: string
+}) {
+  return (
+    <DialogActions>
+      <Button
+        color="primary"
+        variant="contained"
+        disabled={submitDisabled}
+        onClick={() => {
+          onSubmit()
+        }}
+      >
+        {submitLabel}
+      </Button>
+      <Button
+        color="secondary"
+        variant="contained"
+        onClick={() => {
+          onCancel()
+        }}
+      >
+        {cancelLabel}
+      </Button>
+    </DialogActions>
+  )
+}

package/src/LaunchMsaView/components/TranscriptSelector.tsx

@@ -32,7 +32,7 @@ export default function TranscriptSelector({
   options,
   selectedId,
   selectedTranscript,
-  onTranscriptChange,
+  setSelectedId,
   proteinSequence,
   validIds,
 }: {
@@ -40,7 +40,7 @@ export default function TranscriptSelector({
   options: Feature[]
   selectedId: string
   selectedTranscript: Feature | undefined
-  onTranscriptChange: (transcriptId: string) => void
+  setSelectedId: (transcriptId: string) => void
   proteinSequence: string | undefined
   validIds?: string[]
 }) {
@@ -57,7 +57,7 @@ export default function TranscriptSelector({
           className={classes.minWidth}
           value={selectedId}
           onChange={event => {
-            onTranscriptChange(event.target.value)
+            setSelectedId(event.target.value)
           }}
         >
           {options.map(val => {

package/src/LaunchMsaView/components/useSWRFeatureSequence.ts

@@ -2,6 +2,7 @@ import { getSession } from '@jbrowse/core/util'
 import useSWR from 'swr'
 
 import { fetchSeq } from './fetchSeq'
+import { staticSwrConfig } from '../../utils/swrConfig'
 
 import type { Feature } from '@jbrowse/core/util'
 
@@ -38,22 +39,12 @@ export function useSWRFeatureSequence({
   feature?: Feature
 }) {
   const assemblyName = view?.assemblyNames?.[0]
+  const args =
+    feature && assemblyName ? { feature, assemblyName, view } : undefined
   const { data, error } = useSWR(
-    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-    feature && assemblyName && view
-      ? [feature.id(), assemblyName, 'feature-sequence']
-      : null,
-    () =>
-      featureSequenceFetcher({
-        feature: feature!,
-        assemblyName: assemblyName!,
-        view: view!,
-      }),
-    {
-      revalidateOnFocus: false,
-      revalidateOnReconnect: false,
-      revalidateIfStale: false,
-    },
+    args ? [args.feature.id(), args.assemblyName, 'feature-sequence'] : null,
+    () => featureSequenceFetcher(args!),
+    staticSwrConfig,
   )
 
   return {