Skip to content

Commit 220d5a4

Browse files
FindHaometa-codesync[bot]
authored andcommitted
Add full file display with function highlighting
Summary: Enhance the website to support displaying full Python source files with function range highlighting, in addition to the existing function-only view. This provides better context when debugging by showing the complete file while visually indicating the function boundaries. Changes: - dataLoader.ts: Add function_start_line and function_end_line to PythonSourceCodeInfo type - CodeViewer.tsx: * Add functionStartLine, functionEndLine, initialScrollToLine props * Implement function range highlighting (visual markers for function boundaries) * Add auto-scroll to function position on initial render * Optimize scroll logic using scrollIntoView for accuracy * Remove emoji markers and translate comments to English - CodeViewer.css: Add function range highlight styles (.function-range, .function-range-start, .function-range-end) - CodeView.tsx: Update container styling Reviewed By: adamomainz Differential Revision: D85825564 fbshipit-source-id: 4927c535bb28145028b560ce1bd5651da71deaca
1 parent 2976887 commit 220d5a4

File tree

4 files changed

+258
-145
lines changed

4 files changed

+258
-145
lines changed

website/src/components/CodeViewer.css

Lines changed: 62 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,3 @@
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-
111
/* Alias name badge */
122
.alias-badge {
133
display: inline-block;
@@ -41,3 +31,65 @@
4131
font-size: 0.8em;
4232
margin-left: 4px;
4333
}
34+
35+
/* Function range highlighting styles */
36+
.function-range {
37+
background-color: rgba(255, 235, 59, 0.08);
38+
border-left: 3px solid #ffc107;
39+
}
40+
41+
.function-range-start {
42+
border-top: 2px solid #ffc107;
43+
}
44+
45+
.function-range-end {
46+
border-bottom: 2px solid #ffc107;
47+
}
48+
49+
/* Highlighted line - highest priority */
50+
.highlighted-line {
51+
background-color: rgba(255, 215, 0, 0.4) !important;
52+
border-left: 3px solid orange !important;
53+
}
54+
55+
/* When a line is both highlighted and in function range - highlight takes precedence for bg and border */
56+
.highlighted-line.function-range {
57+
/* Background and left border are from .highlighted-line due to !important */
58+
/* But we preserve the top/bottom borders from function range markers */
59+
}
60+
61+
.highlighted-line.function-range-start {
62+
border-top: 2px solid orange !important;
63+
}
64+
65+
.highlighted-line.function-range-end {
66+
border-bottom: 2px solid orange !important;
67+
}
68+
69+
/* Function marker for the function definition line */
70+
.function-marker {
71+
display: inline-flex;
72+
align-items: center;
73+
gap: 4px;
74+
padding: 2px 8px;
75+
background: #fff3cd;
76+
border-left: 3px solid #ffc107;
77+
font-size: 12px;
78+
color: #856404;
79+
font-weight: 500;
80+
margin-left: 8px;
81+
}
82+
83+
.function-marker .function-icon {
84+
font-size: 14px;
85+
}
86+
87+
/* Dark theme adjustments for function range */
88+
[data-theme="dark"] .function-range {
89+
background-color: rgba(255, 235, 59, 0.12);
90+
}
91+
92+
[data-theme="dark"] .function-marker {
93+
background: #4a4229;
94+
color: #ffd54f;
95+
}

0 commit comments

Comments
 (0)