Update Provenance Tracking Name (#110)

Update the file names used for provenance tracking due to changes in
https://github.com/pytorch/pytorch/pull/153584/files#diff-e0cdb58c0f84f56f20c5433339b6d83c470dcde47847e2328effea6bedd4cd27

Additional changes:
- update the test log files
- Highlight the whole line
- Allow panel size changes

Author: yushangdi

src/lib.rs

@@ -848,9 +848,9 @@ pub fn parse_path(path: &PathBuf, config: ParseConfig) -> anyhow::Result<ParseOu
         // Generate HTML for each directory name
         for directory_name in &directory_names {
             let pre_grad_graph_content =
-                get_file_content(&output, "inductor_pre_grad_graph", directory_name);
+                get_file_content(&output, "before_pre_grad_graph", directory_name);
             let post_grad_graph_content =
-                get_file_content(&output, "inductor_post_grad_graph", directory_name);
+                get_file_content(&output, "after_post_grad_graph", directory_name);
             let output_code_content =
                 get_file_content(&output, "inductor_output_code", directory_name);
             let aot_code_content =

src/provenance.css

@@ -47,6 +47,10 @@ body {
     padding: 2px 5px;
     cursor: pointer;
     white-space: nowrap;
+    display: flex;
+    width: 100%;
+    min-width: max-content; /* Ensure line fills horizontally beyond visible area */
+    box-sizing: border-box;
     transition: background-color 0.2s ease;
 }
 
@@ -68,7 +72,7 @@ body {
 }
 
 .divider {
-    width: 10px;
+    width: 3px;
     background-color: #ccc;
     cursor: col-resize;
 }

src/provenance.html

@@ -15,11 +15,11 @@
         <div id="preGradGraph" class="editor">
             <pre>{pre_grad_graph_content}</pre>
         </div>
-        <div id="divider" class="divider"></div>
+        <div id="divider1" class="divider"></div>
         <div id="postGradGraph" class="editor">
             <pre>{post_grad_graph_content}</pre>
         </div>
-        <div id="divider" class="divider"></div>
+        <div id="divider2" class="divider"></div>
         <div id="generatedCode" class="editor">
             <pre>{output_code_content | format_unescaped}{aot_code_content}</pre>
         </div>

src/provenance.js

@@ -60,9 +60,9 @@ function convertNodeMappingsToLineNumbers() {
         return;
     }
 
-    function validLine(line) {
+    function validLine(line, symbol = "#") {
         const stripped = line.trim();
-        return stripped && !stripped.startsWith("#");
+        return stripped && !stripped.startsWith(symbol);
     }
 
     // Create lookup maps for both files
@@ -126,7 +126,8 @@ function convertNodeMappingsToLineNumbers() {
         for (let i = 0; i < cppCodeData.length; i++) {
             const line = cppCodeData[i];
             // check if the line include any of the kernel names
-            if (validLine(line) && kernelNames.some(kernelName => line.includes(kernelName + "("))) {
+            // Skip definition lines, highlight the launch line
+            if (validLine(line, "//") && validLine(line, "def") && validLine(line, "static inline void") && kernelNames.some(kernelName => line.includes(kernelName + "("))) {
                 // let kernelName be the first match
                 const kernelName = kernelNames.find(kernelName => line.includes(kernelName + "("));
                 // create an array for the kernel name if it doesn't exist
@@ -362,14 +363,14 @@ function initializeData() {
         if (postGradGraph) postGradGraphData = postGradGraph.textContent.split('\n');
         if (generatedCode) {
             const content = generatedCode.textContent;
-            if (content.includes('async_compile.triton(')) {
-                // This is Python code
-                codeData = content.split('\n');
-                cppCodeData = null;
-            } else {
+            if (content.includes('AOTInductorModel::run_impl')) {
                 // This is C++ code
                 cppCodeData = content.split('\n');
                 codeData = null;
+            } else {
+                // This is Python code
+                codeData = content.split('\n');
+                cppCodeData = null;
             }
         }
 
@@ -487,4 +488,59 @@ function findCorrespondingLines(sourceEditorId, lineNumber) {
     }
 
     return result;
-}
+}
+
+// Resizable Panels Start
+function setupResizablePanels() {
+    const container = document.querySelector('.editor-container');
+    const pre = document.getElementById('preGradGraph');
+    const post = document.getElementById('postGradGraph');
+    const code = document.getElementById('generatedCode');
+    const divider1 = document.getElementById('divider1');
+    const divider2 = document.getElementById('divider2');
+
+    let isDragging = false;
+    let dragDivider = null;
+
+    function onMouseMove(e) {
+        if (!isDragging || !dragDivider) return;
+
+        const containerRect = container.getBoundingClientRect();
+        const totalWidth = containerRect.width;
+
+        if (dragDivider === divider1) {
+            const newPreWidth = e.clientX - containerRect.left;
+            const newPostWidth = post.offsetWidth + (pre.offsetWidth - newPreWidth);
+            pre.style.flex = `0 0 ${newPreWidth}px`;
+            post.style.flex = `0 0 ${newPostWidth}px`;
+        } else if (dragDivider === divider2) {
+            const preWidth = pre.offsetWidth;
+            const newPostWidth = e.clientX - containerRect.left - preWidth - divider1.offsetWidth;
+            const newCodeWidth = totalWidth - e.clientX + containerRect.left - divider2.offsetWidth;
+            post.style.flex = `0 0 ${newPostWidth}px`;
+            code.style.flex = `0 0 ${newCodeWidth}px`;
+        }
+    }
+
+    function onMouseUp() {
+        isDragging = false;
+        dragDivider = null;
+        document.body.style.cursor = '';
+        document.removeEventListener('mousemove', onMouseMove);
+        document.removeEventListener('mouseup', onMouseUp);
+    }
+
+    [divider1, divider2].forEach(div => {
+        div.addEventListener('mousedown', e => {
+            isDragging = true;
+            dragDivider = div;
+            document.body.style.cursor = 'col-resize';
+            document.addEventListener('mousemove', onMouseMove);
+            document.addEventListener('mouseup', onMouseUp);
+        });
+    });
+}
+
+window.addEventListener('DOMContentLoaded', setupResizablePanels);
+
+// Resizable Panels End