1.Hover overlay origin

The overlay comes from the default ECharts tooltip. In this PR it’s made explicit and more predictable (confined to viewport, no hide delay).

2.Disabling map labels
Now they can be disabled completely if showMapLabelsAtZoom is set to false.
showLabelsAtZoomLevel is still supported internally for backward compatibility.

3.Overlap between labels and hover overlays
The main cause was labels being interactive. Both graph and map labels are now marked as silent, so tooltips always have interaction priority and overlap no longer causes UX issues.

4.Default behavior and redundancy
Labels remain the default, non-invasive layer (shown only above a zoom threshold), while tooltips remain the primary interactive overlay.

5.Config naming consistency
showLabelsAtZoomLevel (map) is effectively renamed to showMapLabelsAtZoom, aligning it with showGraphLabelsAtZoom, while keeping backward compatibility.

Author: Dhruv-ub

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.render.js

@@ -47,6 +47,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]) {
@@ -170,6 +171,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 {
@@ -332,7 +336,10 @@ class NetJSONGraphRender {
         coordinateSystem: "leaflet",
         data: nodesData,
         animationDuration: 1000,
-        label: configs.mapOptions.nodeConfig.label,
+        label: {
+          ...(configs.mapOptions.nodeConfig.label || {}),
+          silent: true,
+        },
         itemStyle: {
           color: (params) => {
             if (
@@ -538,15 +545,15 @@ class NetJSONGraphRender {
     // 4. Resolve label visibility threshold
     let {showMapLabelsAtZoom} = self.config;
     if (showMapLabelsAtZoom === undefined) {
-      if (self.config.showLabelsAtZoomLevel !== undefined) {
-        showMapLabelsAtZoom = self.config.showLabelsAtZoomLevel;
+      if (self.config.showMapLabelsAtZoom !== undefined) {
+        showMapLabelsAtZoom = self.config.showMapLabelsAtZoom;
       } else {
         showMapLabelsAtZoom = 13;
       }
     }
 
-    const currentZoom = self.leaflet.getZoom();
-    const showLabel =
+    let currentZoom = self.leaflet.getZoom();
+    let showLabel =
       typeof showMapLabelsAtZoom === "number" && currentZoom >= showMapLabelsAtZoom;
 
     if (!showLabel) {
@@ -556,6 +563,7 @@ class NetJSONGraphRender {
             id: "geo-map",
             label: {
               show: false,
+              silent: true,
             },
             emphasis: {
               label: {
@@ -568,14 +576,15 @@ class NetJSONGraphRender {
     }
 
     self.leaflet.on("zoomend", () => {
-      const cZoom = self.leaflet.getZoom();
-      const sLabel = cZoom >= self.config.showLabelsAtZoomLevel;
+      currentZoom = self.leaflet.getZoom();
+      showLabel = currentZoom >= self.config.showMapLabelsAtZoom;
       self.echarts.setOption({
         series: [
           {
             id: "geo-map",
             label: {
-              show: sLabel,
+              show: showLabel,
+              silent: true,
             },
             emphasis: {
               label: {
@@ -594,13 +603,13 @@ class NetJSONGraphRender {
       const zoomOut = document.querySelector(".leaflet-control-zoom-out");
 
       if (zoomIn && zoomOut) {
-        if (Math.round(cZoom) >= maxZoom) {
+        if (Math.round(currentZoom) >= maxZoom) {
           zoomIn.classList.add("leaflet-disabled");
         } else {
           zoomIn.classList.remove("leaflet-disabled");
         }
 
-        if (Math.round(cZoom) <= minZoom) {
+        if (Math.round(currentZoom) <= minZoom) {
           zoomOut.classList.add("leaflet-disabled");
         } else {
           zoomOut.classList.remove("leaflet-disabled");