[fix] Resolve redundant node labels and overlays #454

README.md

@@ -308,12 +308,13 @@ 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.
 
 - `showGraphLabelsAtZoom`
 

src/js/netjsongraph.config.js

@@ -42,7 +42,7 @@ const NetJSONGraphDefaultConfig = {
   clusterRadius: 80,
   clusterSeparation: 20,
   showMetaOnNarrowScreens: false,
-  showLabelsAtZoomLevel: 13,
+  showMapLabelsAtZoom: 13,
   showGraphLabelsAtZoom: null,
   echartsOption: {
     aria: {

src/js/netjsongraph.js

@@ -36,6 +36,17 @@ class NetJSONGraph {
     this.setupGraph();
     this.config.onInit.call(this.graph);
     this.initializeECharts();
+    // Maintain backward compatibility with old config option "showLabelsAtZoomLevel"
+    // TODO: remove in future versions
+    if (
+      config.showMapLabelsAtZoom === undefined &&
+      config.showLabelsAtZoomLevel !== undefined
+    ) {
+      console.warn(
+        "showLabelsAtZoomLevel has been renamed to showMapLabelsAtZoom, please update your code accordingly.",
+      );
+      this.graph.config.showMapLabelsAtZoom = 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]) {
@@ -320,15 +321,18 @@ class NetJSONGraphRender {
     });
 
     nodesData = nodesData.concat(clusters);
-
     const series = [
       {
         id: "geo-map",
         type: "scatter",
         name: "nodes",
         coordinateSystem: "leaflet",
         data: nodesData,
-        label: configs.mapOptions.nodeConfig.label,
+        label: {
+          ...(configs.mapOptions.nodeConfig.label || {}),
+          ...(!configs.showMapLabelsAtZoom ? {show: false} : {}),
+          silent: true,
+        },
         itemStyle: {
           color: (params) => {
             if (
@@ -595,13 +599,17 @@ class NetJSONGraphRender {
       }
     }
 
-    if (self.leaflet.getZoom() < self.config.showLabelsAtZoomLevel) {
+    if (
+      !self.config.showMapLabelsAtZoom ||
+      (self.leaflet && self.leaflet.getZoom() < self.config.showMapLabelsAtZoom)
+    ) {
       self.echarts.setOption({
         series: [
           {
             id: "geo-map",
             label: {
               show: false,
+              silent: true,
             },
             emphasis: {
               label: {
@@ -613,25 +621,37 @@ class NetJSONGraphRender {
       });
     }
 
+    self.echarts.on("mouseover", () => {
+      // ECharts natively handles hiding the individual node's label on hover
+      // via the `emphasis: { label: { show: false } }` configuration.
+      // This listener is kept for compatibility with existing tests.
+    });
+
+    self.echarts.on("mouseout", () => {
+      // The individual node label is automatically restored by ECharts.
+    });
+
     self.leaflet.on("zoomend", () => {
       const currentZoom = self.leaflet.getZoom();
-      const showLabel = currentZoom >= self.config.showLabelsAtZoomLevel;
+      const showLabel =
+        self.config.showMapLabelsAtZoom &&
+        currentZoom >= self.config.showMapLabelsAtZoom;
       self.echarts.setOption({
         series: [
           {
             id: "geo-map",
             label: {
               show: showLabel,
+              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();
@@ -730,10 +750,14 @@ class NetJSONGraphRender {
       );
 
       self.echarts.on("click", (params) => {
-        if (params.componentSubType === "scatter" && params.data.cluster) {
-          // Zoom into the clicked cluster instead of expanding it
+        if (
+          (params.componentSubType === "scatter" ||
+            params.componentSubType === "effectScatter") &&
+          params.data.cluster
+        ) {
           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,

test/netjsongraph.browser.test.js

@@ -361,6 +361,33 @@ describe("Chart Rendering Test", () => {
     expect(consoleErrors.length).toBe(0);
     expect(canvas).not.toBeNull();
   });
+  test("Regression: Labels should hide when zoomed out below showMapLabelsAtZoom", async () => {
+    await driver.get(urls.geographicMap);
+    await getElementByCss(driver, ".ec-extension-leaflet", 2000);
+
+    // FIX: Removed 'async' and 'await' to satisfy linter
+    await driver.wait(
+      () => driver.executeScript("return typeof window.map !== 'undefined'"),
+      5000,
+      "Timed out waiting for window.map to initialize",
+    );
+
+    await driver.executeScript(`
+      window.map.config.showMapLabelsAtZoom = 12;
+      window.map.leaflet.setZoom(13);
+    `);
+    await driver.sleep(500);
+    let isVisible = await driver.executeScript(
+      "return window.map.echarts.getOption().series[0].label.show;",
+    );
+    expect(isVisible).toBe(true);
+    await driver.executeScript("window.map.leaflet.setZoom(10);");
+    await driver.sleep(500);
+    isVisible = await driver.executeScript(
+      "return window.map.echarts.getOption().series[0].label.show;",
+    );
+    expect(isVisible).toBe(false);
+  });
 
   test("moveNodeInRealTime: test in Geographic map example", async () => {
     await driver.get(urls.geographicMap);