Update website for launch diff (#37)

Summary:
This pull request updates the website to visualize the new `launch_diff` event data generated by the parser. It introduces several new React components to display complex diff information in a user-friendly way. The main `KernelOverview` page is now much more powerful, allowing users to see not just the compilation details of a kernel, but also a detailed breakdown of how its parameters and arguments changed across multiple launches.

## Detailed Changes

### New Components

- **`ArgumentViewer.tsx`**: A new component to display kernel arguments in a structured and readable format.
- **`DiffViewer.tsx`**: A versatile component to visualize the `launch_diff` data. It can render different types of diffs, including argument diffs, value distributions, and simple summaries.
- **`StackDiffViewer.tsx`**: A specialized component for displaying differences in stack traces between launches.

### Page Updates

- **`KernelOverview.tsx`**:
  - **Launch Analysis Section**: A major new section has been added to display the `launch_diff` information. It shows total launches, which parameters were constant, and which ones varied, using the new `ArgumentViewer` and `DiffViewer` components.
  - **Compilation Metadata**: The layout has been improved to better handle long metadata values, preventing UI clutter.
  - **Stack Trace**: The stack trace is now explicitly labeled as the "Compilation Stack Trace".

### Data Loading Logic

- **`dataLoader.ts`**:
  - The data loading logic has been updated to handle the new `launch_diff` event type.
  - `processKernelData` now uses a two-pass approach. The first pass gathers all compilation events, and the second pass attaches the corresponding `launch_diff` data. This ensures that the launch analysis is correctly associated with each kernel.
  - Interfaces (`LogEntry`, `ProcessedKernel`) have been updated to include the `launchDiff` data.

Pull Request resolved: #37

Reviewed By: davidberard98

Differential Revision: D78667053

Pulled By: FindHao

fbshipit-source-id: 361bb839ae2c9ebe6ac772de840854d5b3a358e6

Author: FindHao

website/src/components/ArgumentViewer.tsx

@@ -0,0 +1,134 @@
+import React, { useState } from 'react';
+
+// Renders the value distribution (e.g., "16 (2 times, in launches: 1-2)")
+const DistributionCell: React.FC<{ data: any }> = ({ data }) => {
+    if (!data) return null;
+    if (data.diff_type === 'summary') {
+        return <span className="text-gray-500 italic">{data.summary_text}</span>;
+    }
+    if (data.diff_type === 'distribution' && data.values) {
+        return (
+            <ul className="list-none m-0 p-0 space-y-1">
+                {data.values.map((item: any, index: number) => {
+                    const launchRanges = item.launches
+                        .map((r: any) => (r.start === r.end ? `${r.start + 1}` : `${r.start + 1}-${r.end + 1}`))
+                        .join(', ');
+                    return (
+                        <li key={index}>
+                            <span className="font-mono bg-gray-100 px-1 rounded">{JSON.stringify(item.value)}</span>
+                            <span className="text-gray-500 text-xs ml-2">({item.count} times, in launches: {launchRanges})</span>
+                        </li>
+                    );
+                })}
+            </ul>
+        );
+    }
+    return <span className="font-mono">{JSON.stringify(data)}</span>;
+};
+
+// Renders a single row in the ArgumentViewer table
+const ArgumentRow: React.FC<{
+  argName: string;
+  argData: any;
+  isDiffViewer?: boolean;
+}> = ({ argName, argData, isDiffViewer = false }) => {
+  // Case 1: This is a complex argument with internal differences
+  if (isDiffViewer && argData.diff_type === "argument_diff") {
+    const [isCollapsed, setIsCollapsed] = useState(false);
+    const { sames, diffs } = argData;
+    const hasSames = Object.keys(sames).length > 0;
+    const hasDiffs = Object.keys(diffs).length > 0;
+
+        return (
+            <div className="bg-gray-50 border-b border-gray-200 last:border-b-0">
+                <div 
+                    className="flex items-center space-x-4 p-2 cursor-pointer" 
+                    onClick={() => setIsCollapsed(!isCollapsed)}
+                >
+                    <div className="w-48 flex-shrink-0 font-semibold text-gray-800 break-all">{argName}</div>
+                    <div className="flex-1 text-gray-500 italic text-sm flex items-center">
+                        Complex argument with internal differences
+                        {/* Dropdown arrow icon */}
+                        <svg className={`w-4 h-4 ml-2 transform transition-transform ${isCollapsed ? '' : 'rotate-90'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path></svg>
+                    </div>
+                </div>
+                {!isCollapsed && (
+                    <div className="pb-2 px-4 space-y-3">
+                        {hasSames && (
+                            <div>
+                                <h6 className="text-sm font-semibold text-gray-600 mb-1">Unchanged Properties</h6>
+                                <div className="space-y-1 pl-4">
+                                    {Object.entries(sames).map(([key, value]) => (
+                                        <div key={key} className="flex items-start text-sm">
+                                            <span className="w-28 font-mono text-gray-500 flex-shrink-0">{key}:</span>
+                                            <span className="font-mono">{JSON.stringify(value)}</span>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                        {hasDiffs && (
+                            <div>
+                                <h6 className="text-sm font-semibold text-gray-600 mb-1">Differing Properties</h6>
+                                <div className="space-y-2 pl-4">
+                                    {Object.entries(diffs).map(([key, value]) => (
+                                        <div key={key} className="flex items-start text-sm">
+                                            <span className="w-28 font-mono text-gray-500 flex-shrink-0">{key}:</span>
+                                            <div className="flex-1"><DistributionCell data={value} /></div>
+                                        </div>
+                                    ))}
+                                </div>
+                            </div>
+                        )}
+                    </div>
+                )}
+            </div>
+        );
+    }
+
+    // Case 2: This is a simple argument (in the "Sames" table)
+    return (
+        <div className="flex items-start space-x-4 p-2 border-b border-gray-200 last:border-b-0">
+            <div className="w-48 flex-shrink-0 font-semibold text-gray-800 break-all">{argName}</div>
+            <div className="w-48 flex-shrink-0 text-gray-600">{argData.type}</div>
+            <div className="flex-1 font-mono text-sm">
+                {typeof argData.value !== 'object' || argData.value === null ? 
+                    <span>{String(argData.value)}</span> : 
+                    <pre className="text-xs whitespace-pre-wrap break-all">{JSON.stringify(argData, null, 2)}</pre>
+                }
+            </div>
+        </div>
+    );
+};
+
+// Main container component
+const ArgumentViewer: React.FC<{ args: Record<string, any>; isDiffViewer?: boolean; }> = ({ args, isDiffViewer = false }) => {
+    if (!args || Object.keys(args).length === 0) {
+        return <div className="text-sm text-gray-500 p-2">No arguments to display.</div>;
+    }
+
+    // A "complex view" is needed if we are showing diffs and at least one of them is a complex argument_diff
+    const isComplexView = isDiffViewer && Object.values(args).some(arg => arg.diff_type === 'argument_diff');
+
+    return (
+        <div className="border border-gray-200 rounded-md bg-white">
+            {/* Render header only for the simple, non-complex table view */}
+            {!isComplexView && (
+                <div className="flex items-center space-x-4 p-2 bg-gray-100 font-bold text-gray-800 border-b border-gray-200">
+                    <div className="w-48 flex-shrink-0">Argument Name</div>
+                    <div className="w-48 flex-shrink-0">Type</div>
+                    <div className="flex-1">Value</div>
+                </div>
+            )}
+            
+            {/* Rows */}
+            <div>
+                {Object.entries(args).map(([argName, argData]) => (
+                    <ArgumentRow key={argName} argName={argName} argData={argData} isDiffViewer={isDiffViewer} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default ArgumentViewer;

website/src/components/DiffViewer.tsx

@@ -0,0 +1,96 @@
+import ArgumentViewer from "./ArgumentViewer";
+import React from "react";
+import StackDiffViewer from "./StackDiffViewer";
+
+interface DiffViewerProps {
+  diffs: any;
+}
+
+const DiffViewer: React.FC<DiffViewerProps> = ({ diffs }) => {
+  if (!diffs || Object.keys(diffs).length === 0) {
+    return (
+      <p className="text-sm text-gray-500">No differing fields detected.</p>
+    );
+  }
+
+  // Separate different kinds of diffs
+  const extractedArgs = diffs.extracted_args;
+  const stackDiff = diffs.stack;
+  const otherDiffs = Object.fromEntries(
+    Object.entries(diffs).filter(
+      ([key]) => key !== "extracted_args" && key !== "stack"
+    )
+  );
+
+  const renderSimpleDiff = (_key: string, data: any) => {
+    if (data.diff_type === "summary") {
+      return <p className="font-mono text-sm text-gray-800">{data.summary_text}</p>;
+    }
+    if (data.diff_type === "distribution") {
+      return (
+        <ul className="list-disc list-inside pl-2 text-sm">
+          {data.values.map((item: any, index: number) => {
+            const launchRanges = item.launches
+              .map((r: any) =>
+                r.start === r.end
+                  ? `${r.start + 1}`
+                  : `${r.start + 1}-${r.end + 1}`
+              )
+              .join(", ");
+            return (
+              <li key={index} className="font-mono text-gray-800 break-all">
+                <span className="font-mono bg-gray-100 px-1 rounded">
+                  {JSON.stringify(item.value)}
+                </span>
+                <span className="text-gray-500 text-xs ml-2">
+                  ({item.count} times, in launches: {launchRanges})
+                </span>
+              </li>
+            );
+          })}
+        </ul>
+      );
+    }
+    // Fallback for unexpected structures
+    return <pre>{JSON.stringify(data, null, 2)}</pre>;
+  };
+
+  return (
+    <div className="space-y-4">
+      {extractedArgs && Object.keys(extractedArgs).length > 0 && (
+        <div>
+          <h5 className="text-md font-semibold mb-2 text-gray-700">
+            Extracted Arguments
+          </h5>
+          <ArgumentViewer args={extractedArgs} isDiffViewer={true} />
+        </div>
+      )}
+
+      {Object.keys(otherDiffs).length > 0 && (
+        <div>
+          <h5 className="text-md font-semibold mb-2 text-gray-700">
+            Other Differing Fields
+          </h5>
+          <div className="space-y-3">
+            {Object.entries(otherDiffs).map(([key, value]) => (
+              <div
+                key={key}
+                className="w-full p-2 bg-white rounded border border-gray-200"
+              >
+                <span className="text-sm font-medium text-gray-600 block mb-1 break-all">
+                  {key}
+                </span>
+                <div className="pl-4">{renderSimpleDiff(key, value)}</div>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+      
+      {stackDiff && <StackDiffViewer stackDiff={stackDiff} />}
+
+    </div>
+  );
+};
+
+export default DiffViewer; 

website/src/components/StackDiffViewer.tsx

@@ -0,0 +1,82 @@
+import React, { useState } from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { oneLight } from 'react-syntax-highlighter/dist/esm/styles/prism';
+
+// A single frame of a stack trace
+const StackTraceFrame: React.FC<{ frame: any }> = ({ frame }) => (
+  <div className="font-mono text-xs break-all">
+    <span className="text-gray-500">{frame.filename}</span>:
+    <span className="font-semibold text-blue-600">{frame.line}</span> in{" "}
+    <span className="font-semibold text-green-700">{frame.name}</span>
+    {frame.line_code && (
+       <div className="pl-6 mt-1 bg-gray-100 rounded">
+        <SyntaxHighlighter 
+            language="python" 
+            style={oneLight} 
+            customStyle={{ 
+                margin: 0, 
+                padding: '0.25em 0.5em', 
+                fontSize: '0.75rem',
+                background: 'transparent'
+             }}
+        >
+            {frame.line_code}
+        </SyntaxHighlighter>
+    </div>
+    )}
+  </div>
+);
+
+
+const StackDiffViewer: React.FC<{ stackDiff: any }> = ({ stackDiff }) => {
+  const [isCollapsed, setIsCollapsed] = useState(true);
+
+  if (!stackDiff || stackDiff.diff_type !== 'distribution') {
+    return null;
+  }
+
+  return (
+    <div>
+      <h5 
+        className="text-md font-semibold mb-2 text-gray-700 cursor-pointer flex items-center"
+        onClick={() => setIsCollapsed(!isCollapsed)}
+      >
+        Stack Traces
+        {/* Dropdown arrow icon */}
+        <svg
+          className={`w-4 h-4 ml-2 transform transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
+          fill="none"
+          stroke="currentColor"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M9 5l7 7-7 7"></path>
+        </svg>
+      </h5>
+      {!isCollapsed && (
+         <div className="space-y-2">
+          {stackDiff.values.map((item: any, index: number) => {
+            const launchRanges = item.launches
+              .map((r: any) => (r.start === r.end ? `${r.start + 1}` : `${r.start + 1}-${r.end + 1}`))
+              .join(", ");
+            
+            return (
+              <div key={index} className="bg-white p-2 rounded border border-gray-200">
+                <p className="text-xs font-semibold text-gray-600 mb-1">
+                  Variant seen {item.count} times (in launches: {launchRanges})
+                </p>
+                <div className="space-y-1 bg-gray-50 p-1 rounded">
+                   {Array.isArray(item.value) ? item.value.map((frame: any, frameIndex: number) => (
+                    <StackTraceFrame key={frameIndex} frame={frame} />
+                  )) : <p>Invalid stack format</p>}
+                </div>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default StackDiffViewer;