Merge pull request #354 from preactjs/profiler-hoc-styling

Author: marvinhagemeister

src/view/components/Devtools.module.css

@@ -95,6 +95,7 @@ input {
 	--color-radio: #7245c7;
 	--color-shadow: rgba(0, 0, 0, 0.15);
 	--color-hoc-bg: #ddd;
+	--color-hoc-not-rendered: #ddd;
 	--color-hoc-text: #111;
 	--color-hoc-selected-text: #fff;
 	--color-hoc-selected-bg: #4101b3;
@@ -185,6 +186,7 @@ input {
 	--color-radio: #d2adff;
 	--color-shadow: rgba(255, 255, 255, 0.15);
 	--color-hoc-bg: #505050;
+	--color-hoc-not-rendered: black;
 	--color-hoc-text: #fff;
 	--color-hoc-selected-text: #fff;
 	--color-hoc-selected-bg: #8251d8;

src/view/components/elements/TreeView.tsx

@@ -259,16 +259,18 @@ export function TreeItem(props: { key: any; id: ID; top: number }) {
 export function HocLabels({
 	hocs,
 	nodeId,
+	canMark = true,
 }: {
 	hocs: string[];
 	nodeId: number;
+	canMark?: boolean;
 }) {
 	return (
 		<span class={s.hocs} data-testid="hoc-labels">
 			{hocs.map((hoc, i) => {
 				return (
 					<Hoc key={i} small>
-						<MarkResult text={hoc} id={nodeId} />
+						{canMark ? <MarkResult text={hoc} id={nodeId} /> : hoc}
 					</Hoc>
 				);
 			})}

src/view/components/profiler/flamegraph/FlameGraph.module.css

@@ -65,6 +65,13 @@
 	background-color: transparent;
 	background-size: 0.25rem 0.25rem;
 }
+
+.node[data-weight="-1"]:not([data-commit-parent])
+	[data-testid="hoc-labels"]
+	> * {
+	background: var(--color-hoc-not-rendered);
+}
+
 :global(.dark) .node[data-weight="-1"]:not([data-commit-parent])::after {
 	opacity: 0.5;
 }

src/view/components/profiler/flamegraph/modes/FlamegraphLayout.tsx

@@ -47,15 +47,24 @@ export function FlamegraphLayout({
 				const node = commit.nodes.get(pos.id)!;
 				let text: any = "";
 				if (pos.commitParent || pos.weight === -1) {
-					text = <span data-testid="node-name">{node.name}</span>;
+					text = (
+						<span data-testid="node-name">
+							{node.name}
+							{filterHoc && node.hocs ? (
+								<HocLabels hocs={node.hocs} nodeId={node.id} canMark={false} />
+							) : (
+								""
+							)}
+						</span>
+					);
 				} else {
 					const self = formatTime(commit.selfDurations.get(node.id)!);
 					const total = formatTime(node.endTime - node.startTime);
 					text = (
 						<>
 							<span data-testid="node-name">{node.name}</span>
 							{filterHoc && node.hocs ? (
-								<HocLabels hocs={node.hocs} nodeId={node.id} />
+								<HocLabels hocs={node.hocs} nodeId={node.id} canMark={false} />
 							) : (
 								""
 							)}{" "}

src/view/components/profiler/flamegraph/ranked/RankedLayout.tsx

@@ -62,7 +62,7 @@ export function RankedLayout({
 				const selfDuration = commit.selfDurations.get(node.id) || 0;
 				const hocs =
 					filterHoc && node.hocs ? (
-						<HocLabels hocs={node.hocs} nodeId={node.id} />
+						<HocLabels hocs={node.hocs} nodeId={node.id} canMark={false} />
 					) : (
 						""
 					);