From bc51e7462b5a971193483b01bdec2ac1ce479dbb Mon Sep 17 00:00:00 2001 From: Koen Vlaswinkel Date: Wed, 15 Feb 2023 15:41:29 +0100 Subject: [PATCH] Fix Graphviz WASM module not loading for graph viewer It seems that when we added the CSP policy to the webview, we did not take into account that `d3-graphviz` uses `@hpcc-js/wasm` to load Graphviz as a WASM module. This commit adds `'wasm-unsafe-eval'` to the CSP policy to allow this. --- extensions/ql-vscode/src/interface-utils.ts | 4 ++-- extensions/ql-vscode/src/view/results/graph.tsx | 8 ++++---- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/extensions/ql-vscode/src/interface-utils.ts b/extensions/ql-vscode/src/interface-utils.ts index f4b094ab9..779575726 100644 --- a/extensions/ql-vscode/src/interface-utils.ts +++ b/extensions/ql-vscode/src/interface-utils.ts @@ -163,7 +163,7 @@ export function getHtmlForWebview( /* * Content security policy: * default-src: allow nothing by default. - * script-src: allow only the given script, using the nonce. + * script-src: allow the given script, using the nonce. also allow loading WebAssembly modules. * style-src: allow only the given stylesheet, using the nonce. * connect-src: only allow fetch calls to webview resource URIs * (this is used to load BQRS result files). @@ -172,7 +172,7 @@ export function getHtmlForWebview( ${stylesheetsHtmlLines.join(` ${EOL}`)} diff --git a/extensions/ql-vscode/src/view/results/graph.tsx b/extensions/ql-vscode/src/view/results/graph.tsx index e5f9b86a8..ae5722bcc 100644 --- a/extensions/ql-vscode/src/view/results/graph.tsx +++ b/extensions/ql-vscode/src/view/results/graph.tsx @@ -5,7 +5,7 @@ import { InterpretedResultSet, GraphInterpretationData, } from "../../pure/interface-types"; -import { graphviz } from "d3-graphviz"; +import { graphviz, GraphvizOptions } from "d3-graphviz"; import { tryGetLocationFromString } from "../../pure/bqrs-utils"; export type GraphProps = ResultTableProps & { resultSet: InterpretedResultSet; @@ -59,11 +59,12 @@ export class Graph extends React.Component { return; } - const options = { + const options: GraphvizOptions = { fit: true, fade: false, growEnteringEdges: false, zoom: true, + useWorker: false, }; const element = document.querySelector(`#${graphId}`); @@ -77,8 +78,7 @@ export class Graph extends React.Component { const borderColor = getComputedStyle(element).borderColor; let firstPolygon = true; - graphviz(`#${graphId}`) - .options(options) + graphviz(`#${graphId}`, options) .attributer(function (d) { if (d.tag === "a") { const url = d.attributes["xlink:href"] || d.attributes["href"];