Skip to content
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

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

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

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f217864
[change] Graph mode respects showLabelsAtZoomLevel setting #148
pandafy Apr 12, 2023
b06f460
[fix] Fixed issue of resizing graph on zoom
pandafy Apr 27, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 32 additions & 1 deletion src/js/netjsongraph.render.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -296,6 +296,38 @@ class NetJSONGraphRender {
self.echarts.resize();
};

if (
self.echarts.getOption().series[0].zoom <
self.config.showLabelsAtZoomLevel
) {
self.echarts.setOption({
series: [
{
label: {
show: false,
},
},
],
});
}

self.echarts.on("graphRoam", (e) => {
if (
self.echarts.getOption().series[0].zoom >=
self.config.showLabelsAtZoomLevel
) {
self.echarts.setOption({
series: [
{
label: {
show: true,
},
},
],
});
}
});
Copy link
Member Author

Choose a reason for hiding this comment

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

After making these changes, the graph gets reset when the user zooms to a level more than 7. The following video is of Multiple links render example.

network-topology-2023-04-12_21.26.36.mp4

I see that similar implementation has been done for leaflet, but it does not experience this issue

netjsongraph.js/src/js/netjsongraph.render.js

Lines 437 to 459 in 4e9c72b

self.leaflet.on("zoomend", () => {
if (self.leaflet.getZoom() >= self.config.showLabelsAtZoomLevel) {
self.echarts.setOption({
series: [
{
label: {
show: true,
},
},
],
});
} else {
self.echarts.setOption({
series: [
{
label: {
show: false,
},
},
],
});
}
});

@totallynotvaishnav did you experience any similar issue while implementing showLabelsAtZoomLevel setting?

Copy link
Member

Choose a reason for hiding this comment

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

No, I haven't experienced this issue

Copy link
Member Author

@pandafy pandafy Apr 13, 2023 •
edited
Loading

Choose a reason for hiding this comment

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

I edited an example from the Echart's documetation to test if there's a bug in Echarts itself. I created this codepen. The graph in the codepen does not shrink after reaching the zoom level like in the video in my previous comment. I suspect that the problem is here in netjsongraph.js.

network-topology-2023-04-13_19.21.25.mp4


self.event.emit("onLoad");
self.event.emit("onReady");
self.event.emit("renderArray");
Expand Down Expand Up @@ -421,7 +453,6 @@ class NetJSONGraphRender {
self.leaflet.geoJSON.addTo(self.leaflet);
}
}

if (self.leaflet.getZoom() < self.config.showLabelsAtZoomLevel) {
self.echarts.setOption({
series: [
Expand Down