feat(extension): support grouped updates (#752)

* feat(extension): support grouped updates

This makes the existing "group updates" setting work.

When enabled, repeated updates of the same tree will be grouped into one
node with a count.

The updates are not lost, in that the setting can be disable to
re-expand the nodes.

* feat(extension): add collapsed tree to store

* feat(extension): add count to tree nodes

* feat(extension): use a union for node types and display first value

Author: 43081j

.editorconfig

@@ -7,7 +7,7 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 
-[{*.json,.*rc,*.yml}]
+[{*.json,.*rc,*.yml,*.css}]
 indent_style = space
 indent_size = 2
 insert_final_newline = false

extension/src/components/UpdateItem.tsx

@@ -2,9 +2,11 @@ import { SignalUpdate } from "../types";
 
 interface UpdateItemProps {
 	update: SignalUpdate;
+	firstUpdate?: SignalUpdate;
+	count?: number;
 }
 
-export function UpdateItem({ update }: UpdateItemProps) {
+export function UpdateItem({ update, count, firstUpdate }: UpdateItemProps) {
 	const time = new Date(
 		update.timestamp || update.receivedAt
 	).toLocaleTimeString();
@@ -23,13 +25,19 @@ export function UpdateItem({ update }: UpdateItemProps) {
 		}
 		return String(value);
 	};
+	const countLabel = count && (
+		<span class="update-count" title="Number of grouped identical updates">
+			x{count}
+		</span>
+	);
 
 	if (update.type === "effect") {
 		return (
 			<div className={`update-item ${update.type}`}>
 				<div className="update-header">
 					<span className="signal-name">
 						↪️ {update.signalName}
+						{countLabel}
 						{update.componentNames && update.componentNames.length > 0 && (
 							<ul class="component-list">
 								<span class="component-name-header">Rerendered</span>
@@ -50,16 +58,25 @@ export function UpdateItem({ update }: UpdateItemProps) {
 
 	const prevValue = formatValue(update.prevValue);
 	const newValue = formatValue(update.newValue);
+	const firstValue =
+		firstUpdate !== undefined ? formatValue(firstUpdate.prevValue) : undefined;
 
 	return (
 		<div class={`update-item ${update.type}`}>
 			<div class="update-header">
 				<span class="signal-name">
 					{update.depth === 0 ? "🎯" : "↪️"} {update.signalName}
+					{countLabel}
 				</span>
 				<span class="update-time">{time}</span>
 			</div>
 			<div class="value-change">
+				{firstValue && firstValue !== prevValue && (
+					<>
+						<span class="value-prev">{firstValue}</span>
+						<span class="value-arrow">...</span>
+					</>
+				)}
 				<span class="value-prev">{prevValue}</span>
 				<span class="value-arrow">→</span>
 				<span class="value-new">{newValue}</span>

extension/src/components/UpdateTreeNode.tsx

@@ -14,6 +14,8 @@ export function UpdateTreeNodeComponent({ node }: UpdateTreeNodeProps) {
 	};
 
 	const hasChildren = node.children.length > 0;
+	const nodeCount = node.type === "group" ? node.count : undefined;
+	const firstUpdate = node.type === "group" ? node.firstUpdate : undefined;
 
 	return (
 		<div className="tree-node">
@@ -29,7 +31,11 @@ export function UpdateTreeNodeComponent({ node }: UpdateTreeNodeProps) {
 				)}
 				{!hasChildren && <div className="collapse-spacer" />}
 				<div className="update-content">
-					<UpdateItem update={node.update} />
+					<UpdateItem
+						update={node.update}
+						count={nodeCount}
+						firstUpdate={firstUpdate}
+					/>
 				</div>
 			</div>
 

extension/src/components/UpdatesContainer.tsx

@@ -5,7 +5,7 @@ import { useSignalEffect } from "@preact/signals";
 
 export function UpdatesContainer() {
 	const updatesListRef = useRef<HTMLDivElement>(null);
-	const updateTree = updatesStore.updateTree.value;
+	const updateTree = updatesStore.collapsedUpdateTree.value;
 
 	useSignalEffect(() => {
 		// Register scroll restoration

extension/src/models/UpdatesModel.ts

@@ -1,14 +1,65 @@
 import { signal, computed, effect } from "@preact/signals";
 import { Divider, SignalUpdate } from "../types";
+import { settingsStore } from "./SettingsModel";
 
-export interface UpdateTreeNode {
+export interface UpdateTreeNodeBase {
 	id: string;
 	update: SignalUpdate;
 	children: UpdateTreeNode[];
 	depth: number;
 	hasChildren: boolean;
 }
 
+export interface UpdateTreeNodeSingle extends UpdateTreeNodeBase {
+	type: "single";
+}
+
+export interface UpdateTreeNodeGroup extends UpdateTreeNodeBase {
+	type: "group";
+	count: number;
+	firstUpdate: SignalUpdate;
+}
+
+export type UpdateTreeNode = UpdateTreeNodeGroup | UpdateTreeNodeSingle;
+
+const nodesAreEqual = (a: UpdateTreeNode, b: UpdateTreeNode): boolean => {
+	return (
+		a.update.signalId === b.update.signalId &&
+		a.children.length === b.children.length &&
+		a.children.every((child, index) => nodesAreEqual(child, b.children[index]))
+	);
+};
+
+const collapseTree = (nodes: UpdateTreeNodeSingle[]): UpdateTreeNode[] => {
+	const tree: UpdateTreeNode[] = [];
+	let lastNode: UpdateTreeNode | undefined;
+
+	for (const node of nodes) {
+		if (lastNode && nodesAreEqual(lastNode, node)) {
+			if (lastNode.type !== "group") {
+				// TODO (jg): maybe its safe to mutate lastNode instead of cloning?
+				tree.pop();
+				lastNode = {
+					...lastNode,
+					type: "group",
+					count: 2,
+					firstUpdate: node.update,
+				};
+				tree.push(lastNode);
+			} else {
+				lastNode.count++;
+				lastNode.firstUpdate = node.update;
+			}
+			// If the current node is equal to the last one, skip it
+			continue;
+		}
+		tree.push(node);
+		lastNode = node;
+	}
+
+	return tree;
+};
+
 const createUpdatesModel = () => {
 	const updates = signal<(SignalUpdate | Divider)[]>([]);
 	const lastUpdateId = signal<number>(0);
@@ -45,9 +96,9 @@ const createUpdatesModel = () => {
 	const updateTree = computed(() => {
 		const buildTree = (
 			updates: (SignalUpdate | Divider)[]
-		): UpdateTreeNode[] => {
-			const tree: UpdateTreeNode[] = [];
-			const stack: UpdateTreeNode[] = [];
+		): UpdateTreeNodeSingle[] => {
+			const tree: UpdateTreeNodeSingle[] = [];
+			const stack: UpdateTreeNodeSingle[] = [];
 
 			// Process updates in reverse order to show newest first
 			const recentUpdates = updates.slice(-100).reverse();
@@ -67,6 +118,7 @@ const createUpdatesModel = () => {
 				const nodeId = `${update.signalName}-${update.receivedAt}-${i}`;
 
 				const node: UpdateTreeNode = {
+					type: "single",
 					id: nodeId,
 					update,
 					children: [],
@@ -134,9 +186,18 @@ const createUpdatesModel = () => {
 		return () => window.removeEventListener("message", handleMessage);
 	});
 
+	const collapsedUpdateTree = computed(() => {
+		const updateTreeValue = updateTree.value;
+		if (settingsStore.settings.grouped) {
+			return collapseTree(updateTreeValue);
+		}
+		return updateTreeValue;
+	});
+
 	return {
 		updates,
 		updateTree,
+		collapsedUpdateTree,
 		totalUpdates: computed(() => Object.keys(updateTree.value).length),
 		signalCounts,
 		addUpdate,

extension/styles/panel.css

@@ -324,6 +324,14 @@ body {
   margin-bottom: 4px;
 }
 
+.update-count {
+  display: inline-block;
+  padding: 0 6px;
+  background: #e0e0e0;
+  border-radius: 12px;
+  margin: 0 2px;
+}
+
 .signal-name {
   font-weight: 600;
   color: #673ab7;