jbrowse-plugin-msaview 2.2.2 → 2.2.4

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

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import React, { useState } from 'react'
 
 import { readConfObject } from '@jbrowse/core/configuration'
 import { ErrorMessage, LoadingEllipses, SanitizedHTML } from '@jbrowse/core/ui'
@@ -15,12 +15,11 @@ import useSWR from 'swr'
 import { makeStyles } from 'tss-react/mui'
 
 import TextField2 from '../../../components/TextField2'
-import { getGeneDisplayName, getId, getTranscriptFeatures } from '../../util'
+import { getGeneDisplayName } from '../../util'
 import TranscriptSelector from '../TranscriptSelector'
-import { useFeatureSequence } from '../useFeatureSequence'
+import { useTranscriptSelection } from '../useTranscriptSelection'
 import { swrFlags } from './consts'
 import { fetchMSA, fetchMSAList } from './fetchMSAData'
-import { findValidTranscriptId } from './findValidTranscriptId'
 import { preCalculatedLaunchView } from './preCalculatedLaunchView'
 import { Dataset } from './types'
 
@@ -46,18 +45,7 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
   const { classes } = useStyles()
   const { pluginManager } = getEnv(model)
   const { assemblyNames } = view
-  const transcripts = getTranscriptFeatures(feature)
-  const [selectedTranscriptId, setSelectedTranscriptId] = useState(
-    getId(transcripts[0]),
-  )
   const [viewError, setViewError] = useState<unknown>()
-  const selectedTranscript = selectedTranscriptId
-    ? transcripts.find(val => getId(val) === selectedTranscriptId)
-    : undefined
-  const { proteinSequence, error: proteinSequenceError } = useFeatureSequence({
-    view,
-    feature: selectedTranscript,
-  })
 
   const { jbrowse } = session
   const datasets = readConfObject(jbrowse, ['msa', 'datasets']) as
@@ -82,18 +70,29 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
         : undefined,
     swrFlags,
   )
+
+  const {
+    options: transcripts,
+    selectedId,
+    setSelectedId,
+    selectedTranscript,
+    proteinSequence,
+    error: proteinSequenceError,
+    validSet,
+  } = useTranscriptSelection({ feature, view, validIds: msaList })
+
   const {
     data: msaData,
     isLoading: msaDataLoading,
     error: msaDataFetchError,
   } = useSWR(
-    selectedTranscriptId && selectedDatasetId
-      ? `${selectedTranscriptId}-${selectedTranscriptId}-${msaList?.length}-msa`
+    selectedId && selectedDatasetId
+      ? `${selectedId}-${selectedId}-${msaList?.length}-msa`
       : 'none-msa',
     () =>
-      selectedTranscriptId && selectedDataset && msaList
+      selectedId && selectedDataset && msaList
         ? fetchMSA({
-            msaId: selectedTranscriptId,
+            msaId: selectedId,
             config: selectedDataset.adapter,
             pluginManager,
           })
@@ -101,21 +100,6 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
     swrFlags,
   )
 
-  const validSet = useMemo(() => new Set(msaList), [msaList])
-
-  // Update selectedTranscriptId when msaList changes
-  useEffect(() => {
-    if (msaList && msaList.length > 0) {
-      const validId = findValidTranscriptId({
-        transcriptsList: transcripts,
-        validMsaList: msaList,
-      })
-      if (validId && validId !== selectedTranscriptId) {
-        setSelectedTranscriptId(validId)
-      }
-    }
-  }, [msaList, transcripts, selectedTranscriptId])
-
   const e =
     msaListFetchError ?? msaDataFetchError ?? proteinSequenceError ?? viewError
   if (e) {
@@ -134,15 +118,11 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
             setSelectedDatasetId(event.target.value)
           }}
         >
-          {datasets && datasets.length > 0 ? (
-            datasets.map(d => (
-              <MenuItem key={d.datasetId} value={d.datasetId}>
-                {d.name}
-              </MenuItem>
-            ))
-          ) : (
-            <MenuItem>No MSA datasets found</MenuItem>
-          )}
+          {datasets?.map(d => (
+            <MenuItem key={d.datasetId} value={d.datasetId}>
+              {d.name}
+            </MenuItem>
+          ))}
         </TextField2>
 
         {selectedDataset ? (
@@ -150,7 +130,7 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
             {!msaListLoading && msaDataLoading ? (
               <LoadingEllipses
                 variant="h6"
-                message={`Loading MSA for (${selectedTranscriptId})`}
+                message={`Loading MSA for (${selectedId})`}
               />
             ) : null}
             {msaListLoading ? (
@@ -166,8 +146,8 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
                 <TranscriptSelector
                   feature={feature}
                   options={transcripts}
-                  selectedTranscriptId={selectedTranscriptId}
-                  onTranscriptChange={setSelectedTranscriptId}
+                  selectedTranscript={selectedTranscript}
+                  onTranscriptChange={setSelectedId}
                   proteinSequence={proteinSequence}
                   validSet={validSet}
                 />
@@ -187,7 +167,7 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
               if (!selectedTranscript || !msaData) {
                 return
               }
-              const querySeqName = `${selectedTranscriptId}_${assemblyNames[0]}`
+              const querySeqName = `${selectedId}_${assemblyNames[0]}`
               preCalculatedLaunchView({
                 session,
                 newViewTitle: getGeneDisplayName(selectedTranscript),

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

@@ -1,6 +1,7 @@
 export const swrFlags = {
   revalidateOnFocus: false,
   revalidateOnReconnect: false,
+  revalidateIfStale: false,
   refreshWhenHidden: false,
   refreshWhenOffline: false,
   shouldRetryOnError: false,

package/src/LaunchMsaView/components/TabPanel.tsx

@@ -8,8 +8,8 @@ export default function TabPanel({
   ...other
 }: {
   children?: React.ReactNode
-  index: number
-  value: number
+  index: number | string
+  value: number | string
 }) {
   return (
     <div role="tabpanel" hidden={value !== index} {...other}>

package/src/LaunchMsaView/components/TranscriptSelector.tsx

@@ -25,23 +25,20 @@ const useStyles = makeStyles()({
 export default function TranscriptSelector({
   feature,
   options,
-  selectedTranscriptId,
+  selectedTranscript,
   onTranscriptChange,
   proteinSequence,
   validSet,
 }: {
   feature: Feature
   options: Feature[]
-  selectedTranscriptId: string
+  selectedTranscript: Feature | undefined
   onTranscriptChange: (transcriptId: string) => void
   proteinSequence: string | undefined
   validSet?: Set<string>
 }) {
   const { classes } = useStyles()
   const [showSequence, setShowSequence] = useState(false)
-  const selectedTranscript = options.find(
-    val => getId(val) === selectedTranscriptId,
-  )!
 
   return (
     <>
@@ -51,26 +48,22 @@ export default function TranscriptSelector({
           label={`Choose isoform of ${getGeneDisplayName(feature)}`}
           select
           className={classes.minWidth}
-          value={selectedTranscriptId}
+          value={getId(selectedTranscript)}
           onChange={event => {
             onTranscriptChange(event.target.value)
           }}
         >
-          {options
-            .toSorted(
-              (a, b) => getTranscriptLength(b).len - getTranscriptLength(a).len,
+          {options.map(val => {
+            const inSet = validSet ? validSet.has(getId(val)) : 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)') : ''}
+              </MenuItem>
             )
-            .map(val => {
-              const inSet = validSet ? validSet.has(getId(val)) : 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)') : ''}
-                </MenuItem>
-              )
-            })}
+          })}
         </TextField2>
         <div style={{ alignContent: 'center', marginLeft: 20 }}>
           <Button

package/src/LaunchMsaView/components/useSWRFeatureSequence.ts

@@ -6,20 +6,16 @@ import { fetchSeq } from './fetchSeq'
 import type { SeqState } from './types'
 import type { Feature } from '@jbrowse/core/util'
 
-const BPLIMIT = 500_000
-
 async function featureSequenceFetcher({
   feature,
   assemblyName,
   upDownBp,
   view,
-  forceLoad,
 }: {
   feature: Feature
   assemblyName: string
   upDownBp: number
   view: { assemblyNames?: string[] }
-  forceLoad: boolean
 }): Promise<SeqState | undefined> {
   const session = getSession(view)
   const { start, end, refName } = feature.toJSON() as {
@@ -79,8 +75,12 @@ export function useSWRFeatureSequence({
         assemblyName: assemblyName!,
         upDownBp,
         view: view!,
-        forceLoad,
       }),
+    {
+      revalidateOnFocus: false,
+      revalidateOnReconnect: false,
+      revalidateIfStale: false,
+    },
   )
 
   return {

package/src/LaunchMsaView/components/useTranscriptSelection.ts

@@ -0,0 +1,48 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { getId, getSortedTranscriptFeatures } from '../util'
+import { useFeatureSequence } from './useFeatureSequence'
+
+import type { Feature } from '@jbrowse/core/util'
+
+export function useTranscriptSelection({
+  feature,
+  view,
+  validIds,
+}: {
+  feature: Feature
+  view: { assemblyNames?: string[] } | undefined
+  validIds?: string[]
+}) {
+  const options = getSortedTranscriptFeatures(feature)
+  const [selectedId, setSelectedId] = useState(getId(options[0]))
+  const selectedTranscript = options.find(val => getId(val) === selectedId)
+  const { proteinSequence, error } = useFeatureSequence({
+    view,
+    feature: selectedTranscript,
+  })
+
+  const validSet = useMemo(
+    () => (validIds ? new Set(validIds) : undefined),
+    [validIds],
+  )
+
+  useEffect(() => {
+    if (validIds && validIds.length > 0 && !validIds.includes(selectedId)) {
+      const validOption = options.find(opt => validIds.includes(getId(opt)))
+      if (validOption) {
+        setSelectedId(getId(validOption))
+      }
+    }
+  }, [validIds, options, selectedId])
+
+  return {
+    options,
+    selectedId,
+    setSelectedId,
+    selectedTranscript,
+    proteinSequence,
+    error,
+    validSet,
+  }
+}

package/src/LaunchMsaView/components/util.ts

@@ -1,5 +1,20 @@
-export function makeId(h: { accession: string; sciname: string }) {
-  return `${h.accession}-${h.sciname.replaceAll(' ', '_')}`
+import type { TaxonomyInfo } from '../../utils/taxonomyNames'
+
+export function makeId(
+  h: { accession: string; sciname: string; taxid?: number },
+  taxonomyInfo?: Map<number, TaxonomyInfo>,
+) {
+  let speciesName = h.sciname.replaceAll(' ', '_')
+  if (h.taxid && taxonomyInfo?.has(h.taxid)) {
+    const info = taxonomyInfo.get(h.taxid)!
+    if (info.commonName) {
+      speciesName = info.commonName
+        .split(' ')
+        .map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase())
+        .join('_')
+    }
+  }
+  return `${h.accession}-${speciesName}`
 }
 
 export function strip(s: string) {

package/src/LaunchMsaView/index.ts

@@ -7,7 +7,7 @@ import AddIcon from '@mui/icons-material/Add'
 
 import LaunchMsaViewDialog from './components/LaunchMsaViewDialog'
 
-import type { IAnyModelType } from 'mobx-state-tree'
+import type { IAnyModelType } from '@jbrowse/mobx-state-tree'
 
 function isDisplay(elt: { name: string }): elt is DisplayType {
   return elt.name === 'LinearBasicDisplay'

package/src/LaunchMsaView/util.ts

@@ -6,12 +6,21 @@ export function getTranscriptFeatures(feature: Feature) {
   // check if we are looking at a 'two-level' or 'three-level' feature by
   // finding exon/CDS subfeatures. we want to select from transcript names
   const subfeatures = feature.get('subfeatures') ?? []
-  return subfeatures.some(f => f.get('type') === 'CDS')
-    ? [feature]
-    : // filter out non-coding by finding subfeatures with CDS subfeatures
-      subfeatures.filter(f =>
-        f.get('subfeatures')?.some(f => f.get('type') === 'CDS'),
-      )
+
+  // Check for mRNA/transcript subfeatures (three-level: gene → mRNA → CDS)
+  // Filter to only those that have CDS subfeatures (i.e. are coding)
+  const transcripts = subfeatures.filter(
+    (f: Feature) =>
+      (f.get('type') === 'mRNA' || f.get('type') === 'transcript') &&
+      f.get('subfeatures')?.some((s: Feature) => s.get('type') === 'CDS'),
+  )
+  if (transcripts.length > 0) {
+    return transcripts
+  }
+
+  // Has direct CDS children, treat feature itself as the transcript
+  // (two-level: gene → CDS or mRNA → CDS)
+  return [feature]
 }
 
 export function getTranscriptLength(feature: Feature) {
@@ -48,3 +57,13 @@ export function getGeneDisplayName(val?: Feature) {
         .filter(f => !!f)
         .join(' ')
 }
+
+export function getSortedTranscriptFeatures(feature: Feature) {
+  return getTranscriptFeatures(feature).toSorted(
+    (a, b) => getTranscriptLength(b).len - getTranscriptLength(a).len,
+  )
+}
+
+export function cleanProteinSequence(seq: string) {
+  return seq.replaceAll('*', '').replaceAll('&', '')
+}

package/src/LaunchMsaViewExtensionPoint/index.ts

@@ -0,0 +1,74 @@
+import type PluginManager from '@jbrowse/core/PluginManager'
+import type { AbstractSessionModel } from '@jbrowse/core/util'
+
+export default function LaunchMsaViewExtensionPointF(
+  pluginManager: PluginManager,
+) {
+  pluginManager.addToExtensionPoint(
+    'LaunchView-MsaView',
+    // @ts-expect-error
+    ({
+      session,
+      data,
+      msaFileLocation,
+      treeFileLocation,
+      connectedViewId,
+      connectedFeature,
+      displayName,
+      colorSchemeName,
+      colWidth,
+      rowHeight,
+      treeAreaWidth,
+      treeWidth,
+      drawNodeBubbles,
+      labelsAlignRight,
+      showBranchLen,
+      querySeqName,
+    }: {
+      session: AbstractSessionModel
+      data?: { msa: string; tree?: string }
+      msaFileLocation?: { uri: string }
+      treeFileLocation?: { uri: string }
+      connectedViewId?: string
+      connectedFeature?: Record<string, unknown>
+      displayName?: string
+      colorSchemeName?: string
+      colWidth?: number
+      rowHeight?: number
+      treeAreaWidth?: number
+      treeWidth?: number
+      drawNodeBubbles?: boolean
+      labelsAlignRight?: boolean
+      showBranchLen?: boolean
+      querySeqName?: string
+    }) => {
+      if (!data && !msaFileLocation) {
+        throw new Error(
+          'No MSA data or file location provided when launching MSA view',
+        )
+      }
+
+      session.addView('MsaView', {
+        type: 'MsaView',
+        displayName,
+        connectedViewId,
+        connectedFeature,
+        colorSchemeName,
+        colWidth,
+        rowHeight,
+        treeAreaWidth,
+        treeWidth,
+        drawNodeBubbles,
+        labelsAlignRight,
+        showBranchLen,
+        init: {
+          msaData: data?.msa,
+          treeData: data?.tree,
+          msaUrl: msaFileLocation?.uri,
+          treeUrl: treeFileLocation?.uri,
+          querySeqName,
+        },
+      })
+    },
+  )
+}

package/src/MsaViewPanel/components/ConnectStructureDialog.tsx

@@ -0,0 +1,156 @@
+import React, { useState } from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import { getSession } from '@jbrowse/core/util'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+
+import type { JBrowsePluginMsaViewModel } from '../model'
+
+const ConnectStructureDialog = observer(function ConnectStructureDialog({
+  model,
+  handleClose,
+}: {
+  model: JBrowsePluginMsaViewModel
+  handleClose: () => void
+}) {
+  const session = getSession(model)
+  const [selectedViewId, setSelectedViewId] = useState('')
+  const [selectedStructureIdx, setSelectedStructureIdx] = useState(0)
+  const [selectedMsaRow, setSelectedMsaRow] = useState(model.querySeqName)
+  const [error, setError] = useState<string>()
+
+  // Find all ProteinViews in the session
+
+  const proteinViews = session.views.filter(
+    (v: any) => v.type === 'ProteinView',
+  ) as any[]
+
+  // Get structures for the selected view
+  const selectedView = proteinViews.find(v => v.id === selectedViewId)
+  const structures = selectedView?.structures ?? []
+
+  // Get MSA row names
+  const msaRowNames = model.rows.map(r => r[0])
+
+  const handleConnect = () => {
+    if (!selectedViewId) {
+      setError('Please select a protein view')
+      return
+    }
+
+    try {
+      model.connectToStructure(
+        selectedViewId,
+        selectedStructureIdx,
+        selectedMsaRow,
+      )
+      handleClose()
+    } catch (e) {
+      setError(e instanceof Error ? e.message : String(e))
+    }
+  }
+
+  return (
+    <Dialog
+      maxWidth="sm"
+      title="Connect to Protein Structure"
+      open
+      onClose={handleClose}
+    >
+      <DialogContent>
+        {proteinViews.length === 0 ? (
+          <Typography color="textSecondary">
+            No protein views are currently open. Please open a protein structure
+            view first.
+          </Typography>
+        ) : (
+          <>
+            <FormControl fullWidth sx={{ mb: 2 }}>
+              <InputLabel>Protein View</InputLabel>
+              <Select
+                value={selectedViewId}
+                label="Protein View"
+                onChange={e => {
+                  setSelectedViewId(e.target.value)
+                  setSelectedStructureIdx(0)
+                }}
+              >
+                {proteinViews.map(view => (
+                  <MenuItem key={view.id} value={view.id}>
+                    {view.displayName ?? `ProteinView ${view.id}`}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+
+            {structures.length > 1 && (
+              <FormControl fullWidth sx={{ mb: 2 }}>
+                <InputLabel>Structure</InputLabel>
+                <Select
+                  value={selectedStructureIdx}
+                  label="Structure"
+                  onChange={e => {
+                    setSelectedStructureIdx(e.target.value)
+                  }}
+                >
+                  {structures.map(
+                    (structure: { url?: string }, idx: number) => (
+                      <MenuItem key={idx} value={idx}>
+                        {structure.url ?? `Structure ${idx + 1}`}
+                      </MenuItem>
+                    ),
+                  )}
+                </Select>
+              </FormControl>
+            )}
+
+            <FormControl fullWidth sx={{ mb: 2 }}>
+              <InputLabel>MSA Row</InputLabel>
+              <Select
+                value={selectedMsaRow}
+                label="MSA Row"
+                onChange={e => {
+                  setSelectedMsaRow(e.target.value)
+                }}
+              >
+                {msaRowNames.map(name => (
+                  <MenuItem key={name} value={name}>
+                    {name}
+                  </MenuItem>
+                ))}
+              </Select>
+            </FormControl>
+
+            {error && (
+              <Typography color="error" sx={{ mt: 1 }}>
+                {error}
+              </Typography>
+            )}
+          </>
+        )}
+      </DialogContent>
+      <DialogActions>
+        <Button onClick={handleClose}>Cancel</Button>
+        <Button
+          onClick={handleConnect}
+          variant="contained"
+          disabled={proteinViews.length === 0 || !selectedViewId}
+        >
+          Connect
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+})
+
+export default ConnectStructureDialog

package/src/MsaViewPanel/components/MsaViewPanel.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import { LoadingEllipses } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 import { MSAView } from 'react-msaview'
 
@@ -11,11 +12,15 @@ const MsaViewPanel = observer(function MsaViewPanel2({
 }: {
   model: JBrowsePluginMsaViewModel
 }) {
-  const { blastParams } = model
+  const { blastParams, loadingStoredData } = model
   return (
     <div>
       {blastParams ? (
         <LoadingBLAST model={model} baseUrl={blastParams.baseUrl} />
+      ) : loadingStoredData ? (
+        <div style={{ padding: 20 }}>
+          <LoadingEllipses message="Loading MSA data" variant="h6" />
+        </div>
       ) : (
         <MSAView model={model} />
       )}