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

Jump to bottom

vis: tree display: add horizontal option #1601

Merged
merged 1 commit into from
Apr 3, 2024
Merged

vis: tree display: add horizontal option #1601

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
56 changes: 25 additions & 31 deletions packages/ott-vis-panel/src/components/TreeDisplay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import * as d3 from "d3";
import type { Monolith, Room, SystemState } from "ott-vis/types";
import { dedupeMonoliths } from "aggregate";
import { useEventBus } from "eventbus";
import "./tree-display.css";

interface TreeDisplayProps extends TreeDisplayStyleProps {
systemState: SystemState;
Expand All @@ -11,6 +12,7 @@ interface TreeDisplayProps extends TreeDisplayStyleProps {
}

export interface TreeDisplayStyleProps {
horizontal?: boolean;
b2mLinkStyle?: "smooth" | "step";
b2mSpacing?: number;
baseNodeRadius?: number;
Expand Down Expand Up @@ -262,6 +264,7 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
systemState,
width,
height,
horizontal = false,
b2mLinkStyle = "smooth",
b2mSpacing = 300,
baseNodeRadius = 20,
Expand Down Expand Up @@ -390,19 +393,16 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
create
.append("text")
.attr("x", d => d.x)
.attr("y", d => d.y + 4)
.attr("class", "balancer-text")
.attr("text-anchor", "middle")
.attr("stroke-width", 0)
.attr("fill", "white"),
.attr("y", d => d.y)
.attr("class", "balancer-text"),
update => update,
exit => exit.transition(tr).attr("font-size", 0).remove()
)
.text(d => `${d.region.substring(0, 3)} ${d.id}`.substring(0, 10))
.transition(tr)
.attr("font-size", 10)
.attr("x", d => d.x)
.attr("y", d => d.y + 4);
.attr("y", d => d.y);
} else if (balancerGroupStyle === "region-packed") {
const balancerTree = buildBalancerRegionTree(systemState);
const root = d3
Expand Down Expand Up @@ -459,21 +459,16 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
create
.append("text")
.attr("x", (d: any) => d.x)
.attr("y", (d: any) => d.y + 4)
.attr("class", "balancer-text")
.attr("text-anchor", "middle")
.attr("alignment-baseline", "middle")
.attr("font-family", "Inter, Helvetica, Arial, sans-serif")
.attr("stroke-width", 0)
.attr("fill", "white"),
.attr("y", (d: any) => d.y)
.attr("class", "balancer-text"),
update => update,
exit => exit.transition(tr).attr("font-size", 0).remove()
)
.text(d => `${d.data.id}`.substring(0, 8))
.transition(tr)
.attr("font-size", 10)
.attr("x", (d: any) => d.x)
.attr("y", (d: any) => d.y + 4);
.attr("y", (d: any) => d.y);
}

// create groups for all the monoliths
Expand Down Expand Up @@ -502,7 +497,7 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
.attr("transform", d => `translate(${d.x}, ${d.y})`);
group.append("g").attr("class", "links");
group.append("g").attr("class", "circles");
group.append("g").attr("class", "texts");
group.append("g").attr("class", "texts g-text");
return group;
},
update => update,
Expand Down Expand Up @@ -571,28 +566,25 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
.join(
create =>
create
.append("text")
.filter(d => d.data.group === "monolith")
.append("text")
.attr("class", "monolith-text")
.attr("text-anchor", "middle")
.attr("stroke-width", 0)
.attr("fill", "white")
.attr("cx", (d: any) => (d.parent ? d.parent.x : d.x))
.attr("cy", (d: any) => (d.parent ? d.parent.y : d.y)),
.attr("x", (d: any) => (d.parent ? d.parent.x : d.x))
.attr("y", (d: any) => (d.parent ? d.parent.y : d.y)),
update => update,
exit =>
exit
.transition(tr)
.attr("font-size", 0)
.attr("cx", (d: any) => (d.parent ? d.parent.x : d.x))
.attr("cy", (d: any) => (d.parent ? d.parent.y : d.y))
.attr("x", (d: any) => (d.parent ? d.parent.x : d.x))
.attr("y", (d: any) => (d.parent ? d.parent.y : d.y))
.remove()
)
.text(d => `${d.data.id}`.substring(0, 6))
.transition(tr)
.attr("font-size", 10)
.attr("x", (d: any) => d.x)
.attr("y", (d: any) => d.y + 4);
.attr("y", (d: any) => d.y);
});

// create the links between balancers and monoliths
Expand Down Expand Up @@ -654,6 +646,7 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
clientNodeRadius,
balancerGroupStyle,
getRadius,
horizontal,
]);

// run this only once after the first render
Expand Down Expand Up @@ -698,19 +691,20 @@ const TreeDisplay: React.FC<TreeDisplayProps> = ({
ref={svgRef}
width={width}
height={height}
viewBox={`${-width / 2} ${-height / 2} ${width}, ${height}`}
viewBox={`${-width / 2} ${-height / 4} ${width} ${height}`}
style={{
fontFamily: "Inter, Helvetica, Arial, sans-serif",
alignmentBaseline: "middle",
}}
>
<g className="chart">
<g className="b2m-links" />
<g className="balancers">
<g className="b-circles" />
<g className="b-texts" />
<g className={`${horizontal ? "horizontal" : ""}`}>
<g className="b2m-links" />
<g className="balancers">
<g className="b-circles" />
<g className="b-texts g-text" />
</g>
<g className="monoliths" />
</g>
<g className="monoliths" />
</g>
</svg>
);
Expand Down
16 changes: 16 additions & 0 deletions packages/ott-vis-panel/src/components/tree-display.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
.horizontal {
transform: rotate(-90deg);
}

.horizontal text {
writing-mode: vertical-rl;
text-orientation: mixed;
}

.g-text > text {
font-family: Inter, Helvetica, Arial, sans-serif;
text-anchor: middle;
alignment-baseline: middle;
stroke-width: 0;
fill: white;
}
6 changes: 6 additions & 0 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 @@ -31,6 +31,12 @@
name: "Use Sample Data",
description: "Use sample data instead of querying the datasource",
})
.addBooleanSwitch({
path: "tree.horizontal",
name: "Horizontal",
description: "Rotate the tree view 90 degrees so that it extends horizontally",
showIf: config => config.view === "tree",

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

View check run for this annotation

Codecov / codecov/patch

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

Added line #L38 was not covered by tests
})
.addSelect({
path: "tree.b2mLinkStyle",
name: "Tree B2M Link Style",
Expand Down
Loading