jbrowse-plugin-msaview 2.6.7 → 2.7.0

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "2.6.7";
+export declare const version = "2.7.0";

package/dist/version.js

@@ -1 +1 @@
-export const version = '2.6.7';
+export const version = '2.7.0';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.6.7",
+  "version": "2.7.0",
   "license": "MIT",
   "name": "jbrowse-plugin-msaview",
   "repository": {
@@ -20,7 +20,7 @@
     "@gmod/bgzf-filehandle": "^6.2.0",
     "g2p_mapper": "^2.1.5",
     "idb": "^8.0.3",
-    "react-msaview": "^5.5.0",
+    "react-msaview": "^5.6.1",
     "swr": "^2.4.2"
   },
   "devDependencies": {
@@ -28,39 +28,37 @@
     "@eslint/js": "^10.0.1",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
     "@jbrowse/core": "^4.3.0",
-    "@jbrowse/mobx-state-tree": "^5.11.1",
+    "@jbrowse/mobx-state-tree": "^5.13.0",
     "@jbrowse/plugin-linear-genome-view": "^4.3.0",
-    "@mui/icons-material": "^7.3.11",
-    "@mui/material": "^7.3.11",
-    "@mui/system": "^7.3.11",
-    "@mui/x-data-grid": "^8.29.1",
-    "@types/node": "^25.9.4",
+    "@mui/icons-material": "^9.2.0",
+    "@mui/material": "^9.2.0",
+    "@mui/system": "^9.2.0",
+    "@mui/x-data-grid": "^9.10.0",
+    "@types/node": "^26.1.1",
     "@types/react": "^19.2.17",
-    "@typescript-eslint/eslint-plugin": "^8.62.0",
-    "@typescript-eslint/parser": "^8.62.0",
     "esbuild": "^0.28.1",
-    "eslint": "^10.5.0",
-    "eslint-plugin-import-x": "^4.17.0",
+    "eslint": "^10.7.0",
+    "eslint-plugin-import-x": "^4.17.1",
     "eslint-plugin-react": "^7.37.5",
     "eslint-plugin-react-hooks": "^7.1.1",
-    "eslint-plugin-unicorn": "^64.0.0",
+    "eslint-plugin-unicorn": "^72.0.0",
     "mobx": "^6.16.1",
     "mobx-react": "^9.2.2",
-    "msa-parsers": "^5.5.0",
+    "msa-parsers": "^5.6.1",
     "pixelmatch": "^7.2.0",
     "pngjs": "^7.0.0",
-    "prettier": "^3.8.4",
-    "pretty-bytes": "^7.1.0",
-    "puppeteer": "^25.2.1",
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
+    "prettier": "^3.9.6",
+    "pretty-bytes": "^7.1.1",
+    "puppeteer": "^25.3.0",
+    "react": "^19.2.8",
+    "react-dom": "^19.2.8",
     "rimraf": "^6.1.3",
     "rxjs": "^7.8.2",
     "serve": "^14.2.6",
     "tss-react": "^4.9.21",
-    "typescript": "^6.0.3",
-    "typescript-eslint": "^8.62.0",
-    "vitest": "^4.1.9"
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.65.0",
+    "vitest": "^4.1.10"
   },
   "scripts": {
     "clean": "rimraf dist",

package/src/LaunchMsaView/components/ManualMSALoader/ManualMSALoader.tsx

@@ -1,7 +1,6 @@
 import React, { useState } from 'react'
 
 import { FileSelector } from '@jbrowse/core/ui'
-import { getSession } from '@jbrowse/core/util'
 import {
   Alert,
   FormControl,
@@ -56,7 +55,6 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
   feature: Feature
   handleClose: () => void
 }) {
-  const session = getSession(model)
   const view = getLinearGenomeView(model)
   const { classes } = useStyles()
   const [launchViewError, setLaunchViewError] = useState<unknown>()
@@ -179,7 +177,6 @@ const ManualMSALoader = observer(function PreLoadedMSA2({
             if (selectedTranscript) {
               setLaunchViewError(undefined)
               launchView({
-                session,
                 newViewTitle: getGeneDisplayName(selectedTranscript),
                 view,
                 feature: selectedTranscript,

package/src/LaunchMsaView/components/ManualMSALoader/launchView.ts

@@ -1,12 +1,9 @@
-import type {
-  AbstractSessionModel,
-  Feature,
-  FileLocation,
-} from '@jbrowse/core/util'
+import { getSession } from '@jbrowse/core/util'
+
+import type { Feature, FileLocation } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 export function launchView({
-  session,
   newViewTitle,
   view,
   feature,
@@ -15,7 +12,6 @@ export function launchView({
   querySeqName,
   data,
 }: {
-  session: AbstractSessionModel
   newViewTitle: string
   view: LinearGenomeViewModel
   feature: Feature
@@ -27,7 +23,7 @@ export function launchView({
     tree?: string
   }
 }) {
-  session.addView('MsaView', {
+  getSession(view).addView('MsaView', {
     type: 'MsaView',
     displayName: newViewTitle,
     connectedViewId: view.id,

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

@@ -16,7 +16,12 @@ import { makeStyles } from 'tss-react/mui'
 
 import { blastLaunchViewFromCache } from './blastLaunchView'
 import { useCachedBlastResults } from './useCachedBlastResults'
-import { getGeneIdentifiers, getLinearGenomeView } from '../../util'
+import {
+  featureMatchesId,
+  getGeneIdentifiers,
+  getLinearGenomeView,
+  getSortedTranscriptFeatures,
+} from '../../util'
 
 import type { CachedBlastResult } from '../../../utils/blastCache'
 import type { AbstractTrackModel, Feature } from '@jbrowse/core/util'
@@ -65,10 +70,21 @@ const CachedBlastResults = observer(function ({
     useCachedBlastResults(geneIds)
 
   const handleUseCached = (cached: CachedBlastResult) => {
+    // reconnect the cached MSA to the genome: the cached query row is named
+    // 'QUERY' (react-msaview's default querySeqName) and corresponds to the
+    // transcript stored as transcriptId. Resolving it here restores the
+    // MSA<->genome navigation and hover-sync a fresh BLAST gets.
+    const { transcriptId } = cached
+    const transcript = transcriptId
+      ? getSortedTranscriptFeatures(feature).find(t =>
+          featureMatchesId(t, transcriptId),
+        )
+      : undefined
     blastLaunchViewFromCache({
       view,
       cached,
       newViewTitle: `BLAST - ${getResultDisplayName(cached)}`,
+      connectedFeature: transcript?.toJSON(),
     })
     handleClose()
   }

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

@@ -32,15 +32,18 @@ export function blastLaunchViewFromCache({
   newViewTitle,
   view,
   cached,
+  connectedFeature,
 }: {
   newViewTitle: string
   view: LinearGenomeViewModel
   cached: CachedBlastResult
+  connectedFeature?: ReturnType<Feature['toJSON']>
 }) {
   getSession(view).addView('MsaView', {
     type: 'MsaView',
     displayName: newViewTitle,
     connectedViewId: view.id,
+    connectedFeature,
     drawNodeBubbles: true,
     colWidth: 10,
     rowHeight: 12,

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

@@ -139,7 +139,6 @@ const PreLoadedMSA = observer(function ({
             if (selectedTranscript && msaData) {
               const querySeqName = `${selectedId}_${assemblyNames[0]}`
               preCalculatedLaunchView({
-                session,
                 newViewTitle: getGeneDisplayName(selectedTranscript),
                 view,
                 querySeqName,

package/src/LaunchMsaView/components/PreLoadedMSA/preCalculatedLaunchView.ts

@@ -1,8 +1,9 @@
-import type { AbstractSessionModel, Feature } from '@jbrowse/core/util'
+import { getSession } from '@jbrowse/core/util'
+
+import type { Feature } from '@jbrowse/core/util'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 export function preCalculatedLaunchView({
-  session,
   newViewTitle,
   view,
   feature,
@@ -10,13 +11,12 @@ export function preCalculatedLaunchView({
   querySeqName,
 }: {
   data: { msa: string }
-  session: AbstractSessionModel
   newViewTitle: string
   view: LinearGenomeViewModel
   feature: Feature
   querySeqName: string
 }) {
-  session.addView('MsaView', {
+  getSession(view).addView('MsaView', {
     type: 'MsaView',
     displayName: newViewTitle,
     treeAreaWidth: 200,

package/src/LaunchMsaView/components/useTranscriptSelection.ts

@@ -5,24 +5,25 @@ import { useFeatureSequence } from './useFeatureSequence'
 
 import type { Feature } from '@jbrowse/core/util'
 
-function findValidSelection(
+// Keep the current selection if it's valid for the given validIds, otherwise
+// fall back to the first valid option (or the current id if none qualify). With
+// no validIds constraint the current selection always stands.
+function pickSelectedId(
   currentId: string,
   options: Feature[],
   validIds: string[] | undefined,
-): string | undefined {
-  if (validIds && validIds.length > 0) {
-    const currentFeature = options.find(opt => getId(opt) === currentId)
-    const currentIsValid =
-      currentFeature &&
-      validIds.some(id => featureMatchesId(currentFeature, id))
-    if (currentFeature && !currentIsValid) {
-      const validOption = options.find(opt =>
-        validIds.some(id => featureMatchesId(opt, id)),
-      )
-      return validOption ? getId(validOption) : undefined
-    }
+): string {
+  if (!validIds?.length) {
+    return currentId
   }
-  return undefined
+  const isValid = (opt: Feature) =>
+    validIds.some(id => featureMatchesId(opt, id))
+  const current = options.find(opt => getId(opt) === currentId)
+  if (current && isValid(current)) {
+    return currentId
+  }
+  const firstValid = options.find(isValid)
+  return firstValid ? getId(firstValid) : currentId
 }
 
 export function useTranscriptSelection({
@@ -36,8 +37,7 @@ export function useTranscriptSelection({
 }) {
   const options = useMemo(() => getSortedTranscriptFeatures(feature), [feature])
   const [selectedId, setSelectedId] = useState(() => getId(options[0]))
-  const validatedSelectedId =
-    findValidSelection(selectedId, options, validIds) ?? selectedId
+  const validatedSelectedId = pickSelectedId(selectedId, options, validIds)
   const selectedTranscript = options.find(
     val => getId(val) === validatedSelectedId,
   )

package/src/LaunchMsaView/index.ts

@@ -14,45 +14,70 @@ function isDisplay(elt: { name: string }): elt is DisplayType {
   return elt.name === 'LinearBasicDisplay'
 }
 
+// The canvas LinearBasicDisplay (JBrowse >=4.3) exposes the right-clicked
+// feature via contextMenuInfo + async fetchFullFeature rather than a synchronous
+// feature object.
+interface ContextMenuInfo {
+  item: { featureId: string; type?: string }
+  displayedRegionIndex: number
+}
+
+interface DisplayModel {
+  contextMenuItems: () => MenuItem[]
+  contextMenuInfo?: ContextMenuInfo
+  isGeneLike: boolean
+  fetchFullFeature: (
+    featureId: string,
+    displayedRegionIndex: number,
+  ) => Promise<Feature | undefined>
+}
+
 function extendStateModel(stateModel: IAnyModelType) {
-  return stateModel.views(
-    (self: {
-      contextMenuItems: () => MenuItem[]
-      contextMenuFeature?: Feature
-    }) => {
-      const superContextMenuItems = self.contextMenuItems
-      return {
-        contextMenuItems() {
-          const feature = self.contextMenuFeature
-          const track = getContainingTrack(self)
-          const featureType = feature?.get('type')
-          const showMsaMenuItem =
-            feature && ['gene', 'mRNA', 'transcript'].includes(featureType)
-          return [
-            ...superContextMenuItems(),
-            ...(showMsaMenuItem
-              ? [
-                  {
-                    label: 'Launch MSA view',
-                    icon: AddIcon,
-                    onClick: () => {
-                      getSession(track).queueDialog(handleClose => [
-                        LaunchMsaViewDialog,
-                        {
-                          model: track,
-                          handleClose,
-                          feature,
-                        },
-                      ])
-                    },
+  return stateModel.views((self: DisplayModel) => {
+    const superContextMenuItems = self.contextMenuItems
+    return {
+      contextMenuItems() {
+        const track = getContainingTrack(self)
+        const session = getSession(track)
+        const info = self.contextMenuInfo
+        const showMsaMenuItem = info && self.isGeneLike
+        return [
+          ...superContextMenuItems(),
+          ...(showMsaMenuItem
+            ? [
+                {
+                  label: 'Launch MSA view',
+                  icon: AddIcon,
+                  onClick: () => {
+                    self
+                      .fetchFullFeature(
+                        info.item.featureId,
+                        info.displayedRegionIndex,
+                      )
+                      .then(feature => {
+                        if (feature) {
+                          session.queueDialog(handleClose => [
+                            LaunchMsaViewDialog,
+                            { model: track, handleClose, feature },
+                          ])
+                        } else {
+                          session.notify(
+                            'Could not load feature for MSA view',
+                            'warning',
+                          )
+                        }
+                      })
+                      .catch((e: unknown) => {
+                        session.notifyError(`${e}`, e)
+                      })
                   },
-                ]
-              : []),
-          ]
-        },
-      }
-    },
-  )
+                },
+              ]
+            : []),
+        ]
+      },
+    }
+  })
 }
 
 export default function LaunchMsaViewF(pluginManager: PluginManager) {

package/src/MsaViewPanel/model.ts

@@ -77,7 +77,7 @@ export default function stateModelFactory() {
         /**
          * #property
          */
-        querySeqName: 'QUERY',
+        querySeqName: types.stripDefault(types.string, 'QUERY'),
 
         /**
          * #property
@@ -87,7 +87,7 @@ export default function stateModelFactory() {
         /**
          * #property
          */
-        zoomToBaseLevel: false,
+        zoomToBaseLevel: types.stripDefault(types.boolean, false),
 
         /**
          * #property
@@ -207,9 +207,10 @@ export default function stateModelFactory() {
        * #getter
        */
       get connectedHighlights(): IRegion[] {
-        return [this.connectedHoverHighlight, this.connectedClickHighlight].filter(
-          (r): r is IRegion => r !== undefined,
-        )
+        return [
+          this.connectedHoverHighlight,
+          this.connectedClickHighlight,
+        ].filter((r): r is IRegion => r !== undefined)
       },
     }))
 
@@ -312,7 +313,6 @@ export default function stateModelFactory() {
           connectedView.centerAt(r2.start, r2.refName)
         }
       },
-
     }))
     .actions(self => {
       const superSetMouseClickPos = self.setMouseClickPos.bind(self)

package/src/version.ts

@@ -1 +1 @@
-export const version = '2.6.7'
+export const version = '2.7.0'