Skip to content

Commit 4e63501

Browse files
lkollarlkollar
committed
Shorten lines in flamegraph.js
1 parent 738bd0a commit 4e63501

File tree

1 file changed

+69
-53
lines changed

1 file changed

+69
-53
lines changed

‎Lib/profiling/sampling/flamegraph.js‎

Lines changed: 69 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -45,69 +45,85 @@ function main() {
4545
const sourceLines = source
4646
.map(
4747
(line) =>
48-
`<div style="font-family: 'SF Mono', 'Monaco', 'Consolas', monospace; font-size: 12px; color: ${line.startsWith("→") ? "#3776ab" : "#5a6c7d"}; white-space: pre; line-height: 1.4; padding: 2px 0;">${line.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;")}</div>`,
48+
`<div style="font-family: 'SF Mono', 'Monaco', 'Consolas', ` +
49+
`monospace; font-size: 12px; color: ${
50+
line.startsWith("→") ? "#3776ab" : "#5a6c7d"
51+
}; white-space: pre; line-height: 1.4; padding: 2px 0;">${line
52+
.replace(/&/g, "&amp;")
53+
.replace(/</g, "&lt;")
54+
.replace(/>/g, "&gt;")}</div>`,
4955
)
5056
.join("");
5157

5258
sourceSection = `
53-
<div style="margin-top: 16px; padding-top: 12px; border-top: 1px solid #e9ecef;">
54-
<div style="color: #3776ab; font-size: 13px; margin-bottom: 8px; font-weight: 600;">📄 Source Code:</div>
55-
<div style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 12px; max-height: 150px; overflow-y: auto;">
56-
${sourceLines}
57-
</div>
58-
</div>
59-
`;
59+
<div style="margin-top: 16px; padding-top: 12px;
60+
border-top: 1px solid #e9ecef;">
61+
<div style="color: #3776ab; font-size: 13px;
62+
margin-bottom: 8px; font-weight: 600;">
63+
Source Code:
64+
</div>
65+
<div style="background: #f8f9fa; border: 1px solid #e9ecef;
66+
border-radius: 6px; padding: 12px; max-height: 150px;
67+
overflow-y: auto;">
68+
${sourceLines}
69+
</div>
70+
</div>`;
6071
} else if (source) {
6172
// Show debug info if source exists but isn't an array
6273
sourceSection = `
63-
<div style="margin-top: 16px; padding-top: 12px; border-top: 1px solid #e9ecef;">
64-
<div style="color: #d32f2f; font-size: 13px; margin-bottom: 8px; font-weight: 600;">🐛 Debug - Source data type: ${typeof source}</div>
65-
<div style="background: #f8f9fa; border: 1px solid #e9ecef; border-radius: 6px; padding: 12px; max-height: 150px; overflow-y: auto; font-family: monospace; font-size: 11px;">
66-
${JSON.stringify(source, null, 2)}
67-
</div>
68-
</div>
69-
`;
74+
<div style="margin-top: 16px; padding-top: 12px;
75+
border-top: 1px solid #e9ecef;">
76+
<div style="color: #d32f2f; font-size: 13px;
77+
margin-bottom: 8px; font-weight: 600;">
78+
[Debug] - Source data type: ${typeof source}
79+
</div>
80+
<div style="background: #f8f9fa; border: 1px solid #e9ecef;
81+
border-radius: 6px; padding: 12px; max-height: 150px;
82+
overflow-y: auto; font-family: monospace; font-size: 11px;">
83+
${JSON.stringify(source, null, 2)}
84+
</div>
85+
</div>`;
7086
}
7187

7288
const tooltipHTML = `
73-
<div>
74-
<div style="color: #3776ab; font-weight: 600; font-size: 16px; margin-bottom: 8px; line-height: 1.3;">
75-
${d.data.funcname || d.data.name}
76-
</div>
77-
<div style="color: #5a6c7d; font-size: 13px; margin-bottom: 12px; font-family: monospace; background: #f8f9fa; padding: 4px 8px; border-radius: 4px;">
78-
${d.data.filename || ""}${d.data.lineno ? ":" + d.data.lineno : ""}
79-
</div>
80-
<div style="display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: 14px;">
81-
<span style="color: #5a6c7d; font-weight: 500;">Execution Time:</span>
82-
<strong style="color: #2e3338;">${timeMs} ms</strong>
83-
84-
<span style="color: #5a6c7d; font-weight: 500;">Percentage:</span>
85-
<strong style="color: #3776ab;">${percentage}%</strong>
86-
87-
${
88-
calls > 0
89-
? `
90-
<span style="color: #5a6c7d; font-weight: 500;">Function Calls:</span>
91-
<strong style="color: #2e3338;">${calls.toLocaleString()}</strong>
92-
`
93-
: ""
94-
}
95-
96-
${
97-
childCount > 0
98-
? `
99-
<span style="color: #5a6c7d; font-weight: 500;">Child Functions:</span>
100-
<strong style="color: #2e3338;">${childCount}</strong>
101-
`
102-
: ""
103-
}
104-
</div>
105-
${sourceSection}
106-
<div style="margin-top: 16px; padding-top: 12px; border-top: 1px solid #e9ecef; font-size: 13px; color: #5a6c7d; text-align: center;">
107-
${childCount > 0 ? "👆 Click to focus on this function" : "📄 Leaf function - no children"}
108-
</div>
109-
</div>
110-
`;
89+
<div>
90+
<div style="color: #3776ab; font-weight: 600; font-size: 16px;
91+
margin-bottom: 8px; line-height: 1.3;">
92+
${d.data.funcname || d.data.name}
93+
</div>
94+
<div style="color: #5a6c7d; font-size: 13px; margin-bottom: 12px;
95+
font-family: monospace; background: #f8f9fa;
96+
padding: 4px 8px; border-radius: 4px;">
97+
${d.data.filename || ""}${d.data.lineno ? ":" + d.data.lineno : ""}
98+
</div>
99+
<div style="display: grid; grid-template-columns: auto 1fr;
100+
gap: 8px 16px; font-size: 14px;">
101+
<span style="color: #5a6c7d; font-weight: 500;">Execution Time:</span>
102+
<strong style="color: #2e3338;">${timeMs} ms</strong>
103+
104+
<span style="color: #5a6c7d; font-weight: 500;">Percentage:</span>
105+
<strong style="color: #3776ab;">${percentage}%</strong>
106+
107+
${calls > 0 ? `
108+
<span style="color: #5a6c7d; font-weight: 500;">Function Calls:</span>
109+
<strong style="color: #2e3338;">${calls.toLocaleString()}</strong>
110+
` : ''}
111+
112+
${childCount > 0 ? `
113+
<span style="color: #5a6c7d; font-weight: 500;">Child Functions:</span>
114+
<strong style="color: #2e3338;">${childCount}</strong>
115+
` : ''}
116+
</div>
117+
${sourceSection}
118+
<div style="margin-top: 16px; padding-top: 12px;
119+
border-top: 1px solid #e9ecef; font-size: 13px;
120+
color: #5a6c7d; text-align: center;">
121+
${childCount > 0 ?
122+
"Click to focus on this function" :
123+
"Leaf function - no children"}
124+
</div>
125+
</div>
126+
`;
111127

112128
// Get mouse position
113129
const event = d3.event || window.event;

0 commit comments

Comments
 (0)