[Feature]Variable loc info PR3: Add frontend UI support for location alias visualization

[FindHao]

Summary

This PR adds frontend visualization support for location aliases in the web interface. It extends the TypeScript interfaces to include alias metadata, updates all three code viewer components to detect and highlight location definition lines, and creates a new CSS file with styling for visual distinction.

Changes

TypeScript Interface Updates (website/src/utils/dataLoader.ts)

Extended SourceMapping interface with new optional fields:

• type?: "code" | "loc_def" - Distinguishes code lines from loc definition lines
• loc_id?: string - The #loc identifier (e.g., "13" for #loc13, "" for bare #loc)
• alias_name?: string - Name from alias definition (e.g., "x_ptr", "pid")
• alias_of?: string - Target #loc that this alias references
• kind?: string - Deprecated alias for type, kept for backward compatibility

Code Viewer Enhancements (website/src/components/CodeViewer.tsx)

All three viewer components updated:

1. BasicCodeViewer - For extremely large files (plain text rendering)
2. LargeFileViewer - For large files (virtualized with syntax highlighting)
3. StandardCodeViewer - For normal files (full syntax highlighting)

New functionality:

• Import CodeViewer.css for loc definition styling
• Add sourceMapping prop to all viewer component signatures
• Detect loc definition lines via mapping.type === "loc_def" || mapping.kind === "loc_def"
• Apply .loc-definition-line CSS class for visual marking
• Generate informative tooltips showing alias chain information
• Set data attributes for debugging and future features

Tooltip format:

• For aliases: "Alias: x_ptr (#loc13) → #loc → file.py:308:0"
• For definitions: "Location definition: #loc13 → file.py:308:0"

Data attributes added:

• data-loc-id: The location identifier
• data-alias-name: The alias name if present
• data-loc-def: Set to "true" for definition lines

Styling (website/src/components/CodeViewer.css - NEW FILE)

Loc definition line styles:

• Background: Golden color (rgba(255, 215, 0, 0.15)) for subtle highlighting
• Left border: 2px solid golden (#DAA520) for clear visual marker
• Hover state: Increased opacity (0.25) for better visibility
• Dark theme: Adjusted colors with darker golden tones

Additional styles prepared:

• .alias-badge: Inline badge styling (prepared for future inline display)
• .alias-name-indicator: For potential future enhancements
• Responsive to theme changes

User Experience

Visual Indicators

Location definition lines are now clearly marked with:

• Subtle golden background tint
• Left border accent
• Enhanced highlighting on hover

Interactive Tooltips

Hovering over location definition lines shows:

• Alias name and identifier
• Alias chain (which #loc it points to)
• Source file location with line and column

Example Screenshots

Before (no visual distinction):
  13 | #loc13 = loc("x_ptr"(#loc))
  14 | #loc14 = loc("y_ptr"(#loc))

After (with golden background and tooltip):
  13 | #loc13 = loc("x_ptr"(#loc))      ← [Tooltip: Alias: x_ptr (#loc13) → #loc → test.py:308:0]
  14 | #loc14 = loc("y_ptr"(#loc))      ← [Golden highlight indicates loc definition]

Benefits

1. Visual Distinction: Users can immediately identify location definitions
2. Rich Context: Tooltips provide full alias chain information
3. Better Navigation: Clear marking helps understand IR structure
4. Theme Support: Works in both light and dark modes
5. Non-intrusive: Subtle styling doesn't overwhelm the interface
6. Accessible: Uses color + border for better accessibility

Backward Compatibility

• ✅ Old log files without alias metadata work perfectly
• ✅ Optional fields prevent TypeScript errors
• ✅ Graceful degradation when metadata is missing
• ✅ No breaking changes to existing components

Dependencies

• Requires: PR1 (main #loc key fix)
• Requires: PR2 (backend alias parsing and metadata)
• Builds on: Both previous PRs to complete the feature

Implementation Details

Tooltip Construction Logic

if (mapping?.alias_name) {
  // Has alias name: show full chain
  title = `Alias: ${mapping.alias_name}`;
  if (locId) title += ` (#loc${locId})`;
  if (aliasOf) title += ` → #loc${aliasOf}`;
  if (mapping.file) {
    const fileName = mapping.file.split('/').pop();
    title += ` → ${fileName}:${mapping.line}:${mapping.column}`;
  }
} else if (isLocDef && mapping?.loc_id) {
  // No alias name: just show it's a definition
  title = `Location definition: #loc${mapping.loc_id}`;
  if (mapping.file) {
    const fileName = mapping.file.split('/').pop();
    title += ` → ${fileName}:${mapping.line}:${mapping.column}`;
  }
}

CSS Class Application

let className = '';
if (isHighlighted) className += 'highlighted-line ';
if (isLocDef) className += 'loc-definition-line ';

Files Changed

• website/src/utils/dataLoader.ts: +6 lines (interface extension)
• website/src/components/CodeViewer.tsx: +68 lines (viewer updates)
• website/src/components/CodeViewer.css: +43 lines (NEW FILE - styling)

Total: 117 lines added across 3 files

Testing

Manual Testing

1. Load a log file with new TTIR format containing aliases
2. Navigate to TTIR/TTGIR view
3. Verify golden background on location definition lines
4. Hover over definitions to see tooltips
5. Test both light and dark themes
6. Verify old format files still work

Browser Compatibility

• ✅ Chrome/Edge (Chromium)
• ✅ Firefox
• ✅ Safari

Future Enhancements

This PR lays the groundwork for:

• Click-to-jump to location definition (deferred to avoid conflict with IR mapping)
• Inline alias badges next to code
• Alias relationship visualization graph
• Search/filter by alias name

Screenshot

Related PRs

• Depends on: PR1 (main #loc key fix)
• Depends on: PR2 (backend alias parsing)
• Completes: The full location alias feature implementation

[meta-codesync]

@FindHao has imported this pull request. If you are a Meta employee, you can view this in D85675640.

[meta-codesync]

@FindHao merged this pull request in 479c9ac.