Use Vega SVG renderer to drop canvas dependency (jupyterlab#12785)

* Use SVG renderer in Vega to drop canvas dependency
Fixes jupyterlab#12726

* Fix tests

* Update Playwright Snapshots

* Rename variables

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.github/workflows/benchmark.yml

@@ -185,7 +185,7 @@ jobs:
         run: |
           # Publish image to cml.dev
           echo "" >> ${REPORT}
-          cml-publish ./benchmark-results/lab-benchmark.png --md >> ${REPORT}
+          cml-publish ./benchmark-results/lab-benchmark.svg --md >> ${REPORT}
           echo "" >> ${REPORT}
 
           # Test if metadata have changed

.pre-commit-config.yaml

@@ -11,6 +11,7 @@ repos:
     hooks:
       - id: forbid-new-submodules
       - id: end-of-file-fixer
+        exclude: galata/.*-snapshots
       - id: check-case-conflict
       - id: check-executables-have-shebangs
       - id: requirements-txt-fixer

galata/README.md

@@ -411,8 +411,8 @@ A special report will be generated in the folder `benchmark-results` that will c
 
 - `lab-benchmark.json`: The execution time of the tests and some metadata.
 - `lab-benchmark.md`: A report in Markdown
-- `lab-benchmark.png`: A comparison of execution time distribution
-- `lab-benchmark.vl.json`: The [_Vega-Lite_](https://vega.github.io/vega-lite) description used to produce the PNG file.
+- `lab-benchmark.svg`: A comparison of execution time distribution
+- `lab-benchmark.vl.json`: The [_Vega-Lite_](https://vega.github.io/vega-lite) description used to produce the figure.
 
 The reference, tagged _expected_, is stored in `lab-benchmark-expected.json`. It can be
 created using the `-u` option of Playwright; i.e. `jlpm run test:benchmark -u`.

galata/package.json

@@ -59,7 +59,6 @@
     "@lumino/coreutils": "^1.12.0",
     "@playwright/test": "^1.17.0",
     "@stdlib/stats": "~0.0.13",
-    "canvas": "^2.9.1",
     "fs-extra": "^9.0.1",
     "http-server": "^13.0.0",
     "json5": "^2.1.1",

galata/src/benchmarkReporter.ts

@@ -9,7 +9,6 @@ import {
   TestResult
 } from '@playwright/test/reporter';
 import { dists, meanpw, variancepn } from '@stdlib/stats/base';
-import * as canvas from 'canvas';
 import fs from 'fs';
 import path from 'path';
 import si from 'systeminformation';
@@ -466,25 +465,11 @@ class BenchmarkReporter implements Reporter {
       const vegaSpec = vl.compile(config as any).spec;
 
       const view = new vega.View(vega.parse(vegaSpec), {
-        renderer: 'canvas'
+        renderer: 'svg'
       }).initialize();
-      const canvas = (await view.toCanvas()) as any as canvas.Canvas;
-      const graphFile = path.resolve(outputDir, `${baseName}.png`);
-      const fileStream = fs.createWriteStream(graphFile);
-
-      // Wait for pipe operation to finish
-      let resolver: (v: unknown) => void;
-      const waitForPipe = new Promise(resolve => {
-        resolver = resolve;
-      });
-      fileStream.once('finish', () => {
-        resolver(void 0);
-      });
-
-      const stream = canvas.createPNGStream();
-      stream.pipe(fileStream, {});
-
-      await waitForPipe;
+      const svgFigure = await view.toSVG();
+      const graphFile = path.resolve(outputDir, `${baseName}.svg`);
+      fs.writeFileSync(graphFile, svgFigure);
     } else {
       console.log(reportString);
     }

galata/test/galata/benchmarkReporter.spec.ts

@@ -40,6 +40,7 @@ function mockTestResult(
   }[]
 ): TestResult {
   return {
+    errors: [],
     retry: 0,
     workerIndex: 0,
     startTime: new Date(),
@@ -57,7 +58,7 @@ function createReporter(options?: {
   comparison?: 'snapshot' | 'project';
   vegaLiteConfigFactory?: (
     allData: Array<IReportRecord>,
-    comparison: 'snapshot' | 'project'
+    comparison?: 'snapshot' | 'project'
   ) => JSONObject;
   textReportFactory?: (
     allData: Array<IReportRecord>
@@ -94,9 +95,9 @@ test.describe('BenchmarkReporter', () => {
     const mdData = fs.readFileSync(outputMd, 'utf-8');
     expect(mdData).toContain('## Benchmark report');
 
-    const outputPng = path.resolve('.', `benchmark-results`, 'test.png');
-    const pngData = fs.readFileSync(outputPng);
-    expect(pngData).toMatchSnapshot('test.png');
+    const outputFigure = path.resolve('.', `benchmark-results`, 'test.svg');
+    const figureData = fs.readFileSync(outputFigure);
+    expect(figureData).toMatchSnapshot('test.svg');
   });
 
   test('should generate report with user defined builders', async () => {
@@ -111,9 +112,9 @@ test.describe('BenchmarkReporter', () => {
     const mdData = fs.readFileSync(outputMd, 'utf-8');
     expect(mdData).toContain('## This is a custom table');
 
-    const outputPng = path.resolve('.', 'benchmark-results', 'test.png');
-    const pngData = fs.readFileSync(outputPng);
-    expect(pngData).toMatchSnapshot('customized_test.png');
+    const outputFigure = path.resolve('.', 'benchmark-results', 'test.svg');
+    const figureData = fs.readFileSync(outputFigure);
+    expect(figureData).toMatchSnapshot('customized_test.svg');
   });
 });