Add canvas feature renderer

packages/core/util/Base1DUtils.ts

@@ -223,14 +223,12 @@ export function bpToPx({
     }
   }
   const found = displayedRegions[i]
-  if (found) {
-    return {
-      index: i,
-      offsetPx: Math.round(bpSoFar / bpPerPx),
-    }
-  }
-
-  return undefined
+  return found
+    ? {
+        index: i,
+        offsetPx: Math.round(bpSoFar / bpPerPx),
+      }
+    : undefined
 }
 
 export function bpToPxMap({
@@ -277,12 +275,10 @@ export function bpToPxMap({
     }
   }
   const found = displayedRegions[i]
-  if (found) {
-    return {
-      index: i,
-      offsetPx: Math.round(bpSoFar / bpPerPx),
-    }
-  }
-
-  return map
+  return found
+    ? {
+        index: i,
+        offsetPx: Math.round(bpSoFar / bpPerPx),
+      }
+    : map
 }

packages/core/util/compositeMap.ts

@@ -53,13 +53,13 @@ export default class CompositeMap<T, U> {
 
   *[Symbol.iterator]() {
     for (const key of this.keys()) {
-      yield [key, this.get(key)]
+      yield [key, this.get(key)] as const
     }
   }
 
   *entries() {
     for (const k of this.keys()) {
-      yield [k, this.get(k)]
+      yield [k, this.get(k)] as const
     }
   }
 }

packages/core/util/layouts/GranularRectLayout.ts

@@ -505,12 +505,13 @@ export default class GranularRectLayout<T> implements BaseLayout<T> {
   }
 
   getRectangles(): Map<string, RectTuple> {
+    // @ts-expect-error
     return new Map(
       [...this.rectangles.entries()].map(([id, rect]) => {
-        const { l, r, originalHeight, top } = rect
+        const { l, r, originalHeight, top, data } = rect
         const t = (top || 0) * this.pitchY
         const b = t + originalHeight
-        return [id, [l * this.pitchX, t, r * this.pitchX, b]] // left, top, right, bottom
+        return [id, [l * this.pitchX, t, r * this.pitchX, b, data]] // left, top, right, bottom
       }),
     )
   }
@@ -531,7 +532,8 @@ export default class GranularRectLayout<T> implements BaseLayout<T> {
         const x2 = region.end
         // add +/- pitchX to avoid resolution causing errors
         if (segmentsIntersect(x1, x2, y1 - this.pitchX, y2 + this.pitchX)) {
-          regionRectangles[id] = [y1, t, y2, b]
+          // @ts-expect-error
+          regionRectangles[id] = [y1, t, y2, b, rect.data]
         }
       }
     }

plugins/canvas/.babelrc

@@ -0,0 +1,9 @@
+{
+  "presets": [
+    // need this to be able to use spread operator on Set and Map
+    // see https://github.com/formium/tsdx/issues/376#issuecomment-566750042
+    ["@babel/preset-env", { "loose": false }],
+    // can remove this if all .js files are converted to .ts
+    "@babel/preset-react"
+  ]
+}

plugins/canvas/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@jbrowse/plugin-canvas",
+  "version": "2.16.0",
+  "description": "JBrowse 2 plugin for canvas features",
+  "keywords": [
+    "jbrowse",
+    "jbrowse2"
+  ],
+  "license": "Apache-2.0",
+  "homepage": "https://jbrowse.org",
+  "bugs": "https://github.com/GMOD/jbrowse-components/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GMOD/jbrowse-components.git",
+    "directory": "plugins/canvas"
+  },
+  "author": "JBrowse Team",
+  "distMain": "dist/index.js",
+  "distModule": "esm/index.js",
+  "srcMain": "src/index.ts",
+  "srcModule": "src/index.ts",
+  "main": "src/index.ts",
+  "files": [
+    "dist",
+    "esm"
+  ],
+  "scripts": {
+    "prebuild": "npm run clean",
+    "build": "npm-run-all build:*",
+    "build:esm": "tsc --build tsconfig.build.esm.json",
+    "build:commonjs": "tsc --build tsconfig.build.commonjs.json",
+    "clean": "rimraf dist esm *.tsbuildinfo",
+    "test": "cd ../..; jest --passWithNoTests plugins/linear-genome-view",
+    "prepublishOnly": "yarn test",
+    "prepack": "yarn build && yarn useDist",
+    "postpack": "yarn useSrc",
+    "useDist": "node ../../scripts/useDist.js",
+    "useSrc": "node ../../scripts/useSrc.js"
+  },
+  "peerDependencies": {
+    "@jbrowse/core": "^2.0.0",
+    "mobx-react": "^9.0.0",
+    "mobx-state-tree": "^5.0.0",
+    "react": ">=16.8.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

plugins/canvas/src/CanvasFeatureRenderer/CanvasFeatureRenderer.ts

@@ -0,0 +1,137 @@
+import BoxRendererType, {
+  RenderArgsDeserialized as BoxRenderArgsDeserialized,
+} from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'
+import { BaseLayout } from '@jbrowse/core/util/layouts/BaseLayout'
+import { iterMap, Feature, notEmpty } from '@jbrowse/core/util'
+import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
+
+// locals
+import BoxGlyph from './FeatureGlyphs/Box'
+import GeneGlyph from './FeatureGlyphs/Gene'
+import { LaidOutFeatureRect } from './FeatureGlyph'
+
+export interface PostDrawFeatureRectWithGlyph extends LaidOutFeatureRect {
+  glyph: BoxGlyph
+}
+
+export interface LaidOutFeatureRectWithGlyph extends LaidOutFeatureRect {
+  glyph: BoxGlyph
+}
+
+export interface RenderArgsDeserialized extends BoxRenderArgsDeserialized {
+  highResolutionScaling: number
+}
+
+export interface RenderArgsDeserializedWithFeaturesAndLayout
+  extends RenderArgsDeserialized {
+  features: Map<string, Feature>
+  layout: BaseLayout<Feature>
+  regionSequence?: string
+  width: number
+  height: number
+}
+
+export default class CanvasRenderer extends BoxRendererType {
+  supportsSVG = true
+
+  layoutFeature(
+    feature: Feature,
+    layout: BaseLayout<Feature>,
+    props: RenderArgsDeserialized,
+  ): LaidOutFeatureRectWithGlyph | null {
+    const region = props.regions[0]!
+    const glyph =
+      feature.get('type') === 'gene' ? new GeneGlyph() : new BoxGlyph()
+    const fRect = glyph.layoutFeature(
+      {
+        region,
+        ...props,
+      },
+      layout,
+      feature,
+    )
+    return fRect
+      ? {
+          ...fRect,
+          glyph,
+        }
+      : null
+  }
+
+  drawRect(
+    ctx: CanvasRenderingContext2D,
+    fRect: LaidOutFeatureRectWithGlyph,
+    props: RenderArgsDeserialized,
+  ) {
+    const { regions } = props
+    const region = regions[0]!
+    fRect.glyph.renderFeature(ctx, { ...props, region }, fRect)
+  }
+
+  async makeImageData(
+    ctx: CanvasRenderingContext2D,
+    layoutRecords: LaidOutFeatureRectWithGlyph[],
+    props: RenderArgsDeserializedWithFeaturesAndLayout,
+  ) {
+    for (const fRect of layoutRecords) {
+      this.drawRect(ctx, fRect, props)
+    }
+
+    return undefined
+  }
+
+  async render(renderProps: RenderArgsDeserialized) {
+    const { bpPerPx, regions } = renderProps
+    const features = await this.getFeatures(renderProps)
+    const layout = this.createLayoutInWorker(renderProps)
+    const region = regions[0]!
+    const featureMap = features
+
+    const layoutRecords = iterMap(
+      featureMap.values(),
+      feature => this.layoutFeature(feature, layout, renderProps),
+      featureMap.size,
+    ).filter(notEmpty)
+
+    const width = (region.end - region.start) / bpPerPx
+    const height = Math.max(layout.getTotalHeight(), 1)
+
+    const res = await renderToAbstractCanvas(width, height, renderProps, ctx =>
+      this.makeImageData(ctx, layoutRecords, {
+        ...renderProps,
+        layout,
+        features,
+        width,
+        height,
+      }),
+    )
+
+    const results = await super.render({
+      ...renderProps,
+      ...res,
+      layoutRecords,
+      features,
+      layout,
+      height,
+      width,
+    })
+
+    return {
+      ...results,
+      ...res,
+      features,
+      layout,
+      height,
+      width,
+      maxHeightReached: layout.maxHeightReached,
+    }
+  }
+}
+
+export {
+  type RenderArgs,
+  type RenderArgsSerialized,
+  type RenderResults,
+  type ResultsSerialized,
+  type ResultsDeserialized,
+} from '@jbrowse/core/pluggableElementTypes/renderers/BoxRendererType'

plugins/canvas/src/CanvasFeatureRenderer/FeatureGlyph.ts

@@ -0,0 +1,101 @@
+import {
+  readConfObject,
+  AnyConfigurationModel,
+} from '@jbrowse/core/configuration'
+import { bpSpanPx, Feature } from '@jbrowse/core/util'
+import { Region } from '@jbrowse/core/util/types'
+import { BaseLayout } from '@jbrowse/core/util/layouts/BaseLayout'
+
+export interface ViewInfo {
+  bpPerPx: number
+  region: Region
+  config: AnyConfigurationModel
+}
+
+export interface FeatureRect {
+  l: number
+  w: number
+  f: Feature
+}
+
+export interface PreLaidOutFeatureRect {
+  l: number
+  w: number
+  f: Feature
+  h: number
+  t: number
+}
+
+export interface LaidOutFeatureRect extends FeatureRect {
+  label?: {
+    text: string
+    offsetY: number
+  }
+  description?: {
+    text: string
+    offsetY: number
+  }
+  t: number
+  h: number
+  rect: any
+}
+
+export interface Rect {
+  l: number
+  t: number
+  w: number
+}
+
+export default abstract class FeatureGlyph {
+  layoutFeature(
+    viewArgs: ViewInfo,
+    layout: BaseLayout<Feature>,
+    feature: Feature,
+  ) {
+    const fRect = this.getFeatureRectangle(viewArgs, feature)
+
+    const { region, bpPerPx } = viewArgs
+    const scale = 1 / bpPerPx
+    const leftBase = region.start
+    const startbp = fRect.l / scale + leftBase
+    const endbp = (fRect.l + fRect.w) / scale + leftBase
+    const top = layout.addRect(feature.id(), startbp, endbp, fRect.h, {
+      label: feature.get('name') || feature.get('id'),
+      refName: feature.get('refName'),
+    })
+
+    return top === null
+      ? null
+      : {
+          ...fRect,
+          f: feature,
+          t: top,
+        }
+  }
+
+  abstract renderFeature(
+    context: CanvasRenderingContext2D,
+    viewInfo: ViewInfo,
+    fRect: LaidOutFeatureRect,
+  ): void
+
+  getFeatureRectangle(viewInfo: ViewInfo, feature: Feature) {
+    const { region, bpPerPx } = viewInfo
+    const s = feature.get('start')
+    const e = feature.get('end')
+    const [leftPx, rightPx] = bpSpanPx(s, e, region, bpPerPx)
+
+    return {
+      l: leftPx,
+      w: rightPx - leftPx,
+      h: this.getFeatureHeight(viewInfo, feature),
+      f: feature,
+      t: 0,
+      rect: undefined as Rect | undefined,
+    }
+  }
+
+  getFeatureHeight(viewInfo: ViewInfo, feature: Feature) {
+    return readConfObject(viewInfo.config, 'height', { feature }) as number
+  }
+}