Merge origin/main

package.json

@@ -94,6 +94,7 @@
     "@types/unzipper": "^0.10.3",
     "@typescript-eslint/parser": "^5.8.0",
     "babel-loader": "^8.2.5",
+    "canvas": "^2.9.1",
     "chai": "^4.3.4",
     "concurrently": "^7.2.1",
     "core-js": "^3.19.3",

packages/core/package.json

@@ -32,7 +32,6 @@
     "@babel/runtime": "^7.17.9",
     "@mui/icons-material": "^5.0.1",
     "abortable-promise-cache": "^1.5.0",
-    "canvas": "^2.8.0",
     "canvas-sequencer": "^3.1.0",
     "canvas2svg": "^1.0.16",
     "clone": "^2.1.2",

packages/core/util/offscreenCanvasPonyfill.tsx

@@ -25,10 +25,8 @@ export function drawImageOntoCanvasContext(
   if (imageData.serializedCommands) {
     const seq = new CanvasSequence(imageData.serializedCommands)
     seq.execute(context)
-  } else if (imageData instanceof ImageBitmapType) {
+  } else {
     context.drawImage(imageData as CanvasImageSource, 0, 0)
-  } else if (imageData.dataURL) {
-    throw new Error('dataURL deserialization no longer supported')
   }
 }
 
@@ -45,23 +43,27 @@ if (weHave.realOffscreenCanvas) {
   ImageBitmapType = window.ImageBitmap || self.ImageBitmap
 } else if (weHave.node) {
   // use node-canvas if we are running in node (i.e. automated tests)
-  const { createCanvas: nodeCreateCanvas, Image } = require('canvas')
-  createCanvas = nodeCreateCanvas
+  createCanvas = (...args) => {
+    // @ts-ignore
+    // eslint-disable-next-line no-undef
+    return nodeCreateCanvas(...args)
+  }
   createImageBitmap = async (canvas, ...otherargs) => {
     if (otherargs.length) {
       throw new Error(
         'only one-argument uses of createImageBitmap are supported by the node offscreencanvas ponyfill',
       )
     }
     const dataUri = canvas.toDataURL()
-    const img = new Image()
+    // @ts-ignore
+    // eslint-disable-next-line no-undef
+    const img = new nodeImage()
     return new Promise((resolve, reject) => {
       img.onload = () => resolve(img)
       img.onerror = reject
       img.src = dataUri
     })
   }
-  ImageBitmapType = Image
 } else {
   createCanvas = (width: number, height: number) => {
     const context = new CanvasSequence()

plugins/arc/src/ArcRenderer/configSchema.tsx

@@ -7,11 +7,13 @@ export default ConfigurationSchema(
       type: 'color',
       description: 'the color of the arcs',
       defaultValue: 'darkblue',
+      contextVariable: ['feature'],
     },
     thickness: {
       type: 'number',
       description: 'the thickness of the arcs',
       defaultValue: `jexl:logThickness(feature,'score')`,
+      contextVariable: ['feature'],
     },
     label: {
       type: 'string',
@@ -23,6 +25,7 @@ export default ConfigurationSchema(
       type: 'number',
       description: 'the height of the arcs',
       defaultValue: `jexl:log10(get(feature,'end')-get(feature,'start'))*50`,
+      contextVariable: ['feature'],
     },
     caption: {
       type: 'string',

plugins/wiggle/src/DensityRenderer/DensityRenderer.test.js

@@ -2,6 +2,11 @@ import SimpleFeature from '@jbrowse/core/util/simpleFeature'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
 import DensityRenderer, { configSchema, ReactComponent } from '.'
 
+import { Image, createCanvas } from 'canvas'
+
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
+
 const pluginManager = {}
 const renderer = new DensityRenderer({
   name: 'DensityRenderer',

plugins/wiggle/src/XYPlotRenderer/XYPlotRenderer.test.js

@@ -2,6 +2,11 @@ import SimpleFeature from '@jbrowse/core/util/simpleFeature'
 import { renderToAbstractCanvas } from '@jbrowse/core/util/offscreenCanvasUtils'
 import XYPlotRenderer, { configSchema, ReactComponent } from '.'
 
+import { Image, createCanvas } from 'canvas'
+
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
+
 test('several features', async () => {
   const pluginManager = {}
   const renderer = new XYPlotRenderer({

products/jbrowse-img/package.json

@@ -33,6 +33,7 @@
     "@jbrowse/react-linear-genome-view": "^1.7.10",
     "abortcontroller-polyfill": "^1.7.3",
     "jsdom": "^19.0.0",
+    "canvas": "^2.9.1",
     "mobx": "^6.6.0",
     "node-fetch": "^2.6.7",
     "react": "^18.2.0",

products/jbrowse-img/src/index.js

@@ -8,6 +8,10 @@ import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
 import { spawnSync } from 'child_process'
 import fetch, { Headers, Response, Request } from 'node-fetch'
 import { JSDOM } from 'jsdom'
+import { Image, createCanvas } from 'canvas'
+
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
 
 const { document } = new JSDOM(`...`).window
 global.document = document

products/jbrowse-img/src/index.testmod.js

@@ -2,10 +2,14 @@ import { renderRegion } from './renderRegion'
 import fs from 'fs'
 import { JSDOM } from 'jsdom'
 import 'abortcontroller-polyfill/dist/abortcontroller-polyfill-only'
+import { Image, createCanvas } from 'canvas'
 
 const { document } = new JSDOM(`...`).window
 global.document = document
 
+global.nodeImage = Image
+global.nodeCreateCanvas = createCanvas
+
 function hashCode(str) {
   let hash = 0
   let chr

products/jbrowse-web/src/tests/Loader.test.tsx

@@ -5,11 +5,17 @@ import { render, waitFor } from '@testing-library/react'
 import { TextEncoder, TextDecoder } from 'web-encoding'
 import { LocalFile } from 'generic-filehandle'
 import rangeParser from 'range-parser'
+import { Image, createCanvas } from 'canvas'
 
 import { QueryParamProvider } from 'use-query-params'
 
 import { Loader } from '../Loader'
 
+// @ts-ignore
+global.nodeImage = Image
+// @ts-ignore
+global.nodeCreateCanvas = createCanvas
+
 jest.mock('../makeWorkerInstance', () => () => {})
 
 const delay = { timeout: 20000 }

products/jbrowse-web/src/tests/util.tsx

@@ -12,8 +12,17 @@ import JBrowseWithoutQueryParamProvider from '../JBrowse'
 import JBrowseRootModelFactory from '../rootModel'
 import configSnapshot from '../../test_data/volvox/config.json'
 import corePlugins from '../corePlugins'
+
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Image, createCanvas } from 'canvas'
+
 jest.mock('../makeWorkerInstance', () => () => {})
 
+// @ts-ignore
+global.nodeImage = Image
+// @ts-ignore
+global.nodeCreateCanvas = createCanvas
+
 // @ts-ignore
 configSnapshot.configuration = {
   rpc: {

website/docs/introduction.md

@@ -7,8 +7,6 @@ toplevel: true
 
 Welcome to the JBrowse 2 documentation.
 
-Resources for desktop users
-
 - [Quick-start for JBrowse desktop](quickstart_desktop) - a quick-start guide
   to getting JBrowse desktop running on your machine
 - [Quick-start for JBrowse web](quickstart_web) - a quick-start guide to help

website/docs/user_guide.md

@@ -343,21 +343,21 @@ Note that you can disable these by clicking on the track menu (vertical ...
 next to track label, then hovering over SNPCoverage options, and unchecking
 "Draw insertion/clipping indicators" and "Draw insertion/clipping counts")
 
-## BigWig tracks
+## Quantitative tracks
 
 Visualizing genome signals, whether it is read depth-of-coverage or other
-signal, can often be done by using BigWig files
+signal, can often be done by using BigWig or other quantitative feature files
 
 <Figure caption="A simple wiggle track with the XY plot renderer" src="/img/bigwig_xyplot.png" />
 
-### Viewing whole-genome coverage for profiling CNV
+### Example use case: viewing whole-genome coverage for profiling CNV
 
-The latest jbrowse also allows refining the resolution of BigWig tracks, and
+The latest JBrowse also allows refining the resolution of BigWig tracks, and
 viewing whole genome coverage. This allows us to get detailed global views of
-CNV for example from whole-genome coverage profiling
+CNV for example from whole-genome coverage profiling.
 
 Here is a short picture guide to setup a whole-genome view of a BigWig for CNV
-coverage visualization
+coverage visualization:
 
 1. Open your BigWig track
 2. Go to the view menu and select "Show all assembly regions"
@@ -369,7 +369,7 @@ coverage visualization
    times until resolution looks nice
 
 Also note: all tracks have a drag handle on the bottom of it which you can drag
-down to make the track taller
+down to make the track taller.
 
 <Figure caption="A step-by-step guide to view a whole-genome CNV profile of coverage from a BigWig file" src="/img/bigwig/whole_genome_coverage.png" />
 
@@ -390,11 +390,11 @@ table can display the details
 
 <Figure caption="Screenshot showing the variant feature sidebar with a filtered by genotype (with alternative allele '1'). Users can also filter by sample name or other attributes" src="/img/variant_panel.png" />
 
-## Linear synteny and dotplot views
+## Comparative views
 
 The dotplot view is a 2D comparative view that can display alignments between
 different genome assemblies, or even compare a long-read or NGS short-read
-versus the genome
+against the genome.
 
 ### Opening a dotplot view
 
@@ -570,9 +570,10 @@ GUI, some plugins require hand editing of configuration files).
 
 ## Using the bookmark widget
 
-JBrowse Web and JBrowse Desktop by default come with a "bookmark widget"
+JBrowse Web and JBrowse Desktop come with a "bookmark widget" that you can use to store lists
+of interesting regions that would would like to easily revisit.
 
-<Figure caption="Clicking and dragging on a region can be used to create a bookmark that can be returned to later on" src="/img/bookmark_widget.png"/>
+<Figure caption="Clicking and dragging on a region can be used to create a bookmark" src="/img/bookmark_widget.png"/>
 
 The bookmark stores a list of single regions (chromosome, start, and end
 coordinate), and clicking on the regions in the bookmark widget will launch a

yarn.lock

@@ -7342,7 +7342,7 @@ canvas2svg@^1.0.16:
   resolved "https://registry.yarnpkg.com/canvas2svg/-/canvas2svg-1.0.16.tgz#0814c53bbab7c3406e7387279cdf257fe4f6f2bd"
   integrity sha512-r3ryHprzDOtAsFuczw+/DKkLR3XexwIlJWnJ+71I9QF7V9scYaV5JZgYDoCUlYtT3ARnOpDcm/hDNZYbWMRHqA==
 
-canvas@^2.8.0:
+canvas@^2.9.1:
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/canvas/-/canvas-2.9.1.tgz#58ec841cba36cef0675bc7a74ebd1561f0b476b0"
   integrity sha512-vSQti1uG/2gjv3x6QLOZw7TctfufaerTWbVe+NSduHxxLGB+qf3kFgQ6n66DSnuoINtVUjrLLIK2R+lxrBG07A==