jbrowse-plugin-msaview 2.3.5 → 2.4.0

package/src/MsaViewPanel/afterCreateAutoruns.ts

@@ -8,27 +8,14 @@ import {
   retrieveMsaData,
   storeMsaData,
 } from './msaDataStore'
-import { gappedToUngappedPosition } from './structureConnection'
+import {
+  gappedToUngappedPosition,
+  getProteinViews,
+} from './structureConnection'
 import { getUniprotIdFromAlphaFoldUrl } from './util'
 
 import type { JBrowsePluginMsaViewModel } from './model'
 
-interface ProteinView {
-  type: 'ProteinView'
-  id: string
-  structures: {
-    connectedViewId?: string
-    uniprotId?: string
-    structureSequences?: unknown[]
-    hoverGenomeHighlights?: { start: number; end: number }[]
-  }[]
-}
-
-function isProteinView(view: unknown): view is ProteinView {
-  const v = view as Record<string, unknown>
-  return v.type === 'ProteinView' && Array.isArray(v.structures)
-}
-
 export function loadStoredData(self: JBrowsePluginMsaViewModel) {
   const { dataStoreId, rows } = self
   if (dataStoreId && rows.length === 0) {
@@ -57,8 +44,7 @@ export function loadStoredData(self: JBrowsePluginMsaViewModel) {
 export function storeDataToIndexedDB(self: JBrowsePluginMsaViewModel) {
   const { rows, dataStoreId } = self
   if (rows.length > 0 && !dataStoreId) {
-    const hasFilehandle = !!(self.msaFilehandle ?? self.treeFilehandle)
-    if (hasFilehandle) {
+    if (self.msaFilehandle || self.treeFilehandle) {
       return
     }
 
@@ -179,7 +165,7 @@ export function highlightConnectedStructures(self: JBrowsePluginMsaViewModel) {
   }
 
   for (const conn of connectedProteinViews) {
-    const structure = conn.proteinView?.structures?.[conn.structureIdx]
+    const structure = conn.proteinView.structures[conn.structureIdx]
     if (!structure) {
       continue
     }
@@ -210,25 +196,19 @@ export function highlightConnectedStructures(self: JBrowsePluginMsaViewModel) {
 }
 
 export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
-  const { views } = getSession(self)
   const { connectedViewId, uniprotId, rows, connectedStructures } = self
 
   if (!uniprotId || rows.length === 0) {
     return
   }
 
-  for (const view of views) {
-    if (!isProteinView(view)) {
-      continue
-    }
-    const v = view
-
+  for (const view of getProteinViews(getSession(self).views)) {
     for (
       let structureIdx = 0;
-      structureIdx < v.structures.length;
+      structureIdx < view.structures.length;
       structureIdx++
     ) {
-      const structure = v.structures[structureIdx]
+      const structure = view.structures[structureIdx]
       if (!structure) {
         continue
       }
@@ -242,7 +222,7 @@ export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
       }
 
       const alreadyConnected = connectedStructures.some(
-        c => c.proteinViewId === v.id && c.structureIdx === structureIdx,
+        c => c.proteinViewId === view.id && c.structureIdx === structureIdx,
       )
       if (alreadyConnected) {
         continue
@@ -253,7 +233,7 @@ export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
       }
 
       try {
-        self.connectToStructure(v.id, structureIdx)
+        self.connectToStructure(view.id, structureIdx)
       } catch (e) {
         console.error('Failed to auto-connect to ProteinView:', e)
       }
@@ -262,7 +242,6 @@ export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
 }
 
 export function observeProteinHighlights(self: JBrowsePluginMsaViewModel) {
-  const { views } = getSession(self)
   const { connectedViewId, transcriptToMsaMap, querySeqName } = self
 
   if (!connectedViewId || !transcriptToMsaMap) {
@@ -271,13 +250,8 @@ export function observeProteinHighlights(self: JBrowsePluginMsaViewModel) {
 
   const columns = new Set<number>()
 
-  for (const view of views) {
-    if (!isProteinView(view)) {
-      continue
-    }
-    const v = view
-
-    for (const structure of v.structures) {
+  for (const view of getProteinViews(getSession(self).views)) {
+    for (const structure of view.structures) {
       if (structure.connectedViewId !== connectedViewId) {
         continue
       }

package/src/MsaViewPanel/components/ConnectStructureDialog.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react'
 
-import { Dialog } from '@jbrowse/core/ui'
+import { Dialog, ErrorMessage } from '@jbrowse/core/ui'
 import { getSession } from '@jbrowse/core/util'
 import {
   Button,
@@ -13,9 +13,18 @@ import {
   Typography,
 } from '@mui/material'
 import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+import { getProteinViews } from '../structureConnection'
 
 import type { JBrowsePluginMsaViewModel } from '../model'
 
+const useStyles = makeStyles()(theme => ({
+  formControl: {
+    marginBottom: theme.spacing(2),
+  },
+}))
+
 const ConnectStructureDialog = observer(function ConnectStructureDialog({
   model,
   handleClose,
@@ -23,23 +32,18 @@ const ConnectStructureDialog = observer(function ConnectStructureDialog({
   model: JBrowsePluginMsaViewModel
   handleClose: () => void
 }) {
+  const { classes } = useStyles()
   const session = getSession(model)
   const [selectedViewId, setSelectedViewId] = useState('')
   const [selectedStructureIdx, setSelectedStructureIdx] = useState(0)
   const [selectedMsaRow, setSelectedMsaRow] = useState(model.querySeqName)
   const [error, setError] = useState<string>()
 
-  // Find all ProteinViews in the session
-
-  const proteinViews = session.views.filter(
-    (v: any) => v.type === 'ProteinView',
-  ) as any[]
+  const proteinViews = getProteinViews(session.views)
 
-  // Get structures for the selected view
   const selectedView = proteinViews.find(v => v.id === selectedViewId)
   const structures = selectedView?.structures ?? []
 
-  // Get MSA row names
   const msaRowNames = model.rows.map(r => r[0])
 
   const handleConnect = () => {
@@ -75,7 +79,7 @@ const ConnectStructureDialog = observer(function ConnectStructureDialog({
           </Typography>
         ) : (
           <>
-            <FormControl fullWidth sx={{ mb: 2 }}>
+            <FormControl fullWidth className={classes.formControl}>
               <InputLabel>Protein View</InputLabel>
               <Select
                 value={selectedViewId}
@@ -93,8 +97,8 @@ const ConnectStructureDialog = observer(function ConnectStructureDialog({
               </Select>
             </FormControl>
 
-            {structures.length > 1 && (
-              <FormControl fullWidth sx={{ mb: 2 }}>
+            {structures.length > 1 ? (
+              <FormControl fullWidth className={classes.formControl}>
                 <InputLabel>Structure</InputLabel>
                 <Select
                   value={selectedStructureIdx}
@@ -103,18 +107,16 @@ const ConnectStructureDialog = observer(function ConnectStructureDialog({
                     setSelectedStructureIdx(e.target.value)
                   }}
                 >
-                  {structures.map(
-                    (structure: { url?: string }, idx: number) => (
-                      <MenuItem key={idx} value={idx}>
-                        {structure.url ?? `Structure ${idx + 1}`}
-                      </MenuItem>
-                    ),
-                  )}
+                  {structures.map((structure, idx) => (
+                    <MenuItem key={idx} value={idx}>
+                      {structure.url ?? `Structure ${idx + 1}`}
+                    </MenuItem>
+                  ))}
                 </Select>
               </FormControl>
-            )}
+            ) : null}
 
-            <FormControl fullWidth sx={{ mb: 2 }}>
+            <FormControl fullWidth className={classes.formControl}>
               <InputLabel>MSA Row</InputLabel>
               <Select
                 value={selectedMsaRow}
@@ -131,11 +133,7 @@ const ConnectStructureDialog = observer(function ConnectStructureDialog({
               </Select>
             </FormControl>
 
-            {error && (
-              <Typography color="error" sx={{ mt: 1 }}>
-                {error}
-              </Typography>
-            )}
+            {error ? <ErrorMessage error={error} /> : null}
           </>
         )}
       </DialogContent>

package/src/MsaViewPanel/components/LoadingBLAST.tsx

@@ -60,7 +60,7 @@ const LoadingBLAST = observer(function LoadingBLAST2({
   model: JBrowsePluginMsaViewModel
   baseUrl: string
 }) {
-  const { progress, rid, error, processing } = model
+  const { progress, rid, error } = model
   const { classes } = useStyles()
   return (
     <div className={classes.margin}>
@@ -69,8 +69,9 @@ const LoadingBLAST = observer(function LoadingBLAST2({
         <RIDError baseUrl={baseUrl} rid={rid} error={error} />
       ) : rid ? (
         <RIDProgress baseUrl={baseUrl} rid={rid} progress={progress} />
-      ) : null}
-      <Typography>{processing || 'Initializing BLAST query'}</Typography>
+      ) : (
+        <Typography>{progress || 'Initializing BLAST query'}</Typography>
+      )}
     </div>
   )
 })

package/src/MsaViewPanel/components/MsaViewPanel.tsx

@@ -3,17 +3,25 @@ import React from 'react'
 import { LoadingEllipses } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 import { MSAView } from 'react-msaview'
+import { makeStyles } from 'tss-react/mui'
 
 import { ErrorBoundary } from './ErrorBoundary'
 import LoadingBLAST from './LoadingBLAST'
 
 import type { JBrowsePluginMsaViewModel } from '../model'
 
+const useStyles = makeStyles()({
+  loadingContainer: {
+    padding: 20,
+  },
+})
+
 const MsaViewPanel = observer(function MsaViewPanel2({
   model,
 }: {
   model: JBrowsePluginMsaViewModel
 }) {
+  const { classes } = useStyles()
   const { blastParams, loadingStoredData } = model
   return (
     <ErrorBoundary>
@@ -21,7 +29,7 @@ const MsaViewPanel = observer(function MsaViewPanel2({
         {blastParams ? (
           <LoadingBLAST model={model} baseUrl={blastParams.baseUrl} />
         ) : loadingStoredData ? (
-          <div style={{ padding: 20 }}>
+          <div className={classes.loadingContainer}>
             <LoadingEllipses message="Loading MSA data" variant="h6" />
           </div>
         ) : (

package/src/MsaViewPanel/model.ts

@@ -21,10 +21,18 @@ import {
 import { genomeToMSA } from './genomeToMSA'
 import { msaCoordToGenomeCoord } from './msaCoordToGenomeCoord'
 import { buildAlignmentMaps, runPairwiseAlignment } from './pairwiseAlignment'
-import { mapToRecord, ungappedToGappedPosition } from './structureConnection'
+import {
+  getProteinViews,
+  ungappedToGappedPosition,
+} from './structureConnection'
 
-import type { StructureConnection } from './structureConnection'
+import type { ProteinView, StructureConnection } from './structureConnection'
 import type { MafRegion, MsaViewInitState } from './types'
+import type {
+  BlastDatabase,
+  BlastProgram,
+  MsaAlgorithm,
+} from '../LaunchMsaView/components/NCBIBlastQuery/consts'
 import type { Feature } from '@jbrowse/core/util'
 import type { Instance } from '@jbrowse/mobx-state-tree'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
@@ -45,9 +53,9 @@ export interface IRegion {
 
 export interface BlastParams {
   baseUrl: string
-  blastDatabase: string
-  msaAlgorithm: string
-  blastProgram: string
+  blastDatabase: BlastDatabase
+  msaAlgorithm: MsaAlgorithm
+  blastProgram: BlastProgram
   selectedTranscript?: Feature
   proteinSequence: string
   rid?: string
@@ -175,13 +183,6 @@ export default function stateModelFactory() {
           : undefined
       },
 
-      /**
-       * #getter
-       */
-      get processing() {
-        return !!self.progress
-      },
-
       /**
        * #getter
        */
@@ -194,19 +195,18 @@ export default function stateModelFactory() {
        * #getter
        */
       get connectedProteinViews() {
-        const { views } = getSession(self)
-        return self.connectedStructures
-          .map(conn => {
-            const proteinView = views.find(
-              (v: unknown) =>
-                (v as Record<string, unknown>).id === conn.proteinViewId,
-            )
-            return proteinView ? { ...conn, proteinView } : undefined
-          })
-          .filter(
-            (c): c is StructureConnection & { proteinView: any } =>
-              c !== undefined,
+        const proteinViews = getProteinViews(getSession(self).views)
+        const result: (StructureConnection & { proteinView: ProteinView })[] =
+          []
+        for (const conn of self.connectedStructures) {
+          const proteinView = proteinViews.find(
+            v => v.id === conn.proteinViewId,
           )
+          if (proteinView) {
+            result.push({ ...conn, proteinView })
+          }
+        }
+        return result
       },
     }))
 
@@ -216,7 +216,7 @@ export default function stateModelFactory() {
        */
       get structureHoverCol(): number | undefined {
         for (const conn of self.connectedProteinViews) {
-          const structure = conn.proteinView?.structures?.[conn.structureIdx]
+          const structure = conn.proteinView.structures[conn.structureIdx]
           const structurePos = structure?.hoverPosition?.structureSeqPos
           if (structurePos !== undefined) {
             const msaUngapped = conn.structureToMsa[structurePos]
@@ -246,12 +246,6 @@ export default function stateModelFactory() {
         }
         return genomeToMSA({ model: self as JBrowsePluginMsaViewModel })
       },
-      /**
-       * #getter
-       */
-      get clickCol2() {
-        return undefined
-      },
     }))
 
     .actions(self => ({
@@ -378,16 +372,14 @@ export default function stateModelFactory() {
 
         const ungappedMsaSequence = msaSequence.replaceAll('-', '')
 
-        const { views } = getSession(self)
-
-        const proteinView = views.find(
-          (v: any) => v.id === proteinViewId,
-        ) as any
+        const proteinView = getProteinViews(getSession(self).views).find(
+          v => v.id === proteinViewId,
+        )
         if (!proteinView) {
           throw new Error(`ProteinView "${proteinViewId}" not found`)
         }
 
-        const structure = proteinView.structures?.[structureIdx]
+        const structure = proteinView.structures[structureIdx]
         if (!structure) {
           throw new Error(`Structure at index ${structureIdx} not found`)
         }
@@ -407,8 +399,8 @@ export default function stateModelFactory() {
           proteinViewId,
           structureIdx,
           msaRowName: rowName,
-          msaToStructure: mapToRecord(seq1ToSeq2),
-          structureToMsa: mapToRecord(seq2ToSeq1),
+          msaToStructure: Object.fromEntries(seq1ToSeq2),
+          structureToMsa: Object.fromEntries(seq2ToSeq1),
         }
 
         self.connectedStructures.push(connection)

package/src/MsaViewPanel/msaDataStore.ts

@@ -66,15 +66,6 @@ export async function retrieveMsaData(id: string) {
   }
 }
 
-export async function deleteMsaData(id: string) {
-  try {
-    const db = await getDB()
-    await db.delete(STORE_NAME, id)
-  } catch (e) {
-    console.warn('Failed to delete MSA data:', e)
-  }
-}
-
 export async function cleanupOldData(maxAgeMs = 7 * 24 * 60 * 60 * 1000) {
   try {
     const db = await getDB()

package/src/MsaViewPanel/pairwiseAlignment.ts

@@ -1,9 +1,7 @@
 import BLOSUM62 from './blosum62'
 
 function getScore(a: string, b: string) {
-  const upper_a = a.toUpperCase()
-  const upper_b = b.toUpperCase()
-  return BLOSUM62[upper_a]?.[upper_b] ?? -4
+  return BLOSUM62[a.toUpperCase()]?.[b.toUpperCase()] ?? -4
 }
 
 const GAP_OPEN = -10
@@ -75,10 +73,12 @@ export function needlemanWunsch(
   let i = m
   let j = n
 
-  const finalScores = [M[m]![n]!, Ix[m]![n]!, Iy[m]![n]!]
-  const score = Math.max(...finalScores)
+  const mScore = M[m]![n]!
+  const ixScore = Ix[m]![n]!
+  const iyScore = Iy[m]![n]!
+  const score = Math.max(mScore, ixScore, iyScore)
   let currentMatrix: 'M' | 'Ix' | 'Iy' =
-    score === M[m]![n]! ? 'M' : score === Ix[m]![n]! ? 'Ix' : 'Iy'
+    score === mScore ? 'M' : score === ixScore ? 'Ix' : 'Iy'
 
   while (i > 0 || j > 0) {
     if (currentMatrix === 'M' && i > 0 && j > 0) {

package/src/MsaViewPanel/structureConnection.test.ts

@@ -2,7 +2,6 @@ import { describe, expect, test } from 'vitest'
 
 import {
   gappedToUngappedPosition,
-  mapToRecord,
   ungappedToGappedPosition,
 } from './structureConnection'
 
@@ -121,23 +120,3 @@ describe('gappedToUngappedPosition and ungappedToGappedPosition are inverses', (
     }
   })
 })
-
-describe('mapToRecord', () => {
-  test('converts Map to Record', () => {
-    const map = new Map<number, number>([
-      [0, 5],
-      [1, 10],
-      [2, 15],
-    ])
-    const record = mapToRecord(map)
-    expect(record[0]).toBe(5)
-    expect(record[1]).toBe(10)
-    expect(record[2]).toBe(15)
-  })
-
-  test('handles empty Map', () => {
-    const map = new Map<number, number>()
-    const record = mapToRecord(map)
-    expect(Object.keys(record)).toHaveLength(0)
-  })
-})

package/src/MsaViewPanel/structureConnection.ts

@@ -1,3 +1,33 @@
+export interface ProteinViewStructure {
+  url?: string
+  connectedViewId?: string
+  uniprotId?: string
+  structureSequences?: string[]
+  hoverGenomeHighlights?: { start: number; end: number }[]
+  hoverPosition?: { structureSeqPos?: number }
+  clearHighlightFromExternal?: () => void
+  highlightFromExternal?: (pos: number) => void
+}
+
+export interface ProteinView {
+  type: 'ProteinView'
+  id: string
+  displayName?: string
+  structures: ProteinViewStructure[]
+}
+
+export function isProteinView(view: unknown): view is ProteinView {
+  const v = view as Record<string, unknown>
+  return v.type === 'ProteinView' && Array.isArray(v.structures)
+}
+
+/**
+ * Extract all ProteinView instances from a session's views array.
+ */
+export function getProteinViews(views: { type: string }[]): ProteinView[] {
+  return (views as unknown[]).filter(isProteinView)
+}
+
 /**
  * Represents a connection between the MSA view and a protein structure
  */
@@ -59,10 +89,3 @@ export function ungappedToGappedPosition(
   }
   return undefined
 }
-
-/**
- * Convert Map to plain object for MST frozen storage
- */
-export function mapToRecord(map: Map<number, number>): Record<number, number> {
-  return Object.fromEntries(map)
-}

package/src/utils/blastCache.ts

@@ -1,5 +1,11 @@
 import { openDB } from 'idb'
 
+import type {
+  BlastDatabase,
+  BlastProgram,
+  MsaAlgorithm,
+} from '../LaunchMsaView/components/NCBIBlastQuery/consts'
+
 const DB_NAME = 'jbrowse-msaview-blast-cache'
 const STORE_NAME = 'blast-results'
 const DB_VERSION = 2
@@ -7,9 +13,9 @@ const DB_VERSION = 2
 export interface CachedBlastResult {
   id: string
   proteinSequence: string
-  blastDatabase: string
-  blastProgram: string
-  msaAlgorithm: string
+  blastDatabase: BlastDatabase
+  blastProgram: BlastProgram
+  msaAlgorithm: MsaAlgorithm
   msa: string
   tree: string
   treeMetadata: string
@@ -36,8 +42,8 @@ async function getDB() {
 
 function createCacheKey(
   proteinSequence: string,
-  blastDatabase: string,
-  blastProgram: string,
+  blastDatabase: BlastDatabase,
+  blastProgram: BlastProgram,
   transcriptId?: string,
 ) {
   if (transcriptId) {
@@ -46,27 +52,6 @@ function createCacheKey(
   return `${blastDatabase}:${blastProgram}:${proteinSequence}`
 }
 
-export async function getCachedBlastResult({
-  proteinSequence,
-  blastDatabase,
-  blastProgram,
-  transcriptId,
-}: {
-  proteinSequence: string
-  blastDatabase: string
-  blastProgram: string
-  transcriptId?: string
-}) {
-  const db = await getDB()
-  const id = createCacheKey(
-    proteinSequence,
-    blastDatabase,
-    blastProgram,
-    transcriptId,
-  )
-  return db.get(STORE_NAME, id)
-}
-
 export async function saveBlastResult({
   proteinSequence,
   blastDatabase,
@@ -82,9 +67,9 @@ export async function saveBlastResult({
   geneName,
 }: {
   proteinSequence: string
-  blastDatabase: string
-  blastProgram: string
-  msaAlgorithm: string
+  blastDatabase: BlastDatabase
+  blastProgram: BlastProgram
+  msaAlgorithm: MsaAlgorithm
   msa: string
   tree: string
   treeMetadata: string
@@ -127,14 +112,6 @@ export async function getAllCachedResults() {
   return results.toSorted((a, b) => b.timestamp - a.timestamp)
 }
 
-export async function getCachedResultsByGeneId(geneId: string) {
-  const db = await getDB()
-  const results = await db.getAll(STORE_NAME)
-  return results
-    .filter(r => r.geneId === geneId)
-    .toSorted((a, b) => b.timestamp - a.timestamp)
-}
-
 export async function deleteCachedResult(id: string) {
   const db = await getDB()
   await db.delete(STORE_NAME, id)

package/src/utils/msa.ts

@@ -1,9 +1,11 @@
 import { textfetch, timeout } from './fetch'
 
+import type { MsaAlgorithm } from '../LaunchMsaView/components/NCBIBlastQuery/consts'
+
 const base = `https://www.ebi.ac.uk/Tools/services/rest`
 
 const algorithms: Record<
-  string,
+  MsaAlgorithm,
   {
     params: Record<string, string>
     msaResult: string
@@ -38,7 +40,7 @@ async function wait({
   algorithm,
 }: {
   jobId: string
-  algorithm: string
+  algorithm: MsaAlgorithm
   onProgress: (arg: string) => void
 }) {
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
@@ -62,14 +64,11 @@ export async function launchMSA({
   sequence,
   onProgress,
 }: {
-  algorithm: string
+  algorithm: MsaAlgorithm
   sequence: string
   onProgress: (arg: string) => void
 }) {
   const config = algorithms[algorithm]
-  if (!config) {
-    throw new Error(`unknown algorithm: ${algorithm}`)
-  }
 
   onProgress(`Launching ${algorithm} MSA...`)