From 077da443222386a6e9e928e6c7d52662fb4a6447 Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Wed, 3 Apr 2024 09:41:42 -0400
Subject: [PATCH] vis: tree display: sort lists to reduce unnecessary node
 movement

---
 .../src/components/TreeDisplay.tsx            | 27 +++++++++++--------
 1 file changed, 16 insertions(+), 11 deletions(-)

diff --git a/packages/ott-vis-panel/src/components/TreeDisplay.tsx b/packages/ott-vis-panel/src/components/TreeDisplay.tsx
index 7bf8d8893..22a2224f6 100644
--- a/packages/ott-vis-panel/src/components/TreeDisplay.tsx
+++ b/packages/ott-vis-panel/src/components/TreeDisplay.tsx
@@ -271,7 +271,9 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
 }) => {
 	const svgRef = useRef<SVGSVGElement | null>(null);
 	// const systemTree = useMemo(() => buildFullTree(systemState), [systemState]);
-	const monolithTrees = buildMonolithTrees(systemState.flatMap(b => b.monoliths));
+	const monolithTrees = buildMonolithTrees(systemState.flatMap(b => b.monoliths)).sort(
+		(a, b) => d3.ascending(a.region, b.region) || d3.ascending(a.id, b.id)
+	);
 
 	const [chartTransform, setChartTransform] = useState("translate(0, 0)");
 
@@ -300,6 +302,7 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
 			const builtMonolithTrees: d3.HierarchyNode<TreeNode>[] = [];
 			for (const monolithTree of monolithTrees) {
 				const root = constructMonolithSubtreesBasic(monolithTree, baseNodeRadius);
+				root.sort((a, b) => d3.ascending(a.data.id, b.data.id));
 				builtMonolithTrees.push(root);
 			}
 
@@ -344,16 +347,18 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
 			const lerp = d3.interpolateNumber(0, fullHeight);
 			const lerpincr = 1 / (systemState.length - 1);
 			const yincr = Math.max(lerp(lerpincr), balancerNodeRadius * 2 + 20);
-			const balancerNodes = systemState.map((balancer, i) => {
-				const node: BalancerNode = {
-					id: balancer.id,
-					region: balancer.region,
-					group: "balancer",
-					x: 0,
-					y: i * yincr,
-				};
-				return node;
-			});
+			const balancerNodes = systemState
+				.map((balancer, i) => {
+					const node: BalancerNode = {
+						id: balancer.id,
+						region: balancer.region,
+						group: "balancer",
+						x: 0,
+						y: i * yincr,
+					};
+					return node;
+				})
+				.sort((a, b) => d3.ascending(a.region, b.region) || d3.ascending(a.id, b.id));
 
 			const tr = d3.transition().duration(1000).ease(d3.easeCubicInOut);