jbrowse-plugin-msaview 2.4.2 → 2.4.3

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 {

package/src/LaunchMsaView/components/useTranscriptSelection.ts

@@ -5,26 +5,24 @@ import { useFeatureSequence } from './useFeatureSequence'
 
 import type { Feature } from '@jbrowse/core/util'
 
-function featureInValidIds(feature: Feature, validIds: string[]): boolean {
-  return validIds.some(id => featureMatchesId(feature, id))
-}
-
 function findValidSelection(
   currentId: string,
   options: Feature[],
   validIds: string[] | undefined,
 ): string | undefined {
-  if (!validIds || validIds.length === 0) {
-    return undefined
+  if (validIds && validIds.length > 0) {
+    const currentFeature = options.find(opt => getId(opt) === currentId)
+    const currentIsValid =
+      currentFeature &&
+      validIds.some(id => featureMatchesId(currentFeature, id))
+    if (currentFeature && !currentIsValid) {
+      const validOption = options.find(opt =>
+        validIds.some(id => featureMatchesId(opt, id)),
+      )
+      return validOption ? getId(validOption) : undefined
+    }
   }
-
-  const currentFeature = options.find(opt => getId(opt) === currentId)
-  if (!currentFeature || featureInValidIds(currentFeature, validIds)) {
-    return undefined
-  }
-
-  const validOption = options.find(opt => featureInValidIds(opt, validIds))
-  return validOption ? getId(validOption) : undefined
+  return undefined
 }
 
 export function useTranscriptSelection({
@@ -39,7 +37,7 @@ export function useTranscriptSelection({
   const options = useMemo(() => getSortedTranscriptFeatures(feature), [feature])
   const [selectedId, setSelectedId] = useState(() => getId(options[0]))
   const validatedSelectedId =
-    findValidSelection(selectedId, options, validIds) || selectedId
+    findValidSelection(selectedId, options, validIds) ?? selectedId
   const selectedTranscript = options.find(
     val => getId(val) === validatedSelectedId,
   )

package/src/LaunchMsaView/util.ts

@@ -1,6 +1,19 @@
-import { sum } from '@jbrowse/core/util'
+import { getContainingView, sum } from '@jbrowse/core/util'
 
-import type { Feature } from '@jbrowse/core/util'
+import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+export function getLinearGenomeView(model: AbstractTrackModel) {
+  return getContainingView(model) as LinearGenomeViewModel
+}
+
+function uniqueDefined(vals: (string | undefined)[]): string[] {
+  return [...new Set(vals.filter((v): v is string => !!v))]
+}
+
+function joinDefined(sep: string, parts: (string | undefined)[]): string {
+  return parts.filter((p): p is string => !!p).join(sep)
+}
 
 export function getTranscriptFeatures(feature: Feature) {
   // check if we are looking at a 'two-level' or 'three-level' feature by
@@ -42,16 +55,14 @@ export function getId(val?: Feature): string {
 }
 
 export function getMatchableIds(val?: Feature): string[] {
-  if (!val) {
-    return []
-  }
-  const ids = [
-    val.id(),
-    val.get('name'),
-    val.get('id'),
-    val.get('transcript_id'),
-  ].filter((id): id is string => !!id)
-  return [...new Set(ids)]
+  return val
+    ? uniqueDefined([
+        val.id(),
+        val.get('name'),
+        val.get('id'),
+        val.get('transcript_id'),
+      ])
+    : []
 }
 
 export function featureMatchesId(feature: Feature, id: string): boolean {
@@ -59,20 +70,20 @@ export function featureMatchesId(feature: Feature, id: string): boolean {
 }
 
 export function getTranscriptDisplayName(val?: Feature) {
-  return val === undefined
-    ? ''
-    : [val.get('name'), val.get('id')].filter(f => !!f).join(' ')
+  return val ? joinDefined(' ', [val.get('name'), val.get('id')]) : ''
 }
 
 export function getGeneDisplayName(val?: Feature) {
-  return val === undefined
-    ? ''
-    : [
+  return val
+    ? joinDefined(' ', [
         val.get('gene_name') ?? val.get('name'),
-        val.get('id') ? `(${val.get('id')})` : '',
-      ]
-        .filter(f => !!f)
-        .join(' ')
+        val.get('id') ? `(${val.get('id')})` : undefined,
+      ])
+    : ''
+}
+
+export function getBlastViewTitle(feature: Feature, transcript: Feature) {
+  return `BLAST - ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(transcript)}`
 }
 
 export function getSortedTranscriptFeatures(feature: Feature) {
@@ -87,12 +98,11 @@ export function cleanProteinSequence(seq: string) {
 }
 
 export function getGeneIdentifiers(feature: Feature): string[] {
-  const ids = [
+  return uniqueDefined([
     feature.id(),
     feature.get('id'),
     feature.get('name'),
     feature.get('gene_id'),
     feature.get('gene_name'),
-  ].filter((id): id is string => !!id)
-  return [...new Set(ids)]
+  ])
 }