fix: hoc causing flat indentation

src/view/components/elements/TreeView.test.tsx

@@ -1,6 +1,6 @@
 import { h } from "preact";
 import { render } from "@testing-library/preact";
-import { TreeItem } from "./TreeView";
+import { HocLabels, TreeItem } from "./TreeView";
 import { expect } from "vitest";
 import { AppCtx } from "../../store/react-bindings";
 import { createStore } from "../../store";
@@ -39,4 +39,54 @@ describe("TreeItem", () => {
 
 		expect(container.textContent).to.equal('foo key="foobar",');
 	});
+
+	it("should collapse overflowing HOC labels behind a count badge", () => {
+		const { container } = render(
+			<HocLabels
+				hocs={["withFoo", "withBar", "withBaz", "withQux"]}
+				nodeId={1}
+				canMark={false}
+				maxVisible={2}
+			/>,
+		);
+
+		const labels = container.querySelectorAll('[data-hoc-kind="label"]');
+		expect(labels).to.have.length(2);
+		expect(labels[0].textContent).to.equal("withFoo");
+		expect(labels[1].textContent).to.equal("withBar");
+		expect(
+			container.querySelector('[data-hoc-kind="overflow"]')?.textContent,
+		).to.equal("+2");
+	});
+
+	it("should show only the HOC count badge when maxVisible is 0", () => {
+		const { container } = render(
+			<HocLabels
+				hocs={["withFoo", "withBar", "withBaz"]}
+				nodeId={1}
+				canMark={false}
+				maxVisible={0}
+			/>,
+		);
+
+		expect(
+			container.querySelectorAll('[data-hoc-kind="label"]'),
+		).to.have.length(0);
+		expect(
+			container.querySelector('[data-hoc-kind="overflow"]')?.textContent,
+		).to.equal("+3");
+	});
+
+	it("should show all HOC labels when maxVisible is not set", () => {
+		const { container } = render(
+			<HocLabels hocs={["withFoo", "withBar"]} nodeId={1} canMark={false} />,
+		);
+
+		expect(
+			container.querySelectorAll('[data-hoc-kind="label"]'),
+		).to.have.length(2);
+		expect(container.querySelector('[data-hoc-kind="overflow"]')).to.equal(
+			null,
+		);
+	});
 });

src/view/components/elements/TreeView.tsx

@@ -58,8 +58,16 @@ export function TreeView() {
 	const search = useSearch();
 
 	const [updateCount, setUpdateCount] = useState(0);
+	const [hocLimits, setHocLimits] = useState<Map<ID, number>>(() => new Map());
 	useResize(() => setUpdateCount(updateCount + 1), [updateCount]);
 
+	const renderRow = useCallback(
+		(id: ID, _: number, top: number) => (
+			<TreeItem key={id} id={id} top={top} maxHocVisible={hocLimits.get(id)} />
+		),
+		[hocLimits],
+	);
+
 	const {
 		children: listItems,
 		containerHeight,
@@ -69,8 +77,7 @@ export function TreeView() {
 		minBufferCount: 5,
 		container: ref,
 		items: nodeList,
-		// eslint-disable-next-line react/display-name
-		renderRow: (id, _, top) => <TreeItem key={id} id={id} top={top} />,
+		renderRow,
 	});
 
 	// Scroll to item on selection change
@@ -84,7 +91,7 @@ export function TreeView() {
 		scrollToItem(searchSelectedId);
 	}, [searchSelectedId, scrollToItem]);
 
-	useAutoIndent(paneRef, [listItems]);
+	useAutoIndent(paneRef, [listItems], setHocLimits);
 
 	// When the devtools is connected, but nothing has been sent to the panel yet
 	const isOnlyConnected = nodeList.length === 0 && roots.length === 0;
@@ -170,7 +177,12 @@ export function MarkResult(props: { text: string; id: ID }) {
 	return <span data-testid="node-name">{text}</span>;
 }
 
-export function TreeItem(props: { key: any; id: ID; top: number }) {
+export function TreeItem(props: {
+	key: any;
+	id: ID;
+	top: number;
+	maxHocVisible?: number;
+}) {
 	const { id } = props;
 	const store = useStore();
 	const as = useSelection();
@@ -233,7 +245,11 @@ export function TreeItem(props: { key: any; id: ID; top: number }) {
 						""
 					)}
 					{filterHoc && node.hocs && node.hocs.length > 0 && (
-						<HocLabels hocs={node.hocs} nodeId={id} />
+						<HocLabels
+							hocs={node.hocs}
+							nodeId={id}
+							maxVisible={props.maxHocVisible}
+						/>
 					)}
 					{isRoot ? <span class="tree-view-root-label">(Root)</span> : ""}
 				</span>
@@ -246,20 +262,42 @@ export function HocLabels({
 	hocs,
 	nodeId,
 	canMark = true,
+	maxVisible,
 }: {
 	hocs: string[];
 	nodeId: number;
 	canMark?: boolean;
+	maxVisible?: number;
 }) {
+	const visibleCount =
+		maxVisible == null
+			? hocs.length
+			: Math.max(0, Math.min(maxVisible, hocs.length));
+	const hiddenCount = hocs.length - visibleCount;
+	const labels = [];
+	for (let i = 0; i < visibleCount; i++) {
+		const hoc = hocs[i];
+		labels.push(
+			<Hoc key={i} small kind="label">
+				{canMark ? <MarkResult text={hoc} id={nodeId} /> : hoc}
+			</Hoc>,
+		);
+	}
+
 	return (
-		<span class="hocs" data-testid="hoc-labels">
-			{hocs.map((hoc, i) => {
-				return (
-					<Hoc key={i} small>
-						{canMark ? <MarkResult text={hoc} id={nodeId} /> : hoc}
-					</Hoc>
-				);
-			})}
+		<span
+			class="hocs"
+			data-testid="hoc-labels"
+			data-hoc-labels={true}
+			data-hoc-count={hocs.length}
+			data-hoc-visible={visibleCount}
+		>
+			{labels}
+			{hiddenCount > 0 && (
+				<Hoc small kind="overflow">
+					+{hiddenCount}
+				</Hoc>
+			)}
 		</span>
 	);
 }

src/view/components/elements/VirtualizedList.tsx

@@ -120,7 +120,7 @@ export function useVirtualizedList<T>({
 			idx++;
 		}
 		return vnodes;
-	}, [items, idx, max, top]);
+	}, [items, idx, max, top, renderRow]);
 
 	return {
 		containerHeight: rowHeight * items.length,