jbrowse-plugin-mafviewer 1.2.3 → 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.3",
+  "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,29 +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/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

package/src/LinearMafDisplay/components/YScaleBars.tsx

@@ -1,13 +1,11 @@
 import React from 'react'
 
-import { measureText } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
-// locals
-import { LinearMafDisplayModel } from '../stateModel'
 import ColorLegend from './ColorLegend'
 import SvgWrapper from './SvgWrapper'
-import { max } from './util'
+
+import type { LinearMafDisplayModel } from '../stateModel'
 
 export const YScaleBars = observer(function (props: {
   model: LinearMafDisplayModel
@@ -15,25 +13,9 @@ export const YScaleBars = observer(function (props: {
   exportSVG?: boolean
 }) {
   const { model } = props
-  const { rowHeight, samples } = model
-  const svgFontSize = Math.min(Math.max(rowHeight, 8), 14)
-  const canDisplayLabel = rowHeight >= 8
-  const minWidth = 20
-
-  const labelWidth = max(
-    samples
-      ?.map(s => measureText(s.label, svgFontSize))
-      .map(width => (canDisplayLabel ? width : minWidth)) || [],
-    0,
-  )
-
   return (
     <SvgWrapper {...props}>
-      <ColorLegend
-        model={model}
-        labelWidth={labelWidth}
-        svgFontSize={svgFontSize}
-      />
+      <ColorLegend model={model} />
     </SvgWrapper>
   )
 })

package/src/LinearMafDisplay/index.ts

@@ -1,7 +1,7 @@
 import PluginManager from '@jbrowse/core/PluginManager'
 import { DisplayType } from '@jbrowse/core/pluggableElementTypes'
 
-import ReactComponent from './components/ReactComponent'
+import ReactComponent from './components/LinearMafDisplayComponent'
 import configSchemaF from './configSchema'
 import stateModelFactory from './stateModel'
 

package/src/LinearMafDisplay/stateModel.ts

@@ -1,5 +1,7 @@
+import { lazy } from 'react'
+
 import { ConfigurationReference, getConf } from '@jbrowse/core/configuration'
-import { getEnv, getSession } from '@jbrowse/core/util'
+import { getEnv, getSession, max, measureText } from '@jbrowse/core/util'
 import { getRpcSessionId } from '@jbrowse/core/util/tracks'
 import { ascending } from 'd3-array'
 import { cluster, hierarchy } from 'd3-hierarchy'
@@ -7,11 +9,10 @@ import deepEqual from 'fast-deep-equal'
 import { autorun } from 'mobx'
 import { addDisposer, isAlive, types } from 'mobx-state-tree'
 
-import SetRowHeightDialog from './components/SetRowHeight'
-import { maxLength, setBrLength } from './types'
+import { maxLength, setBrLength } from './util'
 import { normalize } from '../util'
 
-import type { NodeWithIds, NodeWithIdsAndLength } from './types'
+import type { NodeWithIds, NodeWithIdsAndLength, Sample } from './types'
 import type PluginManager from '@jbrowse/core/PluginManager'
 import type {
   AnyConfigurationModel,
@@ -21,11 +22,7 @@ import type { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view
 import type { HierarchyNode } from 'd3-hierarchy'
 import type { Instance } from 'mobx-state-tree'
 
-interface Sample {
-  id: string
-  label: string
-  color?: string
-}
+const SetRowHeightDialog = lazy(() => import('./components/SetRowHeightDialog'))
 
 /**
  * #stateModel LinearMafDisplay
@@ -193,8 +190,20 @@ export default function stateModelFactory(
        * #getter
        */
       get samples() {
-        return this.rowNames ? normalize(this.rowNames) : self.volatileSamples
+        if (this.rowNames) {
+          const volatileSamplesMap = self.volatileSamples
+            ? Object.fromEntries(self.volatileSamples.map(e => [e.id, e]))
+            : undefined
+          return normalize(this.rowNames).map(r => ({
+            ...r,
+            label: volatileSamplesMap?.[r.id]?.label || r.label,
+            color: volatileSamplesMap?.[r.id]?.color || r.color,
+          }))
+        } else {
+          return self.volatileSamples
+        }
       },
+
       /**
        * #getter
        */
@@ -311,6 +320,32 @@ export default function stateModelFactory(
         },
       }
     })
+    .views(self => ({
+      /**
+       * #getter
+       */
+      get svgFontSize() {
+        return Math.min(Math.max(self.rowHeight, 8), 14)
+      },
+      /**
+       * #getter
+       */
+      get canDisplayLabel() {
+        return self.rowHeight >= 7
+      },
+      /**
+       * #getter
+       */
+      get labelWidth() {
+        const minWidth = 20
+        return max(
+          self.samples
+            ?.map(s => measureText(s.label, this.svgFontSize))
+            .map(width => (this.canDisplayLabel ? width : minWidth)) || [],
+          0,
+        )
+      },
+    }))
     .actions(self => ({
       afterCreate() {
         addDisposer(
@@ -319,11 +354,8 @@ export default function stateModelFactory(
             try {
               const { rpcManager } = getSession(self)
               const sessionId = getRpcSessionId(self)
-
-              const results = (await rpcManager.call(
-                sessionId,
-                'MafGetSamples',
-                {
+              self.setSamples(
+                (await rpcManager.call(sessionId, 'MafGetSamples', {
                   sessionId,
                   adapterConfig: self.adapterConfig,
                   statusCallback: (message: string) => {
@@ -331,9 +363,8 @@ export default function stateModelFactory(
                       self.setMessage(message)
                     }
                   },
-                },
-              )) as any
-              self.setSamples(results)
+                })) as { samples: Sample[]; tree: unknown },
+              )
             } catch (e) {
               console.error(e)
               getSession(self).notifyError(`${e}`, e)

package/src/LinearMafDisplay/types.ts

@@ -1,7 +1,3 @@
-import { max } from 'd3-array'
-
-import type { HierarchyNode } from 'd3-hierarchy'
-
 export interface NodeWithIds {
   id: string
   name: string
@@ -18,24 +14,8 @@ export interface NodeWithIdsAndLength {
   length: number
 }
 
-// basically same as maxLength from https://observablehq.com/@d3/tree-of-life
-export function maxLength(d: HierarchyNode<NodeWithIds>): number {
-  return (
-    (d.data.length || 0) + (d.children ? max(d.children, maxLength) || 0 : 0)
-  )
-}
-// basically same as setRadius from https://observablehq.com/@d3/tree-of-life
-export function setBrLength(
-  d: HierarchyNode<NodeWithIds>,
-  y0: number,
-  k: number,
-) {
-  // @ts-expect-error
-  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
-
-  if (d.children) {
-    d.children.forEach(d => {
-      setBrLength(d, y0, k)
-    })
-  }
+export interface Sample {
+  id: string
+  label: string
+  color?: string
 }

package/src/LinearMafDisplay/util.ts

@@ -0,0 +1,27 @@
+import { max } from 'd3-array'
+
+import type { NodeWithIds } from './types'
+import type { HierarchyNode } from 'd3-hierarchy'
+
+// basically same as maxLength from https://observablehq.com/@d3/tree-of-life
+export function maxLength(d: HierarchyNode<NodeWithIds>): number {
+  return (
+    (d.data.length || 0) + (d.children ? max(d.children, maxLength) || 0 : 0)
+  )
+}
+
+// basically same as setRadius from https://observablehq.com/@d3/tree-of-life
+export function setBrLength(
+  d: HierarchyNode<NodeWithIds>,
+  y0: number,
+  k: number,
+) {
+  // @ts-expect-error
+  d.len = (y0 += Math.max(d.data.length || 0, 0)) * k
+
+  if (d.children) {
+    d.children.forEach(d => {
+      setBrLength(d, y0, k)
+    })
+  }
+}

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -45,22 +45,17 @@ export default class LinearMafRenderer extends FeatureRendererType {
     const height = samples.length * rowHeight + 100
     const width = (region.end - region.start) / bpPerPx
     const features = await this.getFeatures(renderProps)
-    const res = await renderToAbstractCanvas(
-      width,
-      height,
-      renderProps,
-      async ctx => {
-        await updateStatus('Rendering alignment', statusCallback, () => {
-          makeImageData({
-            ctx,
-            renderArgs: {
-              ...renderProps,
-              features,
-            },
-          })
+    const res = await updateStatus('Rendering alignment', statusCallback, () =>
+      renderToAbstractCanvas(width, height, renderProps, ctx => {
+        makeImageData({
+          ctx,
+          renderArgs: {
+            ...renderProps,
+            features,
+          },
         })
         return undefined
-      },
+      }),
     )
     const results = await super.render({
       ...renderProps,