jbrowse-plugin-mafviewer 1.0.5 → 1.0.8

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.5",
+  "version": "1.0.8",
   "name": "jbrowse-plugin-mafviewer",
   "keywords": [
     "jbrowse",
@@ -12,77 +12,48 @@
     "dist",
     "src"
   ],
-  "config": {
-    "port": 9000,
-    "browse": {
-      "port": 8999
-    },
-    "jbrowse": {
-      "plugin": {
-        "name": "MafViewer"
-      }
-    }
-  },
   "scripts": {
     "clean": "rimraf dist",
     "start": "node esbuild.mjs",
     "prebuild": "npm run clean",
-    "build": "rollup --config --bundleConfigAsCjs",
-    "lint": "eslint --ext .js,.ts,.jsx,.tsx src/",
+    "build": "tsc && NODE_ENV=production node esbuild.mjs",
+    "lint": "eslint --report-unused-disable-directives --max-warnings 0",
     "prepack": "npm run build",
     "postversion": "git push --follow-tags"
   },
-  "jbrowse-plugin": {
-    "name": "MafViewer"
-  },
   "devDependencies": {
     "@babel/core": "^7.16.5",
     "@babel/preset-react": "^7.10.4",
     "@emotion/react": "^11.10.4",
     "@fal-works/esbuild-plugin-global-externals": "^2.1.2",
-    "@jbrowse/cli": "^2.6.1",
     "@jbrowse/core": "^2.6.1",
-    "@jbrowse/development-tools": "^2.1.1",
     "@jbrowse/plugin-data-management": "^2.7.1",
     "@jbrowse/plugin-linear-genome-view": "^2.7.1",
-    "@mui/material": "^5.10.5",
-    "@mui/system": "^5.10.5",
-    "@mui/x-data-grid": "^6.9.2",
-    "@schemastore/package": "^0.0.10",
-    "@types/node": "^20.8.7",
-    "@types/react": "^18.2.31",
-    "@typescript-eslint/eslint-plugin": "^6.8.0",
-    "@typescript-eslint/parser": "^6.8.0",
-    "babel-eslint": "^10.0.0",
+    "@mui/material": "^6.2.0",
+    "@mui/system": "^6.2.0",
+    "@mui/x-data-grid": "^7.2.0",
+    "@types/node": "^22.10.2",
+    "@types/react": "^19.0.1",
+    "@typescript-eslint/eslint-plugin": "^8.18.0",
+    "@typescript-eslint/parser": "^8.18.0",
     "chalk": "^5.3.0",
-    "cross-env": "^7.0.3",
-    "cross-var": "^1.1.0",
-    "cypress": "^13.3.2",
-    "esbuild": "^0.19.5",
-    "eslint": "^8.36.0",
-    "eslint-config-prettier": "^9.0.0",
-    "eslint-config-react-app": "^7.0.1",
-    "eslint-plugin-flowtype": "^8.0.3",
-    "eslint-plugin-import": "^2.22.0",
-    "eslint-plugin-jsx-a11y": "^6.3.1",
-    "eslint-plugin-prettier": "^5.0.1",
+    "esbuild": "^0.24.0",
+    "eslint": "^9.17.0",
     "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-react-hooks": "^4.0.8",
-    "eslint-plugin-react-refresh": "^0.4.3",
-    "eslint-plugin-unicorn": "^48.0.1",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "eslint-plugin-unicorn": "^56.0.1",
     "mobx": "^6.0.0",
     "mobx-react": "^9.0.1",
-    "mobx-state-tree": "5.2.0",
-    "prettier": "^3.0.0",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "rimraf": "^5.0.1",
-    "rollup": "^3.0.0",
+    "mobx-state-tree": "5.4.1",
+    "prettier": "^3.4.2",
+    "pretty-bytes": "^6.1.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "rimraf": "^6.0.1",
     "rxjs": "^7.8.1",
     "serve": "^14.2.0",
-    "start-server-and-test": "^2.0.0",
     "tss-react": "^4.8.6",
-    "typescript": "^5.1.6"
+    "typescript": "^5.1.6",
+    "typescript-eslint": "^8.18.0"
   }
 }

package/src/BigMafAdapter/BigMafAdapter.ts

@@ -29,7 +29,7 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
   }
   async setupPre() {
     if (!this.setupP) {
-      this.setupP = this.setup().catch(e => {
+      this.setupP = this.setup().catch((e: unknown) => {
         this.setupP = undefined
         throw e
       })
@@ -73,7 +73,6 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
           }
         }
 
-        // eslint-disable-next-line unicorn/no-for-loop
         for (let i = 0; i < blocks2.length; i++) {
           const elt = blocks2[i]
           const ad = elt.split(/ +/)

package/src/LinearMafDisplay/components/ColorLegend.tsx

@@ -18,7 +18,7 @@ const ColorLegend = observer(function ({
   const canDisplayLabel = rowHeight >= 10
   const boxHeight = Math.min(20, rowHeight)
 
-  return samples ? (
+  return (
     <>
       {samples.map((sample, idx) => (
         <RectBg
@@ -44,7 +44,7 @@ const ColorLegend = observer(function ({
           ))
         : null}
     </>
-  ) : null
+  )
 })
 
 export default ColorLegend

package/src/LinearMafDisplay/components/SetRowHeight.tsx

@@ -39,12 +39,16 @@ const SetRowHeightDialog = observer(function (props: {
         </Typography>
         <TextField
           value={rowHeight}
-          onChange={event => setRowHeight(event.target.value)}
+          onChange={event => {
+            setRowHeight(event.target.value)
+          }}
           placeholder="Enter row height"
         />
         <TextField
           value={rowProportion}
-          onChange={event => setRowProportion(event.target.value)}
+          onChange={event => {
+            setRowProportion(event.target.value)
+          }}
           placeholder="Enter row proportion"
         />
         <DialogActions>
@@ -64,7 +68,9 @@ const SetRowHeightDialog = observer(function (props: {
           <Button
             variant="contained"
             color="secondary"
-            onClick={() => handleClose()}
+            onClick={() => {
+              handleClose()
+            }}
           >
             Cancel
           </Button>

package/src/LinearMafDisplay/components/YScaleBars.tsx

@@ -36,6 +36,14 @@ const Wrapper = observer(function ({
   }
 })
 
+export function max(arr: number[], init = Number.NEGATIVE_INFINITY) {
+  let max = init
+  for (const entry of arr) {
+    max = Math.max(entry, max)
+  }
+  return max
+}
+
 export const YScaleBars = observer(function (props: {
   model: LinearMafDisplayModel
   orientation?: string
@@ -47,10 +55,10 @@ export const YScaleBars = observer(function (props: {
   const canDisplayLabel = rowHeight >= 10
   const minWidth = 20
 
-  const labelWidth = Math.max(
-    ...(samples
+  const labelWidth = max(
+    samples
       .map(s => measureText(s.label, svgFontSize))
-      .map(width => (canDisplayLabel ? width : minWidth)) || [0]),
+      .map(width => (canDisplayLabel ? width : minWidth)),
   )
 
   return (

package/src/LinearMafDisplay/stateModel.ts

@@ -52,9 +52,16 @@ export default function stateModelFactory(
          * #property
          */
         showAllLetters: false,
+        /**
+         * #property
+         */
+        mismatchRendering: true,
       }),
     )
     .volatile(() => ({
+      /**
+       * #volatile
+       */
       prefersOffset: true,
     }))
     .actions(self => ({
@@ -76,6 +83,12 @@ export default function stateModelFactory(
       setShowAllLetters(f: boolean) {
         self.showAllLetters = f
       },
+      /**
+       * #action
+       */
+      setMismatchRendering(f: boolean) {
+        self.mismatchRendering = f
+      },
     }))
     .views(self => ({
       /**
@@ -114,7 +127,9 @@ export default function stateModelFactory(
     }))
     .views(self => {
       const {
+        // eslint-disable-next-line @typescript-eslint/unbound-method
         trackMenuItems: superTrackMenuItems,
+        // eslint-disable-next-line @typescript-eslint/unbound-method
         renderProps: superRenderProps,
       } = self
       return {
@@ -128,6 +143,7 @@ export default function stateModelFactory(
             samples,
             rowHeight,
             rowProportion,
+            mismatchRendering,
           } = self
           return {
             ...superRenderProps(),
@@ -136,6 +152,7 @@ export default function stateModelFactory(
             rowHeight,
             rowProportion,
             showAllLetters,
+            mismatchRendering,
           }
         },
         /**
@@ -149,7 +166,10 @@ export default function stateModelFactory(
               onClick: () => {
                 getSession(self).queueDialog(handleClose => [
                   SetRowHeightDialog,
-                  { model: self, handleClose },
+                  {
+                    model: self,
+                    handleClose,
+                  },
                 ])
               },
             },
@@ -161,6 +181,14 @@ export default function stateModelFactory(
                 self.setShowAllLetters(!self.showAllLetters)
               },
             },
+            {
+              label: 'Draw mismatches as single color',
+              type: 'checkbox',
+              checked: !self.mismatchRendering,
+              onClick: () => {
+                self.setMismatchRendering(!self.mismatchRendering)
+              },
+            },
           ]
         },
       }

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -7,33 +7,20 @@ import {
   featureSpanPx,
   renderToAbstractCanvas,
 } from '@jbrowse/core/util'
-import { Theme } from '@mui/material'
+import { getColorBaseMap, getContrastBaseMap } from './util'
 
-export function getContrastBaseMap(theme: Theme) {
-  return Object.fromEntries(
-    Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
-      key,
-      theme.palette.getContrastText(value),
-    ]),
-  )
+interface Sample {
+  id: string
+  color?: string
 }
-
 interface RenderArgs extends RenderArgsDeserialized {
-  samples: { id: string; color?: string }[]
+  samples: Sample[]
   rowHeight: number
   rowProportion: number
   showAllLetters: boolean
+  mismatchRendering: boolean
 }
 
-export function getColorBaseMap(theme: Theme) {
-  const { bases } = theme.palette
-  return {
-    a: bases.A.main,
-    c: bases.C.main,
-    g: bases.G.main,
-    t: bases.T.main,
-  }
-}
 function makeImageData({
   ctx,
   renderArgs,
@@ -47,6 +34,7 @@ function makeImageData({
     rowHeight,
     showAllLetters,
     theme: configTheme,
+    mismatchRendering,
     samples,
     rowProportion,
     features,
@@ -117,23 +105,33 @@ function makeImageData({
       for (let i = 0, o = 0; i < alignment.length; i++) {
         const c = alignment[i]
         if (seq[i] !== '-') {
-          if ((showAllLetters || seq[i] !== c) && c !== '-') {
+          if (c !== '-') {
             const l = leftPx + scale * o
-            ctx.fillStyle =
-              colorForBase[c as keyof typeof colorForBase] ?? 'black'
-            ctx.fillRect(l, offset + t, scale + f, h)
+            if (seq[i] !== c) {
+              ctx.fillStyle = mismatchRendering
+                ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                  (colorForBase[c as keyof typeof colorForBase] ?? 'black')
+                : 'orange'
+              ctx.fillRect(l, offset + t, scale + f, h)
+            } else if (showAllLetters) {
+              ctx.fillStyle = mismatchRendering
+                ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                  (colorForBase[c as keyof typeof colorForBase] ?? 'black')
+                : 'lightblue'
+              ctx.fillRect(l, offset + t, scale + f, h)
+            }
           }
           o++
         }
       }
 
       // font
-      const charSize = { w: 10 }
-      if (scale >= charSize.w) {
+      const charSizeW = 10
+      if (scale >= charSizeW) {
         for (let i = 0, o = 0; i < alignment.length; i++) {
           if (seq[i] !== '-') {
             const l = leftPx + scale * o
-            const offset = (scale - charSize.w) / 2 + 1
+            const offset = (scale - charSizeW) / 2 + 1
             const c = alignment[i]
             if ((showAllLetters || seq[i] !== c) && c !== '-') {
               ctx.fillStyle = contrastForBase[c] ?? 'white'
@@ -203,14 +201,20 @@ 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, ctx =>
-      makeImageData({
-        ctx,
-        renderArgs: {
-          ...renderProps,
-          features,
-        },
-      }),
+    const res = await renderToAbstractCanvas(
+      width,
+      height,
+      renderProps,
+      ctx => {
+        makeImageData({
+          ctx,
+          renderArgs: {
+            ...renderProps,
+            features,
+          },
+        })
+        return undefined
+      },
     )
     const results = await super.render({
       ...renderProps,

package/src/LinearMafRenderer/util.ts

@@ -0,0 +1,20 @@
+import { Theme } from '@mui/material'
+
+export function getContrastBaseMap(theme: Theme) {
+  return Object.fromEntries(
+    Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
+      key,
+      theme.palette.getContrastText(value),
+    ]),
+  )
+}
+
+export function getColorBaseMap(theme: Theme) {
+  const { bases } = theme.palette
+  return {
+    a: bases.A.main,
+    c: bases.C.main,
+    g: bases.G.main,
+    t: bases.T.main,
+  }
+}

package/src/MafAddTrackWorkflow/AddTrackWorkflow.tsx

@@ -42,8 +42,9 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
   const [indexLoc, setIndexLoc] = useState<FileLocation>()
   const [error, setError] = useState<unknown>()
   const [trackName, setTrackName] = useState('MAF track')
-  const [choice, setChoice] = useState('BigMafAdapter')
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const [fileTypeChoice, setFileTypeChoice] = useState('BigMafAdapter')
+  const [indexTypeChoice, setIndexTypeChoice] = useState('TBI')
+
   const rootModel = getRoot<any>(model)
   return (
     <Paper className={classes.paper}>
@@ -52,42 +53,72 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
         <FormControl>
           <FormLabel>File type</FormLabel>
           <RadioGroup
-            value={choice}
-            onChange={event => setChoice(event.target.value)}
+            value={fileTypeChoice}
+            onChange={event => {
+              setFileTypeChoice(event.target.value)
+            }}
           >
             <FormControlLabel
               value="BigMafAdapter"
               control={<Radio />}
-              checked={choice === 'BigMafAdapter'}
+              checked={fileTypeChoice === 'BigMafAdapter'}
               label="bigMaf"
             />
             <FormControlLabel
               value="MafTabixAdapter"
               control={<Radio />}
-              checked={choice === 'MafTabixAdapter'}
+              checked={fileTypeChoice === 'MafTabixAdapter'}
               label="mafTabix"
             />
           </RadioGroup>
         </FormControl>
-        {choice === 'BigMafAdapter' ? (
+        {fileTypeChoice === 'BigMafAdapter' ? (
           <FileSelector
             location={loc}
             name="Path to bigMaf"
-            setLocation={arg => setLoc(arg)}
             rootModel={rootModel}
+            setLocation={arg => {
+              setLoc(arg)
+            }}
           />
         ) : (
           <>
+            <FormControl>
+              <FormLabel>Index type</FormLabel>
+              <RadioGroup
+                value={fileTypeChoice}
+                onChange={event => {
+                  setIndexTypeChoice(event.target.value)
+                }}
+              >
+                <FormControlLabel
+                  value="TBI"
+                  control={<Radio />}
+                  checked={indexTypeChoice === 'TBI'}
+                  label="TBI"
+                />
+                <FormControlLabel
+                  value="CSI"
+                  control={<Radio />}
+                  checked={indexTypeChoice === 'CSI'}
+                  label="CSI"
+                />
+              </RadioGroup>
+            </FormControl>
             <FileSelector
               location={loc}
               name="Path to MAF tabix"
-              setLocation={arg => setLoc(arg)}
+              setLocation={arg => {
+                setLoc(arg)
+              }}
               rootModel={rootModel}
             />
             <FileSelector
               location={indexLoc}
               name="Path to MAF tabix index"
-              setLocation={arg => setIndexLoc(arg)}
+              setLocation={arg => {
+                setIndexLoc(arg)
+              }}
               rootModel={rootModel}
             />
           </>
@@ -97,7 +128,9 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
         multiline
         rows={10}
         value={samples}
-        onChange={event => setSamples(event.target.value)}
+        onChange={event => {
+          setSamples(event.target.value)
+        }}
         placeholder={
           'Enter sample names from the MAF file, one per line, or JSON formatted array of samples'
         }
@@ -107,8 +140,10 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
 
       <TextField
         value={trackName}
-        onChange={event => setTrackName(event.target.value)}
         helperText="Track name"
+        onChange={event => {
+          setTrackName(event.target.value)
+        }}
       />
       <Button
         variant="contained"
@@ -125,7 +160,7 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
 
             const trackId = [
               `${trackName.toLowerCase().replaceAll(' ', '_')}-${Date.now()}`,
-              `${session.adminMode ? '' : '-sessionTrack'}`,
+              session.adminMode ? '' : '-sessionTrack',
             ].join('')
 
             if (isSessionWithAddTracks(session)) {
@@ -135,18 +170,21 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
                 name: trackName,
                 assemblyNames: [model.assembly],
                 adapter:
-                  choice === 'BigMafAdapter'
+                  fileTypeChoice === 'BigMafAdapter'
                     ? {
-                        type: choice,
-                        bigBedLocation: loc,
-                        samples: sampleNames,
-                      }
+                      type: fileTypeChoice,
+                      bigBedLocation: loc,
+                      samples: sampleNames,
+                    }
                     : {
-                        type: choice,
-                        bedGzLocation: loc,
-                        index: { location: indexLoc },
-                        samples: sampleNames,
+                      type: fileTypeChoice,
+                      bedGzLocation: loc,
+                      index: {
+                        indexType: indexTypeChoice,
+                        location: indexLoc,
                       },
+                      samples: sampleNames,
+                    },
               })
 
               model.view?.showTrack(trackId)

package/src/MafTabixAdapter/MafTabixAdapter.ts

@@ -12,7 +12,8 @@ interface OrganismRecord {
   unknown: number
   data: string
 }
-export default class BigMafAdapter extends BaseFeatureDataAdapter {
+
+export default class MafTabixAdapter extends BaseFeatureDataAdapter {
   public setupP?: Promise<{ adapter: BaseFeatureDataAdapter }>
 
   async setup() {
@@ -30,7 +31,7 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
   }
   async setupPre() {
     if (!this.setupP) {
-      this.setupP = this.setup().catch(e => {
+      this.setupP = this.setup().catch((e: unknown) => {
         this.setupP = undefined
         throw e
       })
@@ -54,6 +55,13 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
       const features = await firstValueFrom(
         adapter.getFeatures(query).pipe(toArray()),
       )
+      const samples = this.getConf('samples') as string[] | { id: string }[]
+      const sampleStrings =
+        typeof samples[0] === 'string'
+          ? (samples as string[])
+          : (samples as { id: string }[]).map(s => s.id)
+      const sampleSet = new Set(sampleStrings)
+      let i = 0
       for (const feature of features) {
         const data = (feature.get('field5') as string).split(',')
         const alignments = {} as Record<string, OrganismRecord>
@@ -64,14 +72,23 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
           const idx = ad[0].lastIndexOf('.')
           const org = ad[0].slice(0, idx)
           const last = ad[0].slice(idx + 1)
-
-          alignments[org] = {
-            chr: last,
-            start: +ad[1],
-            srcSize: +ad[2],
-            strand: ad[3] === '-' ? -1 : 1,
-            unknown: +ad[4],
-            data: alns[j],
+          const s = sampleSet.has(org)
+            ? org
+            : sampleStrings.find(f => ad[0].startsWith(f))
+          if (s) {
+            alignments[s] = {
+              chr: last,
+              start: +ad[1],
+              srcSize: +ad[2],
+              strand: ad[3] === '-' ? -1 : 1,
+              unknown: +ad[4],
+              data: alns[j],
+            }
+          } else if (i < 100) {
+            console.error(`line not processed ${ad[0]}`)
+            i++
+          } else if (i > 100) {
+            console.error('too many errors, not printing any more')
           }
         }