jbrowse-plugin-msaview 2.0.6 → 2.1.0

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.6",
+  "version": "2.1.0",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "keywords": [

package/src/LaunchMsaView/components/EnsemblGeneTree/EnsemblGeneTree.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useState } from 'react'
+
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
+import {
+  AbstractTrackModel,
+  Feature,
+  getContainingView,
+  getSession,
+} from '@jbrowse/core/util'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  MenuItem,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import { ensemblGeneTreeLaunchView } from './ensemblGeneTreeLaunchView'
+import { geneTreeFetcher } from './ensemblGeneTreeUtils'
+import {
+  getGeneDisplayName,
+  getId,
+  getTranscriptDisplayName,
+  getTranscriptFeatures,
+} from '../../util'
+
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+const useStyles = makeStyles()({
+  dialogContent: {
+    width: '80em',
+  },
+})
+
+type Ret = Awaited<ReturnType<typeof geneTreeFetcher>>
+
+const EnsemblGeneTree = observer(function ({
+  model,
+  feature,
+  handleClose,
+}: {
+  model: AbstractTrackModel
+  feature: Feature
+  handleClose: () => void
+}) {
+  const session = getSession(model)
+  const view = getContainingView(model) as LinearGenomeViewModel
+  const { classes } = useStyles()
+  const [error, setError] = useState<unknown>()
+  const [treeData, setTreeData] = useState<Ret>()
+  const [isTreeLoading, setIsTreeLoading] = useState(false)
+  const [treeError, setTreeError] = useState<unknown>()
+  const options = getTranscriptFeatures(feature)
+  const [userSelection, setUserSelection] = useState(getId(options[0]))
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        setIsTreeLoading(true)
+        const result = await geneTreeFetcher(userSelection)
+        setTreeData(result)
+      } catch (e) {
+        console.error(e)
+        setTreeError(e)
+      } finally {
+        setIsTreeLoading(false)
+      }
+    })()
+  }, [userSelection])
+
+  const loadingMessage = isTreeLoading
+    ? 'Loading tree data from Ensembl GeneTree'
+    : undefined
+  const e = treeError ?? error
+
+  return (
+    <>
+      <DialogContent className={classes.dialogContent}>
+        {e ? <ErrorMessage error={e} /> : null}
+        {loadingMessage ? <LoadingEllipses message={loadingMessage} /> : null}
+        <Typography>Load data from Ensembl GeneTree</Typography>
+        <TextField
+          select
+          label="Choose isoform to view MSA for"
+          value={userSelection}
+          onChange={event => {
+            setUserSelection(event.target.value)
+          }}
+        >
+          {options.map(val => (
+            <MenuItem value={getId(val)} key={val.id()}>
+              {getTranscriptDisplayName(val)}
+            </MenuItem>
+          ))}
+        </TextField>
+      </DialogContent>
+
+      <DialogActions>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => {
+            try {
+              if (!treeData) {
+                return
+              }
+              setError(undefined)
+
+              ensemblGeneTreeLaunchView({
+                feature,
+                view,
+                session,
+                newViewTitle: getGeneDisplayName(feature),
+                data: treeData,
+              })
+              handleClose()
+            } catch (e) {
+              console.error(e)
+              setError(e)
+            }
+          }}
+        >
+          Submit
+        </Button>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </>
+  )
+})
+
+export default EnsemblGeneTree

package/src/LaunchMsaView/components/EnsemblGeneTree/ensemblGeneTreeLaunchView.ts

@@ -0,0 +1,36 @@
+import type { AbstractSessionModel, Feature } from '@jbrowse/core/util'
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+export function ensemblGeneTreeLaunchView({
+  session,
+  newViewTitle,
+  view,
+  feature,
+  data,
+}: {
+  session: AbstractSessionModel
+  newViewTitle: string
+  view: LinearGenomeViewModel
+  feature: Feature
+  data: {
+    tree: string
+    msa: string
+    treeMetadata: string
+  }
+}) {
+  session.addView('MsaView', {
+    type: 'MsaView',
+    displayName: newViewTitle,
+    treeAreaWidth: 200,
+    treeWidth: 100,
+    drawNodeBubbles: false,
+    labelsAlignRight: true,
+    showBranchLen: false,
+    colWidth: 10,
+    rowHeight: 12,
+    colorSchemeName: 'percent_identity_dynamic',
+    data,
+    connectedViewId: view.id,
+    connectedFeature: feature.toJSON(),
+  })
+}

package/src/LaunchMsaView/components/EnsemblGeneTree/ensemblGeneTreeUtils.ts

@@ -0,0 +1,81 @@
+import { fetchWithLocalStorageCache, jsonfetch, textfetch } from './util'
+
+interface TreeNodeSequence {
+  mol_seq: {
+    seq: string
+    location?: string
+  }
+  id: {
+    accession: string
+  }[]
+}
+
+interface TreeNodeTaxonomy {
+  common_name: string
+  scientific_name: string
+}
+
+// This is a self-referential tree data structure
+interface TreeNode {
+  children?: TreeNode[]
+  sequence?: TreeNodeSequence
+  taxonomy: TreeNodeTaxonomy
+}
+
+interface TreeRow {
+  id: string
+  seq: string
+  species: string
+  genomicLocString?: string
+}
+
+function gatherSequencesFromTree(tree: TreeNode, arr: TreeRow[] = []) {
+  if (tree.children) {
+    for (const child of tree.children) {
+      if (child.sequence) {
+        const id = child.sequence.id[0]?.accession
+        if (id) {
+          arr.push({
+            id,
+            seq: child.sequence.mol_seq.seq,
+            species:
+              child.taxonomy.common_name || child.taxonomy.scientific_name,
+            genomicLocString: child.sequence.mol_seq.location,
+          })
+        }
+      }
+      gatherSequencesFromTree(child, arr)
+    }
+  }
+  return arr
+}
+
+const base = 'https://rest.ensembl.org'
+
+export async function geneTreeFetcher(id2: string) {
+  const id = id2.replace(/\..*/, '')
+  const { species } = await fetchWithLocalStorageCache(`${id}-ensembl`, () =>
+    jsonfetch<{ species: string }>(
+      `${base}/lookup/id/${id}?content-type=application/json`,
+    ),
+  )
+  const treeBase = `${base}/genetree/member/id/${species}/${id}`
+  const msa = await fetchWithLocalStorageCache(`${id}-msa`, () =>
+    jsonfetch<{ tree: TreeNode }>(
+      `${treeBase}?content-type=application/json;aligned=1;sequence=pep`,
+    ),
+  )
+
+  const tree = await fetchWithLocalStorageCache<string>(`${id}-tree`, () =>
+    textfetch(`${treeBase}?nh_format=simple;content-type=text/x-nh`),
+  )
+
+  const res = gatherSequencesFromTree(msa.tree)
+  return {
+    tree,
+    msa: res.map(r => `>${r.id}\n${r.seq}`).join('\n'),
+    treeMetadata: JSON.stringify(
+      Object.fromEntries(res.map(r => [r.id, { genome: r.species }] as const)),
+    ),
+  }
+}

package/src/LaunchMsaView/components/EnsemblGeneTree/fetchGeneList.ts

@@ -0,0 +1,13 @@
+export async function fetchGeneList() {
+  const res = await fetch(
+    'https://jbrowse.org/demos/msaview/knownCanonical/list.txt',
+  )
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status} fetching list ${await res.text()}`)
+  }
+  const result = await res.text()
+  return result
+    .split('\n')
+    .map(f => f.trim())
+    .filter(f => !!f)
+}

package/src/LaunchMsaView/components/EnsemblGeneTree/util.ts

@@ -0,0 +1,45 @@
+import { ungzip } from 'pako'
+
+export async function jsonfetch<T>(url: string, arg?: RequestInit) {
+  const res = await fetch(url, arg)
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status} from ${url}: ${await res.text()}`)
+  }
+  return res.json() as Promise<T>
+}
+
+export async function textfetch(url: string, arg?: RequestInit) {
+  const res = await fetch(url, arg)
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status} from ${url}`)
+  }
+  return res.text()
+}
+
+export async function fetchWithLocalStorageCache<T>(
+  key: string,
+  fetchFn: () => Promise<T>,
+): Promise<T> {
+  const cachedData = localStorage.getItem(key)
+
+  if (cachedData) {
+    try {
+      return JSON.parse(cachedData) as T
+    } catch (error) {
+      console.error(`Error parsing cached data for ${key}:`, error)
+      // Continue to fetch fresh data if parsing fails
+    }
+  }
+
+  const data = await fetchFn()
+  localStorage.setItem(key, JSON.stringify(data))
+  return data
+}
+
+export async function unzipfetch(url: string, arg?: RequestInit) {
+  const res = await fetch(url, arg)
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status} from ${url}: ${await res.text()}`)
+  }
+  return ungzip(await res.arrayBuffer(), { to: 'string' })
+}

package/src/LaunchMsaView/components/LaunchMsaViewDialog.tsx

@@ -2,12 +2,13 @@ import React, { useState } from 'react'
 
 import { Dialog } from '@jbrowse/core/ui'
 import { AbstractTrackModel, Feature } from '@jbrowse/core/util'
-import { Box, Tab, Tabs } from '@mui/material'
+import { Tab, Tabs } from '@mui/material'
 
+import EnsemblGeneTree from './EnsemblGeneTree/EnsemblGeneTree'
+import MSALoader from './MSALoader/MSALoader'
 import NewNcbiBlastQueryPanel from './NewNCBIBlastQuery'
 import PreLoadedMSA from './PreLoadedMSA/PreLoadedMSADataPanel'
-import CustomTabPanel from './TabUtils'
-import { a11yProps } from './tabUtil'
+import TabPanel from './TabPanel'
 
 export default function LaunchProteinViewDialog({
   handleClose,
@@ -24,36 +25,46 @@ export default function LaunchProteinViewDialog({
     <Dialog
       maxWidth="xl"
       title="Launch MSA view"
+      open
       onClose={() => {
         handleClose()
       }}
-      open
     >
-      <Box sx={{ borderBottom: 1, borderColor: 'divider' }}>
-        <Tabs
-          value={value}
-          onChange={(_, val) => {
-            setValue(val)
-          }}
-        >
-          <Tab label="NCBI BLAST query" {...a11yProps(0)} />
-          <Tab label="UCSC 100-way dataset" {...a11yProps(1)} />
-        </Tabs>
-      </Box>
-      <CustomTabPanel value={value} index={0}>
+      <Tabs
+        value={value}
+        onChange={(_, val) => {
+          setValue(val)
+        }}
+      >
+        <Tab label="NCBI BLAST query" value={0} />
+        <Tab label="UCSC 100-way dataset" value={1} />
+        <Tab label="Ensembl GeneTree" value={2} />
+        <Tab label="Manually open MSA" value={3} />
+      </Tabs>
+      <TabPanel value={value} index={0}>
         <NewNcbiBlastQueryPanel
           handleClose={handleClose}
           feature={feature}
           model={model}
         />
-      </CustomTabPanel>
-      <CustomTabPanel value={value} index={1}>
+      </TabPanel>
+      <TabPanel value={value} index={1}>
         <PreLoadedMSA
           model={model}
           feature={feature}
           handleClose={handleClose}
         />
-      </CustomTabPanel>
+      </TabPanel>
+      <TabPanel value={value} index={2}>
+        <EnsemblGeneTree
+          model={model}
+          feature={feature}
+          handleClose={handleClose}
+        />
+      </TabPanel>
+      <TabPanel value={value} index={3}>
+        <MSALoader model={model} feature={feature} handleClose={handleClose} />
+      </TabPanel>
     </Dialog>
   )
 }

package/src/LaunchMsaView/components/MSALoader/MSALoader.tsx

@@ -0,0 +1,130 @@
+import React, { useEffect, useState } from 'react'
+
+import { FileSelector } from '@jbrowse/core/ui'
+import {
+  AbstractTrackModel,
+  Feature,
+  FileLocation,
+  getContainingView,
+  getSession,
+} from '@jbrowse/core/util'
+import { openLocation } from '@jbrowse/core/util/io'
+import { Button, DialogActions, DialogContent } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import { fetchGeneList } from './fetchGeneList'
+import { preCalculatedLaunchView } from './preCalculatedLaunchView'
+import { getGeneDisplayName, getId, getTranscriptFeatures } from '../../util'
+
+import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+const useStyles = makeStyles()({
+  dialogContent: {
+    width: '80em',
+  },
+})
+
+const PreLoadedMSA = observer(function PreLoadedMSA2({
+  model,
+  feature,
+  handleClose,
+}: {
+  model: AbstractTrackModel
+  feature: Feature
+  handleClose: () => void
+}) {
+  const session = getSession(model)
+  const view = getContainingView(model) as LinearGenomeViewModel
+  const { classes } = useStyles()
+  const [, setError] = useState<unknown>()
+  const [geneNameList, setGeneNameList] = useState<string[]>()
+  const [fileLocation, setFileLocation] = useState<FileLocation>()
+
+  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])
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    ;(async () => {
+      try {
+        if (fileLocation) {
+          await openLocation(fileLocation).readFile()
+        }
+      } catch (e) {
+        console.error(e)
+        setError(e)
+      }
+    })()
+  }, [fileLocation, feature])
+
+  const set = new Set(geneNameList)
+  const options = getTranscriptFeatures(feature)
+  const ret = options.find(val => set.has(getId(val)))
+  const [userSelection, setUserSelection] = useState(getId(options[0]))
+
+  return (
+    <>
+      <DialogContent className={classes.dialogContent}>
+        <FileSelector location={fileLocation} setLocation={setFileLocation} />
+      </DialogContent>
+
+      <DialogActions>
+        <Button
+          color="primary"
+          variant="contained"
+          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)
+              }
+            })()
+          }}
+        >
+          Submit
+        </Button>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </>
+  )
+})
+
+export default PreLoadedMSA

package/src/LaunchMsaView/components/MSALoader/fetchGeneList.ts

@@ -0,0 +1,13 @@
+export async function fetchGeneList() {
+  const res = await fetch(
+    'https://jbrowse.org/demos/msaview/knownCanonical/list.txt',
+  )
+  if (!res.ok) {
+    throw new Error(`HTTP ${res.status} fetching list ${await res.text()}`)
+  }
+  const result = await res.text()
+  return result
+    .split('\n')
+    .map(f => f.trim())
+    .filter(f => !!f)
+}

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

@@ -0,0 +1,55 @@
+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,
+  session,
+  newViewTitle,
+  view,
+  feature,
+}: {
+  session: AbstractSessionModel
+  userSelection: string
+  newViewTitle: string
+  view: LinearGenomeViewModel
+  feature: Feature
+}) {
+  const d = await myfetch(
+    `https://jbrowse.org/demos/msaview/knownCanonical/${userSelection}.mfa.gz`,
+  )
+
+  session.addView('MsaView', {
+    type: 'MsaView',
+    displayName: newViewTitle,
+    treeAreaWidth: 200,
+    treeWidth: 100,
+    drawNodeBubbles: false,
+    labelsAlignRight: true,
+    showBranchLen: false,
+    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,
+    },
+    connectedViewId: view.id,
+    connectedFeature: feature.toJSON(),
+  })
+}

package/src/LaunchMsaView/components/NewNCBIBlastQuery/calculateProteinSequence.ts

@@ -1,15 +1,11 @@
 import {
-  Feature,
   defaultCodonTable,
   generateCodonTable,
   revcom,
 } from '@jbrowse/core/util'
 
-export interface Feat {
-  start: number
-  end: number
-  type: string
-}
+import type { Feat } from './types'
+import type { Feature } from '@jbrowse/core/util'
 
 export function stitch(subfeats: Feat[], sequence: string) {
   return subfeats.map(sub => sequence.slice(sub.start, sub.end)).join('')
@@ -33,10 +29,7 @@ export function calculateProteinSequence({
   return protein
 }
 
-export function revlist(
-  list: { start: number; end: number; type: string }[],
-  seqlen: number,
-) {
+export function revlist(list: Feat[], seqlen: number) {
   return list
     .map(sub => ({
       ...sub,
@@ -65,23 +58,16 @@ export function getProteinSequence({
   seq: string
   selectedTranscript: Feature
 }) {
-  // @ts-expect-error
-  const f = selectedTranscript.toJSON() as {
-    start: number
-    end: number
-    strand: number
-    type: string
-    subfeatures: { start: number; end: number; type: string }[]
-  }
+  const f = selectedTranscript.toJSON()
   const cds = dedupe(
     f.subfeatures
-      .sort((a, b) => a.start - b.start)
+      ?.sort((a, b) => a.start - b.start)
       .map(sub => ({
         ...sub,
         start: sub.start - f.start,
         end: sub.end - f.start,
       }))
-      .filter(f => f.type === 'CDS'),
+      .filter(f => f.type === 'CDS') || [],
   )
 
   return calculateProteinSequence({