vscode: Learned to highlight the current node

Author: tmr232

src/control-flow/render.ts

@@ -6,10 +6,15 @@ import { MultiDirectedGraph } from "graphology";
 class RenderContext {
   public readonly verbose: boolean;
   private readonly backlinks: { from: string; to: string }[];
-
-  constructor(verbose: boolean, backlinks: { from: string; to: string }[]) {
+  private readonly highlightedNode: string | undefined;
+  constructor(
+    verbose: boolean,
+    backlinks: { from: string; to: string }[],
+    highlightedNode?: string,
+  ) {
     this.verbose = verbose;
     this.backlinks = backlinks;
+    this.highlightedNode = highlightedNode;
   }
 
   public isBacklink(from: string, to: string): boolean {
@@ -19,6 +24,9 @@ class RenderContext {
       ) != -1
     );
   }
+  public isHighlighted(node: string): boolean {
+    return node == this.highlightedNode;
+  }
 }
 
 /**
@@ -181,10 +189,18 @@ function renderSubgraphs(
   return dotContent;
 }
 
-export function graphToDot(cfg: CFG, verbose: boolean = false): string {
+export function graphToDot(
+  cfg: CFG,
+  verbose: boolean = false,
+  nodeToHighlight?: string,
+): string {
   const hierarchy = buildHierarchy(cfg);
   const backlinks = detectBacklinks(cfg.graph, cfg.entry);
-  return renderHierarchy(cfg, hierarchy, new RenderContext(verbose, backlinks));
+  return renderHierarchy(
+    cfg,
+    hierarchy,
+    new RenderContext(verbose, backlinks, nodeToHighlight),
+  );
 }
 
 export function graphToLineNumbers(cfg: CFG): Map<string, number> {
@@ -316,5 +332,8 @@ function renderNode(
     graph.getNodeAttribute(node, "lines") * 0.3,
     minHeight,
   );
+  if (context.isHighlighted(node)) {
+    dotAttrs.fillcolor = "black";
+  }
   return `    ${node} [${formatStyle(dotAttrs)}];\n`;
 }

src/vscode/extension.ts

@@ -6,8 +6,13 @@ import { Graphviz } from "@hpcc-js/wasm-graphviz";
 import { graphToDot } from "../control-flow/render";
 import { simplifyCFG, trimFor } from "../control-flow/graph-ops";
 import { newCFGBuilder, type Language } from "../control-flow/cfg";
-import { mergeNodeAttrs } from "../control-flow/cfg-defs";
+import {
+  mergeNodeAttrs,
+  remapNodeTargets,
+  type CFG,
+} from "../control-flow/cfg-defs";
 import { OverviewViewProvider } from "./overview-view";
+import { getValue } from "../control-flow/ranges";
 
 let graphviz: Graphviz;
 interface SupportedLanguage {
@@ -111,14 +116,20 @@ function getCurrentCode(): {
   return { code, languageId, language };
 }
 
-type Settings = { flatSwitch?: boolean; simplify?: boolean };
+type Settings = { flatSwitch: boolean; simplify: boolean };
 function loadSettings(): Settings {
   const config = vscode.workspace.getConfiguration("functionGraphOverview");
+
   return {
-    flatSwitch: config.get("flatSwitch"),
-    simplify: config.get("simplify"),
+    flatSwitch: config.get("flatSwitch") ?? false,
+    simplify: config.get("simplify") ?? false,
   };
 }
+type CFGKey = { functionText: string; flatSwitch: boolean; simplify: boolean };
+
+function isSameKey(a: CFGKey, b: CFGKey): boolean {
+  return JSON.stringify(a) === JSON.stringify(b);
+}
 
 function getFunctionAtPosition(
   tree: Parser.Tree,
@@ -164,11 +175,14 @@ export async function activate(context: vscode.ExtensionContext) {
 
   const parsers = await initializeParsers(context);
 
+  let cfgKey: CFGKey | undefined;
+  let savedCFG: CFG;
+
   const cursorMove = vscode.window.onDidChangeTextEditorSelection(
     (event: vscode.TextEditorSelectionChangeEvent): void => {
       const editor = event.textEditor;
       const position = editor.selection.active;
-      // const offset = editor.document.offsetAt(position);
+      const offset = editor.document.offsetAt(position);
 
       console.log(
         `Cursor position changed: Line ${position.line + 1}, Column ${position.character + 1}`,
@@ -182,7 +196,6 @@ export async function activate(context: vscode.ExtensionContext) {
       const tree = parsers[language].parse(code);
 
       const functionSyntax = getFunctionAtPosition(tree, position, language);
-
       if (!functionSyntax) return;
 
       console.log(functionSyntax);
@@ -192,14 +205,31 @@ export async function activate(context: vscode.ExtensionContext) {
       }
 
       const { flatSwitch, simplify } = loadSettings();
-      const builder = newCFGBuilder(language, { flatSwitch });
-      let cfg = builder.buildCFG(functionSyntax);
-      cfg = trimFor(cfg);
-      if (simplify) {
-        cfg = simplifyCFG(cfg, mergeNodeAttrs);
+      // We'd like to avoid re-running CFG generation for a function if nothing changed.
+      const newKey: CFGKey = {
+        flatSwitch,
+        simplify,
+        functionText: functionSyntax.text,
+      };
+      let cfg: CFG;
+      if (cfgKey && isSameKey(newKey, cfgKey)) {
+        cfg = savedCFG;
+      } else {
+        cfgKey = newKey;
+
+        const builder = newCFGBuilder(language, { flatSwitch });
+        cfg = builder.buildCFG(functionSyntax);
+        cfg = trimFor(cfg);
+        if (simplify) {
+          cfg = simplifyCFG(cfg, mergeNodeAttrs);
+        }
+        cfg = remapNodeTargets(cfg);
+
+        savedCFG = cfg;
       }
 
-      const dot = graphToDot(cfg);
+      const nodeToHighlight = getValue(cfg.offsetToNode, offset);
+      const dot = graphToDot(cfg, false, nodeToHighlight);
       const svg = graphviz.dot(dot);
 
       provider.setSVG(svg);