jbrowse-plugin-msaview 2.2.11 → 2.3.2

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

@@ -1,11 +1,7 @@
 import React, { useEffect, useMemo, useState } from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
-import {
-  AbstractTrackModel,
-  Feature,
-  getContainingView,
-} from '@jbrowse/core/util'
+import { getContainingView } from '@jbrowse/core/util'
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
 import {
   Accordion,
@@ -22,40 +18,47 @@ import { makeStyles } from 'tss-react/mui'
 
 import CachedBlastResults from './CachedBlastResults'
 import { blastLaunchView } from './blastLaunchView'
+import { msaAlgorithms } from './consts'
 import TextField2 from '../../../components/TextField2'
 import { getAllCachedResults } from '../../../utils/blastCache'
-import { getGeneDisplayName, getTranscriptDisplayName } from '../../util'
+import {
+  getGeneDisplayName,
+  getGeneIdentifiers,
+  getTranscriptDisplayName,
+} from '../../util'
 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'
 
-function getGeneIdentifiers(feature: Feature): string[] {
-  const ids = [
-    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)]
-}
-
 const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
   },
-  textAreaFont: {
-    fontFamily: 'Courier New',
+  selectField: {
+    width: 150,
+  },
+  databaseFieldContainer: {
+    display: 'flex',
+  },
+  clusterSeqMessage: {
+    marginLeft: 4,
+    alignContent: 'center',
+  },
+  cachedResultsAccordion: {
+    marginTop: 20,
+  },
+  infoText: {
+    marginTop: 20,
   },
 })
 
 const blastDatabaseOptions = ['nr', 'nr_cluster_seq'] as const
-const msaAlgorithms = ['clustalo', 'muscle', 'kalign', 'mafft'] as const
 const blastPrograms = ['blastp', 'quick-blastp'] as const
 
 type blastDatabaseOptionsT = (typeof blastDatabaseOptions)[number]
-type msaAlgorithmsT = (typeof msaAlgorithms)[number]
 type blastProgramsT = (typeof blastPrograms)[number]
 
 const NCBIBlastAutomaticPanel = observer(function ({
@@ -77,7 +80,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
   const [selectedBlastDatabase, setSelectedBlastDatabase] =
     useState<blastDatabaseOptionsT>('nr')
   const [selectedMsaAlgorithm, setSelectedMsaAlgorithm] =
-    useState<msaAlgorithmsT>('clustalo')
+    useState<MsaAlgorithm>('clustalo')
   const [selectedBlastProgram, setSelectedBlastProgram] =
     useState<blastProgramsT>('quick-blastp')
   const [hasCachedResults, setHasCachedResults] = useState(false)
@@ -107,14 +110,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
     proteinSequence,
     error: proteinSequenceError,
   } = useTranscriptSelection({ feature, view })
-
-  useEffect(() => {
-    if (selectedBlastDatabase === 'nr_cluster_seq') {
-      setSelectedBlastProgram('blastp')
-    }
-  }, [selectedBlastDatabase])
   const e = proteinSequenceError ?? launchViewError ?? error
-  const style = { width: 150 }
   return (
     <>
       <DialogContent className={classes.dialogContent}>
@@ -123,13 +119,16 @@ const NCBIBlastAutomaticPanel = observer(function ({
         <TextField2
           variant="outlined"
           label="BLAST database"
-          style={style}
+          className={classes.selectField}
           select
           value={selectedBlastDatabase}
           onChange={event => {
-            setSelectedBlastDatabase(
-              event.target.value as (typeof blastDatabaseOptions)[number],
-            )
+            const newDb = event.target
+              .value as (typeof blastDatabaseOptions)[number]
+            setSelectedBlastDatabase(newDb)
+            if (newDb === 'nr_cluster_seq') {
+              setSelectedBlastProgram('blastp')
+            }
           }}
         >
           {blastDatabaseOptions.map(val => (
@@ -142,13 +141,11 @@ const NCBIBlastAutomaticPanel = observer(function ({
         <TextField2
           variant="outlined"
           label="MSA Algorithm"
-          style={style}
+          className={classes.selectField}
           select
           value={selectedMsaAlgorithm}
           onChange={event => {
-            setSelectedMsaAlgorithm(
-              event.target.value as (typeof msaAlgorithms)[number],
-            )
+            setSelectedMsaAlgorithm(event.target.value as MsaAlgorithm)
           }}
         >
           {msaAlgorithms.map(val => (
@@ -158,12 +155,12 @@ const NCBIBlastAutomaticPanel = observer(function ({
           ))}
         </TextField2>
 
-        <div style={{ display: 'flex' }}>
+        <div className={classes.databaseFieldContainer}>
           <TextField2
             variant="outlined"
             label="BLAST program"
             disabled={selectedBlastDatabase === 'nr_cluster_seq'}
-            style={style}
+            className={classes.selectField}
             select
             value={selectedBlastProgram}
             onChange={event => {
@@ -181,10 +178,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
           {selectedBlastDatabase === 'nr_cluster_seq' ? (
             <Typography
               variant="subtitle2"
-              style={{
-                marginLeft: 4,
-                alignContent: 'center',
-              }}
+              className={classes.clusterSeqMessage}
             >
               Can only use blastp on nr_cluster_seq
             </Typography>
@@ -200,7 +194,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
           proteinSequence={proteinSequence}
         />
 
-        <Typography style={{ marginTop: 20 }}>
+        <Typography className={classes.infoText}>
           This panel will automatically submit a query to NCBI. Using blastp can
           take 10+ minutes to run, quick-blastp is generally a lot faster but is
           not available for the clustered database. After completion, all the
@@ -212,7 +206,7 @@ const NCBIBlastAutomaticPanel = observer(function ({
         </Typography>
 
         {hasCachedResults ? (
-          <Accordion style={{ marginTop: 20 }}>
+          <Accordion className={classes.cachedResultsAccordion}>
             <AccordionSummary expandIcon={<ExpandMoreIcon />}>
               <Typography>Previous BLAST Results</Typography>
             </AccordionSummary>
@@ -260,13 +254,7 @@ const NCBIBlastAutomaticPanel = 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/NCBIBlastQuery/NCBIBlastRIDPanel.tsx

@@ -1,11 +1,7 @@
 import React, { useState } from 'react'
 
 import { ErrorMessage } from '@jbrowse/core/ui'
-import {
-  AbstractTrackModel,
-  Feature,
-  getContainingView,
-} from '@jbrowse/core/util'
+import { getContainingView } from '@jbrowse/core/util'
 import {
   Button,
   DialogActions,
@@ -17,12 +13,15 @@ import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import { blastLaunchView } from './blastLaunchView'
+import { msaAlgorithms } from './consts'
 import ExternalLink from '../../../components/ExternalLink'
 import TextField2 from '../../../components/TextField2'
 import { getGeneDisplayName, getTranscriptDisplayName } from '../../util'
 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()({
@@ -31,10 +30,6 @@ const useStyles = makeStyles()({
   },
 })
 
-const msaAlgorithms = ['clustalo', 'muscle', 'kalign', 'mafft'] as const
-
-type msaAlgorithmsT = (typeof msaAlgorithms)[number]
-
 const NCBIBlastRIDPanel = observer(function ({
   handleClose,
   feature,
@@ -53,7 +48,7 @@ const NCBIBlastRIDPanel = observer(function ({
   const [launchViewError, setLaunchViewError] = useState<unknown>()
   const [rid, setRid] = useState('')
   const [selectedMsaAlgorithm, setSelectedMsaAlgorithm] =
-    useState<msaAlgorithmsT>('clustalo')
+    useState<MsaAlgorithm>('clustalo')
 
   const {
     options,
@@ -108,9 +103,7 @@ const NCBIBlastRIDPanel = observer(function ({
           select
           value={selectedMsaAlgorithm}
           onChange={event => {
-            setSelectedMsaAlgorithm(
-              event.target.value as (typeof msaAlgorithms)[number],
-            )
+            setSelectedMsaAlgorithm(event.target.value as MsaAlgorithm)
           }}
         >
           {msaAlgorithms.map(val => (

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

@@ -1,7 +1,8 @@
-import { Feature, getSession } from '@jbrowse/core/util'
+import { getSession } from '@jbrowse/core/util'
 
 import type { JBrowsePluginMsaViewModel } 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'
 
 export function blastLaunchView({

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

@@ -1 +1,3 @@
 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]

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

@@ -2,13 +2,7 @@ import React, { useState } from 'react'
 
 import { readConfObject } from '@jbrowse/core/configuration'
 import { ErrorMessage, LoadingEllipses, SanitizedHTML } from '@jbrowse/core/ui'
-import {
-  AbstractTrackModel,
-  Feature,
-  getContainingView,
-  getEnv,
-  getSession,
-} from '@jbrowse/core/util'
+import { getContainingView, getEnv, getSession } from '@jbrowse/core/util'
 import { Button, DialogActions, DialogContent, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 import useSWR from 'swr'
@@ -21,8 +15,9 @@ import { useTranscriptSelection } from '../useTranscriptSelection'
 import { swrFlags } from './consts'
 import { fetchMSA, fetchMSAList } from './fetchMSAData'
 import { preCalculatedLaunchView } from './preCalculatedLaunchView'
-import { Dataset } from './types'
 
+import type { Dataset } from './types'
+import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 const useStyles = makeStyles()({
@@ -31,7 +26,7 @@ const useStyles = makeStyles()({
   },
 })
 
-const PreLoadedMSA = observer(function PreLoadedMSA2({
+const PreLoadedMSA = observer(function ({
   model,
   feature,
   handleClose,
@@ -78,7 +73,6 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
     selectedTranscript,
     proteinSequence,
     error: proteinSequenceError,
-    validSet,
   } = useTranscriptSelection({ feature, view, validIds: msaList })
 
   const {
@@ -87,7 +81,7 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
     error: msaDataFetchError,
   } = useSWR(
     selectedId && selectedDatasetId
-      ? `${selectedId}-${selectedId}-${msaList?.length}-msa`
+      ? `${selectedDatasetId}-${selectedId}-${msaList?.length}-msa`
       : 'none-msa',
     () =>
       selectedId && selectedDataset && msaList
@@ -150,7 +144,7 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
                   selectedTranscript={selectedTranscript}
                   onTranscriptChange={setSelectedId}
                   proteinSequence={proteinSequence}
-                  validSet={validSet}
+                  validIds={msaList}
                 />
               </div>
             ) : null}
@@ -189,13 +183,7 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
         >
           Submit
         </Button>
-        <Button
-          color="secondary"
-          variant="contained"
-          onClick={() => {
-            handleClose()
-          }}
-        >
+        <Button color="secondary" variant="contained" onClick={handleClose}>
           Cancel
         </Button>
       </DialogActions>

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

@@ -1,8 +1,8 @@
-import { AnyConfigurationModel } from '@jbrowse/core/configuration'
 import { getAdapter } from '@jbrowse/core/data_adapters/dataAdapterCache'
-import { Feature } from '@jbrowse/core/util'
 
 import type PluginManager from '@jbrowse/core/PluginManager'
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
+import type { Feature } from '@jbrowse/core/util'
 
 export async function fetchMSAList({
   config,

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

@@ -1,5 +1,4 @@
-import { AbstractSessionModel, Feature } from '@jbrowse/core/util'
-
+import type { AbstractSessionModel, Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 export function preCalculatedLaunchView({

package/src/LaunchMsaView/components/TranscriptSelector.tsx

@@ -1,6 +1,5 @@
 import React, { useState } from 'react'
 
-import { Feature } from '@jbrowse/core/util'
 import { Button, MenuItem, TextField } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
@@ -13,6 +12,8 @@ import {
   getTranscriptLength,
 } from '../util'
 
+import type { Feature } from '@jbrowse/core/util'
+
 const useStyles = makeStyles()({
   flex: {
     display: 'flex',
@@ -29,7 +30,7 @@ export default function TranscriptSelector({
   selectedTranscript,
   onTranscriptChange,
   proteinSequence,
-  validSet,
+  validIds,
 }: {
   feature: Feature
   options: Feature[]
@@ -37,7 +38,7 @@ export default function TranscriptSelector({
   selectedTranscript: Feature | undefined
   onTranscriptChange: (transcriptId: string) => void
   proteinSequence: string | undefined
-  validSet?: Set<string>
+  validIds?: string[]
 }) {
   const { classes } = useStyles()
   const [showSequence, setShowSequence] = useState(false)
@@ -56,15 +57,15 @@ export default function TranscriptSelector({
           }}
         >
           {options.map(val => {
-            const inSet = validSet
-              ? [...validSet].some(id => featureMatchesId(val, id))
+            const inSet = validIds
+              ? validIds.some(id => featureMatchesId(val, id))
               : true
             const { len, mod } = getTranscriptLength(val)
             return (
               <MenuItem value={getId(val)} key={val.id()} disabled={!inSet}>
                 {getTranscriptDisplayName(val)} ({len} aa){' '}
                 {mod ? ` (possible fragment)` : ''}
-                {validSet ? (inSet ? ' (has data)' : ' (no data)') : ''}
+                {validIds ? (inSet ? ' (has data)' : ' (no data)') : ''}
               </MenuItem>
             )
           })}

package/src/LaunchMsaView/components/useTranscriptSelection.ts

@@ -26,11 +26,6 @@ export function useTranscriptSelection({
     feature: selectedTranscript,
   })
 
-  const validSet = useMemo(
-    () => (validIds ? new Set(validIds) : undefined),
-    [validIds],
-  )
-
   useEffect(() => {
     if (validIds && validIds.length > 0) {
       const currentFeature = options.find(opt => getId(opt) === selectedId)
@@ -52,6 +47,6 @@ export function useTranscriptSelection({
     selectedTranscript,
     proteinSequence,
     error,
-    validSet,
+    validIds,
   }
 }

package/src/LaunchMsaView/components/util.ts

@@ -18,5 +18,5 @@ export function makeId(
 }
 
 export function strip(s: string) {
-  return s.replace('-', '')
+  return s.replaceAll('-', '')
 }

package/src/LaunchMsaView/index.ts

@@ -1,12 +1,13 @@
-import PluginManager from '@jbrowse/core/PluginManager'
-import { PluggableElementType } from '@jbrowse/core/pluggableElementTypes'
-import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
-import { MenuItem } from '@jbrowse/core/ui'
-import { Feature, getContainingTrack, getSession } from '@jbrowse/core/util'
+import { getContainingTrack, getSession } from '@jbrowse/core/util'
 import AddIcon from '@mui/icons-material/Add'
 
 import LaunchMsaViewDialog from './components/LaunchMsaViewDialog'
 
+import type PluginManager from '@jbrowse/core/PluginManager'
+import type { PluggableElementType } from '@jbrowse/core/pluggableElementTypes'
+import type DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import type { MenuItem } from '@jbrowse/core/ui'
+import type { Feature } from '@jbrowse/core/util'
 import type { IAnyModelType } from '@jbrowse/mobx-state-tree'
 
 function isDisplay(elt: { name: string }): elt is DisplayType {

package/src/LaunchMsaView/util.ts

@@ -85,3 +85,14 @@ export function getSortedTranscriptFeatures(feature: Feature) {
 export function cleanProteinSequence(seq: string) {
   return seq.replaceAll('*', '').replaceAll('&', '')
 }
+
+export function getGeneIdentifiers(feature: Feature): string[] {
+  const ids = [
+    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)]
+}