Skip to content

Commit 3a5f95d

Browse files
Dhruv-ubDhruv-ub
committed
[netjsongraph] Fix redundant node labels and overlays #454
Renamed `showLabelsAtZoomLevel` to `showMapLabelsAtZoom` for clarity while maintaining backward compatibility in `NetJSONGraphDefaultConfig`. Updated `mapRender` to hide emphasis labels on hover to prevent overlap with overlays. Also if `showMapLabelsAtZoom` is set to false in netjsongraph.config.js, labels will not be shown at any zoom level. Fixes #454
1 parent 69cf085 commit 3a5f95d

2 files changed

Lines changed: 49 additions & 34 deletions

File tree

‎src/js/netjsongraph.config.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const NetJSONGraphDefaultConfig = {
4141
clusterRadius: 80,
4242
clusterSeparation: 20,
4343
showMetaOnNarrowScreens: false,
44-
showLabelsAtZoomLevel: 13,
44+
showMapLabelsAtZoom: 13,
4545
showGraphLabelsAtZoom: null,
4646
crs: L.CRS.EPSG3857,
4747
echartsOption: {
@@ -338,7 +338,7 @@ const NetJSONGraphDefaultConfig = {
338338
this.gui.metaInfoContainer.style.display = "flex";
339339
}
340340
} else {
341-
({nodeLinkData} = {nodeLinkData: data});
341+
({ nodeLinkData } = { nodeLinkData: data });
342342
}
343343

344344
this.gui.getNodeLinkInfo(type, nodeLinkData);
@@ -354,8 +354,8 @@ const NetJSONGraphDefaultConfig = {
354354
*
355355
*/
356356
/* istanbul ignore next */
357-
onReady() {},
357+
onReady() { },
358358
};
359359

360-
export const {prepareData} = NetJSONGraphDefaultConfig;
361-
export default {...NetJSONGraphDefaultConfig};
360+
export const { prepareData } = NetJSONGraphDefaultConfig;
361+
export default { ...NetJSONGraphDefaultConfig };

‎src/js/netjsongraph.render.js‎

Lines changed: 44 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,16 @@
11
import * as echarts from "echarts/core";
2-
import {GraphChart, EffectScatterChart, LinesChart, ScatterChart} from "echarts/charts";
2+
import { GraphChart, EffectScatterChart, LinesChart, ScatterChart } from "echarts/charts";
33
import {
44
TooltipComponent,
55
TitleComponent,
66
ToolboxComponent,
77
LegendComponent,
88
GraphicComponent,
99
} from "echarts/components";
10-
import {SVGRenderer} from "echarts/renderers";
10+
import { SVGRenderer } from "echarts/renderers";
1111
import L from "leaflet/dist/leaflet";
1212
import "echarts-gl";
13-
import {addPolygonOverlays} from "./netjsongraph.geojson";
13+
import { addPolygonOverlays } from "./netjsongraph.geojson";
1414

1515
echarts.use([
1616
GraphChart,
@@ -106,7 +106,7 @@ class NetJSONGraphRender {
106106
? clickElement("link", params.data.link)
107107
: !params.data.cluster && clickElement("node", params.data.node);
108108
},
109-
{passive: true},
109+
{ passive: true },
110110
);
111111

112112
return echartsLayer;
@@ -129,7 +129,7 @@ class NetJSONGraphRender {
129129
const configs = self.config;
130130
const nodes = JSONData.nodes.map((node) => {
131131
const nodeResult = JSON.parse(JSON.stringify(node));
132-
const {nodeStyleConfig, nodeSizeConfig, nodeEmphasisConfig} =
132+
const { nodeStyleConfig, nodeSizeConfig, nodeEmphasisConfig } =
133133
self.utils.getNodeStyle(node, configs, "graph");
134134

135135
nodeResult.itemStyle = nodeStyleConfig;
@@ -154,21 +154,21 @@ class NetJSONGraphRender {
154154
});
155155
const links = JSONData.links.map((link) => {
156156
const linkResult = JSON.parse(JSON.stringify(link));
157-
const {linkStyleConfig, linkEmphasisConfig} = self.utils.getLinkStyle(
157+
const { linkStyleConfig, linkEmphasisConfig } = self.utils.getLinkStyle(
158158
link,
159159
configs,
160160
"graph",
161161
);
162162

163163
linkResult.lineStyle = linkStyleConfig;
164-
linkResult.emphasis = {lineStyle: linkEmphasisConfig.linkStyle};
164+
linkResult.emphasis = { lineStyle: linkEmphasisConfig.linkStyle };
165165

166166
return linkResult;
167167
});
168168

169169
// Clone label config to avoid mutating defaults
170-
const baseGraphSeries = {...configs.graphConfig.series};
171-
const baseGraphLabel = {...(baseGraphSeries.label || {})};
170+
const baseGraphSeries = { ...configs.graphConfig.series };
171+
const baseGraphLabel = { ...(baseGraphSeries.label || {}) };
172172

173173
// Shared helper to get current graph zoom level
174174
const getGraphZoom = () => {
@@ -211,8 +211,8 @@ class NetJSONGraphRender {
211211
];
212212
const legend = categories.length
213213
? {
214-
data: categories,
215-
}
214+
data: categories,
215+
}
216216
: undefined;
217217

218218
return {
@@ -236,7 +236,7 @@ class NetJSONGraphRender {
236236
*/
237237
generateMapOption(JSONData, self, clusters = []) {
238238
const configs = self.config;
239-
const {nodes, links} = JSONData;
239+
const { nodes, links } = JSONData;
240240
const flatNodes = JSONData.flatNodes || {};
241241
const linesData = [];
242242
let nodesData = [];
@@ -262,12 +262,12 @@ class NetJSONGraphRender {
262262
if (!node.properties) {
263263
console.error(`Node ${node.id} position is undefined!`);
264264
} else {
265-
const {location} = node.properties;
265+
const { location } = node.properties;
266266

267267
if (!location || !location.lng || !location.lat) {
268268
console.error(`Node ${node.id} position is undefined!`);
269269
} else {
270-
const {nodeEmphasisConfig} = self.utils.getNodeStyle(node, configs, "map");
270+
const { nodeEmphasisConfig } = self.utils.getNodeStyle(node, configs, "map");
271271

272272
let nodeName = "";
273273
if (typeof node.label === "string") {
@@ -296,7 +296,7 @@ class NetJSONGraphRender {
296296
} else if (!flatNodes[link.target]) {
297297
console.warn(`Node ${link.target} does not exist!`);
298298
} else {
299-
const {linkStyleConfig, linkEmphasisConfig} = self.utils.getLinkStyle(
299+
const { linkStyleConfig, linkEmphasisConfig } = self.utils.getLinkStyle(
300300
link,
301301
configs,
302302
"map",
@@ -313,7 +313,7 @@ class NetJSONGraphRender {
313313
],
314314
],
315315
lineStyle: linkStyleConfig,
316-
emphasis: {lineStyle: linkEmphasisConfig.linkStyle},
316+
emphasis: { lineStyle: linkEmphasisConfig.linkStyle },
317317
link,
318318
});
319319
}
@@ -372,15 +372,15 @@ class NetJSONGraphRender {
372372
);
373373
}
374374
if (params.data && params.data.node) {
375-
const {nodeSizeConfig} = self.utils.getNodeStyle(
375+
const { nodeSizeConfig } = self.utils.getNodeStyle(
376376
params.data.node,
377377
configs,
378378
"map",
379379
);
380380
return typeof nodeSizeConfig === "object"
381381
? (configs.mapOptions.nodeConfig &&
382-
configs.mapOptions.nodeConfig.nodeSize) ||
383-
17
382+
configs.mapOptions.nodeConfig.nodeSize) ||
383+
17
384384
: nodeSizeConfig;
385385
}
386386
return (
@@ -437,7 +437,7 @@ class NetJSONGraphRender {
437437
option.series[0] &&
438438
option.series[0].zoom >= self.config.showGraphLabelsAtZoom;
439439
if (labelsVisible !== self._labelsVisible) {
440-
self.echarts.resize({animation: false, silent: true});
440+
self.echarts.resize({ animation: false, silent: true });
441441
self._labelsVisible = labelsVisible;
442442
}
443443
});
@@ -531,11 +531,25 @@ class NetJSONGraphRender {
531531
}
532532

533533
if (bounds && bounds.isValid()) {
534-
self.leaflet.fitBounds(bounds, {padding: [20, 20]});
534+
self.leaflet.fitBounds(bounds, { padding: [20, 20] });
535535
}
536536
}
537537

538-
if (self.leaflet.getZoom() < self.config.showLabelsAtZoomLevel) {
538+
// 4. Resolve label visibility threshold
539+
let { showMapLabelsAtZoom } = self.config;
540+
if (showMapLabelsAtZoom === undefined) {
541+
if (self.config.showLabelsAtZoomLevel !== undefined) {
542+
showMapLabelsAtZoom = self.config.showLabelsAtZoomLevel;
543+
} else {
544+
showMapLabelsAtZoom = 13;
545+
}
546+
}
547+
548+
const currentZoom = self.leaflet.getZoom();
549+
const showLabel =
550+
typeof showMapLabelsAtZoom === "number" && currentZoom >= showMapLabelsAtZoom;
551+
552+
if (!showLabel) {
539553
self.echarts.setOption({
540554
series: [
541555
{
@@ -554,18 +568,19 @@ class NetJSONGraphRender {
554568
}
555569

556570
self.leaflet.on("zoomend", () => {
557-
const currentZoom = self.leaflet.getZoom();
558-
const showLabel = currentZoom >= self.config.showLabelsAtZoomLevel;
571+
const cZoom = self.leaflet.getZoom();
572+
const sLabel =
573+
typeof showMapLabelsAtZoom === "number" && cZoom >= showMapLabelsAtZoom;
559574
self.echarts.setOption({
560575
series: [
561576
{
562577
id: "geo-map",
563578
label: {
564-
show: showLabel,
579+
show: sLabel,
565580
},
566581
emphasis: {
567582
label: {
568-
show: showLabel,
583+
show: false, // Ensure label is hidden on hover to avoid overlap with tooltip
569584
},
570585
},
571586
},
@@ -648,7 +663,7 @@ class NetJSONGraphRender {
648663
self.config.clustering &&
649664
self.config.clusteringThreshold < JSONData.nodes.length
650665
) {
651-
let {clusters, nonClusterNodes, nonClusterLinks} = self.utils.makeCluster(self);
666+
let { clusters, nonClusterNodes, nonClusterLinks } = self.utils.makeCluster(self);
652667

653668
// Only show clusters if we're below the disableClusteringAtLevel
654669
if (self.leaflet.getZoom() > self.config.disableClusteringAtLevel) {
@@ -732,7 +747,7 @@ class NetJSONGraphRender {
732747
if (self.config.render === self.utils.mapRender) {
733748
const opts = self.utils.generateMapOption(JSONData, self);
734749
opts.series.forEach((obj, index) => {
735-
self.echarts.appendData({seriesIndex: index, data: obj.data});
750+
self.echarts.appendData({ seriesIndex: index, data: obj.data });
736751
});
737752
// modify this.data
738753
self.utils.mergeData(JSONData, self);
@@ -810,4 +825,4 @@ class NetJSONGraphRender {
810825
}
811826
}
812827

813-
export {NetJSONGraphRender, echarts, L};
828+
export { NetJSONGraphRender, echarts, L };

0 commit comments

Comments
 (0)