From 4199f44efb6d9d9913632ce5365dee81549b7959 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Collonval?= <fcollonval@gmail.com>
Date: Fri, 8 Jul 2022 14:48:02 +0200
Subject: [PATCH] Use SVG renderer in Vega to drop canvas dependency Fixes
 #12726

---
 .github/workflows/benchmark.yml |  2 +-
 galata/README.md                |  4 ++--
 galata/package.json             |  1 -
 galata/src/benchmarkReporter.ts | 23 ++++-------------------
 4 files changed, 7 insertions(+), 23 deletions(-)

diff --git a/.github/workflows/benchmark.yml b/.github/workflows/benchmark.yml
index 141cc789dd0d..6e36b1e8fceb 100644
--- a/.github/workflows/benchmark.yml
+++ b/.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
diff --git a/galata/README.md b/galata/README.md
index 98c264678152..d7a7c0baf5aa 100644
--- a/galata/README.md
+++ b/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`.
diff --git a/galata/package.json b/galata/package.json
index e0aaeec855f6..5197299b35e2 100644
--- a/galata/package.json
+++ b/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",
diff --git a/galata/src/benchmarkReporter.ts b/galata/src/benchmarkReporter.ts
index 7b528eb74d85..c62359e36342 100644
--- a/galata/src/benchmarkReporter.ts
+++ b/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);
     }