From 2bd99333aefdc43a442ebe84b4b23d3ac01a011a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fr=C3=A9d=C3=A9ric=20Collonval?= Date: Mon, 18 Jul 2022 08:53:44 +0200 Subject: [PATCH] Use Vega SVG renderer to drop canvas dependency (#12785) * Use SVG renderer in Vega to drop canvas dependency Fixes #12726 * Fix tests * Update Playwright Snapshots * Rename variables Co-authored-by: github-actions[bot] --- .github/workflows/benchmark.yml | 2 +- .pre-commit-config.yaml | 1 + galata/README.md | 4 +-- galata/package.json | 1 - galata/src/benchmarkReporter.ts | 23 +++--------------- galata/test/galata/benchmarkReporter.spec.ts | 15 ++++++------ .../customized-test-galata-linux.png | Bin 1322 -> 0 bytes .../customized-test-galata-linux.svg | 1 + .../test-galata-linux.png | Bin 3297 -> 0 bytes .../test-galata-linux.svg | 1 + 10 files changed, 18 insertions(+), 30 deletions(-) delete mode 100644 galata/test/galata/benchmarkReporter.spec.ts-snapshots/customized-test-galata-linux.png create mode 100644 galata/test/galata/benchmarkReporter.spec.ts-snapshots/customized-test-galata-linux.svg delete mode 100644 galata/test/galata/benchmarkReporter.spec.ts-snapshots/test-galata-linux.png create mode 100644 galata/test/galata/benchmarkReporter.spec.ts-snapshots/test-galata-linux.svg 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/.pre-commit-config.yaml b/.pre-commit-config.yaml index b5c5e3ab80e6..aba329968a82 100644 --- a/.pre-commit-config.yaml +++ b/.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 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); } diff --git a/galata/test/galata/benchmarkReporter.spec.ts b/galata/test/galata/benchmarkReporter.spec.ts index 87fccca338d3..2f4b46e877f6 100644 --- a/galata/test/galata/benchmarkReporter.spec.ts +++ b/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, - comparison: 'snapshot' | 'project' + comparison?: 'snapshot' | 'project' ) => JSONObject; textReportFactory?: ( allData: Array @@ -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'); }); }); diff --git a/galata/test/galata/benchmarkReporter.spec.ts-snapshots/customized-test-galata-linux.png b/galata/test/galata/benchmarkReporter.spec.ts-snapshots/customized-test-galata-linux.png deleted file mode 100644 index 70c9ae496a6e82e067f195d1037606c3aba622eb..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1322 zcmV+_1=aeAP)ecAt50mA|fLrBPAszCMG5)CnqQ@~D=RE4EG;c9E-o%GFfcMQGBYzXHa0dlH#ayqI5{~vJ3Bi(JUl%;Jw84@KR-V} zKtMx7Lq$bJMn*RaI41R#sP6S6EnBSy@?ITU%UQ zTwPsVUS3{cU|?ZkVPaxpV`F1wWo2e&W@u<=X=!O{YHDk1Yiw+6ZfQ zb#--jcXxPrczb($e0+R;eSLm@eu063f`WpCgoKBOhlq%Xi;Ihmjg5|uj*pLzl9G~? zl$4g1mYA5BnVFfInwp!No1C1Sot>SYo}QndpQ56oqobpwq@<>%rl+T;tE;Q5tgNoC zuCK4Ju&}VQva++Yv$V9dwY9ajwzjvox4XN$yu7@lz;=;`U{>+9?6 z?CkCB?e6aG@bK{Q@$vKX^Yrxe_4W1l_xJet`1$$y`uh6){r&#_{{R2~jWkmS00001 zVoOIvtH}XpC;$Kg)Ja4^RA}Dq*7;jZQ5**FH#1EQZMx;kGDWme3X_OPRMMU;l?IWm zvfRinTPRDCY)O%s@&1#37-#Oxn0xD&=;=A@jraeSd1@aBE9(*Nz#*r z*vhgz{fr7MJ5(erF9M!0cxRAH(LjWmH5o+G@wSrsaJVzTCtC1O;7UnO^VdWL_KKH5 zh4vT`?>PtzQN>Y?0k27t`uG6K{=_~7hDdk7nSutM1Kuzbry0C6$n`f6VP;JRkaF?G zRJhlYHNGeJfTKQK7wK(T5dpv%5ZR3wavJEPimRLio{=Q=v5xD8J>*Qm6<&v(EI=!R zcLurs1|rO?iMJ*au(gK4^;xlpj6*N)_;4C|8}_b8#c-0lQ0u>6V;u6`FO5^8ggy>> zaxY0wz?lM#HxTc~1?&uR{S8EzSradRzUlzJ8GTz8BJJ2RKduke-fHM=EL9X6FgqbvXw=LP4 zuw_90{gOC|lQ@Z!xPOP+8D@=0oWx0-#7UgQNu0z \ No newline at end of file diff --git a/galata/test/galata/benchmarkReporter.spec.ts-snapshots/test-galata-linux.png b/galata/test/galata/benchmarkReporter.spec.ts-snapshots/test-galata-linux.png deleted file mode 100644 index d6178ad5b0d3b937f9d57e9e6b641e4db89d19de..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 3297 zcmY*ccQ_kt_YV5ndxa`drKk#Olv1q>aj*>lV9e5nsF|W>wsILvO~(U7 z)g*wCFt?hM={>9~+v|eLt81&z@d`c39?Aoqc(q=r$^wjKpFLzV1g9~OMl~@QwRLs- zpPD{lwnOve?tPpKm=D(u7>Jbhb!Qf!}}@$j|=B9dwuNs zMg%z!7v!NNn`ZH<3B^Bg*U>Z4L8wsC=EpS~8WLkZbNbFXZBIVhF1?@230C{9DxW5* z`|754c%nVj?9q2*hZWIK597dxnPSY&;$r7jCa^UuJeA_%;UCy9X?lQaoo9$z*Xr(@)X;hPfB+|W?Kkk%z$Z>0^Yd~dehye9 zy!(!WFH(50gP~0D-nEVsOB+=#ghD)GG@Il7FR45#F~L_NC@!Ln8%OwwS@gHYa}g6^ zZ=*7kPWUYS4hQv1>I5C`8B)-njFAY?yGobEfJj;F?%rRB1m=(fMHMxYkBgxGF_Rofa-PNkJEdN#He1 zFAqteQnzP1fV^f2iKhD1!h2XaLL?s+s-PJ?XU>utzB;mrt=_Dun*klCSlx#_n+@%d z^t`U~Xw})|5yY3tv*y1Egl+DJZaJ)(eovc}nv1Z{+(37h=Fn`eVAr_)Hxxo{eI-4P zz7bh7oD$#w%rJ@SJ_F8D0&nN8_WXnfTT{Vrf0o#9|7J;b|L9;^z|T5QNt+DF0vY}8 z!bey`@ExLEeXj{+5}|0unB1@Lo)8z~Gs=uLH31(Zc8*y@wYUr)Ki%@ z7*hm+9M&ba9NrBxNnqK}E0E*ptI!A*6BVcP5+)XxwjZj11kJOI36ZT`?oXO`=s6{{ zNPyGu>E*e+m(1vay7v6;lnIDX+|H*=ErcZd{tZ6?Ixmk;tQ+H>qFGoa^ls5Mk5I29 zzkgU0Zpy9_9`Au}V^EZ+Et0p2Umh1ydtis9y`=NWPRa`2(l8uVk4Fbp1+uN{Zbe94+opI-f%LZ-nR zh>L{=t)~x;uMn@zXKlF>?xQ$hV_D#Y_2qZHo6wTv=2qNmWC}ZImD;s0Bu(69;8M>z zGvNlT%FE4k6u|AVbBKf6^8{FZ`zx~yabQjHv9d2OkA(!iqhyIpg2Fvx`Xe6-*EV@) z;c;FuVE-#*KD^8b%(5z!5@G(@?`fJ)vY&8kfHne-Lne{?dEIL=wDkgwppH%JgO@;8mbGZANT!t%VV=?pxN=P zDGo?MU%n~G-^R4QObmVb@ym5EKh0J$8!*rs`hQCNerkpA|G$*~F`B>eI9-erjb-_V zokDo@_=c{F3%)m9C-4bTXXd2_h3&ufA>Lm<$G98>l`&-$X89nap9#n!=%GR$TCDIr zqVcRnT=5Ju!QLUOL7j~|@Zwxh(c+(lp5r!+v0VP^i=AJVJ4mS-gDOH5y$wt-5N=L~ zweh1}zmDHhL=OaxLg!$T4jg-~t{CB8oo-i}e%u=J#O^aLp3sHs+$8ssspq*doX4iK zEULCRk_Q1cr#0=>app39C5+)_c`!l!1{mXo!f_sXkDE=_Bj{q|$PSjHZ_alcRfU0bVxD{K*lC51#u zBRDgCd1E>IyCMhNfq*qsox3-7d=I_@301y;7s0_7#V_ua_F|e9_158F_em!?mNWDB zN4$5IknwoaS z1J`%uNfkq9P`6ghZgYbfzE0ZLRJk1~;JB2f@n+j;rzjUDAG0AT0GVDw3il-{-@0uY4 zJ|L$H8h$Fb6!nXIFOEXWpg{p|^lH*TeVID(>7fJKZ;q04uyU#o?z}|>eLvND-pyV; zhUFna9aHnJr9~_q5)Un;T{M?J;r9g)i=^1eC?+crU$ExU$lzDhKL(`-_ej=JM#-q2 zFDc|5b}5T^Eu6505(%1^C?Kop%kl4Yim#%J)MDgwMHZ=DWY@geulE(W-}wb#hd*)! zKpbH4=%v;Lm1f)k*U47k z&z7{E8-l9fSV2v8aJ7hiJx4a~dI(oILxY_*{+^2Leccr}^RF%gSvL*wR8Jf)WP76? z??f6V9T#DC{4tAqcm^I6h1a*EUy@?};H5<_u93ioJiavgKJj}Oq6s~@^X`c>@iE&1aYkA`Dy2T0~)v!d_hPB(USqtdYo4NWlM@_aq@#Fu^M;m~zGG z++KX;&5DHVe6@T!`wDx{oGLMve0|7x@Ufz6_uqh#(L88JJN&cE5-DS4G3?6Lb|1(h znSoHGXLaCq)>36qfLWgp(F^9rex~#LkU{}`+6+;%5#3=#h8v*QlsO6}+Li-EmqOlXUZmM6aTaf>YJcCT(mSGL#h@WxiC%zArRr0gPD%?F}%ZoLVs z9%1pAn${KWE^pd?q!3&FIVh0wN>cN&;_Y-Mv>anZ@XAm{FNc7n?Rulyo!E-1rAo(7 z%)2JhXb{?dm|1-`Oz)l4!!$PF13VGjAj-C?7FL9HOFYk15r{u$lkICOTC2c_A2ZKu zO>B;Vj+uNbxGZuB#nXXoyNOj)jv*~4BAYTxbA6Tl$YH8mKeN2%B} \ No newline at end of file