jbrowse-plugin-msaview 2.2.0 → 2.2.2

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

@@ -1,26 +1,31 @@
-import React, { useEffect, useState } from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 
-import { ErrorMessage } from '@jbrowse/core/ui'
+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 { Button, DialogActions, DialogContent, Typography } from '@mui/material'
+import { Button, DialogActions, DialogContent, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
+import useSWR from 'swr'
 import { makeStyles } from 'tss-react/mui'
 
-import { fetchGeneList } from './fetchGeneList'
-import { preCalculatedLaunchView } from './preCalculatedLaunchView'
-import ExternalLink from '../../../ExternalLink'
+import TextField2 from '../../../components/TextField2'
 import { getGeneDisplayName, getId, getTranscriptFeatures } from '../../util'
 import TranscriptSelector from '../TranscriptSelector'
 import { useFeatureSequence } from '../useFeatureSequence'
+import { swrFlags } from './consts'
+import { fetchMSA, fetchMSAList } from './fetchMSAData'
+import { findValidTranscriptId } from './findValidTranscriptId'
+import { preCalculatedLaunchView } from './preCalculatedLaunchView'
+import { Dataset } from './types'
 
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
-
 const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
@@ -39,85 +44,166 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
   const session = getSession(model)
   const view = getContainingView(model) as LinearGenomeViewModel
   const { classes } = useStyles()
-  const [error1, setError] = useState<unknown>()
-  const [geneNameList, setGeneNameList] = useState<string[]>()
-  useEffect(() => {
-    // eslint-disable-next-line @typescript-eslint/no-floating-promises
-    ;(async () => {
-      try {
-        const data = await fetchGeneList()
-        setGeneNameList(data)
-        const set = new Set(data)
-        const options = getTranscriptFeatures(feature)
-        const ret = options.find(val => set.has(getId(val)))
-        if (ret) {
-          setUserSelection(getId(ret))
-        }
-      } catch (e) {
-        console.error(e)
-        setError(e)
-      }
-    })()
-  }, [feature])
-  const validSet = new Set(geneNameList)
-  const options = getTranscriptFeatures(feature)
-  const ret = options.find(val => validSet.has(getId(val)))
-  const [userSelection, setUserSelection] = useState(getId(options[0]))
-  const selectedTranscript = options.find(val => getId(val) === userSelection)!
-  const { proteinSequence, error: error2 } = useFeatureSequence({
+  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 e = error1 ?? error2
+  const { jbrowse } = session
+  const datasets = readConfObject(jbrowse, ['msa', 'datasets']) as
+    | Dataset[]
+    | undefined
+  const [selectedDatasetId, setSelectedDatasetId] = useState(
+    datasets?.[0]?.datasetId,
+  )
+  const selectedDataset = datasets?.find(d => d.datasetId === selectedDatasetId)
+  const {
+    data: msaList,
+    isLoading: msaListLoading,
+    error: msaListFetchError,
+  } = useSWR(
+    selectedDatasetId ? `${selectedDatasetId}-msa-list` : 'none-msa-list',
+    () =>
+      selectedDataset
+        ? fetchMSAList({
+            config: selectedDataset.adapter,
+            pluginManager,
+          })
+        : undefined,
+    swrFlags,
+  )
+  const {
+    data: msaData,
+    isLoading: msaDataLoading,
+    error: msaDataFetchError,
+  } = useSWR(
+    selectedTranscriptId && selectedDatasetId
+      ? `${selectedTranscriptId}-${selectedTranscriptId}-${msaList?.length}-msa`
+      : 'none-msa',
+    () =>
+      selectedTranscriptId && selectedDataset && msaList
+        ? fetchMSA({
+            msaId: selectedTranscriptId,
+            config: selectedDataset.adapter,
+            pluginManager,
+          })
+        : undefined,
+    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) {
+    console.error(e)
+  }
   return (
     <>
       <DialogContent className={classes.dialogContent}>
         {e ? <ErrorMessage error={e} /> : null}
-        <Typography>
-          The source data for these multiple sequence alignments is from{' '}
-          <ExternalLink href="https://hgdownload.soe.ucsc.edu/goldenPath/hg38/multiz100way/alignments/">
-            knownCanonical.multiz100way.protAA.fa.gz
-          </ExternalLink>
-        </Typography>
-        {geneNameList && !ret ? (
-          <Typography color="error">No MSA data for this gene found</Typography>
+
+        <TextField2
+          select
+          label="Select MSA dataset"
+          value={selectedDatasetId}
+          onChange={event => {
+            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>
+          )}
+        </TextField2>
+
+        {selectedDataset ? (
+          <div style={{ marginTop: 50 }}>
+            {!msaListLoading && msaDataLoading ? (
+              <LoadingEllipses
+                variant="h6"
+                message={`Loading MSA for (${selectedTranscriptId})`}
+              />
+            ) : null}
+            {msaListLoading ? (
+              <LoadingEllipses
+                variant="h6"
+                message={`Loading available MSAs for (${selectedDataset.name})`}
+              />
+            ) : null}
+
+            {msaList ? (
+              <div>
+                <SanitizedHTML html={selectedDataset.description} />
+                <TranscriptSelector
+                  feature={feature}
+                  options={transcripts}
+                  selectedTranscriptId={selectedTranscriptId}
+                  onTranscriptChange={setSelectedTranscriptId}
+                  proteinSequence={proteinSequence}
+                  validSet={validSet}
+                />
+              </div>
+            ) : null}
+          </div>
         ) : null}
-        <TranscriptSelector
-          feature={feature}
-          options={options}
-          selectedTranscriptId={userSelection}
-          onTranscriptChange={setUserSelection}
-          proteinSequence={proteinSequence}
-          validSet={validSet}
-        />
       </DialogContent>
 
       <DialogActions>
         <Button
           color="primary"
           variant="contained"
+          disabled={!selectedTranscript || !msaData?.length}
           onClick={() => {
-            // eslint-disable-next-line @typescript-eslint/no-floating-promises
-            ;(async () => {
-              try {
-                if (!ret) {
-                  return
-                }
-                await preCalculatedLaunchView({
-                  userSelection,
-                  session,
-                  newViewTitle: getGeneDisplayName(ret),
-                  view,
-                  feature: ret,
-                })
-                handleClose()
-              } catch (e) {
-                console.error(e)
-                setError(e)
+            try {
+              if (!selectedTranscript || !msaData) {
+                return
               }
-            })()
+              const querySeqName = `${selectedTranscriptId}_${assemblyNames[0]}`
+              preCalculatedLaunchView({
+                session,
+                newViewTitle: getGeneDisplayName(selectedTranscript),
+                view,
+                querySeqName,
+                feature: selectedTranscript,
+                data: {
+                  msa: msaData
+                    .map(r => `>${r.get('refName')}\n${r.get('seq')}`)
+                    .join('\n'),
+                },
+              })
+              handleClose()
+            } catch (e) {
+              setViewError(e)
+            }
           }}
         >
           Submit

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

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

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

@@ -0,0 +1,33 @@
+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'
+
+export async function fetchMSAList({
+  config,
+  pluginManager,
+}: {
+  config: AnyConfigurationModel
+  pluginManager: PluginManager
+}): Promise<string[]> {
+  const result = await getAdapter(pluginManager, 'msa', config)
+
+  // @ts-expect-error
+  return result.dataAdapter.getMSAList()
+}
+
+export async function fetchMSA({
+  config,
+  pluginManager,
+  msaId,
+}: {
+  config: AnyConfigurationModel
+  pluginManager: PluginManager
+  msaId: string
+}): Promise<Feature[]> {
+  const result = await getAdapter(pluginManager, 'msa', config)
+
+  // @ts-expect-error
+  return result.dataAdapter.getMSA(msaId)
+}

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

@@ -0,0 +1,25 @@
+import { getId } from '../../util'
+
+import type { Feature } from '@jbrowse/core/util'
+
+// Function to find a valid transcript ID that exists in the MSA list
+export function findValidTranscriptId({
+  transcriptsList,
+  validMsaList,
+}: {
+  transcriptsList: Feature[]
+  validMsaList?: string[]
+}) {
+  if (!validMsaList || validMsaList.length === 0) {
+    return null
+  }
+
+  // Try to find a transcript ID that exists in the MSA list
+  for (const transcript of transcriptsList) {
+    const id = getId(transcript)
+    if (id && validMsaList.includes(id)) {
+      return id
+    }
+  }
+  return null
+}

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

@@ -1,38 +1,27 @@
 import { AbstractSessionModel, Feature } from '@jbrowse/core/util'
-import { ungzip } from 'pako'
 
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
-async function myfetch(url: string) {
-  const res = await fetch(url)
-  if (!res.ok) {
-    throw new Error(`HTTP ${res.status} fetching ${await res.text()}`)
-  }
-  const data = await res.arrayBuffer()
-  return new TextDecoder().decode(ungzip(data))
-}
-
-export async function preCalculatedLaunchView({
-  userSelection,
+export function preCalculatedLaunchView({
   session,
   newViewTitle,
   view,
   feature,
+  data,
+  querySeqName,
 }: {
+  data: { msa: string }
   session: AbstractSessionModel
-  userSelection: string
   newViewTitle: string
   view: LinearGenomeViewModel
   feature: Feature
+  querySeqName: string
 }) {
-  const d = await myfetch(
-    `https://jbrowse.org/demos/msaview/knownCanonical/${userSelection}.mfa.gz`,
-  )
-
   session.addView('MsaView', {
     type: 'MsaView',
     displayName: newViewTitle,
     treeAreaWidth: 200,
+    querySeqName,
     treeWidth: 100,
     drawNodeBubbles: false,
     labelsAlignRight: true,
@@ -40,15 +29,7 @@ export async function preCalculatedLaunchView({
     colWidth: 10,
     rowHeight: 12,
     colorSchemeName: 'percent_identity_dynamic',
-    treeFilehandle: {
-      uri: 'https://hgdownload.soe.ucsc.edu/goldenPath/hg38/multiz100way/hg38.100way.nh',
-    },
-    treeMetadataFilehandle: {
-      uri: 'https://s3.amazonaws.com/jbrowse.org/demos/app/species.json',
-    },
-    data: {
-      msa: d,
-    },
+    data,
     connectedViewId: view.id,
     connectedFeature: feature.toJSON(),
   })

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

@@ -0,0 +1,8 @@
+import type { AnyConfigurationModel } from '@jbrowse/core/configuration'
+
+export interface Dataset {
+  datasetId: string
+  name: string
+  description?: string
+  adapter: AnyConfigurationModel
+}

package/src/LaunchMsaView/components/TranscriptSelector.tsx

@@ -4,8 +4,8 @@ import { Feature } from '@jbrowse/core/util'
 import { Button, MenuItem } from '@mui/material'
 import { makeStyles } from 'tss-react/mui'
 
-import ReadOnlyTextField2 from '../../ReadOnlyTextField2'
-import TextField2 from '../../TextField2'
+import ReadOnlyTextField2 from '../../components/ReadOnlyTextField2'
+import TextField2 from '../../components/TextField2'
 import {
   getGeneDisplayName,
   getId,

package/src/LaunchMsaView/components/calculateProteinSequence.ts

@@ -41,13 +41,13 @@ export function revlist(list: Feat[], seqlen: number) {
 }
 
 export function getProteinSequenceFromFeature({
-  selectedTranscript,
+  feature,
   seq,
 }: {
   seq: string
-  selectedTranscript: Feature
+  feature: Feature
 }) {
-  const { subfeatures, start, strand } = selectedTranscript.toJSON()
+  const { subfeatures, start, strand } = feature.toJSON()
   const cds = dedupe(
     subfeatures
       ?.toSorted((a, b) => a.start - b.start)

package/src/LaunchMsaView/components/types.ts

@@ -8,4 +8,5 @@ export interface SeqState {
   seq: string
   upstream?: string
   downstream?: string
+  error?: unknown
 }

package/src/LaunchMsaView/components/useFeatureSequence.ts

@@ -1,18 +1,8 @@
-import { useEffect, useState } from 'react'
-
-import { getSession } from '@jbrowse/core/util'
-
 import { getProteinSequenceFromFeature } from './calculateProteinSequence'
-import { fetchSeq } from './fetchSeq'
+import { useSWRFeatureSequence } from './useSWRFeatureSequence'
 
-import type { SeqState } from './types'
 import type { Feature } from '@jbrowse/core/util'
 
-export interface ErrorState {
-  error: string
-}
-const BPLIMIT = 500_000
-
 export function useFeatureSequence({
   view,
   feature,
@@ -20,73 +10,22 @@ export function useFeatureSequence({
   forceLoad = true,
 }: {
   view: { assemblyNames?: string[] } | undefined
-  feature: Feature
+  feature?: Feature
   upDownBp?: number
   forceLoad?: boolean
 }) {
-  const [sequence, setSequence] = useState<SeqState | ErrorState>()
-  const [error, setError] = useState<unknown>()
-  const assemblyName = view?.assemblyNames?.[0]
-  useEffect(() => {
-    if (view) {
-      // eslint-disable-next-line @typescript-eslint/no-floating-promises
-      ;(async () => {
-        try {
-          setError(undefined)
-          setSequence(undefined)
-          const session = getSession(view)
-          const { start, end, refName } = feature.toJSON() as {
-            start: number
-            end: number
-            refName: string
-          }
-          if (!assemblyName) {
-            throw new Error('No assembly found')
-          }
-          if (!forceLoad && end - start > BPLIMIT) {
-            setSequence({
-              error: `Genomic sequence larger than ${BPLIMIT}bp, use "force load" button to display`,
-            })
-          } else {
-            const b = start - upDownBp
-            const e = end + upDownBp
-            setSequence({
-              seq: await fetchSeq({
-                start,
-                end,
-                refName,
-                assemblyName,
-                session,
-              }),
-              upstream: await fetchSeq({
-                start: Math.max(0, b),
-                end: start,
-                refName,
-                assemblyName,
-                session,
-              }),
-              downstream: await fetchSeq({
-                start: end,
-                end: e,
-                refName,
-                assemblyName,
-                session,
-              }),
-            })
-          }
-        } catch (e) {
-          console.error(e)
-          setError(e)
-        }
-      })()
-    }
-  }, [feature, view, upDownBp, assemblyName, forceLoad])
+  const { sequence, error } = useSWRFeatureSequence({
+    view,
+    feature,
+    upDownBp,
+    forceLoad,
+  })
 
   const proteinSequence =
-    sequence && !('error' in sequence)
+    sequence && !('error' in sequence) && feature
       ? getProteinSequenceFromFeature({
           seq: sequence.seq,
-          selectedTranscript: feature,
+          feature,
         })
       : ''
 

package/src/LaunchMsaView/components/useSWRFeatureSequence.ts

@@ -0,0 +1,90 @@
+import { getSession } from '@jbrowse/core/util'
+import useSWR from 'swr'
+
+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 {
+    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 }
+}
+
+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']
+      : null,
+    () =>
+      featureSequenceFetcher({
+        feature: feature!,
+        assemblyName: assemblyName!,
+        upDownBp,
+        view: view!,
+        forceLoad,
+      }),
+  )
+
+  return {
+    sequence: data,
+    error,
+  }
+}

package/src/LaunchMsaView/index.ts

@@ -24,9 +24,12 @@ function extendStateModel(stateModel: IAnyModelType) {
         contextMenuItems() {
           const feature = self.contextMenuFeature
           const track = getContainingTrack(self)
+          const featureType = feature?.get('type')
+          const showMsaMenuItem =
+            feature && ['gene', 'mRNA', 'transcript'].includes(featureType)
           return [
             ...superContextMenuItems(),
-            ...(feature
+            ...(showMsaMenuItem
               ? [
                   {
                     label: 'Launch MSA view',

package/src/MsaViewPanel/components/RIDLink.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 
 import { Typography } from '@mui/material'
 
-import ExternalLink from '../../ExternalLink'
+import ExternalLink from '../../components/ExternalLink'
 
 function RIDLink({ baseUrl, rid }: { rid: string; baseUrl: string }) {
   return (

package/src/MsaViewPanel/genomeToMSA.ts

@@ -5,7 +5,7 @@ import { checkHovered } from './util'
 
 export function genomeToMSA({ model }: { model: JBrowsePluginMsaViewModel }) {
   const { hovered } = getSession(model)
-  const { transcriptToMsaMap, connectedView } = model
+  const { querySeqName, transcriptToMsaMap, connectedView } = model
   if (
     connectedView?.initialized &&
     transcriptToMsaMap &&
@@ -15,7 +15,7 @@ export function genomeToMSA({ model }: { model: JBrowsePluginMsaViewModel }) {
     const { g2p } = transcriptToMsaMap
     const ret = g2p[hoverCoord]
     if (ret !== undefined) {
-      return model.seqCoordToRowSpecificGlobalCoord('QUERY', ret + 1)
+      return model.seqCoordToRowSpecificGlobalCoord(querySeqName, ret + 1)
     }
   }
   return undefined