jbrowse-plugin-msaview 1.0.18 → 2.0.0

package/src/LaunchMsaView/components/NewNCBIBlastQuery/NcbiBlastPanel.tsx

@@ -0,0 +1,160 @@
+import React, { useState } from 'react'
+import { observer } from 'mobx-react'
+import { Button, DialogActions, DialogContent, MenuItem } from '@mui/material'
+import { makeStyles } from 'tss-react/mui'
+import {
+  AbstractTrackModel,
+  Feature,
+  getContainingView,
+} from '@jbrowse/core/util'
+import { ErrorMessage } from '@jbrowse/core/ui'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import {
+  getId,
+  getTranscriptDisplayName,
+  getTranscriptFeatures,
+  getGeneDisplayName,
+} from '../../util'
+import { getProteinSequence } from './calculateProteinSequence'
+import { useFeatureSequence } from './useFeatureSequence'
+import TextField2 from '../../../TextField2'
+import { ncbiBlastLaunchView } from './ncbiBlastLaunchView'
+
+const useStyles = makeStyles()({
+  dialogContent: {
+    width: '80em',
+  },
+  textAreaFont: {
+    fontFamily: 'Courier New',
+  },
+})
+
+const NcbiBlastPanel = observer(function NcbiBlastPanel2({
+  handleClose,
+  feature,
+  model,
+}: {
+  model: AbstractTrackModel
+  feature: Feature
+  handleClose: () => void
+}) {
+  const { classes } = useStyles()
+  const view = getContainingView(model) as LinearGenomeViewModel
+  const [blastDatabase, setBlastDatabase] = useState('nr')
+  const [msaAlgorithm, setMsaAlgorithm] = useState('clustalo')
+
+  const options = getTranscriptFeatures(feature)
+  const [userSelection, setUserSelection] = useState(getId(options[0]))
+  const selectedTranscript = options.find(val => getId(val) === userSelection)!
+  const { sequence, error } = useFeatureSequence({
+    view,
+    feature: selectedTranscript,
+  })
+  const proteinSequence =
+    sequence && !('error' in sequence)
+      ? getProteinSequence({
+          seq: sequence.seq,
+          selectedTranscript,
+        })
+      : ''
+
+  const blastDatabaseOptions = ['nr', 'nr_cluster_seq']
+  const msaAlgorithms = ['clustalo', 'muscle', 'kalign', 'mafft']
+  return (
+    <DialogContent className={classes.dialogContent}>
+      {error ? <ErrorMessage error={error} /> : null}
+      <TextField2
+        value={blastDatabase}
+        onChange={event => setBlastDatabase(event.target.value)}
+        label="BLAST blastDatabase"
+        select
+      >
+        {blastDatabaseOptions.map(val => (
+          <MenuItem value={val} key={val}>
+            {val}
+          </MenuItem>
+        ))}
+      </TextField2>
+
+      <TextField2
+        value={msaAlgorithm}
+        onChange={event => setMsaAlgorithm(event.target.value)}
+        label="MSA Algorithm"
+        select
+      >
+        {msaAlgorithms.map(val => (
+          <MenuItem value={val} key={val}>
+            {val}
+          </MenuItem>
+        ))}
+      </TextField2>
+
+      <TextField2
+        value={userSelection}
+        onChange={event => setUserSelection(event.target.value)}
+        label="Choose isoform to BLAST"
+        select
+      >
+        {options.map(val => (
+          <MenuItem value={getId(val)} key={val.id()}>
+            {getGeneDisplayName(feature)} - {getTranscriptDisplayName(val)}
+          </MenuItem>
+        ))}
+      </TextField2>
+      <TextField2
+        variant="outlined"
+        multiline
+        minRows={5}
+        maxRows={10}
+        fullWidth
+        value={
+          !proteinSequence
+            ? 'Loading...'
+            : `>${getTranscriptDisplayName(selectedTranscript)}\n${proteinSequence}`
+        }
+        InputProps={{
+          readOnly: true,
+          classes: {
+            input: classes.textAreaFont,
+          },
+        }}
+      />
+
+      <DialogActions>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => {
+            const newView = ncbiBlastLaunchView({
+              feature: selectedTranscript,
+              view,
+              newViewTitle: `NCBI BLAST - ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)} - ${msaAlgorithm}`,
+            })
+            newView.setBlastParams({
+              blastProgram: 'blastp',
+              blastDatabase,
+              msaAlgorithm,
+              selectedTranscript,
+              proteinSequence,
+            })
+            handleClose()
+          }}
+          disabled={!proteinSequence}
+        >
+          Submit
+        </Button>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => handleClose()}
+        >
+          Cancel
+        </Button>
+      </DialogActions>
+    </DialogContent>
+  )
+})
+
+export default NcbiBlastPanel

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

@@ -0,0 +1,92 @@
+import {
+  Feature,
+  defaultCodonTable,
+  generateCodonTable,
+  revcom,
+} from '@jbrowse/core/util'
+
+export interface Feat {
+  start: number
+  end: number
+  type: string
+}
+
+export function stitch(subfeats: Feat[], sequence: string) {
+  return subfeats.map(sub => sequence.slice(sub.start, sub.end)).join('')
+}
+
+export function calculateProteinSequence({
+  cds,
+  sequence,
+  codonTable,
+}: {
+  cds: Feat[]
+  sequence: string
+  codonTable: Record<string, string>
+}) {
+  const str = stitch(cds, sequence)
+  let protein = ''
+  for (let i = 0; i < str.length; i += 3) {
+    // use & symbol for undefined codon, or partial slice
+    protein += codonTable[str.slice(i, i + 3)] || '&'
+  }
+  return protein
+}
+
+export function revlist(
+  list: { start: number; end: number; type: string }[],
+  seqlen: number,
+) {
+  return list
+    .map(sub => ({
+      ...sub,
+      start: seqlen - sub.end,
+      end: seqlen - sub.start,
+    }))
+    .sort((a, b) => a.start - b.start)
+}
+
+// filter items if they have the same "ID" or location
+function getItemId(feat: Feat) {
+  return `${feat.start}-${feat.end}`
+}
+
+// filters if successive elements share same start/end
+export function dedupe(list: Feat[]) {
+  return list.filter(
+    (item, pos, ary) => !pos || getItemId(item) !== getItemId(ary[pos - 1]),
+  )
+}
+
+export function getProteinSequence({
+  selectedTranscript,
+  seq,
+}: {
+  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 cds = dedupe(
+    f.subfeatures
+      .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'),
+  )
+
+  return calculateProteinSequence({
+    cds: f.strand === -1 ? revlist(cds, seq.length) : cds,
+    sequence: f.strand === -1 ? revcom(seq) : seq,
+    codonTable: generateCodonTable(defaultCodonTable),
+  })
+}

package/src/LaunchMsaView/components/NewNCBIBlastQuery/index.tsx

@@ -0,0 +1,2 @@
+import NcbiBlastPanel from './NcbiBlastPanel'
+export default NcbiBlastPanel

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

@@ -0,0 +1,28 @@
+import { Feature, getSession } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+// locals
+import { JBrowsePluginMsaViewModel } from '../../../MsaViewPanel/model'
+
+export function ncbiBlastLaunchView({
+  newViewTitle,
+  view,
+  feature,
+}: {
+  newViewTitle: string
+  view: LinearGenomeViewModel
+  feature: Feature
+}) {
+  return getSession(view).addView('MsaView', {
+    type: 'MsaView',
+    displayName: newViewTitle,
+    connectedViewId: view.id,
+    connectedFeature: feature.toJSON(),
+    treeAreaWidth: 250,
+    treeWidth: 100,
+    drawNodeBubbles: true,
+    labelsAlignRight: true,
+    colWidth: 10,
+    rowHeight: 12,
+    colorSchemeName: 'percent_identity_dynamic',
+  }) as JBrowsePluginMsaViewModel
+}

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

@@ -0,0 +1,85 @@
+import { useEffect, useState } from 'react'
+
+import { Feature, getSession } from '@jbrowse/core/util'
+import { getConf } from '@jbrowse/core/configuration'
+
+export interface SeqState {
+  seq: string
+  upstream?: string
+  downstream?: string
+}
+
+export interface ErrorState {
+  error: string
+}
+const BPLIMIT = 500_000
+
+export function useFeatureSequence({
+  view,
+  feature,
+  upDownBp = 0,
+  forceLoad = true,
+}: {
+  view: { assemblyNames?: string[] } | undefined
+  feature: Feature
+  upDownBp?: number
+  forceLoad?: boolean
+}) {
+  const [sequence, setSequence] = useState<SeqState | ErrorState>()
+  const [error, setError] = useState<unknown>()
+  useEffect(() => {
+    if (view) {
+      const { assemblyManager, rpcManager } = getSession(view)
+      const [assemblyName] = view?.assemblyNames || []
+      async function fetchSeq(start: number, end: number, refName: string) {
+        const assembly = await assemblyManager.waitForAssembly(assemblyName)
+        if (!assembly) {
+          throw new Error('assembly not found')
+        }
+        const sessionId = 'getSequence'
+        const feats = await rpcManager.call(sessionId, 'CoreGetFeatures', {
+          adapterConfig: getConf(assembly, ['sequence', 'adapter']),
+          sessionId,
+          regions: [
+            {
+              start,
+              end,
+              refName: assembly.getCanonicalRefName(refName),
+              assemblyName,
+            },
+          ],
+        })
+
+        const [feat] = feats as Feature[]
+        return (feat?.get('seq') as string | undefined) || ''
+      }
+
+      // eslint-disable-next-line @typescript-eslint/no-floating-promises
+      ;(async () => {
+        try {
+          setError(undefined)
+          setSequence(undefined)
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          const { start, end, refName } = feature.toJSON() as any
+
+          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
+            const seq = await fetchSeq(start, end, refName)
+            const up = await fetchSeq(Math.max(0, b), start, refName)
+            const down = await fetchSeq(end, e, refName)
+            setSequence({ seq, upstream: up, downstream: down })
+          }
+        } catch (e) {
+          console.error(e)
+          setError(e)
+        }
+      })()
+    }
+  }, [feature, view, upDownBp, forceLoad])
+  return { sequence, error }
+}

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

@@ -0,0 +1,7 @@
+export function makeId(h: { accession: string; sciname: string }) {
+  return `${h.accession}-${h.sciname.replaceAll(' ', '_')}`
+}
+
+export function strip(s: string) {
+  return s.replace('-', '')
+}

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

@@ -0,0 +1,149 @@
+import React, { useEffect, useState } from 'react'
+import { observer } from 'mobx-react'
+import { ErrorMessage } from '@jbrowse/core/ui'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  MenuItem,
+  TextField,
+  Typography,
+} from '@mui/material'
+import {
+  AbstractTrackModel,
+  Feature,
+  getContainingView,
+  getSession,
+} from '@jbrowse/core/util'
+import { makeStyles } from 'tss-react/mui'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+
+// locals
+import {
+  getTranscriptDisplayName,
+  getId,
+  getTranscriptFeatures,
+} from '../../util'
+import { fetchGeneList } from './fetchGeneList'
+import { preCalculatedLaunchView } from './preCalculatedLaunchView'
+
+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 [error, 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 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}>
+        <Typography>
+          The source data for these multiple sequence alignments is from{' '}
+          <a href="https://hgdownload.soe.ucsc.edu/goldenPath/hg38/multiz100way/alignments/">
+            knownCanonical.multiz100way.protAA.fa.gz
+          </a>
+        </Typography>
+        {error ? <ErrorMessage error={error} /> : null}
+        {geneNameList && !ret ? (
+          <div style={{ color: 'red' }}>No MSA data for this gene found</div>
+        ) : null}
+        <TextField
+          value={userSelection}
+          onChange={event => setUserSelection(event.target.value)}
+          label="Choose isoform to view MSA for"
+          select
+        >
+          {options
+            .filter(val => set.has(getId(val)))
+            .map(val => (
+              <MenuItem value={getId(val)} key={val.id()}>
+                {getTranscriptDisplayName(val)} (has data)
+              </MenuItem>
+            ))}
+          {options
+            .filter(val => !set.has(getId(val)))
+            .map(val => (
+              <MenuItem value={getId(val)} key={val.id()} disabled>
+                {getTranscriptDisplayName(val)}
+              </MenuItem>
+            ))}
+        </TextField>
+      </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: '',
+                  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/PreLoadedMSA/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/PreLoadedMSA/preCalculatedLaunchView.ts

@@ -0,0 +1,54 @@
+import { AbstractSessionModel, Feature } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { ungzip } from 'pako'
+
+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/TabUtils.tsx

@@ -0,0 +1,30 @@
+import React from 'react'
+import { Box } from '@mui/material'
+
+interface TabPanelProps {
+  children?: React.ReactNode
+  index: number
+  value: number
+}
+
+export function CustomTabPanel(props: TabPanelProps) {
+  const { children, value, index, ...other } = props
+
+  return (
+    <div
+      role="tabpanel"
+      hidden={value !== index}
+      id={`gtabpanel-${index}`}
+      aria-labelledby={`gtab-${index}`}
+      {...other}
+    >
+      {value === index && <Box sx={{ p: 3 }}>{children}</Box>}
+    </div>
+  )
+}
+export function a11yProps(index: number) {
+  return {
+    id: `gtab-${index}`,
+    'aria-controls': `gtabpanel-${index}`,
+  }
+}

package/src/LaunchMsaView/index.ts

@@ -0,0 +1,61 @@
+import PluginManager from '@jbrowse/core/PluginManager'
+import DisplayType from '@jbrowse/core/pluggableElementTypes/DisplayType'
+import { PluggableElementType } from '@jbrowse/core/pluggableElementTypes'
+import { IAnyModelType } from 'mobx-state-tree'
+import { getSession, getContainingTrack } from '@jbrowse/core/util'
+
+// icons
+import AddIcon from '@mui/icons-material/Add'
+
+// locals
+import LaunchMsaViewDialog from './components/LaunchMsaViewDialog'
+
+function isDisplay(elt: { name: string }): elt is DisplayType {
+  return elt.name === 'LinearBasicDisplay'
+}
+
+function extendStateModel(stateModel: IAnyModelType) {
+  return stateModel.views(self => {
+    const superContextMenuItems = self.contextMenuItems
+    return {
+      contextMenuItems() {
+        const feature = self.contextMenuFeature
+        const track = getContainingTrack(self)
+        return [
+          ...superContextMenuItems(),
+          ...(feature
+            ? [
+                {
+                  label: 'Launch MSA view',
+                  icon: AddIcon,
+                  onClick: () => {
+                    const session = getSession(track)
+                    session.queueDialog(handleClose => [
+                      LaunchMsaViewDialog,
+                      {
+                        model: track,
+                        handleClose,
+                        feature,
+                      },
+                    ])
+                  },
+                },
+              ]
+            : []),
+        ]
+      },
+    }
+  })
+}
+
+export default function LaunchMsaViewF(pluginManager: PluginManager) {
+  pluginManager.addToExtensionPoint(
+    'Core-extendPluggableElement',
+    (elt: PluggableElementType) => {
+      if (isDisplay(elt)) {
+        elt.stateModel = extendStateModel(elt.stateModel)
+      }
+      return elt
+    },
+  )
+}