jbrowse-plugin-graphgenomeviewer 1.0.0 → 3.0.3

package/src/GraphGenomeView/renderer/Canvas2DRenderer.test.ts

@@ -0,0 +1,205 @@
+import { Canvas2DRenderer } from './Canvas2DRenderer'
+import { buildGeometry } from './GeometryBuilder'
+import { recordingCanvas } from './recordingCanvas'
+
+import type { TransformUniform } from './types'
+
+// isotropic: one scale for both axes, which is every layout but the row ones
+const iso = (scale = 1) => ({ scaleX: scale, scaleY: scale })
+
+function makeRenderer() {
+  const { canvas, strokes, fills, lineWidths, points } = recordingCanvas()
+  return {
+    renderer: new Canvas2DRenderer(canvas),
+    strokes,
+    fills,
+    lineWidths,
+    points,
+  }
+}
+
+const TRANSFORM: TransformUniform = {
+  scaleX: 1,
+  scaleY: 1,
+  translateX: 0,
+  translateY: 0,
+  dpr: 1,
+}
+
+// three nodes in a row wired A -> B -> C, so edge 0 and edge 1 are distinct
+// strokes and a highlight on one must not touch the other
+const nodes = [
+  { id: 'A+', name: 'A', length: 10, depth: 1 },
+  { id: 'B+', name: 'B', length: 10, depth: 1 },
+  { id: 'C+', name: 'C', length: 10, depth: 1 },
+]
+
+function batchOf2Edges() {
+  return buildGeometry({
+    nodePositions: {
+      'A+': [
+        { x: 0, y: 0 },
+        { x: 10, y: 0 },
+      ],
+      'B+': [
+        { x: 40, y: 0 },
+        { x: 50, y: 0 },
+      ],
+      'C+': [
+        { x: 80, y: 0 },
+        { x: 90, y: 0 },
+      ],
+    },
+    graph: {
+      name: 'test',
+      nodes,
+      edges: [
+        { from: 'A+', to: 'B+' },
+        { from: 'B+', to: 'C+' },
+      ],
+    },
+    nodeById: new Map(nodes.map(n => [n.id, n])),
+    colorScheme: 'uniform',
+    contigThickness: 10,
+    connectorThickness: 4,
+    drawPaths: false,
+    axis: iso(),
+  })
+}
+
+function channels(rgba: string) {
+  const m = /rgba\((\d+),(\d+),(\d+)/.exec(rgba)
+  return [Number(m?.[1]), Number(m?.[2]), Number(m?.[3])]
+}
+
+function expectBrighter(a: string, b: string) {
+  const [r, g, bl] = channels(a)
+  const [br, bg, bb] = channels(b)
+  expect(r).toBeGreaterThan(br!)
+  expect(g).toBeGreaterThan(bg!)
+  expect(bl).toBeGreaterThan(bb!)
+}
+
+// Two edges of one colour and weight, three nodes of one colour: a drawing is
+// mostly runs of one paint, and each run is one path. This is the whole
+// performance story of the renderer, so it is pinned exactly.
+test('strokes every edge of one paint as one path, and every node likewise', () => {
+  const { renderer, strokes } = makeRenderer()
+  renderer.uploadGeometry(batchOf2Edges())
+  renderer.updateTransform(TRANSFORM)
+  renderer.render([1, 1, 1, 1])
+
+  expect(strokes).toHaveLength(2)
+})
+
+test('a highlighted edge is stroked brighter, apart from its neighbour', () => {
+  const { renderer, strokes } = makeRenderer()
+  renderer.uploadGeometry(batchOf2Edges())
+  renderer.updateTransform(TRANSFORM)
+  renderer.render([1, 1, 1, 1])
+  const [edges, nodeStroke] = strokes as [string, string]
+
+  strokes.length = 0
+  renderer.setEdgeHighlight(1, 1.6)
+  renderer.render([1, 1, 1, 1])
+
+  // edge 0 in its own path, then the nodes, then edge 1 on top of everything
+  expect(strokes).toEqual([edges, expect.any(String), nodeStroke])
+  expect(strokes[1]).not.toBe(edges)
+  expectBrighter(strokes[1]!, edges)
+})
+
+test('clearing the highlight restores the base stroke', () => {
+  const { renderer, strokes } = makeRenderer()
+  renderer.uploadGeometry(batchOf2Edges())
+  renderer.updateTransform(TRANSFORM)
+  renderer.setEdgeHighlight(0, 1.6)
+  renderer.render([1, 1, 1, 1])
+  expect(strokes).toHaveLength(3)
+
+  strokes.length = 0
+  renderer.setEdgeHighlight(null, 1.6)
+  renderer.render([1, 1, 1, 1])
+
+  expect(strokes).toHaveLength(2)
+})
+
+// A rebuild renumbers the strokes, so an edge captured against the old batch
+// could brighten an unrelated one. The model re-applies the current hover after
+// every upload; the renderer's job is not to keep pointing at a stale run.
+test('uploading a new batch drops the previous edge highlight', () => {
+  const { renderer, strokes } = makeRenderer()
+  renderer.uploadGeometry(batchOf2Edges())
+  renderer.updateTransform(TRANSFORM)
+  renderer.setEdgeHighlight(1, 1.6)
+  renderer.render([1, 1, 1, 1])
+  expect(strokes).toHaveLength(3)
+
+  strokes.length = 0
+  renderer.uploadGeometry(batchOf2Edges())
+  renderer.render([1, 1, 1, 1])
+
+  expect(strokes).toHaveLength(2)
+})
+
+// Node highlights are keyed by id rather than by position in the batch, so
+// they survive a rebuild on their own and the hovered node lands on top.
+test('a highlighted node is stroked brighter, last, and survives a rebuild', () => {
+  const { renderer, strokes } = makeRenderer()
+  renderer.uploadGeometry(batchOf2Edges())
+  renderer.updateTransform(TRANSFORM)
+  renderer.render([1, 1, 1, 1])
+  const nodeStroke = strokes[1]!
+
+  strokes.length = 0
+  renderer.setNodeHighlights(new Map([['B+', 1.4]]))
+  renderer.render([1, 1, 1, 1])
+  expect(strokes).toHaveLength(3)
+  expect(strokes[1]).toBe(nodeStroke)
+  expectBrighter(strokes[2]!, nodeStroke)
+
+  strokes.length = 0
+  renderer.uploadGeometry(batchOf2Edges())
+  renderer.render([1, 1, 1, 1])
+  expect(strokes).toHaveLength(3)
+})
+
+// A thickness is quoted in CSS pixels and expanded AFTER the transform, so it
+// is the one term the dpr-scaled transform does not reach. Left alone, every
+// tube, connector and arrowhead came out 1/dpr of its weight on a hidpi
+// display, with the positions between them correct.
+//
+// Asserted as "twice the backing-store pixels at twice the ratio", which is the
+// same drawing in css px. The whole point is that a figure does not change
+// weight with the machine it is opened on.
+describe('a thickness is css pixels, whatever the device ratio', () => {
+  function drawn(dpr: number) {
+    const { renderer, points, lineWidths } = makeRenderer()
+    renderer.uploadGeometry(batchOf2Edges())
+    renderer.updateTransform({ ...TRANSFORM, scaleX: dpr, scaleY: dpr, dpr })
+    renderer.render([1, 1, 1, 1])
+    const xs = points.map(p => p.x)
+    return {
+      spanPx: Math.max(...xs) - Math.min(...xs),
+      edgeWidth: lineWidths[0]!,
+      nodeWidth: lineWidths[1]!,
+    }
+  }
+
+  test('positions go through the transform', () => {
+    // three 10-unit nodes over a 90-unit span
+    expect(drawn(1).spanPx).toBeCloseTo(90, 5)
+    expect(drawn(2).spanPx).toBeCloseTo(180, 5)
+  })
+
+  test('a node stroke scales its width with the ratio', () => {
+    expect(drawn(1).nodeWidth).toBeCloseTo(10, 5)
+    expect(drawn(2).nodeWidth).toBeCloseTo(20, 5)
+  })
+
+  test('an edge stroke scales its width with the ratio', () => {
+    // connectorThickness 4 is a half-width of 2, so a 4 px stroke at ratio 1
+    expect(drawn(1).edgeWidth).toBeCloseTo(4, 5)
+    expect(drawn(2).edgeWidth).toBeCloseTo(8, 5)
+  })
+})

package/src/GraphGenomeView/renderer/Canvas2DRenderer.ts

@@ -0,0 +1,246 @@
+import {
+  abgrToCssRgba,
+  normalizedRgbToCssRgba,
+} from '@jbrowse/core/util/colorBits'
+import { syncCanvasSize } from '@jbrowse/render-core/canvas2dUtils'
+import { Canvas2DRenderingBackendBase } from '@jbrowse/render-core/renderingBackendBase'
+
+import { brightenAbgr } from './colorBits'
+
+import type { RenderBatch, Renderer, TransformUniform } from './types'
+
+// Everything is drawn as a handful of paths, one per distinct (colour, weight),
+// rather than one path per thing. A drawing is mostly runs of one colour, and
+// Canvas2D's cost is per path verb and per fill or stroke, not per pixel: the
+// same 15k-node graph took 414 ms a frame as one fill per mesh triangle and 11
+// ms as batched strokes (agent-docs/GRAPH_SCALE_AND_LOD.md). Highlighted things
+// are drawn last, in their own paths, so they sit on top of what they brighten.
+//
+// Extends the shared Canvas2D base rather than standing alone, which is how
+// `setErrorHandler` arrives — `useRenderingBackend` requires it. The base's
+// no-op implementation is the correct one here: Canvas2D allocates no GPU
+// resources, so there is no OOM channel to forward.
+export class Canvas2DRenderer
+  extends Canvas2DRenderingBackendBase
+  implements Renderer
+{
+  private transform: TransformUniform | null = null
+  private batch: RenderBatch | null = null
+  private nodeHighlights: ReadonlyMap<string, number> = new Map()
+  private highlightedEdge: number | null = null
+  private highlightFactor = 1
+
+  // render-core's, not a local `width * devicePixelRatio`: it clamps the
+  // backing store at MAX_CANVAS_DIM_PX, reads the ratio through `getDpr()` so
+  // this agrees with the transform the model builds, and writes the css size
+  // independently of the backing size.
+  resize(width: number, height: number) {
+    syncCanvasSize(this.ctx.canvas, width, height)
+  }
+
+  uploadGeometry(batch: RenderBatch) {
+    this.batch = batch
+    // A rebuild renumbers the strokes, so the old edge no longer addresses the
+    // same run; the model re-applies the current hover against the new batch.
+    this.highlightedEdge = null
+  }
+
+  setNodeHighlights(factors: ReadonlyMap<string, number>) {
+    this.nodeHighlights = factors
+  }
+
+  setEdgeHighlight(edgeIndex: number | null, factor: number) {
+    this.highlightedEdge = edgeIndex
+    this.highlightFactor = factor
+  }
+
+  updateTransform(transform: TransformUniform) {
+    this.transform = transform
+  }
+
+  render(clearColor: [number, number, number, number]) {
+    const t = this.transform
+    if (!t) {
+      return
+    }
+    const ctx = this.ctx
+    const { width, height } = ctx.canvas
+
+    ctx.fillStyle = normalizedRgbToCssRgba(
+      [clearColor[0], clearColor[1], clearColor[2]],
+      clearColor[3],
+    )
+    ctx.fillRect(0, 0, width, height)
+
+    const batch = this.batch
+    if (!batch) {
+      return
+    }
+    ctx.lineCap = 'round'
+    ctx.lineJoin = 'round'
+    this.renderEdges(batch)
+    this.renderNodes(batch)
+    this.renderArrows(batch)
+  }
+
+  private renderEdges(batch: RenderBatch) {
+    const t = this.transform!
+    const ctx = this.ctx
+    const hl =
+      this.highlightedEdge === null
+        ? undefined
+        : batch.edgeCurveRuns.get(this.highlightedEdge)
+    for (const { color, items } of groupByPaint(batch.edgeCurves, (e, i) => ({
+      color: inRun(hl, i)
+        ? brightenAbgr(e.color, this.highlightFactor)
+        : e.color,
+      weight: e.thickness,
+      last: inRun(hl, i),
+    }))) {
+      ctx.strokeStyle = abgrToCssRgba(color)
+      // thickness is the half-width in css px, so the stroke is twice it at
+      // the device ratio the transform already carries
+      ctx.lineWidth = items[0]!.thickness * 2 * t.dpr
+      ctx.beginPath()
+      for (const e of items) {
+        const first = e.curves[0]!
+        ctx.moveTo(
+          first.x0 * t.scaleX + t.translateX,
+          first.y0 * t.scaleY + t.translateY,
+        )
+        for (const c of e.curves) {
+          ctx.bezierCurveTo(
+            c.cx0 * t.scaleX + t.translateX,
+            c.cy0 * t.scaleY + t.translateY,
+            c.cx1 * t.scaleX + t.translateX,
+            c.cy1 * t.scaleY + t.translateY,
+            c.x1 * t.scaleX + t.translateX,
+            c.y1 * t.scaleY + t.translateY,
+          )
+        }
+      }
+      ctx.stroke()
+    }
+  }
+
+  private renderNodes(batch: RenderBatch) {
+    const t = this.transform!
+    const ctx = this.ctx
+    // stroke index -> brighten factor, for the nodes the model lifted
+    const lifted = new Map<number, number>()
+    for (const [nodeId, factor] of this.nodeHighlights) {
+      const run = batch.nodeStrokeRuns.get(nodeId)
+      if (run) {
+        for (let i = run.start; i < run.start + run.count; i++) {
+          lifted.set(i, factor)
+        }
+      }
+    }
+    for (const { color, items } of groupByPaint(batch.nodeStrokes, (s, i) => {
+      const factor = lifted.get(i)
+      return {
+        color: factor === undefined ? s.color : brightenAbgr(s.color, factor),
+        weight: s.thickness,
+        last: factor !== undefined,
+      }
+    })) {
+      ctx.strokeStyle = abgrToCssRgba(color)
+      ctx.lineWidth = items[0]!.thickness * 2 * t.dpr
+      ctx.beginPath()
+      for (const s of items) {
+        const p0 = s.points[0]!
+        ctx.moveTo(
+          p0.x * t.scaleX + t.translateX,
+          p0.y * t.scaleY + t.translateY,
+        )
+        for (let i = 1, l = s.points.length; i < l; i++) {
+          const p = s.points[i]!
+          ctx.lineTo(
+            p.x * t.scaleX + t.translateX,
+            p.y * t.scaleY + t.translateY,
+          )
+        }
+      }
+      ctx.stroke()
+    }
+  }
+
+  private renderArrows(batch: RenderBatch) {
+    const t = this.transform!
+    const ctx = this.ctx
+    const hl =
+      this.highlightedEdge === null
+        ? undefined
+        : batch.arrowRuns.get(this.highlightedEdge)
+    for (const { color, items } of groupByPaint(batch.arrows, (a, i) => ({
+      color: inRun(hl, i)
+        ? brightenAbgr(a.color, this.highlightFactor)
+        : a.color,
+      weight: 0,
+      last: inRun(hl, i),
+    }))) {
+      ctx.fillStyle = abgrToCssRgba(color)
+      ctx.beginPath()
+      for (const a of items) {
+        // The tip sits on the edge's end; the two barbs are `size` css px back
+        // along either side of the tangent, expanded after the transform so
+        // the head is the same size at every zoom.
+        const tipX = a.x * t.scaleX + t.translateX
+        const tipY = a.y * t.scaleY + t.translateY
+        const reach = a.size * t.dpr
+        ctx.moveTo(tipX, tipY)
+        ctx.lineTo(
+          tipX - Math.cos(a.angle - 0.5) * reach,
+          tipY - Math.sin(a.angle - 0.5) * reach,
+        )
+        ctx.lineTo(
+          tipX - Math.cos(a.angle + 0.5) * reach,
+          tipY - Math.sin(a.angle + 0.5) * reach,
+        )
+        ctx.closePath()
+      }
+      ctx.fill()
+    }
+  }
+
+  override dispose() {
+    super.dispose()
+    this.batch = null
+    this.nodeHighlights = new Map()
+    this.highlightedEdge = null
+  }
+}
+
+function inRun(run: { start: number; count: number } | undefined, i: number) {
+  return run !== undefined && i >= run.start && i < run.start + run.count
+}
+
+interface Paint {
+  color: number
+  weight: number
+  // drawn after everything else, so a highlight lands on top of its neighbours
+  last: boolean
+}
+
+// Items bucketed by what they are painted with, in first-seen order, with the
+// `last` ones after the rest.
+function groupByPaint<T>(
+  items: T[],
+  paintOf: (item: T, index: number) => Paint,
+) {
+  const groups = new Map<string, { color: number; items: T[] }>()
+  const deferred = new Map<string, { color: number; items: T[] }>()
+  for (let i = 0, l = items.length; i < l; i++) {
+    const item = items[i]!
+    const { color, weight, last } = paintOf(item, i)
+    const into = last ? deferred : groups
+    const key = `${color}:${weight}`
+    const group = into.get(key)
+    if (group) {
+      group.items.push(item)
+    } else {
+      into.set(key, { color, items: [item] })
+    }
+  }
+  return [...groups.values(), ...deferred.values()]
+}