jbrowse-plugin-msaview 1.0.18 → 2.0.0

package/src/LaunchMsaView/util.ts

@@ -0,0 +1,30 @@
+import { Feature } from '@jbrowse/core/util'
+
+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'),
+      )
+}
+export function getId(val?: Feature) {
+  return val === undefined ? '' : val.get('name') || val.get('id')
+}
+
+export function getTranscriptDisplayName(val?: Feature) {
+  return val === undefined
+    ? ''
+    : [val.get('name'), val.get('id')].filter(f => !!f).join(' ')
+}
+
+export function getGeneDisplayName(val?: Feature) {
+  return val === undefined
+    ? ''
+    : [val.get('gene_name') || val.get('name'), val.get('id')]
+        .filter(f => !!f)
+        .join(' ')
+}

package/src/MsaViewPanel/components/LoadingBLAST.tsx

@@ -0,0 +1,59 @@
+import React from 'react'
+import { JBrowsePluginMsaViewModel } from '../model'
+import { Typography } from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+import { ErrorMessage, LoadingEllipses } from '@jbrowse/core/ui'
+
+// locals
+import RIDLink from './RIDLink'
+
+const useStyles = makeStyles()(theme => ({
+  margin: {
+    padding: 20,
+  },
+  loading: {
+    background: theme.palette.background.paper,
+  },
+}))
+
+function RIDError({ rid, error }: { rid?: string; error: unknown }) {
+  return (
+    <div>
+      {rid ? <RIDLink rid={rid} /> : null}
+      <ErrorMessage error={error} />
+    </div>
+  )
+}
+
+function RIDProgress({ rid, progress }: { rid: string; progress: string }) {
+  const { classes } = useStyles()
+  return (
+    <div className={classes.loading}>
+      {rid ? <RIDLink rid={rid} /> : null}
+      <Typography>{progress}</Typography>
+    </div>
+  )
+}
+
+const LoadingBLAST = observer(function LoadingBLAST2({
+  model,
+}: {
+  model: JBrowsePluginMsaViewModel
+}) {
+  const { progress, rid, error, processing } = model
+  const { classes } = useStyles()
+  return (
+    <div className={classes.margin}>
+      <LoadingEllipses message="Running NCBI BLAST" variant="h5" />
+      {error ? (
+        <RIDError rid={rid} error={error} />
+      ) : rid ? (
+        <RIDProgress rid={rid} progress={progress} />
+      ) : null}
+      <Typography>{processing || 'Initializing BLAST query'}</Typography>
+    </div>
+  )
+})
+
+export default LoadingBLAST

package/src/MsaViewPanel/components/MsaViewPanel.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import { observer } from 'mobx-react'
+import { MSAView } from 'react-msaview'
+
+// locals
+import { JBrowsePluginMsaViewModel } from '../model'
+import LoadingBLAST from './LoadingBLAST'
+
+const MsaViewPanel = observer(function MsaViewPanel2({
+  model,
+}: {
+  model: JBrowsePluginMsaViewModel
+}) {
+  const { blastParams } = model
+  return (
+    <div>
+      {blastParams ? <LoadingBLAST model={model} /> : <MSAView model={model} />}
+    </div>
+  )
+})
+
+export default MsaViewPanel

package/src/MsaViewPanel/components/RIDLink.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import { Link, Typography } from '@mui/material'
+// locals
+import OpenInNewIcon from '../../OpenInNewIcon'
+import { BLAST_URL } from '../../utils/ncbiBlast'
+
+function RIDLink({ rid }: { rid: string }) {
+  return (
+    <Typography>
+      RID {rid}{' '}
+      <Link target="_black" href={`${BLAST_URL}?CMD=Get&RID=${rid}`}>
+        (see status at NCBI <OpenInNewIcon />)
+      </Link>
+    </Typography>
+  )
+}
+
+export default RIDLink

package/src/MsaViewPanel/doLaunchBlast.ts

@@ -0,0 +1,38 @@
+import { launchMSA } from '../utils/msa'
+import { queryBlast } from '../utils/ncbiBlast'
+import {
+  makeId,
+  strip,
+} from '../LaunchMsaView/components/NewNCBIBlastQuery/util'
+import { JBrowsePluginMsaViewModel } from './model'
+
+export async function doLaunchBlast({
+  self,
+}: {
+  self: JBrowsePluginMsaViewModel
+}) {
+  const { blastDatabase, blastProgram, msaAlgorithm, proteinSequence } =
+    self.blastParams!
+  const query = proteinSequence.replaceAll('*', '').replaceAll('&', '')
+  const { hits } = await queryBlast({
+    query,
+    blastDatabase,
+    blastProgram,
+    onProgress: arg => self.setProgress(arg),
+    onRid: rid => self.setRid(rid),
+  })
+
+  const sequence = [
+    `>QUERY\n${query}`,
+    ...hits
+      .map(h => [makeId(h.description[0]), strip(h.hsps[0].hseq)] as const)
+      .map(([id, seq]) => `>${id}\n${seq}`),
+  ].join('\n')
+
+  const data = await launchMSA({
+    algorithm: msaAlgorithm,
+    sequence,
+    onProgress: arg => self.setProgress(arg),
+  })
+  return data
+}

package/src/MsaViewPanel/genomeToMSA.ts

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

package/src/MsaViewPanel/index.ts

@@ -0,0 +1,19 @@
+import { lazy } from 'react'
+import PluginManager from '@jbrowse/core/PluginManager'
+import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
+
+// locals
+import stateModelFactory from './model'
+
+// lazies
+const MsaViewPanel = lazy(() => import('./components/MsaViewPanel'))
+
+export default function MsaViewF(pluginManager: PluginManager) {
+  pluginManager.addViewType(() => {
+    return new ViewType({
+      name: 'MsaView',
+      stateModel: stateModelFactory(),
+      ReactComponent: MsaViewPanel,
+    })
+  })
+}

package/src/MsaViewPanel/model.ts

@@ -0,0 +1,290 @@
+import { Instance, addDisposer, cast, types } from 'mobx-state-tree'
+import { autorun } from 'mobx'
+import { MSAModelF } from 'react-msaview'
+import { Feature, getSession, notEmpty } from '@jbrowse/core/util'
+import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
+import { BaseViewModel } from '@jbrowse/core/pluggableElementTypes'
+
+// locals
+import { doLaunchBlast } from './doLaunchBlast'
+import { genomeToMSA } from './genomeToMSA'
+import { msaCoordToGenomeCoord } from './msaCoordToGenomeCoord'
+import { genomeToTranscriptSeqMapping } from 'g2p_mapper'
+
+type LGV = LinearGenomeViewModel
+
+type MaybeLGV = LGV | undefined
+
+export interface IRegion {
+  refName: string
+  start: number
+  end: number
+}
+
+export interface BlastParams {
+  blastDatabase: string
+  msaAlgorithm: string
+  blastProgram: string
+  selectedTranscript: Feature
+  proteinSequence: string
+}
+
+/**
+ * #stateModel MsaViewPlugin
+ * extends
+ * - MSAModel from https://github.com/GMOD/react-msaview
+ */
+export default function stateModelFactory() {
+  return types
+    .compose(
+      BaseViewModel,
+      MSAModelF(),
+      types.model('MsaView', {
+        /**
+         * #property
+         */
+        connectedViewId: types.maybe(types.string),
+        /**
+         * #property
+         */
+        connectedFeature: types.frozen(),
+        /**
+         * #property
+         */
+        connectedHighlights: types.array(
+          types.model({
+            refName: types.string,
+            start: types.number,
+            end: types.number,
+          }),
+        ),
+        /**
+         * #property
+         */
+        blastParams: types.frozen<BlastParams | undefined>(),
+
+        /**
+         * #property
+         */
+        zoomToBaseLevel: false,
+      }),
+    )
+
+    .volatile(() => ({
+      rid: undefined as string | undefined,
+      progress: '',
+      error: undefined as unknown,
+    }))
+
+    .views(self => ({
+      /**
+       * #method
+       */
+      ungappedCoordMap(rowName: string, position: number) {
+        const row = self.rows.find(f => f[0] === rowName)
+        const seq = row?.[1]
+        if (seq && position < seq.length) {
+          let i = 0
+          let j = 0
+          for (; j < position; j++, i++) {
+            while (seq[i] === '-') {
+              i++
+            }
+          }
+          return i
+        }
+        return undefined
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get transcriptToMsaMap() {
+        console.log(self.connectedFeature)
+        return self.connectedFeature
+          ? genomeToTranscriptSeqMapping(self.connectedFeature)
+          : undefined
+      },
+    }))
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get mouseCol2(): number | undefined {
+        return genomeToMSA({ model: self as JBrowsePluginMsaViewModel })
+      },
+      /**
+       * #getter
+       */
+      get clickCol2() {
+        return undefined
+      },
+    }))
+
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get processing() {
+        return !!self.progress
+      },
+
+      /**
+       * #getter
+       */
+      get connectedView() {
+        const { views } = getSession(self)
+        return views.find(f => f.id === self.connectedViewId) as MaybeLGV
+      },
+    }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      setZoomToBaseLevel(arg: boolean) {
+        self.zoomToBaseLevel = arg
+      },
+      /**
+       * #action
+       */
+      setError(e: unknown) {
+        self.error = e
+      },
+      /**
+       * #action
+       */
+      setProgress(arg: string) {
+        self.progress = arg
+      },
+      /**
+       * #action
+       */
+      setRid(arg: string) {
+        self.rid = arg
+      },
+      /**
+       * #action
+       */
+      setConnectedHighlights(r: IRegion[]) {
+        self.connectedHighlights = cast(r)
+      },
+      /**
+       * #action
+       */
+      addToConnectedHighlights(r: IRegion) {
+        self.connectedHighlights.push(r)
+      },
+      /**
+       * #action
+       */
+      clearConnectedHighlights() {
+        self.connectedHighlights = cast([])
+      },
+      /**
+       * #action
+       */
+      setBlastParams(args?: BlastParams) {
+        self.blastParams = args
+      },
+    }))
+
+    .views(self => ({
+      /**
+       * #method
+       * overrides base
+       */
+      extraViewMenuItems() {
+        return [
+          {
+            label: 'Zoom to base level on click?',
+            checked: self.zoomToBaseLevel,
+            type: 'checkbox',
+            onClick: () => self.setZoomToBaseLevel(!self.zoomToBaseLevel),
+          },
+        ]
+      },
+      /**
+       * #getter
+       */
+      get processing() {
+        return !!self.progress
+      },
+
+      /**
+       * #getter
+       */
+      get connectedView() {
+        const { views } = getSession(self)
+        return views.find(f => f.id === self.connectedViewId) as MaybeLGV
+      },
+    }))
+
+    .actions(self => ({
+      afterCreate() {
+        addDisposer(
+          self,
+          autorun(async () => {
+            if (self.blastParams) {
+              self.setProgress('Submitting query')
+              const data = await doLaunchBlast({
+                self: self as JBrowsePluginMsaViewModel,
+              })
+              self.setData(data)
+              self.setBlastParams(undefined)
+              self.setProgress('')
+            }
+          }),
+        )
+
+        // this adds highlights to the genome view when mouse-ing over the MSA
+        addDisposer(
+          self,
+          autorun(() => {
+            const { mouseCol, mouseClickCol } = self
+            const r1 =
+              mouseCol !== undefined
+                ? msaCoordToGenomeCoord({ model: self, coord: mouseCol })
+                : undefined
+            const r2 =
+              mouseClickCol !== undefined
+                ? msaCoordToGenomeCoord({ model: self, coord: mouseClickCol })
+                : undefined
+            self.setConnectedHighlights([r1, r2].filter(notEmpty))
+          }),
+        )
+
+        // nav to genome position after click
+        addDisposer(
+          self,
+          autorun(() => {
+            const { connectedView, zoomToBaseLevel, mouseClickCol } = self
+            const { assemblyManager } = getSession(self)
+            const r2 =
+              mouseClickCol !== undefined
+                ? msaCoordToGenomeCoord({ model: self, coord: mouseClickCol })
+                : undefined
+
+            if (!r2 || !connectedView) {
+              return
+            }
+
+            if (zoomToBaseLevel) {
+              connectedView.navTo(r2)
+            } else {
+              const r =
+                assemblyManager
+                  .get(connectedView.assemblyNames[0])
+                  ?.getCanonicalRefName(r2.refName) ?? r2.refName
+              connectedView.centerAt(r2.start, r)
+            }
+          }),
+        )
+      },
+    }))
+}
+
+export type JBrowsePluginMsaViewStateModel = ReturnType<
+  typeof stateModelFactory
+>
+export type JBrowsePluginMsaViewModel = Instance<JBrowsePluginMsaViewStateModel>

package/src/MsaViewPanel/msaCoordToGenomeCoord.ts

@@ -0,0 +1,29 @@
+// locals
+import { JBrowsePluginMsaViewModel } from './model'
+
+export function msaCoordToGenomeCoord({
+  model,
+  coord: mouseCol,
+}: {
+  model: JBrowsePluginMsaViewModel
+  coord: number
+}) {
+  const { transcriptToMsaMap } = model
+  if (mouseCol === undefined || transcriptToMsaMap === undefined) {
+    return
+  }
+
+  const c = mouseCol - 1
+  const k1 = model.globalCoordToRowSpecificSeqCoord('QUERY', c) || 0
+  const k2 = model.globalCoordToRowSpecificSeqCoord('QUERY', c + 1) || 0
+  const { refName, p2g } = transcriptToMsaMap
+  const s = p2g[k1]
+  const e = p2g[k2]
+  return s !== undefined && e !== undefined
+    ? {
+        refName,
+        start: Math.min(s, e),
+        end: Math.max(s, e),
+      }
+    : undefined
+}

package/src/MsaViewPanel/util.ts

@@ -0,0 +1,13 @@
+import { Feature } from '@jbrowse/core/util'
+
+export function checkHovered(hovered: unknown): hovered is {
+  hoverFeature: Feature
+  hoverPosition: { coord: number; refName: string }
+} {
+  return (
+    !!hovered &&
+    typeof hovered == 'object' &&
+    'hoverFeature' in hovered &&
+    'hoverPosition' in hovered
+  )
+}

package/src/OpenInNewIcon.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { SvgIcon, SvgIconProps } from '@mui/material'
+
+export default function OpenInNewIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon {...props}>
+      <path d="M0 0h24v24H0z" fill="none" />
+      <path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z" />
+    </SvgIcon>
+  )
+}

package/src/TextField2.tsx

@@ -0,0 +1,12 @@
+import React from 'react'
+import { TextField, TextFieldProps } from '@mui/material'
+
+function TextField2({ children, ...rest }: TextFieldProps) {
+  return (
+    <div>
+      <TextField {...rest}>{children}</TextField>
+    </div>
+  )
+}
+
+export default TextField2

package/src/index.ts

@@ -1,26 +1,24 @@
 import Plugin from '@jbrowse/core/Plugin'
 import PluginManager from '@jbrowse/core/PluginManager'
-import { version } from '../package.json'
 import { AbstractSessionModel, isAbstractMenuManager } from '@jbrowse/core/util'
-import * as MSA from 'react-msaview'
-import ViewType from '@jbrowse/core/pluggableElementTypes/ViewType'
-import GridOn from '@material-ui/icons/GridOn'
+
+// icons
+import GridOn from '@mui/icons-material/GridOn'
+
+// locals
+import { version } from '../package.json'
+import MsaViewF from './MsaViewPanel'
+import LaunchMsaViewF from './LaunchMsaView'
+import AddHighlightModelF from './AddHighlightModel'
 
 export default class MsaViewPlugin extends Plugin {
   name = 'MsaViewPlugin'
   version = version
 
   install(pluginManager: PluginManager) {
-    console.log({ MSA })
-    pluginManager.addViewType(
-      () =>
-        new ViewType({
-          name: 'MsaView',
-          //@ts-ignore
-          stateModel: MSA.MSAModel,
-          ReactComponent: MSA.MSAView,
-        }),
-    )
+    MsaViewF(pluginManager)
+    LaunchMsaViewF(pluginManager)
+    AddHighlightModelF(pluginManager)
   }
 
   configure(pluginManager: PluginManager) {

package/src/utils/fetch.ts

@@ -0,0 +1,25 @@
+export async function myfetch(url: string, args?: RequestInit) {
+  const response = await fetch(url, args)
+
+  if (!response.ok) {
+    throw new Error(
+      `HTTP ${response.status} fetching ${url} ${await response.text()}`,
+    )
+  }
+
+  return response
+}
+
+export async function textfetch(url: string, args?: RequestInit) {
+  const response = await myfetch(url, args)
+  return response.text()
+}
+
+export async function jsonfetch(url: string, args?: RequestInit) {
+  const response = await myfetch(url, args)
+  return response.json()
+}
+
+export function timeout(time: number) {
+  return new Promise(res => setTimeout(res, time))
+}