Convert to use mobx-state-tree autoruns instead of useEffect, with po…

…tential for displaying multiple structures (#13)

eslint.config.mjs

@@ -7,12 +7,7 @@ import tseslint from 'typescript-eslint'
 
 export default tseslint.config(
   {
-    ignores: [
-      '**/dist/**/*',
-      'jest.config.js',
-      'eslint.config.mjs',
-      'esbuild.mjs',
-    ],
+    ignores: ['**/dist/**/*', 'eslint.config.mjs', 'esbuild.mjs'],
   },
   {
     languageOptions: {
@@ -78,6 +73,7 @@ export default tseslint.config(
 
       'unicorn/no-null': 'off',
       'unicorn/prefer-spread': 'off',
+      'unicorn/no-nested-ternary': 'off',
       'unicorn/no-useless-undefined': 'off',
       'unicorn/catch-error-name': 'off',
       'unicorn/filename-case': 'off',

package.json

@@ -11,7 +11,7 @@
     "src"
   ],
   "scripts": {
-    "test": "jest",
+    "test": "vitest",
     "clean": "rimraf dist",
     "format": "prettier --write .",
     "prebuild": "npm run clean",
@@ -37,8 +37,7 @@
     "@mui/material": "^5.12.0",
     "@mui/system": "^5.12.0",
     "@mui/x-data-grid": "^7.3.0",
-    "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.16",
+    "@types/node": "^22.5.0",
     "@types/pako": "^2.0.0",
     "@types/react": "^18.2.54",
     "@typescript-eslint/eslint-plugin": "^8.1.0",
@@ -48,11 +47,10 @@
     "eslint-config-prettier": "^9.0.0",
     "eslint-plugin-prettier": "^5.0.0",
     "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-react-hooks": "^5.1.0-rc-eb3ad065-20240822",
+    "eslint-plugin-react-refresh": "^0.4.11",
     "eslint-plugin-unicorn": "^55.0.0",
     "fp-ts": "^2.16.9",
-    "jest": "^29.7.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.1",
     "mobx-state-tree": "5.4.2",
@@ -63,11 +61,10 @@
     "react-dom": "^18.2.0",
     "rimraf": "^6.0.1",
     "rxjs": "^7.0.0",
-    "ts-jest": "^29.1.2",
-    "ts-node": "^10.3.0",
     "tss-react": "^4.9.4",
     "typescript": "^5.3.3",
-    "typescript-eslint": "^8.1.0"
+    "typescript-eslint": "^8.1.0",
+    "vitest": "^2.0.5"
   },
   "author": "Colin <[email protected]>",
   "license": "MIT"

src/AddHighlightModel/GenomeMouseoverHighlight.tsx

@@ -4,38 +4,25 @@ import { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 import { getSession } from '@jbrowse/core/util'
 // locals
 import Highlight from './Highlight'
+import { checkHovered } from '../ProteinView/util'
 
 const GenomeMouseoverHighlight = observer(function ({
   model,
 }: {
   model: LinearGenomeViewModel
-}) {
-  const { hovered } = getSession(model)
-  return hovered &&
-    typeof hovered === 'object' &&
-    'hoverPosition' in hovered ? (
-    <HoverHighlight model={model} />
-  ) : null
-})
-
-const HoverHighlight = observer(function ({
-  model,
-}: {
-  model: LinearGenomeViewModel
 }) {
   const session = getSession(model)
-  if (session.views.some(s => s.type === 'ProteinView')) {
-    const { hovered } = session
+  const { views, hovered } = session
+  if (checkHovered(hovered) && views.some(s => s.type === 'ProteinView')) {
     const { assemblyNames } = model
-    // @ts-expect-error
     const { coord, refName } = hovered.hoverPosition
     return (
       <Highlight
         model={model}
         start={coord - 1}
         end={coord}
         refName={refName}
-        assemblyName={assemblyNames[0]}
+        assemblyName={assemblyNames[0]!}
       />
     )
   }

src/AddHighlightModel/ProteinToGenomeClickHighlight.tsx

@@ -16,23 +16,25 @@ const ProteinToGenomeClickHighlight = observer(function ({
 }) {
   const { assemblyManager, views } = getSession(model)
   const { assemblyNames } = model
-  const p = views.find(f => f.type === 'ProteinView') as
+  const proteinView = views.find(f => f.type === 'ProteinView') as
     | JBrowsePluginProteinViewModel
     | undefined
   const assemblyName = assemblyNames[0]!
   const assembly = assemblyManager.get(assemblyName)
   return assembly ? (
     <>
-      {p?.clickGenomeHighlights.map((r, idx) => (
-        <Highlight
-          key={`${JSON.stringify(r)}-${idx}}`}
-          start={r.start}
-          end={r.end}
-          refName={r.refName}
-          assemblyName={assemblyName}
-          model={model}
-        />
-      ))}
+      {proteinView?.structures.map(structure =>
+        structure.clickGenomeHighlights.map((r, idx) => (
+          <Highlight
+            key={`${JSON.stringify(r)}-${idx}}`}
+            start={r.start}
+            end={r.end}
+            refName={r.refName}
+            assemblyName={assemblyName}
+            model={model}
+          />
+        )),
+      )}
     </>
   ) : null
 })

src/AddHighlightModel/ProteinToGenomeHoverHighlight.tsx

@@ -7,32 +7,32 @@ import { getSession } from '@jbrowse/core/util'
 import { JBrowsePluginProteinViewModel } from '../ProteinView/model'
 import Highlight from './Highlight'
 
-type LGV = LinearGenomeViewModel
-
 const ProteinToGenomeHoverHighlight = observer(function ({
   model,
 }: {
-  model: LGV
+  model: LinearGenomeViewModel
 }) {
   const { assemblyManager, views } = getSession(model)
   const { assemblyNames } = model
-  const p = views.find(f => f.type === 'ProteinView') as
+  const proteinView = views.find(f => f.type === 'ProteinView') as
     | JBrowsePluginProteinViewModel
     | undefined
   const assemblyName = assemblyNames[0]!
   const assembly = assemblyManager.get(assemblyName)
   return assembly ? (
     <>
-      {p?.hoverGenomeHighlights.map((r, idx) => (
-        <Highlight
-          key={`${JSON.stringify(r)}-${idx}`}
-          start={r.start}
-          end={r.end}
-          refName={r.refName}
-          assemblyName={assemblyName}
-          model={model}
-        />
-      ))}
+      {proteinView?.structures.map(structure =>
+        structure.hoverGenomeHighlights.map((r, idx) => (
+          <Highlight
+            key={`${JSON.stringify(r)}-${idx}`}
+            start={r.start}
+            end={r.end}
+            refName={r.refName}
+            assemblyName={assemblyName}
+            model={model}
+          />
+        )),
+      )}
     </>
   ) : null
 })

src/LaunchProteinView/components/AlphaFoldDBSearch.tsx

@@ -78,13 +78,14 @@ const AlphaFoldDBSearch = observer(function ({
     ? `https://alphafold.ebi.ac.uk/files/AF-${uniprotId}-F1-model_v4.cif`
     : undefined
   const {
-    seq: structureSequence,
+    sequences: structureSequences,
     isLoading: isRemoteStructureSequenceLoading,
     error: remoteStructureSequenceError,
   } = useRemoteStructureFileSequence({ url })
   const e =
     myGeneError || isoformProteinSequencesError || remoteStructureSequenceError
 
+  const structureSequence = structureSequences?.[0]
   useEffect(() => {
     if (isoformSequences !== undefined) {
       const ret =
@@ -116,7 +117,7 @@ const AlphaFoldDBSearch = observer(function ({
             variant="h6"
             message="Looking up UniProt ID from mygene.info"
           />
-        ) : (uniprotId ? null : (
+        ) : uniprotId ? null : (
           <div>
             UniProt ID not found. Search sequence on AlphaFoldDB{' '}
             <a
@@ -130,7 +131,7 @@ const AlphaFoldDBSearch = observer(function ({
             After visiting the above link, then paste the structure URL into the
             Manual tab
           </div>
-        ))}
+        )}
         {isIsoformProteinSequencesLoading ? (
           <LoadingEllipses
             variant="h6"
@@ -175,10 +176,16 @@ const AlphaFoldDBSearch = observer(function ({
           onClick={() => {
             session.addView('ProteinView', {
               type: 'ProteinView',
-              url,
-              seq2: userSelectedProteinSequence?.seq,
-              feature: selectedTranscript?.toJSON(),
-              connectedViewId: view.id,
+              isFloating: true,
+              structures: [
+                {
+                  url,
+                  userProvidedTranscriptSequence:
+                    userSelectedProteinSequence?.seq,
+                  feature: selectedTranscript?.toJSON(),
+                  connectedViewId: view.id,
+                },
+              ],
               displayName: `Protein view ${getGeneDisplayName(feature)} - ${getTranscriptDisplayName(selectedTranscript)}`,
             })
             handleClose()

src/LaunchProteinView/components/TranscriptSelector.tsx

@@ -41,32 +41,32 @@ export default function TranscriptSelector({
         .filter(f => !!isoformSequences[f.id()])
         .filter(
           f =>
-            isoformSequences[f.id()].seq.replaceAll('*', '') ===
+            isoformSequences[f.id()]!.seq.replaceAll('*', '') ===
             structureSequence,
         )
         .map(f => (
           <MenuItem value={f.id()} key={f.id()}>
             {getGeneDisplayName(feature)} - {getTranscriptDisplayName(f)} (
-            {isoformSequences[f.id()].seq.length}aa) (matches structure
+            {isoformSequences[f.id()]!.seq.length}aa) (matches structure
             residues)
           </MenuItem>
         ))}
       {isoforms
         .filter(f => !!isoformSequences[f.id()])
         .filter(
           f =>
-            isoformSequences[f.id()].seq.replaceAll('*', '') !==
+            isoformSequences[f.id()]!.seq.replaceAll('*', '') !==
             structureSequence,
         )
         .sort(
           (a, b) =>
-            isoformSequences[b.id()].seq.length -
-            isoformSequences[a.id()].seq.length,
+            isoformSequences[b.id()]!.seq.length -
+            isoformSequences[a.id()]!.seq.length,
         )
         .map(f => (
           <MenuItem value={f.id()} key={f.id()}>
             {getGeneDisplayName(feature)} - {getTranscriptDisplayName(f)} (
-            {isoformSequences[f.id()].seq.length}aa)
+            {isoformSequences[f.id()]!.seq.length}aa)
           </MenuItem>
         ))}
       {isoforms

src/LaunchProteinView/components/UserProvidedStructure.tsx

@@ -96,14 +96,15 @@ const UserProvidedStructure = observer(function ({
     view,
   })
   const protein = isoformSequences?.[userSelection ?? '']
-  const { seq: structureSequence1, error: error3 } =
+  const { sequences: structureSequences1, error: error3 } =
     useLocalStructureFileSequence({ file })
 
-  const { seq: structureSequence2, error: error4 } =
+  const { sequences: structureSequences2, error: error4 } =
     useRemoteStructureFileSequence({ url: structureURL })
   const structureName =
     file?.name ?? structureURL.slice(structureURL.lastIndexOf('/') + 1)
-  const structureSequence = structureSequence1 ?? structureSequence2
+  const structureSequences = structureSequences1 ?? structureSequences2
+  const structureSequence = structureSequences?.[0]
 
   useEffect(() => {
     if (isoformSequences !== undefined) {

src/LaunchProteinView/components/calculateProteinSequence.ts

@@ -53,7 +53,7 @@ function getItemId(feat: Feat) {
 // 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]),
+    (item, pos, ary) => !pos || getItemId(item) !== getItemId(ary[pos - 1]!),
   )
 }
 
@@ -102,8 +102,10 @@ export async function fetchProteinSeq({
   const refName = feature.get('refName')
   const session = getSession(view)
   const { assemblyManager, rpcManager } = session
-  const [assemblyName] = view?.assemblyNames ?? []
-  const assembly = await assemblyManager.waitForAssembly(assemblyName)
+  const assemblyName = view?.assemblyNames?.[0]
+  const assembly = assemblyName
+    ? await assemblyManager.waitForAssembly(assemblyName)
+    : undefined
   if (!assembly) {
     throw new Error('assembly not found')
   }