vis: deduplicate node radius options (#1643)

Author: dyc3

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

@@ -74,6 +74,7 @@ const CoreData: React.FC<Props> = ({ options, data, width, height }) => {
 					height={height}
 					width={width}
 					systemState={systemState}
+					{...options.nodes}
 					{...options.tree}
 				/>
 			);
@@ -83,13 +84,14 @@ const CoreData: React.FC<Props> = ({ options, data, width, height }) => {
 					height={height}
 					width={width}
 					systemState={systemState}
+					{...options.nodes}
 					{...options.topology}
 				/>
 			);
 		} else {
 			return <div>Invalid view</div>;
 		}
-	}, [options.view, options.tree, options.topology, height, width, systemState]);
+	}, [options.view, options.nodes, options.tree, options.topology, height, width, systemState]);
 
 	const [readEvents, setReadEvents] = useState(0);
 

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

@@ -13,20 +13,18 @@ import {
 } from "treeutils";
 import { useD3Zoom } from "chartutils";
 import { dedupeMonoliths } from "aggregate";
+import type { NodeRadiusOptions } from "types";
 
 interface TreeDisplayProps extends TreeDisplayStyleProps {
 	systemState: SystemState;
 	width: number;
 	height: number;
 }
 
-export interface TreeDisplayStyleProps {
+export interface TreeDisplayStyleProps extends NodeRadiusOptions {
 	horizontal?: boolean;
 	b2mLinkStyle?: "smooth" | "step";
 	b2mSpacing?: number;
-	baseNodeRadius?: number;
-	balancerNodeRadius?: number;
-	clientNodeRadius?: number;
 	balancerGroupStyle?: "stacked" | "region-packed";
 }
 

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

@@ -19,16 +19,15 @@ import { useColorProvider } from "colors";
 import { useD3Zoom } from "chartutils";
 import { dedupeItems } from "aggregate";
 import { useEventBus, type BusEvent } from "eventbus";
+import type { NodeRadiusOptions } from "types";
 
 interface TopologyViewProps extends TopologyViewStyleProps {
 	systemState: SystemState;
 	width: number;
 	height: number;
 }
 
-export interface TopologyViewStyleProps {
-	baseNodeRadius: number;
-	clientNodeRadius: number;
+export interface TopologyViewStyleProps extends NodeRadiusOptions {
 	subtreePadding: number;
 }
 
@@ -68,6 +67,7 @@ export const TopologyView: React.FC<TopologyViewProps> = ({
 	width,
 	height,
 	baseNodeRadius = 20,
+	balancerNodeRadius = 20,
 	clientNodeRadius = 8,
 	subtreePadding = 60,
 }) => {
@@ -87,11 +87,13 @@ export const TopologyView: React.FC<TopologyViewProps> = ({
 		(group: string): number => {
 			if (group === "client") {
 				return clientNodeRadius;
+			} else if (group === "balancer") {
+				return balancerNodeRadius;
 			} else {
 				return baseNodeRadius;
 			}
 		},
-		[baseNodeRadius, clientNodeRadius]
+		[baseNodeRadius, balancerNodeRadius, clientNodeRadius]
 	);
 
 	useEffect(() => {

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

@@ -35,6 +35,27 @@ export const plugin = new PanelPlugin<CoreOptions>(CorePanel).setPanelOptions(bu
 			name: "Use Sample Data",
 			description: "Use sample data instead of querying the datasource",
 		})
+		.addNumberInput({
+			path: "nodes.baseNodeRadius",
+			name: "Base Node Radius",
+			description: "Set the radius of the nodes.",
+			defaultValue: 20,
+			showIf: config => config.view === "tree" || config.view === "topology",
+		})
+		.addNumberInput({
+			path: "nodes.balancerNodeRadius",
+			name: "Balancer Node Radius",
+			description: "Set the radius of the balancer nodes",
+			defaultValue: 30,
+			showIf: config => config.view === "tree" || config.view === "topology",
+		})
+		.addNumberInput({
+			path: "nodes.clientNodeRadius",
+			name: "Client Node Radius",
+			description: "Set the radius of the client nodes",
+			defaultValue: 8,
+			showIf: config => config.view === "tree" || config.view === "topology",
+		})
 		.addBooleanSwitch({
 			path: "tree.horizontal",
 			name: "Horizontal",
@@ -67,41 +88,6 @@ export const plugin = new PanelPlugin<CoreOptions>(CorePanel).setPanelOptions(bu
 			defaultValue: 300,
 			showIf: config => config.view === "tree",
 		})
-		.addNumberInput({
-			path: "tree.baseNodeRadius",
-			name: "Base Node Radius",
-			description: "Set the radius of the nodes in the tree view",
-			defaultValue: 20,
-			showIf: config => config.view === "tree",
-		})
-		.addNumberInput({
-			path: "topology.baseNodeRadius",
-			name: "Base Node Radius",
-			description: "Set the radius of the nodes in the topology view",
-			defaultValue: 20,
-			showIf: config => config.view === "topology",
-		})
-		.addNumberInput({
-			path: "tree.balancerNodeRadius",
-			name: "Tree Balancer Node Radius",
-			description: "Set the radius of the balancer nodes in the tree view",
-			defaultValue: 30,
-			showIf: config => config.view === "tree",
-		})
-		.addNumberInput({
-			path: "tree.clientNodeRadius",
-			name: "Client Node Radius",
-			description: "Set the radius of the client nodes in the tree view",
-			defaultValue: 8,
-			showIf: config => config.view === "tree",
-		})
-		.addNumberInput({
-			path: "topology.clientNodeRadius",
-			name: "Client Node Radius",
-			description: "Set the radius of the client nodes in the topology view",
-			defaultValue: 8,
-			showIf: config => config.view === "topology",
-		})
 		.addSelect({
 			path: "tree.balancerGroupStyle",
 			name: "Tree Balancer Group Style",

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

@@ -7,4 +7,11 @@ export interface CoreOptions {
 
 	tree: TreeDisplayStyleProps;
 	topology: TopologyViewStyleProps;
+	nodes: NodeRadiusOptions;
+}
+
+export interface NodeRadiusOptions {
+	baseNodeRadius?: number;
+	balancerNodeRadius?: number;
+	clientNodeRadius?: number;
 }

packages/ott-vis/provisioning/dashboards/topology-dash.json

@@ -34,6 +34,11 @@
 			},
 			"id": 1,
 			"options": {
+				"nodes": {
+					"balancerNodeRadius": 20,
+					"baseNodeRadius": 20,
+					"clientNodeRadius": 8
+				},
 				"topology": {
 					"baseNodeRadius": 20,
 					"clientNodeRadius": 8
@@ -85,6 +90,6 @@
 	"timezone": "",
 	"title": "Just TopologyView",
 	"uid": "e3771ad0-95f0-4be2-932d-259323694d10",
-	"version": 3,
+	"version": 16,
 	"weekStart": ""
 }