[fix] Remove existing points from map in appendData before calling re…

…nder

Remove the existing points from the map in appendData
before calling the render method. Otherwise,
the original points are duplicated on the map.

- [tests] Added NetJSONGraphRender to allow testing appendData

---------

Co-authored-by: Federico Capoano <[email protected]>

package.json

@@ -25,10 +25,13 @@
   "jest": {
     "testEnvironment": "jsdom",
     "transformIgnorePatterns": [
-      "/node_modules/(?!(kdbush)/)",
+      "/node_modules/(?!(kdbush|echarts|zrender)/)",
       "\\.pnp\\.[^\\/]+$"
     ],
-    "globalSetup": "./jest.global-setup.js"
+    "globalSetup": "./jest.global-setup.js",
+    "moduleNameMapper": {
+      "\\.(css)$": "identity-obj-proxy"
+    }
   },
   "repository": "https://github.com/netjson/netjsongraph.js.git",
   "author": "Federico Capoano <[email protected]> (https://openwisp.io)",
@@ -60,6 +63,7 @@
     "eslint-plugin-react": "^7.33.2",
     "html-webpack-plugin": "^5.6.0",
     "husky": "^9.0.11",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "lint-staged": "^15.2.2",

src/js/netjsongraph.render.js

@@ -654,6 +654,9 @@ class NetJSONGraphRender {
         features: self.data.features.concat(JSONData.features),
       };
 
+      // Remove the existing points from the map. Otherwise,
+      // the original points are duplicated on the map.
+      self.leaflet.geoJSON.removeFrom(self.leaflet);
       self.utils.render();
     }
 

test/netjsongraph.render.test.js

@@ -1,5 +1,5 @@
-import L from "leaflet/dist/leaflet";
 import NetJSONGraph from "../src/js/netjsongraph.core";
+import {NetJSONGraphRender, L} from "../src/js/netjsongraph.render";
 
 const JSONFILE = "test";
 const JSONData = {
@@ -573,9 +573,18 @@ describe("Test when more data is present than maxPointsFetched", () => {
 describe("Test clustering", () => {
   let container;
   const setUp = (map) => {
+    Object.setPrototypeOf(NetJSONGraphRender.prototype, map.utils);
+    map.utils = new NetJSONGraphRender();
+    map.echarts = {
+      setOption: () => {},
+      _api: {
+        getCoordinateSystems: () => [{getLeaflet: () => map.leaflet}],
+      },
+    };
+    map.utils.echarts = map.echarts;
     map.event = map.utils.createEvent();
     map.setConfig({
-      render: () => {},
+      render: map.utils.mapRender,
       onInit() {
         return this.config;
       },
@@ -595,7 +604,6 @@ describe("Test clustering", () => {
       clustering: true,
       clusteringThreshold: 2,
     });
-
     map.setUtils();
     map.render();
     container = document.createElement("div");
@@ -644,6 +652,7 @@ describe("Test clustering", () => {
     map.leaflet = L.map("map", {
       center: [51.505, -0.09],
       zoom: 5,
+      maxZoom: 5,
     });
     map.data = data;
     const clusterObj = map.utils.makeCluster(map);
@@ -722,6 +731,7 @@ describe("Test clustering", () => {
     map.leaflet = L.map("map", {
       center: [51.505, -0.09],
       zoom: 5,
+      maxZoom: 5,
     });
     map.data = data;
     const clusterObj = map.utils.makeCluster(map);
@@ -730,4 +740,29 @@ describe("Test clustering", () => {
     expect(clusterObj.clusters[0].itemStyle.color).toEqual("#c92517");
     document.body.removeChild(container);
   });
+
+  test("appendData removes plotted points from leaflet", () => {
+    const data = {
+      type: "FeatureCollection",
+      features: [
+        {
+          type: "Feature",
+          properties: {},
+          geometry: {
+            type: "Point",
+            coordinates: [27.764892578124996, 46.01222384063236],
+          },
+        },
+      ],
+    };
+    const map = new NetJSONGraph(data);
+    setUp(map);
+    document.body.appendChild(container);
+    map.leaflet = L.map("map", {
+      center: [51.505, -0.09],
+      zoom: 5,
+      maxZoom: 5,
+    });
+    map.utils.appendData(data, map);
+  });
 });

yarn.lock

@@ -3751,6 +3751,11 @@ har-validator@~5.1.3:
     ajv "^6.12.3"
     har-schema "^2.0.0"
 
+harmony-reflect@^1.4.6:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
+  integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
+
 has-bigints@^1.0.1, has-bigints@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
@@ -3952,6 +3957,13 @@ icss-utils@^5.0.0, icss-utils@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
 
+identity-obj-proxy@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz#94d2bda96084453ef36fbc5aaec37e0f79f1fc14"
+  integrity sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==
+  dependencies:
+    harmony-reflect "^1.4.6"
+
 ignore@^5.2.0, ignore@^5.2.4:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"