[fix] Fixed redundant node labels and overlays #454#474
[fix] Fixed redundant node labels and overlays #454#474nemesifier merged 18 commits intoopenwisp:masterfrom
Conversation
Test.mp4 |
|
Fixed the no-shadow linting error in src/js/netjsongraph.render.js and finalized the parameter rename in src/js/netjsongraph.config.js. Could you please run the checks again? |
nemesifier
left a comment
There was a problem hiding this comment.
The patch contains changes to the formatting which are polluting the actual changes. If formatting needs to be updated let's open a PR to master with only formatting changes.
| clusterSeparation: 20, | ||
| showMetaOnNarrowScreens: false, | ||
| showLabelsAtZoomLevel: 13, | ||
| showMapLabelsAtZoom: 13, |
There was a problem hiding this comment.
This is an unsolicited backward incompatible renaming
There was a problem hiding this comment.
Acknowledged. I am working on the fixes now. I will revert showMapLabelsAtZoom back to showLabelsAtZoomLevel and remove the unrelated formatting changes. I will force push the updates shortly to clean up the commit history.
There was a problem hiding this comment.
I think I was wrong about this comment, we need to read the issue description again more closely. I am sorry for this mistake, I have too many things on my mind right now and I can forget some details, let's follow the issue description and reply to the issues brought up there and use it as a guide to resolve the issue. That's the right way to do it.
5648e36 to
a4054d7
Compare
c6c106d to
465e1e7
Compare
|
I'm working in a WSL (Ubuntu) environment and have run the Prettier formatters, but the QA checks are still failing locally on my machine. I've tried to resolve the formatting/linting issues, but I'm stuck on why the checks persist in failing. Could you please check the logs and advise what might be missing?" |
nemesifier
left a comment
There was a problem hiding this comment.
I need to insist, please only send the bugfix change, do not send any other change, if QA checks fail, we'll look into it. The PR in the current state contains a lot of other changes unrelated to the bugfix which is time consuming for maintaienrs to review.
a685e69 to
1f239ae
Compare
|
Done please have a look on why ci build failing. |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
Warning Rate limit exceeded
Your organization is not enrolled in usage-based pricing. Contact your admin to enable usage-based pricing to continue reviews beyond the rate limit, or try again in 42 minutes and 41 seconds. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Organization UI Review profile: ASSERTIVE Plan: Pro Run ID: 📒 Files selected for processing (4)
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThis change addresses label and overlay redundancy in geographic maps by renaming the configuration option Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Suggested reviewers
Caution Pre-merge checks failedPlease resolve all errors before merging. Addressing warnings is optional.
❌ Failed checks (1 error)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 3
Fix all issues with AI Agents 🤖
In @src/js/netjsongraph.render.js:
- Around line 538-546: The code currently only branches on showMapLabelsAtZoom
=== undefined, so passing showMapLabelsAtZoom: false isn't treated as an
explicit "disable labels" intent; update the resolution logic to explicitly
handle showMapLabelsAtZoom === false as the disabled case (e.g., check if
showMapLabelsAtZoom === false and preserve/flag that state), otherwise run the
existing undefined fallback to self.config.showLabelsAtZoomLevel or 13; ensure
subsequent code that validates numeric zoom treats false as the explicit disable
option rather than an invalid type.
- Line 694: The variable NewZoom uses PascalCase; rename it to camelCase
(newZoom) by changing the declaration "const NewZoom = self.leaflet.getZoom();"
to "const newZoom = self.leaflet.getZoom();" and update every usage of NewZoom
in this module (e.g., any comparisons, assignments, or calls that reference
NewZoom) to newZoom so identifiers remain consistent with JavaScript naming
conventions.
🧹 Nitpick comments (1)
src/js/netjsongraph.render.js (1)
572-572: Consider preserving descriptive variable names.The variable renames (
currentZoom→cZoom,showLabel→sLabel) reduce readability without clear benefit. The original names were more descriptive and self-documenting.🔎 Suggested improvement
- const cZoom = self.leaflet.getZoom(); - const sLabel = cZoom >= self.config.showLabelsAtZoomLevel; + const currentZoom = self.leaflet.getZoom(); + const showLabel = typeof showMapLabelsAtZoom === "number" && currentZoom >= showMapLabelsAtZoom; self.echarts.setOption({ series: [ { id: "geo-map", label: { - show: sLabel, + show: showLabel, },Also applies to: 579-579
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/js/netjsongraph.render.js
🧰 Additional context used
🪛 GitHub Actions: netjsongraph.js CI BUILD
src/js/netjsongraph.render.js
[warning] 1-1: Code style issues found. Run Prettier with --write to fix.
[error] 1-1: Prettier check failed. Hint: run 'openwisp-qa-format' or 'Prettier --write' to fix code style issues in this file.
🔇 Additional comments (2)
src/js/netjsongraph.render.js (2)
581-585: Good: Emphasis labels remain hidden to prevent overlay overlap.Setting
emphasis.label.showtofalseunconditionally aligns with the PR objective to prevent label overlap with hover overlays. This ensures that when a user hovers over a node, the overlay tooltip appears without competing with the label.
538-610: Theopenwisp-qa-formatscript does not exist in this repository's package.json. Additionally, the code is already properly formatted—Prettier reports no changes needed. The review comment is based on a non-existent issue.Likely an incorrect or invalid review comment.
Hey, @Dhruv-ub try running |
@stktyagi Thanks for suggestion but I already ran that command, still I am having issue. |
This worked, you might want to recheck your setup environment. |
Thanks for resolving it, will check it |
|
@Dhruv-ub try: |
@Adityashandilya555 I think you added a video of showMapLabelsAtZoom being set to false. |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
|
@coderabbitai is this ready to merge? |
|
Tip For best results, initiate chat on the files or code changes. The Comment image shows a geographic map with mountain labels (e.g., “Südliche Wösterspitze 2537 m”, “Ruggles 2270 m”, “Trittwankopf 2482 m”) and a blue node under the cursor. A white tooltip is visible reading:
Why I think it’s ready
One small follow-up (optional pre-merge, trivial post-merge)
If you want, I can open a quick follow-up issue for that README tweak. 🧠 Learnings used |
Will update as per its requirements and push asap |
|
The Comment image shows a geographic map with mountain POIs labeled (e.g., “Südliche Wösterspitze 2537 m”, “Rüggle 2270 m”). A blue node is under the cursor, and a white tooltip is visible with:
What’s green right now
What still blocks merge
Nice-to-have (non-blocking)
Ping me after your push; I’ll re-run the review immediately. 🧠 Learnings used✅ Actions performedReview triggered.
|
nemesifier
left a comment
There was a problem hiding this comment.
I am sorry it took long for me to review this, it's been a tough period.
It looks mostly good, but on a closer look I still found some issues, see below.
I would appreciate a screen recording that shows how the UI issues have been addressed.
1. Performance: setOption called on every mouseover/mouseout (High)
File: src/js/netjsongraph.render.js:629-667
The mouseover and mouseout handlers each call self.echarts.setOption()
on every single hover event. setOption is not a cheap operation -- it triggers
ECharts' internal diff/merge and re-render pipeline. On a map with hundreds of
nodes, rapidly moving the cursor across multiple nodes will trigger this
repeatedly, potentially causing jank or frame drops.
Suggestion: Debounce the handlers, or track a boolean state flag and skip
the setOption call if the label visibility already matches the desired state.
let labelsCurrentlyHidden = false;
self.echarts.on("mouseover", () => {
if (!labelsCurrentlyHidden && showMapLabelsAtZoom && ...) {
labelsCurrentlyHidden = true;
self.echarts.setOption(/* hide */);
}
});
self.echarts.on("mouseout", () => {
if (labelsCurrentlyHidden && showMapLabelsAtZoom && ...) {
labelsCurrentlyHidden = false;
self.echarts.setOption(/* show */);
}
});2. Event handler accumulation on re-render (Medium)
File: src/js/netjsongraph.render.js:629, 649
self.echarts.on("mouseover", ...) and self.echarts.on("mouseout", ...) are
registered every time mapRender is called. If the user toggles between map
and graph mode via switchMode (see netjsongraph.js:150-176), mapRender
is called again, and new handlers are stacked on top of old ones. Over several
toggles this leads to duplicate handler invocations.
Suggestion: Call self.echarts.off("mouseover") /
self.echarts.off("mouseout") before registering, or use named functions and
off them first.
3. All labels hide on any node hover (Low/UX)
Screencast.from.2026-03-11.16-54-19.mp4
File: src/js/netjsongraph.render.js:629-667
When hovering any node, all labels on the map disappear. The issue
description says "the labels should disappear if there's another overlay
showing up on hover." The current implementation is broader than necessary --
it hides every label rather than just the one overlapping with the tooltip.
It looks quite weird on a busy map. Can we only hide the specific node label being hovered? That's what I was expecting, I wasn't expecting that all labels were hidden.
While testing for this issue, I found another issue: if you change the zoom level, labels are hidden until mouseover, see:
Screencast.from.2026-03-11.16-54-34.mp4
4. Config value captured at render time won't reflect dynamic changes (Low)
File: src/js/netjsongraph.render.js:606
const {showMapLabelsAtZoom} = self.config;This destructures the value once at render time. The mouseover, mouseout,
and zoomend handlers all close over this captured value. If a consumer
changes self.config.showMapLabelsAtZoom after initial render (e.g., via a
settings UI), the handlers won't see the updated value.
Suggestion: Read from self.config.showMapLabelsAtZoom directly in the
handlers instead of destructuring.
5. animationDuration: 1000 added without clear reason (Low)
File: src/js/netjsongraph.render.js:334
The scatter series now has animationDuration: 1000 added. This wasn't
mentioned in the issue or any commit message. It adds a 1-second animation to
node rendering which could impact perceived performance on large datasets.
6. silent: true also set on graph mode labels (Low)
File: src/js/netjsongraph.render.js:178
baseGraphLabel.silent = true;The issue is specifically about map mode label/tooltip overlap. Setting
silent: true on graph-mode labels means graph labels also won't respond to
mouse events. This may or may not be desired -- the issue description didn't
mention graph mode labels having overlap problems. If graph labels should remain interactive, this line should be removed.
Question: can you explain why this is added and what effect it has?
6fedf7c to
7d0bdcf
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/js/netjsongraph.render.js`:
- Line 602: Remove the commented-out dead code line referencing
showMapLabelsAtZoom in the rendering module (the line "// const
{showMapLabelsAtZoom} = self.config;") inside src/js/netjsongraph.render.js;
simply delete this unused commented declaration so the file contains no leftover
commented variable destructuring and keep related code (e.g., any uses of
self.config or map label logic) intact.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: 019d870c-b5f6-4c49-8801-61ce226ee353
📒 Files selected for processing (2)
src/js/netjsongraph.render.jstest/netjsongraph.render.test.js
📜 Review details
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{js,ts,css,scss,json}
📄 CodeRabbit inference engine (AGENTS.md)
Format code using
openwisp-qa-formatcommand with Python virtualenv enabled andyarn lint:fix(runs eslint --fix and prettier via lint-staged)
Files:
test/netjsongraph.render.test.jssrc/js/netjsongraph.render.js
**/*.test.{js,ts}
📄 CodeRabbit inference engine (AGENTS.md)
Write unit tests using Jest with jsdom and run with
yarn test
Files:
test/netjsongraph.render.test.js
src/**/*.js
📄 CodeRabbit inference engine (AGENTS.md)
Husky pre-commit hooks automatically run lint-staged to format JavaScript files in
src/**/*.jswith prettier
Files:
src/js/netjsongraph.render.js
🧠 Learnings (11)
📓 Common learnings
Learnt from: Dhruv-ub
Repo: openwisp/netjsongraph.js PR: 474
File: src/js/netjsongraph.render.js:347-351
Timestamp: 2026-01-30T08:31:21.783Z
Learning: Project preference: treat showMapLabelsAtZoom = 0 as “disabled” (not a valid threshold) and keep falsy checks in src/js/netjsongraph.render.js; document or normalize this if needed.
Learnt from: nemesifier
Repo: openwisp/netjsongraph.js PR: 0
File: :0-0
Timestamp: 2026-02-06T16:33:48.468Z
Learning: In the openwisp/netjsongraph.js project, prioritize pragmatic reviews that focus on critical matters with real user impact (functionality, performance, security, maintainability) over minor code quality details that require significant effort for no noticeable benefit. Avoid perfectionist suggestions when tests pass and functionality is correct.
📚 Learning: 2026-01-30T08:31:21.783Z
Learnt from: Dhruv-ub
Repo: openwisp/netjsongraph.js PR: 474
File: src/js/netjsongraph.render.js:347-351
Timestamp: 2026-01-30T08:31:21.783Z
Learning: Project preference: treat showMapLabelsAtZoom = 0 as “disabled” (not a valid threshold) and keep falsy checks in src/js/netjsongraph.render.js; document or normalize this if needed.
Applied to files:
test/netjsongraph.render.test.js
📚 Learning: 2026-01-20T16:51:06.213Z
Learnt from: codesankalp
Repo: openwisp/netjsongraph.js PR: 425
File: src/js/netjsongraph.render.js:1-26
Timestamp: 2026-01-20T16:51:06.213Z
Learning: In the netjsongraph.js project, imports from `echarts/lib/chart/*/install`, `echarts/lib/component/*/install`, and `echarts/lib/renderer/install*` paths produce better tree-shaking results than the public entry points (`echarts/charts`, `echarts/components`, `echarts/renderers`) in their webpack configuration. The project maintainer has tested both approaches and confirmed the `/lib/*/install` pattern yields smaller bundles.
Applied to files:
test/netjsongraph.render.test.js
📚 Learning: 2026-01-22T22:37:11.271Z
Learnt from: CR
Repo: openwisp/netjsongraph.js PR: 0
File: AGENTS.md:0-0
Timestamp: 2026-01-22T22:37:11.271Z
Learning: Applies to test/netjsongraph.browser.test.js : Write browser tests in test/netjsongraph.browser.test.js using Chrome/ChromeDriver and run with `yarn test test/netjsongraph.browser.test.js`
Applied to files:
test/netjsongraph.render.test.js
📚 Learning: 2026-02-06T16:33:48.468Z
Learnt from: nemesifier
Repo: openwisp/netjsongraph.js PR: 0
File: :0-0
Timestamp: 2026-02-06T16:33:48.468Z
Learning: In the openwisp/netjsongraph.js project, prioritize pragmatic reviews that focus on critical matters with real user impact (functionality, performance, security, maintainability) over minor code quality details that require significant effort for no noticeable benefit. Avoid perfectionist suggestions when tests pass and functionality is correct.
Applied to files:
test/netjsongraph.render.test.jssrc/js/netjsongraph.render.js
📚 Learning: 2026-01-24T23:09:24.928Z
Learnt from: dee077
Repo: openwisp/netjsongraph.js PR: 444
File: src/js/netjsongraph.util.js:1404-1442
Timestamp: 2026-01-24T23:09:24.928Z
Learning: In the `moveNodeInRealTime` function in `src/js/netjsongraph.util.js`, it is recommended that `node.properties` be set, and the function should return early when `properties` is not provided rather than initializing it or handling it gracefully.
Applied to files:
test/netjsongraph.render.test.jssrc/js/netjsongraph.render.js
📚 Learning: 2026-01-27T19:09:23.929Z
Learnt from: nemesifier
Repo: openwisp/netjsongraph.js PR: 473
File: src/js/netjsongraph.render.js:433-468
Timestamp: 2026-01-27T19:09:23.929Z
Learning: In the netjsongraph.js project, when implementing wheel zoom propagation from the graph container to the canvas: ECharts intercepts wheel events directly on the canvas with preventDefault(), so those events don't bubble to the container. A wheel listener on the container only catches events that occur outside the canvas (in the empty container space), making checks for e.target === canvas unnecessary since canvas events never reach the container listener.
Applied to files:
test/netjsongraph.render.test.jssrc/js/netjsongraph.render.js
📚 Learning: 2026-01-20T00:56:36.062Z
Learnt from: dee077
Repo: openwisp/netjsongraph.js PR: 417
File: src/js/netjsongraph.core.js:132-145
Timestamp: 2026-01-20T00:56:36.062Z
Learning: In the netjsongraph.js codebase, the data model does not support parallel links (multiple links between the same source and target). Ensure nodeLinkIndex is keyed by a single 'source~target' pair and that adding a link does not overwrite existing links for that pair. If parallel links are ever required, the data model must be changed (e.g., allow an array of links per 'source~target' key) rather than storing only one link.
Applied to files:
test/netjsongraph.render.test.jssrc/js/netjsongraph.render.js
📚 Learning: 2026-01-30T08:31:13.746Z
Learnt from: Dhruv-ub
Repo: openwisp/netjsongraph.js PR: 474
File: src/js/netjsongraph.render.js:347-351
Timestamp: 2026-01-30T08:31:13.746Z
Learning: In src/js/netjsongraph.render.js, treat showMapLabelsAtZoom = 0 as the explicit 'disabled' state (not a valid threshold). Do not rely on generic falsy checks for this flag. Update logic to distinguish between undefined/null (not set), 0 (disabled), and >0 (enabled at a given zoom). For example, use explicit checks such as: if (showMapLabelsAtZoom === 0) { /* labels hidden */ } else if (typeof showMapLabelsAtZoom === 'number' && showMapLabelsAtZoom > 0) { /* show labels at/above this zoom */ } else { /* default behavior or undefined */ }. If needed, document this convention or normalize input (e.g., set undefined to a sensible default) to avoid ambiguity in future reviews.
Applied to files:
src/js/netjsongraph.render.js
📚 Learning: 2026-01-20T16:50:56.414Z
Learnt from: codesankalp
Repo: openwisp/netjsongraph.js PR: 425
File: src/js/netjsongraph.render.js:1-26
Timestamp: 2026-01-20T16:50:56.414Z
Learning: In netjsongraph.js, prefer importing from echarts/lib/chart/*/install, echarts/lib/component/*/install, and echarts/lib/renderer/install* rather than the public entry points (echarts/charts, echarts/components, echarts/renderers) to improve tree-shaking and reduce bundle size. Apply this pattern across JS files in src (update imports accordingly) and verify by comparing bundle sizes between the install-path imports and the public-entry imports.
Applied to files:
src/js/netjsongraph.render.js
📚 Learning: 2026-01-04T08:00:40.936Z
Learnt from: dee077
Repo: openwisp/netjsongraph.js PR: 417
File: src/js/netjsongraph.util.js:1302-1341
Timestamp: 2026-01-04T08:00:40.936Z
Learning: In the netjsongraph.js codebase, the `== null` pattern is intentionally used to check for both null and undefined values in a single comparison, which is a well-established JavaScript idiom and should not be flagged for replacement with strict equality checks.
Applied to files:
src/js/netjsongraph.render.js
🔇 Additional comments (15)
src/js/netjsongraph.render.js (6)
60-60: LGTM!Setting
hideDelay: 0ensures the tooltip disappears immediately, improving predictability and aligning with the PR objective of making tooltip behavior explicit.
331-335: LGTM!The label configuration correctly merges existing config, conditionally hides labels when
showMapLabelsAtZoomis falsy, and setssilent: trueto prevent hover event capture. This addresses the PR objective of making labels non-interactive.
603-623: LGTM!The initial label visibility logic correctly hides labels when
showMapLabelsAtZoomis falsy or when the current zoom is below the threshold. Thesilent: trueflag ensures labels don't capture hover events.
625-633: LGTM!The empty handlers are appropriately retained for test compatibility. ECharts natively handles label visibility through the
emphasis: { label: { show: false } }configuration, making explicit setOption calls unnecessary.
635-655: LGTM!The
zoomendhandler correctly evaluates label visibility dynamically, maintainingsilent: trueand keeping emphasis labels hidden to prevent redundancy with tooltips.
754-766: LGTM!The cluster click handler now zooms to
currentZoom + 2(capped at max zoom) instead of just expanding, providing better user interaction for navigating into clusters.test/netjsongraph.render.test.js (9)
981-981: LGTM!Adding the
on: jest.fn()mock correctly supports testing the new echarts event handler registration.
1081-1086: LGTM!The config field rename to
showMapLabelsAtZoomand echarts mock update align with the implementation changes.
1224-1239: LGTM!The config update and the
echartsSetOptiondelegation tomockSelf.echarts.setOptionallow proper tracking of setOption calls in tests.
1275-1285: LGTM!The comments clearly explain the expected call count logic: 1 (initial render) + 1 (moveend update) = 2. This makes the test intention clear.
1473-1479: LGTM!Consistent updates to use the renamed config field and mock echarts event registration.
1506-1563: LGTM!The test setup properly configures mocks for testing label/tooltip interaction, including the key
silent: trueproperty in the mock return value.
1565-1584: LGTM!These tests verify that labels remain
silent: trueboth on initial render and after zoomend events, ensuring labels don't capture hover events.
1586-1606: LGTM!This test verifies that the mouseover/mouseout handlers are registered and callable without errors. Since the handlers are intentionally no-ops (ECharts handles label visibility natively via emphasis config), no assertions are needed beyond verifying registration.
1608-1670: LGTM!Comprehensive test coverage for the "labels completely disabled" scenario when
showMapLabelsAtZoomisfalse. The test correctly verifies:
- Initial label hiding via setOption
- Labels remain hidden at high zoom (zoomend)
- Labels remain hidden at low zoom (zoomend)
- Hover/unhover handlers don't error when labels are disabled
- Optimize ECharts setOption to prevent hover frame drops - Clean up event handlers on re-render to avoid duplication - Hide only hovered node label and fix zoom visibility bug - Read config state dynamically - Disable cluster animation and remove graph label silent flag
7d0bdcf to
2699d01
Compare
Node.Label.Testing.mp4Here is the testing video for the issue |
nemesifier
left a comment
There was a problem hiding this comment.
There were some bugs, I fixed any issue I encountered and it should be ready now.
@Dhruv-ub please double check when you can.
@coderabbitai review one last time, focus on real issues, approve if ready.
Code Review SummaryStatus: No Issues Found | Recommendation: Merge Overview
Files Reviewed (7 files)
Previous Issue Resolution✅ RESOLVED: The critical issue from the previous review (incomplete config rename in SummaryThe PR successfully:
All changes align with the issue #454 requirements. Reviewed by kimi-k2.5-0127 · 493,729 tokens |
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
To improve the interaction between map labels and hover overlays to avoid visual clutter and interaction conflicts, especially at higher zoom levels.
The hover overlay is confirmed to be the default ECharts tooltip. Its behavior is made more predictable, while label rendering is adjusted so labels no longer interfere with hover interactions.
Fixes #454
Checklist
Reference to Existing Issue
Closes #454.
Description of Changes
Screenshot