vis: tree display: sort lists to reduce unnecessary node movement

packages/ott-vis-panel/src/components/TreeDisplay.tsx

@@ -271,7 +271,7 @@ 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 +300,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);
 			}
 
@@ -353,7 +354,7 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
 					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);