jbrowse-plugin-mafviewer 1.0.2 → 1.0.4

package/src/LinearMafDisplay/components/YScaleBars.tsx

@@ -43,8 +43,8 @@ export const YScaleBars = observer(function (props: {
 }) {
   const { model } = props
   const { rowHeight, samples } = model
-  const svgFontSize = Math.min(rowHeight, 12)
-  const canDisplayLabel = rowHeight > 11
+  const svgFontSize = Math.min(Math.max(rowHeight, 10), 14)
+  const canDisplayLabel = rowHeight >= 10
   const minWidth = 20
 
   const labelWidth = Math.max(
@@ -55,7 +55,11 @@ export const YScaleBars = observer(function (props: {
 
   return (
     <Wrapper {...props}>
-      <ColorLegend model={model} labelWidth={labelWidth} />
+      <ColorLegend
+        model={model}
+        labelWidth={labelWidth}
+        svgFontSize={svgFontSize}
+      />
     </Wrapper>
   )
 })

package/src/LinearMafDisplay/configSchema.ts

@@ -5,8 +5,7 @@ export default function configSchemaF(pluginManager: PluginManager) {
   const LinearGenomePlugin = pluginManager.getPlugin(
     'LinearGenomeViewPlugin',
   ) as import('@jbrowse/plugin-linear-genome-view').default
-  // @ts-expect-error
-  const { linearBasicDisplayConfigSchemaFactory } = LinearGenomePlugin.exports
+  const { baseLinearDisplayConfigSchema } = LinearGenomePlugin.exports
   return ConfigurationSchema(
     'LinearMafDisplay',
     {
@@ -16,7 +15,7 @@ export default function configSchemaF(pluginManager: PluginManager) {
       renderer: pluginManager.pluggableConfigSchemaType('renderer'),
     },
     {
-      baseConfiguration: linearBasicDisplayConfigSchemaFactory(pluginManager),
+      baseConfiguration: baseLinearDisplayConfigSchema,
       explicitlyTyped: true,
     },
   )

package/src/LinearMafDisplay/renderSvg.tsx

@@ -14,12 +14,21 @@ export async function renderSvg(
   opts: ExportSvgDisplayOptions,
   superRenderSvg: (opts: ExportSvgDisplayOptions) => Promise<React.ReactNode>,
 ) {
-  const { offsetPx } = getContainingView(self) as LinearGenomeViewModel
+  const { height, id } = self
+  const { offsetPx, width } = getContainingView(self) as LinearGenomeViewModel
+  const clipid = `mafclip-${id}`
   return (
     <>
-      <g id="snpcov">{await superRenderSvg(opts)}</g>
-      <g transform={`translate(${Math.max(-offsetPx, 0)})`}>
-        <YScaleBars model={self} orientation="left" exportSVG />
+      <defs>
+        <clipPath id={clipid}>
+          <rect x={0} y={0} width={width} height={height} />
+        </clipPath>
+      </defs>
+      <g clipPath={`url(#${clipid})`}>
+        <g id="snpcov">{await superRenderSvg(opts)}</g>
+        <g transform={`translate(${Math.max(-offsetPx, 0)})`}>
+          <YScaleBars model={self} orientation="left" exportSVG />
+        </g>
       </g>
     </>
   )

package/src/LinearMafDisplay/stateModel.ts

@@ -5,9 +5,10 @@ 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'
@@ -24,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
@@ -40,11 +40,43 @@ export default function stateModelFactory(
          * #property
          */
         configuration: ConfigurationReference(configSchema),
+        /**
+         * #property
+         */
+        rowHeight: 15,
+        /**
+         * #property
+         */
+        rowProportion: 0.8,
+        /**
+         * #property
+         */
+        showAllLetters: false,
       }),
     )
     .volatile(() => ({
       prefersOffset: true,
     }))
+    .actions(self => ({
+      /**
+       * #action
+       */
+      setRowHeight(n: number) {
+        self.rowHeight = n
+      },
+      /**
+       * #action
+       */
+      setRowProportion(n: number) {
+        self.rowProportion = n
+      },
+      /**
+       * #action
+       */
+      setShowAllLetters(f: boolean) {
+        self.showAllLetters = f
+      },
+    }))
     .views(self => ({
       /**
        * #getter
@@ -53,18 +85,11 @@ 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
-        }
-      },
-      /**
-       * #getter
-       */
-      get rowHeight() {
-        return 20
+        return isStrs(r)
+          ? r.map(elt => ({ id: elt, label: elt, color: undefined }))
+          : r
       },
+
       /**
        * #getter
        */
@@ -88,29 +113,67 @@ export default function stateModelFactory(
       },
     }))
     .views(self => {
-      const { renderProps: superRenderProps } = self
+      const {
+        trackMenuItems: superTrackMenuItems,
+        renderProps: superRenderProps,
+      } = self
       return {
         /**
          * #method
          */
         renderProps() {
+          const {
+            showAllLetters,
+            rendererConfig,
+            samples,
+            rowHeight,
+            rowProportion,
+          } = self
           return {
             ...superRenderProps(),
-            samples: self.samples,
-            rowHeight: self.rowHeight,
+            config: rendererConfig,
+            samples,
+            rowHeight,
+            rowProportion,
+            showAllLetters,
           }
         },
+        /**
+         * #method
+         */
+        trackMenuItems() {
+          return [
+            ...superTrackMenuItems(),
+            {
+              label: 'Set row height',
+              onClick: () => {
+                getSession(self).queueDialog(handleClose => [
+                  SetRowHeightDialog,
+                  { model: self, handleClose },
+                ])
+              },
+            },
+            {
+              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')
-          // @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]) => [
@@ -46,24 +35,31 @@ function makeImageData({
   renderArgs: RenderArgsDeserialized & {
     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 correctionFactor = getCorrectionFactor(bpPerPx)
+  const f = 0.4
+  const h2 = rowHeight / 2
+  const hp2 = h / 2
+  const offset = (rowHeight - h) / 2
 
   // sample as alignments
   ctx.font = 'bold 10px Courier New,monospace'
@@ -76,75 +72,139 @@ 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)
+
+      const t = rowHeight * row
+
+      // 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)
+      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++
+          }
         }
+        ctx.fill()
       }
-      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 ((showAllLetters || seq[i] !== c) && c !== '-') {
+            const l = leftPx + scale * o
+            ctx.fillStyle =
+              colorForBase[c as keyof typeof colorForBase] ?? 'black'
+            ctx.fillRect(l, offset + t, scale + f, h)
+          }
+          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 ((showAllLetters || seq[i] !== c) && c !== '-') {
+              ctx.fillStyle = contrastForBase[c] ?? 'white'
+              ctx.fillText(origAlignment[i], l + offset, hp2 + 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 = rowHeight * 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 > 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++
+      }
+      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: { id: string; color?: string }[]
       rowHeight: number
+      rowProportion: number
     },
   ) {
     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

@@ -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,19 @@ 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(() => '')
-        // 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 j = 0; j < data.length; j++) {
-          const elt = data[j]
 
+        for (const [j, elt] of data.entries()) {
           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 +82,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],
             },
           }),
         )