[fix] Resolve redundant node labels and overlays #454

.nvmrc

@@ -1 +1 @@
-lts/krypton
+lts/krypton

README.md

@@ -253,12 +253,15 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
 
   Whether to allow switching between graph and map render or not. You can also set it `true` to enable it.
 
-- `showLabelsAtZoomLevel`
+- `showMapLabelsAtZoom`
 
-  **Default**: `7`
+  **Default**: `13`
 
-  The zoom level at which the labels are shown. This only works when `render` is set to `map`.
-  In graph mode, the overlapping labels are hidden automatically when zooming.
+  Controls when map labels are shown. This only works when `render` is set to `map`.
+  - If set to `false`, labels are completely disabled and will never be shown.
+  - If set to a number (e.g., `13`), labels will be shown when the map zoom level is greater than or equal to that value.
+
+  In graph mode, the overlapping labels are hidden automatically when zooming (use `showGraphLabelsAtZoom` for graph mode).
 
 - `showGraphLabelsAtZoom`
 

src/js/netjsongraph.config.js

@@ -41,7 +41,7 @@ const NetJSONGraphDefaultConfig = {
   clusterRadius: 80,
   clusterSeparation: 20,
   showMetaOnNarrowScreens: false,
-  showLabelsAtZoomLevel: 13,
+  showMapLabelsAtZoom: 13,
   showGraphLabelsAtZoom: null,
   crs: L.CRS.EPSG3857,
   echartsOption: {

src/js/netjsongraph.js

@@ -32,6 +32,12 @@ class NetJSONGraph {
     this.setupGraph();
     this.config.onInit.call(this.graph);
     this.initializeECharts();
+    if (
+      this.config.showMapLabelsAtZoom === undefined &&
+      this.config.showLabelsAtZoomLevel !== undefined
+    ) {
+      this.config.showMapLabelsAtZoom = this.config.showLabelsAtZoomLevel;
+    }
     // eslint-disable-next-line no-constructor-return
     return this.graph;
   }

src/js/netjsongraph.render.js

@@ -57,6 +57,7 @@ class NetJSONGraphRender {
 
         tooltip: {
           confine: true,
+          hideDelay: 0,
           position: (pos, params, dom, rect, size) => {
             let position = "right";
             if (size.viewSize[0] - pos[0] < size.contentSize[0]) {
@@ -179,6 +180,9 @@ class NetJSONGraphRender {
     const baseGraphSeries = {...configs.graphConfig.series};
     const baseGraphLabel = {...(baseGraphSeries.label || {})};
 
+    // Added this for label hover issue
+    baseGraphLabel.silent = true;
+
     // Shared helper to get current graph zoom level
     const getGraphZoom = () => {
       try {
@@ -329,7 +333,6 @@ class NetJSONGraphRender {
     });
 
     nodesData = nodesData.concat(clusters);
-
     const series = [
       {
         id: "geo-map",
@@ -341,7 +344,11 @@ class NetJSONGraphRender {
         coordinateSystem: "leaflet",
         data: nodesData,
         animationDuration: 1000,
-        label: configs.mapOptions.nodeConfig.label,
+        label: {
+          ...(configs.mapOptions.nodeConfig.label || {}),
+          ...(!configs.showMapLabelsAtZoom ? {show: false} : {}),
+          silent: true,
+        },
         itemStyle: {
           color: (params) => {
             if (
@@ -602,13 +609,18 @@ class NetJSONGraphRender {
       }
     }
 
-    if (self.leaflet.getZoom() < self.config.showLabelsAtZoomLevel) {
+    const {showMapLabelsAtZoom} = self.config;
+    if (
+      !showMapLabelsAtZoom ||
+      (self.leaflet && self.leaflet.getZoom() < showMapLabelsAtZoom)
+    ) {
       self.echarts.setOption({
         series: [
           {
             id: "geo-map",
             label: {
               show: false,
+              silent: true,
             },
             emphasis: {
               label: {
@@ -620,25 +632,66 @@ class NetJSONGraphRender {
       });
     }
 
+    self.echarts.on("mouseover", () => {
+      // FIX: Removed the variable declaration. We use the one from upper scope.
+      if (
+        showMapLabelsAtZoom &&
+        self.leaflet &&
+        self.leaflet.getZoom() >= showMapLabelsAtZoom
+      ) {
+        self.echarts.setOption({
+          series: [
+            {
+              id: "geo-map",
+              label: {
+                show: false,
+                silent: true,
+              },
+            },
+          ],
+        });
+      }
+    });
+
+    self.echarts.on("mouseout", () => {
+      if (
+        showMapLabelsAtZoom &&
+        self.leaflet &&
+        self.leaflet.getZoom() >= showMapLabelsAtZoom
+      ) {
+        self.echarts.setOption({
+          series: [
+            {
+              id: "geo-map",
+              label: {
+                show: true,
+                silent: true,
+              },
+            },
+          ],
+        });
+      }
+    });
+
     self.leaflet.on("zoomend", () => {
       const currentZoom = self.leaflet.getZoom();
-      const showLabel = currentZoom >= self.config.showLabelsAtZoomLevel;
+      const show = showMapLabelsAtZoom && currentZoom >= showMapLabelsAtZoom;
       self.echarts.setOption({
         series: [
           {
             id: "geo-map",
             label: {
-              show: showLabel,
+              show,
+              silent: true,
             },
             emphasis: {
               label: {
-                show: showLabel,
+                show: false,
               },
             },
           },
         ],
       });
-
       // Zoom in/out buttons disabled only when it is equal to min/max zoomlevel
       // Manually handle zoom control state to ensure correct behavior with float zoom levels
       const minZoom = self.leaflet.getMinZoom();
@@ -742,9 +795,9 @@ class NetJSONGraphRender {
             params.componentSubType === "effectScatter") &&
           params.data.cluster
         ) {
-          // Zoom into the clicked cluster instead of expanding it
           const currentZoom = self.leaflet.getZoom();
           const targetZoom = Math.min(currentZoom + 2, self.leaflet.getMaxZoom());
+
           self.leaflet.setView(
             [params.data.value[1], params.data.value[0]],
             targetZoom,