mrva/vscode-codeql
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

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

Browse Source 
Fix Graphviz WASM module not loading for graph viewer
This commit is contained in:
Koen Vlaswinkel
2023-03-02 10:00:18 +01:00
committed by GitHub
parent 3de6a110ce 304330074d
commit 68fb744eab
4 changed files with 20 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/ql-vscode/src/abstract-webview.ts
View File

@@ -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(

11
extensions/ql-vscode/src/interface-utils.ts
View File

@@ -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}`)}

7
extensions/ql-vscode/src/interface.ts
View File

@@ -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,

8
extensions/ql-vscode/src/view/results/graph.tsx
View File

@@ -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"];