Fix: Resolve redundant map labels on zoom and add regression test

Author: Dhruv-ub

README.md

@@ -255,8 +255,6 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
   - 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`
 
   Provide an explicit label-visibility threshold for graph mode (ECharts `graph`).

src/js/netjsongraph.js

@@ -32,10 +32,15 @@ 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 (
       this.config.showMapLabelsAtZoom === undefined &&
       this.config.showLabelsAtZoomLevel !== undefined
     ) {
+      console.warn(
+        "showLabelsAtZoomLevel has been renamed to showMapLabelsAtZoom, please update your code accordingly.",
+      );
       this.config.showMapLabelsAtZoom = this.config.showLabelsAtZoomLevel;
     }
     // eslint-disable-next-line no-constructor-return

src/js/netjsongraph.render.js

@@ -180,7 +180,7 @@ class NetJSONGraphRender {
     const baseGraphSeries = {...configs.graphConfig.series};
     const baseGraphLabel = {...(baseGraphSeries.label || {})};
 
-    // Added this for label hover issue
+    // Prevent redundant overlapping labels
     baseGraphLabel.silent = true;
 
     // Shared helper to get current graph zoom level
@@ -577,7 +577,6 @@ class NetJSONGraphRender {
     }
 
     self.echarts.on("mouseover", () => {
-      // FIX: Removed the variable declaration. We use the one from upper scope.
       if (
         showMapLabelsAtZoom &&
         self.leaflet &&
@@ -619,13 +618,13 @@ class NetJSONGraphRender {
 
     self.leaflet.on("zoomend", () => {
       const currentZoom = self.leaflet.getZoom();
-      const show = showMapLabelsAtZoom && currentZoom >= showMapLabelsAtZoom;
+      const showLabel = showMapLabelsAtZoom && currentZoom >= showMapLabelsAtZoom;
       self.echarts.setOption({
         series: [
           {
             id: "geo-map",
             label: {
-              show,
+              show: showLabel,
               silent: true,
             },
             emphasis: {

test/netjsongraph.browser.test.js

@@ -361,4 +361,31 @@ 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.graph !== 'undefined'"),
+      5000,
+      "Timed out waiting for window.graph to initialize",
+    );
+
+    await driver.executeScript(`
+      window.graph.config.showMapLabelsAtZoom = 12;
+      window.graph.leaflet.setZoom(13);
+    `);
+    await driver.sleep(500);
+    let isVisible = await driver.executeScript(
+      "return window.graph.echarts.getOption().series[0].label.show;",
+    );
+    expect(isVisible).toBe(true);
+    await driver.executeScript("window.graph.leaflet.setZoom(10);");
+    await driver.sleep(500);
+    isVisible = await driver.executeScript(
+      "return window.graph.echarts.getOption().series[0].label.show;",
+    );
+    expect(isVisible).toBe(false);
+  });
 });