feat(network-map): introduce compact edge label display for improved readability in dense mode

2026-02-25 00:38:06 +07:00
parent b76cbc15cb
commit 4d91b4fe04
1 changed files with 14 additions and 7 deletions
@@ -278,6 +278,7 @@ export default function NetworkMapUnifi({
        speed && (speed.tcpDownloadBps != null || speed.tcpUploadBps != null)
          ? formatSpeedShort(speed.tcpDownloadBps, speed.tcpUploadBps)
          : null;
+      const compactEdgeLabel = pingLabel || speedLabel || null;
      const edgeLabel =
        pingLabel && speedLabel ? `${pingLabel} • ${speedLabel}` : (pingLabel || speedLabel);
      return {
@@ -288,6 +289,7 @@ export default function NetworkMapUnifi({
        p2,
        pingLabel,
        speedLabel,
+        compactEdgeLabel,
        edgeLabel,
        pingStale,
        speedStale,
@@ -552,9 +554,12 @@ export default function NetworkMapUnifi({
                filter="url(#edgeGlow)"
              />
              {(() => {
-                const showLabel = e.edgeLabel && (!denseMode || isFocused || e.stale);
-                if (!showLabel) return null;
-                const minDist = denseMode ? 56 : 70;
+                const compactOnly = denseMode && !isFocused && !e.stale;
+                const labelText = compactOnly
+                  ? (e.compactEdgeLabel || e.edgeLabel)
+                  : e.edgeLabel;
+                if (!labelText) return null;
+                const minDist = denseMode ? 52 : 70;
                let level = 0;
                let x; let y;
                while (level < 10) {
@@ -572,9 +577,11 @@ export default function NetworkMapUnifi({
                const pad = 10;
                const isStale = e.stale === true;
                const staleColor = UNIFI_WARNING;
-                const textWidth = e.edgeLabel.length * 6.2;
+                const textWidth = labelText.length * (compactOnly ? 5.9 : 6.2);
                const iconWidth = isStale ? 14 : 0;
-                const w = Math.max(LABEL_W, Math.min(textWidth + pad * 2 + iconWidth, 210));
+                const minW = compactOnly ? 76 : LABEL_W;
+                const maxW = compactOnly ? 160 : 210;
+                const w = Math.max(minW, Math.min(textWidth + pad * 2 + iconWidth, maxW));
                const h = LABEL_H;
                const textX = x - (iconWidth / 2);
                return (
@@ -605,10 +612,10 @@ export default function NetworkMapUnifi({
                      textAnchor="middle"
                      dominantBaseline="middle"
                      fill={isStale ? staleColor : edgeColor}
-                      fontSize={11}
+                      fontSize={compactOnly ? 10.2 : 11}
                      fontWeight={600}
                    >
-                      {e.edgeLabel}
+                      {labelText}
                    </text>
                  </g>
                );