vis: TopologyView: add activity animations

dyc3 · Apr 5, 2024 · ddec129 · ddec129
1 parent 3991323
commit ddec129
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 11 deletions.
diff --git a/packages/ott-vis-panel/src/components/views/TopologyView.tsx b/packages/ott-vis-panel/src/components/views/TopologyView.tsx
@@ -17,6 +17,7 @@ import "./topology-view.css";
 import { useColorProvider } from "colors";
 import { useD3Zoom } from "chartutils";
 import { dedupeItems } from "aggregate";
+import { useEventBus } from "eventbus";
 
 /**
  * The goal of this component is to show a more accurate topology view from the perspective of actual network connections.
@@ -164,6 +165,7 @@ export const TopologyView: React.FC<TopologyViewProps> = ({
 						.attr("data-nodeid-target", d => d.target.data.id)
 						.transition(tr)
 						.attr("d", diagonal)
+						.attr("stroke", "#fff")
 						.attr("stroke-width", 1.5);
 
 					group
@@ -191,7 +193,9 @@ export const TopologyView: React.FC<TopologyViewProps> = ({
 						.attr("cx", (d: any) => d.x)
 						.attr("cy", (d: any) => d.y)
 						.attr("r", d => getRadius(d.data.group))
-						.attr("fill", d => colors.assign(d.data.group));
+						.attr("fill", d => colors.assign(d.data.group))
+						.attr("stroke", "#fff")
+						.attr("stroke-width", 2);
 
 					group
 						.select(".texts")
@@ -337,9 +341,12 @@ export const TopologyView: React.FC<TopologyViewProps> = ({
 					update => update,
 					exit => exit.transition(tr).attr("stroke-width", 0).remove()
 				)
+				.attr("data-nodeid-source", d => d.source.tree.data.id)
+				.attr("data-nodeid-target", d => d.target.tree.data.id)
 				.transition(tr)
 				.attr("d", diagonal)
-				.attr("stroke-width", 1.5);
+				.attr("stroke-width", 1.5)
+				.attr("stroke", "#fff");
 		}
 
 		const monolithBuiltRegions = new Map<string, Region>();
@@ -383,6 +390,63 @@ export const TopologyView: React.FC<TopologyViewProps> = ({
 
 	useD3Zoom(svgRef);
 
+	const eventBus = useEventBus();
+	useEffect(() => {
+		const rxColor = "#0f0";
+		const txColor = "#0ff";
+
+		function animateNode(node: d3.Selection<any, any, any, any>, color: string) {
+			if (node.empty()) {
+				return;
+			}
+			const data = node.data()[0] as d3.HierarchyNode<TreeNode>;
+			const endRadius = data ? getRadius(data.data.group) : 20;
+			let radiusCurrent = parseFloat(node.attr("r"));
+			if (isNaN(radiusCurrent)) {
+				radiusCurrent = 0;
+			}
+			const newRadius = Math.max(Math.min(radiusCurrent + 5, 40), endRadius);
+			node.transition("highlight")
+				.duration(333)
+				.ease(d3.easeCubicOut)
+				.attrTween("stroke", () => d3.interpolateRgb(color, "#fff"))
+				.attrTween("stroke-width", () => t => d3.interpolateNumber(4, 1.5)(t).toString())
+				.attrTween(
+					"r",
+					() => t => d3.interpolateNumber(newRadius, endRadius)(t).toString()
+				);
+		}
+
+		function animateLinks(links: d3.Selection<any, any, any, any>, color: string) {
+			links
+				.transition("highlight")
+				.duration(333)
+				.ease(d3.easeCubicOut)
+				.attrTween("stroke", () => d3.interpolateRgb(color, "#fff"))
+				.attrTween("stroke-width", () => t => d3.interpolateNumber(4, 1.5)(t).toString());
+		}
+
+		const sub = eventBus.subscribe(event => {
+			if (event.direction === "rx") {
+				const node = d3.select(`[data-nodeid="${event.node_id}"]`);
+				animateNode(node, rxColor);
+
+				const links = d3.selectAll(`[data-nodeid-target="${event.node_id}"]`);
+				animateLinks(links, rxColor);
+			} else if (event.direction === "tx") {
+				const node = d3.select(`[data-nodeid="${event.node_id}"]`);
+				animateNode(node, txColor);
+
+				const links = d3.selectAll(`[data-nodeid-target="${event.node_id}"]`);
+				animateLinks(links, txColor);
+			}
+		});
+
+		return () => {
+			sub.unsubscribe();
+		};
+	}, [eventBus, getRadius]);
+
 	return (
 		<svg
 			viewBox={`${-width / 2} ${-height / 2} ${width} ${height}`}

diff --git a/packages/ott-vis-panel/src/components/views/topology-view.css b/packages/ott-vis-panel/src/components/views/topology-view.css
@@ -1,14 +1,7 @@
 .links {
-	stroke: white;
-	stroke-width: 1.5;
 	fill: none;
 }
 
-.node {
-	stroke: white;
-	stroke-width: 1.5;
-}
-
 .text {
 	font-family: Inter, Helvetica, Arial, sans-serif;
 	text-anchor: middle;

diff --git a/packages/ott-vis/provisioning/dashboards/topology-dash.json b/packages/ott-vis/provisioning/dashboards/topology-dash.json
@@ -34,6 +34,10 @@
 			},
 			"id": 1,
 			"options": {
+				"topology": {
+					"baseNodeRadius": 20,
+					"clientNodeRadius": 8
+				},
 				"tree": {
 					"b2mLinkStyle": "smooth",
 					"b2mSpacing": 300,
@@ -51,13 +55,22 @@
 						"uid": "P8AFEECD30EDC727B"
 					},
 					"refId": "A"
+				},
+				{
+					"datasource": {
+						"type": "ott-vis-datasource",
+						"uid": "P8AFEECD30EDC727B"
+					},
+					"hide": false,
+					"refId": "B",
+					"stream": true
 				}
 			],
 			"title": "Panel Title",
 			"type": "ott-vis-panel"
 		}
 	],
-	"refresh": "",
+	"refresh": "5s",
 	"schemaVersion": 38,
 	"style": "dark",
 	"tags": [],
@@ -72,6 +85,6 @@
 	"timezone": "",
 	"title": "Just TopologyView",
 	"uid": "e3771ad0-95f0-4be2-932d-259323694d10",
-	"version": 2,
+	"version": 3,
 	"weekStart": ""
 }