theater/tendrils
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cap bubble width at 95% of node and fix mode-specific hover rules

Browse Source 
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Ian Gulliver
2026-01-27 23:02:51 -08:00
parent ccd6956d6a
commit 85780b9419
1 changed files with 32 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
static/index.html
View File

@@ -129,6 +129,9 @@
padding: 1px 6px; padding: 1px 6px;
border-radius: 8px; border-radius: 8px;
white-space: nowrap; white-space: nowrap;
max-width: 114px;
overflow: hidden;
text-overflow: ellipsis;
} }
.node .switch-port.external { .node .switch-port.external {
@@ -203,6 +206,9 @@
padding: 1px 6px; padding: 1px 6px;
border-radius: 8px; border-radius: 8px;
white-space: nowrap; white-space: nowrap;
max-width: 114px;
overflow: hidden;
text-overflow: ellipsis;
} }
.node .root-label { .node .root-label {
@@ -337,6 +343,9 @@
border-radius: 8px; border-radius: 8px;
white-space: nowrap; white-space: nowrap;
color: #fff; color: #fff;
max-width: 114px;
overflow: hidden;
text-overflow: ellipsis;
} }
.node .dante-info.tx-info { .node .dante-info.tx-info {
@@ -385,11 +394,11 @@
width: 120px; width: 120px;
} }
.node .dante-hover:hover { body.dante-mode .node .dante-hover:hover {
z-index: 100; z-index: 100;
} }
.node .dante-hover:hover .dante-detail-wrapper { body.dante-mode .node .dante-hover:hover .dante-detail-wrapper {
display: block; display: block;
will-change: transform; will-change: transform;
} }
@@ -444,6 +453,9 @@
border-radius: 8px; border-radius: 8px;
white-space: nowrap; white-space: nowrap;
color: #fff; color: #fff;
max-width: 114px;
overflow: hidden;
text-overflow: ellipsis;
} }
.node .artnet-info.out-info { .node .artnet-info.out-info {
@@ -492,11 +504,11 @@
width: 120px; width: 120px;
} }
.node .artnet-hover:hover { body.artnet-mode .node .artnet-hover:hover {
z-index: 100; z-index: 100;
} }
.node .artnet-hover:hover .artnet-detail-wrapper { body.artnet-mode .node .artnet-hover:hover .artnet-detail-wrapper {
display: block; display: block;
will-change: transform; will-change: transform;
} }
@@ -543,6 +555,9 @@
white-space: nowrap; white-space: nowrap;
background: #468; background: #468;
color: #fff; color: #fff;
max-width: 114px;
overflow: hidden;
text-overflow: ellipsis;
} }
.node .sacn-hover { .node .sacn-hover {
@@ -583,11 +598,11 @@
width: 120px; width: 120px;
} }
.node .sacn-hover:hover { body.sacn-mode .node .sacn-hover:hover {
z-index: 100; z-index: 100;
} }
.node .sacn-hover:hover .sacn-detail-wrapper { body.sacn-mode .node .sacn-hover:hover .sacn-detail-wrapper {
display: block; display: block;
will-change: transform; will-change: transform;
} }
@@ -1059,8 +1074,12 @@
}); });
} }
function buildLinkStats(container, speed, errIn, errOut, rates) { function buildLinkStats(container, portLabel, speed, errIn, errOut, rates) {
const plainLines = []; const plainLines = [];
if (portLabel) {
addClickableValue(container, 'PORT', portLabel, plainLines);
container.appendChild(document.createTextNode('\n'));
}
addClickableValue(container, 'LINK', formatLinkSpeed(speed), plainLines); addClickableValue(container, 'LINK', formatLinkSpeed(speed), plainLines);
container.appendChild(document.createTextNode('\n')); container.appendChild(document.createTextNode('\n'));
addClickableValue(container, 'ERR', 'RX ' + errIn + ' / TX ' + errOut, plainLines); addClickableValue(container, 'ERR', 'RX ' + errIn + ' / TX ' + errOut, plainLines);
@@ -1223,16 +1242,17 @@
if (switchConnection.external) portEl.classList.add('external'); if (switchConnection.external) portEl.classList.add('external');
const speedClass = getSpeedClass(switchConnection.speed); const speedClass = getSpeedClass(switchConnection.speed);
if (speedClass) portEl.classList.add(speedClass); if (speedClass) portEl.classList.add(speedClass);
portEl.textContent = switchConnection.showSwitchName const portLabel = switchConnection.showSwitchName
? switchConnection.switchName + ':' + switchConnection.port ? switchConnection.switchName + ':' + switchConnection.port
: switchConnection.port; : switchConnection.port;
portEl.textContent = portLabel;
const statsEl = container.querySelector('.link-stats'); const statsEl = container.querySelector('.link-stats');
statsEl.innerHTML = ''; statsEl.innerHTML = '';
const errIn = switchConnection.errors?.in || 0; const errIn = switchConnection.errors?.in || 0;
const errOut = switchConnection.errors?.out || 0; const errOut = switchConnection.errors?.out || 0;
const r = switchConnection.rates; const r = switchConnection.rates;
buildLinkStats(statsEl, switchConnection.speed, errIn, errOut, buildLinkStats(statsEl, portLabel, switchConnection.speed, errIn, errOut,
r ? {rxBytes: r.outBytes, rxPkts: r.outPkts, txBytes: r.inBytes, txPkts: r.inPkts} : null); r ? {rxBytes: r.outBytes, rxPkts: r.outPkts, txBytes: r.inBytes, txPkts: r.inPkts} : null);
} else { } else {
const container = div.querySelector(':scope > .port-hover'); const container = div.querySelector(':scope > .port-hover');
@@ -1336,14 +1356,15 @@
uplinkEl.className = 'uplink'; uplinkEl.className = 'uplink';
const speedClass = getSpeedClass(uplinkInfo.speed); const speedClass = getSpeedClass(uplinkInfo.speed);
if (speedClass) uplinkEl.classList.add(speedClass); if (speedClass) uplinkEl.classList.add(speedClass);
uplinkEl.textContent = uplinkInfo.localPort + ' → ' + uplinkInfo.parentName + ':' + uplinkInfo.remotePort; const uplinkLabel = uplinkInfo.localPort + ' → ' + uplinkInfo.parentName + ':' + uplinkInfo.remotePort;
uplinkEl.textContent = uplinkLabel;
const statsEl = container.querySelector('.link-stats'); const statsEl = container.querySelector('.link-stats');
statsEl.innerHTML = ''; statsEl.innerHTML = '';
const errIn = uplinkInfo.errors?.in || 0; const errIn = uplinkInfo.errors?.in || 0;
const errOut = uplinkInfo.errors?.out || 0; const errOut = uplinkInfo.errors?.out || 0;
const r = uplinkInfo.rates; const r = uplinkInfo.rates;
buildLinkStats(statsEl, uplinkInfo.speed, errIn, errOut, buildLinkStats(statsEl, uplinkLabel, uplinkInfo.speed, errIn, errOut,
r ? {rxBytes: r.inBytes, rxPkts: r.inPkts, txBytes: r.outBytes, txPkts: r.outPkts} : null); r ? {rxBytes: r.inBytes, rxPkts: r.inPkts, txBytes: r.outBytes, txPkts: r.outPkts} : null);
} else { } else {
const rootEl = div.querySelector(':scope > .root-label'); const rootEl = div.querySelector(':scope > .root-label');