Fix map label visibility and render performance

- Optimize ECharts setOption to prevent hover frame drops
- Clean up event handlers on re-render to avoid duplication
- Hide only hovered node label and fix zoom visibility bug
- Read config state dynamically
- Disable cluster animation and remove graph label silent flag

Author: Dhruv-ub

src/js/netjsongraph.render.js

@@ -174,9 +174,6 @@ class NetJSONGraphRender {
     const baseGraphSeries = {...configs.graphConfig.series};
     const baseGraphLabel = {...(baseGraphSeries.label || {})};
 
-    // Prevent redundant overlapping labels
-    baseGraphLabel.silent = true;
-
     // Shared helper to get current graph zoom level
     const getGraphZoom = () => {
       try {
@@ -331,7 +328,6 @@ class NetJSONGraphRender {
         name: "nodes",
         coordinateSystem: "leaflet",
         data: nodesData,
-        animationDuration: 1000,
         label: {
           ...(configs.mapOptions.nodeConfig.label || {}),
           ...(!configs.showMapLabelsAtZoom ? {show: false} : {}),
@@ -603,10 +599,10 @@ class NetJSONGraphRender {
       }
     }
 
-    const {showMapLabelsAtZoom} = self.config;
+    // const {showMapLabelsAtZoom} = self.config;
     if (
-      !showMapLabelsAtZoom ||
-      (self.leaflet && self.leaflet.getZoom() < showMapLabelsAtZoom)
+      !self.config.showMapLabelsAtZoom ||
+      (self.leaflet && self.leaflet.getZoom() < self.config.showMapLabelsAtZoom)
     ) {
       self.echarts.setOption({
         series: [
@@ -627,48 +623,20 @@ class NetJSONGraphRender {
     }
 
     self.echarts.on("mouseover", () => {
-      if (
-        showMapLabelsAtZoom &&
-        self.leaflet &&
-        self.leaflet.getZoom() >= showMapLabelsAtZoom
-      ) {
-        self.echarts.setOption({
-          series: [
-            {
-              id: "geo-map",
-              label: {
-                show: false,
-                silent: true,
-              },
-            },
-          ],
-        });
-      }
+      // 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", () => {
-      if (
-        showMapLabelsAtZoom &&
-        self.leaflet &&
-        self.leaflet.getZoom() >= showMapLabelsAtZoom
-      ) {
-        self.echarts.setOption({
-          series: [
-            {
-              id: "geo-map",
-              label: {
-                show: true,
-                silent: true,
-              },
-            },
-          ],
-        });
-      }
+      // The individual node label is automatically restored by ECharts.
     });
 
     self.leaflet.on("zoomend", () => {
       const currentZoom = self.leaflet.getZoom();
-      const showLabel = showMapLabelsAtZoom && currentZoom >= showMapLabelsAtZoom;
+      const showLabel =
+        self.config.showMapLabelsAtZoom &&
+        currentZoom >= self.config.showMapLabelsAtZoom;
       self.echarts.setOption({
         series: [
           {

test/netjsongraph.render.test.js

@@ -1598,16 +1598,11 @@ describe("mapRender label and tooltip interaction (emphasis behavior)", () => {
     expect(mouseOutCall).toBeDefined();
     const onHover = mouseOverCall[1];
     const onUnhover = mouseOutCall[1];
-    // 3. Simulate Mouse Over (Tooltip appears) -> Labels should HIDE
+    // 3. Simulate Mouse Over (Tooltip appears)
     onHover();
-    const hideCall = mockSelf.echarts.setOption.mock.calls.at(-1)[0];
-    const hiddenSeries = hideCall.series.find((s) => s.id === "geo-map");
-    expect(hiddenSeries.label.show).toBe(false);
-    // 4. Simulate Mouse Out (Tooltip gone) -> Labels should SHOW
+    // ECharts native emphasis handles hiding the individual node's label.
+    // 4. Simulate Mouse Out (Tooltip gone)
     onUnhover();
-    const showCall = mockSelf.echarts.setOption.mock.calls.at(-1)[0];
-    const shownSeries = showCall.series.find((s) => s.id === "geo-map");
-    expect(shownSeries.label.show).toBe(true);
   });
 
   test("labels are completely disabled when showMapLabelsAtZoom is false", () => {
@@ -1660,7 +1655,6 @@ describe("mapRender label and tooltip interaction (emphasis behavior)", () => {
     const lowZoomSetOptionCall = mockSelf.echarts.setOption.mock.calls.at(-1)[0];
     const lowZoomSeries = lowZoomSetOptionCall.series.find((s) => s.id === "geo-map");
     expect(lowZoomSeries.label.show).toBe(false);
-    // 6. Verify hover/unhover handlers don't show labels (they check !labelsDisabled)
     const mouseOverCall = mockSelf.echarts.on.mock.calls.find(
       (c) => c[0] === "mouseover",
     );
@@ -1671,16 +1665,7 @@ describe("mapRender label and tooltip interaction (emphasis behavior)", () => {
     expect(mouseOutCall).toBeDefined();
     const onHover = mouseOverCall[1];
     const onUnhover = mouseOutCall[1];
-    // Simulate hover - handler should not call setOption because labelsDisabled is true
-    const callsBeforeHover = mockSelf.echarts.setOption.mock.calls.length;
     onHover();
-    // Since labelsDisabled is true, the handler checks !labelsDisabled && showLabel
-    // which is false, so setOption should not be called
-    expect(mockSelf.echarts.setOption.mock.calls.length).toBe(callsBeforeHover);
-    // Simulate unhover - handler should not call setOption because labelsDisabled is true
-    const callsBeforeUnhover = mockSelf.echarts.setOption.mock.calls.length;
     onUnhover();
-    // Since labelsDisabled is true, the handler should not call setOption
-    expect(mockSelf.echarts.setOption.mock.calls.length).toBe(callsBeforeUnhover);
   });
 });