Skip to content

Commit 908a9a2

Browse files
FindHaoFindHao
committed
Add frontend UI support for location alias visualization
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.
1 parent 85511d6 commit 908a9a2

File tree

3 files changed

+114
-3
lines changed

3 files changed

+114
-3
lines changed

‎website/src/components/CodeViewer.css‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
/* Location definition line styles */
2+
.loc-definition-line {
3+
background-color: rgba(255, 215, 0, 0.1) !important;
4+
border-left: 3px solid #ffd700 !important;
5+
}
6+
7+
.loc-definition-line:hover {
8+
background-color: rgba(255, 215, 0, 0.2) !important;
9+
}
10+
11+
/* Alias name badge */
12+
.alias-badge {
13+
display: inline-block;
14+
margin-left: 8px;
15+
padding: 2px 6px;
16+
background: #e3f2fd;
17+
border-radius: 3px;
18+
font-size: 0.85em;
19+
color: #1976d2;
20+
font-weight: 500;
21+
vertical-align: middle;
22+
}
23+
24+
.alias-badge:hover {
25+
background: #bbdefb;
26+
}
27+
28+
/* Dark theme adjustments */
29+
[data-theme="dark"] .alias-badge {
30+
background: #1565c0;
31+
color: #e3f2fd;
32+
}
33+
34+
[data-theme="dark"] .alias-badge:hover {
35+
background: #1976d2;
36+
}
37+
38+
/* Loc ID indicator */
39+
.loc-id-indicator {
40+
opacity: 0.6;
41+
font-size: 0.8em;
42+
margin-left: 4px;
43+
}

‎website/src/components/CodeViewer.tsx‎

Lines changed: 65 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
oneDark,
66
} from "react-syntax-highlighter/dist/esm/styles/prism";
77
import type { SourceMapping } from "../utils/dataLoader";
8+
import "./CodeViewer.css";
89

910
// Import language support
1011
import llvm from 'react-syntax-highlighter/dist/esm/languages/prism/llvm';
@@ -207,6 +208,7 @@ const BasicCodeViewer: React.FC<CodeViewerProps> = ({
207208
highlightedLines = [],
208209
onLineClick,
209210
viewerId,
211+
sourceMapping,
210212
}) => {
211213
const containerRef = useRef<HTMLDivElement>(null);
212214
const lines = splitIntoLines(code);
@@ -239,6 +241,21 @@ const BasicCodeViewer: React.FC<CodeViewerProps> = ({
239241
{lines.map((line, index) => {
240242
const lineNumber = index + 1;
241243
const isHighlighted = highlightedLines.includes(lineNumber);
244+
const mapping = sourceMapping?.[lineNumber.toString()];
245+
const isLocDef = mapping?.type === "loc_def" || mapping?.kind === "loc_def";
246+
247+
// Build tooltip text for loc definitions
248+
let tooltipText = "";
249+
if (isLocDef && mapping) {
250+
tooltipText = `Location definition`;
251+
if (mapping.alias_name) {
252+
tooltipText += `: ${mapping.alias_name}`;
253+
}
254+
if (mapping.alias_of !== undefined) {
255+
const targetKey = mapping.alias_of === "" ? "#loc" : `#loc${mapping.alias_of}`;
256+
tooltipText += ` → ${targetKey}`;
257+
}
258+
}
242259

243260
return (
244261
<div
@@ -255,7 +272,11 @@ const BasicCodeViewer: React.FC<CodeViewerProps> = ({
255272
}}
256273
onClick={() => handleLineClick(lineNumber)}
257274
data-line-number={lineNumber}
258-
className={isHighlighted ? 'highlighted-line' : ''}
275+
className={`${isHighlighted ? 'highlighted-line' : ''} ${isLocDef ? 'loc-definition-line' : ''}`}
276+
title={tooltipText}
277+
data-loc-id={mapping?.loc_id}
278+
data-alias-name={mapping?.alias_name}
279+
data-loc-def={isLocDef ? "true" : undefined}
259280
>
260281
<span style={{
261282
position: "absolute",
@@ -290,6 +311,7 @@ const LargeFileViewer: React.FC<CodeViewerProps> = ({
290311
highlightedLines = [],
291312
onLineClick,
292313
viewerId,
314+
sourceMapping,
293315
}) => {
294316
const containerRef = useRef<HTMLDivElement>(null);
295317
const [visibleRange, setVisibleRange] = useState({ start: 0, end: 50 });
@@ -421,6 +443,8 @@ const LargeFileViewer: React.FC<CodeViewerProps> = ({
421443
lineProps={(lineNumber) => {
422444
// Adjust line number based on visible range
423445
const actualLine = lineNumber + visibleRange.start;
446+
const mapping = sourceMapping?.[actualLine.toString()];
447+
const isLocDef = mapping?.type === "loc_def" || mapping?.kind === "loc_def";
424448

425449
// Create styles for the line
426450
const style: React.CSSProperties = {
@@ -440,11 +464,28 @@ const LargeFileViewer: React.FC<CodeViewerProps> = ({
440464

441465
}
442466

467+
// Build tooltip text for loc definitions
468+
let tooltipText = "";
469+
if (isLocDef && mapping) {
470+
tooltipText = `Location definition`;
471+
if (mapping.alias_name) {
472+
tooltipText += `: ${mapping.alias_name}`;
473+
}
474+
if (mapping.alias_of !== undefined) {
475+
const targetKey = mapping.alias_of === "" ? "#loc" : `#loc${mapping.alias_of}`;
476+
tooltipText += ` → ${targetKey}`;
477+
}
478+
}
479+
443480
return {
444481
style,
445482
onClick: () => handleLineClick(actualLine),
446483
'data-line-number': actualLine,
447-
className: isHighlighted ? 'highlighted-line' : '',
484+
className: `${isHighlighted ? 'highlighted-line' : ''} ${isLocDef ? 'loc-definition-line' : ''}`,
485+
title: tooltipText,
486+
'data-loc-id': mapping?.loc_id,
487+
'data-alias-name': mapping?.alias_name,
488+
'data-loc-def': isLocDef ? "true" : undefined,
448489
};
449490
}}
450491
customStyle={{
@@ -474,6 +515,7 @@ const StandardCodeViewer: React.FC<CodeViewerProps> = ({
474515
highlightedLines = [],
475516
onLineClick,
476517
viewerId,
518+
sourceMapping,
477519
}) => {
478520
const containerRef = useRef<HTMLDivElement>(null);
479521

@@ -537,6 +579,22 @@ const StandardCodeViewer: React.FC<CodeViewerProps> = ({
537579
wrapLines={true}
538580
lineProps={(lineNumber) => {
539581
const isHighlighted = highlightedLines.includes(lineNumber);
582+
const mapping = sourceMapping?.[lineNumber.toString()];
583+
const isLocDef = mapping?.type === "loc_def" || mapping?.kind === "loc_def";
584+
585+
// Build tooltip text for loc definitions
586+
let tooltipText = "";
587+
if (isLocDef && mapping) {
588+
tooltipText = `Location definition`;
589+
if (mapping.alias_name) {
590+
tooltipText += `: ${mapping.alias_name}`;
591+
}
592+
if (mapping.alias_of !== undefined) {
593+
const targetKey = mapping.alias_of === "" ? "#loc" : `#loc${mapping.alias_of}`;
594+
tooltipText += ` → ${targetKey}`;
595+
}
596+
}
597+
540598
return {
541599
style: {
542600
backgroundColor: isHighlighted
@@ -549,7 +607,11 @@ const StandardCodeViewer: React.FC<CodeViewerProps> = ({
549607
},
550608
onClick: () => handleLineClick(lineNumber),
551609
"data-line-number": lineNumber,
552-
className: isHighlighted ? 'highlighted-line' : '',
610+
className: `${isHighlighted ? 'highlighted-line' : ''} ${isLocDef ? 'loc-definition-line' : ''}`,
611+
title: tooltipText,
612+
"data-loc-id": mapping?.loc_id,
613+
"data-alias-name": mapping?.alias_name,
614+
"data-loc-def": isLocDef ? "true" : undefined,
553615
};
554616
}}
555617
>

‎website/src/utils/dataLoader.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,12 @@ export interface SourceMapping {
1717
ttgir_lines?: number[]; // Array of corresponding TTGIR lines
1818
llir_lines?: number[]; // Array of corresponding LLIR lines
1919
amdgcn_lines?: number[]; // Array of corresponding AMDGCN lines
20+
// New fields for location alias support
21+
type?: string; // Type of mapping entry, e.g., "loc_def" for loc definition lines
22+
kind?: string; // Deprecated alias for type, kept for backward compatibility
23+
loc_id?: string; // The #loc identifier (e.g., "13" for #loc13)
24+
alias_name?: string; // Name of the alias (e.g., "x_ptr" in #loc13 = loc("x_ptr"(#loc)))
25+
alias_of?: string; // The target #loc this alias points to
2026
}
2127

2228
/**

0 commit comments

Comments
 (0)