jbrowse-plugin-msaview 2.3.3 → 2.3.8

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

@@ -0,0 +1,52 @@
+import useSWR from 'swr'
+
+import {
+  clearAllCachedResults,
+  deleteCachedResult,
+  getAllCachedResults,
+} from '../../../utils/blastCache'
+
+const swrConfig = {
+  revalidateOnFocus: false,
+  revalidateOnReconnect: false,
+  revalidateIfStale: false,
+  refreshWhenHidden: false,
+  refreshWhenOffline: false,
+  shouldRetryOnError: false,
+}
+
+export function useCachedBlastResults(geneIds: string[]) {
+  const {
+    data: results,
+    error,
+    mutate,
+  } = useSWR(
+    `cached-blast-${geneIds.join(',')}`,
+    async () => {
+      const cached = await getAllCachedResults()
+      return cached.filter(r => r.geneId && geneIds.includes(r.geneId))
+    },
+    swrConfig,
+  )
+
+  const handleDelete = async (id: string) => {
+    await deleteCachedResult(id)
+    await mutate(
+      results => results?.filter(result => result.id !== id) ?? [],
+      false,
+    )
+  }
+
+  const handleClearAll = async () => {
+    await clearAllCachedResults()
+    await mutate([], false)
+  }
+
+  return {
+    results: results ?? [],
+    error,
+    isLoading: !results && !error,
+    handleDelete,
+    handleClearAll,
+  }
+}

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

@@ -24,6 +24,9 @@ const useStyles = makeStyles()({
   dialogContent: {
     width: '80em',
   },
+  selectedContainer: {
+    marginTop: 50,
+  },
 })
 
 const PreLoadedMSA = observer(function ({
@@ -120,7 +123,7 @@ const PreLoadedMSA = observer(function ({
         </TextField2>
 
         {selectedDataset ? (
-          <div style={{ marginTop: 50 }}>
+          <div className={classes.selectedContainer}>
             {!msaListLoading && msaDataLoading ? (
               <LoadingEllipses
                 variant="h6"
@@ -183,7 +186,13 @@ const PreLoadedMSA = observer(function ({
         >
           Submit
         </Button>
-        <Button color="secondary" variant="contained" onClick={handleClose}>
+        <Button
+          color="secondary"
+          variant="contained"
+          onClick={() => {
+            handleClose()
+          }}
+        >
           Cancel
         </Button>
       </DialogActions>

package/src/LaunchMsaView/components/TabPanel.tsx

@@ -13,7 +13,7 @@ export default function TabPanel({
 }) {
   return (
     <div role="tabpanel" hidden={value !== index} {...other}>
-      {value === index && <div>{children}</div>}
+      {value === index ? <div>{children}</div> : null}
     </div>
   )
 }

package/src/LaunchMsaView/components/TranscriptSelector.tsx

@@ -21,6 +21,10 @@ const useStyles = makeStyles()({
   minWidth: {
     minWidth: 300,
   },
+  centered: {
+    alignContent: 'center',
+    marginLeft: 20,
+  },
 })
 
 export default function TranscriptSelector({
@@ -70,7 +74,7 @@ export default function TranscriptSelector({
             )
           })}
         </TextField>
-        <div style={{ alignContent: 'center', marginLeft: 20 }}>
+        <div className={classes.centered}>
           <Button
             variant="contained"
             color="primary"
@@ -83,7 +87,7 @@ export default function TranscriptSelector({
         </div>
       </div>
 
-      {showSequence && (
+      {showSequence ? (
         <ReadOnlyTextField2
           value={
             proteinSequence
@@ -91,7 +95,7 @@ export default function TranscriptSelector({
               : 'Loading...'
           }
         />
-      )}
+      ) : null}
     </>
   )
 }

package/src/LaunchMsaView/components/useTranscriptSelection.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react'
+import { useMemo, useState } from 'react'
 
 import { featureMatchesId, getId, getSortedTranscriptFeatures } from '../util'
 import { useFeatureSequence } from './useFeatureSequence'
@@ -9,6 +9,24 @@ function featureInValidIds(feature: Feature, validIds: string[]): boolean {
   return validIds.some(id => featureMatchesId(feature, id))
 }
 
+function findValidSelection(
+  currentId: string,
+  options: Feature[],
+  validIds: string[] | undefined,
+): string | undefined {
+  if (!validIds || validIds.length === 0) {
+    return undefined
+  }
+
+  const currentFeature = options.find(opt => getId(opt) === currentId)
+  if (!currentFeature || featureInValidIds(currentFeature, validIds)) {
+    return undefined
+  }
+
+  const validOption = options.find(opt => featureInValidIds(opt, validIds))
+  return validOption ? getId(validOption) : undefined
+}
+
 export function useTranscriptSelection({
   feature,
   view,
@@ -20,29 +38,19 @@ export function useTranscriptSelection({
 }) {
   const options = useMemo(() => getSortedTranscriptFeatures(feature), [feature])
   const [selectedId, setSelectedId] = useState(() => getId(options[0]))
-  const selectedTranscript = options.find(val => getId(val) === selectedId)
+  const validatedSelectedId =
+    findValidSelection(selectedId, options, validIds) || selectedId
+  const selectedTranscript = options.find(
+    val => getId(val) === validatedSelectedId,
+  )
   const { proteinSequence, error } = useFeatureSequence({
     view,
     feature: selectedTranscript,
   })
 
-  useEffect(() => {
-    if (validIds && validIds.length > 0) {
-      const currentFeature = options.find(opt => getId(opt) === selectedId)
-      if (currentFeature && !featureInValidIds(currentFeature, validIds)) {
-        const validOption = options.find(opt =>
-          featureInValidIds(opt, validIds),
-        )
-        if (validOption) {
-          setSelectedId(getId(validOption))
-        }
-      }
-    }
-  }, [validIds, options, selectedId])
-
   return {
     options,
-    selectedId,
+    selectedId: validatedSelectedId,
     setSelectedId,
     selectedTranscript,
     proteinSequence,

package/src/MsaViewPanel/afterCreateAutoruns.ts

@@ -8,7 +8,7 @@ import {
   retrieveMsaData,
   storeMsaData,
 } from './msaDataStore'
-import { gappedToUngappedPosition } from './structureConnection'
+import { gappedToUngappedPosition, isProteinView } from './structureConnection'
 import { getUniprotIdFromAlphaFoldUrl } from './util'
 
 import type { JBrowsePluginMsaViewModel } from './model'
@@ -163,7 +163,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
     }
@@ -194,7 +194,7 @@ export function highlightConnectedStructures(self: JBrowsePluginMsaViewModel) {
 }
 
 export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
-  const { views } = getSession(self)
+  const views = getSession(self).views as unknown[]
   const { connectedViewId, uniprotId, rows, connectedStructures } = self
 
   if (!uniprotId || rows.length === 0) {
@@ -202,17 +202,19 @@ export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
   }
 
   for (const view of views) {
-    const v = view as any
-    if (v.type !== 'ProteinView' || !v.structures) {
+    if (!isProteinView(view)) {
       continue
     }
 
     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
+      }
 
       if (structure.connectedViewId !== connectedViewId) {
         continue
@@ -223,7 +225,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
@@ -234,7 +236,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)
       }
@@ -243,22 +245,21 @@ export function autoConnectStructures(self: JBrowsePluginMsaViewModel) {
 }
 
 export function observeProteinHighlights(self: JBrowsePluginMsaViewModel) {
-  const { views } = getSession(self)
+  const views = getSession(self).views as unknown[]
   const { connectedViewId, transcriptToMsaMap, querySeqName } = self
 
   if (!connectedViewId || !transcriptToMsaMap) {
     return
   }
 
-  const columns: number[] = []
+  const columns = new Set<number>()
 
   for (const view of views) {
-    const v = view as any
-    if (v.type !== 'ProteinView' || !v.structures) {
+    if (!isProteinView(view)) {
       continue
     }
 
-    for (const structure of v.structures) {
+    for (const structure of view.structures) {
       if (structure.connectedViewId !== connectedViewId) {
         continue
       }
@@ -274,16 +275,14 @@ export function observeProteinHighlights(self: JBrowsePluginMsaViewModel) {
           const proteinPos = g2p[coord]
           if (proteinPos !== undefined) {
             const col = self.seqPosToGlobalCol(querySeqName, proteinPos)
-            if (!columns.includes(col)) {
-              columns.push(col)
-            }
+            columns.add(col)
           }
         }
       }
     }
   }
 
-  const visibleColumns = columns
+  const visibleColumns = Array.from(columns)
     .map(col => self.globalColToVisibleCol(col))
     .filter((col): col is number => col !== undefined)
 

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 { isProteinView } 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 = (session.views as unknown[]).filter(isProteinView)
 
-  // 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/ErrorBoundary.tsx

@@ -0,0 +1,40 @@
+import type { ReactNode } from 'react'
+import React, { Component } from 'react'
+
+import { ErrorMessage } from '@jbrowse/core/ui'
+
+interface Props {
+  children: ReactNode
+}
+
+interface State {
+  hasError: boolean
+  error: unknown
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props)
+    this.state = { hasError: false, error: null }
+  }
+
+  static getDerivedStateFromError(error: unknown) {
+    return { hasError: true, error }
+  }
+
+  componentDidCatch(error: unknown, info: React.ErrorInfo) {
+    console.error('MsaViewPanel error:', error, info.componentStack)
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ padding: 20 }}>
+          <ErrorMessage error={this.state.error} />
+        </div>
+      )
+    }
+
+    return this.props.children
+  }
+}

package/src/MsaViewPanel/components/MsaViewPanel.tsx

@@ -3,29 +3,40 @@ 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 (
-    <div>
-      {blastParams ? (
-        <LoadingBLAST model={model} baseUrl={blastParams.baseUrl} />
-      ) : loadingStoredData ? (
-        <div style={{ padding: 20 }}>
-          <LoadingEllipses message="Loading MSA data" variant="h6" />
-        </div>
-      ) : (
-        <MSAView model={model} />
-      )}
-    </div>
+    <ErrorBoundary>
+      <div>
+        {blastParams ? (
+          <LoadingBLAST model={model} baseUrl={blastParams.baseUrl} />
+        ) : loadingStoredData ? (
+          <div className={classes.loadingContainer}>
+            <LoadingEllipses message="Loading MSA data" variant="h6" />
+          </div>
+        ) : (
+          <MSAView model={model} />
+        )}
+      </div>
+    </ErrorBoundary>
   )
 })
 

package/src/MsaViewPanel/model.ts

@@ -21,9 +21,13 @@ import {
 import { genomeToMSA } from './genomeToMSA'
 import { msaCoordToGenomeCoord } from './msaCoordToGenomeCoord'
 import { buildAlignmentMaps, runPairwiseAlignment } from './pairwiseAlignment'
-import { mapToRecord, ungappedToGappedPosition } from './structureConnection'
+import {
+  isProteinView,
+  mapToRecord,
+  ungappedToGappedPosition,
+} from './structureConnection'
 
-import type { StructureConnection } from './structureConnection'
+import type { ProteinView, StructureConnection } from './structureConnection'
 import type { MafRegion, MsaViewInitState } from './types'
 import type { Feature } from '@jbrowse/core/util'
 import type { Instance } from '@jbrowse/mobx-state-tree'
@@ -123,24 +127,31 @@ export default function stateModelFactory() {
       }),
     )
 
-    .volatile(() => ({
-      /**
-       * #volatile
-       */
-      rid: undefined as string | undefined,
-      /**
-       * #volatile
-       */
-      progress: '',
-      /**
-       * #volatile
-       */
-      error: undefined as unknown,
-      /**
-       * #volatile
-       */
-      loadingStoredData: false,
-    }))
+    .volatile(
+      (): {
+        rid: string | undefined
+        progress: string
+        error: unknown
+        loadingStoredData: boolean
+      } => ({
+        /**
+         * #volatile
+         */
+        rid: undefined,
+        /**
+         * #volatile
+         */
+        progress: '',
+        /**
+         * #volatile
+         */
+        error: undefined,
+        /**
+         * #volatile
+         */
+        loadingStoredData: false,
+      }),
+    )
 
     .views(self => ({
       /**
@@ -188,14 +199,19 @@ export default function stateModelFactory() {
        */
       get connectedProteinViews() {
         const { views } = getSession(self)
-        return self.connectedStructures
-          .map(conn => {
-            const proteinView = views.find(
-              (v: any) => v.id === conn.proteinViewId,
-            ) as any
-            return proteinView ? { ...conn, proteinView } : undefined
-          })
-          .filter((c): c is StructureConnection & { proteinView: any } => !!c)
+        const unknownViews = views as unknown[]
+        const result: (StructureConnection & { proteinView: ProteinView })[] =
+          []
+        for (const conn of self.connectedStructures) {
+          const proteinView = unknownViews.find(
+            (v): v is ProteinView =>
+              isProteinView(v) && v.id === conn.proteinViewId,
+          )
+          if (proteinView) {
+            result.push({ ...conn, proteinView })
+          }
+        }
+        return result
       },
     }))
 
@@ -205,7 +221,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]
@@ -369,14 +385,14 @@ export default function stateModelFactory() {
 
         const { views } = getSession(self)
 
-        const proteinView = views.find(
-          (v: any) => v.id === proteinViewId,
-        ) as any
+        const proteinView = (views as unknown[]).find(
+          (v): v is ProteinView => isProteinView(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`)
         }