Fix map label visibility, resolve variable shadowing, and rename config parameter

Author: Dhruv-ub

src/js/netjsongraph.config.js

@@ -301,7 +301,11 @@ const NetJSONGraphDefaultConfig = {
       JSONData.nodes.forEach((node) => {
         if (node.properties && node.properties.status) {
           const status = node.properties.status.toLowerCase();
-          if (status === "ok" || status === "problem" || status === "critical") {
+          if (
+            status === "ok" ||
+            status === "problem" ||
+            status === "critical"
+          ) {
             node.category = status;
           } else {
             // Unrecognized status – leave category undefined to avoid test mismatches
@@ -338,7 +342,7 @@ const NetJSONGraphDefaultConfig = {
         this.gui.metaInfoContainer.style.display = "flex";
       }
     } else {
-      ({ nodeLinkData } = { nodeLinkData: data });
+      ({nodeLinkData} = {nodeLinkData: data});
     }
 
     this.gui.getNodeLinkInfo(type, nodeLinkData);
@@ -354,8 +358,8 @@ const NetJSONGraphDefaultConfig = {
    *
    */
   /* istanbul ignore next */
-  onReady() { },
+  onReady() {},
 };
 
-export const { prepareData } = NetJSONGraphDefaultConfig;
-export default { ...NetJSONGraphDefaultConfig };
+export const {prepareData} = NetJSONGraphDefaultConfig;
+export default {...NetJSONGraphDefaultConfig};

src/js/netjsongraph.render.js

@@ -1,5 +1,10 @@
 import * as echarts from "echarts/core";
-import { GraphChart, EffectScatterChart, LinesChart, ScatterChart } from "echarts/charts";
+import {
+  GraphChart,
+  EffectScatterChart,
+  LinesChart,
+  ScatterChart,
+} from "echarts/charts";
 import {
   TooltipComponent,
   TitleComponent,
@@ -200,7 +205,8 @@ class NetJSONGraphRender {
       {
         ...baseGraphSeries,
         id: "network-graph",
-        type: configs.graphConfig.series.type === "graphGL" ? "graphGL" : "graph",
+        type:
+          configs.graphConfig.series.type === "graphGL" ? "graphGL" : "graph",
         layout:
           configs.graphConfig.series.type === "graphGL"
             ? "forceAtlas2"
@@ -267,7 +273,11 @@ class NetJSONGraphRender {
         if (!location || !location.lng || !location.lat) {
           console.error(`Node ${node.id} position is undefined!`);
         } else {
-          const { nodeEmphasisConfig } = self.utils.getNodeStyle(node, configs, "map");
+          const { nodeEmphasisConfig } = self.utils.getNodeStyle(
+            node,
+            configs,
+            "map",
+          );
 
           let nodeName = "";
           if (typeof node.label === "string") {
@@ -384,7 +394,8 @@ class NetJSONGraphRender {
               : nodeSizeConfig;
           }
           return (
-            (configs.mapOptions.nodeConfig && configs.mapOptions.nodeConfig.nodeSize) ||
+            (configs.mapOptions.nodeConfig &&
+              configs.mapOptions.nodeConfig.nodeSize) ||
             17
           );
         },
@@ -418,7 +429,10 @@ class NetJSONGraphRender {
    *
    */
   graphRender(JSONData, self) {
-    self.utils.echartsSetOption(self.utils.generateGraphOption(JSONData, self), self);
+    self.utils.echartsSetOption(
+      self.utils.generateGraphOption(JSONData, self),
+      self,
+    );
 
     window.onresize = () => {
       self.echarts.resize();
@@ -547,7 +561,8 @@ class NetJSONGraphRender {
 
     const currentZoom = self.leaflet.getZoom();
     const showLabel =
-      typeof showMapLabelsAtZoom === "number" && currentZoom >= showMapLabelsAtZoom;
+      typeof showMapLabelsAtZoom === "number" &&
+      currentZoom >= showMapLabelsAtZoom;
 
     if (!showLabel) {
       self.echarts.setOption({
@@ -595,13 +610,13 @@ class NetJSONGraphRender {
       const zoomOut = document.querySelector(".leaflet-control-zoom-out");
 
       if (zoomIn && zoomOut) {
-        if (Math.round(currentZoom) >= maxZoom) {
+        if (Math.round(cZoom) >= maxZoom) {
           zoomIn.classList.add("leaflet-disabled");
         } else {
           zoomIn.classList.remove("leaflet-disabled");
         }
 
-        if (Math.round(currentZoom) <= minZoom) {
+        if (Math.round(cZoom) <= minZoom) {
           zoomOut.classList.add("leaflet-disabled");
         } else {
           zoomOut.classList.remove("leaflet-disabled");
@@ -630,22 +645,29 @@ class NetJSONGraphRender {
         self.leaflet.getZoom() >= self.config.loadMoreAtZoomLevel &&
         self.hasMoreData
       ) {
-        const data = await self.utils.getBBoxData.call(self, self.JSONParam, bounds);
+        const data = await self.utils.getBBoxData.call(
+          self,
+          self.JSONParam,
+          bounds,
+        );
         self.config.prepareData.call(self, data);
         const dataNodeSet = new Set(self.data.nodes.map((n) => n.id));
         const sourceLinkSet = new Set(self.data.links.map((l) => l.source));
         const targetLinkSet = new Set(self.data.links.map((l) => l.target));
         const nodes = data.nodes.filter((node) => !dataNodeSet.has(node.id));
         const links = data.links.filter(
-          (link) => !sourceLinkSet.has(link.source) && !targetLinkSet.has(link.target),
+          (link) =>
+            !sourceLinkSet.has(link.source) && !targetLinkSet.has(link.target),
         );
         const boundsDataSet = new Set(data.nodes.map((n) => n.id));
         const nonCommonNodes = self.bboxData.nodes.filter(
           (node) => !boundsDataSet.has(node.id),
         );
         const removableNodes = new Set(nonCommonNodes.map((n) => n.id));
 
-        JSONData.nodes = JSONData.nodes.filter((node) => !removableNodes.has(node.id));
+        JSONData.nodes = JSONData.nodes.filter(
+          (node) => !removableNodes.has(node.id),
+        );
         self.bboxData.nodes = self.bboxData.nodes.concat(nodes);
         self.bboxData.links = self.bboxData.links.concat(links);
         JSONData = {
@@ -663,7 +685,8 @@ class NetJSONGraphRender {
       self.config.clustering &&
       self.config.clusteringThreshold < JSONData.nodes.length
     ) {
-      let { clusters, nonClusterNodes, nonClusterLinks } = self.utils.makeCluster(self);
+      let { clusters, nonClusterNodes, nonClusterLinks } =
+        self.utils.makeCluster(self);
 
       // Only show clusters if we're below the disableClusteringAtLevel
       if (self.leaflet.getZoom() > self.config.disableClusteringAtLevel) {
@@ -691,8 +714,8 @@ class NetJSONGraphRender {
           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());
+          const zoomLevel = self.leaflet.getZoom();
+          const targetZoom = Math.min(zoomLevel + 2, self.leaflet.getMaxZoom());
           self.leaflet.setView(
             [params.data.value[1], params.data.value[0]],
             targetZoom,
@@ -807,7 +830,9 @@ class NetJSONGraphRender {
         return true;
       }
       if (existingNodeIds.has(node.id)) {
-        console.warn(`Duplicate node ID ${node.id} detected during merge and skipped.`);
+        console.warn(
+          `Duplicate node ID ${node.id} detected during merge and skipped.`,
+        );
         return false;
       }
       return true;