tritonparse 0.2.1.dev20250918071513__tar.gz → 0.2.1.dev20250919071533__tar.gz

{tritonparse-0.2.1.dev20250918071513/tritonparse.egg-info → tritonparse-0.2.1.dev20250919071533}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: tritonparse
-Version: 0.2.1.dev20250918071513
+Version: 0.2.1.dev20250919071533
 Summary: TritonParse: A Compiler Tracer, Visualizer, and mini-Reproducer Generator for Triton Kernels
 Author-email: Yueming Hao <yhao@meta.com>
 License-Expression: BSD-3-Clause

{tritonparse-0.2.1.dev20250918071513 → tritonparse-0.2.1.dev20250919071533/tritonparse.egg-info}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: tritonparse
-Version: 0.2.1.dev20250918071513
+Version: 0.2.1.dev20250919071533
 Summary: TritonParse: A Compiler Tracer, Visualizer, and mini-Reproducer Generator for Triton Kernels
 Author-email: Yueming Hao <yhao@meta.com>
 License-Expression: BSD-3-Clause

{tritonparse-0.2.1.dev20250918071513 → tritonparse-0.2.1.dev20250919071533}/tritonparse.egg-info/SOURCES.txt

@@ -88,6 +88,7 @@ website/src/components/CodeViewer.tsx
 website/src/components/CompilationInfo.tsx
 website/src/components/CopyCodeButton.tsx
 website/src/components/DataSourceSelector.tsx
+website/src/components/DiffComparisonView.tsx
 website/src/components/DiffViewer.tsx
 website/src/components/ExternalLink.tsx
 website/src/components/SingleCodeViewer.tsx
@@ -95,7 +96,9 @@ website/src/components/StackDiffViewer.tsx
 website/src/components/ToggleSwitch.tsx
 website/src/components/TritonIRs.tsx
 website/src/components/WelcomeScreen.tsx
+website/src/context/FileDiffSession.tsx
 website/src/pages/CodeView.tsx
+website/src/pages/FileDiffView.tsx
 website/src/pages/KernelOverview.tsx
 website/src/utils/dataLoader.ts
 website/src/utils/fbDetection.ts

{tritonparse-0.2.1.dev20250918071513 → tritonparse-0.2.1.dev20250919071533}/website/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "tritonparse-website",
-  "version": "0.2.0",
+  "version": "0.2.3",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "tritonparse-website",
-      "version": "0.2.0",
+      "version": "0.2.3",
       "dependencies": {
         "@monaco-editor/react": "^4.7.0",
         "@types/react-syntax-highlighter": "^15.5.7",

{tritonparse-0.2.1.dev20250918071513 → tritonparse-0.2.1.dev20250919071533}/website/package.json

@@ -1,7 +1,7 @@
 {
   "name": "tritonparse-website",
   "private": true,
-  "version": "0.2.0",
+  "version": "0.2.3",
   "type": "module",
   "scripts": {
     "dev": "vite",

{tritonparse-0.2.1.dev20250918071513 → tritonparse-0.2.1.dev20250919071533}/website/src/App.tsx

@@ -9,18 +9,21 @@ import {
 } from "./utils/dataLoader";
 import { checkFbDirectoryExists } from "./utils/fbDetection";
 import CodeView from "./pages/CodeView";
+import FileDiffView from "./pages/FileDiffView";
 import SingleCodeViewer from "./components/SingleCodeViewer";
 import KernelOverview from "./pages/KernelOverview";
 import DataSourceSelector from "./components/DataSourceSelector";
 import WelcomeScreen from "./components/WelcomeScreen";
 import ExternalLink from "./components/ExternalLink";
 import { mapLanguageToHighlighter } from "./components/CodeViewer";
+import { useFileDiffSession } from "./context/FileDiffSession";
 
 /**
  * Main application component that handles data loading,
  * state management, and rendering different views.
  */
 function App() {
+  const sess = useFileDiffSession();
   // Store processed kernel data from log file
   const [kernels, setKernels] = useState<ProcessedKernel[]>([]);
   // Track loading state for displaying loading indicator
@@ -67,6 +70,9 @@ function App() {
       const newUrl = new URL(window.location.href);
       newUrl.searchParams.set("json_url", jsonUrl);
       window.history.replaceState({}, "", newUrl.toString());
+    } else if (view === "file_diff") {
+      // Allow direct navigation to File Diff even without json_url
+      setActiveTab("file_diff");
     }
 
     // Check if fb directory exists and load internal utils if available
@@ -129,6 +135,8 @@ function App() {
         // Then, determine which view to show
         if (view === "ir_code_comparison") {
           setActiveTab("comparison");
+        } else if (view === "file_diff") {
+          setActiveTab("file_diff");
         }
 
         setDataLoaded(true);
@@ -198,6 +206,8 @@ function App() {
         // Then, determine which view to show
         if (initialView === "ir_code_comparison") {
           setActiveTab("comparison");
+        } else if (initialView === "file_diff") {
+          setActiveTab("file_diff");
         }
         setDataLoaded(true);
         setLoadedUrl(url);
@@ -209,6 +219,8 @@ function App() {
         // Add view and kernel_hash parameters if applicable
         if (initialView === "ir_code_comparison") {
           newUrl.searchParams.set("view", "ir_code_comparison");
+        } else if (initialView === "file_diff") {
+          newUrl.searchParams.set("view", "file_diff");
         }
 
         if (kernelHash) {
@@ -278,6 +290,20 @@ function App() {
     }
   };
 
+  // Register app controls for FileDiffSession navigation
+  useEffect(() => {
+    sess.registerAppControls({
+      setActiveTab,
+    });
+  }, [sess, setActiveTab]);
+
+  // Clear FileDiff preview when entering/returning to File Diff to avoid preview intercepting other views
+  useEffect(() => {
+    if (activeTab === 'file_diff' && sess.preview.active) {
+      sess.clearPreview();
+    }
+  }, [activeTab, sess]);
+
   // Show loading indicator while data is being fetched
   if (loading) {
     return (
@@ -323,8 +349,45 @@ function App() {
           onBack={handleBackFromIRView}
         />
       );
+    } else if (sess.preview.active) {
+      const side = sess.preview.side === 'left' ? sess.left : sess.right;
+      const idx = side.selectedIdx ?? 0;
+      const kernelsSrc = side.kernels ?? [];
+      if (!kernelsSrc || kernelsSrc.length === 0) {
+        return <div className="text-red-600">Error: Preview kernel data not available.</div>;
+      }
+      if (sess.preview.view === 'overview') {
+        return (
+          <KernelOverview
+            key={`preview-overview-${sess.preview.side}-${idx}`}
+            kernels={kernelsSrc}
+            onViewIR={handleViewSingleIR}
+            selectedKernel={idx}
+            onSelectKernel={() => {}}
+          />
+        );
+      }
+      if (sess.preview.view === 'ir') {
+        return (
+          <CodeView
+            key={`preview-ir-${sess.preview.side}-${idx}`}
+            kernels={kernelsSrc}
+            selectedKernel={idx}
+          />
+        );
+      }
+      return null;
     } else if (!dataLoaded) {
-      // Show welcome screen if no data is loaded
+      // Show welcome screen if no data is loaded, but allow File Diff tab to render its view when selected
+      if (activeTab === 'file_diff') {
+        return (
+          <FileDiffView
+            kernelsLeft={kernels}
+            selectedLeftIndex={Math.max(0, selectedKernel)}
+            leftLoadedUrl={loadedUrl}
+          />
+        );
+      }
       return (
         <WelcomeScreen
           loadDefaultData={loadDefaultData}
@@ -346,17 +409,36 @@ function App() {
         </div>
       );
     } else {
-      // Show either overview or code comparison based on active tab
-      return activeTab === "overview" ? (
-        <KernelOverview
-          kernels={kernels}
-          onViewIR={handleViewSingleIR}
-          selectedKernel={selectedKernel}
-          onSelectKernel={handleSelectKernel}
-        />
-      ) : (
-        <CodeView kernels={kernels} selectedKernel={selectedKernel} />
-      );
+      // Show either overview, IR code, or file diff based on active tab
+      if (activeTab === "overview") {
+        return (
+          <KernelOverview
+            kernels={kernels}
+            onViewIR={handleViewSingleIR}
+            selectedKernel={selectedKernel}
+            onSelectKernel={handleSelectKernel}
+          />
+        );
+      }
+      if (activeTab === "comparison") {
+        return (
+          <CodeView
+            key={`codeview-main-${selectedKernel}`}
+            kernels={kernels}
+            selectedKernel={selectedKernel}
+          />
+        );
+      }
+      if (activeTab === "file_diff") {
+        return (
+          <FileDiffView
+            kernelsLeft={kernels}
+            selectedLeftIndex={Math.max(0, selectedKernel)}
+            leftLoadedUrl={loadedUrl}
+          />
+        );
+      }
+      return null;
     }
   };
 
@@ -430,45 +512,56 @@ function App() {
               isLoading={loading}
             />
 
-            {/* Tab navigation (only show when data is loaded and not in IR view) */}
-            {dataLoaded && kernels.length > 0 && !selectedIR && (
-              <div className="flex space-x-4">
-                <button
-                  className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "overview" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
-                    }`}
-                  onClick={() => {
-                    setActiveTab("overview");
-
-                    // Update URL parameters when switching to overview
-                    if (loadedUrl) {
-                      const newUrl = new URL(window.location.href);
-                      // Remove view parameter but keep kernel_hash
-                      newUrl.searchParams.delete("view");
-                      window.history.replaceState({}, "", newUrl.toString());
-                    }
-                  }}
-                >
-                  Kernel Overview
-                </button>
-                <button
-                  className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "comparison" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
-                    }`}
-                  onClick={() => {
-                    setActiveTab("comparison");
-
-                    // Update URL parameters when switching to comparison view
-                    if (loadedUrl) {
-                      const newUrl = new URL(window.location.href);
-                      // Add view parameter
-                      newUrl.searchParams.set("view", "ir_code_comparison");
-                      window.history.replaceState({}, "", newUrl.toString());
-                    }
-                  }}
-                >
-                  IR Code Comparison
-                </button>
-              </div>
-            )}
+            {/* Tab navigation: File Diff button placed as the last (rightmost) button */}
+            <div className="flex space-x-4">
+              {dataLoaded && kernels.length > 0 && !selectedIR && (
+                <>
+                  <button
+                    className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "overview" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
+                      }`}
+                    onClick={() => {
+                      if (sess.preview?.active) sess.clearPreview();
+                      setActiveTab("overview");
+
+                      if (loadedUrl) {
+                        const newUrl = new URL(window.location.href);
+                        newUrl.searchParams.delete("view");
+                        window.history.replaceState({}, "", newUrl.toString());
+                      }
+                    }}
+                  >
+                    Kernel Overview
+                  </button>
+                  <button
+                    className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "comparison" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
+                      }`}
+                    onClick={() => {
+                      if (sess.preview?.active) sess.clearPreview();
+                      setActiveTab("comparison");
+
+                      if (loadedUrl) {
+                        const newUrl = new URL(window.location.href);
+                        newUrl.searchParams.set("view", "ir_code_comparison");
+                        window.history.replaceState({}, "", newUrl.toString());
+                      }
+                    }}
+                  >
+                    IR Code
+                  </button>
+                </>
+              )}
+
+              <button
+                className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "file_diff" ? "bg-blue-700 text-white shadow-md" : "bg-blue-100 text-blue-700 hover:bg-blue-200"
+                  }`}
+                onClick={() => {
+                  if (sess.preview?.active) sess.clearPreview();
+                  setActiveTab("file_diff");
+                }}
+              >
+                File Diff
+              </button>
+            </div>
           </div>
         </div>
       </header>

{tritonparse-0.2.1.dev20250918071513 → tritonparse-0.2.1.dev20250919071533}/website/src/components/CopyCodeButton.tsx

@@ -41,15 +41,15 @@ const CopyCodeButton: React.FC<CopyCodeButtonProps> = ({
                     // https://heroicons.com/
                     <span>
                         {/* Checkmark SVG icon */}
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-5">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="m4.5 12.75 6 6 9-13.5" />
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="size-5">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="m4.5 12.75 6 6 9-13.5" />
                         </svg>
                     </span>
                 ) : (
                     <span>
                         {/* Clipboard copy icon */}
-                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" className="size-5">
-                            <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z" />
+                        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth="1.5" stroke="currentColor" className="size-5">
+                            <path strokeLinecap="round" strokeLinejoin="round" d="M8.25 7.5V6.108c0-1.135.845-2.098 1.976-2.192.373-.03.748-.057 1.123-.08M15.75 18H18a2.25 2.25 0 0 0 2.25-2.25V6.108c0-1.135-.845-2.098-1.976-2.192a48.424 48.424 0 0 0-1.123-.08M15.75 18.75v-1.875a3.375 3.375 0 0 0-3.375-3.375h-1.5a1.125 1.125 0 0 1-1.125-1.125v-1.5A3.375 3.375 0 0 0 6.375 7.5H5.25m11.9-3.664A2.251 2.251 0 0 0 15 2.25h-1.5a2.251 2.251 0 0 0-2.15 1.586m5.8 0c.065.21.1.433.1.664v.75h-6V4.5c0-.231.035-.454.1-.664M6.75 7.5H4.875c-.621 0-1.125.504-1.125 1.125v12c0 .621.504 1.125 1.125 1.125h9.75c.621 0 1.125-.504 1.125-1.125V16.5a9 9 0 0 0-9-9Z" />
                         </svg>
                     </span>
                 )}

tritonparse-0.2.1.dev20250919071533/website/src/components/DiffComparisonView.tsx

@@ -0,0 +1,207 @@
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { DiffEditor } from "@monaco-editor/react";
+
+interface DiffOptions {
+  ignoreWhitespace?: boolean;
+  wordLevel?: boolean; // kept for future, Monaco uses its own algorithm
+  context?: number; // lines of context when hiding unchanged regions
+  wordWrap?: "off" | "on";
+  onlyChanged?: boolean;
+}
+
+interface DiffComparisonViewProps {
+  leftContent: string;
+  rightContent: string;
+  language?: string;
+  height?: string;
+  options?: DiffOptions;
+}
+
+const DiffComparisonView: React.FC<DiffComparisonViewProps> = ({
+  leftContent,
+  rightContent,
+  language = "plaintext",
+  height = "calc(100vh - 12rem)",
+  options,
+}) => {
+  const monacoOptions = useMemo(() => {
+    const hideUnchanged = options?.onlyChanged
+      ? {
+          enabled: true,
+          revealLineCount: Math.max(0, options?.context ?? 3),
+        }
+      : undefined;
+
+    const opts = {
+      readOnly: true,
+      renderSideBySide: true,
+      renderOverviewRuler: true,
+      renderIndicators: true,
+      // Enable diff-editor level word wrap (VSCode has a separate setting for this)
+      diffWordWrap: "on",
+      wordWrap: options?.wordWrap ?? "on",
+      // Force both sides to honor wrap regardless of per-side defaults
+      wordWrapOverride1: "on",
+      wordWrapOverride2: "on",
+      wordWrapMinified: true,
+      wrappingStrategy: "advanced",
+      // Ensure even original (left) honors wrapping consistently
+      originalEditable: false,
+      ignoreTrimWhitespace: options?.ignoreWhitespace ?? true,
+      // @ts-ignore - monaco types may vary by version; it's safe to pass through
+      hideUnchangedRegions: hideUnchanged,
+      // @ts-ignore - prefer advanced algorithm if available
+      diffAlgorithm: "advanced",
+      // @ts-ignore - hide horizontal scrollbar when wrapping
+      scrollbar: {
+        vertical: 'auto',
+        horizontal: 'hidden',
+        horizontalScrollbarSize: 0,
+      },
+      // keep view lean
+      minimap: { enabled: false },
+      scrollBeyondLastLine: false,
+      automaticLayout: true,
+    } as any;
+    return opts;
+  }, [options]);
+
+  const editorRef = useRef<any>(null);
+
+  // Keep both panes in sync when options change
+  useEffect(() => {
+    const editor = editorRef.current;
+    if (!editor) return;
+    try {
+      const wrap = options?.wordWrap ?? "on";
+      const original = editor.getOriginalEditor?.();
+      const modified = editor.getModifiedEditor?.();
+      const shared = { wordWrap: wrap, wordWrapMinified: true, wrappingStrategy: 'advanced', scrollbar: { horizontal: 'hidden', horizontalScrollbarSize: 0 } } as any;
+      original?.updateOptions?.(shared);
+      modified?.updateOptions?.(shared);
+    } catch {}
+  }, [options?.wordWrap]);
+
+  // Ensure diff editor is fully disposed on unmount to avoid Monaco race conditions
+  useEffect(() => {
+    return () => {
+      try {
+        const editor: any = editorRef.current;
+        if (editor) {
+          try { editor.setModel?.(null); } catch {}
+          try { editor.getOriginalEditor?.()?.setModel?.(null); } catch {}
+          try { editor.getModifiedEditor?.()?.setModel?.(null); } catch {}
+          try { editor.dispose?.(); } catch {}
+        }
+      } catch {}
+      editorRef.current = null as any;
+      try { (window as any).__DIFF = undefined; } catch {}
+    };
+  }, []);
+
+  // Vertical resizable container: keep width 100%, allow drag to change height
+  const initialPxHeight = useMemo(() => {
+    // If a pixel value is provided, use it directly
+    if (typeof height === 'string') {
+      const pxMatch = height.match(/(\d+)px$/);
+      if (pxMatch) {
+        try { return parseInt(pxMatch[1], 10); } catch { /* ignore */ }
+      }
+
+      // Support calc(100vh - Xrem)
+      const calcRemMatch = height.match(/calc\(100vh\s*-\s*(\d+(?:\.\d+)?)rem\)/i);
+      if (calcRemMatch && typeof window !== 'undefined') {
+        const rem = parseFloat(calcRemMatch[1]);
+        const remPx = rem * 16; // assume 1rem = 16px baseline
+        return Math.max(240, Math.round(window.innerHeight - remPx));
+      }
+
+      // Support plain vh values (e.g., 80vh)
+      const vhMatch = height.match(/(\d+(?:\.\d+)?)vh/i);
+      if (vhMatch && typeof window !== 'undefined') {
+        const vh = parseFloat(vhMatch[1]);
+        return Math.max(240, Math.round(window.innerHeight * (vh / 100)));
+      }
+    }
+
+    // Fallback: viewport height minus 16rem (~256px) if available; otherwise 600px
+    if (typeof window !== 'undefined') {
+      return Math.max(240, window.innerHeight - 256);
+    }
+    return 600;
+  }, [height]);
+
+  const [containerHeight, setContainerHeight] = useState<number>(initialPxHeight);
+
+  return (
+    <div className="w-full border border-gray-200 rounded bg-white">
+      <div
+        className="w-full resize-y overflow-auto"
+        style={{ height: `${containerHeight}px`, minHeight: 240 }}
+        // Browser native resize-y changes element height; Monaco autoLayout observes size
+        onMouseUp={() => {
+          // Capture final height after drag (optional state sync)
+          try {
+            const node = (editorRef.current as any)?.getDomNode?.();
+            if (node && (node as HTMLElement).parentElement) {
+              const h = (node as HTMLElement).parentElement!.clientHeight;
+              if (h > 0) setContainerHeight(h);
+            }
+          } catch {}
+        }}
+      >
+      <DiffEditor
+        height="100%"
+        language={language === "python" ? "python" : "plaintext"}
+        original={leftContent ?? ""}
+        modified={rightContent ?? ""}
+        options={monacoOptions}
+        theme="light"
+        // Ensure both panes use the same wrapping and scrollbar behavior
+        onMount={(editor: any) => {
+          try {
+            editorRef.current = editor;
+
+            const applyWrap = (_when: string) => {
+              try {
+                const wrap = options?.wordWrap ?? "on";
+                const original = editor.getOriginalEditor?.();
+                const modified = editor.getModifiedEditor?.();
+                const shared = { wordWrap: wrap, wordWrapMinified: true, wrappingStrategy: 'advanced', wrappingIndent: 'same', scrollbar: { horizontal: 'hidden', horizontalScrollbarSize: 0 } } as any;
+                original?.updateOptions?.(shared);
+                modified?.updateOptions?.(shared);
+                // Force layout after changing wrap
+                try { original?.layout?.(); } catch {}
+                try { modified?.layout?.(); } catch {}
+              } catch (e) {
+                // swallow errors
+              }
+            };
+
+            // Apply at several timing points to avoid initialization overwrites
+            applyWrap('onMount immediate');
+            requestAnimationFrame(() => applyWrap('onMount rAF'));
+            setTimeout(() => applyWrap('onMount t=0'), 0);
+            setTimeout(() => applyWrap('onMount t=100'), 100);
+            setTimeout(() => applyWrap('onMount t=300'), 300);
+
+            // Re-apply on diff/layout/model changes
+            try { editor.onDidUpdateDiff?.(() => applyWrap('onDidUpdateDiff')); } catch {}
+            try { editor.getOriginalEditor?.()?.onDidLayoutChange?.(() => applyWrap('original onDidLayoutChange')); } catch {}
+            try { editor.getModifiedEditor?.()?.onDidLayoutChange?.(() => applyWrap('modified onDidLayoutChange')); } catch {}
+            try { editor.getOriginalEditor?.()?.onDidChangeModel?.(() => applyWrap('original onDidChangeModel')); } catch {}
+            try { editor.getModifiedEditor?.()?.onDidChangeModel?.(() => applyWrap('modified onDidChangeModel')); } catch {}
+          } catch (e) {
+            // swallow errors
+          }
+        }}
+        loading={<div className="p-4 text-gray-600">Loading diff viewer...</div>}
+      />
+      </div>
+    </div>
+  );
+};
+
+export default DiffComparisonView;
+
+