jbrowse-plugin-mafviewer 1.0.1 → 1.0.3

package/src/LinearMafDisplay/stateModel.ts

@@ -5,9 +5,14 @@ import {
   ConfigurationReference,
   getConf,
 } from '@jbrowse/core/configuration'
-import { getEnv } from '@jbrowse/core/util'
+import { getEnv, getSession } from '@jbrowse/core/util'
 import PluginManager from '@jbrowse/core/PluginManager'
 import { ExportSvgDisplayOptions } from '@jbrowse/plugin-linear-genome-view'
+import SetRowHeightDialog from './components/SetRowHeight'
+
+function isStrs(array: unknown[]): array is string[] {
+  return typeof array[0] === 'string'
+}
 
 /**
  * #stateModel LinearMafDisplay
@@ -20,13 +25,12 @@ export default function stateModelFactory(
   const LinearGenomePlugin = pluginManager.getPlugin(
     'LinearGenomeViewPlugin',
   ) as import('@jbrowse/plugin-linear-genome-view').default
-  // @ts-expect-error
-  const { linearBasicDisplayModelFactory } = LinearGenomePlugin.exports
+  const { BaseLinearDisplay } = LinearGenomePlugin.exports
 
   return types
     .compose(
       'LinearMafDisplay',
-      linearBasicDisplayModelFactory(configSchema),
+      BaseLinearDisplay,
       types.model({
         /**
          * #property
@@ -36,25 +40,48 @@ export default function stateModelFactory(
          * #property
          */
         configuration: ConfigurationReference(configSchema),
+        /**
+         * #property
+         */
+        rowHeight: 15,
+        /**
+         * #property
+         */
+        rowProportion: 0.8,
       }),
     )
     .volatile(() => ({
       prefersOffset: true,
     }))
-    .views(self => ({
+    .actions(self => ({
       /**
-       * #getter
+       * #action
        */
-      get samples() {
-        const r = self.adapterConfig.samples as string[]
-        return r.map(elt => ({ name: elt, color: undefined }))
+      setRowHeight(n: number) {
+        self.rowHeight = n
       },
+      /**
+       * #action
+       */
+      setRowProportion(n: number) {
+        self.rowProportion = n
+      },
+    }))
+    .views(self => ({
       /**
        * #getter
        */
-      get rowHeight() {
-        return 20
+      get samples() {
+        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
+        }
       },
+
       /**
        * #getter
        */
@@ -78,7 +105,10 @@ export default function stateModelFactory(
       },
     }))
     .views(self => {
-      const { renderProps: superRenderProps } = self
+      const {
+        trackMenuItems: superTrackMenuItems,
+        renderProps: superRenderProps,
+      } = self
       return {
         /**
          * #method
@@ -86,10 +116,29 @@ export default function stateModelFactory(
         renderProps() {
           return {
             ...superRenderProps(),
+            config: self.rendererConfig,
             samples: self.samples,
             rowHeight: self.rowHeight,
+            rowProportion: self.rowProportion,
           }
         },
+        /**
+         * #method
+         */
+        trackMenuItems() {
+          return [
+            ...superTrackMenuItems(),
+            {
+              label: 'Set row height',
+              onClick: () => {
+                getSession(self).queueDialog(handleClose => [
+                  SetRowHeightDialog,
+                  { model: self, handleClose },
+                ])
+              },
+            },
+          ]
+        },
       }
     })
     .actions(self => {
@@ -100,7 +149,6 @@ export default function stateModelFactory(
          */
         async renderSvg(opts: ExportSvgDisplayOptions): Promise<any> {
           const { renderSvg } = await import('./renderSvg')
-          // @ts-expect-error
           return renderSvg(self, opts, superRenderSvg)
         },
       }

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -3,23 +3,12 @@ import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/rend
 import { createJBrowseTheme } from '@jbrowse/core/ui'
 import {
   Feature,
+  Region,
   featureSpanPx,
   renderToAbstractCanvas,
 } from '@jbrowse/core/util'
 import { Theme } from '@mui/material'
 
-function getCorrectionFactor(scale: number) {
-  if (scale >= 1) {
-    return 0.6
-  } else if (scale >= 0.2) {
-    return 0.05
-  } else if (scale >= 0.02) {
-    return 0.03
-  } else {
-    return 0.02
-  }
-}
-
 export function getContrastBaseMap(theme: Theme) {
   return Object.fromEntries(
     Object.entries(getColorBaseMap(theme)).map(([key, value]) => [
@@ -44,8 +33,9 @@ function makeImageData({
 }: {
   ctx: CanvasRenderingContext2D
   renderArgs: RenderArgsDeserialized & {
-    samples: { name: string; color?: string }[]
+    samples: { id: string; color?: string }[]
     rowHeight: number
+    rowProportion: number
   }
 }) {
   const {
@@ -54,6 +44,7 @@ function makeImageData({
     rowHeight,
     theme: configTheme,
     samples,
+    rowProportion,
   } = renderArgs
   const [region] = regions
   const features = renderArgs.features as Map<string, Feature>
@@ -61,9 +52,11 @@ function makeImageData({
   const theme = createJBrowseTheme(configTheme)
   const colorForBase = getColorBaseMap(theme)
   const contrastForBase = getContrastBaseMap(theme)
-  const sampleToRowMap = new Map(samples.map((s, i) => [s.name, i]))
+  const sampleToRowMap = new Map(samples.map((s, i) => [s.id, i]))
   const scale = 1 / bpPerPx
-  const correctionFactor = getCorrectionFactor(bpPerPx)
+  const f = 0.4
+  const h2 = h * rowProportion
+  const offset = h2 / 2
 
   // sample as alignments
   ctx.font = 'bold 10px Courier New,monospace'
@@ -76,70 +69,132 @@ function makeImageData({
       const origAlignment = val.data
       const alignment = origAlignment.toLowerCase()
 
-      // gaps
-      ctx.beginPath()
-      ctx.fillStyle = 'black'
-      const offset0 = (5 / 12) * h
-      const h6 = h / 6
       const row = sampleToRowMap.get(sample)
       if (row === undefined) {
         throw new Error(`unknown sample encountered: ${sample}`)
       }
+
       const t = h * row
-      for (let i = 0; i < alignment.length; i++) {
-        const l = leftPx + scale * i
-        if (alignment[i] === '-') {
-          ctx.rect(l, offset0 + t, scale + correctionFactor, h6)
+
+      // gaps
+      ctx.beginPath()
+      ctx.fillStyle = 'black'
+      for (let i = 0, o = 0; i < alignment.length; i++) {
+        if (seq[i] !== '-') {
+          if (alignment[i] === '-') {
+            const l = leftPx + scale * o
+            ctx.moveTo(l, t + h2)
+            ctx.lineTo(l + scale + f, t + h2)
+          }
+          o++
         }
       }
-      ctx.fill()
-      const offset = (1 / 4) * h
-      const h2 = h / 2
+      ctx.stroke()
 
       // matches
       ctx.beginPath()
       ctx.fillStyle = 'lightgrey'
-      for (let i = 0; i < alignment.length; i++) {
-        const c = alignment[i]
-        const l = leftPx + scale * i
-        if (seq[i] === c && c !== '-') {
-          ctx.rect(l, offset + t, scale + correctionFactor, h2)
+      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)
+          }
+          o++
         }
       }
       ctx.fill()
 
       // mismatches
-      for (let i = 0; i < alignment.length; i++) {
+      for (let i = 0, o = 0; i < alignment.length; i++) {
         const c = alignment[i]
-        if (seq[i] !== c && c !== '-') {
-          const l = leftPx + scale * i
-          ctx.fillStyle =
-            colorForBase[c as keyof typeof colorForBase] ?? 'purple'
-          ctx.fillRect(l, offset + t, scale + correctionFactor, h2)
+        if (seq[i] !== '-') {
+          if (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)
+          }
+          o++
         }
       }
 
       // font
       const charSize = { w: 10 }
       if (scale >= charSize.w) {
-        for (let i = 0; i < alignment.length; i++) {
-          const l = leftPx + scale * i
-          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)
+        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 c = alignment[i]
+            if (seq[i] !== c && c !== '-') {
+              ctx.fillStyle = contrastForBase[c] ?? 'black'
+              ctx.fillText(origAlignment[i], l + offset, h2 + t + 3)
+            }
+            o++
+          }
+        }
+      }
+    }
+  }
+
+  // second pass for insertions, has slightly improved look since the
+  // insertions are always 'on top' of the other features
+  for (const feature of features.values()) {
+    const [leftPx] = featureSpanPx(feature, region, bpPerPx)
+    const vals = feature.get('alignments') as Record<string, { data: string }>
+    const seq = feature.get('seq').toLowerCase()
+
+    for (const [sample, val] of Object.entries(vals)) {
+      const origAlignment = val.data
+      const alignment = origAlignment.toLowerCase()
+      const row = sampleToRowMap.get(sample)
+      if (row === undefined) {
+        throw new Error(`unknown sample encountered: ${sample}`)
+      }
+
+      const t = h * row
+
+      ctx.beginPath()
+      ctx.fillStyle = 'purple'
+      for (let i = 0, o = 0; i < alignment.length; i++) {
+        let ins = ''
+        while (seq[i] === '-') {
+          if (alignment[i] !== '-') {
+            ins += alignment[i]
           }
+          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)
+        }
+        o++
       }
+      ctx.fill()
     }
   }
 }
 export default class LinearMafRenderer extends FeatureRendererType {
+  getExpandedRegion(region: Region) {
+    const { start, end } = region
+    const bpExpansion = 1
+
+    return {
+      // xref https://github.com/mobxjs/mobx-state-tree/issues/1524 for Omit
+      ...(region as Omit<typeof region, symbol>),
+      start: Math.floor(Math.max(start - bpExpansion, 0)),
+      end: Math.ceil(end + bpExpansion),
+    }
+  }
   async render(
     renderProps: RenderArgsDeserialized & {
-      samples: { name: string; color?: string }[]
+      samples: { id: string; color?: string }[]
       rowHeight: number
+      rowProportion: number
     },
   ) {
     const { regions, bpPerPx, samples, rowHeight } = renderProps

package/src/MafTabixAdapter/MafTabixAdapter.ts

@@ -43,6 +43,11 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
     return adapter.getRefNames()
   }
 
+  async getHeader() {
+    const { adapter } = await this.setup()
+    return adapter.getHeader()
+  }
+
   getFeatures(query: Region) {
     return ObservableCreate<Feature>(async observer => {
       const { adapter } = await this.setup()
@@ -52,33 +57,30 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
       for (const feature of features) {
         const data = (feature.get('field5') as string).split(',')
         const alignments = {} as Record<string, OrganismRecord>
-        const main = data[0]
-        const aln = main.split(':')[5]
         const alns = data.map(elt => elt.split(':')[5])
-        const alns2 = data.map(() => '')
+        // 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, o = 0; i < aln.length; i++, o++) {
-          if (aln[i] !== '-') {
-            for (let j = 0; j < data.length; j++) {
-              alns2[j] += alns[j][i]
-            }
-          }
-        }
+        // 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]
-
           const ad = elt.split(':')
-          const org = ad[0].split('.')[0]
-          const chr = ad[0].split('.')[1]
+          const [org, chr] = ad[0].split('.')
 
           alignments[org] = {
-            chr: chr,
+            chr,
             start: +ad[1],
             srcSize: +ad[2],
             strand: ad[3] === '-' ? -1 : 1,
             unknown: +ad[4],
-            data: alns2[j],
+            data: alns[j],
           }
         }
 
@@ -91,8 +93,8 @@ export default class BigMafAdapter extends BaseFeatureDataAdapter {
               refName: feature.get('refName'),
               name: feature.get('name'),
               score: feature.get('score'),
-              alignments: alignments,
-              seq: alns2[0],
+              alignments,
+              seq: alns[0],
             },
           }),
         )

package/src/MafTabixAdapter/configSchema.ts

@@ -13,7 +13,8 @@ const configSchema = ConfigurationSchema(
      * #slot
      */
     samples: {
-      type: 'stringArray',
+      type: 'frozen',
+      description: 'string[] or {id:string,label:string,color?:string}[]',
       defaultValue: [],
     },
     /**

package/src/index.ts

@@ -22,5 +22,5 @@ export default class MafViewerPlugin extends Plugin {
     MafAddTrackWorkflowF(pluginManager)
   }
 
-  configure(pluginManager: PluginManager) {}
+  configure(_pluginManager: PluginManager) {}
 }