Skip to content

Commit d59e5e5

Browse files
lkollarlkollar
committed
Add HTML flamegraph to sampling profiler
1 parent e73d77f commit d59e5e5

File tree

6 files changed

+1007
-2
lines changed

6 files changed

+1007
-2
lines changed

‎Lib/profiling/sampling/flamegraph.css‎

Lines changed: 275 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,275 @@
1+
body {
2+
font-family:
3+
"Source Sans Pro", "Lucida Grande", "Lucida Sans Unicode", "Geneva",
4+
"Verdana", sans-serif;
5+
margin: 0;
6+
padding: 0;
7+
background: #ffffff;
8+
color: #2e3338;
9+
line-height: 1.6;
10+
}
11+
12+
.header {
13+
background: linear-gradient(135deg, #3776ab 0%, #4584bb 100%);
14+
color: white;
15+
padding: 32px 0;
16+
box-shadow: 0 2px 10px rgba(55, 118, 171, 0.2);
17+
}
18+
19+
.header-content {
20+
max-width: 1200px;
21+
margin: 0 auto;
22+
padding: 0 24px;
23+
display: flex;
24+
flex-direction: column;
25+
align-items: center;
26+
justify-content: center;
27+
text-align: center;
28+
}
29+
30+
.python-logo {
31+
width: auto;
32+
height: 64px;
33+
margin-bottom: 16px;
34+
flex-shrink: 0;
35+
display: flex;
36+
align-items: center;
37+
justify-content: center;
38+
}
39+
40+
.python-logo img {
41+
height: 64px;
42+
width: auto;
43+
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
44+
}
45+
46+
.header-text h1 {
47+
margin: 0;
48+
font-size: 2.5em;
49+
font-weight: 600;
50+
color: white;
51+
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
52+
}
53+
54+
.header-text .subtitle {
55+
margin: 8px 0 0 0;
56+
font-size: 1.1em;
57+
color: rgba(255, 255, 255, 0.9);
58+
font-weight: 300;
59+
}
60+
61+
.controls {
62+
background: #f8f9fa;
63+
border-bottom: 1px solid #e9ecef;
64+
padding: 20px 0;
65+
text-align: center;
66+
}
67+
68+
.controls-content {
69+
max-width: 1200px;
70+
margin: 0 auto;
71+
padding: 0 24px;
72+
}
73+
74+
.controls button {
75+
background: #3776ab;
76+
color: white;
77+
border: none;
78+
padding: 12px 24px;
79+
margin: 0 8px;
80+
border-radius: 6px;
81+
cursor: pointer;
82+
font-weight: 600;
83+
font-size: 14px;
84+
font-family: inherit;
85+
transition: all 0.2s ease;
86+
box-shadow: 0 2px 4px rgba(55, 118, 171, 0.2);
87+
}
88+
89+
.controls button:hover {
90+
background: #2d5aa0;
91+
transform: translateY(-1px);
92+
box-shadow: 0 4px 8px rgba(55, 118, 171, 0.3);
93+
}
94+
95+
.controls button.secondary {
96+
background: #ffd43b;
97+
color: #2e3338;
98+
}
99+
100+
.controls button.secondary:hover {
101+
background: #ffcd02;
102+
}
103+
104+
#chart {
105+
width: 100%;
106+
height: calc(100vh - 160px);
107+
overflow: hidden;
108+
background: #ffffff;
109+
padding: 0 40px;
110+
}
111+
112+
.d3-flame-graph rect {
113+
stroke: rgba(55, 118, 171, 0.3) !important;
114+
stroke-width: 1px !important;
115+
cursor: pointer;
116+
transition: all 0.1s ease;
117+
}
118+
119+
.d3-flame-graph rect:hover {
120+
stroke: #3776ab !important;
121+
stroke-width: 2px !important;
122+
filter: brightness(1.05);
123+
}
124+
125+
.d3-flame-graph text {
126+
font-family: "Source Sans Pro", sans-serif !important;
127+
font-size: 12px !important;
128+
font-weight: 500 !important;
129+
fill: #2e3338 !important;
130+
pointer-events: none !important;
131+
}
132+
133+
.info-panel {
134+
position: fixed;
135+
bottom: 24px;
136+
left: 84px; /* Leave space for the button */
137+
background: white;
138+
padding: 24px;
139+
border-radius: 8px;
140+
border: 1px solid #e9ecef;
141+
font-size: 14px;
142+
max-width: 280px;
143+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
144+
z-index: 1000;
145+
display: none;
146+
}
147+
148+
.info-panel h3 {
149+
margin: 0 0 16px 0;
150+
color: #3776ab;
151+
font-weight: 600;
152+
font-size: 16px;
153+
border-bottom: 2px solid #ffd43b;
154+
padding-bottom: 8px;
155+
}
156+
157+
.info-panel p {
158+
margin: 12px 0;
159+
color: #5a6c7d;
160+
line-height: 1.5;
161+
}
162+
163+
.info-panel strong {
164+
color: #3776ab;
165+
}
166+
167+
#show-info-btn {
168+
position: fixed;
169+
bottom: 32px;
170+
left: 32px;
171+
z-index: 1100;
172+
width: 44px;
173+
height: 44px;
174+
border-radius: 50%;
175+
background: #3776ab;
176+
color: white;
177+
border: none;
178+
font-size: 24px;
179+
box-shadow: 0 2px 8px rgba(55, 118, 171, 0.15);
180+
cursor: pointer;
181+
display: flex;
182+
align-items: center;
183+
justify-content: center;
184+
transition: background 0.2s;
185+
}
186+
187+
#show-info-btn:hover {
188+
background: #2d5aa0;
189+
}
190+
191+
#close-info-btn {
192+
position: absolute;
193+
top: 8px;
194+
right: 12px;
195+
background: none;
196+
border: none;
197+
font-size: 20px;
198+
cursor: pointer;
199+
color: #3776ab;
200+
}
201+
202+
@media (max-width: 600px) {
203+
#show-info-btn {
204+
left: 8px !important;
205+
bottom: 8px !important;
206+
}
207+
.info-panel {
208+
left: 60px !important; /* Still leave space for button */
209+
bottom: 8px !important;
210+
max-width: 90vw !important;
211+
}
212+
}
213+
214+
.legend-panel {
215+
position: fixed;
216+
top: 24px;
217+
left: 24px;
218+
background: white;
219+
padding: 24px;
220+
border-radius: 8px;
221+
border: 1px solid #e9ecef;
222+
font-size: 14px;
223+
max-width: 320px;
224+
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
225+
display: none;
226+
z-index: 1001;
227+
}
228+
229+
.legend-panel h3 {
230+
margin: 0 0 20px 0;
231+
color: #3776ab;
232+
font-weight: 600;
233+
font-size: 18px;
234+
text-align: center;
235+
border-bottom: 2px solid #ffd43b;
236+
padding-bottom: 8px;
237+
}
238+
239+
.legend-item {
240+
display: flex;
241+
align-items: center;
242+
margin: 12px 0;
243+
padding: 10px;
244+
border-radius: 6px;
245+
background: #f8f9fa;
246+
border: 1px solid #e9ecef;
247+
}
248+
249+
.legend-color {
250+
width: 28px;
251+
height: 18px;
252+
border-radius: 4px;
253+
margin-right: 16px;
254+
border: 1px solid rgba(0, 0, 0, 0.1);
255+
flex-shrink: 0;
256+
}
257+
258+
.legend-label {
259+
color: #2e3338;
260+
font-weight: 600;
261+
flex: 1;
262+
}
263+
264+
.legend-description {
265+
color: #5a6c7d;
266+
font-size: 12px;
267+
margin-top: 2px;
268+
font-weight: 400;
269+
}
270+
271+
.chart-container {
272+
background: #ffffff;
273+
margin: 0;
274+
padding: 12px 0;
275+
}

0 commit comments

Comments
 (0)