Merge pull request #2085 from github/koesie10/fix-graphviz-wasm

koesie10 · web-flow · commit 68fb744eab41 · 2023-03-02T10:00:18.000+01:00
Fix Graphviz WASM module not loading for graph viewer
diff --git a/extensions/ql-vscode/src/abstract-webview.ts b/extensions/ql-vscode/src/abstract-webview.ts
@@ -24,6 +24,7 @@ export type WebviewPanelConfig = {
   view: WebviewView;
   preserveFocus?: boolean;
   additionalOptions?: WebviewPanelOptions & WebviewOptions;
+  allowWasmEval?: boolean;
 };
 
 export abstract class AbstractWebview<
@@ -116,6 +117,7 @@ export abstract class AbstractWebview<
       config.view,
       {
         allowInlineStyles: true,
+        allowWasmEval: !!config.allowWasmEval,
       },
     );
     this.push(
diff --git a/extensions/ql-vscode/src/interface-utils.ts b/extensions/ql-vscode/src/interface-utils.ts
@@ -125,10 +125,13 @@ export function getHtmlForWebview(
   view: WebviewView,
   {
     allowInlineStyles,
+    allowWasmEval,
   }: {
     allowInlineStyles?: boolean;
+    allowWasmEval?: boolean;
   } = {
     allowInlineStyles: false,
+    allowWasmEval: false,
   },
 ): string {
   const scriptUriOnDisk = Uri.file(ctx.asAbsolutePath("out/webview.js"));
@@ -159,7 +162,9 @@ 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.
+   *   - 'wasm-unsafe-eval: allow loading WebAssembly modules if necessary.
    * 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).
@@ -168,7 +173,9 @@ export function getHtmlForWebview(
 <html>
   <head>
     <meta http-equiv="Content-Security-Policy"
-          content="default-src 'none'; script-src 'nonce-${nonce}'; font-src ${fontSrc}; style-src ${styleSrc}; connect-src ${
+          content="default-src 'none'; script-src 'nonce-${nonce}'${
+    allowWasmEval ? " 'wasm-unsafe-eval'" : ""
+  }; font-src ${fontSrc}; style-src ${styleSrc}; connect-src ${
     webview.cspSource
   };">
         ${stylesheetsHtmlLines.join(`    ${EOL}`)}
diff --git a/extensions/ql-vscode/src/interface.ts b/extensions/ql-vscode/src/interface.ts
@@ -68,7 +68,7 @@ import {
   ResultSetSchema,
 } from "./pure/bqrs-cli-types";
 import { AbstractWebview, WebviewPanelConfig } from "./abstract-webview";
-import { PAGE_SIZE } from "./config";
+import { isCanary, PAGE_SIZE } from "./config";
 import { HistoryItemLabelProvider } from "./query-history/history-item-label-provider";
 import { telemetryListener } from "./telemetry";
 import { redactableError } from "./pure/errors";
@@ -225,6 +225,8 @@ export class ResultsView extends AbstractWebview<
       viewColumn: this.chooseColumnForWebview(),
       preserveFocus: true,
       view: "results",
+      // Required for the graph viewer which is using d3-graphviz WASM module. Only supported in canary mode.
+      allowWasmEval: isCanary(),
     };
   }
 
@@ -660,7 +662,8 @@ export class ResultsView extends AbstractWebview<
     }
     let data;
     let numTotalResults;
-    if (metadata?.kind === GRAPH_TABLE_NAME) {
+    // Graph results are only supported in canary mode because the graph viewer is not actively supported
+    if (metadata?.kind === GRAPH_TABLE_NAME && isCanary()) {
       data = await interpretGraphResults(
         this.cliServer,
         metadata,
diff --git 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<GraphInterpretationData>;
@@ -59,11 +59,12 @@ export class Graph extends React.Component<GraphProps> {
       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<GraphProps> {
     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"];
