FuelLabs · sdankel · Nov 1, 2023 · Oct 30, 2023 · Oct 30, 2023
diff --git a/client/src/client.ts b/client/src/client.ts
@@ -3,6 +3,7 @@ import {
   LanguageClientOptions,
   ServerOptions,
 } from 'vscode-languageclient/node';
+import { EXTENSION_ROOT } from './config';
 
 let client: LanguageClient | null;
 
@@ -14,7 +15,7 @@ export const createClient = (
     throw new Error('Client already exists!');
   }
   client = new LanguageClient(
-    'sway-lsp',
+    EXTENSION_ROOT,
     'Sway Language Server',
     serverOptions,
     clientOptions

diff --git a/client/src/commands/openAstFile.ts b/client/src/commands/openAstFile.ts
@@ -21,9 +21,6 @@ export default async function openAstFile(filePath: string, astKind: AstKind) {
       log.error(`No ${astKind} AST file found for ${filePath}`);
     }
   } catch (error) {
-    log.error(
-      `Failed to open ${astKind} AST file found for ${filePath}`,
-      error
-    );
+    log.error(`Failed to open ${astKind} AST file for ${filePath}`, error);
   }
 }
diff --git a/client/src/commands/openDotGraph.ts b/client/src/commands/openDotGraph.ts
@@ -0,0 +1,80 @@
+import * as path from 'path';
+import * as vscode from 'vscode';
+import { EXTENSION_ROOT, getExtensionPath } from '../config';
+import { GraphKind, visualize } from '../interface/visualize';
+import { addFilePrefix, log } from '../util/util';
+
+export default async function openDotGraph(
+  filePath: string,
+  graphKind: GraphKind
+) {
+  try {
+    const dotContents = await visualize(addFilePrefix(filePath), graphKind);
+    if (dotContents) {
+      const nodeModulesPath = vscode.Uri.file(
+        path.join(getExtensionPath(), 'node_modules')
+      );
+
+      const panel = vscode.window.createWebviewPanel(
+        `${EXTENSION_ROOT}.crate-graph`,
+        `${EXTENSION_ROOT} build plan graph`,
+        vscode.ViewColumn.Two,
+        {
+          enableScripts: true,
+          retainContextWhenHidden: true,
+          localResourceRoots: [nodeModulesPath],
+        }
+      );
+      const uri = panel.webview.asWebviewUri(nodeModulesPath);
+
+      const html = `
+          <!DOCTYPE html>
+          <meta charset="utf-8">
+          <head>
+              <style>
+                  /* Fill the entire view */
+                  html, body { margin:0; padding:0; overflow:hidden }
+                  svg { position:fixed; top:0; left:0; height:100%; width:100% }
+
+                  /* Disable the graphviz background and fill the polygons */
+                  .graph > polygon { display:none; }
+                  :is(.node,.edge) polygon { fill: white; }
+
+                  /* Invert the line colours for dark themes */
+                  body:not(.vscode-light) .edge path { stroke: white; }
+              </style>
+          </head>
+          <body>
+              <script type="text/javascript" src="${uri}/d3/dist/d3.min.js"></script>
+              <script type="text/javascript" src="${uri}/@hpcc-js/wasm/dist/graphviz.umd.js"></script>
+              <script type="text/javascript" src="${uri}/d3-graphviz/build/d3-graphviz.min.js"></script>
+              <div id="graph"></div>
+              <script>
+                  let dot = \`${dotContents}\`;
+                  let graph = d3.select("#graph")
+                                .graphviz({ useWorker: false, useSharedWorker: false })
+                                .fit(true)
+                                .zoomScaleExtent([0.1, Infinity])
+                                .renderDot(dot);
+
+                  d3.select(window).on("click", (event) => {
+                      if (event.ctrlKey) {
+                          graph.resetZoom(d3.transition().duration(100));
+                      }
+                  });
+                  d3.select(window).on("copy", (event) => {
+                      event.clipboardData.setData("text/plain", dot);
+                      event.preventDefault();
+                  });
+              </script>
+          </body>
+          `;
+
+      panel.webview.html = html;
+    } else {
+      log.error(`No ${graphKind} graph found for ${filePath}`);
+    }
+  } catch (error) {
+    log.error(`Failed to open ${graphKind} graph for ${filePath}`, error);
+  }
+}
diff --git a/client/src/config.ts b/client/src/config.ts
@@ -1,16 +1,20 @@
 import * as vscode from 'vscode';
 import { log } from './util/util';
 
+export const EXTENSION_ID = 'fuellabs.sway-vscode-plugin';
+export const EXTENSION_ROOT = 'sway-lsp';
+
+export const getExtensionPath = () =>
+  vscode.extensions.getExtension(EXTENSION_ID)!.extensionPath;
+
 export class Config {
-  readonly extensionId = 'fuellabs.sway-vscode-plugin';
-  readonly rootSection = 'sway-lsp';
   private readonly requiresReloadOpts = ['debug'].map(
-    opt => `${this.rootSection}.${opt}`
+    opt => `${EXTENSION_ROOT}.${opt}`
   );
 
   readonly package: {
     version: string;
-  } = vscode.extensions.getExtension(this.extensionId)!.packageJSON;
+  } = vscode.extensions.getExtension(EXTENSION_ID)!.packageJSON;
 
   readonly globalStorageUri: vscode.Uri;
 
@@ -60,7 +64,7 @@ export class Config {
   // https://stackoverflow.com/questions/60135780/what-is-the-best-way-to-type-check-the-configuration-for-vscode-extension
 
   private get cfg(): vscode.WorkspaceConfiguration {
-    return vscode.workspace.getConfiguration(this.rootSection);
+    return vscode.workspace.getConfiguration(EXTENSION_ROOT);
   }
 
   /**

diff --git a/client/src/interface/onEnter.ts b/client/src/interface/onEnter.ts
@@ -1,4 +1,4 @@
-import { Range, TextDocumentChangeEvent, window } from 'vscode';
+import { TextDocumentChangeEvent, window } from 'vscode';
 import {
   RequestType,
   TextDocumentContentChangeEvent,
@@ -7,7 +7,6 @@ import {
   WorkspaceEdit,
 } from 'vscode-languageclient/node';
 import { getClient } from '../client';
-import { ProgramType } from '../program';
 import { toVSCodeRange } from '../util/convert';
 import { addFilePrefix } from '../util/util';
 
@@ -16,8 +15,6 @@ interface OnEnterParams {
   contentChanges: TextDocumentContentChangeEvent[];
 }
 
-export type Runnable = [Range, ProgramType];
-
 const request = new RequestType<OnEnterParams, WorkspaceEdit | null, void>(
   'sway/on_enter'
 );

diff --git a/client/src/interface/visualize.ts b/client/src/interface/visualize.ts
@@ -0,0 +1,30 @@
+import {
+  RequestType,
+  TextDocumentIdentifier,
+} from 'vscode-languageclient/node';
+import { getClient } from '../client';
+
+export type GraphKind = 'build_plan';
+
+interface VisualizeParams {
+  textDocument: TextDocumentIdentifier;
+  graphKind: GraphKind;
+}
+
+const request = new RequestType<VisualizeParams, string | null, void>(
+  'sway/visualize'
+);
+
+export const visualize = async (
+  filePath: string,
+  graphKind: GraphKind
+): Promise<string | null> => {
+  const client = getClient();
+  const params: VisualizeParams = {
+    textDocument: {
+      uri: filePath,
+    },
+    graphKind,
+  };
+  return await client.sendRequest(request, params);
+};
diff --git a/client/src/main.ts b/client/src/main.ts
@@ -3,7 +3,7 @@ import { promisify } from 'util';
 import { commands, ExtensionContext, window, workspace } from 'vscode';
 import * as lc from 'vscode-languageclient/node';
 import { createClient, getClient } from './client';
-import { Config } from './config';
+import { Config, EXTENSION_ROOT as EXTENSION_ROOT } from './config';
 import { onEnter } from './interface/onEnter';
 import { CommandPalettes } from './palettes';
 import updateFuelCoreStatus from './status_bar/fuelCoreStatus';
@@ -120,7 +120,7 @@ function getClientOptions(): lc.LanguageClientOptions {
         workspace.createFileSystemWatcher('**/*.sw'),
       ],
     },
-    initializationOptions: workspace.getConfiguration('sway-lsp'),
+    initializationOptions: workspace.getConfiguration(EXTENSION_ROOT),
     markdown: {
       isTrusted: true,
       supportHtml: true,

diff --git a/client/src/palettes.ts b/client/src/palettes.ts
@@ -6,6 +6,7 @@ import forcTest from './commands/forcTest';
 import goToLocation from './commands/goToLocation';
 import installServer from './commands/installServer';
 import openAstFile from './commands/openAstFile';
+import openDotGraph from './commands/openDotGraph';
 import peekLocations from './commands/peekLocations';
 import startFuelCore from './commands/startFuelCore';
 import stopFuelCore from './commands/stopFuelCore';
@@ -77,6 +78,13 @@ export class CommandPalettes {
           await openAstFile(currentFile, 'typed');
         },
       },
+      {
+        command: 'sway.viewBuildPlan',
+        callback: async () => {
+          const currentFile = vscode.window.activeTextEditor.document.fileName;
+          await openDotGraph(currentFile, 'build_plan');
+        },
+      },
       {
         command: 'sway.installServer',
         callback: async () => installServer(),