jbrowse-plugin-mafviewer 1.1.3 → 1.2.0

package/src/LinearMafRenderer/LinearMafRenderer.ts

@@ -1,14 +1,12 @@
 import { FeatureRendererType } from '@jbrowse/core/pluggableElementTypes'
 import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
-import { createJBrowseTheme } from '@jbrowse/core/ui'
 import {
-  Feature,
   Region,
-  featureSpanPx,
   renderToAbstractCanvas,
+  updateStatus,
 } from '@jbrowse/core/util'
 
-import { getColorBaseMap, getContrastBaseMap } from './util'
+import { makeImageData } from './makeImageData'
 
 interface Sample {
   id: string
@@ -20,172 +18,9 @@ interface RenderArgs extends RenderArgsDeserialized {
   rowProportion: number
   showAllLetters: boolean
   mismatchRendering: boolean
+  statusCallback?: (arg: string) => void
 }
 
-function makeImageData({
-  ctx,
-  renderArgs,
-}: {
-  ctx: CanvasRenderingContext2D
-  renderArgs: RenderArgs & { features: Map<string, Feature> }
-}) {
-  const {
-    regions,
-    bpPerPx,
-    rowHeight,
-    showAllLetters,
-    theme: configTheme,
-    mismatchRendering,
-    samples,
-    rowProportion,
-    features,
-  } = renderArgs
-  const region = regions[0]!
-  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 = rowHeight / 2
-  const hp2 = h / 2
-  const offset = (rowHeight - h) / 2
-
-  // sample as alignments
-  ctx.font = 'bold 10px Courier New,monospace'
-
-  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) {
-        continue
-      }
-
-      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.stroke()
-
-      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()
-      }
-
-      // mismatches
-      for (let i = 0, o = 0; i < alignment.length; i++) {
-        const c = alignment[i]
-        if (seq[i] !== '-') {
-          if (c !== '-') {
-            const l = leftPx + scale * o
-            if (seq[i] !== c && 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 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 - charSizeW) / 2 + 1
-            const c = alignment[i]!
-            if ((showAllLetters || seq[i] !== c) && c !== '-') {
-              ctx.fillStyle = mismatchRendering
-                ? (contrastForBase[c] ?? 'white')
-                : 'black'
-              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) {
-        continue
-      }
-
-      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] !== '-' && 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
@@ -199,7 +34,13 @@ export default class LinearMafRenderer extends FeatureRendererType {
     }
   }
   async render(renderProps: RenderArgs) {
-    const { regions, bpPerPx, samples, rowHeight } = renderProps
+    const {
+      statusCallback = () => {},
+      regions,
+      bpPerPx,
+      samples,
+      rowHeight,
+    } = renderProps
     const region = regions[0]!
     const height = samples.length * (rowHeight + 1) + 100
     const width = (region.end - region.start) / bpPerPx
@@ -208,13 +49,15 @@ export default class LinearMafRenderer extends FeatureRendererType {
       width,
       height,
       renderProps,
-      ctx => {
-        makeImageData({
-          ctx,
-          renderArgs: {
-            ...renderProps,
-            features,
-          },
+      async ctx => {
+        await updateStatus('Rendering alignment', statusCallback, () => {
+          makeImageData({
+            ctx,
+            renderArgs: {
+              ...renderProps,
+              features,
+            },
+          })
         })
         return undefined
       },
@@ -228,8 +71,10 @@ export default class LinearMafRenderer extends FeatureRendererType {
     return {
       ...results,
       ...res,
+      features: new Map(),
       width,
       height,
+      containsNoTransferables: true,
     }
   }
 }

package/src/LinearMafRenderer/configSchema.ts

@@ -7,7 +7,12 @@ function x() {} // eslint-disable-line @typescript-eslint/no-unused-vars
 
 const configSchema = ConfigurationSchema(
   'LinearMafRenderer',
-  {},
+  {
+    baseColor: {
+      type: 'color',
+      defaultValue: 'lightgrey',
+    },
+  },
   {
     /**
      * #baseConfiguration

package/src/LinearMafRenderer/makeImageData.ts

@@ -0,0 +1,211 @@
+import { RenderArgsDeserialized } from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
+import { createJBrowseTheme } from '@jbrowse/core/ui'
+import { Feature, featureSpanPx } from '@jbrowse/core/util'
+
+import {
+  fillRect,
+  getCharWidthHeight,
+  getColorBaseMap,
+  getContrastBaseMap,
+} from './util'
+
+interface Sample {
+  id: string
+  color?: string
+}
+interface RenderArgs extends RenderArgsDeserialized {
+  samples: Sample[]
+  rowHeight: number
+  rowProportion: number
+  showAllLetters: boolean
+  mismatchRendering: boolean
+  features: Map<string, Feature>
+  statusCallback?: (arg: string) => void
+}
+
+export function makeImageData({
+  ctx,
+  renderArgs,
+}: {
+  ctx: CanvasRenderingContext2D
+  renderArgs: RenderArgs
+}) {
+  const {
+    regions,
+    bpPerPx,
+    rowHeight,
+    showAllLetters,
+    theme: configTheme,
+    mismatchRendering,
+    samples,
+    rowProportion,
+    features,
+    statusCallback,
+  } = renderArgs
+  const region = regions[0]!
+  const canvasWidth = (region.end - region.start) / bpPerPx
+  const h = rowHeight * rowProportion
+  const theme = createJBrowseTheme(configTheme)
+  const colorForBase = getColorBaseMap(theme)
+  const contrastForBase = getContrastBaseMap(theme)
+
+  const { charHeight } = getCharWidthHeight()
+  const sampleToRowMap = new Map(samples.map((s, i) => [s.id, i]))
+  const scale = 1 / 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'
+
+  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()
+    const r = Object.entries(vals)
+    for (const [sample, val] of r) {
+      const origAlignment = val.data
+      const alignment = origAlignment.toLowerCase()
+
+      const row = sampleToRowMap.get(sample)
+      if (row === undefined) {
+        continue
+      }
+
+      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.stroke()
+
+      if (!showAllLetters) {
+        // matches
+        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 !== '-') {
+              fillRect(ctx, l, offset + t, scale + f, h, canvasWidth)
+            }
+            o++
+          }
+        }
+      }
+
+      // mismatches
+      for (let i = 0, o = 0; i < alignment.length; i++) {
+        const c = alignment[i]
+        if (seq[i] !== '-') {
+          if (c !== '-') {
+            const l = leftPx + scale * o
+            if (seq[i] !== c && c !== ' ') {
+              fillRect(
+                ctx,
+                l,
+                offset + t,
+                scale + f,
+                h,
+                canvasWidth,
+                mismatchRendering
+                  ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    (colorForBase[c as keyof typeof colorForBase] ?? 'black')
+                  : 'orange',
+              )
+            } else if (showAllLetters) {
+              fillRect(
+                ctx,
+                l,
+                offset + t,
+                scale + f,
+                h,
+                canvasWidth,
+                mismatchRendering
+                  ? // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+                    (colorForBase[c as keyof typeof colorForBase] ?? 'black')
+                  : 'lightblue',
+              )
+            }
+          }
+          o++
+        }
+      }
+
+      // font
+      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 - charSizeW) / 2 + 1
+            const c = alignment[i]!
+            if ((showAllLetters || seq[i] !== c) && c !== '-') {
+              ctx.fillStyle = mismatchRendering
+                ? (contrastForBase[c] ?? 'white')
+                : 'black'
+              if (rowHeight > charHeight) {
+                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) {
+        continue
+      }
+
+      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] !== '-' && alignment[i] !== ' ') {
+            ins += alignment[i]
+          }
+          i++
+        }
+        if (ins.length > 0) {
+          const l = leftPx + scale * o - 1
+
+          ctx.rect(l, offset + t, 1, h)
+          if (bpPerPx < 1) {
+            ctx.rect(l - 2, offset + t, 5, 1)
+            ctx.rect(l - 2, offset + t + h - 1, 5, 1)
+          }
+        }
+        o++
+      }
+      ctx.fill()
+    }
+  }
+}

package/src/LinearMafRenderer/util.ts

@@ -1,4 +1,5 @@
-import { Theme } from '@mui/material'
+import { measureText } from '@jbrowse/core/util'
+import type { Theme } from '@mui/material'
 
 export function getContrastBaseMap(theme: Theme) {
   return Object.fromEntries(
@@ -18,3 +19,29 @@ export function getColorBaseMap(theme: Theme) {
     t: bases.T.main,
   }
 }
+
+export function fillRect(
+  ctx: CanvasRenderingContext2D,
+  l: number,
+  t: number,
+  w: number,
+  h: number,
+  cw: number,
+  color?: string,
+) {
+  if (l + w < 0 || l > cw) {
+    return
+  }
+  if (color) {
+    ctx.fillStyle = color
+  }
+  ctx.fillRect(l, t, w, h)
+}
+
+// get width and height of chars the height is an approximation: width letter M
+// is approximately the height
+export function getCharWidthHeight() {
+  const charWidth = measureText('A')
+  const charHeight = measureText('M') - 2
+  return { charWidth, charHeight }
+}

package/src/MafAddTrackWorkflow/AddTrackWorkflow.tsx

@@ -7,7 +7,6 @@ import {
   isSessionModelWithWidgets,
   isSessionWithAddTracks,
 } from '@jbrowse/core/util'
-import { AddTrackModel } from '@jbrowse/plugin-data-management'
 import {
   Button,
   FormControl,
@@ -21,6 +20,8 @@ import {
 import { getRoot } from 'mobx-state-tree'
 import { makeStyles } from 'tss-react/mui'
 
+import type { AddTrackModel } from '@jbrowse/plugin-data-management'
+
 const useStyles = makeStyles()(theme => ({
   textbox: {
     width: '100%',

package/src/MafTabixAdapter/MafTabixAdapter.ts

@@ -1,5 +1,13 @@
-import { BaseFeatureDataAdapter } from '@jbrowse/core/data_adapters/BaseAdapter'
-import { Feature, Region, SimpleFeature } from '@jbrowse/core/util'
+import {
+  BaseFeatureDataAdapter,
+  BaseOptions,
+} from '@jbrowse/core/data_adapters/BaseAdapter'
+import {
+  Feature,
+  Region,
+  SimpleFeature,
+  updateStatus,
+} from '@jbrowse/core/util'
 import { openLocation } from '@jbrowse/core/util/io'
 import { ObservableCreate } from '@jbrowse/core/util/rxjs'
 import { getSnapshot } from 'mobx-state-tree'
@@ -20,7 +28,7 @@ interface OrganismRecord {
 export default class MafTabixAdapter extends BaseFeatureDataAdapter {
   public setupP?: Promise<{ adapter: BaseFeatureDataAdapter }>
 
-  async setup() {
+  async setupPre() {
     const config = this.config
     if (!this.getSubAdapter) {
       throw new Error('no getSubAdapter available')
@@ -33,9 +41,9 @@ export default class MafTabixAdapter extends BaseFeatureDataAdapter {
       adapter: adapter.dataAdapter as BaseFeatureDataAdapter,
     }
   }
-  async setupPre() {
+  async setupPre2() {
     if (!this.setupP) {
-      this.setupP = this.setup().catch((e: unknown) => {
+      this.setupP = this.setupPre().catch((e: unknown) => {
         this.setupP = undefined
         throw e
       })
@@ -43,60 +51,100 @@ export default class MafTabixAdapter extends BaseFeatureDataAdapter {
     return this.setupP
   }
 
-  async getRefNames() {
-    const { adapter } = await this.setup()
+  async setup(opts?: BaseOptions) {
+    const { statusCallback = () => {} } = opts || {}
+    return updateStatus('Downloading index', statusCallback, () =>
+      this.setupPre2(),
+    )
+  }
+
+  async getRefNames(opts?: BaseOptions) {
+    const { adapter } = await this.setup(opts)
     return adapter.getRefNames()
   }
 
-  async getHeader() {
-    const { adapter } = await this.setup()
+  async getHeader(opts?: BaseOptions) {
+    const { adapter } = await this.setup(opts)
     return adapter.getHeader()
   }
 
-  getFeatures(query: Region) {
+  getFeatures(query: Region, opts?: BaseOptions) {
+    const { statusCallback = () => {} } = opts || {}
     return ObservableCreate<Feature>(async observer => {
-      const { adapter } = await this.setup()
-      const features = await firstValueFrom(
-        adapter.getFeatures(query).pipe(toArray()),
+      const { adapter } = await this.setup(opts)
+      const features = await updateStatus(
+        'Downloading alignments',
+        statusCallback,
+        () => firstValueFrom(adapter.getFeatures(query).pipe(toArray())),
       )
 
-      for (const feature of features) {
-        const data = (feature.get('field5') as string).split(',')
-        const alignments = {} as Record<string, OrganismRecord>
-        const alns = data.map(elt => elt.split(':')[5])
+      await updateStatus('Processing alignments', statusCallback, () => {
+        let firstAssemblyNameFound = ''
+        const refAssemblyName = this.getConf('refAssemblyName')
+        for (const feature of features) {
+          const data = (feature.get('field5') as string).split(',')
+          const alignments = {} as Record<string, OrganismRecord>
 
-        for (const [j, elt] of data.entries()) {
-          const ad = elt.split(':')
-          const idx = ad[0]!.lastIndexOf('.')
-          const org = ad[0]!.slice(0, idx)
-          const last = ad[0]!.slice(idx + 1)
-          if (org) {
-            alignments[org] = {
-              chr: last,
-              start: +ad[1]!,
-              srcSize: +ad[2]!,
-              strand: ad[3] === '-' ? -1 : 1,
-              unknown: +ad[4]!,
-              data: alns[j]!,
+          for (let j = 0; j < data.length; j++) {
+            const elt = data[j]!
+            const seq = elt.split(':')[5]!
+            const ad = elt.split(':')
+            const ag = ad[0]!.split('.')
+            const [n1, n2 = '', ...rest] = ag
+            let assemblyName
+            let last = ''
+            if (ag.length === 2) {
+              assemblyName = n1
+              last = n2!
+            } else if (!Number.isNaN(+n2)) {
+              assemblyName = `${n1}.${n2}`
+              last = rest.join('.')
+            } else {
+              assemblyName = n1
+              last = [n2, ...rest].join('.')
+            }
+            if (assemblyName) {
+              firstAssemblyNameFound = firstAssemblyNameFound || assemblyName
+              alignments[assemblyName] = {
+                chr: last,
+                start: +ad[1]!,
+                srcSize: +ad[2]!,
+                strand: ad[3] === '-' ? -1 : 1,
+                unknown: +ad[4]!,
+                data: seq,
+              }
             }
           }
-        }
 
-        observer.next(
-          new SimpleFeature({
-            id: feature.id(),
-            data: {
-              start: feature.get('start'),
-              end: feature.get('end'),
-              refName: feature.get('refName'),
-              name: feature.get('name'),
-              score: feature.get('score'),
+          console.log(
+            {
               alignments,
-              seq: alns[0],
+              firstAssemblyNameFound,
+              refAssemblyName,
+              q: query.assemblyName,
             },
-          }),
-        )
-      }
+            alignments[refAssemblyName],
+            alignments[query.assemblyName],
+            alignments[firstAssemblyNameFound],
+          )
+          observer.next(
+            new SimpleFeature({
+              id: feature.id(),
+              data: {
+                start: feature.get('start'),
+                end: feature.get('end'),
+                refName: feature.get('refName'),
+                name: feature.get('name'),
+                score: feature.get('score'),
+                alignments,
+                seq:
+                  alignments[refAssemblyName || query.assemblyName]?.data ||
+                  alignments[firstAssemblyNameFound]?.data,
+              },
+            }),
+          )
+        }
+      })
       observer.complete()
     })
   }