try to fix some issues with visualization

Author: skogsbaer

media/programflow-visualization/webview.js

@@ -36,7 +36,7 @@ window.addEventListener("message", (event) => {
 /**
  * Updates the Visualization in the Webview, with the given BackendTraceElem.
  *
- * @param traceElem A BackendTraceElem with 3 fields (line, stack, heap)
+ * @param traceElem A FrontendTraceElem
  */
 function updateVisualization(traceElem) {
   const data = `
@@ -56,10 +56,10 @@ function updateVisualization(traceElem) {
     </div>
     <div class="row">
       <div class="column floating-left floating-left-content" id="frames">
-      ${traceElem[1]}
+      ${traceElem.stackHTML}
       </div>
       <div class="column floating-right floating-right-content" id="objects">
-      ${traceElem[2]}
+      ${traceElem.heapHTML}
       </div>
     </div>
   `;
@@ -78,17 +78,17 @@ function updateVisualization(traceElem) {
   }
 
   const stdoutLog = document.getElementById("stdout-log");
-  stdoutLog.innerHTML = traceElem[4];
+  stdoutLog.innerHTML = traceElem.outputState;
   stdoutLog.scrollTo(0, stdoutLog.scrollHeight);
 }
 
 /**
  * Updates the indendation for heap elements, if a other heap element references it.
  *
- * @param traceElem A BackendTraceElem with 3 fields (line, stack, heap)
+ * @param traceElem A FrontendTraceElem
  */
 function updateIntend(traceElem) {
-  const heapTags = traceElem[2].match(/(?<=startPointer)[0-9]+/g);
+  const heapTags = traceElem.heapHTML.match(/(?<=startPointer)[0-9]+/g);
   if (heapTags) {
     heapTags.forEach((tag) => {
       const element = document.getElementById("objectItem" + tag);
@@ -117,7 +117,7 @@ function updateRefArrows(traceElem) {
       return new LinkerLine({
         parent: document.getElementById("viz"),
         start: tag.elem1,
-        end: tag.elem2, 
+        end: tag.elem2,
         size: 2,
         path: "magnet",
         startSocket: "right",
@@ -139,9 +139,9 @@ function updateRefArrows(traceElem) {
  * @returns A list with all ids that have either a start or end pointer id in the html
  */
 function getCurrentTags(traceElem) {
-  const stackTags = traceElem[1].match(/(?<=id=")(.+)Pointer[0-9]+/g);
-  const heapTags = traceElem[2].match(/(?<=startPointer)[0-9]+/g);
-  const uniqueId = traceElem[2].match(/(?<=)\d+(?=startPointer)/g);
+  const stackTags = traceElem.stackHTML.match(/(?<=id=")(.+)Pointer[0-9]+/g);
+  const heapTags = traceElem.heapHTML.match(/(?<=startPointer)[0-9]+/g);
+  const uniqueId = traceElem.heapHTML.match(/(?<=)\d+(?=startPointer)/g);
 
   if (!stackTags) {
     return;

src/programflow-visualization/frontend/HTMLGenerator.ts

@@ -50,7 +50,13 @@ export class HTMLGenerator {
         if (traceElement.traceback !== undefined) {
             output += `<span class="traceback-text">${traceElement.traceback}</span>`;
         }
-        return [traceElement.line, frameItems, objectItems, traceElement.filePath, output];
+        return {
+            lineNumber: traceElement.line,
+            stackHTML: frameItems,
+            heapHTML: objectItems,
+            filename: traceElement.filePath,
+            outputState: output
+        };
     }
 
     private objectItem(name: string, value: HeapValue): string {

src/programflow-visualization/frontend/visualization_panel.ts

@@ -109,7 +109,7 @@ export class VisualizationPanel {
       this._trace.push((new HTMLGenerator()).generateHTML(backendTraceElem));
       await this.postMessagesToWebview('updateButtons', 'updateContent');
       if (firstElement) {
-        this.updateLineHighlight();
+        await this.updateLineHighlight();
       }
     });
     this._tracePort?.on('close', async () => {
@@ -195,45 +195,58 @@ export class VisualizationPanel {
   }
 
   private async updateLineHighlight(remove: boolean = false) {
-    if (this._trace.length === 0) {
-      this._outChannel.appendLine("updateLineHighlight: no trace available, aborting");
-      return;
-    }
-    const traceFile = this._trace[this._traceIndex][3]!;
-    let editor: vscode.TextEditor | undefined = vscode.window.visibleTextEditors.filter(
-      editor => path.basename(editor.document.uri.path) === path.basename(traceFile)
-    )[0];
+    try {
+      if (this._trace.length === 0) {
+        this._outChannel.appendLine("updateLineHighlight: no trace available, aborting");
+        return;
+      }
+      const traceFile = this._trace[this._traceIndex].filename;
+      this._outChannel.appendLine(
+        `updateLineHighlight: traceFile=${traceFile}, traceIndex=${this._traceIndex}, remove=${remove}`);
 
-    const openPath = vscode.Uri.parse(traceFile);
-    if (!editor || editor.document.uri.path !== openPath.path) {
-      // How can it be that editor is not null/undefined, but the path does not match?
-      await vscode.commands.executeCommand('workbench.action.focusFirstEditorGroup');
-      const document = await vscode.workspace.openTextDocument(openPath);
-      editor = await vscode.window.showTextDocument(document);
-    }
+      // Use vscode.Uri.file() for proper file path to URI conversion
+      const openPath = vscode.Uri.file(traceFile);
 
-    const traceLine = this._trace[this._traceIndex][0];
-    if (remove) {
-      this._outChannel.appendLine(
-        "updateLineHighlight: removing highlighting in " + editor.document.fileName);
-      editor.setDecorations(nextLineExecuteHighlightType, []);
-    } else if (editor.document.lineCount < traceLine) {
-      // How can it be that traceLine is out of range?
-      this._outChannel.appendLine(
-        "updateLineHighlight: removing highlighting in " + editor.document.fileName +
-        "(out of range)");
-      editor.setDecorations(nextLineExecuteHighlightType, []);
-    } else {
-      const hlLine = traceLine - 1; // why - 1
-      if (hlLine > -1) {
+      // Find editor by full normalized path, not just basename
+      let editor: vscode.TextEditor | undefined = vscode.window.visibleTextEditors.find(
+        editor => editor.document.uri.fsPath === openPath.fsPath
+      );
+
+      if (!editor && remove) {
+        return;
+      } else if (!editor){
+        this._outChannel.appendLine(`updateLineHighlight: editor not found, opening document: ${openPath.fsPath}`);
+        await vscode.commands.executeCommand('workbench.action.focusFirstEditorGroup');
+        const document = await vscode.workspace.openTextDocument(openPath);
+        editor = await vscode.window.showTextDocument(document, { preserveFocus: false });
+        // Give the editor time to fully initialize
+        await new Promise(resolve => setTimeout(resolve, 100));
+        if (!editor) {
+          this._outChannel.appendLine(`updateLineHighlight: failed to get editor after opening document`);
+          return;
+        }
+      }
+
+      const traceLine = this._trace[this._traceIndex].lineNumber;
+      const lineNo = traceLine - 1; // zero-based indexing in vscode
+      if (remove) {
+        this._outChannel.appendLine(
+          "updateLineHighlight: removing highlighting in " + editor.document.fileName);
+        editor.setDecorations(nextLineExecuteHighlightType, []);
+      } else if (lineNo < 0 || lineNo >= editor.document.lineCount) {
         this._outChannel.appendLine(
-          "updateLineHighlight: highlighting line " + hlLine + " in " + editor.document.fileName);
-        this.setEditorDecorations(editor, nextLineExecuteHighlightType, hlLine);
+          "updateLineHighlight: traceLine " + traceLine + " out of range (doc has " +
+          editor.document.lineCount + " lines) in " + editor.document.fileName);
+        editor.setDecorations(nextLineExecuteHighlightType, []);
       } else {
-        // how can this happen?
         this._outChannel.appendLine(
-          "updateLineHighlight: cannot highlight line " + hlLine + " in " +
-          editor.document.fileName + "(out of range)");
+          "updateLineHighlight: highlighting line " + traceLine + " in " + editor.document.fileName);
+        this.setEditorDecorations(editor, nextLineExecuteHighlightType, lineNo);
+      }
+    } catch (error) {
+      this._outChannel.appendLine(`updateLineHighlight: ERROR - ${error}`);
+      if (error instanceof Error) {
+        this._outChannel.appendLine(`Stack: ${error.stack}`);
       }
     }
   }

src/programflow-visualization/types.ts

@@ -7,8 +7,15 @@ type Failure = { errorMessage: string };
 
 // State Types for the Frontend
 type FrontendTrace = Array<FrontendTraceElem>;
-// FIXME: what are this array elements? Why isn't there a type with named fields?
-type FrontendTraceElem = [number, string, string, string, string];
+
+type FrontendTraceElem = {
+  lineNumber: number, // 1-based
+  stackHTML: string,
+  heapHTML: string,
+  filename: string,
+  outputState: string,
+};
+
 // ############################################################################################
 // State Types for the Backend
 type PartialBackendTrace = {

vscode-test/type-test.py

@@ -12,4 +12,5 @@ class Point:
     x: int
     y: int
 
-p = Point()
+p = Point(1, 2)
+print(p)