jbrowse-plugin-msaview 2.1.0 → 2.2.0

package/src/LaunchMsaView/components/NCBIBlastQuery/NCBISettingsDialog.tsx

@@ -0,0 +1,75 @@
+import React, { useState } from 'react'
+
+import {
+  Button,
+  Dialog,
+  DialogActions,
+  DialogContent,
+  DialogTitle,
+} from '@mui/material'
+
+import { BASE_BLAST_URL } from './consts'
+import TextField2 from '../../../TextField2'
+
+export default function NCBISettingsDialog({
+  handleClose,
+  baseUrl,
+}: {
+  handleClose: (arg?: string) => void
+  baseUrl: string
+}) {
+  const [tempBaseUrl, setTempBaseUrl] = useState(baseUrl)
+  return (
+    <Dialog
+      open
+      maxWidth="lg"
+      onClose={() => {
+        handleClose()
+      }}
+    >
+      <DialogTitle>BLAST Settings</DialogTitle>
+      <DialogContent>
+        <TextField2
+          autoFocus
+          margin="dense"
+          label="BLAST Base URL"
+          fullWidth
+          variant="outlined"
+          value={tempBaseUrl}
+          style={{ minWidth: '300px' }}
+          onChange={e => {
+            setTempBaseUrl(e.target.value)
+          }}
+        />
+        <Button
+          variant="contained"
+          onClick={() => {
+            setTempBaseUrl(BASE_BLAST_URL)
+          }}
+        >
+          Reset
+        </Button>
+      </DialogContent>
+      <DialogActions>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={() => {
+            handleClose()
+          }}
+        >
+          Cancel
+        </Button>
+        <Button
+          color="primary"
+          variant="contained"
+          onClick={() => {
+            handleClose(tempBaseUrl)
+          }}
+        >
+          Save
+        </Button>
+      </DialogActions>
+    </Dialog>
+  )
+}

package/src/LaunchMsaView/components/{NewNCBIBlastQuery/ncbiBlastLaunchView.ts → NCBIBlastQuery/blastLaunchView.ts}

@@ -3,26 +3,25 @@ import { Feature, getSession } from '@jbrowse/core/util'
 import type { JBrowsePluginMsaViewModel } from '../../../MsaViewPanel/model'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
-export function ncbiBlastLaunchView({
+export function blastLaunchView({
   newViewTitle,
   view,
   feature,
+  blastParams,
 }: {
   newViewTitle: string
   view: LinearGenomeViewModel
   feature: Feature
+  blastParams: Record<string, unknown>
 }) {
   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',
+    blastParams,
   }) as JBrowsePluginMsaViewModel
 }

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

@@ -0,0 +1 @@
+export const BASE_BLAST_URL = 'https://blast.ncbi.nlm.nih.gov/Blast.cgi'

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

@@ -7,28 +7,20 @@ import {
   getContainingView,
   getSession,
 } from '@jbrowse/core/util'
-import {
-  Button,
-  DialogActions,
-  DialogContent,
-  MenuItem,
-  TextField,
-  Typography,
-} from '@mui/material'
+import { Button, DialogActions, DialogContent, Typography } 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,
-  getTranscriptDisplayName,
-  getTranscriptFeatures,
-} from '../../util'
+import ExternalLink from '../../../ExternalLink'
+import { getGeneDisplayName, getId, getTranscriptFeatures } from '../../util'
+import TranscriptSelector from '../TranscriptSelector'
+import { useFeatureSequence } from '../useFeatureSequence'
 
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
+
 const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
@@ -47,7 +39,7 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
   const session = getSession(model)
   const view = getContainingView(model) as LinearGenomeViewModel
   const { classes } = useStyles()
-  const [error, setError] = useState<unknown>()
+  const [error1, setError] = useState<unknown>()
   const [geneNameList, setGeneNameList] = useState<string[]>()
   useEffect(() => {
     // eslint-disable-next-line @typescript-eslint/no-floating-promises
@@ -67,41 +59,39 @@ const PreLoadedMSA = observer(function PreLoadedMSA2({
       }
     })()
   }, [feature])
-  const set = new Set(geneNameList)
+  const validSet = new Set(geneNameList)
   const options = getTranscriptFeatures(feature)
-  const ret = options.find(val => set.has(getId(val)))
+  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({
+    view,
+    feature: selectedTranscript,
+  })
+
+  const e = error1 ?? error2
 
   return (
     <>
       <DialogContent className={classes.dialogContent}>
+        {e ? <ErrorMessage error={e} /> : null}
         <Typography>
           The source data for these multiple sequence alignments is from{' '}
-          <a href="https://hgdownload.soe.ucsc.edu/goldenPath/hg38/multiz100way/alignments/">
+          <ExternalLink href="https://hgdownload.soe.ucsc.edu/goldenPath/hg38/multiz100way/alignments/">
             knownCanonical.multiz100way.protAA.fa.gz
-          </a>
+          </ExternalLink>
         </Typography>
-        {error ? <ErrorMessage error={error} /> : null}
         {geneNameList && !ret ? (
           <Typography color="error">No MSA data for this gene found</Typography>
         ) : null}
-        <TextField
-          select
-          label="Choose isoform to view MSA for"
-          value={userSelection}
-          onChange={event => {
-            setUserSelection(event.target.value)
-          }}
-        >
-          {options.map(val => {
-            const inSet = set.has(getId(val))
-            return (
-              <MenuItem value={getId(val)} key={val.id()} disabled={!inSet}>
-                {getTranscriptDisplayName(val)} {inSet ? ' (has data)' : ''}
-              </MenuItem>
-            )
-          })}
-        </TextField>
+        <TranscriptSelector
+          feature={feature}
+          options={options}
+          selectedTranscriptId={userSelection}
+          onTranscriptChange={setUserSelection}
+          proteinSequence={proteinSequence}
+          validSet={validSet}
+        />
       </DialogContent>
 
       <DialogActions>

package/src/LaunchMsaView/components/TranscriptSelector.tsx

@@ -0,0 +1,99 @@
+import React, { useState } from 'react'
+
+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 {
+  getGeneDisplayName,
+  getId,
+  getTranscriptDisplayName,
+  getTranscriptLength,
+} from '../util'
+
+const useStyles = makeStyles()({
+  flex: {
+    display: 'flex',
+  },
+  minWidth: {
+    minWidth: 300,
+  },
+})
+
+export default function TranscriptSelector({
+  feature,
+  options,
+  selectedTranscriptId,
+  onTranscriptChange,
+  proteinSequence,
+  validSet,
+}: {
+  feature: Feature
+  options: Feature[]
+  selectedTranscriptId: string
+  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 (
+    <>
+      <div className={classes.flex}>
+        <TextField2
+          variant="outlined"
+          label={`Choose isoform of ${getGeneDisplayName(feature)}`}
+          select
+          className={classes.minWidth}
+          value={selectedTranscriptId}
+          onChange={event => {
+            onTranscriptChange(event.target.value)
+          }}
+        >
+          {options
+            .toSorted(
+              (a, b) => getTranscriptLength(b).len - getTranscriptLength(a).len,
+            )
+            .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
+            variant="contained"
+            color="primary"
+            onClick={() => {
+              setShowSequence(!showSequence)
+            }}
+          >
+            {showSequence ? 'Hide sequence' : 'Show sequence'}
+          </Button>
+        </div>
+      </div>
+
+      {showSequence && (
+        <ReadOnlyTextField2
+          value={
+            proteinSequence
+              ? `>${getTranscriptDisplayName(selectedTranscript)}\n${proteinSequence}`
+              : 'Loading...'
+          }
+        />
+      )}
+    </>
+  )
+}

package/src/LaunchMsaView/components/{NewNCBIBlastQuery/calculateProteinSequence.ts → calculateProteinSequence.ts}

@@ -1,4 +1,5 @@
 import {
+  dedupe,
   defaultCodonTable,
   generateCodonTable,
   revcom,
@@ -36,43 +37,32 @@ export function revlist(list: Feat[], seqlen: number) {
       start: seqlen - sub.end,
       end: seqlen - sub.start,
     }))
-    .sort((a, b) => a.start - b.start)
+    .toSorted((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({
+export function getProteinSequenceFromFeature({
   selectedTranscript,
   seq,
 }: {
   seq: string
   selectedTranscript: Feature
 }) {
-  const f = selectedTranscript.toJSON()
+  const { subfeatures, start, strand } = selectedTranscript.toJSON()
   const cds = dedupe(
-    f.subfeatures
-      ?.sort((a, b) => a.start - b.start)
+    subfeatures
+      ?.toSorted((a, b) => a.start - b.start)
       .map(sub => ({
         ...sub,
-        start: sub.start - f.start,
-        end: sub.end - f.start,
+        start: sub.start - start,
+        end: sub.end - start,
       }))
-      .filter(f => f.type === 'CDS') || [],
+      .filter(subfeature => subfeature.type === 'CDS') ?? [],
+    feat => `${feat.start}-${feat.end}`,
   )
 
   return calculateProteinSequence({
-    cds: f.strand === -1 ? revlist(cds, seq.length) : cds,
-    sequence: f.strand === -1 ? revcom(seq) : seq,
+    cds: strand === -1 ? revlist(cds, seq.length) : cds,
+    sequence: strand === -1 ? revcom(seq) : seq,
     codonTable: generateCodonTable(defaultCodonTable),
   })
 }

package/src/LaunchMsaView/components/{NewNCBIBlastQuery/useFeatureSequence.ts → useFeatureSequence.ts}

@@ -2,10 +2,11 @@ import { useEffect, useState } from 'react'
 
 import { getSession } from '@jbrowse/core/util'
 
+import { getProteinSequenceFromFeature } from './calculateProteinSequence'
 import { fetchSeq } from './fetchSeq'
 
-import type { Feature } from '@jbrowse/core/util'
 import type { SeqState } from './types'
+import type { Feature } from '@jbrowse/core/util'
 
 export interface ErrorState {
   error: string
@@ -80,5 +81,18 @@ export function useFeatureSequence({
       })()
     }
   }, [feature, view, upDownBp, assemblyName, forceLoad])
-  return { sequence, error }
+
+  const proteinSequence =
+    sequence && !('error' in sequence)
+      ? getProteinSequenceFromFeature({
+          seq: sequence.seq,
+          selectedTranscript: feature,
+        })
+      : ''
+
+  return {
+    proteinSequence,
+    sequence,
+    error,
+  }
 }

package/src/LaunchMsaView/util.ts

@@ -1,4 +1,6 @@
-import { Feature } from '@jbrowse/core/util'
+import { sum } from '@jbrowse/core/util'
+
+import type { Feature } from '@jbrowse/core/util'
 
 export function getTranscriptFeatures(feature: Feature) {
   // check if we are looking at a 'two-level' or 'three-level' feature by
@@ -11,6 +13,21 @@ export function getTranscriptFeatures(feature: Feature) {
         f.get('subfeatures')?.some(f => f.get('type') === 'CDS'),
       )
 }
+
+export function getTranscriptLength(feature: Feature) {
+  const cdsLen = sum(
+    feature
+      .get('subfeatures')
+      ?.filter(
+        f => (f.get('type') as string | undefined)?.toLowerCase() === 'cds',
+      )
+      .map(s => s.get('end') - s.get('start')) ?? [],
+  )
+  return {
+    len: Math.floor(cdsLen / 3),
+    mod: cdsLen % 3,
+  }
+}
 export function getId(val?: Feature): string {
   return val?.get('name') ?? val?.get('id') ?? ''
 }
@@ -24,7 +41,10 @@ export function getTranscriptDisplayName(val?: Feature) {
 export function getGeneDisplayName(val?: Feature) {
   return val === undefined
     ? ''
-    : [val.get('gene_name') ?? val.get('name'), val.get('id')]
+    : [
+        val.get('gene_name') ?? val.get('name'),
+        val.get('id') ? `(${val.get('id')})` : '',
+      ]
         .filter(f => !!f)
         .join(' ')
 }

package/src/MsaViewPanel/components/LoadingBLAST.tsx

@@ -17,20 +17,36 @@ const useStyles = makeStyles()(theme => ({
   },
 }))
 
-function RIDError({ rid, error }: { rid?: string; error: unknown }) {
+function RIDError({
+  baseUrl,
+  rid,
+  error,
+}: {
+  baseUrl: string
+  rid?: string
+  error: unknown
+}) {
   return (
     <div>
-      {rid ? <RIDLink rid={rid} /> : null}
+      {rid ? <RIDLink rid={rid} baseUrl={baseUrl} /> : null}
       <ErrorMessage error={error} />
     </div>
   )
 }
 
-function RIDProgress({ rid, progress }: { rid: string; progress: string }) {
+function RIDProgress({
+  baseUrl,
+  rid,
+  progress,
+}: {
+  baseUrl: string
+  rid: string
+  progress: string
+}) {
   const { classes } = useStyles()
   return (
     <div className={classes.loading}>
-      {rid ? <RIDLink rid={rid} /> : null}
+      {rid ? <RIDLink baseUrl={baseUrl} rid={rid} /> : null}
       <Typography>{progress}</Typography>
     </div>
   )
@@ -38,8 +54,10 @@ function RIDProgress({ rid, progress }: { rid: string; progress: string }) {
 
 const LoadingBLAST = observer(function LoadingBLAST2({
   model,
+  baseUrl,
 }: {
   model: JBrowsePluginMsaViewModel
+  baseUrl: string
 }) {
   const { progress, rid, error, processing } = model
   const { classes } = useStyles()
@@ -47,10 +65,10 @@ const LoadingBLAST = observer(function LoadingBLAST2({
     <div className={classes.margin}>
       <LoadingEllipses message="Running NCBI BLAST" variant="h5" />
       {error ? (
-        <RIDError rid={rid} error={error} />
-      ) : (rid ? (
-        <RIDProgress rid={rid} progress={progress} />
-      ) : null)}
+        <RIDError baseUrl={baseUrl} rid={rid} error={error} />
+      ) : rid ? (
+        <RIDProgress baseUrl={baseUrl} rid={rid} progress={progress} />
+      ) : null}
       <Typography>{processing || 'Initializing BLAST query'}</Typography>
     </div>
   )

package/src/MsaViewPanel/components/MsaViewPanel.tsx

@@ -14,7 +14,11 @@ const MsaViewPanel = observer(function MsaViewPanel2({
   const { blastParams } = model
   return (
     <div>
-      {blastParams ? <LoadingBLAST model={model} /> : <MSAView model={model} />}
+      {blastParams ? (
+        <LoadingBLAST model={model} baseUrl={blastParams.baseUrl} />
+      ) : (
+        <MSAView model={model} />
+      )}
     </div>
   )
 })

package/src/MsaViewPanel/components/RIDLink.tsx

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

package/src/MsaViewPanel/doLaunchBlast.ts

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

package/src/MsaViewPanel/model.ts

@@ -24,6 +24,7 @@ export interface IRegion {
 }
 
 export interface BlastParams {
+  baseUrl: string
   blastDatabase: string
   msaAlgorithm: string
   blastProgram: string

package/src/ReadOnlyTextField2.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+
+import { makeStyles } from 'tss-react/mui'
+
+import TextField2 from './TextField2'
+
+const useStyles = makeStyles()({
+  textAreaFont: {
+    fontFamily: 'Courier New',
+  },
+})
+
+export default function ReadOnlyTextField2({ value }: { value: string }) {
+  const { classes } = useStyles()
+  return (
+    <TextField2
+      variant="outlined"
+      multiline
+      minRows={5}
+      maxRows={10}
+      fullWidth
+      value={value}
+      slotProps={{
+        input: {
+          readOnly: true,
+          classes: {
+            input: classes.textAreaFont,
+          },
+        },
+      }}
+    />
+  )
+}