jbrowse-plugin-mafviewer 1.1.4 → 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%',