jbrowse-plugin-mafviewer 1.2.2 → 1.2.4

package/dist/util.d.ts

@@ -1,9 +1,9 @@
 export declare function normalize(r: string[] | {
     id: string;
-    label: string;
+    label?: string;
     color?: string;
 }[]): {
     id: string;
-    label: string;
+    label?: string;
     color?: string;
 }[];

package/dist/util.js

@@ -3,7 +3,11 @@ function isStrs(array) {
 }
 export function normalize(r) {
     return isStrs(r)
-        ? r.map(elt => ({ id: elt, label: elt, color: undefined }))
+        ? r.map(elt => ({
+            id: elt,
+            label: elt,
+            color: undefined,
+        }))
         : r;
 }
 //# sourceMappingURL=util.js.map

package/dist/util.js.map

@@ -1 +1 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,SAAS,MAAM,CAAC,KAAgB;IAC9B,OAAO,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAA;AACrC,CAAC;AAED,MAAM,UAAU,SAAS,CACvB,CAA6D;IAE7D,OAAO,MAAM,CAAC,CAAC,CAAC;QACd,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,KAAK,EAAE,GAAG,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;QAC3D,CAAC,CAAC,CAAC,CAAA;AACP,CAAC"}
+{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA,SAAS,MAAM,CAAC,KAAgB;IAC9B,OAAO,OAAO,KAAK,CAAC,CAAC,CAAC,KAAK,QAAQ,CAAA;AACrC,CAAC;AAED,MAAM,UAAU,SAAS,CACvB,CAA8D;IAE9D,OAAO,MAAM,CAAC,CAAC,CAAC;QACd,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;YACZ,EAAE,EAAE,GAAG;YACP,KAAK,EAAE,GAAG;YACV,KAAK,EAAE,SAAS;SACjB,CAAC,CAAC;QACL,CAAC,CAAC,CAAC,CAAA;AACP,CAAC"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.2.2",
+  "version": "1.2.4",
   "license": "MIT",
   "name": "jbrowse-plugin-mafviewer",
   "keywords": [
@@ -31,12 +31,12 @@
     "@jbrowse/core": "^3.0.1",
     "@jbrowse/plugin-data-management": "^3.0.1",
     "@jbrowse/plugin-linear-genome-view": "^3.0.1",
-    "@mui/material": "^6.2.0",
-    "@mui/system": "^6.2.0",
-    "@mui/x-data-grid": "^7.2.0",
+    "@mui/material": "^7.0.1",
+    "@mui/system": "^7.0.1",
+    "@mui/x-data-grid": "^8.2.0",
     "@types/d3-array": "^3.2.1",
     "@types/d3-hierarchy": "^3.1.7",
-    "@types/node": "^22.10.2",
+    "@types/node": "^22.15.16",
     "@types/react": "^19.0.1",
     "@typescript-eslint/eslint-plugin": "^8.18.0",
     "@typescript-eslint/parser": "^8.18.0",
@@ -46,28 +46,29 @@
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-react": "^7.20.3",
     "eslint-plugin-react-hooks": "^5.1.0",
-    "eslint-plugin-unicorn": "^56.0.1",
+    "eslint-plugin-unicorn": "^59.0.1",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.1",
     "mobx-state-tree": "^5.4.1",
     "prettier": "^3.4.2",
-    "pretty-bytes": "^6.1.1",
+    "pretty-bytes": "^7.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "rimraf": "^6.0.1",
     "rxjs": "^7.8.1",
     "serve": "^14.2.0",
-    "tss-react": "^4.8.6",
+    "tss-react": "^4.9.18",
     "typescript": "^5.1.6",
     "typescript-eslint": "^8.18.0"
   },
   "dependencies": {
-    "@gmod/bgzf-filehandle": "^2.0.4",
+    "@gmod/bgzf-filehandle": "^3.0.2",
+    "abortable-promise-cache": "^1.5.0",
     "buffer": "^6.0.3",
     "d3-array": "^3.2.4",
     "d3-hierarchy": "^3.1.2",
     "fast-deep-equal": "^3.1.3",
-    "generic-filehandle2": "^1.0.0",
+    "generic-filehandle2": "^2.0.1",
     "long": "^5.2.3"
   }
 }

package/src/BgzipTaffyAdapter/BgzipTaffyAdapter.ts

@@ -9,8 +9,10 @@ import {
   SimpleFeature,
   updateStatus,
 } from '@jbrowse/core/util'
+import QuickLRU from '@jbrowse/core/util/QuickLRU'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
+import AbortablePromiseCache from 'abortable-promise-cache'
 import Long from 'long'
 
 import VirtualOffset from './virtualOffset'
@@ -20,6 +22,7 @@ import { parseRowInstructions } from './rowInstructions'
 import { parseLineByLine } from './util'
 
 import type { IndexData, OrganismRecord } from './types'
+
 interface Entry {
   type: string
   row: number
@@ -35,11 +38,125 @@ const toP = (s = 0) => +(+s).toFixed(1)
 export default class BgzipTaffyAdapter extends BaseFeatureDataAdapter {
   public setupP?: Promise<IndexData>
 
+  private cache = new AbortablePromiseCache({
+    cache: new QuickLRU({ maxSize: 50 }),
+    // @ts-expect-error
+    fill: async ({ nextEntry, firstEntry }, signal, statusCallback) => {
+      const file = openLocation(this.getConf('tafGzLocation'))
+      const response = await file.read(
+        nextEntry.virtualOffset.blockPosition -
+          firstEntry.virtualOffset.blockPosition,
+        firstEntry.virtualOffset.blockPosition,
+      )
+      const buffer = await unzip(response)
+      const slice = buffer.slice(firstEntry.virtualOffset.dataPosition)
+      return this.getChunk(slice, {
+        statusCallback: statusCallback as (arg: string) => void,
+        signal,
+      })
+    },
+  })
+
   async getRefNames() {
     const data = await this.setup()
     return Object.keys(data)
   }
 
+  async getChunk(buffer: Uint8Array, opts?: BaseOptions) {
+    const { statusCallback = () => {} } = opts || {}
+    const alignments = {} as Record<string, OrganismRecord>
+    const data = [] as Entry[]
+    let a0: any
+    let j = 0
+    let b = 0
+    parseLineByLine(buffer, line => {
+      if (j++ % 100 === 0) {
+        statusCallback(
+          `Processing ${toP(b / 1_000_000)}/${toP(buffer.length / 1_000_000)}Mb`,
+        )
+      }
+      b += line.length
+      if (line) {
+        const [lineData, rowInstructions] = line.split(' ; ')
+        if (rowInstructions) {
+          for (const ins of parseRowInstructions(rowInstructions)) {
+            if (ins.type === 'i') {
+              data.splice(ins.row, 0, ins)
+              if (!alignments[ins.asm]) {
+                alignments[ins.asm] = {
+                  start: ins.start,
+                  strand: ins.strand,
+                  srcSize: ins.length,
+                  chr: ins.ref,
+                  data: '',
+                }
+              }
+              const e = alignments[ins.asm]!
+              e.data += ' '.repeat(Math.max(0, j - e.data.length - 1)) // catch it up
+            } else if (ins.type === 's') {
+              if (!alignments[ins.asm]) {
+                alignments[ins.asm] = {
+                  start: ins.start,
+                  strand: ins.strand,
+                  srcSize: ins.length,
+                  chr: ins.ref,
+                  data: '',
+                }
+              }
+              const e = alignments[ins.asm]!
+              e.data += ' '.repeat(Math.max(0, j - e.data.length - 1)) // catch it up
+              data[ins.row] = ins
+            } else if (ins.type === 'd') {
+              data.splice(ins.row, 1)
+            }
+
+            // no gaps for now(?)
+            // else if (ins.type === 'g') {
+            //   console.log('g??')
+            // } else if (ins.type === 'G') {
+            //   console.log('G??')
+            // }
+          }
+          if (!a0) {
+            a0 = data[0]
+          }
+        }
+        const lineLen = lineData!.length
+
+        for (let i = 0; i < lineLen; i++) {
+          const letter = lineData![i]
+          const r = data[i]
+
+          if (r) {
+            alignments[r.asm]!.data += letter
+          } else {
+            // not sure why but chr22_KI270731v1_random.taf.gz ends up here
+          }
+        }
+      }
+    })
+    if (a0) {
+      const row0 = alignments[a0.asm]!
+
+      // see
+      // https://github.com/ComparativeGenomicsToolkit/taffy/blob/f5a5354/docs/taffy_utilities.md#referenced-based-maftaf-and-indexing
+      // for the significance of row[0]:
+      //
+      // "An anchor line in TAF is a column from which all sequence
+      // coordinates can be deduced without scanning backwards to previous
+      // lines "
+      return {
+        uniqueId: `${row0.start}-${row0.data.length}`,
+        start: row0.start,
+        end: row0.start + row0.data.length,
+        strand: row0.strand,
+        alignments,
+        seq: row0.data,
+      }
+    }
+    return undefined
+  }
+
   setupPre() {
     if (!this.setupP) {
       this.setupP = this.readTaiFile().catch((e: unknown) => {
@@ -104,103 +221,23 @@ export default class BgzipTaffyAdapter extends BaseFeatureDataAdapter {
     return ObservableCreate<Feature>(async observer => {
       try {
         const byteRanges = await this.setup()
-        const buffer = await updateStatus(
+        const feat = await updateStatus(
           'Downloading alignments',
           statusCallback,
           () => this.getLines(query, byteRanges),
         )
-        if (buffer) {
-          const alignments = {} as Record<string, OrganismRecord>
-          const data = [] as Entry[]
-          let a0: any
-          let j = 0
-          let b = 0
-          parseLineByLine(buffer, line => {
-            if (j++ % 100 === 0) {
-              statusCallback(
-                `Processing ${toP(b / 1_000_000)}/${toP(buffer.length / 1_000_000)}Mb`,
-              )
-            }
-            b += line.length
-            if (line) {
-              const [lineData, rowInstructions] = line.split(' ; ')
-              if (rowInstructions) {
-                for (const ins of parseRowInstructions(rowInstructions)) {
-                  if (ins.type === 'i') {
-                    data.splice(ins.row, 0, ins)
-                    if (!alignments[ins.asm]) {
-                      alignments[ins.asm] = {
-                        start: ins.start,
-                        strand: ins.strand,
-                        srcSize: ins.length,
-                        chr: ins.ref,
-                        data: '',
-                      }
-                    }
-                    const e = alignments[ins.asm]!
-                    e.data += ' '.repeat(Math.max(0, j - e.data.length)) // catch it up
-                  } else if (ins.type === 's') {
-                    if (!alignments[ins.asm]) {
-                      alignments[ins.asm] = {
-                        start: ins.start,
-                        strand: ins.strand,
-                        srcSize: ins.length,
-                        chr: ins.ref,
-                        data: '',
-                      }
-                    }
-                    const e = alignments[ins.asm]!
-                    e.data += ' '.repeat(Math.max(0, j - e.data.length)) // catch it up
-                    data[ins.row] = ins
-                  } else if (ins.type === 'd') {
-                    data.splice(ins.row, 1)
-                  }
-
-                  // no gaps for now(?)
-                  // else if (ins.type === 'g') {
-                  // }
-                  // else if (ins.type === 'G') {
-                  // }
-                }
-                if (!a0) {
-                  a0 = data[0]
-                }
-              }
-              const lineLen = lineData!.length
-              for (let i = 0; i < lineLen; i++) {
-                const letter = lineData![i]
-                const r = data[i]
-                if (r) {
-                  alignments[r.asm]!.data += letter
-                } else {
-                  // not sure why but chr22_KI270731v1_random.taf.gz ends up here
-                }
-              }
-            }
-          })
-          if (a0) {
-            const row0 = alignments[a0.asm]!
-
-            // see
-            // https://github.com/ComparativeGenomicsToolkit/taffy/blob/f5a5354/docs/taffy_utilities.md#referenced-based-maftaf-and-indexing
-            // for the significance of row[0]:
-            //
-            // "An anchor line in TAF is a column from which all sequence
-            // coordinates can be deduced without scanning backwards to previous
-            // lines "
-            observer.next(
-              new SimpleFeature({
-                uniqueId: `${row0.start}-${row0.data.length}`,
-                refName: query.refName,
-                start: row0.start,
-                end: row0.start + row0.data.length,
-                strand: row0.strand,
-                alignments,
-                seq: row0.data,
-              }),
-            )
-          }
+        if (feat) {
+          observer.next(
+            // @ts-expect-error
+            new SimpleFeature({
+              ...feat,
+              refName: query.refName,
+            }),
+          )
+        } else {
+          console.error('no feature found')
         }
+
         statusCallback('')
         observer.complete()
       } catch (e) {
@@ -226,7 +263,6 @@ export default class BgzipTaffyAdapter extends BaseFeatureDataAdapter {
 
   // TODO: cache processed large chunks
   async getLines(query: Region, byteRanges: IndexData) {
-    const file = openLocation(this.getConf('tafGzLocation'))
     const records = byteRanges[query.refName]
     if (records) {
       let firstEntry
@@ -255,13 +291,13 @@ export default class BgzipTaffyAdapter extends BaseFeatureDataAdapter {
       // file whn you request e.g. out of range region (e.g. taf in chr22:1-100
       // and you are at chr22:200-300)
       if (firstEntry && nextEntry) {
-        const response = await file.read(
-          nextEntry.virtualOffset.blockPosition -
-            firstEntry.virtualOffset.blockPosition,
-          firstEntry.virtualOffset.blockPosition,
+        return this.cache.get(
+          `${JSON.stringify(nextEntry)}_${JSON.stringify(firstEntry)}`,
+          {
+            nextEntry,
+            firstEntry,
+          },
         )
-        const buffer = await unzip(response)
-        return buffer.slice(firstEntry.virtualOffset.dataPosition)
       }
     }
     return undefined

package/src/BigMafAdapter/BigMafAdapter.ts

@@ -26,12 +26,13 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
     if (!this.getSubAdapter) {
       throw new Error('no getSubAdapter available')
     }
-    const adapter = await this.getSubAdapter({
-      ...getSnapshot(this.config),
-      type: 'BigBedAdapter',
-    })
     return {
-      adapter: adapter.dataAdapter as BaseFeatureDataAdapter,
+      adapter: (
+        await this.getSubAdapter({
+          ...getSnapshot(this.config),
+          type: 'BigBedAdapter',
+        })
+      ).dataAdapter as BaseFeatureDataAdapter,
     }
   }
   async setupPre() {
@@ -59,59 +60,61 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
     return ObservableCreate<Feature>(async observer => {
       const { adapter } = await this.setup()
       const features = await updateStatus(
-        'Downloading alignment',
+        'Downloading alignments',
         statusCallback,
         () => firstValueFrom(adapter.getFeatures(query).pipe(toArray())),
       )
-      for (const feature of features) {
-        const maf = feature.get('mafBlock') as string
-        const blocks = maf.split(';')
-        let aln: string | undefined
-        const alns = [] as string[]
-        const alignments = {} as Record<string, OrganismRecord>
-        const blocks2 = [] as string[]
-        for (const block of blocks) {
-          if (block.startsWith('s')) {
-            if (aln) {
-              alns.push(block.split(/ +/)[6]!)
-              blocks2.push(block)
-            } else {
-              aln = block.split(/ +/)[6]
-              alns.push(aln!)
-              blocks2.push(block)
+      await updateStatus('Processing alignments', statusCallback, () => {
+        for (const feature of features) {
+          const maf = feature.get('mafBlock') as string
+          const blocks = maf.split(';')
+          let aln: string | undefined
+          const alns = [] as string[]
+          const alignments = {} as Record<string, OrganismRecord>
+          const blocks2 = [] as string[]
+          for (const block of blocks) {
+            if (block.startsWith('s')) {
+              if (aln) {
+                alns.push(block.split(/ +/)[6]!)
+                blocks2.push(block)
+              } else {
+                aln = block.split(/ +/)[6]
+                alns.push(aln!)
+                blocks2.push(block)
+              }
             }
           }
-        }
 
-        for (let i = 0; i < blocks2.length; i++) {
-          const elt = blocks2[i]!
-          const ad = elt.split(/ +/)
-          const y = ad[1]!.split('.')
-          const org = y[0]!
-          const chr = y[1]!
+          for (let i = 0; i < blocks2.length; i++) {
+            const elt = blocks2[i]!
+            const ad = elt.split(/ +/)
+            const y = ad[1]!.split('.')
+            const org = y[0]!
+            const chr = y[1]!
 
-          alignments[org] = {
-            chr: chr,
-            start: +ad[1]!,
-            srcSize: +ad[2]!,
-            strand: ad[3] === '+' ? 1 : -1,
-            unknown: +ad[4]!,
-            data: alns[i]!,
+            alignments[org] = {
+              chr: chr,
+              start: +ad[1]!,
+              srcSize: +ad[2]!,
+              strand: ad[3] === '+' ? 1 : -1,
+              unknown: +ad[4]!,
+              data: alns[i]!,
+            }
           }
+          observer.next(
+            new SimpleFeature({
+              id: feature.id(),
+              data: {
+                start: feature.get('start'),
+                end: feature.get('end'),
+                refName: feature.get('refName'),
+                seq: alns[0],
+                alignments: alignments,
+              },
+            }),
+          )
         }
-        observer.next(
-          new SimpleFeature({
-            id: feature.id(),
-            data: {
-              start: feature.get('start'),
-              end: feature.get('end'),
-              refName: feature.get('refName'),
-              seq: alns[0],
-              alignments: alignments,
-            },
-          }),
-        )
-      }
+      })
       observer.complete()
     })
   }

package/src/LinearMafDisplay/components/ColorLegend.tsx

@@ -2,21 +2,25 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-import { LinearMafDisplayModel } from '../stateModel'
 import RectBg from './RectBg'
 import Tree from './Tree'
 
+import type { LinearMafDisplayModel } from '../stateModel'
+
 const ColorLegend = observer(function ({
   model,
-  labelWidth,
-  svgFontSize,
 }: {
   model: LinearMafDisplayModel
-  svgFontSize: number
-  labelWidth: number
 }) {
-  const { totalHeight, treeWidth, samples = [], rowHeight } = model
-  const canDisplayLabel = rowHeight >= 8
+  const {
+    labelWidth,
+    canDisplayLabel,
+    totalHeight,
+    treeWidth,
+    samples = [],
+    rowHeight,
+    svgFontSize,
+  } = model
   const boxHeight = Math.min(20, rowHeight)
 
   return (

package/src/LinearMafDisplay/components/{ReactComponent.tsx → LinearMafDisplayComponent.tsx}

@@ -1,14 +1,14 @@
 import React, { useRef, useState } from 'react'
 
+import { SanitizedHTML } from '@jbrowse/core/ui'
 import BaseTooltip from '@jbrowse/core/ui/BaseTooltip'
-import SanitizedHTML from '@jbrowse/core/ui/SanitizedHTML'
 import { getContainingView, getEnv } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
 import YScaleBars from './YScaleBars'
-import { LinearMafDisplayModel } from '../stateModel'
 
+import type { LinearMafDisplayModel } from '../stateModel'
 import type { LinearGenomeViewModel } from '@jbrowse/plugin-linear-genome-view'
 
 const useStyles = makeStyles()({

package/src/LinearMafDisplay/components/SetRowHeightDialog.tsx

@@ -0,0 +1,83 @@
+import React, { useState } from 'react'
+
+import { Dialog } from '@jbrowse/core/ui'
+import {
+  Button,
+  DialogActions,
+  DialogContent,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { observer } from 'mobx-react'
+import { makeStyles } from 'tss-react/mui'
+
+const useStyles = makeStyles()({
+  root: {
+    width: 500,
+  },
+})
+
+const SetRowHeightDialog = observer(function (props: {
+  model: {
+    rowHeight?: number
+    rowProportion?: number
+    setRowHeight: (arg: number) => void
+    setRowProportion: (arg: number) => void
+  }
+  handleClose: () => void
+}) {
+  const { model, handleClose } = props
+  const { classes } = useStyles()
+  const [rowHeight, setRowHeight] = useState(`${model.rowHeight}`)
+  const [rowProportion, setRowProportion] = useState(`${model.rowProportion}`)
+
+  return (
+    <Dialog open onClose={handleClose} title="Set row height">
+      <form
+        onSubmit={event => {
+          event.preventDefault()
+          model.setRowProportion(+rowProportion)
+          model.setRowHeight(+rowHeight)
+          handleClose()
+        }}
+      >
+        <DialogContent className={classes.root}>
+          <Typography>
+            Set row height and the proportion of the row height to use for
+            drawing each row
+          </Typography>
+          <TextField
+            value={rowHeight}
+            helperText="Enter row height"
+            autoFocus
+            onChange={event => {
+              setRowHeight(event.target.value)
+            }}
+          />
+          <TextField
+            value={rowProportion}
+            helperText="Enter row proportion"
+            onChange={event => {
+              setRowProportion(event.target.value)
+            }}
+          />
+          <DialogActions>
+            <Button variant="contained" color="primary" type="submit">
+              Submit
+            </Button>
+            <Button
+              variant="contained"
+              color="secondary"
+              onClick={() => {
+                handleClose()
+              }}
+            >
+              Cancel
+            </Button>
+          </DialogActions>
+        </DialogContent>
+      </form>
+    </Dialog>
+  )
+})
+export default SetRowHeightDialog

package/src/LinearMafDisplay/components/SvgWrapper.tsx

@@ -3,8 +3,7 @@ import React from 'react'
 import { getContainingView } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
-// locals
-import { LinearMafDisplayModel } from '../stateModel'
+import type { LinearMafDisplayModel } from '../stateModel'
 
 const SvgWrapper = observer(function ({
   children,

package/src/LinearMafDisplay/components/Tree.tsx

@@ -2,7 +2,9 @@ import React from 'react'
 
 import { observer } from 'mobx-react'
 
-const Tree = observer(function ({ model }: { model: any }) {
+import type { LinearMafDisplayModel } from '../stateModel'
+
+const Tree = observer(function ({ model }: { model: LinearMafDisplayModel }) {
   const {
     // this is needed for redrawing after zoom change, similar to react-msaview
     // renderTreeCanvas
@@ -20,7 +22,9 @@ const Tree = observer(function ({ model }: { model: any }) {
             const { source, target } = link
             const sy = source.x!
             const ty = target.x!
+            // @ts-expect-error
             const tx = showBranchLen ? target.len : target.y
+            // @ts-expect-error
             const sx = showBranchLen ? source.len : source.y
 
             // 1d line intersection to check if line crosses block at all, this is