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.15.4",
+ "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
+ }
+}