From ac5dcea92c3c11484b36aa89f91a14685a189d3a Mon Sep 17 00:00:00 2001
From: Nick Riasanovsky <njriasan@meta.com>
Date: Thu, 23 Oct 2025 14:52:40 -0700
Subject: [PATCH] Add the web frontend (#182)

Summary: Pull Request resolved: https://github.com/meta-pytorch/tritonparse/pull/182

Differential Revision: D85376311
---
 website/src/App.tsx              |  27 +++++++-
 website/src/pages/IRAnalysis.tsx | 105 +++++++++++++++++++++++++++++++
 website/src/utils/dataLoader.ts  |  18 ++++++
 3 files changed, 149 insertions(+), 1 deletion(-)
 create mode 100644 website/src/pages/IRAnalysis.tsx

diff --git a/website/src/App.tsx b/website/src/App.tsx
index c6d8d2c..75530ba 100644
--- a/website/src/App.tsx
+++ b/website/src/App.tsx
@@ -12,6 +12,7 @@ import CodeView from "./pages/CodeView";
 import FileDiffView from "./pages/FileDiffView";
 import SingleCodeViewer from "./components/SingleCodeViewer";
 import KernelOverview from "./pages/KernelOverview";
+import IRAnalysis from "./pages/IRAnalysis";
 import DataSourceSelector from "./components/DataSourceSelector";
 import WelcomeScreen from "./components/WelcomeScreen";
 import ExternalLink from "./components/ExternalLink";
@@ -409,7 +410,7 @@ function App() {
         </div>
       );
     } else {
-      // Show either overview, IR code, or file diff based on active tab
+      // Show either overview, IR code, IR analysis, or file diff based on active tab
       if (activeTab === "overview") {
         return (
           <KernelOverview
@@ -420,6 +421,14 @@ function App() {
           />
         );
       }
+      if (activeTab === "ir_analysis") {
+        return (
+          <IRAnalysis
+            kernels={kernels}
+            selectedKernel={selectedKernel}
+          />
+        );
+      }
       if (activeTab === "comparison") {
         return (
           <CodeView
@@ -561,6 +570,22 @@ function App() {
               >
                 File Diff
               </button>
+              <button
+                    className={`px-3 py-2 text-sm font-medium rounded-md ${activeTab === "ir_analysis" ? "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("ir_analysis");
+
+                      if (loadedUrl) {
+                        const newUrl = new URL(window.location.href);
+                        newUrl.searchParams.set("view", "ir_analysis");
+                        window.history.replaceState({}, "", newUrl.toString());
+                      }
+                    }}
+                  >
+                    IR Analysis (Beta)
+                  </button>
             </div>
           </div>
         </div>
diff --git a/website/src/pages/IRAnalysis.tsx b/website/src/pages/IRAnalysis.tsx
new file mode 100644
index 0000000..7d3616e
--- /dev/null
+++ b/website/src/pages/IRAnalysis.tsx
@@ -0,0 +1,105 @@
+import React from "react";
+import { ProcessedKernel } from "../utils/dataLoader";
+
+interface IRAnalysisProps {
+  kernels: ProcessedKernel[];
+  selectedKernel: number;
+}
+
+const formatMetadataValue = (value: any): string => {
+  if (value === null) {
+    return "null";
+  }
+  if (typeof value === "boolean") {
+    return value ? "true" : "false";
+  }
+  if (Array.isArray(value)) {
+    return JSON.stringify(value);
+  }
+  if (typeof value === "object") {
+    return JSON.stringify(value);
+  }
+  return String(value);
+};
+
+interface MetadataItemProps {
+  label: string;
+  value: React.ReactNode;
+}
+
+const MetadataItem: React.FC<MetadataItemProps> = ({ label, value }) => (
+  <div className="flex flex-col">
+    <span className="text-sm font-medium text-gray-500">{label}</span>
+    <span className="font-mono text-sm break-words">{value}</span>
+  </div>
+);
+
+const IRAnalysis: React.FC<IRAnalysisProps> = ({ kernels, selectedKernel }) => {
+  if (kernels.length === 0) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <div className="text-gray-800">No kernel data available</div>
+      </div>
+    );
+  }
+
+  const kernel = kernels[selectedKernel];
+
+  return (
+    <div className="p-6">
+      <h1 className="text-2xl font-bold text-gray-800 mb-6">Triton Kernel IR Analysis</h1>
+
+      <div className="bg-white rounded-lg p-4 mb-4 shadow-sm border border-gray-200">
+        <h2 className="text-xl font-semibold mb-4 text-gray-800">
+          Kernel: {kernel.name}
+        </h2>
+      </div>
+
+      {kernel.irAnalysis.amdBufferOps && (
+        <div className="bg-white rounded-lg p-4 mb-4 shadow-sm border border-gray-200">
+        <h2 className="text-xl font-semibold mb-4 text-gray-800">
+          AMD BufferOps Information
+        </h2>
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <>
+              <MetadataItem
+                label="TTGIR Global Load Count"
+                value={kernel.irAnalysis.amdBufferOps.total || "N/A"}
+              />
+              <MetadataItem
+                label="TTGIR Global Store Count"
+                value={kernel.irAnalysis.amdBufferOps.loads || "N/A"}
+              />
+              <MetadataItem
+                label="TTGIR Buffer Load Count"
+                value={kernel.irAnalysis.amdBufferOps.total || "N/A"}
+              />
+              <MetadataItem
+                label="TTGIR Buffer Store Count"
+                value={kernel.irAnalysis.amdBufferOps.loads || "N/A"}
+              />
+              <MetadataItem
+                label="AMDGCN Global Load Count"
+                value={kernel.irAnalysis.amdBufferOps.total || "N/A"}
+              />
+              <MetadataItem
+                label="AMDGCN Global Store Count"
+                value={kernel.irAnalysis.amdBufferOps.loads || "N/A"}
+              />
+              <MetadataItem
+                label="AMDGCN Buffer Load Count"
+                value={kernel.irAnalysis.amdBufferOps.total || "N/A"}
+              />
+              <MetadataItem
+                label="AMDGCN Buffer Store Count"
+                value={kernel.irAnalysis.amdBufferOps.loads || "N/A"}
+              />
+            </>
+            </div>
+          </div>
+          )}
+    </div>
+  );
+};
+
+export default IRAnalysis;
diff --git a/website/src/utils/dataLoader.ts b/website/src/utils/dataLoader.ts
index 924f990..c64aa51 100644
--- a/website/src/utils/dataLoader.ts
+++ b/website/src/utils/dataLoader.ts
@@ -226,6 +226,23 @@ export interface LogEntry {
     sames?: LaunchSamesData;
 }
 
+/**
+ * AMD BufferOps analysis information
+ */
+export interface AMDBufferOpsInfo {
+    total?: number;
+    loads?: number;
+    stores?: number;
+    atomics?: number;
+}
+
+/**
+ * IR Analysis information
+ */
+export interface IRAnalysisInfo {
+    amdBufferOps?: AMDBufferOpsInfo;
+}
+
 /**
  * Processed kernel data structure for rendering in the UI
  */
@@ -239,6 +256,7 @@ export interface ProcessedKernel {
     pythonSourceInfo?: PythonSourceCodeInfo; // Python source code information
     metadata?: KernelMetadata; // Compilation metadata
     launchDiff?: LogEntry; // Aggregated launch event differences
+    irAnalysis?: IRAnalysisInfo; // IR analysis information
 }
 
 /**