jbrowse-plugin-mafviewer 1.0.3 → 1.0.4

package/src/LinearMafDisplay/stateModel.ts

@@ -48,6 +48,10 @@ export default function stateModelFactory(
          * #property
          */
         rowProportion: 0.8,
+        /**
+         * #property
+         */
+        showAllLetters: false,
       }),
     )
     .volatile(() => ({
@@ -66,6 +70,12 @@ export default function stateModelFactory(
       setRowProportion(n: number) {
         self.rowProportion = n
       },
+      /**
+       * #action
+       */
+      setShowAllLetters(f: boolean) {
+        self.showAllLetters = f
+      },
     }))
     .views(self => ({
       /**
@@ -75,11 +85,9 @@ export default function stateModelFactory(
         const r = self.adapterConfig.samples as
           | string[]
           | { id: string; label: string; color?: string }[]
-        if (isStrs(r)) {
-          return r.map(elt => ({ id: elt, label: elt, color: undefined }))
-        } else {
-          return r
-        }
+        return isStrs(r)
+          ? r.map(elt => ({ id: elt, label: elt, color: undefined }))
+          : r
       },
 
       /**
@@ -114,12 +122,20 @@ export default function stateModelFactory(
          * #method
          */
         renderProps() {
+          const {
+            showAllLetters,
+            rendererConfig,
+            samples,
+            rowHeight,
+            rowProportion,
+          } = self
           return {
             ...superRenderProps(),
-            config: self.rendererConfig,
-            samples: self.samples,
-            rowHeight: self.rowHeight,
-            rowProportion: self.rowProportion,
+            config: rendererConfig,
+            samples,
+            rowHeight,
+            rowProportion,
+            showAllLetters,
           }
         },
         /**
@@ -137,17 +153,26 @@ export default function stateModelFactory(
                 ])
               },
             },
+            {
+              label: 'Show all letters',
+              type: 'checkbox',
+              checked: self.showAllLetters,
+              onClick: () => {
+                self.setShowAllLetters(!self.showAllLetters)
+              },
+            },
           ]
         },
       }
     })
     .actions(self => {
+      // eslint-disable-next-line @typescript-eslint/unbound-method
       const { renderSvg: superRenderSvg } = self
       return {
         /**
          * #action
          */
-        async renderSvg(opts: ExportSvgDisplayOptions): Promise<any> {
+        async renderSvg(opts: ExportSvgDisplayOptions) {
           const { renderSvg } = await import('./renderSvg')
           return renderSvg(self, opts, superRenderSvg)
         },

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -36,27 +36,30 @@ function makeImageData({
     samples: { id: string; color?: string }[]
     rowHeight: number
     rowProportion: number
+    showAllLetters: boolean
   }
 }) {
   const {
     regions,
     bpPerPx,
     rowHeight,
+    showAllLetters,
     theme: configTheme,
     samples,
     rowProportion,
   } = renderArgs
   const [region] = regions
   const features = renderArgs.features as Map<string, Feature>
-  const h = rowHeight
+  const h = rowHeight * rowProportion
   const theme = createJBrowseTheme(configTheme)
   const colorForBase = getColorBaseMap(theme)
   const contrastForBase = getContrastBaseMap(theme)
   const sampleToRowMap = new Map(samples.map((s, i) => [s.id, i]))
   const scale = 1 / bpPerPx
   const f = 0.4
-  const h2 = h * rowProportion
-  const offset = h2 / 2
+  const h2 = rowHeight / 2
+  const hp2 = h / 2
+  const offset = (rowHeight - h) / 2
 
   // sample as alignments
   ctx.font = 'bold 10px Courier New,monospace'
@@ -74,7 +77,7 @@ function makeImageData({
         throw new Error(`unknown sample encountered: ${sample}`)
       }
 
-      const t = h * row
+      const t = rowHeight * row
 
       // gaps
       ctx.beginPath()
@@ -91,30 +94,32 @@ function makeImageData({
       }
       ctx.stroke()
 
-      // matches
-      ctx.beginPath()
-      ctx.fillStyle = 'lightgrey'
-      for (let i = 0, o = 0; i < alignment.length; i++) {
-        if (seq[i] !== '-') {
-          const c = alignment[i]
-          const l = leftPx + scale * o
-          if (seq[i] === c && c !== '-') {
-            ctx.rect(l, offset + t, scale + f, h2)
+      if (!showAllLetters) {
+        // matches
+        ctx.beginPath()
+        ctx.fillStyle = 'lightgrey'
+        for (let i = 0, o = 0; i < alignment.length; i++) {
+          if (seq[i] !== '-') {
+            const c = alignment[i]
+            const l = leftPx + scale * o
+            if (seq[i] === c && c !== '-') {
+              ctx.rect(l, offset + t, scale + f, h)
+            }
+            o++
           }
-          o++
         }
+        ctx.fill()
       }
-      ctx.fill()
 
       // mismatches
       for (let i = 0, o = 0; i < alignment.length; i++) {
         const c = alignment[i]
         if (seq[i] !== '-') {
-          if (seq[i] !== c && c !== '-') {
+          if ((showAllLetters || seq[i] !== c) && c !== '-') {
             const l = leftPx + scale * o
             ctx.fillStyle =
-              colorForBase[c as keyof typeof colorForBase] ?? 'purple'
-            ctx.fillRect(l, offset + t, scale + f, h2)
+              colorForBase[c as keyof typeof colorForBase] ?? 'black'
+            ctx.fillRect(l, offset + t, scale + f, h)
           }
           o++
         }
@@ -128,9 +133,9 @@ function makeImageData({
             const l = leftPx + scale * o
             const offset = (scale - charSize.w) / 2 + 1
             const c = alignment[i]
-            if (seq[i] !== c && c !== '-') {
-              ctx.fillStyle = contrastForBase[c] ?? 'black'
-              ctx.fillText(origAlignment[i], l + offset, h2 + t + 3)
+            if ((showAllLetters || seq[i] !== c) && c !== '-') {
+              ctx.fillStyle = contrastForBase[c] ?? 'white'
+              ctx.fillText(origAlignment[i], l + offset, hp2 + t + 3)
             }
             o++
           }
@@ -154,7 +159,7 @@ function makeImageData({
         throw new Error(`unknown sample encountered: ${sample}`)
       }
 
-      const t = h * row
+      const t = rowHeight * row
 
       ctx.beginPath()
       ctx.fillStyle = 'purple'
@@ -166,11 +171,11 @@ function makeImageData({
           }
           i++
         }
-        if (ins.length) {
-          const l = leftPx + scale * o - 2
-          ctx.rect(l, offset + t, 2, h2)
-          ctx.rect(l - 2, offset + t, 6, 1)
-          ctx.rect(l - 2, offset + t + h2, 6, 1)
+        if (ins.length > 0) {
+          const l = leftPx + scale * o - 1
+          ctx.rect(l, offset + t + 1, 1, h - 1)
+          ctx.rect(l - 2, offset + t, 5, 1)
+          ctx.rect(l - 2, offset + t + h - 1, 5, 1)
         }
         o++
       }
@@ -199,7 +204,7 @@ export default class LinearMafRenderer extends FeatureRendererType {
   ) {
     const { regions, bpPerPx, samples, rowHeight } = renderProps
     const [region] = regions
-    const height = samples.length * rowHeight
+    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 =>

package/src/LinearMafRenderer/components/ReactComponent.tsx

@@ -2,7 +2,10 @@ import { PrerenderedCanvas } from '@jbrowse/core/ui'
 import { observer } from 'mobx-react'
 import React from 'react'
 
-const LinearMafRendering = observer(function (props: any) {
+const LinearMafRendering = observer(function (props: {
+  width: number
+  height: number
+}) {
   return <PrerenderedCanvas {...props} />
 })
 

package/src/MafAddTrackWorkflow/AddTrackWorkflow.tsx

@@ -43,6 +43,7 @@ export default function MultiMAFWidget({ model }: { model: AddTrackModel }) {
   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 rootModel = getRoot<any>(model)
   return (
     <Paper className={classes.paper}>

package/src/MafTabixAdapter/MafTabixAdapter.ts

@@ -58,19 +58,8 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
         const data = (feature.get('field5') as string).split(',')
         const alignments = {} as Record<string, OrganismRecord>
         const alns = data.map(elt => elt.split(':')[5])
-        // const aln = alns[0]
-        // const alns2 = data.map(() => '')
-        // remove extraneous data in other alignments
-        // reason being: cannot represent missing data in main species that are in others)
-        // for (let i = 0; i < aln.length; i++) {
-        //   if (aln[i] !== '-') {
-        //     for (let j = 0; j < data.length; j++) {
-        //       alns2[j] += alns[j][i]
-        //     }
-        //   }
-        // }
-        for (let j = 0; j < data.length; j++) {
-          const elt = data[j]
+
+        for (const [j, elt] of data.entries()) {
           const ad = elt.split(':')
           const [org, chr] = ad[0].split('.')