diff --git a/website/package-lock.json b/website/package-lock.json index 78aec39..a68dfac 100644 --- a/website/package-lock.json +++ b/website/package-lock.json @@ -1,12 +1,12 @@ { "name": "tritonparse-website", - "version": "0.1.1", + "version": "0.1.2", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "tritonparse-website", - "version": "0.1.1", + "version": "0.1.2", "dependencies": { "@monaco-editor/react": "^4.7.0", "@types/react-syntax-highlighter": "^15.5.7", @@ -848,9 +848,9 @@ } }, "node_modules/@eslint/core": { - "version": "0.15.1", - "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.1.tgz", - "integrity": "sha512-bkOp+iumZCCbt1K1CmWf0R9pM5yKpDv+ZXtvSyQpudrI9kuFLp+bM2WOPXImuD/ceQuaa8f5pj93Y7zyECIGNA==", + "version": "0.15.2", + "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.15.2.tgz", + "integrity": "sha512-78Md3/Rrxh83gCxoUc0EiciuOHsIITzLy53m3d9UyiW8y9Dj2D29FeETqyKA+BRK76tnTp6RXWb3pCay8Oyomg==", "dev": true, "license": "Apache-2.0", "dependencies": { @@ -921,13 +921,13 @@ } }, "node_modules/@eslint/plugin-kit": { - "version": "0.3.3", - "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.3.tgz", - "integrity": "sha512-1+WqvgNMhmlAambTvT3KPtCl/Ibr68VldY2XY40SL1CE0ZXiakFR/cbTspaF5HsnpDMvcYYoJHfl4980NBjGag==", + "version": "0.3.5", + "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.3.5.tgz", + "integrity": "sha512-Z5kJ+wU3oA7MMIqVR9tyZRtjYPr4OC004Q4Rw7pgOKUOKkJfZ3O24nz3WYfGRpMDNmcOi3TwQOmgm7B7Tpii0w==", "dev": true, "license": "Apache-2.0", "dependencies": { - "@eslint/core": "^0.15.1", + "@eslint/core": "^0.15.2", "levn": "^0.4.1" }, "engines": { diff --git a/website/package.json b/website/package.json index 0622d0a..a4fc81e 100644 --- a/website/package.json +++ b/website/package.json @@ -1,7 +1,7 @@ { "name": "tritonparse-website", "private": true, - "version": "0.1.1", + "version": "0.1.2", "type": "module", "scripts": { "dev": "vite", diff --git a/website/src/pages/KernelOverview.tsx b/website/src/pages/KernelOverview.tsx index aa63047..fac0a86 100644 --- a/website/src/pages/KernelOverview.tsx +++ b/website/src/pages/KernelOverview.tsx @@ -5,22 +5,22 @@ import { ProcessedKernel } from "../utils/dataLoader"; import ToggleSwitch from "../components/ToggleSwitch"; interface KernelOverviewProps { - /** A list of all processed kernels available for viewing. */ - kernels: ProcessedKernel[]; - /** The index of the currently selected kernel. */ - selectedKernel: number; - /** Callback function to handle kernel selection. */ - onSelectKernel: (index: number) => void; - /** Callback function to handle viewing an IR file. */ - onViewIR: (irType: string) => void; + /** A list of all processed kernels available for viewing. */ + kernels: ProcessedKernel[]; + /** The index of the currently selected kernel. */ + selectedKernel: number; + /** Callback function to handle kernel selection. */ + onSelectKernel: (index: number) => void; + /** Callback function to handle viewing an IR file. */ + onViewIR: (irType: string) => void; } /** * Determines if a metadata value is considered "long" and should be displayed at the end */ const isLongValue = (value: any): boolean => { - const formattedString = formatMetadataValue(value); - return formattedString.length > 50; + const formattedString = formatMetadataValue(value); + return formattedString.length > 50; }; /** @@ -29,43 +29,43 @@ const isLongValue = (value: any): boolean => { * @returns Formatted string representation */ 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); + 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); }; /** * Component for displaying a single metadata item with consistent styling */ interface MetadataItemProps { - label: string; - value: React.ReactNode; - span?: number; // Number of columns to span (default: 1) + label: string; + value: React.ReactNode; + span?: number; // Number of columns to span (default: 1) } const MetadataItem: React.FC = ({ - label, - value, - span = 1, + label, + value, + span = 1, }) => ( -
1 ? `col-span-${span}` : ""} ${ - span === 0 ? "col-span-full" : "" - }`} - > - {label} - {value} -
+
1 ? `col-span-${span}` : ""} ${ + span === 0 ? "col-span-full" : "" + }`} + > + {label} + {value} +
); /** @@ -73,10 +73,10 @@ const MetadataItem: React.FC = ({ * @param entry - The stack entry */ const getSourceFilePath = (entry: any): string => { - if (typeof entry.filename === "string") { - return entry.filename; - } - return "Invalid filename format"; + if (typeof entry.filename === "string") { + return entry.filename; + } + return "Invalid filename format"; }; /** @@ -84,352 +84,404 @@ const getSourceFilePath = (entry: any): string => { * It includes a kernel selector, metadata display, launch analysis, and IR file links. */ const KernelOverview: React.FC = ({ - kernels, - selectedKernel, - onSelectKernel, - onViewIR, + kernels, + selectedKernel, + onSelectKernel, + onViewIR, }) => { - // State for controlling the sticky and collapsed behavior of the kernel selector - const [isSticky, setIsSticky] = useState(true); - const [isCollapsed, setIsCollapsed] = useState(true); - const buttonsContainerRef = useRef(null); + // State for controlling the sticky and collapsed behavior of the kernel selector + const [isSticky, setIsSticky] = useState(true); + const [isCollapsed, setIsCollapsed] = useState(true); + const buttonsContainerRef = useRef(null); - /** - * Adjusts the scroll position of the kernel buttons container to ensure - * the selected kernel's row is visible when the header is sticky and collapsed. - */ - const adjustScroll = useCallback(() => { - if (isSticky && isCollapsed && buttonsContainerRef.current) { - const container = buttonsContainerRef.current; - const selectedButton = container.children[selectedKernel] as - | HTMLElement - | undefined; + /** + * Adjusts the scroll position of the kernel buttons container to ensure + * the selected kernel's row is visible when the header is sticky and collapsed. + */ + const adjustScroll = useCallback(() => { + if (isSticky && isCollapsed && buttonsContainerRef.current) { + const container = buttonsContainerRef.current; + const selectedButton = container.children[selectedKernel] as + | HTMLElement + | undefined; - if (selectedButton) { - // Scroll the container to bring the selected button's row into view - container.scrollTop = selectedButton.offsetTop; - } - } - }, [isSticky, isCollapsed, selectedKernel]); + if (selectedButton) { + // Scroll the container to bring the selected button's row into view + container.scrollTop = selectedButton.offsetTop; + } + } + }, [isSticky, isCollapsed, selectedKernel]); - // Effect to adjust scroll on state changes and listen for window resizing - useLayoutEffect(() => { - adjustScroll(); + // Effect to adjust scroll on state changes and listen for window resizing + useLayoutEffect(() => { + adjustScroll(); - window.addEventListener("resize", adjustScroll); - return () => { - window.removeEventListener("resize", adjustScroll); - }; - }, [adjustScroll, kernels]); + window.addEventListener("resize", adjustScroll); + return () => { + window.removeEventListener("resize", adjustScroll); + }; + }, [adjustScroll, kernels]); - if (kernels.length === 0) { - return ( -
-
No kernel data available
-
- ); - } + if (kernels.length === 0) { + return ( +
+
No kernel data available
+
+ ); + } - const kernel = kernels[selectedKernel]; + const kernel = kernels[selectedKernel]; - return ( -
-

- Triton Kernel Overview -

+ return ( +
+

+ Triton Kernel Overview +

- {/* Kernel Selection */} -
isSticky && setIsCollapsed(false)} - onMouseLeave={() => isSticky && setIsCollapsed(true)} - > -
-

- Available Kernels -

-
- - Sticky Header - - -
-
-
- {kernels.map((k, index) => ( - - ))} -
-
- - {/* Kernel Details */} -
-

- Kernel Details: {kernel.name} -

- - {/* Metadata Section */} - {kernel.metadata && ( -
-

- Compilation Metadata -

-
- {/* Short fields in responsive grid */} -
- {/* All short metadata fields */} - {Object.entries(kernel.metadata) - .filter(([_key, value]) => !isLongValue(value)) - .map(([key, value]) => { - return ( - - word.charAt(0).toUpperCase() + word.slice(1) - ) - .join(" ")} - value={formatMetadataValue(value)} - /> - ); - })} -
- - {/* Long fields in separate section within same container */} - {Object.entries(kernel.metadata).filter(([_key, value]) => - isLongValue(value) - ).length > 0 && ( -
- {Object.entries(kernel.metadata) - .filter(([_key, value]) => isLongValue(value)) - .map(([key, value]) => ( -
- - {key - .split("_") - .map( - (word) => - word.charAt(0).toUpperCase() + word.slice(1) - ) - .join(" ")} - - - {formatMetadataValue(value)} +
+

+ Available Kernels +

+
+ + Sticky Header -
+ +
+
+
+ {kernels.map((k, index) => ( + ))}
- )}
-
- )} - {/* Launch Analysis Section */} - {kernel.launchDiff && ( -
-

- Launch Analysis -

-
-

- Total Launches:{" "} - {kernel.launchDiff.total_launches} -

+ {/* Kernel Details */} +
+

+ Kernel Details: {kernel.name} +

- {/* Launch Index Map */} - {kernel.launchDiff.launch_index_map && ( -
-

- Launch Locations in Original Trace{" "} - - (1-based line numbers) - -

-
- {kernel.launchDiff.launch_index_map - .map((r: any) => - r.start === r.end - ? `${r.start}` - : `${r.start}-${r.end}` - ) - .join(", ")} -
-
- )} + {/* Metadata Section */} + {kernel.metadata && ( +
+

+ Compilation Metadata +

+
+ {/* Short fields in responsive grid */} +
+ {/* All short metadata fields */} + {Object.entries(kernel.metadata) + .filter( + ([_key, value]) => !isLongValue(value) + ) + .map(([key, value]) => { + return ( + + word + .charAt(0) + .toUpperCase() + + word.slice(1) + ) + .join(" ")} + value={formatMetadataValue( + value + )} + /> + ); + })} +
- {/* Unchanged Fields */} - {kernel.launchDiff.sames && Object.keys(kernel.launchDiff.sames).length > 0 && ( -
-

- Unchanged Launch Arguments -

- -
- )} + {/* Long fields in separate section within same container */} + {Object.entries(kernel.metadata).filter( + ([_key, value]) => isLongValue(value) + ).length > 0 && ( +
+ {Object.entries(kernel.metadata) + .filter(([_key, value]) => + isLongValue(value) + ) + .map(([key, value]) => ( +
+ + {key + .split("_") + .map( + (word) => + word + .charAt(0) + .toUpperCase() + + word.slice(1) + ) + .join(" ")} + + + {formatMetadataValue(value)} + +
+ ))} +
+ )} +
+
+ )} - {(() => { - if (!kernel.launchDiff.sames) return null; + {/* Launch Analysis Section */} + {kernel.launchDiff && ( +
+

+ Launch Analysis +

+
+

+ + Total Launches: + {" "} + {kernel.launchDiff.total_launches} +

- const otherSames = Object.fromEntries( - Object.entries(kernel.launchDiff.sames).filter( - ([key]) => - key !== "compilation_metadata" && - key !== "extracted_args" && - key !== "event_type" - ) - ); + {/* Launch Index Map */} + {kernel.launchDiff.launch_index_map && ( +
+

+ Launch Locations in Original Trace{" "} + + (1-based line numbers) + +

+
+ {kernel.launchDiff.launch_index_map + .map((r: any) => + r.start === r.end + ? `${r.start}` + : `${r.start}-${r.end}` + ) + .join(", ")} +
+
+ )} - if (Object.keys(otherSames).length > 0) { - return ( -
-

- Other Unchanged Fields -

-
- {Object.entries(otherSames).map(([key, value]) => ( - - word.charAt(0).toUpperCase() + word.slice(1) - ) - .join(" ")} - value={formatMetadataValue(value)} - /> - ))} -
-
- ); - } - return null; - })()} + {/* Unchanged Fields */} + {kernel.launchDiff.sames && + Object.keys(kernel.launchDiff.sames).length > + 0 && ( +
+

+ Unchanged Launch Arguments +

+ +
+ )} - {/* Differing Fields */} -
-

- Differing Fields -

- -
-
-
- )} + {(() => { + if (!kernel.launchDiff.sames) return null; - {/* Stack Trace */} -
-

- Compilation Stack Trace -

-
- {kernel.stack.map((entry, index) => ( -
- - {getSourceFilePath(entry)} - - :{entry.line} - - {entry.name} - - {entry.loc} -
- ))} -
-
+ const otherSames = Object.fromEntries( + Object.entries( + kernel.launchDiff.sames + ).filter( + ([key]) => + key !== "compilation_metadata" && + key !== "extracted_args" && + key !== "event_type" + ) + ); - {/* Available IR Files */} -
-

IR Files

-
- {Object.keys(kernel.irFiles).map((irType) => ( -
onViewIR(irType)} - > -
-
- {/* SVG icon representing a document/file */} - - - -
-
-

- {irType} + if (Object.keys(otherSames).length > 0) { + return ( +
+

+ Other Unchanged Fields +

+
+ {Object.entries(otherSames).map( + ([key, value]) => ( + + word + .charAt( + 0 + ) + .toUpperCase() + + word.slice( + 1 + ) + ) + .join(" ")} + value={formatMetadataValue( + value + )} + /> + ) + )} +
+
+ ); + } + return null; + })()} + + {/* Differing Fields */} +
+

+ Differing Fields +

+ +
+

+
+ )} + + {/* Compilation Stack Trace */} +
+

+ Compilation Stack Trace

-

- View full IR code -

-
-
- {/* Right arrow icon indicating clickable action */} - - - -
+
+ {kernel.stack.map((entry, index) => ( +
+ + {getSourceFilePath(entry)} + + : + + {entry.line} + {" "} + - + + {entry.name} + {" "} + - + + {entry.loc} + +
+ ))} +
-
- ))} -
+ + {/* Available IR Files */} +
+

+ IR Files +

+
+ {Object.keys(kernel.irFiles).map((irType) => ( +
onViewIR(irType)} + > +
+
+ {/* SVG icon representing a document/file */} + + + +
+
+

+ {irType} +

+

+ View full IR code +

+
+
+ {/* Right arrow icon indicating clickable action */} + + + +
+
+
+ ))} +
+
+
-
-
- ); + ); }; export default KernelOverview;