[feature] Change map state on browser go back or forward

Author: dee077

README.md

@@ -465,24 +465,21 @@ NetJSON format used internally is based on [networkgraph](http://netjson.org/rfc
 
   You can customize the style of GeoJSON features using `style` property. The list of all available properties can be found in the [Leaflet documentation](https://leafletjs.com/reference.html#geojson).
 
-<!-- Todo: Update this -->
+- `bookmarkableActions`
 
-- `hashParams`
-
-  Configuration for adding hash parameters to the URL when a node is clicked.
+  Configuration for adding url fragments when a node is clicked.
 
   ```JS
-      hashParams:{
-        show: boolean,
-        type: string
+      bookmarkableActions:{
+        enabled: boolean,
+        id: string
       }
   ```
 
-  You can enable or disable adding hash parameters by setting show to true or false. When enabled, the following parameters are added to the URL:
-  1. type – A prefix used to uniquely identify the map node.
-  2. nodeId – The ID of the selected node.
-  3. zoom – The current zoom level of the map.
-     **Note: Zoom is only applied when type is set to `geoMap`**
+  You can enable or disable adding url fragments by setting enabled to true or false. When enabled, the following parameters are added to the URL:
+  1. id – A prefix used to uniquely identify the map.
+  2. nodeId – The id of the selected node.
+     When a URL containing these fragments is opened, the click event associated with the given nodeId is triggered, and if the map is based on Leaflet, the view will automatically center on that node.
 
 - `onInit`
 

src/js/netjsongraph.core.js

@@ -17,6 +17,7 @@ class NetJSONGraph {
     // if explicitly set it to somthing like L.CRS.Simple.
     this.config.crs = NetJSONGraphDefaultConfig.crs;
     this.JSONParam = this.utils.isArray(JSONParam) ? JSONParam : [JSONParam];
+    this.utils.setupHashChangeHandler(this);
   }
 
   /**

src/js/netjsongraph.render.js

@@ -152,8 +152,8 @@ class NetJSONGraphRender {
       // Preserve original NetJSON node for sidebar use
       /* eslint-disable no-underscore-dangle */
       nodeResult._source = JSON.parse(JSON.stringify(node));
-      // Store the clicked node in this.selectedNode for easy access later without need for traverse
-      self.utils.setSelectedNodeFromUrlFragments(self, fragments, node);
+      // Store the clicked node in this.indexedNode for easy access later without need for traverse
+      self.utils.setIndexedNodeFromUrlFragments(self, fragments, node);
       return nodeResult;
     });
     const links = JSONData.links.map((link) => {
@@ -293,8 +293,8 @@ class NetJSONGraphRender {
           });
         }
       }
-      // Store the clicked node in this.selectedNode for easy access later without need for traverse
-      self.utils.setSelectedNodeFromUrlFragments(self, fragments, node);
+      // Store the clicked node in this.indexedNode for easy access later without need for traverse
+      self.utils.setIndexedNodeFromUrlFragments(self, fragments, node);
     });
     links.forEach((link) => {
       if (!flatNodes[link.source]) {

src/js/netjsongraph.util.js

@@ -1214,61 +1214,77 @@ class NetJSONGraphUtil {
   }
 
   setUrlFragments(self, params) {
-    if (!self.config.bookmarkableActions.enabled) return;
+    if (!self.config.bookmarkableActions.enabled || params.data.cluster) return;
     const fragments = this.parseUrlFragments();
     const id = self.config.bookmarkableActions.id;
-    let nodeId, zoom;
+    let nodeId;
+    self.indexedNode = self.indexedNode || {};
     if (params.componentSubType === "graph") {
       nodeId = params.data.id;
+      self.indexedNode[nodeId] = params.data;
     }
     if (["scatter", "effectScatter"].includes(params.componentSubType)) {
       nodeId = params.data.node.id;
+      self.indexedNode[nodeId] = params.data.node;
     }
-    zoom = self?.leaflet?.getZoom();
-    if (!fragments[id] || !(fragments[id] instanceof URLSearchParams)) {
+    if (!fragments[id]) {
       fragments[id] = new URLSearchParams();
       fragments[id].set("id", id);
     }
     fragments[id].set("nodeId", nodeId);
-    if (zoom != null) {
-      fragments[id].set("zoom", zoom);
-    }
-    window.location.hash = this.generateUrlFragments(fragments);
+    const newHash = this.generateUrlFragments(fragments);
+    const state = self.indexedNode[nodeId];
+    history.pushState(state, "", `#${newHash}`);
   }
 
-  removeUrlFragment(self, id) {
-    if (!self.config.bookmarkableActions.enabled) return;
-
+  removeUrlFragment(id) {
     const fragments = this.parseUrlFragments();
     if (fragments[id]) {
       delete fragments[id];
     }
-    window.location.hash = this.generateUrlFragments(fragments);
+    const newHash = this.generateUrlFragments(fragments);
+    const state = {id};
+    history.pushState(state, "", `#${newHash}`);
   }
 
-  setSelectedNodeFromUrlFragments(self, fragments, node) {
-    if (!self.config.bookmarkableActions.enabled || !Object.keys(fragments).length) return;
+  setIndexedNodeFromUrlFragments(self, fragments, node) {
+    if (!self.config.bookmarkableActions.enabled || !Object.keys(fragments).length)
+      return;
     const id = self.config.bookmarkableActions.id;
     const nodeId = fragments[id]?.get("nodeId");
-    const zoom = fragments[id]?.get("zoom");
     if (nodeId === node.id) {
-      self.selectedNode = node;
-      if (zoom != null) self.selectedNode.zoom = Number(zoom);
+      self.indexedNode = self.indexedNode || {};
+      self.indexedNode[nodeId] = node;
     }
   }
 
   applyUrlFragmentState(self) {
     if (!self.config.bookmarkableActions.enabled) return;
-    const node = self.selectedNode;
-    if (!node) return;
+    const id = self.config.bookmarkableActions.id;
+    const fragments = self.utils.parseUrlFragments();
+    const nodeId = fragments[id]?.get("nodeId");
+    if (!self.indexedNode || !self.indexedNode[nodeId]) return;
+    const node = self.indexedNode[nodeId];
     const nodeType =
       self.config.graphConfig.series.type || self.config.mapOptions.nodeConfig.type;
-    const { location, zoom } = node;
-    if (["scatter", "effectScatter"].includes(nodeType) && zoom != null) {
+    const {location, cluster} = node;
+    if (["scatter", "effectScatter"].includes(nodeType)) {
+      const zoom =
+        cluster != null ? self.config.disableClusteringAtLevel : self.leaflet.getZoom();
       self.leaflet.setView([location.lat, location.lng], zoom);
     }
     self.config.onClickElement.call(self, "node", node);
   }
+
+  setupHashChangeHandler(self) {
+    window.addEventListener("popstate", () => {
+      const currentNode = history.state;
+      if (currentNode != null && !self.indexedNode[currentNode.id]) {
+        self.indexedNode[currentNode.id] = currentNode;
+      }
+      this.applyUrlFragmentState(self);
+    });
+  }
 }
 
 export default NetJSONGraphUtil;

test/netjsongraph.render.test.js

@@ -509,6 +509,8 @@ describe("generateMapOption - node processing and dynamic styling", () => {
           linkStyleConfig: {},
           linkEmphasisConfig: {linkStyle: {}},
         })),
+        parseUrlFragments: jest.fn(),
+        setIndexedNodeFromUrlFragments: jest.fn(),
       },
     };
   });
@@ -980,6 +982,8 @@ describe("Test disableClusteringAtLevel: 0", () => {
           nonClusterNodes: [],
           nonClusterLinks: [],
         })),
+        parseUrlFragments: jest.fn(),
+        setIndexedNodeFromUrlFragments: jest.fn(),
       },
       event: {
         emit: jest.fn(),
@@ -1076,6 +1080,8 @@ describe("Test leaflet zoomend handler and zoom control state", () => {
         geojsonToNetjson: jest.fn(() => ({nodes: [], links: []})),
         generateMapOption: jest.fn(() => ({series: []})),
         echartsSetOption: jest.fn(),
+        parseUrlFragments: jest.fn(),
+        setIndexedNodeFromUrlFragments: jest.fn(),
       },
       event: {
         emit: jest.fn(),
@@ -1217,6 +1223,8 @@ describe("mapRender – polygon overlay & moveend bbox logic", () => {
         echartsSetOption: jest.fn(),
         deepMergeObj: jest.fn((a, b) => ({...a, ...b})),
         getBBoxData: jest.fn(() => Promise.resolve({nodes: [{id: "n1"}], links: []})),
+        parseUrlFragments: jest.fn(),
+        setIndexedNodeFromUrlFragments: jest.fn(),
       },
       event: {emit: jest.fn()},
     };

test/netjsongraph.util.test.js

@@ -203,12 +203,11 @@ describe("Test URL fragment utilities", () => {
 
   test("Test parseUrlFragments parses multiple fragments and decodes values", () => {
     window.location.hash =
-      "#id=geoMap&nodeId=abc%3A123&zoom=5;id=indoorMap&nodeId=indoor-node&zoom=5";
+      "#id=geoMap&nodeId=abc%3A123;id=indoorMap&nodeId=indoor-node";
     const fragments = utils.parseUrlFragments();
 
     expect(Object.keys(fragments).sort()).toEqual(["geoMap", "indoorMap"].sort());
-    expect(fragments.geoMap.get("nodeId")).toBe("abc:123"); // percent-decoded
-    expect(fragments.geoMap.get("zoom")).toBe("5");
+    expect(fragments.geoMap.get("nodeId")).toBe("abc:123");
     expect(fragments.indoorMap.get("nodeId")).toBe("indoor-node");
   });
 
@@ -217,7 +216,6 @@ describe("Test URL fragment utilities", () => {
       config: {
         bookmarkableActions: {enabled: true, id: "geoMap"},
       },
-      leaflet: {getZoom: () => 7},
     };
     const params = {
       componentSubType: "effectScatter",
@@ -230,61 +228,58 @@ describe("Test URL fragment utilities", () => {
     expect(fragments.geoMap).toBeDefined();
     expect(fragments.geoMap.get("id")).toBe("geoMap");
     expect(fragments.geoMap.get("nodeId")).toBe("node-1");
-    expect(fragments.geoMap.get("zoom")).toBe("7");
   });
 
   test("Test setUrlFragments updates an existing fragment and preserves others", () => {
     window.location.hash = "id=graph&nodeId=node-1";
 
     const self = {
       config: {bookmarkableActions: {enabled: true, id: "geo"}},
-      leaflet: {getZoom: () => 9},
+      indexedNode: undefined,
     };
     const params = {
       componentSubType: "graph",
       data: {id: "node-2"},
     };
 
     utils.setUrlFragments(self, params);
-
     const fragments = utils.parseUrlFragments();
+
     expect(fragments.graph).toBeDefined();
     expect(fragments.graph.get("nodeId")).toBe("node-1");
-
     expect(fragments.geo.get("nodeId")).toBe("node-2");
-    expect(fragments.geo.get("zoom")).toBe("9");
   });
 
   test("removeUrlFragment deletes the fragment for the given id", () => {
     window.location.hash = "id=keep&nodeId=a;id=removeMe&nodeId=b";
-    const self = {config: {bookmarkableActions: {enabled: true, id: "removeMe"}}};
-    utils.removeUrlFragment(self, "removeMe");
+    utils.removeUrlFragment("removeMe");
     const fragments = utils.parseUrlFragments();
     expect(fragments.keep).toBeDefined();
     expect(fragments.removeMe).toBeUndefined();
     expect(window.location.hash).not.toContain("removeMe");
   });
 
-  test("Test setSelectedNodeFromUrlFragments sets selectedNode and numeric zoom", () => {
+  test("Test setIndexedNodeFromUrlFragments sets indexedNode and numeric zoom", () => {
     window.location.hash = "#id=geo&nodeId=abc&zoom=4";
     const self = {config: {bookmarkableActions: {enabled: true, id: "geo"}}};
     const fragments = utils.parseUrlFragments();
 
     const node = {id: "abc", properties: {}};
-    utils.setSelectedNodeFromUrlFragments(self, fragments, node);
+    utils.setIndexedNodeFromUrlFragments(self, fragments, node);
 
-    expect(self.selectedNode).toBe(node);
-    expect(self.selectedNode.zoom).toBe(4);
+    expect(self.indexedNode).toBeDefined();
+    expect(self.indexedNode.abc).toBe(node);
+    expect(self.indexedNode.abc.id).toBe("abc");
   });
 
-  test("Test applyUrlFragmentState calls map.setView and triggers onClickElement", () => {
+  test("applyUrlFragmentState calls map.setView and triggers onClickElement", () => {
     const mockSetView = jest.fn();
     const mockOnClick = jest.fn();
 
     const node = {
       id: "n1",
-      properties: {location: {lat: 12.1, lng: 77.5}},
-      zoom: 6,
+      location: {lat: 12.1, lng: 77.5},
+      cluster: null,
     };
 
     const self = {
@@ -294,10 +289,12 @@ describe("Test URL fragment utilities", () => {
         mapOptions: {nodeConfig: {type: "scatter"}},
         onClickElement: mockOnClick,
       },
-      selectedNode: node,
-      leaflet: {setView: mockSetView},
+      indexedNode: {n1: node},
+      leaflet: {setView: mockSetView, getZoom: () => 6},
+      utils,
     };
 
+    window.location.hash = "#id=geo&nodeId=n1";
     utils.applyUrlFragmentState(self);
 
     expect(mockSetView).toHaveBeenCalledWith([12.1, 77.5], 6);
@@ -308,12 +305,12 @@ describe("Test URL fragment utilities", () => {
     const recorder = [];
 
     const emitter = {
-      _handlers: {},
+      handlers: {},
       once(event, handler) {
-        this._handlers[event] = handler;
+        this.handlers[event] = handler;
       },
       emit(event) {
-        const h = this._handlers[event];
+        const h = this.handlers[event];
         if (h) h();
       },
     };