Skip to content

[fix] Enhance label styling in NetJSONGraph config #407

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Merged
merged 9 commits into from
Aug 12, 2025
Merged

[fix] Enhance label styling in NetJSONGraph config #407

merged 9 commits into from
Aug 12, 2025

Conversation

@cestercian
Copy link
Contributor

@cestercian cestercian commented Aug 6, 2025 •
edited
Loading

Added background color, padding, and border radius to node label configuration for improved appearance. Also updated edge label and node label color and styling options for better customization.

Checklist

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

Reference to Existing Issue

Closes #189.

Description of Changes

  • Added backgroundColor, padding, and borderRadius to the node label configuration for improved visual appearance.
  • Updated node and edge label text color, background color, and styling options to allow better customization and readability.
  • Ensured semi-transparent backgrounds are supported for better integration over different map styles.
  • Ensured that the new configuration works with geographic and force-directed graphs.
  • Maintained backward compatibility by providing default values if none are provided.

Screenshot

image

@cestercian
[fix] Enhance label styling in NetJSONGraph config
0fd0484 
Added background color, padding, and border radius to node label configuration for improved appearance. Also updated edge label and node label color and styling options for better customization.
@cestercian cestercian linked an issue Aug 6, 2025 that may be closed by this pull request
[change] Allow showing node names on geo map on high zoom levels #189
Closed
@cestercian cestercian requested a review from nemesifier August 6, 2025 20:04
@cestercian cestercian self-assigned this Aug 6, 2025
@cestercian cestercian added enhancement gsoc-idea Potential step of a GSoC project idea labels Aug 7, 2025
cestercian and others added 3 commits August 8, 2025 03:25
@cestercian
[change] Update network map to European countries and adjust node lab…
3e94490 
…el config

Replaced node IDs and names in netjsonmap.json with country-based identifiers and updated network links to reflect European geography. Changed network label to 'European Network'. In netjsongraph.config.js, node label display is now hidden, with lighter background and increased padding for improved visualization.

Update node label config in test spec

Changed label.show to false, adjusted backgroundColor opacity, and increased label padding in the NetJSONGraph test specification to better reflect updated UI requirements.
@cestercian
[change] Update datasets and iterated over review from Federico
2b9bb77
@nemesifier
[chores] Minor improvements
ba023ab
nemesifier
nemesifier reviewed Aug 8, 2025
View reviewed changes
Copy link
Member

@nemesifier nemesifier left a comment

Choose a reason for hiding this comment

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

I pushed some minor improvements and did some testing:

netjsongraph-wonky-label

It looks really wonky, is there a way to make it look more stable?

@cestercian
Merge branch 'master' into 189-change-allow-showing-node-names-on-geo…
38b123b 
…-map-on-high-zoom-levels
@cestercian
[fix] Sync label visibility with zoom level in graph
dcda6a7 
Added logic to control label visibility for both normal and emphasis states based on the current zoom level in NetJSONGraphRender. This ensures labels are shown or hidden consistently as users zoom in or out.
@cestercian
Merge pull request #409 from cestercian/189
54b104d 
[fix] Sync label visibility with zoom level in graph
@cestercian
Copy link
Contributor Author

cestercian commented Aug 11, 2025 •
edited
Loading

Screen.Recording.2025-08-11.at.8.04.16.AM.mov

ECharts shows labels in emphasis state even if normal label.show is false.
When hovering between node and its label, emphasis toggles rapidly, causing flicker.
Fix: sync emphasis.label.show with label.show on initial zoom and in zoomend handler to keep labels consistently hidden or visible by zoom level.

@cestercian cestercian requested a review from nemesifier August 11, 2025 02:40
nemesifier
nemesifier reviewed Aug 11, 2025
View reviewed changes
Copy link
Member

@nemesifier nemesifier left a comment

Choose a reason for hiding this comment

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

It's a lot better @cestercian, I still see some slight movement when hovering:

netjsongraph-wonky-label

It seems the circle becomes slightly bigger and the label moves up a couple of pixels. Can we avoid this?

@cestercian cestercian mentioned this pull request Aug 12, 2025
Merged
7 tasks
@cestercian
[fix] Add emphasis scale option to node config
6b45940 
Introduced an 'emphasis' property with a 'scale' value to the node configuration in NetJSONGraphDefaultConfig, allowing nodes to scale on emphasis.
@cestercian
Copy link
Contributor Author

cestercian commented Aug 12, 2025

Screen.Recording.2025-08-12.at.10.24.33.PM.mov

Hey @nemesifier , I have updated the configuration to match the desired result please let me know if any other changes are required

@cestercian cestercian requested a review from nemesifier August 12, 2025 17:21
@cestercian
Copy link
Contributor Author

cestercian commented Aug 12, 2025

Related to openwisp/openwisp-monitoring#688

@nemesifier nemesifier merged commit f602022 into master Aug 12, 2025
7 checks passed
@nemesifier nemesifier deleted the 189-change-allow-showing-node-names-on-geo-map-on-high-zoom-levels branch August 12, 2025 19:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@nemesifier nemesifier nemesifier approved these changes

Assignees

@cestercian cestercian

Labels

enhancement gsoc-idea Potential step of a GSoC project idea

Projects

[GSoC25] Improve netjsongraph.js resiliency and visualization
Status: Done

Milestone

[GSoC25] Improve netjsongraph.js resi...

Development

Successfully merging this pull request may close these issues.

[change] Allow showing node names on geo map on high zoom levels

3 participants

@cestercian @nemesifier