minor fixes after review

Author: skogsbaer

scripts/build-web.mjs

@@ -1,3 +1,6 @@
+// This script builds the artifacts for the web-view of the visualization.
+// It translates typescript to javascript and replaces placeholders in html files.
+
 import * as esbuild from "esbuild";
 import fs from "fs";
 import path from "path";

src/programflow-visualization/README.md

@@ -22,27 +22,28 @@ graph TB
     subgraph backend["Backend (Python)"]
         trace["Trace Generator"]
     end
-    
+
     subgraph extension["Extension Host (VS Code)"]
         panel["VisualizationPanel"]
     end
-    
+
     subgraph webview["Webview (Sandboxed)"]
         ui["webview.ts<br/>(UI + Navigation)"]
         gen["html-generator.ts<br/>(Rendering)"]
     end
-    
+
     subgraph editor["Editor"]
         highlight["Line Highlighting"]
     end
-    
+
     trace -->|trace array via IPC| panel
-    panel -->|postMessage reset/append| webview
-    
-    webview -->|custom events| adapter["vscode-host-adapter.ts"]
+    panel -->|postMessage reset/append| adapter
+
+    webview -->|custom event: programflow:highlight| adapter["vscode-host-adapter.ts"]
+    adapter -->|custom event: programflow:reset, programflow:append| webview
     adapter -->|postMessage highlight| panel
     panel -->|updateLineHighlight| editor
-    
+
     ui -->|local navigation| gen
     gen -->|innerHTML| ui
 ```
@@ -58,4 +59,4 @@ graph TB
 
 ## WebDev
 
-You can develop the design of the visualization using an example trace in your browser. For concrete instructions check out base-repo README.
+You can develop the design of the visualization using an example trace in your browser. For concrete instructions check out base-repo README.

src/programflow-visualization/frontend/visualization_panel.ts

@@ -86,9 +86,13 @@ export class VisualizationPanel {
 
     this._panel.webview.onDidReceiveMessage(
       async (msg) => {
-        if (msg?.command !== "highlight") {return;}
-        if (typeof msg.filePath !== "string" || typeof msg.line !== "number") {return;}
-        await this.updateLineHighlight(false, msg.filePath, msg.line);
+        if (
+          msg?.command === "highlight" &&
+          typeof msg.filePath === "string" &&
+          typeof msg.line === "number"
+        ) {
+          await this.updateLineHighlight(false, msg.filePath, msg.line);
+        }
       },
       undefined,
       context.subscriptions
@@ -187,10 +191,10 @@ export class VisualizationPanel {
       let traceFile: string;
       let traceLine: number;
 
-      if (typeof overrideFile === "string" && typeof overrideLine === "number") {
+      if (overrideFile !== undefined && overrideLine !== undefined) {
         traceFile = overrideFile;
         traceLine = overrideLine;
-      } else if (typeof this._highlightFilePath === "string" && typeof this._highlightLine === "number") {
+      } else if (this._highlightFilePath !== undefined && this._highlightLine !== undefined) {
         traceFile = this._highlightFilePath;
         traceLine = this._highlightLine;
       } else {

src/programflow-visualization/web/webview.ts

@@ -240,6 +240,7 @@ window.addEventListener("programflow:reset", (e: Event) => {
   trace = msg.trace ?? [];
   traceComplete = !!msg.complete;
   renderCurrent();
+  postCurrentHighlight();
 });
 
 window.addEventListener("programflow:append", (e: Event) => {
@@ -280,7 +281,7 @@ function setupUi() {
   // Optional: example trace mode
   const anyWin = window as any;
   const staticTrace: StaticTrace | undefined = anyWin.__PROGRAMFLOW_TRACE__;
-  
+
   if (staticTrace?.trace) {
     trace = staticTrace.trace;
     traceComplete = !!staticTrace.complete;
@@ -289,4 +290,4 @@ function setupUi() {
   }
 }
 
-document.addEventListener("DOMContentLoaded", setupUi);
+document.addEventListener("DOMContentLoaded", setupUi);