vis: TopologyView: fix tree building so correct info is displayed (#1617)

Author: dyc3

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

@@ -147,7 +147,6 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
 	balancerGroupStyle = "stacked",
 }) => {
 	const svgRef = useRef<SVGSVGElement | null>(null);
-	// const systemTree = useMemo(() => buildFullTree(systemState), [systemState]);
 	const monolithTrees = buildMonolithTrees(systemState.flatMap(b => b.monoliths)).sort(
 		(a, b) => d3.ascending(a.region, b.region) || d3.ascending(a.id, b.id)
 	);

packages/ott-vis-panel/src/components/views/TopologyView.tsx

@@ -16,6 +16,7 @@ import {
 import "./topology-view.css";
 import { useColorProvider } from "colors";
 import { useD3Zoom } from "chartutils";
+import { dedupeItems } from "aggregate";
 
 /**
  * The goal of this component is to show a more accurate topology view from the perspective of actual network connections.
@@ -69,7 +70,11 @@ export const TopologyView: React.FC<TopologyViewProps> = ({
 }) => {
 	const svgRef = useRef<SVGSVGElement | null>(null);
 	const fullTree = d3.hierarchy(buildFullTree(systemState));
-	const monolithTrees = pruneTrees(fullTree, "monolith", "room");
+	const monolithTrees = dedupeItems(
+		pruneTrees(fullTree, "monolith", "room"),
+		tree => tree.data.id,
+		(a, b) => a
+	);
 	const balancerTrees = filterTreeGroups(fullTree, ["balancer", "client"]);
 	const colors = useColorProvider();
 

packages/ott-vis-panel/src/treeutils.ts

@@ -1,4 +1,3 @@
-import { dedupeMonoliths } from "aggregate";
 import * as d3 from "d3";
 import type { Monolith, Room, SystemState } from "ott-vis/types";
 
@@ -16,30 +15,21 @@ export function buildFullTree(systemState: SystemState): TreeNode {
 		group: "root",
 		children: [],
 	};
-	const monoliths = systemState.flatMap(balancer => balancer.monoliths);
-	const monolithNodes: Map<string, TreeNode> = new Map(
-		buildMonolithTrees(monoliths).map(monolith => {
-			return [monolith.id, monolith];
-		})
-	);
 
 	for (const balancer of systemState) {
 		const balancerNode: TreeNode = {
 			id: balancer.id,
 			region: balancer.region,
 			group: "balancer",
-			children: [],
+			children: buildMonolithTrees(balancer.monoliths),
 		};
 		tree.children.push(balancerNode);
-		for (const monolith of balancer.monoliths) {
-			balancerNode.children.push(monolithNodes.get(monolith.id) as TreeNode);
-		}
 	}
 	return tree;
 }
 
 export function buildMonolithTrees(monoliths: Monolith[]): TreeNode[] {
-	return dedupeMonoliths(monoliths).map(monolith => {
+	return monoliths.map(monolith => {
 		const monolithNode: TreeNode = {
 			id: monolith.id,
 			region: monolith.region,