[feature] Add option to show node labels only after hitting a certain zoom level by cestercian · Pull Request #419 · openwisp/netjsongraph.js

cestercian · 2025-08-21T15:33:47Z

Node labels now prefer label, then name, then id for display. Added dynamic label visibility in graph mode based on zoom scale, controlled by graphLabelScaleThreshold and scale limits, with debounce to avoid excessive updates.

Checklist

I have read the OpenWISP Contributing Guidelines.
I have manually tested the changes proposed in this pull request.
I have written new test cases for new code and/or updated existing tests for changes to existing code.
I have updated the documentation.

Reference to Existing Issue

Closes #148.

Description of Changes

Improved node label selection logic:
- Prefer node.label → fallback to node.name → fallback to node.id.
Introduced dynamic label visibility in graph mode:
- Controlled by graphLabelScaleThreshold (default: 1.0).
- Respects scale limits defined in config.
- Uses debounce to prevent excessive updates.
- Ensures zoom/roam transform is not reset.
Added resize handling to maintain responsiveness.

Screenshot

Node labels now prefer 'label', then 'name', then 'id' for display. Added dynamic label visibility in graph mode based on zoom scale, controlled by 'graphLabelScaleThreshold' and scale limits, with debounce to avoid excessive updates.

nemesifier

Good progress on this @cestercian, it looks encouraging!

Here's a few details I have observed.

Labels are visible on initial page load with default settings

When I load the basic example, the labels are visible:

Consider a situation like the following, this is a screenshot from a prod system taken right after page load:

On real world systems, when the chart is busy, it doesn't make sense to show the labels after the page loads, it would be better to show the only after a certain level of zoom.

Can we configure the default setting of the library so that this happens automatically?

The users will still be able to tweak the settings if needed.

I expanded these concepts in #420, which we can work on at a later stage.

This reverts commit 97c4729.

Simplifies label visibility logic by using a label formatter that checks the current zoom level, instead of dynamically toggling label show/hide. Updates the example template to set showGraphLabelsAtZoom to 2 for clearer demonstration.

Simplifies node name assignment logic for clarity and consistency. Replaces Object.assign with spread syntax for cloning objects and updating series configuration, improving readability and maintainability.

cestercian · 2025-08-21T23:15:37Z

Screen.Recording.2025-08-22.at.4.14.15.AM.mov

Hi @nemesifier — I’ve addressed your changes and fixed a related bug.

Graph Mode

Added showGraphLabelsAtZoom to gate labels by series zoom without resets.
Switched label visibility to a formatter; no more setOption-driven snap-backs.
Introduced stable series IDs (graph-series) and use series-only updates.

Labels

Fallback to node.name or String(node.id) when node.label is missing.

Introduces tests to verify graph and map label visibility logic, including zoom-based label toggling and fallback to name/label/id. Also adds tests for stable series id assignment and event handler registration for resize and label toggling.

nemesifier

It's a lot better thank you!

However, I noticed that the graph starts moving (expanding) again when the labels are shown, see:

Simplifies node name assignment to use only the label property and refactors echarts option updates to set the entire option object instead of just the series. Also replaces object spread with Object.assign for link config in map options.

Node names are now determined by checking 'label', then 'name', and finally 'id' if neither is available. This ensures that nodes always have a meaningful name when rendered on the map.

Clarifies the behavior of the label-visibility threshold for graph mode in the README and updates the default value of `showGraphLabelsAtZoom` to 1 in the configuration. This makes label display more predictable and documents how to disable thresholding.

Simplified code formatting in netjsongraph.render.js for better readability and consistency. Updated test cases in netjsongraph.render.test.js to use more concise array and function calls, improving clarity and maintainability.

…ongraph.js into fix-zoom-labels

Changed ECharts series IDs from 'graph-series' and 'map-nodes' to 'network-graph' and 'geo-map' for consistency. Improved label visibility threshold logic for graph mode: now disabled by default and only enabled when a positive value is set. Updated related tests and documentation to reflect these changes.

nemesifier

@cestercian let's proceed with the improvements discussed today, see my comments below for further input.

Simplifies the logic for toggling graph labels based on zoom threshold by extracting zoom retrieval into a helper function and removing redundant try-catch blocks. Labels are now toggled only when crossing the threshold during zoom events, ignoring pan.

Simplified the label visibility logic in graph mode by introducing a shared helper for retrieving the current zoom level. Updated documentation to reflect the new default threshold value for label visibility.

Refactored the label display logic to directly check the zoom value from the first series in the ECharts option, removing unnecessary helper functions and improving readability.

Replaces usage of _labelsShown with LabelShown to ensure correct tracking of label visibility state in NetJSONGraphRender. This resolves potential issues with label display logic.

This reverts commit 9a3460d.

[chores] Revert Reduced Redundancy This reverts commit a03cacc.

nemesifier

After the latest changes the graph moves all the time, not just when the threshold is crossed.

PS: false alarm.

cestercian requested review from nemesifier and pandafy August 21, 2025 15:33

nemesifier assigned cestercian Aug 21, 2025

nemesifier added the enhancement label Aug 21, 2025

nemesifier mentioned this pull request Aug 21, 2025

[feature] Use as much screen estate as possible on initial load #420

Open

nemesifier reviewed Aug 21, 2025

View reviewed changes

Comment thread src/js/netjsongraph.render.js Outdated

cestercian added 4 commits August 22, 2025 03:06

Revert "[fix] Improve node label selection and dynamic label visibility"

f742796

This reverts commit 97c4729.

beta v1

60ed602

[change] Graph label visibility by zoom threshold

3e814d7

Simplifies label visibility logic by using a label formatter that checks the current zoom level, instead of dynamically toggling label show/hide. Updates the example template to set showGraphLabelsAtZoom to 2 for clearer demonstration.

[fix] Yarn:lint fix

51d82bd

Simplifies node name assignment logic for clarity and consistency. Replaces Object.assign with spread syntax for cloning objects and updating series configuration, improving readability and maintainability.

cestercian added 3 commits August 22, 2025 04:51

[fix] QA-checks

40dd22b

[chores] Qa

f025069

cestercian requested a review from nemesifier August 21, 2025 23:29

Merge branch 'master' into fix-zoom-labels

18695ba

nemesifier reviewed Aug 22, 2025

View reviewed changes

cestercian changed the base branch from master to fix-graph-zoom-labels August 23, 2025 11:57

cestercian changed the base branch from fix-graph-zoom-labels to master August 25, 2025 18:36

cestercian added 7 commits August 26, 2025 00:12

[fix] Qa-checks

4998ae9

[fix] Improve node name assignment in map rendering

57e48e2

Node names are now determined by checking 'label', then 'name', and finally 'id' if neither is available. This ensures that nodes always have a meaningful name when rendered on the map.

Merge branch 'master' into fix-zoom-labels

e6a0a97

[fix] QA-checks

a8ffcf3

Simplified code formatting in netjsongraph.render.js for better readability and consistency. Updated test cases in netjsongraph.render.test.js to use more concise array and function calls, improving clarity and maintainability.

Merge branch 'fix-zoom-labels' of https://github.com/cestercian/netjs…

00d174a

…ongraph.js into fix-zoom-labels

[change] Update netjsongraph.config.js

1227cf1

cestercian added the gsoc-idea Potential step of a GSoC project idea label Sep 8, 2025

Merge branch 'master' into fix-zoom-labels

974183b

cestercian moved this to In review in [GSoC25] Improve netjsongraph.js resiliency and visualization Sep 8, 2025

cestercian added this to the [GSoC25] Improve netjsongraph.js resiliency and visualization milestone Sep 8, 2025

nemesifier requested changes Sep 8, 2025

View reviewed changes

Comment thread src/js/netjsongraph.config.js Outdated

Comment thread src/js/netjsongraph.render.js Outdated

Comment thread src/js/netjsongraph.render.js Outdated

Comment thread README.md

Comment thread README.md Outdated

Comment thread src/js/netjsongraph.render.js Outdated

cestercian requested a review from nemesifier September 8, 2025 23:05

Merge branch 'master' into fix-zoom-labels

c243ece

nemesifier requested changes Sep 9, 2025

View reviewed changes

Comment thread README.md Outdated

Comment thread src/js/netjsongraph.render.js Outdated

Comment thread src/js/netjsongraph.render.js Outdated

cestercian added 8 commits September 10, 2025 20:02

Refactor graph label zoom threshold logic

76a39e4

Simplified the label visibility logic in graph mode by introducing a shared helper for retrieving the current zoom level. Updated documentation to reflect the new default threshold value for label visibility.

Merge branch 'master' into fix-zoom-labels

038e140

Simplify label toggle logic on graph zoom

9b7f3a8

Refactored the label display logic to directly check the zoom value from the first series in the ECharts option, removing unnecessary helper functions and improving readability.

Fix label visibility state variable name

222ae74

Replaces usage of _labelsShown with LabelShown to ensure correct tracking of label visibility state in NetJSONGraphRender. This resolves potential issues with label display logic.

[fix] QA-checks

9a3460d

Revert "[fix] QA-checks"

0fc60a6

This reverts commit 9a3460d.

[fix] QA-checks

694cdcf

cestercian requested a review from nemesifier September 12, 2025 22:12

cestercian mentioned this pull request Sep 12, 2025

[feature] Added Client-Nodes Functionality #411

Merged

4 tasks

[chores] Reduced Redundancy

96f20a1

[chores] Revert Reduced Redundancy This reverts commit a03cacc.

cestercian force-pushed the fix-zoom-labels branch from e053346 to 96f20a1 Compare September 15, 2025 17:07

Merge branch 'master' into fix-zoom-labels

f27d3a0

nemesifier requested changes Sep 18, 2025

View reviewed changes

[chores] Minor refactoring

e8185fe

nemesifier previously approved these changes Sep 18, 2025

View reviewed changes

nemesifier dismissed their stale review via e8185fe September 18, 2025 19:44

nemesifier approved these changes Sep 18, 2025

View reviewed changes

nemesifier merged commit 094d123 into openwisp:master Sep 18, 2025
4 of 6 checks passed

github-project-automation Bot moved this from In review to Done in [GSoC25] Improve netjsongraph.js resiliency and visualization Sep 18, 2025

nemesifier mentioned this pull request Sep 18, 2025

[change] Graph mode respects showLabelsAtZoomLevel setting #148 #187

Closed

nemesifier changed the title ~~[fix] Improve node label selection and dynamic label visibility~~ [feature] Add option to show node labels only after hitting a certain zoom level Sep 18, 2025

kehach07 mentioned this pull request Dec 24, 2025

Fixed issue 420 Use as much screen estate as possible on initial load #476

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[feature] Add option to show node labels only after hitting a certain zoom level#419

[feature] Add option to show node labels only after hitting a certain zoom level#419
nemesifier merged 31 commits intoopenwisp:masterfrom
cestercian:fix-zoom-labels

cestercian commented Aug 21, 2025 •

edited

Loading

Uh oh!

nemesifier left a comment

Uh oh!

Uh oh!

cestercian commented Aug 21, 2025

Uh oh!

nemesifier left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nemesifier left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nemesifier left a comment •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

cestercian commented Aug 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Checklist

Reference to Existing Issue

Description of Changes

Screenshot

Uh oh!

nemesifier left a comment

Choose a reason for hiding this comment

Labels are visible on initial page load with default settings

Uh oh!

Uh oh!

cestercian commented Aug 21, 2025

Graph Mode

Labels

Uh oh!

nemesifier left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nemesifier left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

nemesifier left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

cestercian commented Aug 21, 2025 •

edited

Loading

nemesifier left a comment •

edited

Loading