Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

vis: TopologyView: accept node radius props #1613

Merged
merged 1 commit into from
Apr 4, 2024
Merged

vis: TopologyView: accept node radius props #1613

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 38 additions & 9 deletions packages/ott-vis-panel/src/components/views/TopologyView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useEffect, useRef } from "react";
import React, { useCallback, useEffect, useRef } from "react";
import * as d3 from "d3";
import type { SystemState } from "ott-vis/types";
import {
Expand Down Expand Up @@ -28,7 +28,11 @@ interface TopologyViewProps extends TopologyViewStyleProps {
height: number;
}

export interface TopologyViewStyleProps {}
export interface TopologyViewStyleProps {
baseNodeRadius: number;
clientNodeRadius: number;
subtreePadding: number;
}

interface Subtree {
tree: d3.HierarchyNode<TreeNode>;
Expand All @@ -39,15 +43,31 @@ interface Subtree {

const DEBUG_BOUNDING_BOXES = false;

export const TopologyView: React.FC<TopologyViewProps> = ({ systemState, width, height }) => {
export const TopologyView: React.FC<TopologyViewProps> = ({
systemState,
width,
height,
baseNodeRadius = 20,
clientNodeRadius = 8,
subtreePadding = 60,
}) => {
const svgRef = useRef<SVGSVGElement | null>(null);
const fullTree = d3.hierarchy(buildFullTree(systemState));
const monolithTrees = pruneTrees(fullTree, "monolith", "room");
const balancerTrees = filterTreeGroups(fullTree, ["balancer", "client"]);
const nodeRadius = 20;
const subtreePadding = nodeRadius * 4;
const colors = useColorProvider();

const getRadius = useCallback(
(group: string): number => {
if (group === "client") {
return clientNodeRadius;
} else {
return baseNodeRadius;
}
},
[baseNodeRadius, clientNodeRadius]
);

useEffect(() => {
if (!svgRef.current) {
return;
Expand All @@ -58,7 +78,7 @@ export const TopologyView: React.FC<TopologyViewProps> = ({ systemState, width,

let balancerYs = 0;
for (const tree of balancerTrees) {
const radius = calcGoodTreeRadius(tree, nodeRadius);
const radius = calcGoodTreeRadius(tree, clientNodeRadius);
const layout = d3.tree<TreeNode>().size([-Math.PI, radius]);
layout(tree);
// precompute radial coordinates
Expand All @@ -83,7 +103,7 @@ export const TopologyView: React.FC<TopologyViewProps> = ({ systemState, width,
}
let monolithYs = 0;
for (const tree of monolithTrees) {
const radius = calcGoodTreeRadius(tree, nodeRadius);
const radius = calcGoodTreeRadius(tree, baseNodeRadius);
const layout = d3.tree<TreeNode>().size([Math.PI, radius]);
layout(tree);
// precompute radial coordinates
Expand Down Expand Up @@ -166,14 +186,23 @@ export const TopologyView: React.FC<TopologyViewProps> = ({ systemState, width,
.attr("data-nodeid", d => d.data.id)
.attr("cx", (d: any) => d.x)
.attr("cy", (d: any) => d.y)
.attr("r", nodeRadius)
.attr("r", d => getRadius(d.data.group))
.attr("fill", d => colors.assign(d.data.group));
});
}

renderTrees(balancerSubtrees, ".balancer-trees");
renderTrees(monolithSubtrees, ".monolith-trees");
}, [svgRef, monolithTrees, balancerTrees, subtreePadding, nodeRadius, colors]);
}, [
svgRef,
monolithTrees,
balancerTrees,
subtreePadding,
colors,
baseNodeRadius,
clientNodeRadius,
getRadius,
]);

useD3Zoom(svgRef);

Expand Down
18 changes: 16 additions & 2 deletions packages/ott-vis-panel/src/module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,11 +69,18 @@
})
.addNumberInput({
path: "tree.baseNodeRadius",
name: "Tree Base Node Radius",
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",

Check warning on line 82 in packages/ott-vis-panel/src/module.ts

View check run for this annotation

Codecov / codecov/patch

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

Added line #L82 was not covered by tests
})
.addNumberInput({
path: "tree.balancerNodeRadius",
name: "Tree Balancer Node Radius",
Expand All @@ -83,11 +90,18 @@
})
.addNumberInput({
path: "tree.clientNodeRadius",
name: "Tree Client Node Radius",
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",

Check warning on line 103 in packages/ott-vis-panel/src/module.ts

View check run for this annotation

Codecov / codecov/patch

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

Added line #L103 was not covered by tests
})
.addSelect({
path: "tree.balancerGroupStyle",
name: "Tree Balancer Group Style",
Expand Down
Loading