Change View subsequence to open MSA sidebar (#41)

Author: cmdcolin

esbuild.mjs

@@ -1,9 +1,13 @@
-import * as esbuild from 'esbuild'
+import fs from 'node:fs'
 import http from 'node:http'
+import * as esbuild from 'esbuild'
 import { globalExternals } from '@fal-works/esbuild-plugin-global-externals'
-import JbrowseGlobals from '@jbrowse/core/ReExports/list.js'
+import JBrowseReExports from '@jbrowse/core/ReExports/list'
 import prettyBytes from 'pretty-bytes'
 
+const isWatch = process.argv.includes('--watch')
+const PORT = process.env.PORT ? +process.env.PORT : 9000
+
 function createGlobalMap(jbrowseGlobals) {
   const globalMap = {}
   for (const global of jbrowseGlobals) {
@@ -12,115 +16,84 @@ function createGlobalMap(jbrowseGlobals) {
       type: 'cjs',
     }
   }
+  // Map @jbrowse/mobx-state-tree to mobx-state-tree for backwards compatibility
+  // In v4.0.0+, JBrowse uses @jbrowse/mobx-state-tree but exports it as 'mobx-state-tree'
+  // In v3.x, JBrowse used mobx-state-tree directly
+  globalMap['@jbrowse/mobx-state-tree'] = {
+    varName: `JBrowseExports["mobx-state-tree"]`,
+    type: 'cjs',
+  }
   return globalMap
 }
 
-if (process.env.NODE_ENV === 'production') {
-  await esbuild.build({
-    entryPoints: ['src/index.ts'],
-    bundle: true,
-    globalName: 'JBrowsePluginMafViewer',
-    sourcemap: true,
-    outfile: 'dist/jbrowse-plugin-mafviewer.umd.production.min.js',
-    metafile: true,
-    minify: true,
-    plugins: [
-      globalExternals(createGlobalMap(JbrowseGlobals.default)),
-      {
-        name: 'rebuild-log',
-        setup({ onStart, onEnd }) {
-          let time
-          onStart(() => {
-            time = Date.now()
-          })
-          onEnd(({ metafile, errors, warnings }) => {
-            console.log(
-              `Built in ${Date.now() - time} ms with ${
-                errors.length
-              } error(s) and ${warnings.length} warning(s)`,
-            )
-            if (!metafile) {
-              return
-            }
-            const { outputs } = metafile
-            for (const [file, metadata] of Object.entries(outputs)) {
-              const size = prettyBytes(metadata.bytes)
-              console.log(`Wrote ${size} to ${file}`)
-            }
-          })
-        },
-      },
-    ],
-  })
-} else {
-  let ctx = await esbuild.context({
-    entryPoints: ['src/index.ts'],
-    bundle: true,
-    globalName: 'JBrowsePluginMafViewer',
-    sourcemap: true,
-    outfile: 'dist/out.js',
-    metafile: true,
-    plugins: [
-      globalExternals(createGlobalMap(JbrowseGlobals.default)),
-      {
-        name: 'rebuild-log',
-        setup({ onStart, onEnd }) {
-          let time
-          onStart(() => {
-            time = Date.now()
-          })
-          onEnd(({ metafile, errors, warnings }) => {
-            console.log(
-              `Built in ${Date.now() - time} ms with ${
-                errors.length
-              } error(s) and ${warnings.length} warning(s)`,
-            )
-            if (!metafile) {
-              return
-            }
-            const { outputs } = metafile
-            for (const [file, metadata] of Object.entries(outputs)) {
-              const size = prettyBytes(metadata.bytes)
-              console.log(`Wrote ${size} to ${file}`)
-            }
-          })
-        },
-      },
-    ],
-  })
-  let { hosts, port } = await ctx.serve({
-    servedir: '.',
-    port: 9001,
-  })
+const rebuildLogPlugin = {
+  name: 'rebuild-log',
+  setup({ onStart, onEnd }) {
+    let time
+    onStart(() => {
+      time = Date.now()
+    })
+    onEnd(({ metafile, errors, warnings }) => {
+      console.log(
+        `Built in ${Date.now() - time} ms with ${errors.length} error(s) and ${warnings.length} warning(s)`,
+      )
+      if (metafile) {
+        for (const [file, metadata] of Object.entries(metafile.outputs)) {
+          console.log(`Wrote ${prettyBytes(metadata.bytes)} to ${file}`)
+        }
+      }
+    })
+  },
+}
+
+const globals = JBrowseReExports
+const config = {
+  entryPoints: ['src/index.ts'],
+  bundle: true,
+  globalName: 'JBrowsePluginMafViewer',
+  metafile: true,
+  plugins: [globalExternals(createGlobalMap(globals)), rebuildLogPlugin],
+  ...(isWatch
+    ? { outfile: 'dist/out.js' }
+    : {
+        outfile: 'dist/jbrowse-plugin-mafviewer.umd.production.min.js',
+        sourcemap: true,
+        minify: true,
+      }),
+}
+
+if (isWatch) {
+  const ctx = await esbuild.context(config)
+  const internalPort = PORT + 400
+  const { hosts } = await ctx.serve({ servedir: '.', port: internalPort })
 
   http
     .createServer((req, res) => {
       const proxyReq = http.request(
         {
           hostname: hosts[0],
-          port: 9001,
+          port: internalPort,
           path: req.url,
           method: req.method,
           headers: req.headers,
         },
         proxyRes => {
-          //restore the CORS after
-          //https://github.com/evanw/esbuild/releases/tag/v0.25.0 disabled it
-          //as a potential vuln
+          // restore CORS after https://github.com/evanw/esbuild/releases/tag/v0.25.0 disabled it
           res.writeHead(proxyRes.statusCode, {
             ...proxyRes.headers,
             'Access-Control-Allow-Origin': '*',
           })
           proxyRes.pipe(res, { end: true })
         },
       )
-
-      // Forward the body of the request to esbuild
       req.pipe(proxyReq, { end: true })
     })
-    .listen(9000)
-  console.log(`Serving at http://${hosts[0]}:9000`)
+    .listen(PORT)
 
+  console.log(`Serving at http://${hosts[0]}:${PORT}`)
   await ctx.watch()
   console.log('Watching files...')
+} else {
+  const result = await esbuild.build(config)
+  fs.writeFileSync('meta.json', JSON.stringify(result.metafile))
 }

eslint.config.mjs

@@ -9,6 +9,7 @@ export default tseslint.config(
       'webpack.config.js',
       'dist/*',
       'esm/*',
+      'test/*.min.js',
       'example/*',
       'eslint.config.mjs',
       'esbuild.mjs',

package.json

@@ -15,7 +15,7 @@
   ],
   "scripts": {
     "clean": "rimraf dist",
-    "start": "node esbuild.mjs",
+    "start": "node esbuild.mjs --watch",
     "test": "vitest",
     "format": "prettier --write .",
     "prebuild": "yarn clean",
@@ -29,9 +29,10 @@
     "@babel/preset-react": "^7.10.4",
     "@emotion/react": "^11.10.4",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@jbrowse/core": "^3.0.1",
-    "@jbrowse/plugin-data-management": "^3.0.1",
-    "@jbrowse/plugin-linear-genome-view": "^3.0.1",
+    "@jbrowse/core": "^4.1.1",
+    "@jbrowse/mobx-state-tree": "^5.4.1",
+    "@jbrowse/plugin-data-management": "^4.1.1",
+    "@jbrowse/plugin-linear-genome-view": "^4.1.1",
     "@mui/material": "^7.0.1",
     "@mui/system": "^7.0.1",
     "@mui/x-data-grid": "^8.2.0",
@@ -48,7 +49,6 @@
     "eslint-plugin-unicorn": "^62.0.0",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.1",
-    "mobx-state-tree": "^5.4.1",
     "prettier": "^3.4.2",
     "pretty-bytes": "^7.0.0",
     "react": "^19.0.0",
@@ -62,7 +62,7 @@
     "vitest": "^4.0.5"
   },
   "dependencies": {
-    "@gmod/bgzf-filehandle": "^5.0.2",
+    "@gmod/bgzf-filehandle": "^6.0.12",
     "abortable-promise-cache": "^1.5.0",
     "buffer": "^6.0.3",
     "d3-array": "^3.2.4",

src/BigMafAdapter/BigMafAdapter.ts

@@ -2,11 +2,12 @@ import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
 import { SimpleFeature, updateStatus } from '@jbrowse/core/util'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
-import { getSnapshot } from 'mobx-state-tree'
+import { getSnapshot } from '@jbrowse/mobx-state-tree'
 import { firstValueFrom, toArray } from 'rxjs'
 
 import parseNewick from '../parseNewick'
 import { normalize } from '../util'
+import { parseAssemblyAndChrSimple } from '../util/parseAssemblyName'
 
 import type { BaseOptions } from '@jbrowse/core/data_adapters/BaseAdapter'
 import type { Feature, Region } from '@jbrowse/core/util'
@@ -103,10 +104,9 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
                 referenceSeq = sequence
               }
 
-              // Parse organism and chromosome once
-              const dotIndex = organismChr.indexOf('.')
-              const org = organismChr.slice(0, Math.max(0, dotIndex))
-              const chr = organismChr.slice(Math.max(0, dotIndex + 1))
+              // Parse organism and chromosome
+              const { assemblyName: org, chr } =
+                parseAssemblyAndChrSimple(organismChr)
 
               // Create alignment record directly
               alignments[org] = {