From 8bfbb0ffa2fff9fd2087158943b5503cc6463643 Mon Sep 17 00:00:00 2001 From: FindHao Date: Sun, 26 Oct 2025 18:40:24 -0400 Subject: [PATCH] Add frontend UI support for location alias visualization MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Frontend changes to visualize location aliases and definition lines: TypeScript interface updates (dataLoader.ts): - Extend SourceMapping interface with new optional fields: * type/kind: Entry type (e.g., "loc_def" for definition lines) * loc_id: The #loc identifier (e.g., "13" for #loc13) * alias_name: Name from alias definition (e.g., "x_ptr") * alias_of: Target #loc that this alias references CodeViewer enhancements (CodeViewer.tsx): - Import CodeViewer.css for loc definition styling - Add sourceMapping prop to BasicCodeViewer, LargeFileViewer, StandardCodeViewer - Detect loc definition lines via mapping.type === "loc_def" - Apply .loc-definition-line CSS class for visual marking - Generate tooltip text showing alias chain information: "Location definition: x_ptr → #loc2" - Set data attributes for debugging and future features: data-loc-id, data-alias-name, data-loc-def Styling (CodeViewer.css - new file): - .loc-definition-line: Golden background (#FFD700 at 15% opacity) - Hover state: Increased opacity (25%) for better visibility - Dark theme support with adjusted colors - .alias-badge: Prepared for future inline badge display This completes the frontend portion enabling users to visually identify location definition lines and understand alias chains through tooltips when hovering over #loc definitions in TTIR/TTGIR. --- website/src/components/CodeViewer.css | 43 +++++++++++++++++ website/src/components/CodeViewer.tsx | 68 +++++++++++++++++++++++++-- website/src/utils/dataLoader.ts | 6 +++ 3 files changed, 114 insertions(+), 3 deletions(-) create mode 100644 website/src/components/CodeViewer.css diff --git a/website/src/components/CodeViewer.css b/website/src/components/CodeViewer.css new file mode 100644 index 0000000..a81f5f2 --- /dev/null +++ b/website/src/components/CodeViewer.css @@ -0,0 +1,43 @@ +/* Location definition line styles */ +.loc-definition-line { + background-color: rgba(255, 215, 0, 0.1) !important; + border-left: 3px solid #ffd700 !important; +} + +.loc-definition-line:hover { + background-color: rgba(255, 215, 0, 0.2) !important; +} + +/* Alias name badge */ +.alias-badge { + display: inline-block; + margin-left: 8px; + padding: 2px 6px; + background: #e3f2fd; + border-radius: 3px; + font-size: 0.85em; + color: #1976d2; + font-weight: 500; + vertical-align: middle; +} + +.alias-badge:hover { + background: #bbdefb; +} + +/* Dark theme adjustments */ +[data-theme="dark"] .alias-badge { + background: #1565c0; + color: #e3f2fd; +} + +[data-theme="dark"] .alias-badge:hover { + background: #1976d2; +} + +/* Loc ID indicator */ +.loc-id-indicator { + opacity: 0.6; + font-size: 0.8em; + margin-left: 4px; +} diff --git a/website/src/components/CodeViewer.tsx b/website/src/components/CodeViewer.tsx index ddf0e86..40b3cd5 100644 --- a/website/src/components/CodeViewer.tsx +++ b/website/src/components/CodeViewer.tsx @@ -5,6 +5,7 @@ import { oneDark, } from "react-syntax-highlighter/dist/esm/styles/prism"; import type { SourceMapping } from "../utils/dataLoader"; +import "./CodeViewer.css"; // Import language support import llvm from 'react-syntax-highlighter/dist/esm/languages/prism/llvm'; @@ -207,6 +208,7 @@ const BasicCodeViewer: React.FC = ({ highlightedLines = [], onLineClick, viewerId, + sourceMapping, }) => { const containerRef = useRef(null); const lines = splitIntoLines(code); @@ -239,6 +241,21 @@ const BasicCodeViewer: React.FC = ({ {lines.map((line, index) => { const lineNumber = index + 1; const isHighlighted = highlightedLines.includes(lineNumber); + const mapping = sourceMapping?.[lineNumber.toString()]; + const isLocDef = mapping?.type === "loc_def" || mapping?.kind === "loc_def"; + + // Build tooltip text for loc definitions + let tooltipText = ""; + if (isLocDef && mapping) { + tooltipText = `Location definition`; + if (mapping.alias_name) { + tooltipText += `: ${mapping.alias_name}`; + } + if (mapping.alias_of !== undefined) { + const targetKey = mapping.alias_of === "" ? "#loc" : `#loc${mapping.alias_of}`; + tooltipText += ` → ${targetKey}`; + } + } return (
= ({ }} onClick={() => handleLineClick(lineNumber)} data-line-number={lineNumber} - className={isHighlighted ? 'highlighted-line' : ''} + className={`${isHighlighted ? 'highlighted-line' : ''} ${isLocDef ? 'loc-definition-line' : ''}`} + title={tooltipText} + data-loc-id={mapping?.loc_id} + data-alias-name={mapping?.alias_name} + data-loc-def={isLocDef ? "true" : undefined} > = ({ highlightedLines = [], onLineClick, viewerId, + sourceMapping, }) => { const containerRef = useRef(null); const [visibleRange, setVisibleRange] = useState({ start: 0, end: 50 }); @@ -421,6 +443,8 @@ const LargeFileViewer: React.FC = ({ lineProps={(lineNumber) => { // Adjust line number based on visible range const actualLine = lineNumber + visibleRange.start; + const mapping = sourceMapping?.[actualLine.toString()]; + const isLocDef = mapping?.type === "loc_def" || mapping?.kind === "loc_def"; // Create styles for the line const style: React.CSSProperties = { @@ -440,11 +464,28 @@ const LargeFileViewer: React.FC = ({ } + // Build tooltip text for loc definitions + let tooltipText = ""; + if (isLocDef && mapping) { + tooltipText = `Location definition`; + if (mapping.alias_name) { + tooltipText += `: ${mapping.alias_name}`; + } + if (mapping.alias_of !== undefined) { + const targetKey = mapping.alias_of === "" ? "#loc" : `#loc${mapping.alias_of}`; + tooltipText += ` → ${targetKey}`; + } + } + return { style, onClick: () => handleLineClick(actualLine), 'data-line-number': actualLine, - className: isHighlighted ? 'highlighted-line' : '', + className: `${isHighlighted ? 'highlighted-line' : ''} ${isLocDef ? 'loc-definition-line' : ''}`, + title: tooltipText, + 'data-loc-id': mapping?.loc_id, + 'data-alias-name': mapping?.alias_name, + 'data-loc-def': isLocDef ? "true" : undefined, }; }} customStyle={{ @@ -474,6 +515,7 @@ const StandardCodeViewer: React.FC = ({ highlightedLines = [], onLineClick, viewerId, + sourceMapping, }) => { const containerRef = useRef(null); @@ -537,6 +579,22 @@ const StandardCodeViewer: React.FC = ({ wrapLines={true} lineProps={(lineNumber) => { const isHighlighted = highlightedLines.includes(lineNumber); + const mapping = sourceMapping?.[lineNumber.toString()]; + const isLocDef = mapping?.type === "loc_def" || mapping?.kind === "loc_def"; + + // Build tooltip text for loc definitions + let tooltipText = ""; + if (isLocDef && mapping) { + tooltipText = `Location definition`; + if (mapping.alias_name) { + tooltipText += `: ${mapping.alias_name}`; + } + if (mapping.alias_of !== undefined) { + const targetKey = mapping.alias_of === "" ? "#loc" : `#loc${mapping.alias_of}`; + tooltipText += ` → ${targetKey}`; + } + } + return { style: { backgroundColor: isHighlighted @@ -549,7 +607,11 @@ const StandardCodeViewer: React.FC = ({ }, onClick: () => handleLineClick(lineNumber), "data-line-number": lineNumber, - className: isHighlighted ? 'highlighted-line' : '', + className: `${isHighlighted ? 'highlighted-line' : ''} ${isLocDef ? 'loc-definition-line' : ''}`, + title: tooltipText, + "data-loc-id": mapping?.loc_id, + "data-alias-name": mapping?.alias_name, + "data-loc-def": isLocDef ? "true" : undefined, }; }} > diff --git a/website/src/utils/dataLoader.ts b/website/src/utils/dataLoader.ts index c064e49..eef76bd 100644 --- a/website/src/utils/dataLoader.ts +++ b/website/src/utils/dataLoader.ts @@ -17,6 +17,12 @@ export interface SourceMapping { ttgir_lines?: number[]; // Array of corresponding TTGIR lines llir_lines?: number[]; // Array of corresponding LLIR lines amdgcn_lines?: number[]; // Array of corresponding AMDGCN lines + // New fields for location alias support + type?: string; // Type of mapping entry, e.g., "loc_def" for loc definition lines + kind?: string; // Deprecated alias for type, kept for backward compatibility + loc_id?: string; // The #loc identifier (e.g., "13" for #loc13) + alias_name?: string; // Name of the alias (e.g., "x_ptr" in #loc13 = loc("x_ptr"(#loc))) + alias_of?: string; // The target #loc this alias points to } /**