From b0cdb8703a5cfea270564969a71a4cce9335de19 Mon Sep 17 00:00:00 2001 From: Carson McManus Date: Tue, 2 Apr 2024 20:29:33 -0400 Subject: [PATCH] vis: tree display: add horizontal option --- .../src/components/TreeDisplay.tsx | 56 +++++++++---------- .../src/components/tree-display.css | 16 ++++++ packages/ott-vis-panel/src/module.ts | 6 ++ 3 files changed, 47 insertions(+), 31 deletions(-) create mode 100644 packages/ott-vis-panel/src/components/tree-display.css diff --git a/packages/ott-vis-panel/src/components/TreeDisplay.tsx b/packages/ott-vis-panel/src/components/TreeDisplay.tsx index 74e00ec46..e0eddf54f 100644 --- a/packages/ott-vis-panel/src/components/TreeDisplay.tsx +++ b/packages/ott-vis-panel/src/components/TreeDisplay.tsx @@ -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; @@ -11,6 +12,7 @@ interface TreeDisplayProps extends TreeDisplayStyleProps { } export interface TreeDisplayStyleProps { + horizontal?: boolean; b2mLinkStyle?: "smooth" | "step"; b2mSpacing?: number; baseNodeRadius?: number; @@ -262,6 +264,7 @@ const TreeDisplay: React.FC = ({ systemState, width, height, + horizontal = false, b2mLinkStyle = "smooth", b2mSpacing = 300, baseNodeRadius = 20, @@ -390,11 +393,8 @@ const TreeDisplay: React.FC = ({ 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() ) @@ -402,7 +402,7 @@ const TreeDisplay: React.FC = ({ .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 @@ -459,13 +459,8 @@ const TreeDisplay: React.FC = ({ 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() ) @@ -473,7 +468,7 @@ const TreeDisplay: React.FC = ({ .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 @@ -502,7 +497,7 @@ const TreeDisplay: React.FC = ({ .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, @@ -571,28 +566,25 @@ const TreeDisplay: React.FC = ({ .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 @@ -654,6 +646,7 @@ const TreeDisplay: React.FC = ({ clientNodeRadius, balancerGroupStyle, getRadius, + horizontal, ]); // run this only once after the first render @@ -698,19 +691,20 @@ const TreeDisplay: React.FC = ({ 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", }} > - - - - + + + + + + + - ); diff --git a/packages/ott-vis-panel/src/components/tree-display.css b/packages/ott-vis-panel/src/components/tree-display.css new file mode 100644 index 000000000..642894a3d --- /dev/null +++ b/packages/ott-vis-panel/src/components/tree-display.css @@ -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; +} diff --git a/packages/ott-vis-panel/src/module.ts b/packages/ott-vis-panel/src/module.ts index 1221d43ed..e2cf82f39 100644 --- a/packages/ott-vis-panel/src/module.ts +++ b/packages/ott-vis-panel/src/module.ts @@ -31,6 +31,12 @@ export const plugin = new PanelPlugin(CorePanel).setPanelOptions(bu 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", + }) .addSelect({ path: "tree.b2mLinkStyle", name: "Tree B2M Link Style",