Skip to content

Make hover graphs clickable and sharper on high-density displays - #312

Merged
TheWitness merged 11 commits into
Cacti:developfrom
alcatron:feat/interactive-sharp-hovers-20261016
Oct 17, 2026
Merged

TheWitness merged 11 commits into
Cacti:developfrom
alcatron:feat/interactive-sharp-hovers-20261016

Conversation

@alcatron

@alcatron alcatron commented Oct 16, 2026 •

Copy link
Copy Markdown
Contributor

Description

Let each Cacti hover preview open its own full graph, independent of the map link destination. Preserve the popup during pointer transfer and keyboard focus, close it on exit/Escape and clean up when switching hotspots. ArrowDown enters the first preview from a focused hotspot; Escape returns focus without reopening the popup. Pointer presence is tracked independently of keyboard focus.

Use a bounded Weathermap graph-options hook for double-density compact PNG previews while preserving display size and original-image fallback. Density requests bypass Boost image caching; collectors that delegate graph rendering keep ordinary previews unless local double-density rendering is supported. Hide generated captions including repeated clone suffixes while keeping descriptive titles. No Cacti core changes are required for these features.

Keep Cacti’s graph layout class intact during AJAX navigation and restrict Weathermap scrolling to areas containing its own maps or gallery. This prevents graph filters and images overlapping the device tree after leaving Weathermap.

Make traffic-glow masks follow the visible rendered node outline, including its label, so transparent icon padding no longer cuts off the halo before it reaches the artwork. Preserve the existing masks for traffic labels, titles, timestamps and legends, with a rectangle fallback when a rendered node image is unavailable.

Related work

Extends #274 and follows #302.

Validation

PHP 8.3 isolated Cacti-layout fixture: 295 tests / 5,927 assertions; clickable-hover, density, interaction and Safari glow browser checks. PHP/JavaScript syntax, whitespace and release manifest checks pass. Required changed-line PHP coverage is 100% (92/92 measured lines); upstream CI and review results must be checked separately.

The viewer layout regression reproduces the previous failure and passes with the repair. Verified live in Safari by navigating through Weathermap back to the affected device’s graph tree.

The traffic-animation regression covers transparent padding, stepped silhouettes, wholly transparent nodes, palette transparency, blank rows and fractional drawing origins. The browser fixture passes glow colour, masking, reduced motion and cleanup checks. Verified live in Safari: the 96.95% red half-link reaches the server artwork while its icon and label remain clear; the opposite low-utilisation direction remains unlit.

The latest review regressions cover Boost cache bypass, local/delegated rendering capability, ArrowDown/Escape focus transfer, and focusout while the pointer remains over a preview. All six hover/viewer browser fixtures pass.

Mixed-input regressions cover pointer/focus on either hotspot or popup, eventual dismissal, keyboard entry, Escape and switching. Sharp editor notes retain rectangle glow masks even when their node bitmap is transparent; ordinary padded icons retain silhouette masks. Generated-caption matching avoids ambiguous repetition, and the density fixture directly loads the real hook without dynamic evaluation. Clickable-hover, glow and interaction DOM fixtures pass.

Tooltip dismissal delegates pending-open cleanup to jQuery UI without cancelling a successor popup’s timer. The pending-open regression passes against bundled jQuery UI 1.13.2 and 1.14.2. Density-option detection ignores quoted graph text and consumes Cacti’s backslash-newline/CRLF continuations, preserving duplicate-zoom prevention with the real RRD_NL separator.

Release notes for this change are consolidated in #314 under Weathermap 2.0 (security fixes, issue fixes, then features).

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Cache collisions, unsupported remote density rendering and keyboard/pointer interaction defects remain unresolved.

4 open findings
What changed in this PR

Extends Weathermap hover previews with independent graph links and high-density rendering while preserving Cacti’s layout during AJAX navigation.

Changes:

  • Adds clickable previews, density requests and popup interaction handling.
  • Expands generated-caption suppression and scopes Weathermap scrolling.
  • Adds regression coverage and changelog entries.
File Description
tests/​Unit/​HoverDensityOptionsTest.php Tests bounded density-hook behavior.
tests/​Support/​HoverDensityRegression.php Adds standalone density regression checks.
tests/​Browser/​ViewerLayoutTest.cjs Tests layout preservation during navigation.
tests/​Browser/​TrafficGlowTest.cjs Updates the tooltip stub.
tests/​Browser/​HoverInteractionTest.cjs Tests independent preview destinations.
tests/​Browser/​HoverDensityTest.cjs Tests density URLs and fallback.
tests/​Browser/​ClickableHoverTest.cjs Tests popup links, interaction and captions.
setup.php Registers and implements the density hook.
js/​weathermap.js Implements preview enhancements and scoped scrolling.
CHANGELOG.md Records hover and layout changes.

🧠 Review effort: Balanced


💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

Comment thread js/weathermap.js
Comment thread js/weathermap.js
Comment thread js/weathermap.js Outdated
Comment thread js/weathermap.js Outdated

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Hotspot interaction can prematurely dismiss previews, and high-density editor notes lose their glow protection.

2 open findings
4 resolved since last review

🧠 Review effort: Balanced

Comment thread js/weathermap.js Outdated
Comment thread lib/WeatherMap.animation.php
@sonarqubecloud

Copy link
Copy Markdown

@alcatron

Copy link
Copy Markdown
Contributor Author

Rechecked the current PR and pushed the review repairs. Mixed-input regressions cover pointer/focus on either hotspot or popup, eventual dismissal, keyboard entry, Escape and switching. Sharp editor notes retain rectangle glow masks even when their node bitmap is transparent; ordinary padded icons retain silhouette masks. Generated-caption matching avoids ambiguous repetition, and the density fixture directly loads the real hook without dynamic evaluation. Clickable-hover, glow and interaction DOM fixtures pass.

Validation: 294 tests / 5,918 assertions, plus the focused checks described above. New regression cases reproduce the relevant defects against the preceding code. These PR changes have not been installed on the live server. CI results are still separate from local validation.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Tooltip dismissal and keyboard re-entry still have unresolved lifecycle defects.

1 open issue
1 previously missed issue

In code that hasn't changed since last review

Medium severity ArrowDown cannot reopen popup after Escape dismissal

js/​weathermap.js:101

After ArrowDown enters a preview and Escape dismisses it, pressing ArrowDown again does nothing. This handler still references the removed ui.tooltip and attempts to focus its detached link. The hotspot remains focused, so there is no new focusin event to reopen the popup. On an explicit ArrowDown press, reopen a closed popup and focus its first link once it is available; otherwise resolve the current popup rather than a captured one. Preserve Escape's behavior of returning focus without automatically reopening. Add a regression that repeats ArrowDown after Escape without blurring the hotspot.

2 resolved since last review

Review effort: Balanced

Comment thread js/weathermap.js
@alcatron

Copy link
Copy Markdown
Contributor Author

Fixed in fcec824: hotspot focusout explicitly schedules dismissal without clearing independent pointer presence. The mouse-open → focus hotspot → leave pointer → wait → blur sequence now closes correctly. ArrowDown resolves the current tooltip and explicitly reopens a dismissed preview, focusing its first link when open; Escape returns focus without automatic reopening. Both new lifecycle sequences pass alongside mixed-input, switching and cleanup cases. The 294-test PHP suite and five hover/viewer browser fixtures pass.

These repairs update the PR branch only; the live server has not been changed. New GitHub checks are separate from the passing local validation.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🟡 Changes recommended

Unresolved popup-dismissal and density-option detection defects can leave previews stuck open or incorrectly sized.

1 open issue
1 previously missed issue

In code that hasn't changed since last review

Medium severity Quoted text falsely detected as zoom option, causing wrong scaling

setup.php:107

The whitespace match also recognizes --zoom inside quoted option values. For example, --title 'Network --zoom report' suppresses scaling despite containing no zoom option. The resulting ordinary-size PNG is advertised as 2× and displayed at half size. Detect an actual zoom option rather than text inside a quoted value, and add a regression covering quoted graph text alongside duplicate-zoom prevention.

1 resolved since last review

Review effort: Balanced

Comment thread js/weathermap.js Outdated
@alcatron

Copy link
Copy Markdown
Contributor Author

Fixed the new stale-focusout finding and the summary-only zoom finding in 62b25d1. Close events for a hotspot without a live tooltip return before touching the shared dismissal timer, so A’s late blur cannot cancel B’s pending close. The real jQuery UI regression reproduces the switching failure before the fix and passes after. Zoom-option detection is quote-aware, so --title text containing --zoom no longer suppresses density; real zoom flags still prevent duplicate scaling. Quoted-title regressions fail before the repair and pass after. Full PHP suite: 294 tests / 5,918 assertions, plus the five hover/viewer DOM fixtures and the updated density-hook regression.

These changes update the PR branch only; the live server is unchanged. GitHub CI results remain separate from local validation.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 Needs a closer look

Unresolved tooltip-lifecycle and zoom-parsing defects, together with cross-framework integration risk, require fixes and verified integration results before human approval.

2 open issues
1 resolved since last review

Review effort: Balanced

Comment thread js/weathermap.js Outdated
Comment thread setup.php

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔵 Needs a closer look

Stateful tooltip behavior and Cacti rendering integration need human confirmation of upstream CI and supported-browser results.

No open issues 🎉

2 resolved since last review

Review effort: Balanced

@sonarqubecloud

Copy link
Copy Markdown

@TheWitness
TheWitness merged commit 58cfb9e into Cacti:develop Oct 17, 2026
2 checks passed
TheWitness pushed a commit that referenced this pull request Oct 17, 2026
* Allow link comments to follow link curves

* Use 1000M as the inherited link bandwidth default

* Clarify link workflows and add node display-name positioning

* Make hover graphs clickable and sharper on high-density displays

* Bundle additional 96px network-device node icons

* Prepare Weathermap 2.0 identification and release notes

* Reference PR #309 in changelog

* Reference PR #310 in changelog

* Reference PR #311 in changelog

* Reference PR #312 in changelog

* Reference PR #313 in changelog

* Reference PR #314 in changelog

* Preserve translation template project metadata

* Preserve translation template project metadata

* Preserve translation template project metadata

* Preserve translation template project metadata

* Preserve translation template project metadata

* Use established changelog categories throughout 2.0-dev

* Preserve Cacti graph layout after Weathermap navigation

* Fix traffic glow masking around transparent node icons

* Preserve curved comment alignment and nudge direction

* Set plugin working directory in bandwidth regression test

* Preserve configured hover previews when opening properties

* Fix hover density caching and keyboard interaction

* Preserve curved glyph kerning and reject reversed offset text

* Add the required license notice to bandwidth regression

* Preserve traffic identity and hover settings in link properties

* Keep mixed-input previews open and protect sharp note text

* Parse traffic scaling without ambiguous numeric repetition

* Fall back before inward curvature compresses glyph spacing

* Honor outer source multipliers and label visible graph pickers

* Complete tooltip blur dismissal and keyboard re-entry

* Share quarter-circle geometry in rendering regressions

* Use the Cacti request helper for the curve checkbox

* Resolve Cacti RRA identities and bound editor label presets

* Ignore stale tooltip events and quoted zoom text

* Add two-step Undo and Redo to the map editor

* Use PHP-generated sessions in editor history tests

* Isolate duplicated tabs and enforce undo history expiry and quota

* Cancel pending hover opens and recognize RRDtool continuations

* Import the history worker directly in browser regression tests

* Preserve history for unchanged forms and enforce JSON storage quota

* Keep undo history when raw configuration dialogs are unchanged

* Preserve untouched colour history and validate included restore assets

* Gate startup saves and preserve scale order and restored title cache

* Cover both graph-picker JSON request signatures in the fixture
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants