Damien/arista-evpn-vxlan-clab
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix inconsistent node rectangle height via compactVerticalLinks

Browse Source 
Confirmed root cause against the installed plugin's real module.js (not
the #48 schema doc, which doesn't cover this): node height is driven by
max(anchors[Left].numLinks, anchors[Right].numLinks) whenever
compactVerticalLinks is false, which is why campus-leaf1 (3 links) and
campus-leaf2 (4 links) rendered at different heights despite the same
role. Width is unaffected by link count -- it's always recomputed from
the label text at render time, no override field exists.

Set compactVerticalLinks: true on every generated node, which makes
height a constant (fontSize + 2*padding.vertical) regardless of link
count, for every node (padding/fontSize are already uniform fabric-wide).

Refs #54
This commit is contained in:
Damien Arnodo
2026-07-10 12:50:12 +00:00
parent fcd7ea2567
commit 9b53ab0683
2 changed files with 99 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files

168
configs/grafana/weathermap-dashboard.json
View File

@@ -117,12 +117,12 @@
"id": "campus-spine1", "id": "campus-spine1",
"label": "campus-spine1", "label": "campus-spine1",
"position": [ "position": [
2595, 1600,
93 80
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -173,12 +173,12 @@
"id": "dc-spine1", "id": "dc-spine1",
"label": "dc-spine1", "label": "dc-spine1",
"position": [ "position": [
-793, 350,
31 80
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -229,12 +229,12 @@
"id": "dc-spine2", "id": "dc-spine2",
"label": "dc-spine2", "label": "dc-spine2",
"position": [ "position": [
-275, 750,
27 80
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -285,12 +285,12 @@
"id": "campus-spine2", "id": "campus-spine2",
"label": "campus-spine2", "label": "campus-spine2",
"position": [ "position": [
2147, 1850,
58 80
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -341,12 +341,12 @@
"id": "campus-border-leaf1", "id": "campus-border-leaf1",
"label": "campus-border-leaf1", "label": "campus-border-leaf1",
"position": [ "position": [
1744, 1450,
-152 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -397,12 +397,12 @@
"id": "dc-leaf1", "id": "dc-leaf1",
"label": "dc-leaf1", "label": "dc-leaf1",
"position": [ "position": [
100, 80,
900 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -460,12 +460,12 @@
"id": "campus-border-leaf2", "id": "campus-border-leaf2",
"label": "campus-border-leaf2", "label": "campus-border-leaf2",
"position": [ "position": [
1407, 1555,
-163 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -516,12 +516,12 @@
"id": "dc-leaf4", "id": "dc-leaf4",
"label": "dc-leaf4", "label": "dc-leaf4",
"position": [ "position": [
-687, 395,
538 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -572,12 +572,12 @@
"id": "dc-leaf3", "id": "dc-leaf3",
"label": "dc-leaf3", "label": "dc-leaf3",
"position": [ "position": [
-920, 290,
540 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -628,12 +628,12 @@
"id": "dc-leaf5", "id": "dc-leaf5",
"label": "dc-leaf5", "label": "dc-leaf5",
"position": [ "position": [
-226, 500,
525 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -691,12 +691,12 @@
"id": "dc-border-leaf1", "id": "dc-border-leaf1",
"label": "dc-border-leaf1", "label": "dc-border-leaf1",
"position": [ "position": [
215, 920,
-169 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -747,12 +747,12 @@
"id": "dc-leaf6", "id": "dc-leaf6",
"label": "dc-leaf6", "label": "dc-leaf6",
"position": [ "position": [
56, 605,
532 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -810,12 +810,12 @@
"id": "dc-access1", "id": "dc-access1",
"label": "dc-access1", "label": "dc-access1",
"position": [ "position": [
-1432, 132,
773 440
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -866,12 +866,12 @@
"id": "dc-access2", "id": "dc-access2",
"label": "dc-access2", "label": "dc-access2",
"position": [ "position": [
-803, 342,
719 440
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -922,12 +922,12 @@
"id": "dc-leaf8", "id": "dc-leaf8",
"label": "dc-leaf8", "label": "dc-leaf8",
"position": [ "position": [
816, 815,
553 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -978,12 +978,12 @@
"id": "dc-leaf7", "id": "dc-leaf7",
"label": "dc-leaf7", "label": "dc-leaf7",
"position": [ "position": [
430, 710,
530 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1034,12 +1034,12 @@
"id": "dc-access4", "id": "dc-access4",
"label": "dc-access4", "label": "dc-access4",
"position": [ "position": [
644, 762,
707 440
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1090,12 +1090,12 @@
"id": "dc-access3", "id": "dc-access3",
"label": "dc-access3", "label": "dc-access3",
"position": [ "position": [
-87, 552,
704 440
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1146,12 +1146,12 @@
"id": "dc-border-leaf2", "id": "dc-border-leaf2",
"label": "dc-border-leaf2", "label": "dc-border-leaf2",
"position": [ "position": [
595, 1025,
-172 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1202,12 +1202,12 @@
"id": "dc-leaf2", "id": "dc-leaf2",
"label": "dc-leaf2", "label": "dc-leaf2",
"position": [ "position": [
-1289, 185,
532 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1265,12 +1265,12 @@
"id": "campus-leaf1", "id": "campus-leaf1",
"label": "campus-leaf1", "label": "campus-leaf1",
"position": [ "position": [
1925, 1660,
520 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1328,12 +1328,12 @@
"id": "campus-access1", "id": "campus-access1",
"label": "campus-access1", "label": "campus-access1",
"position": [ "position": [
2061, 1712,
720 440
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1384,12 +1384,12 @@
"id": "campus-leaf2", "id": "campus-leaf2",
"label": "campus-leaf2", "label": "campus-leaf2",
"position": [ "position": [
2161, 1765,
520 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1447,12 +1447,12 @@
"id": "campus-leaf3", "id": "campus-leaf3",
"label": "campus-leaf3", "label": "campus-leaf3",
"position": [ "position": [
2585, 1870,
510 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1510,12 +1510,12 @@
"id": "campus-access2", "id": "campus-access2",
"label": "campus-access2", "label": "campus-access2",
"position": [ "position": [
2955, 1922,
521 440
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1566,12 +1566,12 @@
"id": "campus-leaf4", "id": "campus-leaf4",
"label": "campus-leaf4", "label": "campus-leaf4",
"position": [ "position": [
2812, 1975,
731 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1629,12 +1629,12 @@
"id": "core1", "id": "core1",
"label": "core1", "label": "core1",
"position": [ "position": [
912, 1150,
71 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6
@@ -1685,12 +1685,12 @@
"id": "core2", "id": "core2",
"label": "core2", "label": "core2",
"position": [ "position": [
1251, 1280,
90 260
], ],
"isConnection": false, "isConnection": false,
"useConstantSpacing": false, "useConstantSpacing": false,
"compactVerticalLinks": false, "compactVerticalLinks": true,
"padding": { "padding": {
"horizontal": 12, "horizontal": 12,
"vertical": 6 "vertical": 6

16
scripts/generate_weathermap.py
View File

@@ -314,7 +314,21 @@ def build_weathermap(devices, links, interface_speeds, positions, prometheus_url
"position": positions[host], "position": positions[host],
"isConnection": False, "isConnection": False,
"useConstantSpacing": False, "useConstantSpacing": False,
"compactVerticalLinks": False, # True (not the plugin default) so rendered node HEIGHT is
# constant, decoupled from per-node link count -- see #54. Ground
# truth confirmed against the installed plugin's real module.js
# (not the #48 schema doc, which doesn't cover this): height is
# `fontSize + 2*padding.vertical` when compactVerticalLinks is
# true, unconditionally; when false, it's the larger of that or
# a term proportional to max(anchors[Left].numLinks,
# anchors[Right].numLinks) -- exactly why campus-leaf1 (3 links)
# and campus-leaf2 (4 links) rendered at different heights.
# Width is unaffected either way: it's always recomputed from
# the label text at render time (no override field exists), and
# useConstantSpacing only pulls in Top/Bottom anchor link count,
# which this generator never uses (links always attach
# Right/Left -- see anchor_counts above).
"compactVerticalLinks": True,
"padding": {"horizontal": 12, "vertical": 6}, "padding": {"horizontal": 12, "vertical": 6},
"colors": dict(NODE_COLORS), "colors": dict(NODE_COLORS),
"nodeIcon": None, "nodeIcon": None,