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 = ({ }) => { const svgRef = useRef(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 = ({ const builtMonolithTrees: d3.HierarchyNode[] = []; 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 = ({ 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);